From 73fcbab14f06abac2d303d2d25bde1b600bf8cc2 Mon Sep 17 00:00:00 2001 From: Kelsey Thomas <101993653+Kelsey-Ethyca@users.noreply.github.com> Date: Fri, 3 Nov 2023 14:00:33 -0700 Subject: [PATCH] Update fides.css to vary width based on tcf (#4381) --- CHANGELOG.md | 10 +++- .../fides-js/src/components/ConsentBanner.tsx | 7 +-- .../src/components/ConsentContent.tsx | 54 ++++++++++--------- clients/fides-js/src/components/fides.css | 46 ++++++++++++---- .../cypress/e2e/consent-banner-tcf.cy.ts | 52 +++++++++--------- 5 files changed, 104 insertions(+), 65 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 86e853197c9..92f35f04382 100644 --- 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 index 4dd0065ce8f..28ef030fe32 100644 --- a/clients/fides-js/src/components/ConsentBanner.tsx +++ b/clients/fides-js/src/components/ConsentBanner.tsx @@ -59,9 +59,10 @@ const ConsentBanner: FunctionComponent = ({ return (
diff --git a/clients/fides-js/src/components/ConsentContent.tsx b/clients/fides-js/src/components/ConsentContent.tsx index a6df1c07fd9..5ca126021c2 100644 --- 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 ( -
-
-

- {experience.title} -

-

- -

- {showGpcBadge && } - {children} + +
+
+

+ {experience.title} +

+

+ +

+ {showGpcBadge && } + {children} +
{renderModalFooter()}
-
+ ); }; diff --git a/clients/fides-js/src/components/fides.css b/clients/fides-js/src/components/fides.css index 328cd0b4516..411eb2fc235 100644 --- 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 index 1347434f569..f2f97e60efe 100644 --- 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");