Cookie consent color adjustability

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>

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
 

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' }
+    }
   }
 };

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
     });
   }
 }