@justeattakeaway/pie-cookie-banner 1.9.0 → 1.10.0

package/dist/react.d.ts

@@ -59,6 +59,23 @@ export declare interface CookieBannerProps {
      * The URL of the cookie statement page the banner should link to.
      */
     cookieStatementLink: string;
+    /**
+     * An optional override for the personalised preference label rendered in the
+     * "Manage preferences" modal. When provided, this string replaces the locale-defined
+     * label for the personalised preference. Consumers can include plain text.
+     * When omitted or set to an empty string, the built-in locale string is used.
+     */
+    personalizedLabel?: string;
+    /**
+     * An optional override for the personalised preference description rendered in the
+     * "Manage preferences" modal. When provided, this string replaces the locale-defined
+     * description for the personalised preference. Consumers can include plain text,
+     * HTML anchor tags (e.g. `<a href="...">Privacy Policy</a>`), or `<pie-link>` tags
+     * to embed a privacy policy link. The HTML is sanitised, so only the allowed link
+     * attributes are preserved and any others are stripped or normalised. When omitted or
+     * set to an empty string, the built-in locale string is used.
+     */
+    personalizedDescription?: string;
     /**
      * The URL for the cookie technology link.
      */
@@ -153,6 +170,8 @@ declare class PieCookieBanner_2 extends PieElement implements CookieBannerProps
     hasPrimaryActionsOnly: boolean;
     defaultPreferences: Partial<Record<PreferenceIds, boolean>>;
     cookieStatementLink: string;
+    personalizedLabel: string;
+    personalizedDescription: string;
     cookieTechnologiesLink: string;
     country: string;
     language: string;
@@ -177,6 +196,20 @@ declare class PieCookieBanner_2 extends PieElement implements CookieBannerProps
     private _customTagEnhancers;
     private _localiseText;
     private _localiseRichText;
+    /**
+     * Renders a preference label.
+     * For the personalised preference, uses the consumer-supplied `personalizedLabel`
+     * prop when provided as plain text, and falls back to the built-in locale string otherwise.
+     */
+    private _renderPreferenceLabel;
+    /**
+     * Renders a preference description.
+     * For the personalised preference, uses the consumer-supplied `personalizedDescription`
+     * prop when provided (allowing consumers to embed their own privacy policy link using
+     * plain HTML `<a>` or `<pie-link>` tags), and falls back to the built-in locale string otherwise.
+     * All other preferences use the plain locale text with HTML sanitisation.
+     */
+    private _renderPreferenceDescription;
     /**
      * Handles closing the modal and re-displaying the cookie banner
      * and making the cookie banner visible

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-cookie-banner",
   "description": "PIE Design System Cookie Banner built using Web Components",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -51,17 +51,17 @@
   "devDependencies": {
     "@justeattakeaway/pie-components-config": "0.21.3",
     "@justeattakeaway/pie-css": "1.2.0",
-    "@justeattakeaway/pie-monorepo-utils": "0.9.5",
+    "@justeattakeaway/pie-monorepo-utils": "0.9.6",
     "@justeattakeaway/pie-wrapper-react": "0.14.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-button": "1.14.4",
-    "@justeattakeaway/pie-divider": "1.5.25",
-    "@justeattakeaway/pie-icon-button": "2.7.19",
-    "@justeattakeaway/pie-link": "1.3.35",
-    "@justeattakeaway/pie-modal": "1.26.11",
-    "@justeattakeaway/pie-switch": "2.4.2",
-    "@justeattakeaway/pie-webc-core": "15.0.0",
+    "@justeattakeaway/pie-button": "1.14.5",
+    "@justeattakeaway/pie-divider": "1.5.26",
+    "@justeattakeaway/pie-icon-button": "2.7.20",
+    "@justeattakeaway/pie-link": "1.3.36",
+    "@justeattakeaway/pie-modal": "1.26.12",
+    "@justeattakeaway/pie-switch": "2.5.1",
+    "@justeattakeaway/pie-webc-core": "15.0.1",
     "dompurify": "3.4.8"
   },
   "customElements": "custom-elements.json",

package/src/defs.ts

@@ -97,6 +97,25 @@ export interface CookieBannerProps {
      */
     cookieStatementLink: string;
 
+    /**
+     * An optional override for the personalised preference label rendered in the
+     * "Manage preferences" modal. When provided, this string replaces the locale-defined
+     * label for the personalised preference. Consumers can include plain text.
+     * When omitted or set to an empty string, the built-in locale string is used.
+     */
+    personalizedLabel?: string;
+
+    /**
+     * An optional override for the personalised preference description rendered in the
+     * "Manage preferences" modal. When provided, this string replaces the locale-defined
+     * description for the personalised preference. Consumers can include plain text,
+     * HTML anchor tags (e.g. `<a href="...">Privacy Policy</a>`), or `<pie-link>` tags
+     * to embed a privacy policy link. The HTML is sanitised, so only the allowed link
+     * attributes are preserved and any others are stripped or normalised. When omitted or
+     * set to an empty string, the built-in locale string is used.
+     */
+    personalizedDescription?: string;
+
     /**
      * The URL for the cookie technology link.
      */
@@ -205,6 +224,8 @@ export const defaultProps: DefaultProps = {
     country: Country.GREAT_BRITAIN,
     language: Language.ENGLISH,
     cookieStatementLink: '',
+    personalizedLabel: '',
+    personalizedDescription: '',
     cookieTechnologiesLink: '',
     openLinksInSameTab: false,
 };

package/src/index.ts

@@ -74,6 +74,12 @@ export class PieCookieBanner extends PieElement implements CookieBannerProps {
     @property({ type: String })
     public cookieStatementLink = defaultProps.cookieStatementLink;
 
+    @property({ type: String })
+    public personalizedLabel = defaultProps.personalizedLabel;
+
+    @property({ type: String })
+    public personalizedDescription = defaultProps.personalizedDescription;
+
     @property({ type: String })
     public cookieTechnologiesLink = defaultProps.cookieTechnologiesLink;
 
@@ -162,6 +168,33 @@ export class PieCookieBanner extends PieElement implements CookieBannerProps {
         return localiseRichText(this._locale, key, this._customTagEnhancers);
     }
 
+    /**
+     * Renders a preference label.
+     * For the personalised preference, uses the consumer-supplied `personalizedLabel`
+     * prop when provided as plain text, and falls back to the built-in locale string otherwise.
+     */
+    private _renderPreferenceLabel (id: PreferenceIds) {
+        if (id === 'personalized' && this.personalizedLabel) {
+            return this.personalizedLabel;
+        }
+        return this._localiseText(`preferencesManagement.${id}.title`);
+    }
+
+    /**
+     * Renders a preference description.
+     * For the personalised preference, uses the consumer-supplied `personalizedDescription`
+     * prop when provided (allowing consumers to embed their own privacy policy link using
+     * plain HTML `<a>` or `<pie-link>` tags), and falls back to the built-in locale string otherwise.
+     * All other preferences use the plain locale text with HTML sanitisation.
+     */
+    private _renderPreferenceDescription (id: PreferenceIds, description: string) {
+        if (id === 'personalized' && this.personalizedDescription) {
+            return unsafeHTML(sanitiseDescriptionHtml(this.personalizedDescription, this._linkTargetAttribute));
+        }
+
+        return unsafeHTML(sanitiseDescriptionHtml(description, this._linkTargetAttribute));
+    }
+
     /**
      * Handles closing the modal and re-displaying the cookie banner
      * and making the cookie banner visible
@@ -250,7 +283,7 @@ export class PieCookieBanner extends PieElement implements CookieBannerProps {
     private renderPreference ({
         id, checked, disabled, hasDivider, hasDescription,
     }: Preference) {
-        const title = this._localiseText(`preferencesManagement.${id}.title`);
+        const title = this._renderPreferenceLabel(id);
         const descriptionLocaleKey = `preferencesManagement.${id}.description`;
         // Ensure not to display fallback text as description as its expected that some items might not have its own description
         const description = hasDescription && this._localiseText(descriptionLocaleKey);
@@ -258,13 +291,12 @@ export class PieCookieBanner extends PieElement implements CookieBannerProps {
 
         const shouldToggleAll =
             requiredToggleAllKeys.every((key) => this.defaultPreferences?.[key as PreferenceIds] === true);
-
         return html`
             <div class="c-cookieBanner-preference">
                 <div>
-                    <h3 class="c-cookieBanner-subheading">${title}</h3>
-                     ${description ? html`<p class="c-cookieBanner-description">${unsafeHTML(sanitiseDescriptionHtml(description, this._linkTargetAttribute))}</p>` : nothing}
-                 </div>
+                    <h3 class="c-cookieBanner-subheading" data-test-id="${id}-label">${title}</h3>
+                    ${description ? html`<p class="c-cookieBanner-description" data-test-id="${id}-description">${this._renderPreferenceDescription(id, description)}</p>` : nothing}
+                </div>
                 <pie-switch
                     id="${id}"
                     .aria="${{ label: title }}"

package/src/localisation-utils.ts

@@ -136,11 +136,11 @@ function enhanceCustomTags (richText:string, customTagEnhancers:CustomTagEnhance
 }
 
 /**
- * Sanitises an HTML string to allow only safe <a> tags, and normalises anchor
+ * Sanitises an HTML string to allow only safe <a> and <pie-link> tags, and normalises link
  * attributes to respect the component's link-target behaviour.
  *
  * Uses DOMPurify for the core sanitisation:
- * - Strips all non-<a> elements (keeping their text content).
+ * - Strips all non-link elements (keeping their text content).
  * - Removes unsafe href protocols (javascript:, data:, vbscript:).
  * - Removes non-allowlisted attributes (only href, rel, target survive).
  *
@@ -158,10 +158,12 @@ export function sanitiseDescriptionHtml (input: string, linkTarget = '_blank'):
         return input.replace(/<[^>]*>/g, '');
     }
 
+    // Define the allowed tags in uppercase to match node.tagName
+    const ALLOWED_LINK_TAGS = ['A', 'PIE-LINK'];
     const normalisedLinkTarget = linkTarget === '_self' ? '_self' : '_blank';
 
     const enforceAnchorAttributes = (node: Element) => {
-        if (node.tagName !== 'A') return;
+        if (!ALLOWED_LINK_TAGS.includes(node.tagName)) return;
 
         node.setAttribute('target', normalisedLinkTarget);
 
@@ -182,7 +184,8 @@ export function sanitiseDescriptionHtml (input: string, linkTarget = '_blank'):
         DOMPurify.addHook('afterSanitizeAttributes', enforceAnchorAttributes);
 
         return DOMPurify.sanitize(input, {
-            ALLOWED_TAGS: ['a'],
+            // Convert to lowercase for DOMPurify's tag list
+            ALLOWED_TAGS: ALLOWED_LINK_TAGS.map((tag) => tag.toLowerCase()),
             ALLOWED_ATTR: ['href', 'rel', 'target'],
         }) as string;
     } finally {