@justeattakeaway/pie-notification 0.20.3 → 0.21.0

package/README.md

@@ -41,8 +41,8 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
 | `isOpen` | `true`, `false` | When true, the notification is set to be open and visible. | `true` |
 | `hideIcon` | `true`, `false` | When true, the icon will be hidden. | `false` |
 | `hasStackedActions` | `true`, `false` | When true, action buttons will stack on narrow screens. Not available when `isCompact` is true. | `false` |
-| `leadingAction` | `{ text: string, ariaLabel?: string, size?: "small-productive" \| "xsmall" }` | An object representing the leading action of the notification. | `undefined` |
-| `supportingAction` | `{ text: string, ariaLabel?: string, size?: "small-productive" \| "xsmall" }` | An object representing the supporting action of the notification. <br> The action will only render if `leadingAction` is passed. | `undefined` |
+| `leadingAction` | `{`<br>&nbsp;&nbsp;`text: string,`<br>&nbsp;&nbsp;`ariaLabel?: string,`<br>&nbsp;&nbsp;`size?: "small-productive" \| "xsmall",`<br>&nbsp;&nbsp;`href?: string,`<br>&nbsp;&nbsp;`target?: string,`<br>&nbsp;&nbsp;`rel?: string,`<br>&nbsp;&nbsp;`download?: string`<br>`}` | An object representing the leading action of the notification. When `href` is provided, renders as a link. | `undefined` |
+| `supportingAction` | `{`<br>&nbsp;&nbsp;`text: string,`<br>&nbsp;&nbsp;`ariaLabel?: string,`<br>&nbsp;&nbsp;`size?: "small-productive" \| "xsmall",`<br>&nbsp;&nbsp;`href?: string,`<br>&nbsp;&nbsp;`target?: string,`<br>&nbsp;&nbsp;`rel?: string,`<br>&nbsp;&nbsp;`download?: string`<br>`}` | An object representing the supporting action of the notification. When `href` is provided, renders as a link. <br> The action will only render if `leadingAction` is passed. | `undefined` |
 | `aria` | `{ close?: string, label?: string }` | The ARIA labels used for various parts of the notification. Only pass `label` if there is no heading to ensure the region is announced with a title. | `undefined` |
 
 ### Slots
