From 79e18aa2fd47de047358a1698c28dcf71fcfda1c Mon Sep 17 00:00:00 2001 From: s1hane Date: Wed, 4 Nov 2020 13:30:12 -0500 Subject: [PATCH 1/8] feat(slim) adds slim banner feature flag and initial logic --- src/s1/components/app.jsx | 13 +- src/s1/components/banner/bannerSlim.jsx | 234 +++++++++++++++++++++ src/s1/components/banner/bannerVendors.jsx | 6 +- src/s1/constants.js | 1 + src/s1/lib/config.js | 1 + src/s1/lib/store.js | 8 +- src/s1/reference/tcf-2.0.html | 18 ++ 7 files changed, 275 insertions(+), 6 deletions(-) create mode 100644 src/s1/components/banner/bannerSlim.jsx diff --git a/src/s1/components/app.jsx b/src/s1/components/app.jsx index d62a1ad8..d2ac6f05 100644 --- a/src/s1/components/app.jsx +++ b/src/s1/components/app.jsx @@ -1,6 +1,7 @@ import { h, Component } from 'preact'; import BannerStacks from './banner/bannerStacks'; import BannerVendors from './banner/bannerVendors'; +import BannerSlim from './banner/bannerSlim'; import { CONSENT_SCREENS } from '../constants'; @@ -47,10 +48,18 @@ export default class App extends Component { return (
- {!consentScreen || + { + !consentScreen || (consentScreen === CONSENT_SCREENS.STACKS_LAYER1 && ( - ))} + )) + } + + { + (consentScreen === CONSENT_SCREENS.SLIM_LAYER0 && ( + + )) + } {consentScreen === CONSENT_SCREENS.VENDORS_LAYER3 && ( diff --git a/src/s1/components/banner/bannerSlim.jsx b/src/s1/components/banner/bannerSlim.jsx new file mode 100644 index 00000000..69a8923a --- /dev/null +++ b/src/s1/components/banner/bannerSlim.jsx @@ -0,0 +1,234 @@ +import { h, Component } from 'preact'; +import style from './banner.less'; + +import Label from '../label/label'; + +import logger, { EVENTS as LOG_EVENTS } from '../../lib/logger'; +import debounce from '../../lib/debounce'; +import { CONSENT_SCREENS } from '../../constants'; + +class LocalLabel extends Label { + static defaultProps = { + prefix: 'layer0Slim', + isShowing: false, + }; +} + +export default class BannerSlim extends Component { + constructor(props) { + super(props); + console.warn("here"); + } + + state = { + hasScrolled: false, + }; + + componentDidMount() { + const { + store: { theme: shouldAutoResizeModal }, + } = this.props; + + if (window && shouldAutoResizeModal) { + window.addEventListener('resize', this.handleResize); + } + + if (this.scrollRef) { + this.scrollRef.addEventListener('scroll', this.handleScroll); + } + + this.handleResize(); + } + + componentWillUnmount() { + const { + store: { theme: shouldAutoResizeModal }, + } = this.props; + + if (window && shouldAutoResizeModal) { + window.removeEventListener('resize', this.handleResize); + } + + if (this.scrollRef) { + this.scrollRef.removeEventListener('scroll', this.handleScroll); + } + + debounce.clear(); + } + + handleAcceptAll = () => { + const { store } = this.props; + const { + tcModel: { consentScreen }, + } = store; + + logger(LOG_EVENTS.CMPClick, { + action: 'click', + category: 'acceptAll', + label: `screen${consentScreen}`, + }); + + store.toggleAll(); + }; + + handleLearnMore = () => { + const { store } = this.props; + const { + tcModel: { consentScreen }, + } = store; + + logger(LOG_EVENTS.CMPClick, { + action: 'click', + category: 'learnMore', + label: `screen${consentScreen}`, + }); + + store.toggleConsentScreen(CONSENT_SCREENS.VENDORS_LAYER3); + }; + + handleSave = () => { + const { store } = this.props; + + store.save(); + + const { + tcModel: { consentScreen }, + } = store; + + logger(LOG_EVENTS.CMPClick, { + action: 'click', + category: 'save', + label: `screen${consentScreen}`, + }); + }; + + handleResize = debounce(() => { + const { store } = this.props; + const { maxHeightModal, shouldAutoResizeModal } = store; + + let newMaxHeightModal = maxHeightModal; + + if (shouldAutoResizeModal && this.aboveFoldRef && this.aboveFoldRef.clientHeight) { + newMaxHeightModal = this.aboveFoldRef.clientHeight + 100; + } + + store.toggleAutoResizeModal(shouldAutoResizeModal, newMaxHeightModal); + }, 100); + + handleScroll = debounce(() => { + this.setState({ + hasScrolled: true, + }); + + if (this.scrollRef) { + this.scrollRef.removeEventListener('scroll', this.handleScroll); + } + }); + + render(props, state) { + const { hasScrolled } = state; + const { isShowing, store } = props; + const { + config: { theme }, + translations, + displayLayer1, + isSaveShowing, + maxHeightModal, + } = store; +console.log('Rendering'); + const { + isBannerModal, + isBannerInline, + maxWidthModal, + // maxHeightModal, // handled in store + primaryColor, + primaryTextColor, + backgroundColor, + textColor, + textLightColor, + } = theme; + + const bannerClasses = [style.banner]; + if (!isShowing) { + bannerClasses.push(style.hidden); + } + if (isBannerModal) { + bannerClasses.push(style.bannerModal); + } else if (isBannerInline) { + bannerClasses.push(style.bannerInline); + } + + return ( +
+
(this.scrollRef = el)} + style={{ + maxHeight: maxHeightModal, + }} + > +
+
+
(this.aboveFoldRef = el)}> +
+ + Ads help us run this site + +
+
+ + When you visit our site, pre-selected companies may access and use certain information on + your device and about this site to serve relevant ads or personalized content. + +
+
+
+
+
+ + + + Manage Your Choices + + + + + Continue to site + + + + + Save + + + +
+ ); + } +} diff --git a/src/s1/components/banner/bannerVendors.jsx b/src/s1/components/banner/bannerVendors.jsx index 5ecbcd55..da01b963 100644 --- a/src/s1/components/banner/bannerVendors.jsx +++ b/src/s1/components/banner/bannerVendors.jsx @@ -32,12 +32,16 @@ export default class BannerVendors extends Component { tcModel: { consentScreen }, } = store; + const { + config: { slimMode } + } = store; + logger(LOG_EVENTS.CMPClick, { action: 'click', category: 'back', label: `screen${consentScreen}`, }); - store.toggleConsentScreen(CONSENT_SCREENS.STACKS_LAYER1); + store.toggleConsentScreen( (slimMode? CONSENT_SCREENS.SLIM_LAYER0 : CONSENT_SCREENS.STACKS_LAYER1 )); }; handleSave = () => { diff --git a/src/s1/constants.js b/src/s1/constants.js index c1cf2d66..2af25dbc 100644 --- a/src/s1/constants.js +++ b/src/s1/constants.js @@ -9,6 +9,7 @@ export const CONSENT_SCREENS = { STACKS_LAYER1: 1, PURPOSES_LAYER2: 2, VENDORS_LAYER3: 3, + SLIM_LAYER0: 4, }; export const CUSTOM_API = { diff --git a/src/s1/lib/config.js b/src/s1/lib/config.js index 1c291748..f0fb9ca6 100644 --- a/src/s1/lib/config.js +++ b/src/s1/lib/config.js @@ -32,6 +32,7 @@ export const config = { cookieDomain: '', ccpaApplies: false, experimentId: 'control', + slimMode: false, gdprApplies: false, gdprConsentUrlParam, isServiceSpecific: true, // whether or not this cmp is configured to be service specific diff --git a/src/s1/lib/store.js b/src/s1/lib/store.js index a83f2d70..cf83ee22 100644 --- a/src/s1/lib/store.js +++ b/src/s1/lib/store.js @@ -143,6 +143,7 @@ export default class Store { gdprConsentUrlParam, publisherCountryCode, isServiceSpecific, + slimMode, } = this.config; const { vendors } = this.gvl; @@ -175,7 +176,7 @@ export default class Store { cmpVersion, isServiceSpecific, publisherCountryCode, - consentScreen: CONSENT_SCREENS.STACKS_LAYER1, + consentScreen: ( slimMode ? CONSENT_SCREENS.SLIM_LAYER0 : CONSENT_SCREENS.STACKS_LAYER1 ), }); // Handle a new user @@ -519,9 +520,10 @@ export default class Store { if (!this.tcModel) { return; } - + const { slimMode } = this.config; let tcModel = this.tcModel.clone(); - tcModel.consentScreen = CONSENT_SCREENS.STACKS_LAYER1; + + tcModel.consentScreen = ( slimMode ? CONSENT_SCREENS.SLIM_LAYER0 : CONSENT_SCREENS.STACKS_LAYER1 ); this.updateCmp({ shouldShowModal, diff --git a/src/s1/reference/tcf-2.0.html b/src/s1/reference/tcf-2.0.html index 96bbc824..6c2eaff9 100644 --- a/src/s1/reference/tcf-2.0.html +++ b/src/s1/reference/tcf-2.0.html @@ -147,6 +147,10 @@

TCFString

Use Stacks: +
  • + Use Slim: + +
    • @@ -164,6 +168,7 @@

    TCFString

    const selectVendors = document.querySelector('#selectVendors'); const domShouldAutoResize = document.querySelector('#domShouldAutoResize'); const domShouldUseStacks = document.querySelector('#domShouldUseStacks'); + const domShouldUseSlim = document.querySelector('#domShouldUseSlim'); const setupQaTools = function (store) { const LANGUAGES = store.LANGUAGES; @@ -192,6 +197,11 @@

    TCFString

    return params.get('stacks') === 'true'; }; + const shouldUseSlim = function () { + let params = new URLSearchParams(window.location.search); + return params.get('slim') === 'true'; + }; + const config = { theme: { shouldAutoResizeModal: shouldAutoResize(), @@ -211,6 +221,7 @@

    TCFString

    publisherCountryCode: 'US', // language: '', // default shouldUseStacks: shouldUseStacks(), + slimMode: shouldUseSlim(), // narrowedVendors: [1, 2, 3, 4, 5, 6], }; @@ -272,6 +283,13 @@

    TCFString

    params.set('stacks', domShouldUseStacks.checked); window.location.search = params.toString(); }); + + domShouldUseSlim.checked = shouldUseSlim(); + domShouldUseSlim.addEventListener('change', function () { + let params = new URLSearchParams(window.location.search); + params.set('slim', domShouldUseSlim.checked); + window.location.search = params.toString(); + }); From 7131ae0634c5a25c1e17905c8aaf0d3b381d69d0 Mon Sep 17 00:00:00 2001 From: s1hane Date: Thu, 5 Nov 2020 11:32:58 -0500 Subject: [PATCH 2/8] feat,fix(slim,vendors) adds styling and navigation logic to slim banner mode, removes condtional navigation logic for vendors layer --- src/s1/components/banner/banner.less | 54 ++++++++++++++++++++++ src/s1/components/banner/bannerSlim.jsx | 31 ++++--------- src/s1/components/banner/bannerVendors.jsx | 6 +-- src/s1/reference/tcf-2.0.html | 2 +- 4 files changed, 64 insertions(+), 29 deletions(-) diff --git a/src/s1/components/banner/banner.less b/src/s1/components/banner/banner.less index a2ca292c..1fa2df98 100644 --- a/src/s1/components/banner/banner.less +++ b/src/s1/components/banner/banner.less @@ -79,6 +79,60 @@ } } + &.bannerSlim { + width: 100%; + max-width: 100%; + border-radius: 0; + display: flex; + flex-direction: row; + align-items: stretch; + padding-top: 30px; + + @media @smartphone { + flex-direction: column; + padding-top: 20px; + } + + .content { + flex: 3; + margin-bottom: 0; + padding: 0 30px 30px; + + @media @smartphone { + padding: 12px 20px 0; + + .message { + padding-bottom: 0; + .info { + div.title { + margin-bottom: 15px; + } + } + } + } + } + + .navigation { + flex: 1; + box-shadow: none; + position: static; + flex-direction: column-reverse; + align-items: stretch; + justify-content: center; + gap: 1em; + + a { + @media @smartphone { + padding: 12px + } + + &.continue { + margin: 0; + } + } + } + } + .content { max-height: 60vh; padding-left: 30px; diff --git a/src/s1/components/banner/bannerSlim.jsx b/src/s1/components/banner/bannerSlim.jsx index 69a8923a..e0c79fc2 100644 --- a/src/s1/components/banner/bannerSlim.jsx +++ b/src/s1/components/banner/bannerSlim.jsx @@ -17,7 +17,6 @@ class LocalLabel extends Label { export default class BannerSlim extends Component { constructor(props) { super(props); - console.warn("here"); } state = { @@ -83,7 +82,7 @@ export default class BannerSlim extends Component { label: `screen${consentScreen}`, }); - store.toggleConsentScreen(CONSENT_SCREENS.VENDORS_LAYER3); + store.toggleConsentScreen(CONSENT_SCREENS.STACKS_LAYER1); }; handleSave = () => { @@ -131,11 +130,10 @@ export default class BannerSlim extends Component { const { config: { theme }, translations, - displayLayer1, isSaveShowing, maxHeightModal, } = store; -console.log('Rendering'); + const { isBannerModal, isBannerInline, @@ -148,7 +146,7 @@ console.log('Rendering'); textLightColor, } = theme; - const bannerClasses = [style.banner]; + const bannerClasses = [style.banner, style.bannerSlim]; if (!isShowing) { bannerClasses.push(style.hidden); } @@ -179,13 +177,12 @@ console.log('Rendering');
    (this.aboveFoldRef = el)}>
    - Ads help us run this site + We Value Your Privacy & Choices
    - When you visit our site, pre-selected companies may access and use certain information on - your device and about this site to serve relevant ads or personalized content. + We and our partners use cookies and other technologies to store and/or access information on or from your device (with or without your permission, depending on the type of data) while you use this site, in order to personalize ads and content, analyze or measure site usage, and develop audience insights. You can learn more and change or manage your consent setting preferences via the "manage preferences" link or visiting our "privacy policy".
    @@ -199,7 +196,7 @@ console.log('Rendering'); style={{ color: primaryColor, borderColor: primaryColor }} > - Manage Your Choices + Learn More - Continue to site + OK, Got It - - - - Save - - +
    ); diff --git a/src/s1/components/banner/bannerVendors.jsx b/src/s1/components/banner/bannerVendors.jsx index da01b963..f9895428 100644 --- a/src/s1/components/banner/bannerVendors.jsx +++ b/src/s1/components/banner/bannerVendors.jsx @@ -32,16 +32,12 @@ export default class BannerVendors extends Component { tcModel: { consentScreen }, } = store; - const { - config: { slimMode } - } = store; - logger(LOG_EVENTS.CMPClick, { action: 'click', category: 'back', label: `screen${consentScreen}`, }); - store.toggleConsentScreen( (slimMode? CONSENT_SCREENS.SLIM_LAYER0 : CONSENT_SCREENS.STACKS_LAYER1 )); + store.toggleConsentScreen( CONSENT_SCREENS.STACKS_LAYER1 ); }; handleSave = () => { diff --git a/src/s1/reference/tcf-2.0.html b/src/s1/reference/tcf-2.0.html index 6c2eaff9..9aa0787d 100644 --- a/src/s1/reference/tcf-2.0.html +++ b/src/s1/reference/tcf-2.0.html @@ -221,7 +221,7 @@

    TCFString

    publisherCountryCode: 'US', // language: '', // default shouldUseStacks: shouldUseStacks(), - slimMode: shouldUseSlim(), + slimMode: shouldUseSlim(), // narrowedVendors: [1, 2, 3, 4, 5, 6], }; From e5206a4122f14eb798ce251ca00f28a372557ae0 Mon Sep 17 00:00:00 2001 From: s1hane Date: Thu, 5 Nov 2020 14:39:48 -0500 Subject: [PATCH 3/8] feat (fullwidth) adds a feature to allow full width display of banners --- src/s1/components/banner/banner.less | 17 ++++++++++------- src/s1/components/banner/bannerStacks.jsx | 6 +++++- src/s1/components/banner/bannerVendors.jsx | 5 ++++- src/s1/lib/config.js | 1 + src/s1/reference/tcf-2.0.html | 19 +++++++++++++++++++ 5 files changed, 39 insertions(+), 9 deletions(-) diff --git a/src/s1/components/banner/banner.less b/src/s1/components/banner/banner.less index 1fa2df98..4596fe50 100644 --- a/src/s1/components/banner/banner.less +++ b/src/s1/components/banner/banner.less @@ -19,15 +19,18 @@ font-size: 16px; transition: transform 350ms ease-in-out, opacity 350ms linear; box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.12), 0 -2px 2px rgba(0, 0, 0, 0.12), 0 -4px 4px rgba(0, 0, 0, 0.12), - 0 -8px 8px rgba(0, 0, 0, 0.12), 0 -16px 16px rgba(0, 0, 0, 0.12); - border-top-left-radius: 25px; - border-top-right-radius: 25px; - border-bottom-left-radius: 10px; - border-bottom-right-radius: 10px; - width: calc(100% - 50px); - max-width: 1024px; + 0 -8px 8px rgba(0, 0, 0, 0.12), 0 -16px 16px rgba(0, 0, 0, 0.12); margin: auto; + &.bannerRounded { + border-top-left-radius: 25px; + border-top-right-radius: 25px; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; + width: calc(100% - 50px); + max-width: 1024px; + } + @media @smartphone { padding: 15px 10px; width: calc(100% - 20px); diff --git a/src/s1/components/banner/bannerStacks.jsx b/src/s1/components/banner/bannerStacks.jsx index 8c19ddc3..7699a6a0 100644 --- a/src/s1/components/banner/bannerStacks.jsx +++ b/src/s1/components/banner/bannerStacks.jsx @@ -140,6 +140,7 @@ export default class BannerStacks extends Component { isBannerModal, isBannerInline, maxWidthModal, + fullWidth, // maxHeightModal, // handled in store primaryColor, primaryTextColor, @@ -152,10 +153,13 @@ export default class BannerStacks extends Component { if (!isShowing) { bannerClasses.push(style.hidden); } + if( !fullWidth ) { + bannerClasses.push(style.bannerRounded); + } if (isBannerModal) { bannerClasses.push(style.bannerModal); } else if (isBannerInline) { - bannerClasses.push(style.bannerInline); + bannerClasses.push(style.bannerInline); } return ( diff --git a/src/s1/components/banner/bannerVendors.jsx b/src/s1/components/banner/bannerVendors.jsx index f9895428..69ba23b5 100644 --- a/src/s1/components/banner/bannerVendors.jsx +++ b/src/s1/components/banner/bannerVendors.jsx @@ -80,12 +80,15 @@ export default class BannerVendors extends Component { maxHeightModal, } = store; - const { isBannerModal, isBannerInline, primaryColor, primaryTextColor, backgroundColor, textLightColor } = theme; + const { isBannerModal, isBannerInline, primaryColor, primaryTextColor, backgroundColor, textLightColor, fullWidth } = theme; const bannerClasses = [style.banner]; if (!isShowing) { bannerClasses.push(style.hidden); } + if( !fullWidth ) { + bannerClasses.push(style.bannerRounded); + } if (isBannerModal) { bannerClasses.push(style.bannerModal); } else if (isBannerInline) { diff --git a/src/s1/lib/config.js b/src/s1/lib/config.js index f0fb9ca6..fbc301b5 100644 --- a/src/s1/lib/config.js +++ b/src/s1/lib/config.js @@ -18,6 +18,7 @@ export const theme = { // secondaryColor: '#869cc0', // featuresColor: '#d0d3d7', // maxWidthModal: '500px', + fullWidth: false, shouldAutoResizeModal: true, maxHeightModal: '45vh', }; diff --git a/src/s1/reference/tcf-2.0.html b/src/s1/reference/tcf-2.0.html index 9aa0787d..648c4c5c 100644 --- a/src/s1/reference/tcf-2.0.html +++ b/src/s1/reference/tcf-2.0.html @@ -151,6 +151,10 @@

    TCFString

    Use Slim: +
  • + Full Width: + +
    • @@ -169,6 +173,7 @@

    TCFString

    const domShouldAutoResize = document.querySelector('#domShouldAutoResize'); const domShouldUseStacks = document.querySelector('#domShouldUseStacks'); const domShouldUseSlim = document.querySelector('#domShouldUseSlim'); + const domFullWidth = document.querySelector('#domFullWidth'); const setupQaTools = function (store) { const LANGUAGES = store.LANGUAGES; @@ -202,10 +207,16 @@

    TCFString

    return params.get('slim') === 'true'; }; + const useFullWidth = function () { + let params = new URLSearchParams(window.location.search); + return params.get('fullwidth') === 'true'; + }; + const config = { theme: { shouldAutoResizeModal: shouldAutoResize(), maxHeightModal: '65vh', + fullWidth: useFullWidth(), }, business: 'reference', gdprApplies: true, @@ -276,6 +287,7 @@

    TCFString

    params.set('resize', domShouldAutoResize.checked); window.location.search = params.toString(); }); + domShouldUseStacks.checked = shouldUseStacks(); domShouldUseStacks.addEventListener('change', function () { @@ -290,6 +302,13 @@

    TCFString

    params.set('slim', domShouldUseSlim.checked); window.location.search = params.toString(); }); + + domFullWidth.checked = useFullWidth(); + domFullWidth.addEventListener('change', function () { + let params = new URLSearchParams(window.location.search); + params.set('fullwidth', domFullWidth.checked); + window.location.search = params.toString(); + }); From 20ed72384f0260f800607d93e8398542edaaeb94 Mon Sep 17 00:00:00 2001 From: s1hane Date: Thu, 5 Nov 2020 14:44:08 -0500 Subject: [PATCH 4/8] feat (dropshadow, closewithx) adds features to toggle drop shadow, a close with x button that accepts all and background color override support --- README.md | 26 ++++++++++------ src/s1/components/banner/banner.less | 32 ++++++++++++++----- src/s1/components/banner/bannerSlim.jsx | 10 ++++-- src/s1/components/banner/bannerStacks.jsx | 7 ++++- src/s1/components/banner/bannerVendors.jsx | 10 ++++-- src/s1/components/banner/purposeList.less | 2 +- src/s1/lib/config.js | 2 ++ src/s1/reference/tcf-2.0.html | 36 ++++++++++++++++++++++ 8 files changed, 100 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index 723dbdf7..398c0c4f 100644 --- a/README.md +++ b/README.md @@ -74,6 +74,7 @@ See a [working example in codepen](https://codepen.io/potench/pen/GRZZprw). publisherCountryCode: 'US', // language: '', // empty string or unset to default to browser language shouldUseStacks: true, + slimMode: true, // narrowedVendors: [1, 2, 3, 4, 5, 6], theme: { boxShadow: 'none', @@ -83,6 +84,7 @@ See a [working example in codepen](https://codepen.io/potench/pen/GRZZprw). secondaryColor: '#869cc0', shouldAutoResizeModal: true, // resizes modal on stacks screen to push stacks below fold textLinkColor: '#0099ff', + fullWidth: false, }, } ); @@ -220,21 +222,25 @@ __tcfapi('init', 2, () => {}, { | `publisherCountryCode` | optional string | `US` | String representing country code of parent website business | | `isServiceSpecific` | optional boolean | `true` | true uses publisher consent, false uses global consent | | `shouldUseStacks` | optional boolean | `true` | true uses stacks on Layer1, TODO stacks need purposes/custom-features toggle to be compliant | +| `slimMode` | optional boolean | `false` | If `true`, initial banner is low profile, full width banner v2.1.4+ | +| `showCloseX` | optional boolean | `false` | If `true`, a × icon will appear in the upper right on layers to accept-all and close v2.1.4+ | ### theme Themeing is a bit limited right now. Pass in a `config.theme` object during initialization. Use the following to override styling choices: -| Theme Property | Type | Default | Detail | -| ----------------------- | ---------------- | -------- | ------------------------------------------------------------------------------------------ | -| `maxHeightModal` | optional string | `45vh` | CSS style for max height of the CMP UI. Example: `45vh`, `50%`, `350px` | -| `maxWidthModal` | optional string | `1024px` | CSS style for max width of the CMP UI. Example: `1024px`, `calc(90% - 100px)` | -| `shouldAutoResizeModal` | optional boolean | true | Auto detects Layer1 height to minimize UI. UI resizes to `maxHeightModal` upon interaction | -| `primaryColor` | optional string | null | Example: `#0099ff` | -| `textLinkColor` | optional string | null | Example: `#0099ff` | -| `secondaryColor` | optional string | null | Example: `#869cc0` | -| `featuresColor` | optional string | null | Example: `#d0d3d7` | -| `featuresColor` | optional string | null | Example: `#d0d3d7` | +| Theme Property | Type | Default | Detail | +| ----------------------- | ---------------- | -------- | -------------------------------------------------------------------------------------------------------- | +| `maxHeightModal` | optional string | `45vh` | CSS style for max height of the CMP UI. Example: `45vh`, `50%`, `350px` | +| `maxWidthModal` | optional string | `1024px` | CSS style for max width of the CMP UI. Example: `1024px`, `calc(90% - 100px)` | +| `shouldAutoResizeModal` | optional boolean | true | Auto detects Layer1 height to minimize UI. UI resizes to `maxHeightModal` upon interaction | +| `primaryColor` | optional string | null | Example: `#0099ff` | +| `textLinkColor` | optional string | null | Example: `#0099ff` | +| `secondaryColor` | optional string | null | Example: `#869cc0` | +| `featuresColor` | optional string | null | Example: `#d0d3d7` | +| `backgroundColor` | optional string | null | Example: `#d0d3d7` Sets the background color of the banners. v2.1.4+ | +| `fullWidth` | optional boolean | false | Removes rounded corners and makes banners full width - matching style layout slimMode v2.1.4+ | +| `showDropShadow` | optional boolean | true | When set to `true`, displays the drop shadoq on banners v2.1.4+ | ## Initialize With Euconsent String from URL Param diff --git a/src/s1/components/banner/banner.less b/src/s1/components/banner/banner.less index 4596fe50..e2372e25 100644 --- a/src/s1/components/banner/banner.less +++ b/src/s1/components/banner/banner.less @@ -15,13 +15,16 @@ padding-left: 0px; z-index: 99999; color: @color-textLight; - background: white; + background: #fff; font-size: 16px; - transition: transform 350ms ease-in-out, opacity 350ms linear; - box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.12), 0 -2px 2px rgba(0, 0, 0, 0.12), 0 -4px 4px rgba(0, 0, 0, 0.12), - 0 -8px 8px rgba(0, 0, 0, 0.12), 0 -16px 16px rgba(0, 0, 0, 0.12); + transition: transform 350ms ease-in-out, opacity 350ms linear; margin: auto; + &.bannerShadow { + box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.12), 0 -2px 2px rgba(0, 0, 0, 0.12), 0 -4px 4px rgba(0, 0, 0, 0.12), + 0 -8px 8px rgba(0, 0, 0, 0.12), 0 -16px 16px rgba(0, 0, 0, 0.12); + } + &.bannerRounded { border-top-left-radius: 25px; border-top-right-radius: 25px; @@ -69,7 +72,7 @@ overflow: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box; - background: #fff; + /*background: #fff;*/ display: flex; flex-wrap: wrap; align-items: center; @@ -225,6 +228,21 @@ } } } + + .closeX { + position: absolute; + right: 20px; + top: -20px; + width: 40px; + height: 40px; + line-height: 40px; + text-align: center; + border-radius: 20px; + border: 1px solid rgba( 0, 0, 0, 0.5 ); + background: #fff; + font-size: 30px; + cursor: pointer; + } } .navigation { @@ -242,12 +260,12 @@ border-top-right-radius: 10px; box-shadow: 20px -30px 10px -30px rgba(0, 0, 0, 0.05), -10px -30px 10px -30px rgba(0, 0, 0, 0.05), 0px -30px 10px -40px rgba(150, 0, 0, 0.1); - background: linear-gradient( + /*background: linear-gradient( 180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 1) 100% - ); + );*/ font-size: 18px; display: flex; diff --git a/src/s1/components/banner/bannerSlim.jsx b/src/s1/components/banner/bannerSlim.jsx index e0c79fc2..f4d8d844 100644 --- a/src/s1/components/banner/bannerSlim.jsx +++ b/src/s1/components/banner/bannerSlim.jsx @@ -128,10 +128,9 @@ export default class BannerSlim extends Component { const { hasScrolled } = state; const { isShowing, store } = props; const { - config: { theme }, + config: { theme, showCloseX, }, translations, - isSaveShowing, - maxHeightModal, + maxHeightModal, } = store; const { @@ -144,12 +143,16 @@ export default class BannerSlim extends Component { backgroundColor, textColor, textLightColor, + showDropShadow, } = theme; const bannerClasses = [style.banner, style.bannerSlim]; if (!isShowing) { bannerClasses.push(style.hidden); } + if( showDropShadow ) { + bannerClasses.push(style.bannerShadow); + } if (isBannerModal) { bannerClasses.push(style.bannerModal); } else if (isBannerInline) { @@ -172,6 +175,7 @@ export default class BannerSlim extends Component { maxHeight: maxHeightModal, }} > + { showCloseX &&
    ×
    }
    (this.aboveFoldRef = el)}> diff --git a/src/s1/components/banner/bannerStacks.jsx b/src/s1/components/banner/bannerStacks.jsx index 7699a6a0..373534f2 100644 --- a/src/s1/components/banner/bannerStacks.jsx +++ b/src/s1/components/banner/bannerStacks.jsx @@ -129,7 +129,7 @@ export default class BannerStacks extends Component { const { hasScrolled } = state; const { isShowing, store } = props; const { - config: { theme }, + config: { theme, showCloseX, }, translations, displayLayer1, isSaveShowing, @@ -141,6 +141,7 @@ export default class BannerStacks extends Component { isBannerInline, maxWidthModal, fullWidth, + showDropShadow, // maxHeightModal, // handled in store primaryColor, primaryTextColor, @@ -156,6 +157,9 @@ export default class BannerStacks extends Component { if( !fullWidth ) { bannerClasses.push(style.bannerRounded); } + if( showDropShadow ) { + bannerClasses.push(style.bannerShadow); + } if (isBannerModal) { bannerClasses.push(style.bannerModal); } else if (isBannerInline) { @@ -178,6 +182,7 @@ export default class BannerStacks extends Component { maxHeight: maxHeightModal, }} > + { showCloseX &&
    ×
    }
    (this.aboveFoldRef = el)}> diff --git a/src/s1/components/banner/bannerVendors.jsx b/src/s1/components/banner/bannerVendors.jsx index 69ba23b5..f0f1133f 100644 --- a/src/s1/components/banner/bannerVendors.jsx +++ b/src/s1/components/banner/bannerVendors.jsx @@ -74,13 +74,13 @@ export default class BannerVendors extends Component { render(props) { const { isShowing, store } = props; const { - config: { theme }, + config: { theme, showCloseX, }, isSaveShowing, translations, - maxHeightModal, + maxHeightModal, } = store; - const { isBannerModal, isBannerInline, primaryColor, primaryTextColor, backgroundColor, textLightColor, fullWidth } = theme; + const { isBannerModal, isBannerInline, primaryColor, primaryTextColor, backgroundColor, textLightColor, fullWidth, showDropShadow, } = theme; const bannerClasses = [style.banner]; if (!isShowing) { @@ -88,6 +88,9 @@ export default class BannerVendors extends Component { } if( !fullWidth ) { bannerClasses.push(style.bannerRounded); + } + if( showDropShadow ) { + bannerClasses.push(style.bannerShadow); } if (isBannerModal) { bannerClasses.push(style.bannerModal); @@ -110,6 +113,7 @@ export default class BannerVendors extends Component { maxHeight: maxHeightModal, }} > + { showCloseX &&
    ×
    }
    (this.messageRef = el)}>
    diff --git a/src/s1/components/banner/purposeList.less b/src/s1/components/banner/purposeList.less index 1030c752..444ea6fa 100644 --- a/src/s1/components/banner/purposeList.less +++ b/src/s1/components/banner/purposeList.less @@ -28,7 +28,7 @@ list-style: none; margin-bottom: 1rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1); - background-color: #fafcfb; + /*background-color: #fafcfb;*/ transform: translateZ(0); width: 100%; diff --git a/src/s1/lib/config.js b/src/s1/lib/config.js index fbc301b5..16ddf44e 100644 --- a/src/s1/lib/config.js +++ b/src/s1/lib/config.js @@ -19,6 +19,7 @@ export const theme = { // featuresColor: '#d0d3d7', // maxWidthModal: '500px', fullWidth: false, + showDropShadow: true, shouldAutoResizeModal: true, maxHeightModal: '45vh', }; @@ -34,6 +35,7 @@ export const config = { ccpaApplies: false, experimentId: 'control', slimMode: false, + showCloseX: false, gdprApplies: false, gdprConsentUrlParam, isServiceSpecific: true, // whether or not this cmp is configured to be service specific diff --git a/src/s1/reference/tcf-2.0.html b/src/s1/reference/tcf-2.0.html index 648c4c5c..2311d4ae 100644 --- a/src/s1/reference/tcf-2.0.html +++ b/src/s1/reference/tcf-2.0.html @@ -155,6 +155,14 @@

    TCFString

    Full Width: +
  • + Drop Shadow: + +
    • +
  • + Close with X: + +
    • @@ -174,6 +182,8 @@

    TCFString

    const domShouldUseStacks = document.querySelector('#domShouldUseStacks'); const domShouldUseSlim = document.querySelector('#domShouldUseSlim'); const domFullWidth = document.querySelector('#domFullWidth'); + const domDropShadow = document.querySelector('#domDropShadow'); + const domCloseWithX = document.querySelector('#domCloseWithX'); const setupQaTools = function (store) { const LANGUAGES = store.LANGUAGES; @@ -212,11 +222,22 @@

    TCFString

    return params.get('fullwidth') === 'true'; }; + const useDropShadow = function () { + let params = new URLSearchParams(window.location.search); + return params.get('dropshadow') !== 'false'; + }; + + const useCloseWithX = function () { + let params = new URLSearchParams(window.location.search); + return params.get('closewithx') === 'true'; + }; + const config = { theme: { shouldAutoResizeModal: shouldAutoResize(), maxHeightModal: '65vh', fullWidth: useFullWidth(), + showDropShadow: useDropShadow(), }, business: 'reference', gdprApplies: true, @@ -233,6 +254,7 @@

    TCFString

    // language: '', // default shouldUseStacks: shouldUseStacks(), slimMode: shouldUseSlim(), + showCloseX: useCloseWithX(), // narrowedVendors: [1, 2, 3, 4, 5, 6], }; @@ -309,6 +331,20 @@

    TCFString

    params.set('fullwidth', domFullWidth.checked); window.location.search = params.toString(); }); + + domDropShadow.checked = useDropShadow(); + domDropShadow.addEventListener('change', function () { + let params = new URLSearchParams(window.location.search); + params.set('dropshadow', domDropShadow.checked); + window.location.search = params.toString(); + }); + + domCloseWithX.checked = useCloseWithX(); + domCloseWithX.addEventListener('change', function () { + let params = new URLSearchParams(window.location.search); + params.set('closewithx', domCloseWithX.checked); + window.location.search = params.toString(); + }); From d83325e37524dc752c0d3095cb7f297151380500 Mon Sep 17 00:00:00 2001 From: s1hane Date: Thu, 5 Nov 2020 15:27:58 -0500 Subject: [PATCH 5/8] chore(version) bumps version and updates changelog --- CHANGELOG.md | 10 ++++++++++ package.json | 2 +- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a24afba1..2734df99 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,13 @@ +## [2.1.4](https://github.com/openmail/system1-cmp/compare/2.1.2...2.1.3) (2020-11-05) + +### Feat + +- [x] Adds new slim banner with feature flag +- [x] Adds full width mode with feature flag +- [x] Adds drop shadow toggle feature flag +- [x] Adds close with × buttom feature flag +- [x] Adds default background color override + ## [2.1.3](https://github.com/openmail/system1-cmp/compare/2.1.2...2.1.3) (2020-11-03) ### Chore diff --git a/package.json b/package.json index ba334c06..f9fdec16 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "system1-cmp", - "version": "2.1.3", + "version": "2.1.4", "cmpVersion": 5, "description": "System1 Consent Management Platform for TCF 1.1 GDPR Compliance", "scripts": { From 1033fb92a5ed4de35991397ed00062ca44053352 Mon Sep 17 00:00:00 2001 From: s1hane Date: Thu, 5 Nov 2020 16:32:15 -0500 Subject: [PATCH 6/8] fix (naming) fixes naming convention of boolean variables and functions for consistency --- README.md | 12 ++++++------ src/s1/components/banner/bannerSlim.jsx | 8 ++++---- src/s1/components/banner/bannerStacks.jsx | 12 ++++++------ src/s1/components/banner/bannerVendors.jsx | 10 +++++----- src/s1/lib/config.js | 8 ++++---- src/s1/lib/store.js | 8 ++++---- src/s1/reference/tcf-2.0.html | 20 ++++++++++---------- 7 files changed, 39 insertions(+), 39 deletions(-) diff --git a/README.md b/README.md index 398c0c4f..712e9863 100644 --- a/README.md +++ b/README.md @@ -74,7 +74,7 @@ See a [working example in codepen](https://codepen.io/potench/pen/GRZZprw). publisherCountryCode: 'US', // language: '', // empty string or unset to default to browser language shouldUseStacks: true, - slimMode: true, + isSlimMode: true, // narrowedVendors: [1, 2, 3, 4, 5, 6], theme: { boxShadow: 'none', @@ -84,7 +84,7 @@ See a [working example in codepen](https://codepen.io/potench/pen/GRZZprw). secondaryColor: '#869cc0', shouldAutoResizeModal: true, // resizes modal on stacks screen to push stacks below fold textLinkColor: '#0099ff', - fullWidth: false, + isFullWidth: false, }, } ); @@ -222,8 +222,8 @@ __tcfapi('init', 2, () => {}, { | `publisherCountryCode` | optional string | `US` | String representing country code of parent website business | | `isServiceSpecific` | optional boolean | `true` | true uses publisher consent, false uses global consent | | `shouldUseStacks` | optional boolean | `true` | true uses stacks on Layer1, TODO stacks need purposes/custom-features toggle to be compliant | -| `slimMode` | optional boolean | `false` | If `true`, initial banner is low profile, full width banner v2.1.4+ | -| `showCloseX` | optional boolean | `false` | If `true`, a × icon will appear in the upper right on layers to accept-all and close v2.1.4+ | +| `isSlimMode` | optional boolean | `false` | If `true`, initial banner is low profile, full width banner v2.1.4+ | +| `shouldShowCloseX` | optional boolean | `false` | If `true`, a × icon will appear in the upper right on layers to accept-all and close v2.1.4+ | ### theme @@ -239,8 +239,8 @@ Themeing is a bit limited right now. Pass in a `config.theme` object during init | `secondaryColor` | optional string | null | Example: `#869cc0` | | `featuresColor` | optional string | null | Example: `#d0d3d7` | | `backgroundColor` | optional string | null | Example: `#d0d3d7` Sets the background color of the banners. v2.1.4+ | -| `fullWidth` | optional boolean | false | Removes rounded corners and makes banners full width - matching style layout slimMode v2.1.4+ | -| `showDropShadow` | optional boolean | true | When set to `true`, displays the drop shadoq on banners v2.1.4+ | +| `isFullWidth` | optional boolean | false | Removes rounded corners and makes banners full width - matching style layout slimMode v2.1.4+ | +| `shouldShowDropShadow` | optional boolean | true | When set to `true`, displays the drop shadoq on banners v2.1.4+ | ## Initialize With Euconsent String from URL Param diff --git a/src/s1/components/banner/bannerSlim.jsx b/src/s1/components/banner/bannerSlim.jsx index f4d8d844..b035f1c0 100644 --- a/src/s1/components/banner/bannerSlim.jsx +++ b/src/s1/components/banner/bannerSlim.jsx @@ -128,7 +128,7 @@ export default class BannerSlim extends Component { const { hasScrolled } = state; const { isShowing, store } = props; const { - config: { theme, showCloseX, }, + config: { theme, shouldShowCloseX, }, translations, maxHeightModal, } = store; @@ -143,14 +143,14 @@ export default class BannerSlim extends Component { backgroundColor, textColor, textLightColor, - showDropShadow, + shouldShowDropShadow, } = theme; const bannerClasses = [style.banner, style.bannerSlim]; if (!isShowing) { bannerClasses.push(style.hidden); } - if( showDropShadow ) { + if( shouldShowDropShadow ) { bannerClasses.push(style.bannerShadow); } if (isBannerModal) { @@ -175,7 +175,7 @@ export default class BannerSlim extends Component { maxHeight: maxHeightModal, }} > - { showCloseX &&
    ×
    } + { shouldShowCloseX &&
    ×
    }
    (this.aboveFoldRef = el)}> diff --git a/src/s1/components/banner/bannerStacks.jsx b/src/s1/components/banner/bannerStacks.jsx index 373534f2..b68cf02c 100644 --- a/src/s1/components/banner/bannerStacks.jsx +++ b/src/s1/components/banner/bannerStacks.jsx @@ -129,7 +129,7 @@ export default class BannerStacks extends Component { const { hasScrolled } = state; const { isShowing, store } = props; const { - config: { theme, showCloseX, }, + config: { theme, shouldShowCloseX, }, translations, displayLayer1, isSaveShowing, @@ -140,8 +140,8 @@ export default class BannerStacks extends Component { isBannerModal, isBannerInline, maxWidthModal, - fullWidth, - showDropShadow, + isFullWidth, + shouldShowDropShadow, // maxHeightModal, // handled in store primaryColor, primaryTextColor, @@ -154,10 +154,10 @@ export default class BannerStacks extends Component { if (!isShowing) { bannerClasses.push(style.hidden); } - if( !fullWidth ) { + if( !isFullWidth ) { bannerClasses.push(style.bannerRounded); } - if( showDropShadow ) { + if( shouldShowDropShadow ) { bannerClasses.push(style.bannerShadow); } if (isBannerModal) { @@ -182,7 +182,7 @@ export default class BannerStacks extends Component { maxHeight: maxHeightModal, }} > - { showCloseX &&
    ×
    } + { shouldShowCloseX &&
    ×
    }
    (this.aboveFoldRef = el)}> diff --git a/src/s1/components/banner/bannerVendors.jsx b/src/s1/components/banner/bannerVendors.jsx index f0f1133f..2867b0ca 100644 --- a/src/s1/components/banner/bannerVendors.jsx +++ b/src/s1/components/banner/bannerVendors.jsx @@ -74,22 +74,22 @@ export default class BannerVendors extends Component { render(props) { const { isShowing, store } = props; const { - config: { theme, showCloseX, }, + config: { theme, shouldShowCloseX, }, isSaveShowing, translations, maxHeightModal, } = store; - const { isBannerModal, isBannerInline, primaryColor, primaryTextColor, backgroundColor, textLightColor, fullWidth, showDropShadow, } = theme; + const { isBannerModal, isBannerInline, primaryColor, primaryTextColor, backgroundColor, textLightColor, isFullWidth, shouldShowDropShadow, } = theme; const bannerClasses = [style.banner]; if (!isShowing) { bannerClasses.push(style.hidden); } - if( !fullWidth ) { + if( !isFullWidth ) { bannerClasses.push(style.bannerRounded); } - if( showDropShadow ) { + if( shouldShowDropShadow ) { bannerClasses.push(style.bannerShadow); } if (isBannerModal) { @@ -113,7 +113,7 @@ export default class BannerVendors extends Component { maxHeight: maxHeightModal, }} > - { showCloseX &&
    ×
    } + { shouldShowCloseX &&
    ×
    }
    (this.messageRef = el)}>
    diff --git a/src/s1/lib/config.js b/src/s1/lib/config.js index 16ddf44e..21083966 100644 --- a/src/s1/lib/config.js +++ b/src/s1/lib/config.js @@ -18,8 +18,8 @@ export const theme = { // secondaryColor: '#869cc0', // featuresColor: '#d0d3d7', // maxWidthModal: '500px', - fullWidth: false, - showDropShadow: true, + isFullWidth: false, + shouldShowDropShadow: true, shouldAutoResizeModal: true, maxHeightModal: '45vh', }; @@ -34,8 +34,8 @@ export const config = { cookieDomain: '', ccpaApplies: false, experimentId: 'control', - slimMode: false, - showCloseX: false, + isSlimMode: false, + shouldShowCloseX: false, gdprApplies: false, gdprConsentUrlParam, isServiceSpecific: true, // whether or not this cmp is configured to be service specific diff --git a/src/s1/lib/store.js b/src/s1/lib/store.js index cf83ee22..1417e087 100644 --- a/src/s1/lib/store.js +++ b/src/s1/lib/store.js @@ -143,7 +143,7 @@ export default class Store { gdprConsentUrlParam, publisherCountryCode, isServiceSpecific, - slimMode, + isSlimMode, } = this.config; const { vendors } = this.gvl; @@ -176,7 +176,7 @@ export default class Store { cmpVersion, isServiceSpecific, publisherCountryCode, - consentScreen: ( slimMode ? CONSENT_SCREENS.SLIM_LAYER0 : CONSENT_SCREENS.STACKS_LAYER1 ), + consentScreen: ( isSlimMode ? CONSENT_SCREENS.SLIM_LAYER0 : CONSENT_SCREENS.STACKS_LAYER1 ), }); // Handle a new user @@ -520,10 +520,10 @@ export default class Store { if (!this.tcModel) { return; } - const { slimMode } = this.config; + const { isSlimMode } = this.config; let tcModel = this.tcModel.clone(); - tcModel.consentScreen = ( slimMode ? CONSENT_SCREENS.SLIM_LAYER0 : CONSENT_SCREENS.STACKS_LAYER1 ); + tcModel.consentScreen = ( isSlimMode ? CONSENT_SCREENS.SLIM_LAYER0 : CONSENT_SCREENS.STACKS_LAYER1 ); this.updateCmp({ shouldShowModal, diff --git a/src/s1/reference/tcf-2.0.html b/src/s1/reference/tcf-2.0.html index 2311d4ae..0486f7c9 100644 --- a/src/s1/reference/tcf-2.0.html +++ b/src/s1/reference/tcf-2.0.html @@ -217,17 +217,17 @@

    TCFString

    return params.get('slim') === 'true'; }; - const useFullWidth = function () { + const isFullWidth = function () { let params = new URLSearchParams(window.location.search); return params.get('fullwidth') === 'true'; }; - const useDropShadow = function () { + const shouldShowDropShadow = function () { let params = new URLSearchParams(window.location.search); return params.get('dropshadow') !== 'false'; }; - const useCloseWithX = function () { + const shouldShowCloseX = function () { let params = new URLSearchParams(window.location.search); return params.get('closewithx') === 'true'; }; @@ -236,8 +236,8 @@

    TCFString

    theme: { shouldAutoResizeModal: shouldAutoResize(), maxHeightModal: '65vh', - fullWidth: useFullWidth(), - showDropShadow: useDropShadow(), + isFullWidth: isFullWidth(), + shouldShowDropShadow: shouldShowDropShadow(), }, business: 'reference', gdprApplies: true, @@ -253,8 +253,8 @@

    TCFString

    publisherCountryCode: 'US', // language: '', // default shouldUseStacks: shouldUseStacks(), - slimMode: shouldUseSlim(), - showCloseX: useCloseWithX(), + isSlimMode: shouldUseSlim(), + shouldShowCloseX: shouldShowCloseX(), // narrowedVendors: [1, 2, 3, 4, 5, 6], }; @@ -325,21 +325,21 @@

    TCFString

    window.location.search = params.toString(); }); - domFullWidth.checked = useFullWidth(); + domFullWidth.checked = isFullWidth(); domFullWidth.addEventListener('change', function () { let params = new URLSearchParams(window.location.search); params.set('fullwidth', domFullWidth.checked); window.location.search = params.toString(); }); - domDropShadow.checked = useDropShadow(); + domDropShadow.checked = shouldShowDropShadow(); domDropShadow.addEventListener('change', function () { let params = new URLSearchParams(window.location.search); params.set('dropshadow', domDropShadow.checked); window.location.search = params.toString(); }); - domCloseWithX.checked = useCloseWithX(); + domCloseWithX.checked = shouldShowCloseX(); domCloseWithX.addEventListener('change', function () { let params = new URLSearchParams(window.location.search); params.set('closewithx', domCloseWithX.checked); From 41bfff9a87067fcd5c0e00b20def003545fd9985 Mon Sep 17 00:00:00 2001 From: s1hane Date: Tue, 10 Nov 2020 09:15:02 -0500 Subject: [PATCH 7/8] feat,fix(dpl,css) adds new event category for close x button, fixes font on x button for OSX/IOS --- src/s1/components/banner/banner.less | 8 ++------ src/s1/components/banner/bannerSlim.jsx | 10 +++++++--- src/s1/components/banner/bannerStacks.jsx | 10 +++++++--- src/s1/components/banner/bannerVendors.jsx | 10 +++++++--- 4 files changed, 23 insertions(+), 15 deletions(-) diff --git a/src/s1/components/banner/banner.less b/src/s1/components/banner/banner.less index e2372e25..1a194cd3 100644 --- a/src/s1/components/banner/banner.less +++ b/src/s1/components/banner/banner.less @@ -242,6 +242,7 @@ background: #fff; font-size: 30px; cursor: pointer; + font-family: arial,sans-serif; } } @@ -260,12 +261,7 @@ border-top-right-radius: 10px; box-shadow: 20px -30px 10px -30px rgba(0, 0, 0, 0.05), -10px -30px 10px -30px rgba(0, 0, 0, 0.05), 0px -30px 10px -40px rgba(150, 0, 0, 0.1); - /*background: linear-gradient( - 180deg, - rgba(255, 255, 255, 0.9) 0%, - rgba(255, 255, 255, 1) 20%, - rgba(255, 255, 255, 1) 100% - );*/ + background-color: inherit; font-size: 18px; display: flex; diff --git a/src/s1/components/banner/bannerSlim.jsx b/src/s1/components/banner/bannerSlim.jsx index b035f1c0..776a2198 100644 --- a/src/s1/components/banner/bannerSlim.jsx +++ b/src/s1/components/banner/bannerSlim.jsx @@ -55,7 +55,11 @@ export default class BannerSlim extends Component { debounce.clear(); } - handleAcceptAll = () => { + handleClose = () => { + this.handleAcceptAll( 'acceptAllClose' ); + } + + handleAcceptAll = ( clickCategory = 'acceptAll' ) => { const { store } = this.props; const { tcModel: { consentScreen }, @@ -63,7 +67,7 @@ export default class BannerSlim extends Component { logger(LOG_EVENTS.CMPClick, { action: 'click', - category: 'acceptAll', + category: clickCategory, label: `screen${consentScreen}`, }); @@ -175,7 +179,7 @@ export default class BannerSlim extends Component { maxHeight: maxHeightModal, }} > - { shouldShowCloseX &&
    ×
    } + { shouldShowCloseX &&
    ×
    }
    (this.aboveFoldRef = el)}> diff --git a/src/s1/components/banner/bannerStacks.jsx b/src/s1/components/banner/bannerStacks.jsx index b68cf02c..3d92bd8d 100644 --- a/src/s1/components/banner/bannerStacks.jsx +++ b/src/s1/components/banner/bannerStacks.jsx @@ -56,7 +56,11 @@ export default class BannerStacks extends Component { debounce.clear(); } - handleAcceptAll = () => { + handleClose = () => { + this.handleAcceptAll( 'acceptAllClose' ); + } + + handleAcceptAll = ( clickCategory = 'acceptAll' ) => { const { store } = this.props; const { tcModel: { consentScreen }, @@ -64,7 +68,7 @@ export default class BannerStacks extends Component { logger(LOG_EVENTS.CMPClick, { action: 'click', - category: 'acceptAll', + category: clickCategory, label: `screen${consentScreen}`, }); @@ -182,7 +186,7 @@ export default class BannerStacks extends Component { maxHeight: maxHeightModal, }} > - { shouldShowCloseX &&
    ×
    } + { shouldShowCloseX &&
    ×
    }
    (this.aboveFoldRef = el)}> diff --git a/src/s1/components/banner/bannerVendors.jsx b/src/s1/components/banner/bannerVendors.jsx index 2867b0ca..430f3ad4 100644 --- a/src/s1/components/banner/bannerVendors.jsx +++ b/src/s1/components/banner/bannerVendors.jsx @@ -56,7 +56,11 @@ export default class BannerVendors extends Component { }); }; - handleAcceptAll = () => { + handleClose = () => { + this.handleAcceptAll( 'acceptAllClose' ); + } + + handleAcceptAll = ( clickCategory = 'acceptAll' ) => { const { store } = this.props; const { tcModel: { consentScreen }, @@ -64,7 +68,7 @@ export default class BannerVendors extends Component { logger(LOG_EVENTS.CMPClick, { action: 'click', - category: 'acceptAll', + category: clickCategory, label: `screen${consentScreen}`, }); @@ -113,7 +117,7 @@ export default class BannerVendors extends Component { maxHeight: maxHeightModal, }} > - { shouldShowCloseX &&
    ×
    } + { shouldShowCloseX &&
    ×
    }
    (this.messageRef = el)}>
    From beebec6caba762c84264b7b55597802d5cc87836 Mon Sep 17 00:00:00 2001 From: s1hane Date: Fri, 13 Nov 2020 09:24:07 -0500 Subject: [PATCH 8/8] chore(translations) adds translations for new layer0 slim banner --- src/s1/config/2.0/translations/translations-da.json | 8 ++++++++ src/s1/config/2.0/translations/translations-de.json | 8 ++++++++ src/s1/config/2.0/translations/translations-en.json | 8 ++++++++ src/s1/config/2.0/translations/translations-es.json | 8 ++++++++ src/s1/config/2.0/translations/translations-fr.json | 8 ++++++++ src/s1/config/2.0/translations/translations-it.json | 8 ++++++++ src/s1/config/2.0/translations/translations-nl.json | 8 ++++++++ src/s1/config/2.0/translations/translations-no.json | 8 ++++++++ src/s1/config/2.0/translations/translations-pt.json | 8 ++++++++ src/s1/config/2.0/translations/translations-sv.json | 8 ++++++++ 10 files changed, 80 insertions(+) diff --git a/src/s1/config/2.0/translations/translations-da.json b/src/s1/config/2.0/translations/translations-da.json index 23ec6dad..4cdc080f 100644 --- a/src/s1/config/2.0/translations/translations-da.json +++ b/src/s1/config/2.0/translations/translations-da.json @@ -1,4 +1,12 @@ { + "layer0Slim": { + "title": "Vi Værdsætter Dit Privatliv & Dine Valg", + "description": "Vi og vores partnere bruger cookies og andre teknologier til at gemme og/eller få adgang til oplysninger på eller fra din enhed (med eller uden din tilladelse, afhængig af typen af data), mens du bruger dette websted med det formål at personalisere annoncer og indhold, analysere eller måle brugen af webstedet og udvikle målgruppeindsigt. Du kan lære mere samt ændre eller administrere dine indstillinger for samtykke via linket \"administrer præferencer\" eller ved at besøge vores \"privatlivspolitik\".", + "links": { + "manage": "Lær Mere", + "accept": "Ok, Forstået" + } + }, "layer1Stacks": { "title": "Privatlivsindstillinger", "description": "Ved at bruge dette websted accepterer du vores brug af cookies og oplysninger til at levere personligt indhold og annoncer samt måle og analysere brugen af webstedet. Klik på \"Lær mere\" for at ændre dine indstillinger.", diff --git a/src/s1/config/2.0/translations/translations-de.json b/src/s1/config/2.0/translations/translations-de.json index 43525bf5..3eec7c46 100644 --- a/src/s1/config/2.0/translations/translations-de.json +++ b/src/s1/config/2.0/translations/translations-de.json @@ -1,4 +1,12 @@ { + "layer0Slim": { + "title": "Wir schätzen Ihre Privatsphäre und Auswahl", + "description": "Wir und unsere Partner verwenden Cookies und andere Technologien, um Informationen auf oder von Ihrem Gerät zu speichern und/oder darauf zuzugreifen (mit oder ohne Ihre Zustimmung, je nach Art der Daten), während Sie diese Website nutzen, um Anzeigen und Inhalte zu personalisieren, die Nutzung der Website zu analysieren oder zu messen und Einblicke in das Publikum zu gewinnen. Über den Link \"Präferenzen verwalten\" oder über unsere \"Datenschutzrichtlinie\" können Sie mehr erfahren und Ihre Präferenzen für die Einstellung Ihrer Zustimmung ändern oder verwalten.", + "links": { + "manage": "Mehr Erfahren", + "accept": "Ok, Verstanden" + } + }, "layer1Stacks": { "title": "Datenschutzoptionen", "description": "Wenn Sie diese Website besuchen, erklären Sie sich damit einverstanden, dass wir Cookies und Informationen verwenden, um personalisierte Inhalte und Anzeigen bereitzustellen und die Nutzung der Website zu messen und zu analysieren. Klicken Sie auf \"Erfahren Sie mehr\", um Ihre Einstellungen zu ändern.", diff --git a/src/s1/config/2.0/translations/translations-en.json b/src/s1/config/2.0/translations/translations-en.json index fa96384d..aa15deb5 100644 --- a/src/s1/config/2.0/translations/translations-en.json +++ b/src/s1/config/2.0/translations/translations-en.json @@ -1,4 +1,12 @@ { + "layer0Slim": { + "title": "We Value Your Privacy & Choices", + "description": "We and our partners use cookies and other technologies to store and/or access information on or from your device (with or without your permission, depending on the type of data) while you use this site, in order to personalize ads and content, analyze or measure site usage, and develop audience insights. You can learn more and change or manage your consent setting preferences via the \"manage preferences\" link or visiting our \"privacy policy\".", + "links": { + "manage": "Learn More", + "accept": "Ok, Got It" + } + }, "layer1Stacks": { "title": "Privacy Choices", "description": "By using this site, you agree to our use of cookies and information to provide personalized content and ads and to measure and analyze site usage. You can change or manage your consent settings at any time via the \"manage preferences\" link.", diff --git a/src/s1/config/2.0/translations/translations-es.json b/src/s1/config/2.0/translations/translations-es.json index b7327a81..7f9de0b2 100644 --- a/src/s1/config/2.0/translations/translations-es.json +++ b/src/s1/config/2.0/translations/translations-es.json @@ -1,4 +1,12 @@ { + "layer0Slim": { + "title": "Valoramos su privacidad y sus preferencias", + "description": "Nosotros, y nuestros socios, utilizamos cookies y otras tecnologías para almacenar y/o acceder a información en, o desde, su dispositivo (con o sin su permiso, dependiendo del tipo de datos) mientras utiliza este sitio, con el fin de personalizar los anuncios y el contenido, analizar o medir el uso del sitio, y comprender la composición de nuestra audiencia. Puede obtener más información y cambiar o gestionar sus preferencias de consentimiento a través del enlace \"configurar preferencias\" o visitando nuestra \"política de privacidad\".", + "links": { + "manage": "Más Información", + "accept": "¡Listo!" + } + }, "layer1Stacks": { "title": "Opciones de Privacidad", "description": "Al usar este sitio, usted acepta que usemos cookies e información para suministrarle contenido y anuncios personalizados y medir y analizar el uso del sitio. Haga clic en \"Más información\" para cambiar su configuración", diff --git a/src/s1/config/2.0/translations/translations-fr.json b/src/s1/config/2.0/translations/translations-fr.json index 1ff958ef..d48b9b32 100644 --- a/src/s1/config/2.0/translations/translations-fr.json +++ b/src/s1/config/2.0/translations/translations-fr.json @@ -1,4 +1,12 @@ { + "layer0Slim": { + "title": "Nous Accordons Une Grande Valeur à Vos Choix & à Votre Vie Privée", + "description": "Nos partenaires et nous-mêmes utilisons des cookies et d'autres technologies pour stocker et/ou accéder à des informations sur ou à partir de votre appareil (avec ou sans votre autorisation, en fonction du type de données) lors de votre accès à ce site, afin de personnaliser les publicités et le contenu, d'analyser ou de mesurer l'utilisation du site et de développer des connaissances sur l'audience. Vous pouvez en savoir plus et modifier ou gérer vos préférences de paramétrage du consentement en vous rendant sur le lien « gérer les préférences » ou en consultant notre « politique de confidentialité ».", + "links": { + "manage": "En savoir plus", + "accept": "OK, j’ai compris" + } + }, "layer1Stacks": { "title": "Choix en matière de vie privée", "description": "En utilisant ce site, vous acceptez l’utilisation des cookies et des informations nécessaires pour vous fournir un contenu et des publicités personnalisées, ainsi que pour mesurer et analyser l’utilisation du site. Cliquez sur \"En savoir plus\" pour modifier vos paramètres.", diff --git a/src/s1/config/2.0/translations/translations-it.json b/src/s1/config/2.0/translations/translations-it.json index dc6a6487..3c564b02 100644 --- a/src/s1/config/2.0/translations/translations-it.json +++ b/src/s1/config/2.0/translations/translations-it.json @@ -1,4 +1,12 @@ { + "layer0Slim": { + "title": "Prendiamo sul serio la tua privacy e le tue scelte", + "description": "Mentre utilizzi questo sito, noi e i nostri partner utilizziamo cookie e altre tecnologie per archiviare informazioni sul tuo dispositivo e/o accedere a tali informazioni (con o senza il tuo consenso, a seconda del tipo di dati), al fine di personalizzare annunci e contenuti, analizzare o misurare l'utilizzo del sito ed elaborare approfondimenti sul pubblico. Per saperne di più e modificare o gestire le tue preferenze di impostazione del consenso clicca sul link “Gestisci preferenze” o visita la nostra “Informativa sulla privacy”.", + "links": { + "manage": "Maggiori informazioni", + "accept": "Ok, Capito" + } + }, "layer1Stacks": { "title": "Scelte Privacy", "description": "Utilizando questo sito, acconsenti al nostro uso dei cookie e delle informazioni per fornire contenuto personalizzato e pubblicità e per misurare ed analizzare l'utilizzo del sito. Clicca su \"Maggiori inforrmazioni\" per cambiare le tue impostazioni.", diff --git a/src/s1/config/2.0/translations/translations-nl.json b/src/s1/config/2.0/translations/translations-nl.json index 4be551e3..d416f69b 100644 --- a/src/s1/config/2.0/translations/translations-nl.json +++ b/src/s1/config/2.0/translations/translations-nl.json @@ -1,4 +1,12 @@ { + "layer0Slim": { + "title": "Wij waarderen uw Privacy & Keuzes", + "description": "Wij en onze partners gebruiken cookies en andere technologieën om informatie op of vanaf uw apparaat op te slaan en/of te raadplegen (met of zonder uw toestemming, afhankelijk van het type gegevens) terwijl u deze site gebruikt, om advertenties en inhoud te personaliseren, het gebruik van de site te analyseren of te meten, en om publieksinzichten te vergaren. U kunt meer informatie krijgen en uw toestemmingsinstellingen wijzigen of beheren via de link \"voorkeuren beheren\" of via ons \"privacybeleid\".", + "links": { + "manage": "Meer Leren", + "accept": "Ok, Begrepen" + } + }, "layer1Stacks": { "title": "Privacykeuzes", "description": "Door deze site te gebruiken, gaat u akkoord met ons gebruik van cookies en informatie om gepersonaliseerde inhoud en advertenties te leveren en het gebruik van de site te meten en te analyseren. Klik op \"Meer informatie\" om uw instellingen te wijzigen.", diff --git a/src/s1/config/2.0/translations/translations-no.json b/src/s1/config/2.0/translations/translations-no.json index e7fb0117..452dcdd0 100644 --- a/src/s1/config/2.0/translations/translations-no.json +++ b/src/s1/config/2.0/translations/translations-no.json @@ -1,4 +1,12 @@ { + "layer0Slim": { + "title": "Ditt personvern og dine valg er viktige for oss", + "description": "Vi og våre partnere bruker informasjonskapsler og annen teknologi for å lagre og/eller få tilgang til informasjon på eller fra enheten din (med eller uten din tillatelse, avhengig av type data) når du bruker dette nettstedet, med formålet å tilpasse annonser og innhold, analysere eller måle bruken av nettstedet og å få innsikt i brukeratferd. Du kan lære mer og endre eller administrere innstillingene dine for samtykke via lenken \"Administrere valg\" eller gå til våre \"Personvernregler\".", + "links": { + "manage": "Les mer", + "accept": "Ok, Jeg forstår" + } + }, "layer1Stacks": { "title": "Valg for personvern", "description": "Ved å bruke denne siden, aksepterer du vår bruk av informasjonskapsler og informasjon for å levere personalisert innhold og annonser, og til å måle og analysere diebruken. Klikk på \"Les mer\" for å endre innstillingene dine.", diff --git a/src/s1/config/2.0/translations/translations-pt.json b/src/s1/config/2.0/translations/translations-pt.json index b57d295e..40b36a80 100644 --- a/src/s1/config/2.0/translations/translations-pt.json +++ b/src/s1/config/2.0/translations/translations-pt.json @@ -1,4 +1,12 @@ { + "layer0Slim": { + "title": "Nós Valorizamos A Sua Privacidade & Escolhas", + "description": "Nós e os nossos parceiros usamos cookies e outras tecnologias para armazenar e/ou aceder a informação no seu dispositivo ou a partir dele (com ou sem a sua permissão, dependendo do tipo de dados) enquanto usa este sítio, de modo a personalizar anúncios e conteúdo, analisar ou medir a utilização do sítio e desenvolver conhecimento sobre a nossa audiência. Pode saber mais e alterar ou gerir a sua permissão ao definir as suas preferências através da hiperligação “gerir preferências” ou acedendo à nossa “política de privacidade”.", + "links": { + "manage": "Saiba Mais", + "accept": "Ok, percebi" + } + }, "layer1Stacks": { "title": "Opções de Privacidade", "description": "Ao usar este sítio concorda com o uso de cookies e de informação para providenciar conteúdo personalizado e anuncios e medir e analizar a utilização do sítio. Clique em \"Saiba Mais\" para alterar as suas configurações.", diff --git a/src/s1/config/2.0/translations/translations-sv.json b/src/s1/config/2.0/translations/translations-sv.json index 418b67ff..3f4203d9 100644 --- a/src/s1/config/2.0/translations/translations-sv.json +++ b/src/s1/config/2.0/translations/translations-sv.json @@ -1,4 +1,12 @@ { + "layer0Slim": { + "title": "Vi värdesätter din integritet och dina val", + "description": "Vi och våra partner använder cookies och annan teknik för att lagra och/eller få åtkomst till information på eller från din enhet (med eller utan din tillåtelse, beroende på vilken typ av data) när du använder denna webbplats för att anpassa annonser och innehåll, analysera eller mäta webbplatsanvändning och utveckla användarinsikter. Du kan lära dig mer om, ändra eller hantera dina inställningsinställningar via länken \"hantera preferenser\" eller besöka vår \"sekretesspolicy\".", + "links": { + "manage": "Lär Dig Mer", + "accept": "Ok, Jag Förstår" + } + }, "layer1Stacks": { "title": "Integritetsval", "description": "Genom att använda denna webbplats så samtycker du till vår användning av cookies för att tillhandahålla ett mer personligt skräddarsytt innehåll inklusive relaterade annonser samt i syfte att mäta och analysera användningen av webbplatsen. Klicka på \"Lär Dig Mer\" om du vill ändra dina inställningar.",