This pattern is currently under development.
]} + message_heading={[ ++ This pattern is currently under development. +
, + ]} type="info" /> -- We have a responsibility to ask users for consent when we want to collect, store, or use their data especially personal information. -
-- This pattern asks the user to: -
-+ We have a responsibility to ask users for consent when we want to collect, + store, or use their data especially personal information. +
+This pattern asks the user to:
+-Use this pattern when: -
+Use this pattern when:
-Don’t use this pattern when: -
+Don’t use this pattern when:
-When you collect a user’s data, make sure the following are present, easy to find, read, and use. + When you collect a user’s data, make sure the following are{" "} + present, easy to find, read, and use.
-A summarized privacy statement highlighting the type(s) of data collection, storage, and use, with links to the full statement. Be sure to use proper heading levels, typically a h2 is used. + A summarized privacy statement highlighting the type(s) of data collection, + storage, and use, with links to the full statement. Be sure to use proper + heading levels, typically a h2 is used.
-- [You can add a custom privacy statement here that adheres to the - Government of Canada privacy. It should be clear how the users personal - information will and will not be used. Examples follow.] -
-- Your information will not be used for any - decision-making process that affects your access to Government of Canada - services. Your personal information will not be used - for any administrative purposes. -
-- Your personal information and feedback are confidential. -
-- Your information will be used by Employment and Social - Development Canada for [Briefly explain what the information will be - used for]. -
-- We need the following information so we can [Briefly explain why you - need the following data]: -
-- You can also choose to share more information with us so we can [Briefly - explain how providing the following data will enable services for the - user]: -
-- We collect this information to ensure our research groups are diverse, - and to identify trends in feedback for specific groups. -
- -+ [You can add a custom privacy statement here that adheres to the Government + of Canada privacy. It should be clear how the users personal information + will and will not be used. Examples follow.] +
++ Your information will not be used for any decision-making + process that affects your access to Government of Canada services. Your + personal information will not be used for any + administrative purposes. +
++ Your personal information and feedback are confidential. +
++ Your information will be used by Employment and Social + Development Canada for [Briefly explain what the information will be used + for]. +
++ We need the following information so we can [Briefly explain why you need + the following data]: +
++ You can also choose to share more information with us so we can [Briefly + explain how providing the following data will enable services for the user]: +
++ We collect this information to ensure our research groups are diverse, and + to identify trends in feedback for specific groups. +
+ + -
-
+{" "}
+Code:
+
+
-
-
- <h2>
-
-
- Privacy policy
-
-
- </h2>
-
+ <h2>
+ Privacy policy
+ </h2>
-
-
- <p>
-
-
- Your information
-
-
- <strong>
-
-
- will not
-
-
- </strong>
-
-
- be used for any decision-making process that affects your access to Government of Canada services. Your personal information
-
-
- <strong>
-
-
- will not
-
-
- </strong>
-
-
- <be used for any administrative purposes.>
-
-
- </p>
-
+ <p>
+ Your information
+ <strong>
+ will not
+ </strong>
+
+ be used for any decision-making process that affects your access to
+ Government of Canada services. Your personal information
+
+ <strong>
+ will not
+ </strong>
+ <be used for any administrative purposes.>
+ </p>
-
-
- <p>
-
-
- Your personal information and feedback are confidential.
-
-
- </p>
-
+ <p>
+ Your personal information and feedback are confidential.
+ </p>
-
-
- <p>
-
-
- Your information
-
-
- <strong>
-
-
- will
-
-
- </strong>
-
-
- be used by Employment and Social Development Canada for ...
-
-
- </p>
-
+ <p>
+ Your information
+ <strong>
+ will
+ </strong>
+ be used by Employment and Social Development Canada for ...
+ </p>
-
-
- <p>
-
-
- Your information
-
-
- <strong>
-
-
- will
-
-
- </strong>
-
-
- be used by Employment and Social Development Canada for ...
-
-
- </p>
-
+ <p>
+ Your information
+ <strong>
+ will
+ </strong>
+ be used by Employment and Social Development Canada for ...
+ </p>
-
-
- <h3>
-
-
- What we will collect
-
-
- </h3>
-
+ <h3>
+ What we will collect
+ </h3>
-
-
- <p>
-
-
- We need the following information so we can ...:
-
-
- </p>
-
+ <p>
+ We need the following information so we can ...:
+ </p>
-
-
- <ul>
-
+ <ul>
-
-
-
- <li>
-
-
- Email address
-
-
- </li>
-
+
+ <li>
+ Email address
+ </li>
-
-
-
- <li>
-
-
- ...
-
-
- </li>
-
+
+ <li>
+ ...
+ </li>
-
-
- </ul>
-
+ </ul>
-
-
- <p>
-
-
- You can also choose to share more information with us so we can ...:
-
-
- </p>
-
+ <p>
+
+ You can also choose to share more information with us so we can ...:
+
+ </p>
-
-
- <ul>
-
+ <ul>
-
-
-
- <li>
-
-
- <Province or territory>
-
-
- </li>
-
+
+ <li>
+ <Province or territory>
+ </li>
-
-
-
- <li>
-
-
- <...>
-
-
- </li>
-
+
+ <li>
+ <...>
+ </li>
-
- </ul>
+ </ul>
-
-
- <p>
-
-
- <We collect this information to ensure our research groups are diverse, and to identify trends in feedback for specific groups.>
-
-
- </p>
-
+ <p>
+
+ <We collect this information to ensure our research groups are
+ diverse, and to identify trends in feedback for specific groups.>
+
+ </p>
-
-
- <p>
-
-
- <a href="https://www.canada.ca/en/transparency/privacy.html" >
-
-
- Read the full privacy policy.
-
-
- </p>
-
+ <p>
+
+ <a href="https://www.canada.ca/en/transparency/privacy.html" >
+
+ Read the full privacy policy.
+ </p>
-
-
+
+
-A brief description of how to opt-out, correct, or delete their data later. The section should start with the same level heading as the Privacy statement, typically a h2. + A brief description of how to opt-out, correct, or delete their data later. + The section should start with the same level heading as the Privacy statement, + typically a h2.
- If you have previously signed up to become a participant and no longer - wish to be contacted for future [explain in detail what the user is - unsubscribing from], you can{" "} - yourself from - the participant list and we will remove your personal information. -
-+ If you have previously signed up to become a participant and no longer + wish to be contacted for future [explain in detail what the user is + unsubscribing from], you can{" "} + yourself from + the participant list and we will remove your personal information. +
+
-
+{" "}
+Code:
+
+
-
-
- <h2>
-
-
- How to unsubscribe from ...
-
-
- </h2>
-
+ <h2>
+ How to unsubscribe from ...
+ </h2>
-
-
- <p>
-
-
- If you have previously signed up to become a participant and no longer wish to be contacted for future ..., you can
-
-
- <a href="#unsubscribe">unsubscribe>
-
-
- unsubscribe
-
-
- </a>
-
-
- yourself from the participant list and we will remove your personal information.
-
-
- </p>
-
+ <p>
+
+ If you have previously signed up to become a participant and no longer
+ wish to be contacted for future ..., you can
+
+ <a href="#unsubscribe">unsubscribe>
+ unsubscribe
+ </a>
+
+ yourself from the participant list and we will remove your personal
+ information.
+
+ </p>
-
-
+
+
-An affirmative action the user can take to opt-in by agreeing to the privacy statement (for example, a checkbox that isn’t pre-selected). + An affirmative action the user can take to opt-in by agreeing to the privacy + statement (for example, a checkbox that isn’t pre-selected).
-
- -
-
- <div class="checkbox-inline">
-
-
- -
-
-
- <label for="consent" class="required">
-
-
- -
-
-
- <input type="checkbox" id="consent" name="consent" value="consent">
-
-
- -
-
-
- <strong>
-
-
- I have read, understood and agree to the above. I affirm that I am 18 years old, or older. I understand that I can withdraw from this ... at any time without consequence.
-
-
- </strong>
-
-
- -
-
+
+ -
+ <div class="checkbox-inline">
+
+ -
+
+ <label for="consent" class="required">
+
+ -
+
- </label>
+ <input type="checkbox" id="consent" name="consent"
+ value="consent">
-
- -
+
+ -
+
+ <strong>
- </div>
+ I have read, understood and agree to the above. I affirm that I am 18
+ years old, or older. I understand that I can withdraw from this ... at
+ any time without consequence.
-
-
+ </strong>
+
+ -
+
+ </label>
+
+ -
+ </div>
+
+
-Coming soon -
+Coming soon
+{" "}
+Contribute to a Data Pattern:
+
- We love receiving feedback! If you notice something we should fix or if you would like to add a new one to our list, please make that request by forking the project and submitting a Pull Request to our GitHub repository. You can also send us an email.
+ We love receiving feedback! If you notice something we should fix or if
+ you would like to add a new one to our list, please make that request by
+ forking the project and submitting a Pull Request to our GitHub
+ repository. You can also send us an email.
- See our on how to do this.
+ See our{" "}
+ {" "}
+ on how to do this.
-
-
+
+
-All content of the Data Patterns Library is available under the +
+ All content of the Data Patterns Library is available under the{" "} +
diff --git a/src/styles/globals.css b/src/styles/globals.css index e1cdc4e2..e7968ddb 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -2,6 +2,16 @@ background-image: url("../assets/bg-banner-v2.png"); } +.footerLine::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 36px; + height: 4px; + background-color: #ffffff; +} + /* Uses mobile background on smaller screens*/ @media (max-width: 449px) { .bannerBg { diff --git a/src/svg.d.ts b/src/svg.d.ts new file mode 100644 index 00000000..dc77f256 --- /dev/null +++ b/src/svg.d.ts @@ -0,0 +1,5 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +declare module "*.svg" { + const content: any; + export default content; +}