@justeattakeaway/pie-cookie-banner 0.19.6 → 0.19.8

package/README.md

@@ -8,17 +8,6 @@
   </a>
 </p>
 
-# Table of Contents
-
-1. [Introduction](#pie-cookie-banner)
-2. [Installation](#installation)
-3. [Importing the component](#importing-the-component)
-4. [Peer Dependencies](#peer-dependencies)
-5. [Props](#props)
-6. [Events](#events)
-7. [Contributing](#contributing)
-
-
 ## pie-cookie-banner
 
 `pie-cookie-banner` is a Web Component built using the Lit library.
@@ -43,84 +32,13 @@ $ yarn add @justeattakeaway/pie-cookie-banner
 
 For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).
 
+## Documentation
 
-### Importing the component
-
-#### JavaScript
-```js
-// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
-import { PieCookieBanner } from '@justeattakeaway/pie-cookie-banner';
-
-// If you don't need to reference the imported object, you can simply
-// import the module which registers the component as a custom element.
-import '@justeattakeaway/pie-cookie-banner';
-```
-
-#### React
-```js
-// React
-// For React, you will need to import our React-specific component build
-// which wraps the web component using ​@lit/react
-import { PieCookieBanner } from '@justeattakeaway/pie-cookie-banner/dist/react';
-```
-
-> [!NOTE]
-> When using the React version of the component, please make sure to also
-> include React as a [peer dependency](#peer-dependencies) in your project.
-
-
-## Peer Dependencies
-
-> [!IMPORTANT]
-> When using `pie-cookie-banner`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application.
-
-## Props
-
-| 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. |
-| 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. |
-| defaultPreferences | `Object`  | `{}` | Allows default preferences to be passed in by the consumer`{ 'functional': true, 'personalized': true, 'analytical': true }` or `{ 'functional': true }`. |
+Visit  [Cookie Banner | PIE Design System](https://pie.design/patterns/cookie-banner/code/) to view more information on this component.
 
-## Events
+## Questions
 
-The pie cookie banner does not directly establish cookies within the application or component. Instead, it offers events that application developers (consumers of this component) can subscribe to. This, in turn, enables applications to manage the process of setting their own cookies. The table below provides a list of events you can listen to:
-
-| Event | Type | Description |
-|-------|------|-------------|
-| `pie-cookie-banner-accept-all` | `CustomEvent` | Triggered when `accept all` is clicked. |
-| `pie-cookie-banner-necessary-only` | `CustomEvent` | Triggered when `necessary` is clicked. |
-| `pie-cookie-banner-manage-prefs` | `CustomEvent` | Triggered when `manage prefs` is clicked. |
-| `pie-cookie-banner-prefs-saved` | `CustomEvent` | Triggered when `manage prefs saved` is clicked. |
-
-In your markup or JSX, you can then use these to set the properties for the `pie-cookie-banner` component:
-
-```html
-<!-- Native HTML -->
-<pie-cookie-banner></pie-cookie-banner>
-
-<!-- JSX -->
-<PieCookieBanner></PieCookieBanner>
-```
-
-### Localisation
-
-By default the component displays its content in English language. To display the content in another language, you need to import the locale data for that language and pass it in the `locale` prop. For example, to display the content in Dutch, you need to import the Dutch locale data:
-
-```js
-import locale from '@justeattakeaway/pie-cookie-banner/locales/nl-nl.json';
-
-<!-- JSX -->
-<PieCookieBanner locale={locale}></PieCookieBanner>
-```
-
-It's possible to import all locales at once, if necessary:
-
-```js
-import allLocales from '@justeattakeaway/pie-cookie-banner/locales';
-```
+Please head to [FAQs | PIE Design System](https://pie.design/support/contact-us/) to see our FAQs and get in touch.
 
 ## Contributing
 

package/custom-elements.json

@@ -104,6 +104,14 @@
       "kind": "javascript-module",
       "path": "src/index.js",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "defaultProps",
+          "type": {
+            "text": "DefaultProps"
+          },
+          "default": "{\n    hasPrimaryActionsOnly: false,\n    defaultPreferences: {},\n    locale: defaultLocale,\n    cookieStatementLink: '',\n    cookieTechnologiesLink: '',\n}"
+        },
         {
           "kind": "class",
           "description": "",
@@ -130,11 +138,7 @@
             {
               "kind": "field",
               "name": "hasPrimaryActionsOnly",
-              "type": {
-                "text": "boolean"
-              },
               "privacy": "public",
-              "default": "false",
               "attribute": "hasPrimaryActionsOnly"
             },
             {
@@ -144,7 +148,6 @@
                 "text": "CookieBannerProps['defaultPreferences']"
               },
               "privacy": "public",
-              "default": "{}",
               "attribute": "defaultPreferences"
             },
             {
@@ -154,27 +157,18 @@
                 "text": "CookieBannerLocale"
               },
               "privacy": "public",
-              "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"
             },
             {
@@ -339,10 +333,6 @@
           "attributes": [
             {
               "name": "hasPrimaryActionsOnly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
               "fieldName": "hasPrimaryActionsOnly"
             },
             {
@@ -350,7 +340,6 @@
               "type": {
                 "text": "CookieBannerProps['defaultPreferences']"
               },
-              "default": "{}",
               "fieldName": "defaultPreferences"
             },
             {
@@ -358,26 +347,14 @@
               "type": {
                 "text": "CookieBannerLocale"
               },
-              "default": "defaultLocale",
-              "resolveInitializer": {
-                "module": "/locales/en-gb.json"
-              },
               "fieldName": "locale"
             },
             {
               "name": "cookieStatementLink",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
               "fieldName": "cookieStatementLink"
             },
             {
               "name": "cookieTechnologiesLink",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
               "fieldName": "cookieTechnologiesLink"
             }
           ],
@@ -398,6 +375,14 @@
             "package": "./defs"
           }
         },
+        {
+          "kind": "js",
+          "name": "defaultProps",
+          "declaration": {
+            "name": "defaultProps",
+            "module": "src/index.js"
+          }
+        },
         {
           "kind": "js",
           "name": "PieCookieBanner",

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
 import { PieSwitch } from '@justeattakeaway/pie-switch';
@@ -54,11 +55,11 @@ export declare interface CookieBannerProps {
      */
     locale: CookieBannerLocale;
     /**
-     * Allows consumers to pass in a specific cookie statement link.
+     * The URL of the cookie statement page the banner should link to.
      */
     cookieStatementLink: string;
     /**
-     * Allows consumers to pass in a specific cookie technology link.
+     * The URL for the cookie technology link.
      */
     cookieTechnologiesLink: string;
     /**
@@ -66,6 +67,7 @@ export declare interface CookieBannerProps {
      * the switch to be on by default (if set to `true`).
      *
      * e.g. { 'functional': true }
+     * or { 'functional': true, 'personalized': true, 'analytical': true }
      */
     defaultPreferences?: Partial<Record<PreferenceIds, boolean>>;
 }
@@ -74,6 +76,10 @@ export declare interface CustomTagEnhancers {
     [key: string]: (tagContent: string) => TemplateResult;
 }
 
+export declare type DefaultProps = ComponentDefaultPropsGeneric<CookieBannerProps, 'hasPrimaryActionsOnly' | 'defaultPreferences' | 'locale' | 'cookieStatementLink' | 'cookieTechnologiesLink'>;
+
+export declare const defaultProps: DefaultProps;
+
 /**
  * Event name for when all cookies are accepted.
  *

package/dist/index.js

@@ -1,15 +1,54 @@
-import { unsafeCSS as w, LitElement as B, html as s, nothing as k } from "lit";
-import { state as b, property as h, queryAll as $ } from "lit/decorators.js";
-import { repeat as A } from "lit/directives/repeat.js";
+import { unsafeCSS as B, LitElement as $, html as s, nothing as b } from "lit";
+import { state as m, property as f, queryAll as A } from "lit/decorators.js";
+import { repeat as C } from "lit/directives/repeat.js";
 import "@justeattakeaway/pie-button";
 import "@justeattakeaway/pie-divider";
 import "@justeattakeaway/pie-icon-button";
 import "@justeattakeaway/pie-link";
 import "@justeattakeaway/pie-modal";
 import "@justeattakeaway/pie-switch";
-import { defineCustomElement as C, dispatchCustomEvent as f } from "@justeattakeaway/pie-webc-core";
-const T = `*,*: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}
-`, O = "pie-cookie-banner-accept-all", S = "pie-cookie-banner-necessary-only", M = "pie-cookie-banner-manage-prefs", N = "pie-cookie-banner-prefs-saved", P = [
+import { defineCustomElement as T, dispatchCustomEvent as g } from "@justeattakeaway/pie-webc-core";
+const O = {
+  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"
+  }
+}, S = {
+  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",
+    description: "These cookies are necessary to ensure that the website and its features function properly. Services you have asked for cannot be provided without these cookies."
+  },
+  functional: {
+    title: "Functional",
+    description: "These cookies allow the website to remember the choices you make to give you better functionality and personal features."
+  },
+  analytical: {
+    title: "Analytical",
+    description: "These analytical cookies, 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)",
+    description: "These marketing cookies 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: ""
+    }
+  }
+}, 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}
+`, 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",
     hasDivider: !0,
@@ -34,30 +73,30 @@ const T = `*,*:after,*:before{box-sizing:inherit}*{margin:0}.c-cookieBanner{--cb
     hasDescription: !0
   }
 ];
-function m(a) {
+function y(a) {
   console.error(`[localisation-utils]: ${a}`);
 }
-function z(a, e) {
+function j(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 y(a, e) {
+function v(a, e) {
   if (!a)
     throw new Error('"locale" parameter cannot be empty');
   if (!e)
     throw new Error('"key" parameter cannot be empty');
-  const n = z(a, e);
-  return n || (m(`Couldn't find a value for the key "${e}", it will be used as fallback.`), e);
+  const n = j(a, e);
+  return n || (y(`Couldn't find a value for the key "${e}", it will be used as fallback.`), e);
 }
-function E(a) {
+function H(a) {
   const n = a.map((t) => `(<${t}.*>.*</${t}>)`).join("|");
   return new RegExp(n, "igm");
 }
-function L(a, e) {
+function D(a, e) {
   const n = Object.keys(e);
   if (n.length === 0)
     return [a];
-  const i = E(n);
+  const i = H(n);
   return a.split(i).filter((t) => !!t).map((t) => {
     if (!t.match(i))
       return t;
@@ -70,68 +109,34 @@ function L(a, e) {
     if (!Array.isArray(t))
       return t;
     const [r, p] = t, l = e[r];
-    return l || typeof l == "function" ? l(p) : (m(`Custom tag "${r}" does not have a matching enhancer function`), p);
+    return l || typeof l == "function" ? l(p) : (y(`Custom tag "${r}" does not have a matching enhancer function`), p);
   });
 }
-function R(a, e, n) {
+function K(a, e, n) {
   if (!a)
     throw new Error('"locale" parameter cannot be empty');
   if (!e)
     throw new Error('"key" parameter cannot be empty');
   if (!n)
     throw new Error('"customTagEnhancers" parameter cannot be empty');
-  const i = y(a, e);
-  return L(i, n);
+  const i = v(a, e);
+  return D(i, n);
 }
-const j = {
-  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"
-  }
-}, H = {
-  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",
-    description: "These cookies are necessary to ensure that the website and its features function properly. Services you have asked for cannot be provided without these cookies."
-  },
-  functional: {
-    title: "Functional",
-    description: "These cookies allow the website to remember the choices you make to give you better functionality and personal features."
-  },
-  analytical: {
-    title: "Analytical",
-    description: "These analytical cookies, 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)",
-    description: "These marketing cookies 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: ""
-    }
-  }
-}, D = {
-  banner: j,
-  preferencesManagement: H
-};
-var K = Object.defineProperty, F = Object.getOwnPropertyDescriptor, d = (a, e, n, i) => {
-  for (var t = i > 1 ? void 0 : i ? F(e, n) : e, o = a.length - 1, r; o >= 0; o--)
+var F = Object.defineProperty, V = Object.getOwnPropertyDescriptor, d = (a, e, n, i) => {
+  for (var t = i > 1 ? void 0 : i ? V(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 && K(e, n, t), t;
+  return i && t && F(e, n, t), t;
 };
-const V = "pie-cookie-banner";
-class c extends B {
+const h = {
+  hasPrimaryActionsOnly: !1,
+  defaultPreferences: {},
+  locale: P,
+  cookieStatementLink: "",
+  cookieTechnologiesLink: ""
+}, I = "pie-cookie-banner";
+class c extends $ {
   constructor() {
-    super(...arguments), this._isCookieBannerHidden = !1, this._isModalOpen = !1, this.hasPrimaryActionsOnly = !1, this.defaultPreferences = {}, this.locale = D, this.cookieStatementLink = "", this.cookieTechnologiesLink = "", this._customTagEnhancers = {
+    super(...arguments), this._isCookieBannerHidden = !1, this._isModalOpen = !1, this.hasPrimaryActionsOnly = h.hasPrimaryActionsOnly, this.defaultPreferences = h.defaultPreferences, this.locale = h.locale, this.cookieStatementLink = h.cookieStatementLink, this.cookieTechnologiesLink = h.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>`,
@@ -139,11 +144,11 @@ class c extends B {
       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._onNecessaryOnly = () => {
-      f(this, S), this._isCookieBannerHidden = !0;
+      g(this, z), this._isCookieBannerHidden = !0;
     }, this._onAcceptAll = () => {
-      f(this, O), this._isCookieBannerHidden = !0;
+      g(this, N), this._isCookieBannerHidden = !0;
     }, this._openManagePreferencesModal = () => {
-      this._isCookieBannerHidden = !0, f(this, M), this._isModalOpen = !0;
+      this._isCookieBannerHidden = !0, g(this, E), 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) {
@@ -156,10 +161,10 @@ class c extends B {
     };
   }
   _localiseText(e) {
-    return y(this.locale, e);
+    return v(this.locale, e);
   }
   _localiseRichText(e) {
-    return R(this.locale, e, this._customTagEnhancers);
+    return K(this.locale, e, this._customTagEnhancers);
   }
   /**
    * Handles closing the modal and re-displaying the cookie banner
@@ -181,7 +186,7 @@ class c extends B {
     let e = {};
     [...this._preferencesNodes].filter(({ id: n }) => n !== "all").forEach(({ id: n, checked: i }) => {
       e = { ...e, [n]: i };
-    }), f(this, N, e), this._isModalOpen = !1, this._isCookieBannerHidden = !0;
+    }), g(this, L, e), this._isModalOpen = !1, this._isCookieBannerHidden = !0;
   }
   /**
    * Renders the content of the preference item.
@@ -194,25 +199,25 @@ class c extends B {
     hasDivider: t,
     hasDescription: o
   }) {
-    var g;
-    const r = this._localiseText(`preferencesManagement.${e}.title`), p = `preferencesManagement.${e}.description`, l = o && this._localiseText(p), _ = ["functional", "personalized", "analytical"].every((x) => {
+    var k;
+    const r = this._localiseText(`preferencesManagement.${e}.title`), p = `preferencesManagement.${e}.description`, l = o && this._localiseText(p), x = ["functional", "personalized", "analytical"].every((w) => {
       var u;
-      return ((u = this.defaultPreferences) == null ? void 0 : u[x]) === !0;
+      return ((u = this.defaultPreferences) == null ? void 0 : u[w]) === !0;
     });
     return s`
             <div class="c-cookieBanner-preference">
                 <div>
                     <h3 class="c-cookieBanner-subheading">${r}</h3>
-                     ${l ? s`<p class="c-cookieBanner-description">${l}</p>` : k}
+                     ${l ? s`<p class="c-cookieBanner-description">${l}</p>` : b}
                  </div>
                 <pie-switch
                     id="${e}"
-                    ?checked="${((g = this.defaultPreferences) == null ? void 0 : g[e]) || _ || n}"
+                    ?checked="${((k = this.defaultPreferences) == null ? void 0 : k[e]) || x || n}"
                     ?disabled="${i}"
                     @change="${this._handleSwitchStates}">
                 </pie-switch>
             </div>
-            ${t ? s`<pie-divider></pie-divider>` : k}`;
+            ${t ? s`<pie-divider></pie-divider>` : b}`;
   }
   /**
    * Renders the modal content.
@@ -223,8 +228,8 @@ class c extends B {
             <p class="c-cookieBanner-description" data-test-id="modal-description">
                 ${this._localiseRichText("preferencesManagement.description")}
             </p>
-            ${A(
-      P,
+            ${C(
+      R,
       ({ id: e }) => e,
       (e) => this.renderPreference(e)
     )}`;
@@ -283,37 +288,38 @@ class c extends B {
         </aside>`;
   }
 }
-c.styles = w(T);
+c.styles = B(M);
 d([
-  b()
+  m()
 ], c.prototype, "_isCookieBannerHidden", 2);
 d([
-  b()
+  m()
 ], c.prototype, "_isModalOpen", 2);
 d([
-  h({ type: Boolean })
+  f({ type: Boolean })
 ], c.prototype, "hasPrimaryActionsOnly", 2);
 d([
-  h({ type: Object })
+  f({ type: Object })
 ], c.prototype, "defaultPreferences", 2);
 d([
-  h({ type: Object })
+  f({ type: Object })
 ], c.prototype, "locale", 2);
 d([
-  h({ type: String })
+  f({ type: String })
 ], c.prototype, "cookieStatementLink", 2);
 d([
-  h({ type: String })
+  f({ type: String })
 ], c.prototype, "cookieTechnologiesLink", 2);
 d([
-  $("pie-switch")
+  A("pie-switch")
 ], c.prototype, "_preferencesNodes", 2);
-C(V, c);
+T(I, c);
 export {
-  O as ON_COOKIE_BANNER_ACCEPT_ALL,
-  M as ON_COOKIE_BANNER_MANAGE_PREFS,
-  S as ON_COOKIE_BANNER_NECESSARY_ONLY,
-  N as ON_COOKIE_BANNER_PREFS_SAVED,
+  N as ON_COOKIE_BANNER_ACCEPT_ALL,
+  E as ON_COOKIE_BANNER_MANAGE_PREFS,
+  z as ON_COOKIE_BANNER_NECESSARY_ONLY,
+  L as ON_COOKIE_BANNER_PREFS_SAVED,
   c as PieCookieBanner,
-  P as preferences
+  h as defaultProps,
+  R as preferences
 };

package/dist/react.d.ts

@@ -1,3 +1,4 @@
+import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
 import { PieSwitch } from '@justeattakeaway/pie-switch';
@@ -55,11 +56,11 @@ export declare interface CookieBannerProps {
      */
     locale: CookieBannerLocale;
     /**
-     * Allows consumers to pass in a specific cookie statement link.
+     * The URL of the cookie statement page the banner should link to.
      */
     cookieStatementLink: string;
     /**
-     * Allows consumers to pass in a specific cookie technology link.
+     * The URL for the cookie technology link.
      */
     cookieTechnologiesLink: string;
     /**
@@ -67,6 +68,7 @@ export declare interface CookieBannerProps {
      * the switch to be on by default (if set to `true`).
      *
      * e.g. { 'functional': true }
+     * or { 'functional': true, 'personalized': true, 'analytical': true }
      */
     defaultPreferences?: Partial<Record<PreferenceIds, boolean>>;
 }
@@ -75,6 +77,8 @@ export declare interface CustomTagEnhancers {
     [key: string]: (tagContent: string) => TemplateResult;
 }
 
+export declare type DefaultProps = ComponentDefaultPropsGeneric<CookieBannerProps, 'hasPrimaryActionsOnly' | 'defaultPreferences' | 'locale' | 'cookieStatementLink' | 'cookieTechnologiesLink'>;
+
 /**
  * Event name for when all cookies are accepted.
  *

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-cookie-banner",
   "description": "PIE Design System Cookie Banner built using Web Components",
-  "version": "0.19.6",
+  "version": "0.19.8",
   "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.4",
-    "@justeattakeaway/pie-divider": "0.13.4",
-    "@justeattakeaway/pie-icon-button": "0.28.5",
-    "@justeattakeaway/pie-link": "0.17.4",
-    "@justeattakeaway/pie-modal": "0.42.5",
-    "@justeattakeaway/pie-switch": "0.29.4",
-    "@justeattakeaway/pie-webc-core": "0.22.0"
+    "@justeattakeaway/pie-button": "0.47.6",
+    "@justeattakeaway/pie-divider": "0.13.5",
+    "@justeattakeaway/pie-icon-button": "0.28.6",
+    "@justeattakeaway/pie-link": "0.17.5",
+    "@justeattakeaway/pie-modal": "0.42.7",
+    "@justeattakeaway/pie-switch": "0.29.6",
+    "@justeattakeaway/pie-webc-core": "0.23.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/defs.ts

@@ -1,3 +1,5 @@
+import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+
 import {
     TemplateResult,
 } from 'lit';
@@ -54,12 +56,12 @@ export interface CookieBannerProps {
     locale: CookieBannerLocale;
 
     /**
-     * Allows consumers to pass in a specific cookie statement link.
+     * The URL of the cookie statement page the banner should link to.
      */
     cookieStatementLink: string;
 
     /**
-     * Allows consumers to pass in a specific cookie technology link.
+     * The URL for the cookie technology link.
      */
     cookieTechnologiesLink: string;
 
@@ -68,6 +70,7 @@ export interface CookieBannerProps {
      * the switch to be on by default (if set to `true`).
      *
      * e.g. { 'functional': true }
+     * or { 'functional': true, 'personalized': true, 'analytical': true }
      */
     defaultPreferences?: Partial<Record<PreferenceIds, boolean>>;
 }
@@ -139,3 +142,6 @@ export const preferences: Preference[] = [
 export interface CustomTagEnhancers {
     [key: string]: (tagContent: string) => TemplateResult;
 }
+
+export type DefaultProps = ComponentDefaultPropsGeneric<CookieBannerProps, 'hasPrimaryActionsOnly' | 'defaultPreferences' | 'locale' | 'cookieStatementLink' | 'cookieTechnologiesLink'>;
+

package/src/index.ts

@@ -15,6 +15,8 @@ import { PieSwitch } from '@justeattakeaway/pie-switch';
 import { defineCustomElement, dispatchCustomEvent } from '@justeattakeaway/pie-webc-core';
 /* eslint-enable import/no-duplicates */
 
+import defaultLocale from '../locales/en-gb.json';
+
 import styles from './cookie-banner.scss?inline';
 import {
     CookieBannerProps,
@@ -27,14 +29,25 @@ import {
     type PreferenceIds,
     type CookieBannerLocale,
     type CustomTagEnhancers,
+    DefaultProps,
 } from './defs';
 
 import { localiseText, localiseRichText } from './localisation-utils';
-import defaultLocale from '../locales/en-gb.json';
 
 // Valid values available to consumers
 export * from './defs';
 
+// TODO: Move this object to defs.ts
+// It can be moved as soon as we manage to figure a safe way to avoid the error TS2821
+// Import assertions are only supported when the '--module' option is set to 'esnext' or 'nodenext'
+export const defaultProps: DefaultProps = {
+    hasPrimaryActionsOnly: false,
+    defaultPreferences: {},
+    locale: defaultLocale,
+    cookieStatementLink: '',
+    cookieTechnologiesLink: '',
+};
+
 const componentSelector = 'pie-cookie-banner';
 
 /**
@@ -52,19 +65,19 @@ export class PieCookieBanner extends LitElement implements CookieBannerProps {
     private _isModalOpen = false;
 
     @property({ type: Boolean })
-    public hasPrimaryActionsOnly = false;
+    public hasPrimaryActionsOnly = defaultProps.hasPrimaryActionsOnly;
 
     @property({ type: Object })
-    public defaultPreferences: CookieBannerProps['defaultPreferences'] = {};
+    public defaultPreferences: CookieBannerProps['defaultPreferences'] = defaultProps.defaultPreferences;
 
     @property({ type: Object })
-    public locale:CookieBannerLocale = defaultLocale;
+    public locale:CookieBannerLocale = defaultProps.locale;
 
     @property({ type: String })
-    public cookieStatementLink = '';
+    public cookieStatementLink = defaultProps.cookieStatementLink;
 
     @property({ type: String })
-    public cookieTechnologiesLink = '';
+    public cookieTechnologiesLink = defaultProps.cookieTechnologiesLink;
 
     @queryAll('pie-switch')
         _preferencesNodes!: NodeListOf<PieSwitch>;