From 20c256753f6ca712a1160f35e3947645c43add21 Mon Sep 17 00:00:00 2001 From: Lucano Vera Date: Wed, 27 Mar 2024 16:20:44 -0300 Subject: [PATCH] PROD-1714-When-CMP-cannot-be-dismissed-page-content-should-not-scroll-overlay-should-appear (#4748) Co-authored-by: Lucano Vera --- CHANGELOG.md | 5 +++++ .../fides-js/src/components/ConsentBanner.tsx | 2 +- clients/fides-js/src/components/Overlay.tsx | 18 +++++++++++++++++- clients/fides-js/src/components/fides.css | 4 ++++ .../src/components/notices/NoticeOverlay.tsx | 5 ++++- .../fides-js/src/components/tcf/TcfOverlay.tsx | 5 ++++- clients/fides-js/src/lib/ui-utils.ts | 6 ++++++ docs/fides/docs/css/fides.css | 2 ++ 8 files changed, 43 insertions(+), 4 deletions(-) create mode 100644 clients/fides-js/src/lib/ui-utils.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index e31fe95e2e..76ed9561a5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -31,6 +31,7 @@ The types of changes are: - Updated privacy notice & experience forms to hide translation UI when user doesn't have translation feature [#4728](https://github.com/ethyca/fides/pull/4728), [#4734](https://github.com/ethyca/fides/pull/4734) - Custom privacy request fields now support list values [#4686](https://github.com/ethyca/fides/pull/4686) - Update when GPP API reports signal status: ready [#4635](https://github.com/ethyca/fides/pull/4635) +- Update non-dismissable TCF and notice banners to show a black overlay and prevent scrolling [#4748](https://github.com/ethyca/fidesplus/pull/4748) - Cleanup config vars for preview in Admin-UI [#4745](https://github.com/ethyca/fides/pull/4745) ### Fixed @@ -46,6 +47,10 @@ The types of changes are: - Added new script to allow recompiling of fides-js when the code changes [#4744](https://github.com/ethyca/fides/pull/4744) +### Developer Experience +- Added new script to allow recompiling of fides-js when the code changes [#4744](https://github.com/ethyca/fides/pull/4744) + + ## [2.32.0](https://github.com/ethyca/fides/compare/2.31.1...2.32.0) ### Added diff --git a/clients/fides-js/src/components/ConsentBanner.tsx b/clients/fides-js/src/components/ConsentBanner.tsx index 7ab2ac73b7..7bc7d117a5 100644 --- a/clients/fides-js/src/components/ConsentBanner.tsx +++ b/clients/fides-js/src/components/ConsentBanner.tsx @@ -13,7 +13,7 @@ interface ButtonGroupProps { interface BannerProps { i18n: I18n; - dismissable: boolean | undefined; + dismissable: boolean; onOpen: () => void; onClose: () => void; bannerIsOpen: boolean; diff --git a/clients/fides-js/src/components/Overlay.tsx b/clients/fides-js/src/components/Overlay.tsx index 1444aff923..3df4b64ad5 100644 --- a/clients/fides-js/src/components/Overlay.tsx +++ b/clients/fides-js/src/components/Overlay.tsx @@ -27,6 +27,7 @@ import type { I18n } from "../lib/i18n"; import ConsentModal from "./ConsentModal"; import ConsentContent from "./ConsentContent"; import "./fides.css"; +import { blockPageScrolling, unblockPageScrolling } from "../lib/ui-utils"; interface RenderBannerProps { isOpen: boolean; @@ -51,6 +52,7 @@ interface Props { renderModalContent: () => VNode; renderModalFooter: (props: RenderModalFooter) => VNode; onVendorPageClick?: () => void; + isUiBlocking: boolean; } const Overlay: FunctionComponent = ({ @@ -65,6 +67,7 @@ const Overlay: FunctionComponent = ({ renderModalContent, renderModalFooter, onVendorPageClick, + isUiBlocking, }) => { const delayBannerMilliseconds = 100; const delayModalLinkMilliseconds = 200; @@ -72,6 +75,18 @@ const Overlay: FunctionComponent = ({ const [bannerIsOpen, setBannerIsOpen] = useState(false); const modalLinkRef = useRef(null); + useEffect(() => { + if (isUiBlocking && bannerIsOpen) { + blockPageScrolling(); + } else { + unblockPageScrolling(); + } + + return () => { + unblockPageScrolling(); + }; + }, [isUiBlocking, bannerIsOpen]); + const dispatchCloseEvent = useCallback( ({ saved = false }: { saved?: boolean }) => { dispatchFidesEvent("FidesModalClosed", cookie, options.debug, { saved }); @@ -177,9 +192,10 @@ const Overlay: FunctionComponent = ({ return (
- {showBanner && bannerIsOpen && window.Fides.options.preventDismissal && ( + {showBanner && bannerIsOpen && isUiBlocking && (
)} + {showBanner ? renderBanner({ isOpen: bannerIsOpen, diff --git a/clients/fides-js/src/components/fides.css b/clients/fides-js/src/components/fides.css index a0c41e57c1..e225434267 100644 --- a/clients/fides-js/src/components/fides.css +++ b/clients/fides-js/src/components/fides.css @@ -418,6 +418,10 @@ div#fides-consent-content .fides-modal-description { gap: 12px; } +.fides-no-scroll { + overflow-y: hidden; +} + /* Responsive overlay */ @media (max-width: 48em) { div.fides-modal-content, diff --git a/clients/fides-js/src/components/notices/NoticeOverlay.tsx b/clients/fides-js/src/components/notices/NoticeOverlay.tsx index 2662dd2252..046baa5c5e 100644 --- a/clients/fides-js/src/components/notices/NoticeOverlay.tsx +++ b/clients/fides-js/src/components/notices/NoticeOverlay.tsx @@ -235,6 +235,8 @@ const NoticeOverlay: FunctionComponent = ({ return null; } + const isDismissable = !!experience.experience_config?.dismissable; + return ( = ({ i18n={i18n} cookie={cookie} savedConsent={savedConsent} + isUiBlocking={!isDismissable} onOpen={dispatchOpenOverlayEvent} onDismiss={handleDismiss} renderBanner={({ isOpen, onClose, onSave, onManagePreferencesClick }) => ( { onClose(); diff --git a/clients/fides-js/src/components/tcf/TcfOverlay.tsx b/clients/fides-js/src/components/tcf/TcfOverlay.tsx index a5c391535d..b324e00a99 100644 --- a/clients/fides-js/src/components/tcf/TcfOverlay.tsx +++ b/clients/fides-js/src/components/tcf/TcfOverlay.tsx @@ -312,6 +312,8 @@ const TcfOverlay: FunctionComponent = ({ return null; } + const isDismissable = !!experience.experience_config?.dismissable; + return ( = ({ onVendorPageClick={() => { setActiveTabIndex(2); }} + isUiBlocking={!isDismissable} onOpen={dispatchOpenOverlayEvent} onDismiss={handleDismiss} renderBanner={({ isOpen, onClose, onSave, onManagePreferencesClick }) => { @@ -332,7 +335,7 @@ const TcfOverlay: FunctionComponent = ({ return ( { diff --git a/clients/fides-js/src/lib/ui-utils.ts b/clients/fides-js/src/lib/ui-utils.ts new file mode 100644 index 0000000000..ca2aa90171 --- /dev/null +++ b/clients/fides-js/src/lib/ui-utils.ts @@ -0,0 +1,6 @@ +export const blockPageScrolling = () => { + document.body.classList.add("fides-no-scroll"); +}; +export const unblockPageScrolling = () => { + document.body.classList.remove("fides-no-scroll"); +}; diff --git a/docs/fides/docs/css/fides.css b/docs/fides/docs/css/fides.css index 48ccd9ec52..3bfec43f2a 100644 --- a/docs/fides/docs/css/fides.css +++ b/docs/fides/docs/css/fides.css @@ -61,6 +61,8 @@ body { font-family: 'Source Sans Pro', sans-serif; } + + .md-header{ background-color: var(--md-header-bg-color); }