From e30c439baaf849ff25c82f9645c65e20f62c8852 Mon Sep 17 00:00:00 2001 From: Adrian Galvan Date: Tue, 10 Oct 2023 08:57:57 -0700 Subject: [PATCH] TCF experience design improvements (#4222) --- CHANGELOG.md | 3 +- clients/fides-js/rollup.config.mjs | 2 +- .../fides-js/src/components/ConsentBanner.tsx | 56 +++-- .../src/components/ConsentButtons.tsx | 27 ++- .../fides-js/src/components/ConsentModal.tsx | 15 +- clients/fides-js/src/components/Overlay.tsx | 2 +- .../src/components/PrivacyPolicyLink.tsx | 36 ++++ clients/fides-js/src/components/Toggle.tsx | 4 +- clients/fides-js/src/components/fides.css | 194 +++++++++++++----- .../src/components/notices/NoticeOverlay.tsx | 52 +++-- .../src/components/tcf/DoubleToggleTable.tsx | 4 +- .../src/components/tcf/TcfConsentButtons.tsx | 8 +- .../src/components/tcf/TcfOverlay.tsx | 64 +++--- .../fides-js/src/components/tcf/TcfTabs.tsx | 30 +-- .../src/components/tcf/TcfVendors.tsx | 17 +- .../src/components/tcf/VendorInfoBanner.tsx | 4 +- clients/fides-js/src/lib/a11y-dialog.tsx | 10 +- clients/fides-js/src/lib/consent-context.ts | 6 + 18 files changed, 371 insertions(+), 163 deletions(-) create mode 100644 clients/fides-js/src/components/PrivacyPolicyLink.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index dad9fc34e9..f5b5e529c7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -32,7 +32,8 @@ The types of changes are: - Update frontend to use new legal basis dimension on vendors [#4216](https://github.com/ethyca/fides/pull/4216) - Updated privacy center patch preferences call to handle updated API response [#4235](https://github.com/ethyca/fides/pull/4235) - Added our CMP ID [#4233](https://github.com/ethyca/fides/pull/4233) -- Allow admin-ui users to turn on Configure Consent flag [#4246](https://github.com/ethyca/fides/pull/4246) +- Allow Admin UI users to turn on Configure Consent flag [#4246](https://github.com/ethyca/fides/pull/4246) +- Styling improvements for the fides.js consent banners and modals [#4222](https://github.com/ethyca/fides/pull/4222) ### Fixed - TCF overlay can initialize its consent preferences from a cookie [#4124](https://github.com/ethyca/fides/pull/4124) diff --git a/clients/fides-js/rollup.config.mjs b/clients/fides-js/rollup.config.mjs index ebb021464a..15e9419d4b 100644 --- a/clients/fides-js/rollup.config.mjs +++ b/clients/fides-js/rollup.config.mjs @@ -10,7 +10,7 @@ import postcss from "rollup-plugin-postcss"; const NAME = "fides"; const IS_DEV = process.env.NODE_ENV === "development"; -const GZIP_SIZE_ERROR_KB = 20; // fail build if bundle size exceeds this +const GZIP_SIZE_ERROR_KB = 22; // fail build if bundle size exceeds this const GZIP_SIZE_WARN_KB = 15; // log a warning if bundle size exceeds this // TCF diff --git a/clients/fides-js/src/components/ConsentBanner.tsx b/clients/fides-js/src/components/ConsentBanner.tsx index 77bd84ea72..58940c333b 100644 --- a/clients/fides-js/src/components/ConsentBanner.tsx +++ b/clients/fides-js/src/components/ConsentBanner.tsx @@ -1,4 +1,4 @@ -import { h, FunctionComponent, ComponentChildren } from "preact"; +import { h, FunctionComponent, ComponentChildren, VNode } from "preact"; import { getConsentContext } from "../lib/consent-context"; import { ExperienceConfig } from "../lib/consent-types"; import CloseButton from "./CloseButton"; @@ -9,8 +9,13 @@ interface BannerProps { experience: ExperienceConfig; onClose: () => void; bannerIsOpen: boolean; - children: ComponentChildren; + /** + * Passing in children components will automatically set the container to be a 2x2 grid, + * it is up to the child components to specify how they'll be placed within the grid + * */ + children?: ComponentChildren; onVendorPageClick?: () => void; + buttonGroup: VNode; } const ConsentBanner: FunctionComponent = ({ @@ -19,6 +24,7 @@ const ConsentBanner: FunctionComponent = ({ bannerIsOpen, children, onVendorPageClick, + buttonGroup, }) => { const showGpcBadge = getConsentContext().globalPrivacyControl; return ( @@ -31,27 +37,37 @@ const ConsentBanner: FunctionComponent = ({
-
-
- {experience.title} -
- {showGpcBadge ? ( - - ) : null} -
- +
+
+
+ {experience.title} +
+ {showGpcBadge && ( + + )} +
+
+ +
+
+ {children} + {buttonGroup}
- {children}
diff --git a/clients/fides-js/src/components/ConsentButtons.tsx b/clients/fides-js/src/components/ConsentButtons.tsx index 4627d1fe02..caaf327951 100644 --- a/clients/fides-js/src/components/ConsentButtons.tsx +++ b/clients/fides-js/src/components/ConsentButtons.tsx @@ -1,4 +1,4 @@ -import { h, VNode } from "preact"; +import { ComponentChildren, h, VNode } from "preact"; import Button from "./Button"; import { ButtonType, @@ -12,18 +12,24 @@ export const ConsentButtons = ({ experienceConfig, onManagePreferencesClick, firstButton, + middleButton, onAcceptAll, onRejectAll, + children, }: { experienceConfig: ExperienceConfig; onManagePreferencesClick?: () => void; firstButton?: VNode; + /** Used to add a button between the "manage preferences" button and the "accept/reject" buttons */ + middleButton?: VNode; onAcceptAll: () => void; onRejectAll: () => void; + /** Added as siblings to the button group after the "accept/reject" buttons */ + children?: ComponentChildren; }) => (
{onManagePreferencesClick ? ( -
+
) : null} -
+ {middleButton || null} +
{firstButton || null}
+ {children}
); @@ -56,6 +68,8 @@ interface NoticeConsentButtonProps { enabledKeys: NoticeKeys; isAcknowledge: boolean; isInModal?: boolean; + children?: ComponentChildren; + middleButton?: VNode; } export const NoticeConsentButtons = ({ @@ -65,6 +79,8 @@ export const NoticeConsentButtons = ({ enabledKeys, isInModal, isAcknowledge, + children, + middleButton, }: NoticeConsentButtonProps) => { if (!experience.experience_config || !experience.privacy_notices) { return null; @@ -118,6 +134,9 @@ export const NoticeConsentButtons = ({ /> ) : undefined } - /> + middleButton={middleButton} + > + {children} + ); }; diff --git a/clients/fides-js/src/components/ConsentModal.tsx b/clients/fides-js/src/components/ConsentModal.tsx index e36623c348..0527ad7856 100644 --- a/clients/fides-js/src/components/ConsentModal.tsx +++ b/clients/fides-js/src/components/ConsentModal.tsx @@ -5,6 +5,7 @@ import { ExperienceConfig } from "../lib/consent-types"; import CloseButton from "./CloseButton"; import GpcInfo from "./GpcInfo"; import ExperienceDescription from "./ExperienceDescription"; +import { getConsentContext } from "../fides"; const ConsentModal = ({ attributes, @@ -18,6 +19,7 @@ const ConsentModal = ({ onVendorPageClick?: () => void; }) => { const { container, overlay, dialog, title, closeButton } = attributes; + const showGpcBadge = getConsentContext().globalPrivacyControl; return ( // @ts-ignore A11yDialog ref obj type isn't quite the same @@ -49,19 +51,8 @@ const ConsentModal = ({ description={experience.description} />

- + {showGpcBadge && } {children} - {experience.privacy_policy_link_label && - experience.privacy_policy_url ? ( - - {experience.privacy_policy_link_label} - - ) : null}
); diff --git a/clients/fides-js/src/components/Overlay.tsx b/clients/fides-js/src/components/Overlay.tsx index ec9d4d4716..c7756b05ad 100644 --- a/clients/fides-js/src/components/Overlay.tsx +++ b/clients/fides-js/src/components/Overlay.tsx @@ -54,7 +54,7 @@ const Overlay: FunctionComponent = ({ const { instance, attributes } = useA11yDialog({ id: "fides-modal", - role: "dialog", + role: "alertdialog", title: experience?.experience_config?.title || "", onClose: dispatchCloseEvent, }); diff --git a/clients/fides-js/src/components/PrivacyPolicyLink.tsx b/clients/fides-js/src/components/PrivacyPolicyLink.tsx new file mode 100644 index 0000000000..b0a5aa57c7 --- /dev/null +++ b/clients/fides-js/src/components/PrivacyPolicyLink.tsx @@ -0,0 +1,36 @@ +import { h } from "preact"; +import { ExperienceConfig } from "../lib/consent-types"; + +const PrivacyPolicyLink = ({ + experience, +}: { + experience?: ExperienceConfig; +}) => { + if ( + !experience?.privacy_policy_link_label || + !experience?.privacy_policy_url + ) { + return null; + } + + return ( + + ); +}; + +export default PrivacyPolicyLink; diff --git a/clients/fides-js/src/components/Toggle.tsx b/clients/fides-js/src/components/Toggle.tsx index 4cae01a995..fc8a08860f 100644 --- a/clients/fides-js/src/components/Toggle.tsx +++ b/clients/fides-js/src/components/Toggle.tsx @@ -34,7 +34,9 @@ const Toggle = ({ disabled={disabled} /> {/* Mark as `hidden` so it will fall back to a regular checkbox if CSS is not available */} -