@justeattakeaway/pie-cookie-banner 0.15.0 → 0.16.0

package/README.md

@@ -75,7 +75,9 @@ import { PieCookieBanner } from '@justeattakeaway/pie-cookie-banner/dist/react';
 | Property | Type | Default | Description |
 |---|---|---|---|
 | hasPrimaryActionsOnly | `Boolean` | `false` | When true, sets the variant to "primary" for the button which accepts necessary cookies only. |
-| locale | `Object` | {English language locale} | Assigns the localisation data for the component strings |
+| locale | `Object`  | {English language locale} | Assigns the localisation data for the component strings. |
+| cookieStatementLink | `String`  | `''` | Allows a url to be passed for the cookie statement link. |
+| cookieTechnologiesLink | `String`  | `''` | Allows a url to be passed for the cookie technology link. |
 
 In your markup or JSX, you can then use these to set the properties for the `pie-cookie-banner` component:
 

package/custom-elements.json

@@ -147,6 +147,26 @@
               "default": "defaultLocale",
               "attribute": "locale"
             },
+            {
+              "kind": "field",
+              "name": "cookieStatementLink",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "''",
+              "attribute": "cookieStatementLink"
+            },
+            {
+              "kind": "field",
+              "name": "cookieTechnologiesLink",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "''",
+              "attribute": "cookieTechnologiesLink"
+            },
             {
               "kind": "field",
               "name": "_preferencesNodes",
@@ -161,7 +181,7 @@
                 "text": "CustomTagEnhancers"
               },
               "privacy": "private",
-              "default": "{\n        linkStatement: (tagContent: string) => html`<pie-link href=\"${this._localiseText('banner.links.cookieStatement')}\" variant=\"inverse\" target=\"_blank\">${tagContent}</pie-link>`,\n        linkNecessaryOnly: (tagContent: string) => html`<pie-link data-test-id=\"body-necessary-only\" tag=\"button\" variant=\"inverse\" @click=\"${this._onNecessaryOnly}\">${tagContent}</pie-link>`,\n        linkManagePreferences: (tagContent: string) => html`<pie-link data-test-id=\"body-manage-prefs\" tag=\"button\" variant=\"inverse\" @click=\"${this._openManagePreferencesModal}\">${tagContent}</pie-link>`,\n        linkAcceptAll: (tagContent: string) => html`<pie-link data-test-id=\"body-accept-all\" tag=\"button\" variant=\"inverse\" @click=\"${this._onAcceptAll}\">${tagContent}</pie-link>`,\n        linkCookieStatement: (tagContent: string) => html`<pie-link href=\"${this._localiseText('banner.links.cookieStatement')}\" size=\"small\" target=\"_blank\">${tagContent}</pie-link>`,\n        linkCookieTechList: (tagContent: string) => html`<pie-link href=\"${this._localiseText('banner.links.cookieTechnologies')}\" size=\"small\" target=\"_blank\">${tagContent}</pie-link>`,\n    }"
+              "default": "{\n        linkStatement: (tagContent: string) => html`<pie-link href=\"${this.cookieStatementLink}\" variant=\"inverse\" target=\"_blank\" data-test-id=\"cookie-statement-link\">${tagContent}</pie-link>`,\n        linkNecessaryOnly: (tagContent: string) => html`<pie-link data-test-id=\"body-necessary-only\" tag=\"button\" variant=\"inverse\" @click=\"${this._onNecessaryOnly}\">${tagContent}</pie-link>`,\n        linkManagePreferences: (tagContent: string) => html`<pie-link data-test-id=\"body-manage-prefs\" tag=\"button\" variant=\"inverse\" @click=\"${this._openManagePreferencesModal}\">${tagContent}</pie-link>`,\n        linkAcceptAll: (tagContent: string) => html`<pie-link data-test-id=\"body-accept-all\" tag=\"button\" variant=\"inverse\" @click=\"${this._onAcceptAll}\">${tagContent}</pie-link>`,\n        linkCookieStatement: (tagContent: string) => html`<pie-link href=\"${this.cookieStatementLink}\" size=\"small\" target=\"_blank\" data-test-id=\"cookie-statement-link\">${tagContent}</pie-link>`,\n        linkCookieTechList: (tagContent: string) => html`<pie-link href=\"${this.cookieTechnologiesLink}\" size=\"small\" target=\"_blank\" data-test-id=\"cookie-technology-link\">${tagContent}</pie-link>`,\n    }"
             },
             {
               "kind": "method",
@@ -345,6 +365,22 @@
                 "module": "/locales/en-gb.json"
               },
               "fieldName": "locale"
