TCF experience design improvements

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)

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

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<BannerProps> = ({
@@ -19,6 +24,7 @@ const ConsentBanner: FunctionComponent<BannerProps> = ({
   bannerIsOpen,
   children,
   onVendorPageClick,
+  buttonGroup,
 }) => {
   const showGpcBadge = getConsentContext().globalPrivacyControl;
   return (
@@ -31,27 +37,37 @@ const ConsentBanner: FunctionComponent<BannerProps> = ({
       <div id="fides-banner">
         <div id="fides-banner-inner">
           <CloseButton ariaLabel="Close banner" onClick={onClose} />
-          <div id="fides-banner-heading">
-            <div id="fides-banner-title" className="fides-banner-title">
-              {experience.title}
-            </div>
-            {showGpcBadge ? (
-              <GpcBadge
-                label="Global Privacy Control Signal"
-                status="detected"
-              />
-            ) : null}
-          </div>
           <div
-            id="fides-banner-description"
-            className="fides-banner-description"
+            id="fides-banner-inner-container"
+            style={{
+              gridTemplateColumns: children ? "1fr 1fr" : "1fr",
+            }}
           >
-            <ExperienceDescription
-              description={experience.description}
-              onVendorPageClick={onVendorPageClick}
-            />
+            <div id="fides-banner-inner-description">
+              <div id="fides-banner-heading">
+                <div id="fides-banner-title" className="fides-banner-title">
+                  {experience.title}
+                </div>
+                {showGpcBadge && (
+                  <GpcBadge
+                    label="Global Privacy Control Signal"
+                    status="detected"
+                  />
+                )}
+              </div>
+              <div
+                id="fides-banner-description"
+                className="fides-banner-description"
+              >
+                <ExperienceDescription
+                  description={experience.description}
+                  onVendorPageClick={onVendorPageClick}
+                />
+              </div>
+            </div>
+            {children}
+            {buttonGroup}
           </div>
-          {children}
         </div>
       </div>
     </div>

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,26 +12,37 @@ 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;
 }) => (
   <div id="fides-button-group">
     {onManagePreferencesClick ? (
-      <div>
+      <div style={{ display: "flex" }}>
         <Button
           buttonType={ButtonType.TERTIARY}
           label={experienceConfig.privacy_preferences_link_label}
           onClick={onManagePreferencesClick}
         />
       </div>
     ) : null}
-    <div className={firstButton ? "fides-modal-button-group" : undefined}>
+    {middleButton || null}
+    <div
+      className={
+        firstButton ? "fides-modal-button-group" : "fides-banner-button-group"
+      }
+    >
       {firstButton || null}
       <Button
         buttonType={ButtonType.PRIMARY}
@@ -44,6 +55,7 @@ export const ConsentButtons = ({
         onClick={onAcceptAll}
       />
     </div>
+    {children}
   </div>
 );
 
@@ -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}
+    </ConsentButtons>
   );
 };

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}
           />
         </p>
-        <GpcInfo />
+        {showGpcBadge && <GpcInfo />}
         {children}
-        {experience.privacy_policy_link_label &&
-        experience.privacy_policy_url ? (
-          <a
-            href={experience.privacy_policy_url}
-            rel="noopener noreferrer"
-            target="_blank"
-            className="fides-modal-privacy-policy"
-          >
-            {experience.privacy_policy_link_label}
-          </a>
-        ) : null}
       </div>
     </div>
   );

clients/fides-js/src/components/Overlay.tsx

@@ -54,7 +54,7 @@ const Overlay: FunctionComponent<Props> = ({
 
   const { instance, attributes } = useA11yDialog({
     id: "fides-modal",
-    role: "dialog",
+    role: "alertdialog",
     title: experience?.experience_config?.title || "",
     onClose: dispatchCloseEvent,
   });

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 (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <a
+        href={experience.privacy_policy_url}
+        rel="noopener noreferrer"
+        target="_blank"
+        className="fides-privacy-policy"
+      >
+        {experience.privacy_policy_link_label}
+      </a>
+    </div>
+  );
+};
+
+export default PrivacyPolicyLink;

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 */}
-      <span className="fides-toggle-display" hidden />
+      <span className="fides-toggle-display" hidden>
+        {checked ? "Opt-in" : "Opt-out"}
+      </span>
     </label>
   );
 };