@justeattakeaway/pie-cookie-banner 0.20.5 → 0.22.0

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
 import { PieSwitch } from '@justeattakeaway/pie-switch';
@@ -76,7 +76,7 @@ export declare interface CustomTagEnhancers {
     [key: string]: (tagContent: string) => TemplateResult;
 }
 
-export declare type DefaultProps = ComponentDefaultPropsGeneric<CookieBannerProps, 'hasPrimaryActionsOnly' | 'defaultPreferences' | 'locale' | 'cookieStatementLink' | 'cookieTechnologiesLink'>;
+export declare type DefaultProps = ComponentDefaultProps<CookieBannerProps>;
 
 export declare const defaultProps: DefaultProps;
 

package/dist/index.js

@@ -47,7 +47,7 @@ const O = {
 }, P = {
   banner: O,
   preferencesManagement: S
-}, M = `*,*:after,*:before{box-sizing:inherit}*{margin:0}.c-cookieBanner{--cb-font-family: var(--dt-font-interactive-l-family);--cb-font-size: calc(var(--dt-font-body-l-size) * 1px);--cb-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--cb-font-weight: var(--dt-font-body-l-weight);--cb-padding-inline: var(--dt-spacing-d);--cb-padding-block: var(--dt-spacing-d);--cb-offset: 0;color-scheme:only dark;background-color:var(--dt-color-background-dark);color:var(--dt-color-content-inverse);font-family:var(--cb-font-family);font-size:var(--cb-font-size);line-height:var(--cb-line-height);font-weight:var(--cb-font-weight);padding-block-start:var(--cb-padding-block);padding-block-end:var(--cb-padding-block);max-height:432px;position:fixed;bottom:var(--cb-offset);left:var(--cb-offset);right:var(--cb-offset);border-top-left-radius:var(--dt-radius-rounded-c);border-top-right-radius:var(--dt-radius-rounded-c);z-index:var(--dt-z-index-cookie-banner)}@media (min-width: 700px) and (orientation: landscape){.c-cookieBanner{--cb-padding-inline: var(--dt-spacing-f);--cb-offset: var(--dt-spacing-d);max-height:90%;border-bottom-left-radius:var(--dt-radius-rounded-c);border-bottom-right-radius:var(--dt-radius-rounded-c)}}.c-cookieBanner[isCookieBannerHidden]{display:none}.c-cookieBanner-title,.c-cookieBanner-body,.c-cookieBanner-actions{padding-inline-start:var(--cb-padding-inline);padding-inline-end:var(--cb-padding-inline)}.c-cookieBanner-title{--cb-title-font-size: var(--dt-font-heading-s-size--narrow);--cb-title-line-height: var(--dt-font-heading-s-line-height--narrow);font-size:calc(var(--cb-title-font-size) * 1px);font-weight:var(--dt-font-heading-s-weight);line-height:calc(var(--cb-title-line-height) * 1px)}@media (min-width: 700px) and (orientation: landscape){.c-cookieBanner-title{--cb-title-font-size: var(--dt-font-heading-s-size--wide);--cb-title-line-height: var(--dt-font-heading-s-line-height--wide)}}.c-cookieBanner-body{--cb-scroll-shadow-color: var(--dt-color-black);margin-block-start:var(--dt-spacing-a);max-height:200px;overflow-y:auto;background:linear-gradient(to bottom,transparent,var(--dt-color-background-dark) 75%) center bottom,linear-gradient(transparent,var(--cb-scroll-shadow-color)) center bottom;background-repeat:no-repeat;background-size:100% 48px,100% 8px;background-attachment:local,scroll}@media (min-width: 700px) and (orientation: landscape){.c-cookieBanner-body{max-height:150px}}.c-cookieBanner-actions{--cb-actions-flex-dir: column;margin-block-start:var(--dt-spacing-d);display:flex;gap:var(--dt-spacing-d);flex-direction:var(--cb-actions-flex-dir)}.c-cookieBanner-actions>pie-link{text-align:center;align-self:center}@media (min-width: 700px) and (orientation: landscape){.c-cookieBanner-actions{--cb-actions-flex-dir: row-reverse;justify-content:flex-start;align-items:center}}.c-cookieBanner-subheading{--cb-subheading-font-size: var(--dt-font-heading-s-size--narrow);--cb-subheading-line-height: var(--dt-font-heading-s-line-height--narrow);font-size:calc(var(--cb-subheading-font-size) * 1px);font-weight:var(--dt-font-heading-s-weight);line-height:calc(var(--cb-subheading-line-height) * 1px)}@media (min-width: 700px) and (orientation: landscape){.c-cookieBanner-subheading{--cb-subheading-font-size: var(--dt-font-heading-s-size--wide);--cb-subheading-line-height: var(--dt-font-heading-s-line-height--wide)}}.c-cookieBanner-description{font-size:calc(var(--dt-font-body-s-size) * 1px);line-height:calc(var(--dt-font-body-s-line-height) * 1px)}.c-cookieBanner-preference{display:flex;gap:var(--dt-spacing-d);justify-content:space-between;margin-block-start:var(--dt-spacing-e);margin-block-end:var(--dt-spacing-e)}.c-cookieBanner-preference p{margin-block-start:var(--dt-spacing-b)}.c-cookieBanner-preference:last-child{margin-block-end:0}
+}, M = `*,*:after,*:before{box-sizing:inherit}*{margin:0}.c-cookieBanner{--cb-font-family: var(--dt-font-interactive-l-family);--cb-font-size: calc(var(--dt-font-body-l-size) * 1px);--cb-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--cb-font-weight: var(--dt-font-body-l-weight);--cb-padding-inline: var(--dt-spacing-d);--cb-padding-block: var(--dt-spacing-d);--cb-offset: 0;color-scheme:only dark;background-color:var(--dt-color-background-dark);color:var(--dt-color-content-inverse);font-family:var(--cb-font-family);font-size:var(--cb-font-size);line-height:var(--cb-line-height);font-weight:var(--cb-font-weight);padding-block-start:var(--cb-padding-block);padding-block-end:var(--cb-padding-block);max-height:432px;position:fixed;bottom:var(--cb-offset);left:var(--cb-offset);right:var(--cb-offset);border-top-left-radius:var(--dt-radius-rounded-c);border-top-right-radius:var(--dt-radius-rounded-c);z-index:var(--dt-z-index-cookie-banner)}@media (min-width: 700px) and (orientation: landscape){.c-cookieBanner{--cb-padding-inline: var(--dt-spacing-f);--cb-offset: var(--dt-spacing-d);max-height:90%;border-bottom-left-radius:var(--dt-radius-rounded-c);border-bottom-right-radius:var(--dt-radius-rounded-c)}}.c-cookieBanner[isCookieBannerHidden]{display:none}@media (prefers-reduced-motion: no-preference){.c-cookieBanner{animation:.5s animate-enter ease-out}@keyframes animate-enter{0%{transform:translate3d(0,75%,0)}to{transform:translateZ(0)}}}.c-cookieBanner-title,.c-cookieBanner-body,.c-cookieBanner-actions{padding-inline-start:var(--cb-padding-inline);padding-inline-end:var(--cb-padding-inline)}.c-cookieBanner-title{--cb-title-font-size: var(--dt-font-heading-s-size--narrow);--cb-title-line-height: var(--dt-font-heading-s-line-height--narrow);font-size:calc(var(--cb-title-font-size) * 1px);font-weight:var(--dt-font-heading-s-weight);line-height:calc(var(--cb-title-line-height) * 1px)}@media (min-width: 700px) and (orientation: landscape){.c-cookieBanner-title{--cb-title-font-size: var(--dt-font-heading-s-size--wide);--cb-title-line-height: var(--dt-font-heading-s-line-height--wide)}}.c-cookieBanner-body{--cb-scroll-shadow-color: var(--dt-color-black);margin-block-start:var(--dt-spacing-a);max-height:200px;overflow-y:auto;background:linear-gradient(to bottom,transparent,var(--dt-color-background-dark) 75%) center bottom,linear-gradient(transparent,var(--cb-scroll-shadow-color)) center bottom;background-repeat:no-repeat;background-size:100% 48px,100% 8px;background-attachment:local,scroll}@media (min-width: 700px) and (orientation: landscape){.c-cookieBanner-body{max-height:150px}}.c-cookieBanner-actions{--cb-actions-flex-dir: column;margin-block-start:var(--dt-spacing-d);display:flex;gap:var(--dt-spacing-d);flex-direction:var(--cb-actions-flex-dir)}.c-cookieBanner-actions>pie-link{text-align:center;align-self:center}@media (min-width: 700px) and (orientation: landscape){.c-cookieBanner-actions{--cb-actions-flex-dir: row-reverse;justify-content:flex-start;align-items:center}}.c-cookieBanner-subheading{--cb-subheading-font-size: var(--dt-font-heading-s-size--narrow);--cb-subheading-line-height: var(--dt-font-heading-s-line-height--narrow);font-size:calc(var(--cb-subheading-font-size) * 1px);font-weight:var(--dt-font-heading-s-weight);line-height:calc(var(--cb-subheading-line-height) * 1px)}@media (min-width: 700px) and (orientation: landscape){.c-cookieBanner-subheading{--cb-subheading-font-size: var(--dt-font-heading-s-size--wide);--cb-subheading-line-height: var(--dt-font-heading-s-line-height--wide)}}.c-cookieBanner-description{font-size:calc(var(--dt-font-body-s-size) * 1px);line-height:calc(var(--dt-font-body-s-line-height) * 1px)}.c-cookieBanner-preference{display:flex;gap:var(--dt-spacing-d);justify-content:space-between;margin-block-start:var(--dt-spacing-e);margin-block-end:var(--dt-spacing-e)}.c-cookieBanner-preference p{margin-block-start:var(--dt-spacing-b)}.c-cookieBanner-preference:last-child{margin-block-end:0}
 `, N = "pie-cookie-banner-accept-all", z = "pie-cookie-banner-necessary-only", E = "pie-cookie-banner-manage-prefs", L = "pie-cookie-banner-prefs-saved", R = [
   {
     id: "all",

package/dist/react.d.ts

@@ -1,4 +1,4 @@
-import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
 import { PieSwitch } from '@justeattakeaway/pie-switch';
@@ -77,7 +77,7 @@ export declare interface CustomTagEnhancers {
     [key: string]: (tagContent: string) => TemplateResult;
 }
 
-export declare type DefaultProps = ComponentDefaultPropsGeneric<CookieBannerProps, 'hasPrimaryActionsOnly' | 'defaultPreferences' | 'locale' | 'cookieStatementLink' | 'cookieTechnologiesLink'>;
+export declare type DefaultProps = ComponentDefaultProps<CookieBannerProps>;
 
 /**
  * Event name for when all cookies are accepted.

package/locales/en-fr.json

@@ -0,0 +1,40 @@
+{
+  "banner": {
+    "title": "Cookies",
+    "description": "We use our own and third party cookies and other tech to enhance and personalise your user experience, optimize analytics, and show ads with third parties (read our <linkStatement>Statement</linkStatement>). Necessary cookies are always set. Select <linkNecessaryOnly>Continue without accepting</linkNecessaryOnly> to accept only essential trackers required for an optimal use of our platform. Click <linkManagePreferences>Manage preferences</linkManagePreferences> to share your preferences or <linkAcceptAll>Accept all</linkAcceptAll>.",
+    "cta": {
+      "managePreferences": "Manage preferences",
+      "necessaryOnly": "Continue without accepting",
+      "acceptAll": "Accept all"
+    }
+  },
+  "preferencesManagement": {
+    "title": "Manage your preferences",
+    "description": "You can find all the information in the <linkCookieStatement>Cookie Statement</linkCookieStatement> and <linkCookieTechList>Cookie technology list</linkCookieTechList>.",
+    "all": {
+      "title": "Turn all on"
+    },
+    "necessary": {
+      "title": "Necessary Technologies",
+      "description": "These technologies are necessary to ensure that the website and its features function properly. Services you have asked for cannot be provided without these technologies."
+    },
+    "functional": {
+      "title": "Functional Technologies",
+      "description": "These technologies allow the website to remember the choices you make to give you better functionality and personal features."
+    },
+    "analytical": {
+      "title": "Analytical Technologies",
+      "description": "These analytical technologies, including statistics, are used to understand how visitors interact with the website and we can measure and improve the performance of our website."
+    },
+    "personalized": {
+      "title": "Personalised (targeting and advertising) Technologies",
+      "description": "These marketing technologies are used to tailor the delivery of information to you based upon your interest and to measure the effectiveness of such advertisements, both on our website and our advertising partners' websites."
+    },
+    "cta": {
+      "save": {
+        "label": "Save",
+        "ariaLabel": ""
+      }
+    }
+  }
+}

package/locales/fr-fr.json

@@ -1,34 +1,34 @@
 {
   "banner": {
     "title": "Cookies",
-    "description": "Nous utilisons nos propres cookies et ceux de tiers, ainsi que d’autres technologies, afin d’améliorer et de personnaliser votre expérience d’utilisateur, d’optimiser nos analyses et d’afficher des publicités en partenariat avec des tiers (veuillez consulter notre <linkStatement>déclaration</linkStatement>). Nous installons toujours les cookies essentiels. Cliquez sur <linkNecessaryOnly>Cookies essentiels uniquement</linkNecessaryOnly> pour continuer en acceptant uniquement les cookies indispensables. Cliquez sur <linkManagePreferences>Gérer les préférences</linkManagePreferences> pour choisir vous-même vos cookies ou sur <linkAcceptAll>Tout accepter</linkAcceptAll>.",
+    "description": "Nous utilisons nos propres cookies et ceux de tiers, ainsi que d’autres technologies, afin d’améliorer et de personnaliser votre expérience d’utilisateur, d’optimiser nos analyses et d’afficher des publicités en partenariat avec des tiers (veuillez consulter notre <linkStatement>déclaration</linkStatement>). Nous installons toujours les cookies essentiels. Sélectionnez <linkNecessaryOnly>Continuer sans accepter</linkNecessaryOnly> pour accepter seulement les traqueurs nécessaires au fonctionnement optimal de notre plateforme. Cliquez sur <linkManagePreferences>Gérer les préférences</linkManagePreferences> pour choisir vous-même vos cookies ou sur <linkAcceptAll>Tout accepter</linkAcceptAll>.",
     "cta": {
       "managePreferences": "Gérer les préférences",
-      "necessaryOnly": " Cookies essentiels uniquement",
+      "necessaryOnly": "Continuer sans accepter",
       "acceptAll": "Tout accepter"
     }
   },
   "preferencesManagement": {
     "title": "Gérer vos préférences",
-    "description": "Vous trouverez toutes les informations dans la <linkCookieStatement>déclaration relative aux cookies</linkCookieStatement> et dans la liste des <linkCookieTechList>technologies relatives aux cookies</linkCookieTechList>.",
+    "description": "Vous trouverez toutes les informations dans la <linkCookieStatement>déclaration relative aux technologies</linkCookieStatement> et dans la liste des <linkCookieTechList>technologies relatives aux technologies</linkCookieTechList>.",
     "all": {
       "title": "Tout activer"
     },
     "necessary": {
-      "title": "Cookies essentiels",
-      "description": "Ces cookies sont indispensables au bon fonctionnement du site Web et de ses fonctionnalités. Les services que vous avez demandés ne peuvent être fournis sans ces cookies."
+      "title": "Technologies nécessaires",
+      "description": "Ces technologies sont indispensables au bon fonctionnement du site Web et de ses fonctionnalités. Les services que vous avez demandés ne peuvent être fournis sans ces technologies."
     },
     "functional": {
-      "title": "Cookies fonctionnels",
-      "description": "Ces cookies permettent au site Web de se souvenir de vos choix pour vous offrir de meilleures fonctionnalités et une expérience personnalisée."
+      "title": "Technologies fonctionnelles",
+      "description": "Ces technologies permettent au site Web de se souvenir de vos choix pour vous offrir de meilleures fonctionnalités et une expérience personnalisée."
     },
     "analytical": {
-      "title": "Cookies analytiques",
-      "description": "Les cookies analytiques, incluant des cookies statistiques, sont utilisés pour comprendre comment les visiteurs interagissent avec le site Web. Ils nous permettent d’en mesurer et d’en améliorer les performances."
+      "title": "Technologies analytiques",
+      "description": "Les technologies analytiques, incluant des technologies statistiques, sont utilisés pour comprendre comment les visiteurs interagissent avec le site Web. Ils nous permettent d’en mesurer et d’en améliorer les performances."
     },
     "personalized": {
-      "title": "Cookies de ciblage (publicitaires)",
-      "description": "Ces cookies marketing sont utilisés pour adapter les informations affichées à vos centres d’intérêt et pour mesurer l’efficacité de ces publicités, à la fois sur notre site Web et sur les sites Web de nos partenaires publicitaires."
+      "title": "Technologies personnalisées (ciblage et publicité)",
+      "description": "Ces technologies marketing sont utilisés pour adapter les informations affichées à vos centres d’intérêt et pour mesurer l’efficacité de ces publicités, à la fois sur notre site Web et sur les sites Web de nos partenaires publicitaires."
     },
     "cta": {
       "save": {

package/locales/index.js

@@ -1,7 +1,8 @@
 import bgBG from './bg-bg.json';
 import deDE from './de-de.json';
-import dkDK from './dk-dk.json';
+import daDK from './da-dk.json';
 import enGB from './en-gb.json';
+import enFR from './en-fr.json';
 import esES from './es-es.json';
 import frFR from './fr-fr.json';
 import heIL from './he-il.json';
@@ -14,7 +15,9 @@ import skSK from './sk-sk.json';
 export default {
     bgBG,
     deDE,
-    dkDK,
+    daDK,
+    dkDK: daDK,
+    enFR,
     enGB,
     esES,
     frFR,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-cookie-banner",
   "description": "PIE Design System Cookie Banner built using Web Components",
-  "version": "0.20.5",
+  "version": "0.22.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -43,13 +43,13 @@
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-button": "0.47.7",
-    "@justeattakeaway/pie-divider": "0.13.6",
-    "@justeattakeaway/pie-icon-button": "0.28.8",
-    "@justeattakeaway/pie-link": "0.17.6",
-    "@justeattakeaway/pie-modal": "0.43.3",
-    "@justeattakeaway/pie-switch": "0.29.9",
-    "@justeattakeaway/pie-webc-core": "0.23.0"
+    "@justeattakeaway/pie-button": "0.47.8",
+    "@justeattakeaway/pie-divider": "0.13.7",
+    "@justeattakeaway/pie-icon-button": "0.28.9",
+    "@justeattakeaway/pie-link": "0.17.7",
+    "@justeattakeaway/pie-modal": "0.43.4",
+    "@justeattakeaway/pie-switch": "0.29.10",
+    "@justeattakeaway/pie-webc-core": "0.24.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/cookie-banner.scss

@@ -46,6 +46,16 @@ $breakpoint-wide: 700px;
     &[isCookieBannerHidden] {
         display: none;
     }
+
+    @media (prefers-reduced-motion: no-preference) {
+        @keyframes animate-enter {
+            0% { transform: translate3d(0, 75%, 0); }
+
+            100% { transform: translate3d(0, 0, 0); }
+        }
+
+        animation: 0.5s animate-enter ease-out;
+    }
 }
 
 .c-cookieBanner-title,

package/src/defs.ts

@@ -1,4 +1,4 @@
-import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 
 import {
     TemplateResult,
@@ -143,5 +143,4 @@ export interface CustomTagEnhancers {
     [key: string]: (tagContent: string) => TemplateResult;
 }
 
-export type DefaultProps = ComponentDefaultPropsGeneric<CookieBannerProps, 'hasPrimaryActionsOnly' | 'defaultPreferences' | 'locale' | 'cookieStatementLink' | 'cookieTechnologiesLink'>;
-
+export type DefaultProps = ComponentDefaultProps<CookieBannerProps>;