@@ -109,6 +109,78 @@ import { IconPlaceholder } from '@justeattakeaway/pie-icons-webc/dist/react/Icon
 </PieNotification>
 ```
 
+### With Link Actions
+
+Actions can be rendered as links by providing an `href` property. This is useful when you want to navigate to a URL or trigger a file download.
+
+**For HTML:**
+
+```html
+<pie-notification
+    heading="Update Available"
+    id="my-notification">
+    A new version is available with exciting features.
+</pie-notification>
+
+<script>
+    const notification = document.getElementById('my-notification');
+    notification.leadingAction = {
+        text: 'Learn More',
+        href: 'https://example.com',
+        target: '_blank',
+        rel: 'noopener noreferrer'
+    };
+    notification.supportingAction = {
+        text: 'Download',
+        href: '/path/to/file.pdf',
+        download: 'release-notes.pdf'
+    };
+</script>
+```
+
+**For Native JS Applications, Vue, Angular, Svelte etc.:**
+
+```html
+<!-- Vue templates (using Nuxt 3) -->
+<pie-notification
+    heading="Update Available"
+    :leading-action="{
+        text: 'Learn More',
+        href: 'https://example.com',
+        target: '_blank',
+        rel: 'noopener noreferrer'
+    }"
+    :supporting-action="{
+        text: 'Download',
+        href: '/path/to/file.pdf',
+        download: 'release-notes.pdf'
+    }">
+    A new version is available with exciting features.
+</pie-notification>
+```
+
+**For React Applications:**
+
+```jsx
+import { PieNotification } from '@justeattakeaway/pie-webc/react/notification.js';
+
+<PieNotification
+    heading="Update Available"
+    leadingAction={{
+        text: 'Learn More',
+        href: 'https://example.com',
+        target: '_blank',
+        rel: 'noopener noreferrer'
+    }}
+    supportingAction={{
+        text: 'Download',
+        href: '/path/to/file.pdf',
+        download: 'release-notes.pdf'
+    }}>
+    A new version is available with exciting features.
+</PieNotification>
+```
+
 ## Questions and Support
 
 If you work at Just Eat Takeaway.com, please contact us on **#help-designsystem**. Otherwise, please raise an issue on [Github](https://github.com/justeattakeaway/pie/issues).

package/custom-elements.json

@@ -90,7 +90,7 @@
           "type": {
             "text": "ActionProps"
           },
-          "default": "{\r\n    text: '',\r\n    ariaLabel: '',\r\n    size: 'small-productive',\r\n}"
+          "default": "{\n    text: '',\n    ariaLabel: '',\n    size: 'small-productive',\n}"
         },
         {
           "kind": "variable",
@@ -98,7 +98,7 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\r\n    variant: 'neutral',\r\n    position: 'inline-content',\r\n    isDismissible: false,\r\n    isCompact: false,\r\n    headingLevel: 'h2',\r\n    hideIcon: false,\r\n    isOpen: true,\r\n    hasStackedActions: false,\r\n    leadingAction: defaultActionButtonProps,\r\n    supportingAction: defaultActionButtonProps,\r\n}"
+          "default": "{\n    variant: 'neutral',\n    position: 'inline-content',\n    isDismissible: false,\n    isCompact: false,\n    headingLevel: 'h2',\n    hideIcon: false,\n    isOpen: true,\n    hasStackedActions: false,\n    leadingAction: defaultActionButtonProps,\n    supportingAction: defaultActionButtonProps,\n}"
         }
       ],
       "exports": [
@@ -302,7 +302,7 @@
               "kind": "method",
               "name": "renderFooter",
               "privacy": "private",
-              "description": "Template for the footer area\r\nCalled within the main render function."
+              "description": "Template for the footer area\nCalled within the main render function."
             },
             {
               "kind": "method",
@@ -313,7 +313,7 @@
                   "text": "TemplateResult"
                 }
               },
-              "description": "Template for the header area\r\nCalled within the main render function."
+              "description": "Template for the header area\nCalled within the main render function."
             },
             {
               "kind": "method",
@@ -330,7 +330,7 @@
                   "text": "TemplateResult | typeof nothing"
                 }
               },
-              "description": "Template for the heading icon area.\r\nIt can return an icon provided externally via named slot or it can return a default icon according to the chosen variant if defined.\r\nCalled within the main render function."
+              "description": "Template for the heading icon area.\nIt can return an icon provided externally via named slot or it can return a default icon according to the chosen variant if defined.\nCalled within the main render function."
             },
             {
               "kind": "method",
@@ -341,13 +341,13 @@
                   "text": "TemplateResult"
                 }
               },
-              "description": "Template for the close button element. Called within the\r\nmain render function."
+              "description": "Template for the close button element. Called within the\nmain render function."
             },
             {
               "kind": "method",
               "name": "handleCloseButton",
               "privacy": "private",
-              "description": "It handles the action when user clicks in the close button.\r\nAlso triggers an event when is executed."
+              "description": "It handles the action when user clicks in the close button.\nAlso triggers an event when is executed."
             },
             {
               "kind": "method",
@@ -361,7 +361,7 @@
                   }
                 }
               ],
-              "description": "It handles the action button action.\r\nAlso triggers an event according to its `actionType`."
+              "description": "It handles the action button action.\nAlso triggers an event according to its `actionType`."
             },
             {
               "kind": "method",

package/dist/index.d.ts

@@ -18,6 +18,22 @@ export declare type ActionProps = {
      * The size of the button.
      */
     size?: typeof actionSizes[number];
+    /**
+     * The URL to navigate to when the action is clicked. When provided, the action renders as a link.
+     */
+    href?: string;
+    /**
+     * Where to display the linked URL when the action is a link.
+     */
+    target?: string;
+    /**
+     * The relationship between the current document and the linked URL.
+     */
+    rel?: string;
+    /**
+     * Causes the browser to download the linked URL. A string value specifies the filename.
+     */
+    download?: string;
 };
 
 export declare const actionSizes: readonly ["small-productive", "xsmall"];

package/dist/index.js

@@ -1,9 +1,9 @@
-import { LitElement as I, unsafeCSS as w, nothing as f } from "lit";
-import { classMap as $ } from "lit/directives/class-map.js";
+import { LitElement as A, unsafeCSS as I, nothing as s } from "lit";
+import { classMap as O } from "lit/directives/class-map.js";
 import { html as p, unsafeStatic as z } from "lit/static-html.js";
-import { validPropertyValues as O, safeCustomElement as _, dispatchCustomEvent as y } from "@justeattakeaway/pie-webc-core";
+import { validPropertyValues as N, safeCustomElement as _, dispatchCustomEvent as x } from "@justeattakeaway/pie-webc-core";
 import { property as r, queryAssignedElements as S } from "lit/decorators.js";
-import { ifDefined as g } from "lit/directives/if-defined.js";
+import { ifDefined as u } from "lit/directives/if-defined.js";
 import "@justeattakeaway/pie-button";
 import "@justeattakeaway/pie-icon-button";
 import "@justeattakeaway/pie-icons-webc/dist/IconAlertCircle.js";
@@ -11,18 +11,18 @@ import "@justeattakeaway/pie-icons-webc/dist/IconAlertTriangle.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconCheckCircle.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconInfoCircle.js";
-const b = class b extends I {
+const y = class y extends A {
   willUpdate() {
-    this.getAttribute("v") || this.setAttribute("v", b.v);
+    this.getAttribute("v") || this.setAttribute("v", y.v);
   }
 };
-b.v = "0.20.3";
-let k = b;
-const E = ["neutral", "neutral-alternative", "info", "success", "warning", "error", "translucent"], T = ["h2", "h3", "h4", "h5", "h6"], B = ["inline-content", "full-width"], L = ["small-productive", "xsmall"], t = "pie-notification", s = "c-notification", D = `${t}-close`, V = `${t}-open`, P = `${t}-leading-action-click`, F = `${t}-supporting-action-click`, v = {
+y.v = "0.21.0";
+let C = y;
+const E = ["neutral", "neutral-alternative", "info", "success", "warning", "error", "translucent"], L = ["h2", "h3", "h4", "h5", "h6"], T = ["inline-content", "full-width"], B = ["small-productive", "xsmall"], t = "pie-notification", l = "c-notification", D = `${t}-close`, V = `${t}-open`, P = `${t}-leading-action-click`, F = `${t}-supporting-action-click`, $ = {
   text: "",
   ariaLabel: "",
   size: "small-productive"
-}, l = {
+}, d = {
   variant: "neutral",
   position: "inline-content",
   isDismissible: !1,
@@ -31,24 +31,24 @@ const E = ["neutral", "neutral-alternative", "info", "success", "warning", "erro
   hideIcon: !1,
   isOpen: !0,
   hasStackedActions: !1,
-  leadingAction: v,
-  supportingAction: v
-}, j = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-notification{--notification-border-radius: var(--dt-radius-rounded-c);--notification-background-color: var(--dt-color-container-subtle);--notification-direction: column;--notification-heading-font-size: calc(var(--dt-font-heading-s-size--narrow) * 1px);--notification-heading-line-height: calc(var(--dt-font-heading-s-line-height--narrow) * 1px);--notification-font-size: calc(var(--dt-font-body-l-size) * 1px);--notification-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--notification-close-icon-offset: var(--dt-spacing-b);--notification-icon-fill: var(--dt-color-content-inverse);--notification-icon-background-color: var(--dt-color-container-inverse);--icon-size-override: 24px;padding:var(--dt-spacing-d);border-radius:var(--notification-border-radius);background-color:var(--notification-background-color);position:relative;display:flex;flex-direction:var(--notification-direction);gap:var(--dt-spacing-d);font-size:var(--notification-font-size);line-height:var(--notification-line-height);color:var(--dt-color-content-default)}.c-notification.c-notification--compact{--notification-direction: row}.c-notification.c-notification--full-width{--notification-border-radius: var(--dt-radius-rounded-none)}.c-notification.c-notification--neutral-alternative{--notification-background-color: var(--dt-color-container-default)}.c-notification.c-notification--info{--notification-background-color: var(--dt-color-support-info-tonal);--notification-icon-background-color: var(--dt-color-support-info)}.c-notification.c-notification--success{--notification-background-color: var(--dt-color-support-positive-tonal);--notification-icon-background-color: var(--dt-color-support-positive)}.c-notification.c-notification--warning{--notification-background-color: var(--dt-color-support-warning-tonal);--notification-icon-background-color: var(--dt-color-support-warning);--notification-icon-fill: var(--dt-color-content-dark)}.c-notification.c-notification--error{--notification-background-color: var(--dt-color-support-error-tonal);--notification-icon-background-color: var(--dt-color-support-error);--notification-icon-fill: var(--dt-color-content-light)}.c-notification.c-notification--translucent{--notification-background-color: var(--dt-color-container-prominent);-webkit-backdrop-filter:blur(var(--dt-blur-prominent));backdrop-filter:blur(var(--dt-blur-prominent))}.c-notification-heading{margin:0;margin-block-end:var(--dt-spacing-a);font-size:var(--notification-heading-font-size);line-height:var(--notification-heading-line-height)}@media (min-width: 769px){.c-notification-heading{--notification-heading-font-size: calc(var(--dt-font-heading-s-size--wide) * 1px);--notification-heading-line-height: calc(var(--dt-font-heading-s-line-height--wide) * 1px)}}.c-notification-content-section{display:flex;flex-direction:row;align-items:center;gap:var(--dt-spacing-c)}.c-notification-content-section.c-notification-content-section--dismissible{max-width:calc(100% - var(--notification-close-icon-offset) - 40px)}.c-notification-icon-close{position:absolute;inset-block-start:var(--notification-close-icon-offset);inset-inline-end:var(--notification-close-icon-offset)}.c-notification-footer{display:flex;flex-direction:row;justify-content:flex-end;gap:var(--dt-spacing-d)}.c-notification-footer.c-notification-footer--compact{align-self:center}@media (max-width: 767px){.c-notification-footer.c-notification-footer--stacked{flex-direction:column-reverse}}.icon,::slotted([slot=icon]){display:inline-flex;align-self:flex-start;background-color:var(--notification-icon-background-color);color:var(--notification-icon-fill);border-radius:var(--dt-radius-rounded-b);padding:var(--dt-spacing-a)}";
-var G = Object.defineProperty, H = Object.getOwnPropertyDescriptor, a = (i, o, n, d) => {
-  for (var e = d > 1 ? void 0 : d ? H(o, n) : o, u = i.length - 1, h; u >= 0; u--)
-    (h = i[u]) && (e = (d ? h(o, n, e) : h(e)) || e);
-  return d && e && G(o, n, e), e;
+  leadingAction: $,
+  supportingAction: $
+}, j = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-notification{--notification-border-radius: var(--dt-radius-rounded-c);--notification-background-color: var(--dt-color-container-subtle);--notification-direction: column;--notification-heading-font-size: calc(var(--dt-font-heading-s-size--narrow) * 1px);--notification-heading-line-height: calc(var(--dt-font-heading-s-line-height--narrow) * 1px);--notification-heading-font-weight: var(--dt-font-heading-s-weight);--notification-font-size: calc(var(--dt-font-body-l-size) * 1px);--notification-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--notification-font-weight: var(--dt-font-body-l-weight);--notification-close-icon-offset: var(--dt-spacing-b);--notification-icon-fill: var(--dt-color-content-inverse);--notification-icon-background-color: var(--dt-color-container-inverse);--icon-size-override: 24px;padding:var(--dt-spacing-d);border-radius:var(--notification-border-radius);background-color:var(--notification-background-color);position:relative;display:flex;flex-direction:var(--notification-direction);gap:var(--dt-spacing-d);font-size:var(--notification-font-size);line-height:var(--notification-line-height);font-weight:var(--notification-font-weight);color:var(--dt-color-content-default)}.c-notification.c-notification--compact{--notification-direction: row}.c-notification.c-notification--full-width{--notification-border-radius: var(--dt-radius-rounded-none)}.c-notification.c-notification--neutral-alternative{--notification-background-color: var(--dt-color-container-default)}.c-notification.c-notification--info{--notification-background-color: var(--dt-color-support-info-tonal);--notification-icon-background-color: var(--dt-color-support-info)}.c-notification.c-notification--success{--notification-background-color: var(--dt-color-support-positive-tonal);--notification-icon-background-color: var(--dt-color-support-positive)}.c-notification.c-notification--warning{--notification-background-color: var(--dt-color-support-warning-tonal);--notification-icon-background-color: var(--dt-color-support-warning);--notification-icon-fill: var(--dt-color-content-dark)}.c-notification.c-notification--error{--notification-background-color: var(--dt-color-support-error-tonal);--notification-icon-background-color: var(--dt-color-support-error);--notification-icon-fill: var(--dt-color-content-light)}.c-notification.c-notification--translucent{--notification-background-color: var(--dt-color-container-prominent);-webkit-backdrop-filter:blur(var(--dt-blur-prominent));backdrop-filter:blur(var(--dt-blur-prominent))}.c-notification-heading{margin:0;margin-block-end:var(--dt-spacing-a);font-size:var(--notification-heading-font-size);line-height:var(--notification-heading-line-height);font-weight:var(--notification-heading-font-weight)}@media (min-width: 769px){.c-notification-heading{--notification-heading-font-size: calc(var(--dt-font-heading-s-size--wide) * 1px);--notification-heading-line-height: calc(var(--dt-font-heading-s-line-height--wide) * 1px)}}.c-notification-content-section{display:flex;flex-direction:row;align-items:center;gap:var(--dt-spacing-c)}.c-notification-content-section.c-notification-content-section--dismissible{max-width:calc(100% - var(--notification-close-icon-offset) - 40px)}.c-notification-icon-close{position:absolute;inset-block-start:var(--notification-close-icon-offset);inset-inline-end:var(--notification-close-icon-offset)}.c-notification-footer{display:flex;flex-direction:row;justify-content:flex-end;gap:var(--dt-spacing-d)}.c-notification-footer.c-notification-footer--compact{align-self:center;margin-inline-start:auto}@media (max-width: 767px){.c-notification-footer.c-notification-footer--stacked{flex-direction:column-reverse}}.icon,::slotted([slot=icon]){display:inline-flex;align-self:flex-start;background-color:var(--notification-icon-background-color);color:var(--notification-icon-fill);border-radius:var(--dt-radius-rounded-b);padding:var(--dt-spacing-a)}";
+var G = Object.defineProperty, H = Object.getOwnPropertyDescriptor, c = (i, o, n, f) => {
+  for (var e = f > 1 ? void 0 : f ? H(o, n) : o, g = i.length - 1, h; g >= 0; g--)
+    (h = i[g]) && (e = (f ? h(o, n, e) : h(e)) || e);
+  return f && e && G(o, n, e), e;
 };
-let c = class extends k {
+let a = class extends C {
   constructor() {
-    super(...arguments), this.isOpen = l.isOpen, this.variant = l.variant, this.position = l.position, this.isDismissible = l.isDismissible, this.isCompact = l.isCompact, this.headingLevel = l.headingLevel, this.hideIcon = l.hideIcon, this.hasStackedActions = l.hasStackedActions;
+    super(...arguments), this.isOpen = d.isOpen, this.variant = d.variant, this.position = d.position, this.isDismissible = d.isDismissible, this.isCompact = d.isCompact, this.headingLevel = d.headingLevel, this.hideIcon = d.hideIcon, this.hasStackedActions = d.hasStackedActions;
   }
   /**
    * Lifecycle method executed when component is updated.
    * It dispatches an event if notification is opened.
    */
   updated(i) {
-    i.has("isOpen") && this.isOpen && y(this, V, { targetNotification: this });
+    i.has("isOpen") && this.isOpen && x(this, V, { targetNotification: this });
   }
   /**
    * Template for the footer area
@@ -61,18 +61,18 @@ let c = class extends k {
       leadingAction: i,
       supportingAction: o,
       isCompact: n,
-      hasStackedActions: d
+      hasStackedActions: f
     } = this, e = {
-      [`${s}-footer`]: !0,
-      [`${s}-footer--compact`]: n,
-      [`${s}-footer--stacked`]: d && !n
+      [`${l}-footer`]: !0,
+      [`${l}-footer--compact`]: n,
+      [`${l}-footer--stacked`]: f && !n
     };
     return p`
             <footer
