Creating cookie consent component #1127
Conversation
✅ Deploy Preview for veda-ui ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
I think this looks great. Seeing this for me raises two questions:
Also, I know it's just content and not what you asked for feedback on, but should the Privacy Policy link open in a new tab? |
We can definitely introduce a close out button in the interface for those that would rather not respond. It does then prompt the question, do we interpret a close out of the interface as a decline or an non-answer and continue to collect the cookies from their session. Based on the Nasa.gov data privacy site (which is somewhat vague) I would interpret it as a non-answer and continue collecting:
As for the next time the user comes to the site, it depends on what type of cookie we are using if they are persistent cookies the user is good to go, no reoccurring interface on their end unless they delete their browsing history. We can grab that information via their browser during each session. As for opening a link in a new tab, yes the privacy link should open in a new tab, that is something we can note in the acceptance criteria once we move to development. |
That seems reasonable to me 👍 |
snmln
changed the title
| @@ -0,0 +1,25 @@ | |||
| #cookie-consent{ | |||
There was a problem hiding this comment.
Have you had a chance to familiarize yourself with utility functions (such as https://designsystem.digital.gov/utilities/display/, https://designsystem.digital.gov/design-tokens/z-index/ ) in USWDS? I think a lot of this custom style can be replaced with the USWDS utility class - and this will also give us some coherence on the units.
There was a problem hiding this comment.
I did, but wasn't familiar with all of the available tokens. I will get those adjusted.
| @@ -35,17 +43,58 @@ const PageBody = styled.div` | |||
| `; | |||
|
|
|||
| function LayoutRoot(props: { children?: ReactNode }) { | |||
| const useConsentForm = checkEnvFlag(process.env.COOKIE_CONSENT_FORM); | |||
There was a problem hiding this comment.
this is still using env variable. And I think your intention is to depend on veda config instead of env var?
| copy, | ||
| onFormInteraction | ||
| }: CookieConsentProps) => { | ||
| const [cookieConsentResponded, SetCookieConsentResponded] = |
There was a problem hiding this comment.
I would like to learn more about where to save cookie consent prefrence. We have been saving the user preference on local storage so far - can you leave some notes about why we are using cookie for this case? Moreover, when user says no to cookie usage, can we save this info to cookie at all?
There was a problem hiding this comment.
We can change this to local storage if that is the existing pattern across the system.
Based on what I could find through my original research, the prevailing pattern is to store the consent in a cookie since they require an expiration associated with the cookies. Allowing for redundancy when a user clears their cache and cookies they will be re-prompted with cookie consent interface. Because of the temporary nature it appears to be the primary storage method (while contradictory to the implied practice).
**Related Ticket:** [_{link related ticket
here}_](#1127)
### Description of Changes
We already have a mechanism to parse markdown to html bts. It is highly
likely that users will try to use different markdown syntax if they see
the link syntax. So here, I made parcel resolver to compile the
cookieconsent form to html beforehand. I only did it for copy, but some
questions are
- does title also accept markdown?
- should we have some kinds of prefixes to note that this is a markdown?
(we use ::markdown prefix for mdx files, but this is configuration so it
can be a bit different story.
when close button is pressed
…when close btn is pressed (#1165) I removed some styles that are not necessary for cookieconsent. I will put my reasoning with inline comments. (Lots of changes are nitpicks, but I thought it might be a good opportunity to onboard you on some practices that are not well documented)
|
As I mentioned in stand-up let's merge this after v5.8.0 goes out. But there are several improvements we can make
|
|
@snmln can you create a ticket in veda-ui to represent this followup work? Might be good practice, and I can help you fill out any metadata on the ticket if you have questions |
Of course! |
@aboydnw I have gone ahead and create 2 tickets to reflect the work: Please let me know if I need to adjust any tagging or anything else for these tickets. |
There was a problem hiding this comment.
I found an error that I didn't use the constant for setting cookie ! I pushed a fix for it: 9356b87
I think this should be an ok status to merge, but I touched it too much at this point 😅 so please take time to test the functionality before merging.
Related Ticket: Cookie Consent Form
Description of Changes
USWDS Alert component used as a cookie consent form. This form should render on any page of the site if a user has not consented to the use of cookies. If a user Accepts Cookies or Declines Cookies a cookie will be made to catalog the response by the user. The cookie will expire after 3 months and the form will re-render for the user.
Notes & Questions About Changes
Figma Designs: https://www.figma.com/design/xaZSp74DKFGYm0k2w2BbVb/Shared-VEDA-file?node-id=0-1&t=wGNpe3xrUyLTU1pB-1
CookieConsent form is stored behind a feature flag to allow for each instance to opt in to leveraging the component. To turn the CookieConsentForm ON in the
veda-ui/.envsetCOOKIE_CONSENT_FORM='TRUE'To change contents of the consent form change the contents of
cookieConsentFormwithin theveda-ui/mock/veda.config.jsto reflect desired content. To add link in the content, it must be added in the following format[Link text](URL)Example prop: 'We use cookies to enhance your browsing experience and to help us understand how our website is used. These cookies allow us to collect data on site usage and improve our services based on your interactions. To learn more about it, see our
[Privacy Policy](https://www.nasa.gov/privacy/#cookies)'Validation / Testing
Run unit test CookieConsent.spec.js. To test in browser, run locally navigate to browser cookies you should see the following values for specific interactions: