diff --git a/app/scripts/components/common/cookie-consent/index.tsx b/app/scripts/components/common/cookie-consent/index.tsx index 1b0606491..fe40b4748 100644 --- 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 (
{!cookieConsentResponded && ( @@ -102,11 +138,21 @@ export const CookieConsent = ({ }`} > - + '. + css={css` + ${transitionSettings} + ${themeValueCheck(theme?.iconColor?.default) && + `color: ` + theme?.iconColor?.default}; + ${themeValueCheck(theme?.iconColor?.hover) && + `:hover { + color: ` + theme?.iconColor?.hover}; + `} + /> {copy && ( -
+
, 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) }} + /> )} Decline Cookies @@ -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 diff --git a/docs/content/CONFIGURATION.md b/docs/content/CONFIGURATION.md index 159b7b8d0..aa4268c13 100644 --- 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 index 307e83338..97fde679c 100644 --- 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 index 6aaed15ca..f00ca4028 100644 --- 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 }); } }