Cookie consent color adjustability (#1277)

**Related Ticket:** https://github.com/orgs/NASA-IMPACT/projects/17/views/1?pane=issue&itemId=86283874&issue=NASA-IMPACT%7Cveda-ui%7C1246 ### Description of Changes Exposing styling options for the cookie consent form. ### Notes & Questions About Changes Adding the ability to pass theme styling through the veda.config.js file within the cookieConsent object: ``` cookieConsentForm:{ ... theme: { card: { backgroundColor: '#2276ac', sideBarColor: '#175074', textColor: 'White', linkColor: '#175074' }, acceptButton: { default: { backgroundColor: '#175074', textColor: 'white' }, hover: { backgroundColor: '#2c3e50', textColor: '#white' } }, declineButton: { default: { borderColor: '#175074', textColor: '#175074' }, hover: { borderColor: '#2c3e50', textColor: '#2c3e50' } }, iconColor: { default: 'White', hover: '#175074' } } }} ``` ### Validation / Testing To test pull down the branch and change the theme content to the desired changes and visually confirm that the changes are resolving on the front-end.
NASA-IMPACT · Nov 27, 2024 · 33594d0 · 33594d0
2 parents 9132e6d + 4d30219
commit 33594d0
Show file tree

Hide file tree

Showing 4 changed files with 159 additions and 7 deletions.
diff --git a/app/scripts/components/common/cookie-consent/index.tsx b/app/scripts/components/common/cookie-consent/index.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { debounce } from 'lodash';
 import { Icon } from '@trussworks/react-uswds';
-
+import { css } from '@emotion/react';
 import { setCookie, getCookie } from './utils';
 import {
   USWDSAlert,
@@ -10,11 +10,40 @@ import {
 } from '$components/common/uswds';
 
 import './index.scss';
-
+interface cookieConsentTheme {
+  card?: {
+    backgroundColor?: string;
+    sideBarColor?: string;
+    textColor?: string;
+    linkColor?: string;
+  };
+  acceptButton?: {
+    default?: {
+      backgroundColor?: string;
+      textColor?: string;
+    };
+    hover?: {
+      backgroundColor?: string;
+      textColor?: string;
+    };
+  };
+  declineButton?: {
+    default?: {
+      borderColor?: string;
+      textColor?: string;
+    };
+    hover?: {
+      borderColor?: string;
+      textColor?: string;
+    };
+  };
+  iconColor?: { default?: string; hover?: string };
+}
 interface CookieConsentProps {
   title?: string | undefined;
   copy?: string | undefined;
   pathname: string;
+  theme?: cookieConsentTheme;
   setDisplayCookieConsentForm: (boolean) => void;
   setGoogleTagManager: () => void;
 }
@@ -27,6 +56,7 @@ export const CookieConsent = ({
   title,
   copy,
   pathname,
+  theme,
   setDisplayCookieConsentForm,
   setGoogleTagManager
 }: CookieConsentProps) => {
@@ -90,6 +120,12 @@ export const CookieConsent = ({
     setGoogleTagManager
   ]);
 
+  const transitionSettings = ` -webkit-transition: all 0.24s ease 0s; transition: all 0.24s ease 0s;`;
+
+  const themeValueCheck = (themeItem) => {
+    //checking for null, undefined or empty string values
+    return themeItem !== undefined || themeItem !== '' ? true : false;
+  };
   return (
     <div>
       {!cookieConsentResponded && (
@@ -102,11 +138,21 @@ export const CookieConsent = ({
           }`}
         >
           <USWDSAlert
-            type='info'
+            type={!themeValueCheck(theme?.card?.backgroundColor) && 'info'}
             heading={title && title}
             headingLevel='h2'
             noIcon={true}
             className='radius-lg'
+            css={css`
+              ${themeValueCheck(theme?.card?.backgroundColor) &&
+              `background-color: ` + theme?.card?.backgroundColor};
+
+              ${themeValueCheck(theme?.card?.sideBarColor) &&
+              `border-left: 0.5rem solid ` + theme?.card?.sideBarColor};
+              ${themeValueCheck(theme?.card?.textColor) &&
+              `h2 {
+                color:` + theme?.card?.textColor}
+            `}
           >
             <USWDSButton
               type='button '
@@ -116,11 +162,33 @@ export const CookieConsent = ({
               }}
               unstyled
             >
-              <Icon.Close size={3} />
+              <Icon.Close
+                size={3}
+                // @ts-expect-error css is not assignable to type 'IntrinsicAttributes & USWDSIconProps & SVGProps<SVGSVGElement>'.
+                css={css`
+                  ${transitionSettings}
+                  ${themeValueCheck(theme?.iconColor?.default) &&
+                  `color: ` + theme?.iconColor?.default};
+                  ${themeValueCheck(theme?.iconColor?.hover) &&
+                  `:hover {
+                    color: ` + theme?.iconColor?.hover};
+                `}
+              />
             </USWDSButton>
 
             {copy && (
-              <div dangerouslySetInnerHTML={{ __html: addAttribute(copy) }} />
+              <div
+                // @ts-expect-error css does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'
+                css={css`
+                  ${themeValueCheck(theme?.card?.textColor) &&
+                  `color: ` + theme?.card?.textColor};
+                  ${transitionSettings}
+                  ${themeValueCheck(theme?.card?.linkColor) &&
+                  ` a:not([class]):visited {
+                        color: ` + theme?.card?.linkColor}
+                `}
+                dangerouslySetInnerHTML={{ __html: addAttribute(copy) }}
+              />
             )}
             <USWDSButtonGroup className='padding-top-2'>
               <USWDSButton
@@ -131,6 +199,24 @@ export const CookieConsent = ({
                 }}
                 outline={true}
                 type='button'
+                css={css`
+                  ${transitionSettings}
+
+                  ${themeValueCheck(theme?.iconColor?.default) &&
+                  `box-shadow: inset 0 0 0 2px ` +
+                    theme?.declineButton?.default?.borderColor};
+
+                  ${themeValueCheck(theme?.declineButton?.default?.textColor) &&
+                  `color: ` + theme?.declineButton?.default?.textColor};
+
+                  ${themeValueCheck(theme?.declineButton?.hover?.borderColor) &&
+                  `:hover {
+                    box-shadow: inset 0 0 0 2px ` +
+                    theme?.declineButton?.hover?.borderColor};
+
+                  ${themeValueCheck(theme?.declineButton?.hover?.textColor) &&
+                  `color: ` + theme?.declineButton?.hover?.textColor};
+                `}
               >
                 Decline Cookies
               </USWDSButton>
@@ -141,6 +227,24 @@ export const CookieConsent = ({
                   setCloseConsent(true);
                 }}
                 type='button'
+                css={css`
+                  ${transitionSettings}
+                  ${themeValueCheck(
+                    theme?.acceptButton?.default?.backgroundColor
+                  ) &&
+                  `background-color:  ` +
+                    theme?.acceptButton?.default?.backgroundColor};
+                  ${themeValueCheck(theme?.acceptButton?.default?.textColor) &&
+                  `color: ` + theme?.acceptButton?.default?.textColor};
+                  ${themeValueCheck(
+                    theme?.acceptButton?.hover?.backgroundColor
+                  ) &&
+                  `:hover {
+                    background-color: ` +
+                    theme?.acceptButton?.hover?.backgroundColor};
+                  ${themeValueCheck(theme?.acceptButton?.hover?.textColor) &&
+                  `color: ` + theme?.acceptButton?.hover?.textColor};
+                `}
               >
                 Accept Cookies
               </USWDSButton>

diff --git a/docs/content/CONFIGURATION.md b/docs/content/CONFIGURATION.md
@@ -74,12 +74,41 @@ type?: BannerType
 ```
 title: string,
 copy: string,
+theme: {
+      card: {
+        backgroundColor: string,
+        sideBarColor: string,
+        textColor: string,
+        linkColor: string
+      },
+      acceptButton: {
+        default: { backgroundColor: string, textColor: 'string },
+        hover: { backgroundColor: string, textColor:string }
+      },
+      declineButton: {
+        default: { borderColor: string, textColor: string },
+        hover: { borderColor: string, textColor: string }
+      },
+      iconColor: { default: string, hover: string }
+    }
 ``` 
 
 | Option | Type | Description| Example|
 |---|---|---|---|
 | title | string | 	The text content to display in the title of the cookie consent form. This can be an HTML string. | 'Cookie Consent'|
 | copy | string | The content of the Cookie Consent form, typically is a string that follows MDX documentation format. Allowing flexibility to link to different data management policy.  | 'To learn more about it, see our [Privacy Policy ]\(https://www.nasa.gov/privacy/#cookies)\'  |
+| theme | object | 	Object of Cookie Consent styling options ||
+| theme.card.backgroundColor | String | Pass a hex or accepted color name as a string to style background of card  | backgroundColor: '#2276ac'|
+| theme.card.sideBarColor | String | Pass a hex or accepted color name as a string to style sidebar or accent bar of card  | SideBarColor: '#2276ac'|
+| theme.card.textColor | String | Pass a hex or accepted color name as a string to style the text color of the card content | textColor: '#2276ac'|
+| theme.card.linkColor | String | Pass a hex or accepted color name as a string to style the Privacy Policy link color  | linkColor: '#2276ac'|
+| theme.acceptButton.default | String | Pass a hex or accepted color name as a string to accept button |  default: { backgroundColor: '#175074', textColor: 'white' }|
+| theme.acceptButton.hover | String | Pass a hex or accepted color name as a string to style accept button  |  hover: { backgroundColor: '#175074', textColor: 'white' }|
+| theme.declineButton.default | String | Pass a hex or accepted color name as a string to decline button |  default: { backgroundColor: '#175074', textColor: 'white' }|
+| theme.declineButton.hover | String | Pass a hex or accepted color name as a string to style decline button  |  hover: { backgroundColor: '#175074', textColor: 'white' }|
+| theme.iconColor | String | Pass a hex or accepted color name as a string to style the X close button| { default: '#175074', hover: 'white' }|
+
+
 
 ## Meta files
 

diff --git a/mock/veda.config.js b/mock/veda.config.js
@@ -93,6 +93,23 @@ module.exports = {
   },
   cookieConsentForm: {
     title: 'Cookie Consent',
-    copy: '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)'
+    copy: '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)',
+    theme: {
+      card: {
+        backgroundColor: '#2276ac',
+        sideBarColor: '#175074',
+        textColor: 'White',
+        linkColor: '#175074'
+      },
+      acceptButton: {
+        default: { backgroundColor: '#175074', textColor: 'white' },
+        hover: { backgroundColor: '#2c3e50', textColor: '#white' }
+      },
+      declineButton: {
+        default: { borderColor: '#175074', textColor: '#175074' },
+        hover: { borderColor: '#2c3e50', textColor: '#2c3e50' }
+      },
+      iconColor: { default: 'White', hover: '#175074' }
+    }
   }
 };
diff --git a/parcel-resolver-veda/index.js b/parcel-resolver-veda/index.js
@@ -86,11 +86,13 @@ function generateMdxDataObject(data) {
 function getCookieConsentForm(result) {
   if (!result.cookieConsentForm) return undefined;
   else {
+
     const parsedCopy = md.render(result.cookieConsentForm.copy);
     const trimmedCopy = parsedCopy.replace(/(\r\n|\n|\r)/gm, '');
     return JSON.stringify({
       title: result.cookieConsentForm.title,
-      copy: trimmedCopy
+      copy: trimmedCopy,
+      theme: result.cookieConsentForm.theme
     });
   }
 }