From d15002077d381401d48074c63cc3d3ced71fb508 Mon Sep 17 00:00:00 2001 From: snmln Date: Tue, 26 Nov 2024 12:27:27 -0500 Subject: [PATCH 1/3] exposing cookieconsent styling --- .../common/cookie-consent/index.tsx | 112 +++++++++++++++++- mock/veda.config.js | 19 ++- parcel-resolver-veda/index.js | 4 +- tsconfig.json | 1 + 4 files changed, 129 insertions(+), 7 deletions(-) diff --git a/app/scripts/components/common/cookie-consent/index.tsx b/app/scripts/components/common/cookie-consent/index.tsx index 1b0606491..82adafb35 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 = ({ }`} > - + {copy && ( -
+
)} Decline Cookies @@ -141,6 +225,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/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 }); } } diff --git a/tsconfig.json b/tsconfig.json index 65d8772ab..a998c8bee 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,6 +8,7 @@ "declaration": true, "baseUrl": "./", "jsx": "react", + "types": ["@emotion/react/types/css-prop"], "paths": { "$components/*": ["app/scripts/components/*"], "$styles/*": ["app/scripts/styles/*"], From e4e1f20bd615e3b544bca625022cfdc118f108a0 Mon Sep 17 00:00:00 2001 From: snmln Date: Tue, 26 Nov 2024 12:27:36 -0500 Subject: [PATCH 2/3] updating documentation --- docs/content/CONFIGURATION.md | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) 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 From 4d302199bf7055e3e78b461287f7aa8a52bc8ef0 Mon Sep 17 00:00:00 2001 From: snmln Date: Tue, 26 Nov 2024 16:32:21 -0500 Subject: [PATCH 3/3] rolling back tsconfig changes implementing --- app/scripts/components/common/cookie-consent/index.tsx | 2 ++ tsconfig.json | 1 - 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/app/scripts/components/common/cookie-consent/index.tsx b/app/scripts/components/common/cookie-consent/index.tsx index 82adafb35..fe40b4748 100644 --- a/app/scripts/components/common/cookie-consent/index.tsx +++ b/app/scripts/components/common/cookie-consent/index.tsx @@ -164,6 +164,7 @@ export const CookieConsent = ({ > '. css={css` ${transitionSettings} ${themeValueCheck(theme?.iconColor?.default) && @@ -177,6 +178,7 @@ export const CookieConsent = ({ {copy && (
, HTMLDivElement>' css={css` ${themeValueCheck(theme?.card?.textColor) && `color: ` + theme?.card?.textColor}; diff --git a/tsconfig.json b/tsconfig.json index a998c8bee..65d8772ab 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,7 +8,6 @@ "declaration": true, "baseUrl": "./", "jsx": "react", - "types": ["@emotion/react/types/css-prop"], "paths": { "$components/*": ["app/scripts/components/*"], "$styles/*": ["app/scripts/styles/*"],