@justeattakeaway/pie-cookie-banner 0.11.13 → 0.13.0

package/dist/index.d.ts

@@ -110,7 +110,7 @@ export declare class PieCookieBanner extends LitElement implements CookieBannerP
     private _displayCookieBanner;
     /**
      * Handles saving the user cookie preferences, closing the modal and the cookie banner
-     * Creates a state object for the save event, indicating the isChecked status
+     * Creates a state object for the save event, indicating the checked status
      * of each preference except for the `all` preference.
      * @example {
      *  functional: false,
@@ -169,7 +169,7 @@ export declare class PieCookieBanner extends LitElement implements CookieBannerP
 export declare interface Preference {
     id: PreferenceIds;
     isDisabled?: boolean;
-    isChecked?: boolean;
+    checked?: boolean;
     hasDivider?: boolean;
     hasDescription?: boolean;
 }

package/dist/index.js

@@ -8,8 +8,8 @@ import "@justeattakeaway/pie-link";
 import "@justeattakeaway/pie-modal";
 import "@justeattakeaway/pie-switch";
 import { defineCustomElement as _ } from "@justeattakeaway/pie-webc-core";
-const w = `*{margin:0}.c-cookieBanner{--cb-font-family: var(--dt-font-interactive-m-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:var(--dt-spacing-e)}.c-cookieBanner-preference p{margin-block-start:var(--dt-spacing-b)}.c-cookieBanner-preference:last-child{margin-block-end:0}
-`, x = "pie-cookie-banner-accept-all", C = "pie-cookie-banner-necessary-only", B = "pie-cookie-banner-manage-prefs", $ = "pie-cookie-banner-prefs-saved", A = [
+const x = `*{margin:0}.c-cookieBanner{--cb-font-family: var(--dt-font-interactive-m-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:var(--dt-spacing-e)}.c-cookieBanner-preference p{margin-block-start:var(--dt-spacing-b)}.c-cookieBanner-preference:last-child{margin-block-end:0}
+`, w = "pie-cookie-banner-accept-all", B = "pie-cookie-banner-necessary-only", C = "pie-cookie-banner-manage-prefs", $ = "pie-cookie-banner-prefs-saved", A = [
   {
     id: "all",
     hasDivider: !0,
@@ -18,7 +18,7 @@ const w = `*{margin:0}.c-cookieBanner{--cb-font-family: var(--dt-font-interactiv
   {
     id: "necessary",
     isDisabled: !0,
-    isChecked: !0,
+    checked: !0,
     hasDescription: !0
   },
   {
@@ -37,8 +37,8 @@ const w = `*{margin:0}.c-cookieBanner{--cb-font-family: var(--dt-font-interactiv
 function u(a) {
   console.error(`[localisation-utils]: ${a}`);
 }
-function O(a, e) {
-  const n = (t) => String.prototype.split.call(e, t).filter(Boolean).reduce((r, o) => r != null && typeof r == "object" ? r[o] : r, a), i = n(/[,[\]]+?/) || n(/[,[\].]+?/);
+function T(a, e) {
+  const n = (t) => String.prototype.split.call(e, t).filter(Boolean).reduce((o, r) => o != null && typeof o == "object" ? o[r] : o, a), i = n(/[,[\]]+?/) || n(/[,[\].]+?/);
   return typeof i != "string" ? "" : i;
 }
 function b(a, e) {
@@ -46,34 +46,34 @@ function b(a, e) {
     throw new Error('"locale" parameter cannot be empty');
   if (!e)
     throw new Error('"key" parameter cannot be empty');
-  const n = O(a, e);
+  const n = T(a, e);
   return n || (u(`Couldn't find a value for the key "${e}", it will be used as fallback.`), e);
 }
-function E(a) {
+function O(a) {
   const n = a.map((t) => `(<${t}.*>.*</${t}>)`).join("|");
   return new RegExp(n, "igm");
 }
-function T(a, e) {
+function E(a, e) {
   const n = Object.keys(e);
   if (n.length === 0)
     return [a];
-  const i = E(n);
+  const i = O(n);
   return a.split(i).filter((t) => !!t).map((t) => {
     if (!t.match(i))
       return t;
-    const o = t.match(/<(.*)>(.*)<\/.*>/);
-    if (!o)
+    const r = t.match(/<(.*)>(.*)<\/.*>/);
+    if (!r)
       return t;
-    const [, d, c] = o;
+    const [, d, c] = r;
     return [d, c];
   }).map((t) => {
     if (!Array.isArray(t))
       return t;
-    const [o, d] = t, c = e[o];
-    return c || typeof c == "function" ? c(d) : (u(`Custom tag "${o}" does not have a matching enhancer function`), d);
+    const [r, d] = t, c = e[r];
+    return c || typeof c == "function" ? c(d) : (u(`Custom tag "${r}" does not have a matching enhancer function`), d);
   });
 }
-function M(a, e, n) {
+function S(a, e, n) {
   if (!a)
     throw new Error('"locale" parameter cannot be empty');
   if (!e)
@@ -81,17 +81,21 @@ function M(a, e, n) {
   if (!n)
     throw new Error('"customTagEnhancers" parameter cannot be empty');
   const i = b(a, e);
-  return T(i, n);
+  return E(i, n);
 }
-const N = {
+const M = {
   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. Click <linkNecessaryOnly>Necessary only</linkNecessaryOnly> to continue without accepting more. Click <linkManagePreferences>Manage preferences</linkManagePreferences> to share your preferences or <linkAcceptAll>Accept all</linkAcceptAll>.",
   cta: {
     managePreferences: "Manage preferences",
     necessaryOnly: "Necessary only",
     acceptAll: "Accept all"
+  },
+  links: {
+    cookieStatement: "en/cookiestatement",
+    cookieTechnologies: "en/technologies"
   }
-}, S = {
+}, N = {
   title: "Manage your preferences",
   description: "You can find all the information in the <linkCookieStatement>Cookie Statement</linkCookieStatement> and <linkCookieTechList>Cookie technology list</linkCookieTechList>.",
   all: {
@@ -120,24 +124,24 @@ const N = {
     }
   }
 }, z = {
-  banner: N,
-  preferencesManagement: S
+  banner: M,
+  preferencesManagement: N
 };
 var P = Object.defineProperty, R = Object.getOwnPropertyDescriptor, p = (a, e, n, i) => {
-  for (var t = i > 1 ? void 0 : i ? R(e, n) : e, r = a.length - 1, o; r >= 0; r--)
-    (o = a[r]) && (t = (i ? o(e, n, t) : o(t)) || t);
+  for (var t = i > 1 ? void 0 : i ? R(e, n) : e, o = a.length - 1, r; o >= 0; o--)
+    (r = a[o]) && (t = (i ? r(e, n, t) : r(t)) || t);
   return i && t && P(e, n, t), t;
 };
 const D = "pie-cookie-banner";
 class l extends m {
   constructor() {
     super(...arguments), this._isCookieBannerHidden = !1, this._isModalOpen = !1, this.hasPrimaryActionsOnly = !1, this.locale = z, this._customTagEnhancers = {
-      linkStatement: (e) => s`<pie-link variant="inverse">${e}</pie-link>`,
+      linkStatement: (e) => s`<pie-link href="${this._localiseText("banner.links.cookieStatement")}" variant="inverse" target="_blank">${e}</pie-link>`,
       linkNecessaryOnly: (e) => s`<pie-link data-test-id="body-necessary-only" tag="button" variant="inverse" @click="${this._onNecessaryOnly}">${e}</pie-link>`,
       linkManagePreferences: (e) => s`<pie-link data-test-id="body-manage-prefs" tag="button" variant="inverse" @click="${this._openManagePreferencesModal}">${e}</pie-link>`,
       linkAcceptAll: (e) => s`<pie-link data-test-id="body-accept-all" tag="button" variant="inverse" @click="${this._onAcceptAll}">${e}</pie-link>`,
-      linkCookieStatement: (e) => s`<pie-link href="#" size="small" target="_blank">${e}</pie-link>`,
-      linkCookieTechList: (e) => s`<pie-link href="#" size="small" target="_blank">${e}</pie-link>`
+      linkCookieStatement: (e) => s`<pie-link href="${this._localiseText("banner.links.cookieStatement")}" size="small" target="_blank">${e}</pie-link>`,
+      linkCookieTechList: (e) => s`<pie-link href="${this._localiseText("banner.links.cookieTechnologies")}" size="small" target="_blank">${e}</pie-link>`
     }, this._dispatchCookieBannerCustomEvent = (e, n) => {
       const i = new CustomEvent(e, {
         bubbles: !0,
@@ -146,27 +150,27 @@ class l extends m {
       });
       this.dispatchEvent(i);
     }, this._onNecessaryOnly = () => {
-      this._dispatchCookieBannerCustomEvent(C), this._isCookieBannerHidden = !0;
+      this._dispatchCookieBannerCustomEvent(B), this._isCookieBannerHidden = !0;
     }, this._onAcceptAll = () => {
-      this._dispatchCookieBannerCustomEvent(x), this._isCookieBannerHidden = !0;
+      this._dispatchCookieBannerCustomEvent(w), this._isCookieBannerHidden = !0;
     }, this._openManagePreferencesModal = () => {
-      this._isCookieBannerHidden = !0, this._dispatchCookieBannerCustomEvent(B), this._isModalOpen = !0;
+      this._isCookieBannerHidden = !0, this._dispatchCookieBannerCustomEvent(C), this._isModalOpen = !0;
     }, this._handleSwitchStates = (e) => {
       const { id: n } = e == null ? void 0 : e.currentTarget, i = [...this._preferencesNodes].find(({ id: t }) => t === "all");
       if (n === i.id) {
-        const t = e.target.checked;
-        this._preferencesNodes.forEach((r) => {
-          r.isChecked = r.isDisabled ? r.isChecked : t;
+        const { checked: t } = e.target;
+        this._preferencesNodes.forEach((o) => {
+          o.checked = o.isDisabled ? o.checked : t;
         });
       } else
-        i.isChecked = [...this._preferencesNodes].filter(({ id: t }) => t !== "all").every(({ isChecked: t }) => t);
+        i.checked = [...this._preferencesNodes].filter(({ id: t }) => t !== "all").every(({ checked: t }) => t);
     };
   }
   _localiseText(e) {
     return b(this.locale, e);
   }
   _localiseRichText(e) {
-    return M(this.locale, e, this._customTagEnhancers);
+    return S(this.locale, e, this._customTagEnhancers);
   }
   /**
    * Handles closing the modal and re-displaying the cookie banner
@@ -177,7 +181,7 @@ class l extends m {
   }
   /**
    * Handles saving the user cookie preferences, closing the modal and the cookie banner
-   * Creates a state object for the save event, indicating the isChecked status
+   * Creates a state object for the save event, indicating the checked status
    * of each preference except for the `all` preference.
    * @example {
    *  functional: false,
@@ -186,7 +190,7 @@ class l extends m {
    */
   _handlePreferencesSaved() {
     let e = {};
-    [...this._preferencesNodes].filter(({ id: n }) => n !== "all").forEach(({ id: n, isChecked: i }) => {
+    [...this._preferencesNodes].filter(({ id: n }) => n !== "all").forEach(({ id: n, checked: i }) => {
       e = { ...e, [n]: i };
     }), this._dispatchCookieBannerCustomEvent($, e), this._isModalOpen = !1, this._isCookieBannerHidden = !0;
   }
@@ -196,21 +200,21 @@ class l extends m {
    */
   renderPreference({
     id: e,
-    isChecked: n,
+    checked: n,
     isDisabled: i,
     hasDivider: t,
-    hasDescription: r
+    hasDescription: o
   }) {
-    const o = this._localiseText(`preferencesManagement.${e}.title`), d = `preferencesManagement.${e}.description`, c = r && this._localiseText(d);
+    const r = this._localiseText(`preferencesManagement.${e}.title`), d = `preferencesManagement.${e}.description`, c = o && this._localiseText(d);
     return s`
             <div class="c-cookieBanner-preference">
                 <div>
-                    <h3 class="c-cookieBanner-subheading">${o}</h3>
+                    <h3 class="c-cookieBanner-subheading">${r}</h3>
                      ${c ? s`<p class="c-cookieBanner-description">${c}</p>` : h}
                  </div>
                 <pie-switch
                     id="${e}"
-                    ?isChecked="${n}"
+                    ?checked="${n}"
                     ?isDisabled="${i}"
                     @change="${this._handleSwitchStates}">
                 </pie-switch>
@@ -286,7 +290,7 @@ class l extends m {
         </aside>`;
   }
 }
-l.styles = k(w);
+l.styles = k(x);
 p([
   f()
 ], l.prototype, "_isCookieBannerHidden", 2);
@@ -304,9 +308,9 @@ p([
 ], l.prototype, "_preferencesNodes", 2);
 _(D, l);
 export {
-  x as ON_COOKIE_BANNER_ACCEPT_ALL,
-  B as ON_COOKIE_BANNER_MANAGE_PREFS,
-  C as ON_COOKIE_BANNER_NECESSARY_ONLY,
+  w as ON_COOKIE_BANNER_ACCEPT_ALL,
+  C as ON_COOKIE_BANNER_MANAGE_PREFS,
+  B as ON_COOKIE_BANNER_NECESSARY_ONLY,
   $ as ON_COOKIE_BANNER_PREFS_SAVED,
   l as PieCookieBanner,
   A as preferences

package/dist/react.d.ts

@@ -119,7 +119,7 @@ declare class PieCookieBanner_2 extends LitElement implements CookieBannerProps
     private _displayCookieBanner;
     /**
      * Handles saving the user cookie preferences, closing the modal and the cookie banner
-     * Creates a state object for the save event, indicating the isChecked status
+     * Creates a state object for the save event, indicating the checked status
      * of each preference except for the `all` preference.
      * @example {
      *  functional: false,
@@ -178,7 +178,7 @@ declare class PieCookieBanner_2 extends LitElement implements CookieBannerProps
 export declare interface Preference {
     id: PreferenceIds;
     isDisabled?: boolean;
-    isChecked?: boolean;
+    checked?: boolean;
     hasDivider?: boolean;
     hasDescription?: boolean;
 }

package/locales/bg-bg.json

@@ -6,6 +6,10 @@
       "managePreferences": "Управление на предпочитанията",
       "necessaryOnly": "Само необходимите",
       "acceptAll": "Приемане на всички"
+    },
+    "links": {
+      "cookieStatement": "bg/cookiestatement",
+      "cookieTechnologies": "bg/technologies"
     }
   },
   "preferencesManagement": {

package/locales/de-de.json

@@ -6,6 +6,10 @@
       "managePreferences": "Einstellungen verwalten",
       "necessaryOnly": "Nur notwendige",
       "acceptAll": "Alle annehmen"
+    },
+    "links": {
+      "cookieStatement": "de/cookiestatement",
+      "cookieTechnologies": "de/technologies"
     }
   },
   "preferencesManagement": {

package/locales/dk-dk.json

@@ -6,6 +6,10 @@
       "managePreferences": "Administrer præferencer",
       "necessaryOnly": "Kun nødvendige",
       "acceptAll": "Accepter alle"
+    },
+    "links": {
+      "cookieStatement": "cookie-erklaering",
+      "cookieTechnologies": "teknologier"
     }
   },
   "preferencesManagement": {

package/locales/en-gb.json

@@ -6,6 +6,10 @@
       "managePreferences": "Manage preferences",
       "necessaryOnly": "Necessary only",
       "acceptAll": "Accept all"
+    },
+    "links": {
+      "cookieStatement": "en/cookiestatement",
+      "cookieTechnologies": "en/technologies"
     }
   },
   "preferencesManagement": {

package/locales/fr-fr.json

@@ -6,6 +6,10 @@
       "managePreferences": "Gérer les préférences",
       "necessaryOnly": " Cookies essentiels uniquement",
       "acceptAll": "Tout accepter"
+    },
+    "links": {
+      "cookieStatement": "fr/cookiestatement",
+      "cookieTechnologies": "fr/technologies"
     }
   },
   "preferencesManagement": {

package/locales/it-it.json

@@ -6,6 +6,10 @@
       "managePreferences": "Gestisci preferenze",
       "necessaryOnly": " Solo necessari",
       "acceptAll": "Accetta tutti"
+    },
+    "links": {
+      "cookieStatement": "it/cookiestatement",
+      "cookieTechnologies": "it/technologies"
     }
   },
   "preferencesManagement": {

package/locales/nl-nl.json

@@ -6,6 +6,10 @@
       "managePreferences": "Beheer voorkeuren",
       "necessaryOnly": "Alleen noodzakelijk",
       "acceptAll": "Alles accepteren"
+    },
+    "links": {
+      "cookieStatement": "nl/cookieverklaring",
+      "cookieTechnologies": "nl/technologies"
     }
   },
   "preferencesManagement": {

package/locales/pl-pl.json

@@ -6,6 +6,10 @@
       "managePreferences": "Zarządzaj ustawieniami",
       "necessaryOnly": "Tylko niezbędne",
       "acceptAll": "Zaakceptuj wszystkie"
+    },
+    "links": {
+      "cookieStatement": "pl/polityka-cookies",
+      "cookieTechnologies": "pl/technologies"
     }
   },
   "preferencesManagement": {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-cookie-banner",
   "description": "PIE Design System Cookie Banner built using Web Components",
-  "version": "0.11.13",
+  "version": "0.13.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -30,7 +30,7 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@justeat/pie-design-tokens": "5.9.0",
-    "@justeattakeaway/pie-components-config": "0.6.1"
+    "@justeattakeaway/pie-components-config": "0.7.0"
   },
   "dependencies": {
     "@justeattakeaway/pie-button": "0.41.0",
@@ -38,7 +38,7 @@
     "@justeattakeaway/pie-icon-button": "0.24.3",
     "@justeattakeaway/pie-link": "0.11.3",
     "@justeattakeaway/pie-modal": "0.35.5",
-    "@justeattakeaway/pie-switch": "0.19.0",
+    "@justeattakeaway/pie-switch": "0.20.0",
     "@justeattakeaway/pie-webc-core": "0.13.0"
   },
   "volta": {

package/src/defs.ts

@@ -87,7 +87,7 @@ export type PreferenceIds = 'all' | 'necessary' | 'functional' | 'analytical' |
 export interface Preference {
     id: PreferenceIds;
     isDisabled?: boolean;
-    isChecked?: boolean;
+    checked?: boolean;
     hasDivider?: boolean;
     hasDescription?: boolean;
 }
@@ -101,7 +101,7 @@ export const preferences: Preference[] = [
     {
         id: 'necessary',
         isDisabled: true,
-        isChecked: true,
+        checked: true,
         hasDescription: true,
     },
     {

package/src/index.ts

@@ -60,13 +60,13 @@ export class PieCookieBanner extends LitElement implements CookieBannerProps {
     @queryAll('pie-switch')
         _preferencesNodes!: NodeListOf<PieSwitch>;
 
-    private _customTagEnhancers:CustomTagEnhancers = {
-        linkStatement: (tagContent:string) => html`<pie-link variant="inverse">${tagContent}</pie-link>`,
-        linkNecessaryOnly: (tagContent:string) => html`<pie-link data-test-id="body-necessary-only" tag="button" variant="inverse" @click="${this._onNecessaryOnly}">${tagContent}</pie-link>`,
-        linkManagePreferences: (tagContent:string) => html`<pie-link data-test-id="body-manage-prefs" tag="button" variant="inverse" @click="${this._openManagePreferencesModal}">${tagContent}</pie-link>`,
-        linkAcceptAll: (tagContent:string) => html`<pie-link data-test-id="body-accept-all" tag="button" variant="inverse" @click="${this._onAcceptAll}">${tagContent}</pie-link>`,
-        linkCookieStatement: (tagContent:string) => html`<pie-link href="#" size="small" target="_blank">${tagContent}</pie-link>`,
-        linkCookieTechList: (tagContent:string) => html`<pie-link href="#" size="small" target="_blank">${tagContent}</pie-link>`,
+    private _customTagEnhancers: CustomTagEnhancers = {
+        linkStatement: (tagContent: string) => html`<pie-link href="${this._localiseText('banner.links.cookieStatement')}" variant="inverse" target="_blank">${tagContent}</pie-link>`,
+        linkNecessaryOnly: (tagContent: string) => html`<pie-link data-test-id="body-necessary-only" tag="button" variant="inverse" @click="${this._onNecessaryOnly}">${tagContent}</pie-link>`,
+        linkManagePreferences: (tagContent: string) => html`<pie-link data-test-id="body-manage-prefs" tag="button" variant="inverse" @click="${this._openManagePreferencesModal}">${tagContent}</pie-link>`,
+        linkAcceptAll: (tagContent: string) => html`<pie-link data-test-id="body-accept-all" tag="button" variant="inverse" @click="${this._onAcceptAll}">${tagContent}</pie-link>`,
+        linkCookieStatement: (tagContent: string) => html`<pie-link href="${this._localiseText('banner.links.cookieStatement')}" size="small" target="_blank">${tagContent}</pie-link>`,
+        linkCookieTechList: (tagContent: string) => html`<pie-link href="${this._localiseText('banner.links.cookieTechnologies')}" size="small" target="_blank">${tagContent}</pie-link>`,
     };
 
     private _localiseText (key:string):string {
@@ -88,7 +88,7 @@ export class PieCookieBanner extends LitElement implements CookieBannerProps {
 
     /**
      * Handles saving the user cookie preferences, closing the modal and the cookie banner
-     * Creates a state object for the save event, indicating the isChecked status
+     * Creates a state object for the save event, indicating the checked status
      * of each preference except for the `all` preference.
      * @example {
      *  functional: false,
@@ -100,8 +100,8 @@ export class PieCookieBanner extends LitElement implements CookieBannerProps {
 
         [...this._preferencesNodes]
         .filter(({ id }) => id !== 'all')
-        .forEach(({ id, isChecked }) => {
-            state = { ...state, [id]: isChecked };
+        .forEach(({ id, checked }) => {
+            state = { ...state, [id]: checked };
         });
 
         this._dispatchCookieBannerCustomEvent(ON_COOKIE_BANNER_PREFS_SAVED, state);
@@ -169,14 +169,14 @@ export class PieCookieBanner extends LitElement implements CookieBannerProps {
         const toggleAllNode = [...this._preferencesNodes].find(({ id }) => id === 'all') as PieSwitch;
 
         if (id === toggleAllNode.id) {
-            const isChecked = (e.target as HTMLInputElement).checked;
+            const { checked } = e.target as HTMLInputElement;
             this._preferencesNodes.forEach((node) => {
-                node.isChecked = node.isDisabled ? node.isChecked : isChecked;
+                node.checked = node.isDisabled ? node.checked : checked;
             });
         } else {
-            toggleAllNode.isChecked = [...this._preferencesNodes]
+            toggleAllNode.checked = [...this._preferencesNodes]
             .filter(({ id }) => id !== 'all')
-            .every(({ isChecked }) => isChecked);
+            .every(({ checked }) => checked);
         }
     };
 
@@ -185,7 +185,7 @@ export class PieCookieBanner extends LitElement implements CookieBannerProps {
      * @private
      */
     private renderPreference ({
-        id, isChecked, isDisabled, hasDivider, hasDescription,
+        id, checked, isDisabled, hasDivider, hasDescription,
     }: Preference): TemplateResult {
         const title = this._localiseText(`preferencesManagement.${id}.title`);
         const descriptionLocaleKey = `preferencesManagement.${id}.description`;
@@ -200,7 +200,7 @@ export class PieCookieBanner extends LitElement implements CookieBannerProps {
                  </div>
                 <pie-switch
                     id="${id}"
-                    ?isChecked="${isChecked}"
+                    ?checked="${checked}"
                     ?isDisabled="${isDisabled}"
                     @change="${this._handleSwitchStates}">
                 </pie-switch>