-                class="${$(e)}"
+                class="${O(e)}"
                 data-test-id="${t}-footer">
-                    ${o ? this.renderActionButton(o, "supporting") : f}
-                    ${i ? this.renderActionButton(i, "leading") : f}
+                    ${o ? this.renderActionButton(o, "supporting") : s}
+                    ${i ? this.renderActionButton(i, "leading") : s}
             </footer>
         `;
   }
@@ -86,7 +86,7 @@ let c = class extends k {
     const { heading: i, headingLevel: o } = this, n = z(o);
     return p`<${n}
                         id="${t}-heading"
-                        class="${s}-heading"
+                        class="${l}-heading"
                         data-test-id="${t}-heading">
                             ${i}
                     </${n}>`;
@@ -107,7 +107,7 @@ let c = class extends k {
       case "error":
         return p`<icon-alert-circle class="icon" size="m" data-test-id="${t}-heading-icon-error"></icon-alert-circle>`;
       default:
-        return f;
+        return s;
     }
   }
   /**
@@ -132,10 +132,10 @@ let c = class extends k {
             <pie-icon-button
                 variant="ghost-secondary"
                 size="small"
-                class="${s}-icon-close"
+                class="${l}-icon-close"
                 data-test-id="${t}-icon-close"
                 @click="${this.handleCloseButton}"
-                aria-label="${g((i = this.aria) == null ? void 0 : i.close)}">
+                aria-label="${u((i = this.aria) == null ? void 0 : i.close)}">
                 <icon-close></icon-close>
             </pie-icon-button>`;
   }
