-
Notifications
You must be signed in to change notification settings - Fork 70
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add infrastructure for consent banner and link (#3191)
Co-authored-by: Neville Samuell <neville@ethyca.com> Co-authored-by: Allison King <allisonjuliaking@gmail.com> Co-authored-by: Allison King <allison@ethyca.com>
- Loading branch information
4 people
committed
May 13, 2023
1 parent
061d65d
commit bbbf319
Showing
26 changed files
with
21,738 additions
and
7,902 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| import { h, FunctionComponent } from "preact"; | ||
| import { useState, useEffect } from "preact/hooks"; | ||
| import { ButtonType } from "../lib/consent-types"; | ||
| import ConsentBannerButton from "./ConsentBannerButton"; | ||
| import "../lib/banner.module.css"; | ||
| import { useHasMounted } from "../lib/hooks"; | ||
|
|
||
| interface BannerProps { | ||
| onAcceptAll: () => void; | ||
| onRejectAll: () => void; | ||
| privacyCenterUrl: string; | ||
| bannerDescription?: string; | ||
| bannerTitle?: string; | ||
| confirmationButtonLabel?: string; | ||
| rejectButtonLabel?: string; | ||
| managePreferencesLabel?: string; | ||
| waitBeforeShow?: number; | ||
| } | ||
|
|
||
| const ConsentBanner: FunctionComponent<BannerProps> = ({ | ||
| onAcceptAll, | ||
| onRejectAll, | ||
| privacyCenterUrl, | ||
| bannerDescription = "This website processes your data respectfully, so we require your consent to use cookies.", | ||
| bannerTitle = "Manage your consent", | ||
| confirmationButtonLabel = "Accept All", | ||
| managePreferencesLabel = "Manage Preferences", | ||
| rejectButtonLabel = "Reject All", | ||
| waitBeforeShow = 100, | ||
| }) => { | ||
| const [isShown, setIsShown] = useState(false); | ||
| const hasMounted = useHasMounted(); | ||
|
|
||
| useEffect(() => { | ||
| const delayBanner = setTimeout(() => { | ||
| setIsShown(true); | ||
| }, waitBeforeShow); | ||
| return () => clearTimeout(delayBanner); | ||
| }, [setIsShown, waitBeforeShow]); | ||
|
|
||
| const navigateToPrivacyCenter = (): void => { | ||
| if (privacyCenterUrl) { | ||
| window.location.assign(privacyCenterUrl); | ||
| } | ||
| }; | ||
|
|
||
| if (!hasMounted) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <div | ||
| id="fides-consent-banner" | ||
| className={`fides-consent-banner fides-consent-banner-bottom ${ | ||
| isShown ? "" : "fides-consent-banner-hidden" | ||
| } `} | ||
| > | ||
| <div> | ||
| <div | ||
| id="fides-consent-banner-title" | ||
| className="fides-consent-banner-title" | ||
| > | ||
| {bannerTitle || ""} | ||
| </div> | ||
| <div | ||
| id="fides-consent-banner-description" | ||
| className="fides-consent-banner-description" | ||
| > | ||
| {bannerDescription || ""} | ||
| </div> | ||
| </div> | ||
| <div | ||
| id="fides-consent-banner-buttons" | ||
| className="fides-consent-banner-buttons" | ||
| > | ||
| <ConsentBannerButton | ||
| buttonType={ButtonType.TERTIARY} | ||
| label={managePreferencesLabel} | ||
| onClick={navigateToPrivacyCenter} | ||
| /> | ||
| <ConsentBannerButton | ||
| buttonType={ButtonType.SECONDARY} | ||
| label={rejectButtonLabel} | ||
| onClick={() => { | ||
| onRejectAll(); | ||
| setIsShown(false); | ||
| }} | ||
| /> | ||
| <ConsentBannerButton | ||
| buttonType={ButtonType.PRIMARY} | ||
| label={confirmationButtonLabel} | ||
| onClick={() => { | ||
| onAcceptAll(); | ||
| setIsShown(false); | ||
| }} | ||
| /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default ConsentBanner; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { h, FunctionComponent } from "preact"; | ||
| import { ButtonType } from "../lib/consent-types"; | ||
|
|
||
| interface ButtonProps { | ||
| buttonType: ButtonType; | ||
| label?: string; | ||
| onClick?: () => void; | ||
| } | ||
|
|
||
| const ConsentBannerButton: FunctionComponent<ButtonProps> = ({ | ||
| buttonType, | ||
| label, | ||
| onClick, | ||
| }) => ( | ||
| <button | ||
| type="button" | ||
| id={`fides-consent-banner-button-${buttonType.valueOf()}`} | ||
| className={`fides-consent-banner-button fides-consent-banner-button-${buttonType.valueOf()}`} | ||
| onClick={onClick} | ||
| > | ||
| {label || ""} | ||
| </button> | ||
| ); | ||
|
|
||
| export default ConsentBannerButton; |
Oops, something went wrong.