Update fides.css to vary width based on tcf (#4381)

ethyca · Nov 3, 2023 · 73fcbab · 73fcbab
1 parent f1c806e
commit 73fcbab
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 65 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,10 +15,18 @@ The types of changes are:
 - `Fixed` for any bug fixes.
 - `Security` in case of vulnerabilities.
 
-## [Unreleased](https://github.com/ethyca/fides/compare/2.23.1...main)
+## [Unreleased](https://github.com/ethyca/fides/compare/2.23.2...main)
 
 ### Changed
 - Determine if the TCF overlay needs to surface based on backend calculated version hash [#4356](https://github.com/ethyca/fides/pull/4356)
+- Moved Experiences and Preferences endpoints to Plus to take advantage of dynamic GVL  [#4367](https://github.com/ethyca/fides/pull/4367)
+- "is_service_specific" default updated when building TC strings on the backend [#4377](https://github.com/ethyca/fides/pull/4377)
+- Redact cli, database, and redis configuration information from GET api/v1/config API request responses. [#4379](https://github.com/ethyca/fides/pull/4379)
+
+## [2.23.2](https://github.com/ethyca/fides/compare/2.23.1...2.23.2)
+
+### Fixed
+- Fixed fides.css to vary banner width based on tcf [[#4381](https://github.com/ethyca/fides/issues/4381)]
 
 ## [2.23.1](https://github.com/ethyca/fides/compare/2.23.0...2.23.1)
 

diff --git a/clients/fides-js/src/components/ConsentBanner.tsx b/clients/fides-js/src/components/ConsentBanner.tsx
@@ -59,9 +59,10 @@ const ConsentBanner: FunctionComponent<BannerProps> = ({
   return (
     <div
       id="fides-banner-container"
-      className={`fides-banner fides-banner-bottom ${
-        bannerIsOpen ? "" : "fides-banner-hidden"
-      } `}
+      className={`fides-banner 
+        fides-banner-bottom 
+        ${bannerIsOpen ? "" : "fides-banner-hidden"} 
+        ${window.Fides.options.tcfEnabled ? "fides-tcf-banner-container" : ""}`}
     >
       <div id="fides-banner">
         <div id="fides-banner-inner">

diff --git a/clients/fides-js/src/components/ConsentContent.tsx b/clients/fides-js/src/components/ConsentContent.tsx
@@ -1,4 +1,4 @@
-import { ComponentChildren, VNode, h } from "preact";
+import { ComponentChildren, VNode, h, Fragment } from "preact";
 import { HTMLAttributes } from "react";
 import { ExperienceConfig } from "../lib/consent-types";
 
@@ -26,33 +26,35 @@ const ConsentModal = ({
   const showGpcBadge = getConsentContext().globalPrivacyControl;
 
   return (
-    <div
-      data-testid="consent-content"
-      id="fides-consent-content"
-      className={className}
-    >
-      <div className="fides-modal-body">
-        <h1
-          data-testid="fides-modal-title"
-          {...title}
-          className="fides-modal-title"
-        >
-          {experience.title}
-        </h1>
-        <p
-          data-testid="fides-modal-description"
-          className="fides-modal-description"
-        >
-          <ExperienceDescription
-            onVendorPageClick={onVendorPageClick}
-            description={experience.description}
-          />
-        </p>
-        {showGpcBadge && <GpcInfo />}
-        {children}
+    <Fragment>
+      <div
+        data-testid="consent-content"
+        id="fides-consent-content"
+        className={className}
+      >
+        <div className="fides-modal-body">
+          <h1
+            data-testid="fides-modal-title"
+            {...title}
+            className="fides-modal-title"
+          >
+            {experience.title}
+          </h1>
+          <p
+            data-testid="fides-modal-description"
+            className="fides-modal-description"
+          >
+            <ExperienceDescription
+              onVendorPageClick={onVendorPageClick}
+              description={experience.description}
+            />
+          </p>
+          {showGpcBadge && <GpcInfo />}
+          {children}
+        </div>
       </div>
       <div className="fides-modal-footer">{renderModalFooter()}</div>
-    </div>
+    </Fragment>
   );
 };
 

diff --git a/clients/fides-js/src/components/fides.css b/clients/fides-js/src/components/fides.css
@@ -230,7 +230,7 @@ button.fides-banner-button {
   border: 1px solid;
   border-radius: var(--fides-overlay-button-border-radius);
 
-  font-family: inherit;
+  font-family: var(--fides-overlay-font-family);
   line-height: 1.15;
   text-decoration: none;
   font-weight: 600;
@@ -331,6 +331,8 @@ div#fides-embed-container div#fides-consent-content {
   box-sizing: border-box;
   background-color: var(--fides-overlay-background-color);
   border-radius: var(--fides-overlay-container-border-radius);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
   width: var(--fides-overlay-width);
 
   top: 50%;
@@ -356,7 +358,7 @@ div#fides-modal .fides-modal-header {
 }
 
 div#fides-consent-content {
-  overflow: scroll;
+  overflow: auto;
 }
 
 div#fides-consent-content .fides-modal-title {
@@ -375,11 +377,15 @@ div#fides-consent-content .fides-modal-body {
   scrollbar-gutter: stable;
 }
 
-div#fides-consent-content .fides-modal-footer {
+.fides-modal-footer {
   display: flex;
   flex-direction: column;
   z-index: 5;
   background-color: var(--fides-overlay-background-color);
+  bottom: 0px;
+  width: var(--fides-overlay-width);
+  border-bottom-left-radius: var(--fides-overlay-component-border-radius);
+  border-bottom-right-radius: var(--fides-overlay-component-border-radius);
 }
 
 div#fides-consent-content .fides-modal-description {
@@ -391,7 +397,7 @@ div#fides-consent-content .fides-modal-description {
   gap: 10px;
 }
 
-div#fides-consent-content .fides-modal-button-group {
+.fides-modal-button-group {
   display: flex;
   width: 100%;
   flex-direction: row;
@@ -406,7 +412,7 @@ div#fides-consent-content .fides-modal-button-group {
     width: 100% !important;
   }
 
-  div#fides-consent-content .fides-modal-button-group {
+  .fides-modal-button-group {
     flex-direction: column;
   }
 
@@ -450,11 +456,12 @@ div#fides-banner-inner .fides-privacy-policy {
   color: var(--fides-overlay-primary-color);
 }
 
-div#fides-consent-content .fides-privacy-policy {
+.fides-privacy-policy {
   display: block;
   text-align: center;
   margin-bottom: var(--fides-overlay-padding);
   color: var(--fides-overlay-primary-color);
+  font-family: var(--fides-overlay-font-family);
 }
 
 /** Toggle, adapted from https://kittygiraudel.com/2021/04/05/an-accessible-toggle/ */
@@ -916,11 +923,20 @@ div#fides-consent-content .fides-privacy-policy {
 /* Responsive banner */
 @media screen and (min-width: 48em) {
   div#fides-banner {
-    width: 100%;
+    width: 75%;
+    border-radius: var(--fides-overlay-component-border-radius);
+    border: 1px solid var(--fides-overlay-primary-color);
   }
 
-  div#fides-banner-container.fides-banner-top {
-    top: var(--fides-overlay-banner-offset);
+  div#fides-banner-container.fides-banner-bottom {
+    bottom: var(--fides-overlay-banner-offset);
+  }
+}
+
+@media only screen and (min-width: 80em) {
+  div#fides-banner {
+    width: 60%;
+    border: 1px solid var(--fides-overlay-primary-color);
   }
 }
 
@@ -969,4 +985,16 @@ div#fides-consent-content .fides-privacy-policy {
   div#fides-privacy-policy-link {
     order: 1;
   }
+  .fides-modal-footer {
+    width: 100%;
+  }
+}
+/* TCF should always be full width and not floating */
+.fides-tcf-banner-container {
+  bottom: 0 !important;
+}
+.fides-tcf-banner-container #fides-banner {
+  width: 100%;
+  border-radius: 0;
+  border-width: 1px 0 0 0;
 }
diff --git a/clients/privacy-center/cypress/e2e/consent-banner-tcf.cy.ts b/clients/privacy-center/cypress/e2e/consent-banner-tcf.cy.ts
@@ -1151,32 +1151,32 @@ describe("Fides-js TCF", () => {
 
         cy.get("#fides-tab-Vendors").click();
         cy.getByTestId(`toggle-${SYSTEM_1.name}`).click();
-        cy.get("button").contains("Save").click();
-        cy.wait("@patchPrivacyPreference").then((interception) => {
-          const { body } = interception.request;
-          expect(body.purpose_consent_preferences).to.eql([
-            { id: PURPOSE_4.id, preference: "opt_out" },
-            { id: PURPOSE_6.id, preference: "opt_in" },
-            { id: PURPOSE_7.id, preference: "opt_in" },
-            { id: PURPOSE_9.id, preference: "opt_in" },
-          ]);
-          expect(body.purpose_legitimate_interests_preferences).to.eql([
-            { id: PURPOSE_2.id, preference: "opt_in" },
-          ]);
-          expect(body.special_purpose_preferences).to.eql(undefined);
-          expect(body.feature_preferences).to.eql(undefined);
-          expect(body.special_feature_preferences).to.eql([
-            { id: SPECIAL_FEATURE_1.id, preference: "opt_in" },
-          ]);
-          expect(body.vendor_consent_preferences).to.eql([
-            { id: VENDOR_1.id, preference: "opt_out" },
-          ]);
-          expect(body.vendor_legitimate_interests_preferences).to.eql([]);
-          expect(body.system_legitimate_interests_preferences).to.eql([
-            { id: SYSTEM_1.id, preference: "opt_out" },
-          ]);
-          expect(body.system_consent_preferences).to.eql([]);
-        });
+      });
+      cy.get("button").contains("Save").click();
+      cy.wait("@patchPrivacyPreference").then((interception) => {
+        const { body } = interception.request;
+        expect(body.purpose_consent_preferences).to.eql([
+          { id: PURPOSE_4.id, preference: "opt_out" },
+          { id: PURPOSE_6.id, preference: "opt_in" },
+          { id: PURPOSE_7.id, preference: "opt_in" },
+          { id: PURPOSE_9.id, preference: "opt_in" },
+        ]);
+        expect(body.purpose_legitimate_interests_preferences).to.eql([
+          { id: PURPOSE_2.id, preference: "opt_in" },
+        ]);
+        expect(body.special_purpose_preferences).to.eql(undefined);
+        expect(body.feature_preferences).to.eql(undefined);
+        expect(body.special_feature_preferences).to.eql([
+          { id: SPECIAL_FEATURE_1.id, preference: "opt_in" },
+        ]);
+        expect(body.vendor_consent_preferences).to.eql([
+          { id: VENDOR_1.id, preference: "opt_out" },
+        ]);
+        expect(body.vendor_legitimate_interests_preferences).to.eql([]);
+        expect(body.system_legitimate_interests_preferences).to.eql([
+          { id: SYSTEM_1.id, preference: "opt_out" },
+        ]);
+        expect(body.system_consent_preferences).to.eql([]);
       });
       // embed modal should not close on preferences save
       cy.getByTestId("consent-content").should("exist");