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/README.md b/README.md index 723dbdf7..712e9863 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, + isSlimMode: 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', + isFullWidth: 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 | +| `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 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+ | +| `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/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": { 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/banner.less b/src/s1/components/banner/banner.less index a2ca292c..1a194cd3 100644 --- a/src/s1/components/banner/banner.less +++ b/src/s1/components/banner/banner.less @@ -15,19 +15,25 @@ 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); - 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; + 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; + 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); @@ -66,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; @@ -79,6 +85,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; @@ -168,6 +228,22 @@ } } } + + .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; + font-family: arial,sans-serif; + } } .navigation { @@ -185,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 new file mode 100644 index 00000000..776a2198 --- /dev/null +++ b/src/s1/components/banner/bannerSlim.jsx @@ -0,0 +1,227 @@ +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); + } + + 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(); + } + + handleClose = () => { + this.handleAcceptAll( 'acceptAllClose' ); + } + + handleAcceptAll = ( clickCategory = 'acceptAll' ) => { + const { store } = this.props; + const { + tcModel: { consentScreen }, + } = store; + + logger(LOG_EVENTS.CMPClick, { + action: 'click', + category: clickCategory, + 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.STACKS_LAYER1); + }; + + 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, shouldShowCloseX, }, + translations, + maxHeightModal, + } = store; + + const { + isBannerModal, + isBannerInline, + maxWidthModal, + // maxHeightModal, // handled in store + primaryColor, + primaryTextColor, + backgroundColor, + textColor, + textLightColor, + shouldShowDropShadow, + } = theme; + + const bannerClasses = [style.banner, style.bannerSlim]; + if (!isShowing) { + bannerClasses.push(style.hidden); + } + if( shouldShowDropShadow ) { + bannerClasses.push(style.bannerShadow); + } + if (isBannerModal) { + bannerClasses.push(style.bannerModal); + } else if (isBannerInline) { + bannerClasses.push(style.bannerInline); + } + + return ( +
+
(this.scrollRef = el)} + style={{ + maxHeight: maxHeightModal, + }} + > + { shouldShowCloseX &&
×
} +
+
+
(this.aboveFoldRef = el)}> +
+ + We Value Your Privacy & Choices + +
+
+ + 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". + +
+
+
+
+
+ + + + Learn More + + + + + OK, Got It + + + +
+ ); + } +} diff --git a/src/s1/components/banner/bannerStacks.jsx b/src/s1/components/banner/bannerStacks.jsx index 8c19ddc3..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}`, }); @@ -129,7 +133,7 @@ export default class BannerStacks extends Component { const { hasScrolled } = state; const { isShowing, store } = props; const { - config: { theme }, + config: { theme, shouldShowCloseX, }, translations, displayLayer1, isSaveShowing, @@ -140,6 +144,8 @@ export default class BannerStacks extends Component { isBannerModal, isBannerInline, maxWidthModal, + isFullWidth, + shouldShowDropShadow, // maxHeightModal, // handled in store primaryColor, primaryTextColor, @@ -152,10 +158,16 @@ export default class BannerStacks extends Component { if (!isShowing) { bannerClasses.push(style.hidden); } + if( !isFullWidth ) { + bannerClasses.push(style.bannerRounded); + } + if( shouldShowDropShadow ) { + bannerClasses.push(style.bannerShadow); + } if (isBannerModal) { bannerClasses.push(style.bannerModal); } else if (isBannerInline) { - bannerClasses.push(style.bannerInline); + bannerClasses.push(style.bannerInline); } return ( @@ -174,6 +186,7 @@ export default class BannerStacks extends Component { maxHeight: maxHeightModal, }} > + { shouldShowCloseX &&
×
}
(this.aboveFoldRef = el)}> diff --git a/src/s1/components/banner/bannerVendors.jsx b/src/s1/components/banner/bannerVendors.jsx index 5ecbcd55..430f3ad4 100644 --- a/src/s1/components/banner/bannerVendors.jsx +++ b/src/s1/components/banner/bannerVendors.jsx @@ -37,7 +37,7 @@ export default class BannerVendors extends Component { category: 'back', label: `screen${consentScreen}`, }); - store.toggleConsentScreen(CONSENT_SCREENS.STACKS_LAYER1); + store.toggleConsentScreen( CONSENT_SCREENS.STACKS_LAYER1 ); }; handleSave = () => { @@ -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}`, }); @@ -74,18 +78,24 @@ export default class BannerVendors extends Component { render(props) { const { isShowing, store } = props; const { - config: { theme }, + config: { theme, shouldShowCloseX, }, isSaveShowing, translations, - maxHeightModal, + maxHeightModal, } = store; - const { isBannerModal, isBannerInline, primaryColor, primaryTextColor, backgroundColor, textLightColor } = theme; + const { isBannerModal, isBannerInline, primaryColor, primaryTextColor, backgroundColor, textLightColor, isFullWidth, shouldShowDropShadow, } = theme; const bannerClasses = [style.banner]; if (!isShowing) { bannerClasses.push(style.hidden); } + if( !isFullWidth ) { + bannerClasses.push(style.bannerRounded); + } + if( shouldShowDropShadow ) { + bannerClasses.push(style.bannerShadow); + } if (isBannerModal) { bannerClasses.push(style.bannerModal); } else if (isBannerInline) { @@ -107,6 +117,7 @@ export default class BannerVendors extends Component { maxHeight: maxHeightModal, }} > + { shouldShowCloseX &&
×
}
(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/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.", 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..21083966 100644 --- a/src/s1/lib/config.js +++ b/src/s1/lib/config.js @@ -18,6 +18,8 @@ export const theme = { // secondaryColor: '#869cc0', // featuresColor: '#d0d3d7', // maxWidthModal: '500px', + isFullWidth: false, + shouldShowDropShadow: true, shouldAutoResizeModal: true, maxHeightModal: '45vh', }; @@ -32,6 +34,8 @@ export const config = { cookieDomain: '', ccpaApplies: false, experimentId: 'control', + 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 a83f2d70..1417e087 100644 --- a/src/s1/lib/store.js +++ b/src/s1/lib/store.js @@ -143,6 +143,7 @@ export default class Store { gdprConsentUrlParam, publisherCountryCode, isServiceSpecific, + isSlimMode, } = this.config; const { vendors } = this.gvl; @@ -175,7 +176,7 @@ export default class Store { cmpVersion, isServiceSpecific, publisherCountryCode, - consentScreen: CONSENT_SCREENS.STACKS_LAYER1, + consentScreen: ( isSlimMode ? 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 { isSlimMode } = this.config; let tcModel = this.tcModel.clone(); - tcModel.consentScreen = 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 96bbc824..0486f7c9 100644 --- a/src/s1/reference/tcf-2.0.html +++ b/src/s1/reference/tcf-2.0.html @@ -147,6 +147,22 @@

TCFString

Use Stacks: +
  • + Use Slim: + +
    • +
  • + Full Width: + +
    • +
  • + Drop Shadow: + +
    • +
  • + Close with X: + +
    • @@ -164,6 +180,10 @@

    TCFString

    const selectVendors = document.querySelector('#selectVendors'); const domShouldAutoResize = document.querySelector('#domShouldAutoResize'); 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; @@ -192,10 +212,32 @@

    TCFString

    return params.get('stacks') === 'true'; }; + const shouldUseSlim = function () { + let params = new URLSearchParams(window.location.search); + return params.get('slim') === 'true'; + }; + + const isFullWidth = function () { + let params = new URLSearchParams(window.location.search); + return params.get('fullwidth') === 'true'; + }; + + const shouldShowDropShadow = function () { + let params = new URLSearchParams(window.location.search); + return params.get('dropshadow') !== 'false'; + }; + + const shouldShowCloseX = function () { + let params = new URLSearchParams(window.location.search); + return params.get('closewithx') === 'true'; + }; + const config = { theme: { shouldAutoResizeModal: shouldAutoResize(), maxHeightModal: '65vh', + isFullWidth: isFullWidth(), + shouldShowDropShadow: shouldShowDropShadow(), }, business: 'reference', gdprApplies: true, @@ -211,6 +253,8 @@

    TCFString

    publisherCountryCode: 'US', // language: '', // default shouldUseStacks: shouldUseStacks(), + isSlimMode: shouldUseSlim(), + shouldShowCloseX: shouldShowCloseX(), // narrowedVendors: [1, 2, 3, 4, 5, 6], }; @@ -265,6 +309,7 @@

    TCFString

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

    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(); + }); + + 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 = shouldShowDropShadow(); + domDropShadow.addEventListener('change', function () { + let params = new URLSearchParams(window.location.search); + params.set('dropshadow', domDropShadow.checked); + window.location.search = params.toString(); + }); + + domCloseWithX.checked = shouldShowCloseX(); + domCloseWithX.addEventListener('change', function () { + let params = new URLSearchParams(window.location.search); + params.set('closewithx', domCloseWithX.checked); + window.location.search = params.toString(); + });