+            },
+            {
+              "name": "cookieStatementLink",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "cookieStatementLink"
+            },
+            {
+              "name": "cookieTechnologiesLink",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "cookieTechnologiesLink"
             }
           ],
           "superclass": {

package/dist/index.d.ts

@@ -53,6 +53,14 @@ export declare interface CookieBannerProps {
      * Assigns the data for localising the component strings
      */
     locale: CookieBannerLocale;
+    /**
+     * Allows consumers to pass in a specific cookie statement link.
+     */
+    cookieStatementLink: string;
+    /**
+     * Allows consumers to pass in a specific cookie technology link.
+     */
+    cookieTechnologiesLink: string;
 }
 
 export declare interface CustomTagEnhancers {
@@ -99,6 +107,8 @@ export declare class PieCookieBanner extends LitElement implements CookieBannerP
     private _isModalOpen;
     hasPrimaryActionsOnly: boolean;
     locale: CookieBannerLocale;
+    cookieStatementLink: string;
+    cookieTechnologiesLink: string;
     _preferencesNodes: NodeListOf<PieSwitch>;
     private _customTagEnhancers;
     private _localiseText;

package/dist/index.js

@@ -1,5 +1,5 @@
-import { unsafeCSS as k, LitElement as m, html as s, nothing as h } from "lit";
-import { state as f, property as g, queryAll as v } from "lit/decorators.js";
+import { unsafeCSS as b, LitElement as m, html as s, nothing as f } from "lit";
+import { state as g, property as h, queryAll as v } from "lit/decorators.js";
 import { repeat as y } from "lit/directives/repeat.js";
 import "@justeattakeaway/pie-button";
 import "@justeattakeaway/pie-divider";
@@ -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 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 = [
+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", B = "pie-cookie-banner-necessary-only", C = "pie-cookie-banner-manage-prefs", $ = "pie-cookie-banner-prefs-saved", A = [
   {
     id: "all",
     hasDivider: !0,
@@ -34,22 +34,22 @@ const x = `*{margin:0}.c-cookieBanner{--cb-font-family: var(--dt-font-interactiv
     hasDescription: !0
   }
 ];
-function u(a) {
+function k(a) {
   console.error(`[localisation-utils]: ${a}`);
 }
-function T(a, e) {
+function O(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) {
+function u(a, e) {
   if (!a)
     throw new Error('"locale" parameter cannot be empty');
   if (!e)
     throw new Error('"key" parameter cannot be empty');
-  const n = T(a, e);
-  return n || (u(`Couldn't find a value for the key "${e}", it will be used as fallback.`), e);
+  const n = O(a, e);
+  return n || (k(`Couldn't find a value for the key "${e}", it will be used as fallback.`), e);
 }
-function O(a) {
+function T(a) {
   const n = a.map((t) => `(<${t}.*>.*</${t}>)`).join("|");
   return new RegExp(n, "igm");
 }
@@ -57,20 +57,20 @@ function E(a, e) {
   const n = Object.keys(e);
   if (n.length === 0)
     return [a];
-  const i = O(n);
+  const i = T(n);
   return a.split(i).filter((t) => !!t).map((t) => {
     if (!t.match(i))
       return t;
     const r = t.match(/<(.*)>(.*)<\/.*>/);
     if (!r)
       return t;
-    const [, d, c] = r;
-    return [d, c];
+    const [, p, l] = r;
+    return [p, l];
   }).map((t) => {
     if (!Array.isArray(t))
       return t;
-    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);
+    const [r, p] = t, l = e[r];
+    return l || typeof l == "function" ? l(p) : (k(`Custom tag "${r}" does not have a matching enhancer function`), p);
   });
 }
 function S(a, e, n) {
@@ -80,7 +80,7 @@ function S(a, e, n) {
     throw new Error('"key" parameter cannot be empty');
   if (!n)
     throw new Error('"customTagEnhancers" parameter cannot be empty');
-  const i = b(a, e);
+  const i = u(a, e);
   return E(i, n);
 }
 const M = {
@@ -90,10 +90,6 @@ const M = {
     managePreferences: "Manage preferences",
     necessaryOnly: "Necessary only",
     acceptAll: "Accept all"
-  },
-  links: {
-    cookieStatement: "en/cookiestatement",
-    cookieTechnologies: "en/technologies"
   }
 }, N = {
   title: "Manage your preferences",
@@ -127,21 +123,21 @@ const M = {
   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, o = a.length - 1, r; o >= 0; o--)
+var P = Object.defineProperty, L = Object.getOwnPropertyDescriptor, d = (a, e, n, i) => {
+  for (var t = i > 1 ? void 0 : i ? L(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 L = "pie-cookie-banner";
-class l extends m {
+const R = "pie-cookie-banner";
+class c extends m {
   constructor() {
-    super(...arguments), this._isCookieBannerHidden = !1, this._isModalOpen = !1, this.hasPrimaryActionsOnly = !1, this.locale = z, this._customTagEnhancers = {
-      linkStatement: (e) => s`<pie-link href="${this._localiseText("banner.links.cookieStatement")}" variant="inverse" target="_blank">${e}</pie-link>`,
+    super(...arguments), this._isCookieBannerHidden = !1, this._isModalOpen = !1, this.hasPrimaryActionsOnly = !1, this.locale = z, this.cookieStatementLink = "", this.cookieTechnologiesLink = "", this._customTagEnhancers = {
+      linkStatement: (e) => s`<pie-link href="${this.cookieStatementLink}" variant="inverse" target="_blank" data-test-id="cookie-statement-link">${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="${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>`
+      linkCookieStatement: (e) => s`<pie-link href="${this.cookieStatementLink}" size="small" target="_blank" data-test-id="cookie-statement-link">${e}</pie-link>`,
+      linkCookieTechList: (e) => s`<pie-link href="${this.cookieTechnologiesLink}" size="small" target="_blank" data-test-id="cookie-technology-link">${e}</pie-link>`
     }, this._dispatchCookieBannerCustomEvent = (e, n) => {
       const i = new CustomEvent(e, {
         bubbles: !0,
@@ -152,7 +148,7 @@ class l extends m {
     }, this._onNecessaryOnly = () => {
       this._dispatchCookieBannerCustomEvent(B), this._isCookieBannerHidden = !0;
     }, this._onAcceptAll = () => {
-      this._dispatchCookieBannerCustomEvent(w), this._isCookieBannerHidden = !0;
+      this._dispatchCookieBannerCustomEvent(x), this._isCookieBannerHidden = !0;
     }, this._openManagePreferencesModal = () => {
       this._isCookieBannerHidden = !0, this._dispatchCookieBannerCustomEvent(C), this._isModalOpen = !0;
     }, this._handleSwitchStates = (e) => {
@@ -167,7 +163,7 @@ class l extends m {
     };
   }
   _localiseText(e) {
-    return b(this.locale, e);
+    return u(this.locale, e);
   }
   _localiseRichText(e) {
     return S(this.locale, e, this._customTagEnhancers);
@@ -205,12 +201,12 @@ class l extends m {
     hasDivider: t,
     hasDescription: o
   }) {
-    const r = this._localiseText(`preferencesManagement.${e}.title`), d = `preferencesManagement.${e}.description`, c = o && this._localiseText(d);
+    const r = this._localiseText(`preferencesManagement.${e}.title`), p = `preferencesManagement.${e}.description`, l = o && this._localiseText(p);
     return s`
             <div class="c-cookieBanner-preference">
                 <div>
                     <h3 class="c-cookieBanner-subheading">${r}</h3>
-                     ${c ? s`<p class="c-cookieBanner-description">${c}</p>` : h}
+                     ${l ? s`<p class="c-cookieBanner-description">${l}</p>` : f}
                  </div>
                 <pie-switch
                     id="${e}"
@@ -219,7 +215,7 @@ class l extends m {
                     @change="${this._handleSwitchStates}">
                 </pie-switch>
             </div>
-            ${t ? s`<pie-divider></pie-divider>` : h}`;
+            ${t ? s`<pie-divider></pie-divider>` : f}`;
   }
   /**
    * Renders the modal content.
@@ -290,28 +286,34 @@ class l extends m {
         </aside>`;
   }
 }
-l.styles = k(x);
-p([
-  f()
-], l.prototype, "_isCookieBannerHidden", 2);
-p([
-  f()
-], l.prototype, "_isModalOpen", 2);
-p([
-  g({ type: Boolean })
-], l.prototype, "hasPrimaryActionsOnly", 2);
-p([
-  g({ type: Object })
-], l.prototype, "locale", 2);
-p([
+c.styles = b(w);
+d([
+  g()
+], c.prototype, "_isCookieBannerHidden", 2);
+d([
+  g()
+], c.prototype, "_isModalOpen", 2);
+d([
+  h({ type: Boolean })
+], c.prototype, "hasPrimaryActionsOnly", 2);
+d([
+  h({ type: Object })
+], c.prototype, "locale", 2);
+d([
+  h({ type: String })
+], c.prototype, "cookieStatementLink", 2);
+d([
+  h({ type: String })
+], c.prototype, "cookieTechnologiesLink", 2);
+d([
   v("pie-switch")
-], l.prototype, "_preferencesNodes", 2);
-_(L, l);
+], c.prototype, "_preferencesNodes", 2);
+_(R, c);
 export {
-  w as ON_COOKIE_BANNER_ACCEPT_ALL,
+  x 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,
+  c as PieCookieBanner,
   A as preferences
 };

package/dist/react.d.ts

@@ -54,6 +54,14 @@ export declare interface CookieBannerProps {
      * Assigns the data for localising the component strings
      */
     locale: CookieBannerLocale;
+    /**
+     * Allows consumers to pass in a specific cookie statement link.
+     */
+    cookieStatementLink: string;
+    /**
+     * Allows consumers to pass in a specific cookie technology link.
+     */
+    cookieTechnologiesLink: string;
 }
 
 export declare interface CustomTagEnhancers {
@@ -102,6 +110,8 @@ declare class PieCookieBanner_2 extends LitElement implements CookieBannerProps
     private _isModalOpen;
     hasPrimaryActionsOnly: boolean;
     locale: CookieBannerLocale;
+    cookieStatementLink: string;
+    cookieTechnologiesLink: string;
     _preferencesNodes: NodeListOf<PieSwitch>;
     private _customTagEnhancers;
     private _localiseText;
@@ -170,10 +180,10 @@ declare class PieCookieBanner_2 extends LitElement implements CookieBannerProps
 }
 
 declare type PieCookieBannerEvents = {
-    onPieCookieBannerAcceptAll?: (event: CustomEvent<any>) => void;
-    onPieCookieBannerNecessaryOnly?: (event: CustomEvent<any>) => void;
-    onPieCookieBannerManagePrefs?: (event: CustomEvent<any>) => void;
-    onPieCookieBannerPrefsSaved?: (event: CustomEvent<any>) => void;
+    onPieCookieBannerAcceptAll?: (event: CustomEvent) => void;
+    onPieCookieBannerNecessaryOnly?: (event: CustomEvent) => void;
+    onPieCookieBannerManagePrefs?: (event: CustomEvent) => void;
+    onPieCookieBannerPrefsSaved?: (event: CustomEvent) => void;
 };
 
 export declare interface Preference {

package/locales/bg-bg.json

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

package/locales/de-de.json

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

package/locales/dk-dk.json

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

package/locales/en-gb.json

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

package/locales/fr-fr.json

@@ -6,10 +6,6 @@
       "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,10 +6,6 @@
       "managePreferences": "Gestisci preferenze",
       "necessaryOnly": " Solo necessari",
       "acceptAll": "Accetta tutti"
-    },
-    "links": {
-      "cookieStatement": "it/cookiestatement",
-      "cookieTechnologies": "it/technologies"
     }
   },
   "preferencesManagement": {

package/locales/nl-nl.json

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

package/locales/pl-pl.json

@@ -6,10 +6,6 @@
       "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.15.0",
+  "version": "0.16.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -35,17 +35,17 @@
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeat/pie-design-tokens": "5.9.0",
     "@justeattakeaway/pie-components-config": "0.9.0",
-    "@justeattakeaway/pie-wrapper-react": "0.13.0",
+    "@justeattakeaway/pie-wrapper-react": "0.14.0",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-button": "0.45.0",
-    "@justeattakeaway/pie-divider": "0.12.0",
-    "@justeattakeaway/pie-icon-button": "0.27.0",
-    "@justeattakeaway/pie-link": "0.14.0",
-    "@justeattakeaway/pie-modal": "0.38.0",
-    "@justeattakeaway/pie-switch": "0.24.0",
-    "@justeattakeaway/pie-webc-core": "0.17.0"
+    "@justeattakeaway/pie-button": "0.45.2",
+    "@justeattakeaway/pie-divider": "0.12.1",
+    "@justeattakeaway/pie-icon-button": "0.27.2",
+    "@justeattakeaway/pie-link": "0.15.0",
+    "@justeattakeaway/pie-modal": "0.38.2",
+    "@justeattakeaway/pie-switch": "0.25.0",
+    "@justeattakeaway/pie-webc-core": "0.17.1"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/defs.ts

@@ -52,6 +52,16 @@ export interface CookieBannerProps {
      * Assigns the data for localising the component strings
      */
     locale: CookieBannerLocale;
+
+    /**
+     * Allows consumers to pass in a specific cookie statement link.
+     */
+    cookieStatementLink: string;
+
+    /**
+     * Allows consumers to pass in a specific cookie technology link.
+     */
+    cookieTechnologiesLink: string;
 }
 
 /**

package/src/index.ts

@@ -57,16 +57,22 @@ export class PieCookieBanner extends LitElement implements CookieBannerProps {
     @property({ type: Object })
     public locale:CookieBannerLocale = defaultLocale;
 
+    @property({ type: String })
+    public cookieStatementLink = '';
+
+    @property({ type: String })
+    public cookieTechnologiesLink = '';
+
     @queryAll('pie-switch')
         _preferencesNodes!: NodeListOf<PieSwitch>;
 
     private _customTagEnhancers: CustomTagEnhancers = {
-        linkStatement: (tagContent: string) => html`<pie-link href="${this._localiseText('banner.links.cookieStatement')}" variant="inverse" target="_blank">${tagContent}</pie-link>`,
+        linkStatement: (tagContent: string) => html`<pie-link href="${this.cookieStatementLink}" variant="inverse" target="_blank" data-test-id="cookie-statement-link">${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>`,
+        linkCookieStatement: (tagContent: string) => html`<pie-link href="${this.cookieStatementLink}" size="small" target="_blank" data-test-id="cookie-statement-link">${tagContent}</pie-link>`,
+        linkCookieTechList: (tagContent: string) => html`<pie-link href="${this.cookieTechnologiesLink}" size="small" target="_blank" data-test-id="cookie-technology-link">${tagContent}</pie-link>`,
     };
 
     private _localiseText (key:string):string {

package/src/react.ts

@@ -21,10 +21,11 @@ const PieCookieBannerReact = createComponent({
 type ReactBaseType = React.HTMLAttributes<HTMLElement>
 
 type PieCookieBannerEvents = {
-    onPieCookieBannerAcceptAll?: (event: CustomEvent<any>) => void;
-    onPieCookieBannerNecessaryOnly?: (event: CustomEvent<any>) => void;
-    onPieCookieBannerManagePrefs?: (event: CustomEvent<any>) => void;
-    onPieCookieBannerPrefsSaved?: (event: CustomEvent<any>) => void;
+    onPieCookieBannerAcceptAll?: (event: CustomEvent) => void;
+    onPieCookieBannerNecessaryOnly?: (event: CustomEvent) => void;
+    onPieCookieBannerManagePrefs?: (event: CustomEvent) => void;
+    onPieCookieBannerPrefsSaved?: (event: CustomEvent) => void;
 };
 
-export const PieCookieBanner = PieCookieBannerReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<CookieBannerProps> & React.RefAttributes<PieCookieBannerLit> & PieCookieBannerEvents & ReactBaseType>;
+export const PieCookieBanner = PieCookieBannerReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<CookieBannerProps>
+    & React.RefAttributes<PieCookieBannerLit> & PieCookieBannerEvents & ReactBaseType>;