@@ -146,7 +146,7 @@ let c = class extends k {
    * @private
    */
   handleCloseButton() {
-    this.isOpen = !1, y(this, D, { targetNotification: this });
+    this.isOpen = !1, x(this, D, { targetNotification: this });
   }
   /**
    * It handles the action button action.
@@ -157,7 +157,7 @@ let c = class extends k {
    * @private
    */
   handleActionClick(i) {
-    y(this, i === "leading" ? P : F, { targetNotification: this });
+    x(this, i === "leading" ? P : F, { targetNotification: this });
   }
   /**
    * Render the action button depending on action type and its action.
@@ -169,19 +169,32 @@ let c = class extends k {
    * @private
    */
   renderActionButton(i, o) {
-    const { text: n, ariaLabel: d, size: e = v.size } = i;
+    const {
+      text: n,
+      ariaLabel: f,
+      size: e = $.size,
+      href: g,
+      target: h,
+      rel: k,
+      download: v
+    } = i;
     if (!n)
-      return f;
-    const u = o === "leading" ? "primary" : "ghost", h = e && L.includes(e) ? e : v.size;
+      return s;
+    const b = o === "leading" ? "primary" : "ghost", w = e && B.includes(e) ? e : $.size, m = !!g;
     return p`
             <pie-button
-                variant="${u}"
-                size="${g(h)}"
-                aria-label="${g(d)}"
+                variant="${b}"
+                size="${u(w)}"
+                aria-label="${u(f)}"
                 @click="${() => this.handleActionClick(o)}"
                 data-test-id="${t}-${o}-action"
                 ?isFullWidth="${this.hasStackedActions}"
-                type="button">
+                tag="${m ? "a" : "button"}"
+                type="${m ? s : "button"}"
+                href="${u(g)}"
+                target="${u(h)}"
+                rel="${u(k)}"
+                download="${u(v)}">
                 ${n}
             </pie-button>
         `;
@@ -191,104 +204,104 @@ let c = class extends k {
       variant: i,
       position: o,
       heading: n,
-      isDismissible: d,
+      isDismissible: f,
       isCompact: e,
-      hideIcon: u,
+      hideIcon: g,
       leadingAction: h,
-      isOpen: C,
-      aria: m
+      isOpen: k,
+      aria: v
     } = this;
-    if (!C)
-      return f;
-    const x = d && !e, N = {
-      [s]: !0,
-      [`${s}--${i}`]: !0,
-      [`${s}--${o}`]: !0,
-      [`${s}--compact`]: e
-    }, A = {
-      [`${s}-content-section`]: !0,
-      [`${s}-content-section--dismissible`]: x
+    if (!k)
+      return s;
+    const b = f && !e, w = {
+      [l]: !0,
+      [`${l}--${i}`]: !0,
+      [`${l}--${o}`]: !0,
+      [`${l}--compact`]: e
+    }, m = {
+      [`${l}-content-section`]: !0,
+      [`${l}-content-section--dismissible`]: b
     };
     return p`
             <div
                 data-test-id="${t}"
-                class="${$(N)}"
+                class="${O(w)}"
                 role="region"
                 aria-live="${i === "error" ? "assertive" : "polite"}"
-                aria-labelledby="${n ? `${t}-heading` : f}"
-                aria-label="${!n && g(m == null ? void 0 : m.label)}">
-                ${x ? this.renderCloseButton() : f}
+                aria-labelledby="${n ? `${t}-heading` : s}"
+                aria-label="${!n && u(v == null ? void 0 : v.label)}">
+                ${b ? this.renderCloseButton() : s}
 
-                <section class="${$(A)}">
-                    ${u ? f : this.renderIcon()}
+                <section class="${O(m)}">
+                    ${g ? s : this.renderIcon()}
                     <article>
-                        ${n ? this.renderNotificationHeading() : f}
+                        ${n ? this.renderNotificationHeading() : s}
                         <slot></slot>
                     </article>
                 </section>
 
-                ${h != null && h.text ? this.renderFooter() : f}
+                ${h != null && h.text ? this.renderFooter() : s}
             </div>`;
   }
 };
-c.styles = w(j);
-a([
+a.styles = I(j);
+c([
   r({ type: Boolean })
-], c.prototype, "isOpen", 2);
-a([
+], a.prototype, "isOpen", 2);
+c([
   r({ type: String }),
-  O(t, E, l.variant)
-], c.prototype, "variant", 2);
-a([
+  N(t, E, d.variant)
+], a.prototype, "variant", 2);
+c([
   r({ type: String }),
-  O(t, B, l.position)
-], c.prototype, "position", 2);
-a([
+  N(t, T, d.position)
+], a.prototype, "position", 2);
+c([
   r({ type: Boolean })
-], c.prototype, "isDismissible", 2);
-a([
+], a.prototype, "isDismissible", 2);
+c([
   r({ type: Boolean })
-], c.prototype, "isCompact", 2);
-a([
+], a.prototype, "isCompact", 2);
+c([
   r({ type: String })
-], c.prototype, "heading", 2);
-a([
+], a.prototype, "heading", 2);
+c([
   r({ type: String }),
-  O(t, T, l.headingLevel)
-], c.prototype, "headingLevel", 2);
-a([
+  N(t, L, d.headingLevel)
+], a.prototype, "headingLevel", 2);
+c([
   r({ type: Boolean })
-], c.prototype, "hideIcon", 2);
-a([
+], a.prototype, "hideIcon", 2);
+c([
   r({ type: Object })
-], c.prototype, "leadingAction", 2);
-a([
+], a.prototype, "leadingAction", 2);
+c([
   r({ type: Object })
-], c.prototype, "supportingAction", 2);
-a([
+], a.prototype, "supportingAction", 2);
+c([
   r({ type: Boolean })
-], c.prototype, "hasStackedActions", 2);
-a([
+], a.prototype, "hasStackedActions", 2);
+c([
   r({ type: Object })
-], c.prototype, "aria", 2);
-a([
+], a.prototype, "aria", 2);
+c([
   S({ slot: "icon" })
-], c.prototype, "_iconSlot", 2);
-c = a([
+], a.prototype, "_iconSlot", 2);
+a = c([
   _("pie-notification")
-], c);
+], a);
 export {
   D as ON_NOTIFICATION_CLOSE_EVENT,
   P as ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT,
   V as ON_NOTIFICATION_OPEN_EVENT,
   F as ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT,
-  c as PieNotification,
-  L as actionSizes,
-  s as componentClass,
+  a as PieNotification,
+  B as actionSizes,
+  l as componentClass,
   t as componentSelector,
-  v as defaultActionButtonProps,
-  l as defaultProps,
-  T as headingLevels,
-  B as positions,
+  $ as defaultActionButtonProps,
+  d as defaultProps,
+  L as headingLevels,
+  T as positions,
   E as variants
 };

package/dist/react.d.ts

@@ -19,6 +19,22 @@ export declare type ActionProps = {
      * The size of the button.
      */
     size?: typeof actionSizes[number];
+    /**
+     * The URL to navigate to when the action is clicked. When provided, the action renders as a link.
+     */
+    href?: string;
+    /**
+     * Where to display the linked URL when the action is a link.
+     */
+    target?: string;
+    /**
+     * The relationship between the current document and the linked URL.
+     */
+    rel?: string;
+    /**
+     * Causes the browser to download the linked URL. A string value specifies the filename.
+     */
+    download?: string;
 };
 
 export declare const actionSizes: readonly ["small-productive", "xsmall"];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-notification",
   "description": "PIE Design System Notification built using Web Components",
-  "version": "0.20.3",
+  "version": "0.21.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -51,8 +51,8 @@
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-icon-button": "2.3.3",
-    "@justeattakeaway/pie-icons-webc": "1.17.1",
+    "@justeattakeaway/pie-icon-button": "2.3.4",
+    "@justeattakeaway/pie-icons-webc": "1.18.0",
     "@justeattakeaway/pie-webc-core": "5.0.0"
   },
   "volta": {

package/src/defs.ts

@@ -25,6 +25,26 @@ export type ActionProps = {
    * The size of the button.
    */
   size?: typeof actionSizes[number];
+
+  /**
+   * The URL to navigate to when the action is clicked. When provided, the action renders as a link.
+   */
+  href?: string;
+
+  /**
+   * Where to display the linked URL when the action is a link.
+   */
+  target?: string;
+
+  /**
+   * The relationship between the current document and the linked URL.
+   */
+  rel?: string;
+
+  /**
+   * Causes the browser to download the linked URL. A string value specifies the filename.
+   */
+  download?: string;
 };
 
 export interface NotificationProps {

package/src/index.ts

@@ -232,7 +232,15 @@ export class PieNotification extends PieElement implements NotificationProps {
      * @private
      */
     private renderActionButton (action: ActionProps, actionType: 'leading' | 'supporting') : TemplateResult | typeof nothing {
-        const { text, ariaLabel, size = defaultActionButtonProps.size } = action;
+        const {
+            text,
+            ariaLabel,
+            size = defaultActionButtonProps.size,
+            href,
+            target,
+            rel,
+            download,
+        } = action;
 
         if (!text) {
             return nothing;
@@ -240,6 +248,7 @@ export class PieNotification extends PieElement implements NotificationProps {
 
         const buttonVariant = actionType === 'leading' ? 'primary' : 'ghost';
         const buttonSize = size && actionSizes.includes(size) ? size : defaultActionButtonProps.size;
+        const isLink = !!href;
 
         return html`
             <pie-button
@@ -249,7 +258,12 @@ export class PieNotification extends PieElement implements NotificationProps {
                 @click="${() => this.handleActionClick(actionType)}"
                 data-test-id="${componentSelector}-${actionType}-action"
                 ?isFullWidth="${this.hasStackedActions}"
-                type="button">
+                tag="${isLink ? 'a' : 'button'}"
+                type="${isLink ? nothing : 'button'}"
+                href="${ifDefined(href)}"
+                target="${ifDefined(target)}"
+                rel="${ifDefined(rel)}"
+                download="${ifDefined(download)}">
                 ${text}
             </pie-button>
         `;

package/src/notification.scss

@@ -11,8 +11,10 @@
     --notification-direction: column;
     --notification-heading-font-size: #{p.font-size(--dt-font-heading-s-size--narrow)};
     --notification-heading-line-height: #{p.line-height(--dt-font-heading-s-line-height--narrow)};
+    --notification-heading-font-weight: var(--dt-font-heading-s-weight);
     --notification-font-size: #{p.font-size(--dt-font-body-l-size)};
     --notification-line-height: #{p.line-height(--dt-font-body-l-line-height)};
+    --notification-font-weight: var(--dt-font-body-l-weight);
     --notification-close-icon-offset: var(--dt-spacing-b);
     --notification-icon-fill: var(--dt-color-content-inverse);
     --notification-icon-background-color: var(--dt-color-container-inverse);
@@ -27,6 +29,7 @@
     gap: var(--dt-spacing-d);
     font-size: var(--notification-font-size);
     line-height: var(--notification-line-height);
+    font-weight: var(--notification-font-weight);
     color: var(--dt-color-content-default);
 
     &.c-notification--compact {
@@ -76,6 +79,7 @@
         margin-block-end: var(--dt-spacing-a);
         font-size: var(--notification-heading-font-size);
         line-height: var(--notification-heading-line-height);
+        font-weight: var(--notification-heading-font-weight);
 
         @include media('>md') {
             --notification-heading-font-size: #{p.font-size(--dt-font-heading-s-size--wide)};
@@ -108,6 +112,7 @@
 
         &.c-notification-footer--compact {
             align-self: center;
+            margin-inline-start: auto;
         }
 
         @include media('<md') {