@justeattakeaway/pie-notification 0.6.0 → 0.7.0

package/custom-elements.json

@@ -75,6 +75,14 @@
           "name": "ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT",
           "default": "`${componentSelector}-supporting-action-click`",
           "description": "Event name for when the notification supporting action is clicked."
+        },
+        {
+          "kind": "variable",
+          "name": "defaultProps",
+          "type": {
+            "text": "DefaultProps"
+          },
+          "default": "{\n    isOpen: true,\n    variant: 'neutral',\n    position: 'inline-content',\n    isDismissible: true,\n    isCompact: false,\n    headingLevel: 'h2',\n    hideIcon: false,\n    hasStackedActions: false,\n}"
         }
       ],
       "exports": [
@@ -149,6 +157,14 @@
             "name": "ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT",
             "module": "src/defs.js"
           }
+        },
+        {
+          "kind": "js",
+          "name": "defaultProps",
+          "declaration": {
+            "name": "defaultProps",
+            "module": "src/defs.js"
+          }
         }
       ]
     },
@@ -164,11 +180,7 @@
             {
               "kind": "field",
               "name": "isOpen",
-              "type": {
-                "text": "boolean"
-              },
               "privacy": "public",
-              "default": "true",
               "attribute": "isOpen"
             },
             {
@@ -178,7 +190,6 @@
                 "text": "NonNullable<NotificationProps['variant']>"
               },
               "privacy": "public",
-              "default": "'neutral'",
               "attribute": "variant"
             },
             {
@@ -188,27 +199,18 @@
                 "text": "NonNullable<NotificationProps['position']>"
               },
               "privacy": "public",
-              "default": "'inline-content'",
               "attribute": "position"
             },
             {
               "kind": "field",
               "name": "isDismissible",
-              "type": {
-                "text": "boolean"
-              },
               "privacy": "public",
-              "default": "true",
               "attribute": "isDismissible"
             },
             {
               "kind": "field",
               "name": "isCompact",
-              "type": {
-                "text": "boolean"
-              },
               "privacy": "public",
-              "default": "false",
               "attribute": "isCompact"
             },
             {
@@ -227,17 +229,12 @@
                 "text": "NonNullable<NotificationProps['headingLevel']>"
               },
               "privacy": "public",
-              "default": "'h2'",
               "attribute": "headingLevel"
             },
             {
               "kind": "field",
               "name": "hideIcon",
-              "type": {
-                "text": "boolean"
-              },
               "privacy": "public",
-              "default": "false",
               "attribute": "hideIcon"
             },
             {
@@ -261,12 +258,17 @@
             {
               "kind": "field",
               "name": "hasStackedActions",
+              "privacy": "public",
+              "attribute": "hasStackedActions"
+            },
+            {
+              "kind": "field",
+              "name": "aria",
               "type": {
-                "text": "boolean"
+                "text": "NotificationProps['aria']"
               },
               "privacy": "public",
-              "default": "false",
-              "attribute": "hasStackedActions"
+              "attribute": "aria"
             },
             {
               "kind": "field",
@@ -516,10 +518,6 @@
           "attributes": [
             {
               "name": "isOpen",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true",
               "fieldName": "isOpen"
             },
             {
@@ -527,7 +525,6 @@
               "type": {
                 "text": "NonNullable<NotificationProps['variant']>"
               },
-              "default": "'neutral'",
               "fieldName": "variant"
             },
             {
@@ -535,23 +532,14 @@
               "type": {
                 "text": "NonNullable<NotificationProps['position']>"
               },
-              "default": "'inline-content'",
               "fieldName": "position"
             },
             {
               "name": "isDismissible",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true",
               "fieldName": "isDismissible"
             },
             {
               "name": "isCompact",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
               "fieldName": "isCompact"
             },
             {
@@ -566,15 +554,10 @@
               "type": {
                 "text": "NonNullable<NotificationProps['headingLevel']>"
               },
-              "default": "'h2'",
               "fieldName": "headingLevel"
             },
             {
               "name": "hideIcon",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
               "fieldName": "hideIcon"
             },
             {
@@ -593,11 +576,14 @@
             },
             {
               "name": "hasStackedActions",
+              "fieldName": "hasStackedActions"
+            },
+            {
+              "name": "aria",
               "type": {
-                "text": "boolean"
+                "text": "NotificationProps['aria']"
               },
-              "default": "false",
-              "fieldName": "hasStackedActions"
+              "fieldName": "aria"
             }
           ],
           "superclass": {

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 type { nothing } from 'lit';
@@ -15,10 +16,19 @@ export declare type ActionProps = {
     ariaLabel?: string;
 };
 
+export declare type AriaProps = {
+    close?: string;
+    label?: string;
+};
+
 export declare const componentClass = "c-notification";
 
 export declare const componentSelector = "pie-notification";
 
+export declare type DefaultProps = ComponentDefaultPropsGeneric<NotificationProps, 'isOpen' | 'variant' | 'position' | 'isDismissible' | 'isCompact' | 'headingLevel' | 'hideIcon' | 'hasStackedActions'>;
+
+export declare const defaultProps: DefaultProps;
+
 export declare const headingLevels: readonly ["h2", "h3", "h4", "h5", "h6"];
 
 export declare interface NotificationProps {
@@ -66,6 +76,11 @@ export declare interface NotificationProps {
      * When true, the notification will stack the action buttons on narrow screens.
      */
     hasStackedActions?: boolean;
+    /**
+     * 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
+     */
+    aria?: AriaProps;
 }
 
 /**
@@ -115,6 +130,7 @@ export declare class PieNotification extends LitElement implements NotificationP
     leadingAction: NotificationProps['leadingAction'];
     supportingAction: NotificationProps['supportingAction'];
     hasStackedActions: boolean;
+    aria: NotificationProps['aria'];
     _iconSlot: Array<HTMLElement>;
     protected _hasExternalIcon: boolean;
     protected _hasIconClass: boolean;

package/dist/index.js

@@ -1,7 +1,8 @@
-import { unsafeCSS as N, LitElement as x, nothing as c } from "lit";
-import { html as l, unsafeStatic as O } from "lit/static-html.js";
-import { validPropertyValues as g, defineCustomElement as E, dispatchCustomEvent as u } from "@justeattakeaway/pie-webc-core";
-import { property as s, queryAssignedElements as w, state as $ } from "lit/decorators.js";
+import { unsafeCSS as E, LitElement as k, nothing as c } from "lit";
+import { html as d, unsafeStatic as w } from "lit/static-html.js";
+import { validPropertyValues as m, defineCustomElement as A, dispatchCustomEvent as v } from "@justeattakeaway/pie-webc-core";
+import { property as r, queryAssignedElements as z, state as C } from "lit/decorators.js";
+import { ifDefined as I } from "lit/directives/if-defined.js";
 import "@justeattakeaway/pie-button";
 import "@justeattakeaway/pie-icon-button";
 import "@justeattakeaway/pie-icons-webc/dist/IconAlertCircle.js";
@@ -9,16 +10,25 @@ 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 k = ["neutral", "neutral-alternative", "info", "success", "warning", "error"], A = ["h2", "h3", "h4", "h5", "h6"], z = ["inline-content", "full-width"], o = "pie-notification", h = "c-notification", S = `${o}-close`, V = `${o}-open`, T = `${o}-leading-action-click`, B = `${o}-supporting-action-click`, D = `*,*:after,*:before{box-sizing:inherit}.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-icon-fill: var(--dt-color-content-default);--notification-close-icon-offset: var(--dt-spacing-b);--notification-heading-icon-offset: 2px;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)}.c-notification[isCompact]{--notification-direction: row}.c-notification[position=full-width]{--notification-border-radius: var(--dt-radius-rounded-none)}.c-notification[variant=neutral-alternative]{--notification-background-color: var(--dt-color-container-default)}.c-notification[variant=info]{--notification-background-color: var(--dt-color-support-info-02);--notification-icon-fill: var(--dt-color-blue)}.c-notification[variant=success]{--notification-background-color: var(--dt-color-support-positive-02)}.c-notification[variant=warning]{--notification-background-color: var(--dt-color-support-warning-02)}.c-notification[variant=error]{--notification-background-color: var(--dt-color-support-error-02);--notification-icon-fill: var(--dt-color-red)}.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: 768px){.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}.c-notification-content-section .has-icon{display:block ruby;margin-inline-end:var(--dt-spacing-c)}.c-notification-content-section[isDismissible]{max-width:calc(100% - var(--notification-close-icon-offset) - 40px)}.c-notification-heading-icon{padding-block-start:var(--notification-heading-icon-offset);color:var(--notification-icon-fill)}.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[isCompact]{align-self:flex-end}@media (max-width: 768px){.c-notification-footer[isStacked]{flex-direction:column-reverse}}
+const S = ["neutral", "neutral-alternative", "info", "success", "warning", "error"], D = ["h2", "h3", "h4", "h5", "h6"], V = ["inline-content", "full-width"], t = "pie-notification", h = "c-notification", T = `${t}-close`, B = `${t}-open`, L = `${t}-leading-action-click`, P = `${t}-supporting-action-click`, l = {
+  isOpen: !0,
+  variant: "neutral",
+  position: "inline-content",
+  isDismissible: !0,
+  isCompact: !1,
+  headingLevel: "h2",
+  hideIcon: !1,
+  hasStackedActions: !1
+}, F = `*,*:after,*:before{box-sizing:inherit}.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-icon-fill: var(--dt-color-content-default);--notification-close-icon-offset: var(--dt-spacing-b);--notification-heading-icon-offset: 2px;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)}.c-notification[isCompact]{--notification-direction: row}.c-notification[position=full-width]{--notification-border-radius: var(--dt-radius-rounded-none)}.c-notification[variant=neutral-alternative]{--notification-background-color: var(--dt-color-container-default)}.c-notification[variant=info]{--notification-background-color: var(--dt-color-support-info-02);--notification-icon-fill: var(--dt-color-blue)}.c-notification[variant=success]{--notification-background-color: var(--dt-color-support-positive-02)}.c-notification[variant=warning]{--notification-background-color: var(--dt-color-support-warning-02)}.c-notification[variant=error]{--notification-background-color: var(--dt-color-support-error-02);--notification-icon-fill: var(--dt-color-red)}.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: 768px){.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}.c-notification-content-section .has-icon{display:block ruby;margin-inline-end:var(--dt-spacing-c)}.c-notification-content-section[isDismissible]{max-width:calc(100% - var(--notification-close-icon-offset) - 40px)}.c-notification-heading-icon{padding-block-start:var(--notification-heading-icon-offset);color:var(--notification-icon-fill)}.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[isCompact]{align-self:flex-end}@media (max-width: 768px){.c-notification-footer[isStacked]{flex-direction:column-reverse}}
 `;
-var P = Object.defineProperty, L = Object.getOwnPropertyDescriptor, e = (p, i, t, a) => {
-  for (var r = a > 1 ? void 0 : a ? L(i, t) : i, d = p.length - 1, f; d >= 0; d--)
-    (f = p[d]) && (r = (a ? f(i, t, r) : f(r)) || r);
-  return a && r && P(i, t, r), r;
+var j = Object.defineProperty, H = Object.getOwnPropertyDescriptor, e = (u, i, o, a) => {
+  for (var s = a > 1 ? void 0 : a ? H(i, o) : i, f = u.length - 1, p; f >= 0; f--)
+    (p = u[f]) && (s = (a ? p(i, o, s) : p(s)) || s);
+  return a && s && j(i, o, s), s;
 };
-class n extends x {
+class n extends k {
   constructor() {
-    super(...arguments), this.isOpen = !0, this.variant = "neutral", this.position = "inline-content", this.isDismissible = !0, this.isCompact = !1, this.headingLevel = "h2", this.hideIcon = !1, this.hasStackedActions = !1, this._hasExternalIcon = !1, this._hasIconClass = !1;
+    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, this._hasExternalIcon = !1, this._hasIconClass = !1;
   }
   /**
    * Lifecycle method executed when component is about to update.
@@ -33,7 +43,7 @@ class n extends x {
    * It applies a gutter if there's no heading content in order to avoid the close button overlap the content.
    */
   updated(i) {
-    i.has("isOpen") && this.isOpen && u(this, V, { targetNotification: this });
+    i.has("isOpen") && this.isOpen && v(this, B, { targetNotification: this });
   }
   /**
    * Method responsible to check if an external icon has been provided.
@@ -50,10 +60,10 @@ class n extends x {
    *
    * @private
    */
-  renderFooter(i, t) {
-    return l`
-            <footer class="${h}-footer" data-test-id="${o}-footer" ?isCompact="${this.isCompact}" ?isStacked="${this.hasStackedActions && !this.isCompact}">
-                ${t ? this.renderActionButton(t, "supporting") : c}
+  renderFooter(i, o) {
+    return d`
+            <footer class="${h}-footer" data-test-id="${t}-footer" ?isCompact="${this.isCompact}" ?isStacked="${this.hasStackedActions && !this.isCompact}">
+                ${o ? this.renderActionButton(o, "supporting") : c}
                 ${i ? this.renderActionButton(i, "leading") : c}
             </footer>
         `;
@@ -67,8 +77,13 @@ class n extends x {
    *
    * @private
    */
-  renderNotificationHeading(i, t) {
-    return l`<${t} class="${h}-heading" data-test-id="${o}-heading">${i}</${t}>`;
+  renderNotificationHeading(i, o) {
+    return d`<${o}
+                        id="${t}-heading"
+                        class="${h}-heading"
+                        data-test-id="${t}-heading">
+                            ${i}
+                    </${o}>`;
   }
   /**
    * Util method that returns a boolean if variant has a default icon.
@@ -90,13 +105,13 @@ class n extends x {
   getDefaultVariantIcon(i) {
     switch (i) {
       case "info":
-        return l`<icon-info-circle size="m" data-test-id="${o}-heading-icon-info"></icon-info-circle>`;
+        return d`<icon-info-circle size="m" data-test-id="${t}-heading-icon-info"></icon-info-circle>`;
       case "success":
-        return l`<icon-check-circle size="m" data-test-id="${o}-heading-icon-success"></icon-check-circle>`;
+        return d`<icon-check-circle size="m" data-test-id="${t}-heading-icon-success"></icon-check-circle>`;
       case "warning":
-        return l`<icon-alert-triangle size="m" data-test-id="${o}-heading-icon-warning"></icon-alert-triangle>`;
+        return d`<icon-alert-triangle size="m" data-test-id="${t}-heading-icon-warning"></icon-alert-triangle>`;
       case "error":
-        return l`<icon-alert-circle size="m" data-test-id="${o}-heading-icon-error"></icon-alert-circle>`;
+        return d`<icon-alert-circle size="m" data-test-id="${t}-heading-icon-error"></icon-alert-circle>`;
       default:
         return c;
     }
@@ -122,10 +137,10 @@ class n extends x {
    *
    * @private
    */
-  renderIcon(i, t, a) {
-    return l`
-            <div data-test-id="${o}-icon-area" class="${a ? "has-icon " : ""}${h}-heading-icon">
-                ${t ? c : this.renderIconVariant(i)}
+  renderIcon(i, o, a) {
+    return d`
+            <div data-test-id="${t}-icon-area" class="${a ? "has-icon " : ""}${h}-heading-icon">
+                ${o ? c : this.renderIconVariant(i)}
                 <slot name="icon"></slot>
             </div>
         `;
@@ -137,13 +152,15 @@ class n extends x {
    * @private
    */
   renderCloseButton() {
-    return l`
+    var i;
+    return d`
             <pie-icon-button
                 variant="ghost-secondary"
                 size="small"
                 class="${h}-icon-close"
-                data-test-id="${o}-icon-close"
+                data-test-id="${t}-icon-close"
                 @click="${this.handleCloseButton}"
+                aria-label="${I((i = this.aria) == null ? void 0 : i.close)}"
                 >
                 <icon-close></icon-close>
             </pie-icon-button>`;
@@ -155,7 +172,7 @@ class n extends x {
    * @private
    */
   handleCloseButton() {
-    this.closeNotificationComponent(), u(this, S, { targetNotification: this });
+    this.closeNotificationComponent(), v(this, T, { targetNotification: this });
   }
   /**
    * Util method responsible to close the component.
@@ -174,7 +191,7 @@ class n extends x {
    * @private
    */
   handleActionClick(i) {
-    u(this, i === "leading" ? T : B, { targetNotification: this });
+    v(this, i === "leading" ? L : P, { targetNotification: this });
   }
   /**
    * Render the action button depending on action type and its action.
@@ -185,15 +202,15 @@ class n extends x {
    * @returns {TemplateResult | typeof nothing} - The rendered action button or nothing if the action text is not defined.
    * @private
    */
-  renderActionButton(i, t) {
-    const { text: a, ariaLabel: r } = i;
-    return a ? l`
+  renderActionButton(i, o) {
+    const { text: a, ariaLabel: s } = i;
+    return a ? d`
             <pie-button
-                variant="${t === "leading" ? "primary" : "ghost"}"
+                variant="${o === "leading" ? "primary" : "ghost"}"
                 size="small-productive"
-                aria-label="${r || c}"
-                @click="${() => this.handleActionClick(t)}"
-                data-test-id="${o}-${t}-action"
+                aria-label="${s || c}"
+                @click="${() => this.handleActionClick(o)}"
+                data-test-id="${t}-${o}-action"
                 ?isFullWidth="${this.hasStackedActions}"
                 type="button">
                 ${a}
@@ -203,98 +220,107 @@ class n extends x {
   render() {
     const {
       variant: i,
-      position: t,
+      position: o,
       heading: a,
-      headingLevel: r,
-      isDismissible: d,
-      isCompact: f,
-      _hasExternalIcon: b,
-      hideIcon: I,
-      _hasIconClass: C,
-      leadingAction: v,
-      supportingAction: y,
-      isOpen: _
+      headingLevel: s,
+      isDismissible: f,
+      isCompact: p,
+      _hasExternalIcon: y,
+      hideIcon: _,
+      _hasIconClass: O,
+      leadingAction: b,
+      supportingAction: N,
+      isOpen: x,
+      aria: g
     } = this;
-    if (!_)
+    if (!x)
       return c;
-    const m = d && !f;
-    return l`
-            <div 
-                data-test-id="${o}" 
-                class="${h}" 
-                variant="${i}" 
-                position="${t}"
-                ?isCompact="${f}">
-                ${m ? this.renderCloseButton() : c}
+    const $ = f && !p;
+    return d`
+            <div
+                data-test-id="${t}"
+                class="${h}"
+                variant="${i}"
+                position="${o}"
+                ?isCompact="${p}"
+                role="region"
+                aria-live="${i === "error" ? "assertive" : "polite"}"
+                aria-labelledby="${a ? `${t}-heading` : c}"
+                aria-label="${!a && I(g == null ? void 0 : g.label)}">
+                ${$ ? this.renderCloseButton() : c}
 
-                <section class="${h}-content-section" ?isDismissible="${m}">
-                    ${I ? c : this.renderIcon(i, b, C)}
+                <section class="${h}-content-section" ?isDismissible="${$}">
+                    ${_ ? c : this.renderIcon(i, y, O)}
                     <article>
-                        ${a ? this.renderNotificationHeading(a, O(r)) : c}
+                        ${a ? this.renderNotificationHeading(a, w(s)) : c}
                         <slot></slot>
                     </article>
                 </section>
 
-                ${v ? this.renderFooter(v, y) : c}
+                ${b ? this.renderFooter(b, N) : c}
             </div>`;
   }
 }
-n.styles = N(D);
+n.styles = E(F);
 e([
-  s({ type: Boolean })
+  r({ type: Boolean })
 ], n.prototype, "isOpen", 2);
 e([
-  s(),
-  g(o, k, "neutral")
+  r(),
+  m(t, S, l.variant)
 ], n.prototype, "variant", 2);
 e([
-  s(),
-  g(o, z, "inline-content")
+  r(),
+  m(t, V, l.position)
 ], n.prototype, "position", 2);
 e([
-  s({ type: Boolean })
+  r({ type: Boolean })
 ], n.prototype, "isDismissible", 2);
 e([
-  s({ type: Boolean })
+  r({ type: Boolean })
 ], n.prototype, "isCompact", 2);
 e([
-  s({ type: String })
+  r({ type: String })
 ], n.prototype, "heading", 2);
 e([
-  s(),
-  g(o, A, "h2")
+  r(),
+  m(t, D, l.headingLevel)
 ], n.prototype, "headingLevel", 2);
 e([
-  s({ type: Boolean })
+  r({ type: Boolean })
 ], n.prototype, "hideIcon", 2);
 e([
-  s({ type: Object })
+  r({ type: Object })
 ], n.prototype, "leadingAction", 2);
 e([
-  s({ type: Object })
+  r({ type: Object })
 ], n.prototype, "supportingAction", 2);
 e([
-  s({ type: Boolean })
+  r({ type: Boolean })
 ], n.prototype, "hasStackedActions", 2);
 e([
-  w({ slot: "icon" })
+  r({ type: Object })
+], n.prototype, "aria", 2);
+e([
+  z({ slot: "icon" })
 ], n.prototype, "_iconSlot", 2);
 e([
-  $()
+  C()
 ], n.prototype, "_hasExternalIcon", 2);
 e([
-  $()
+  C()
 ], n.prototype, "_hasIconClass", 2);
-E(o, n);
+A(t, n);
 export {
-  S as ON_NOTIFICATION_CLOSE_EVENT,
-  T as ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT,
-  V as ON_NOTIFICATION_OPEN_EVENT,
-  B as ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT,
+  T as ON_NOTIFICATION_CLOSE_EVENT,
+  L as ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT,
+  B as ON_NOTIFICATION_OPEN_EVENT,
+  P as ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT,
   n as PieNotification,
   h as componentClass,
-  o as componentSelector,
-  A as headingLevels,
-  z as positions,
-  k as variants
+  t as componentSelector,
+  l as defaultProps,
+  D as headingLevels,
+  V as positions,
+  S as variants
 };

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 type { nothing } from 'lit';
@@ -16,10 +17,19 @@ export declare type ActionProps = {
     ariaLabel?: string;
 };
 
+export declare type AriaProps = {
+    close?: string;
+    label?: string;
+};
+
 export declare const componentClass = "c-notification";
 
 export declare const componentSelector = "pie-notification";
 
+export declare type DefaultProps = ComponentDefaultPropsGeneric<NotificationProps, 'isOpen' | 'variant' | 'position' | 'isDismissible' | 'isCompact' | 'headingLevel' | 'hideIcon' | 'hasStackedActions'>;
+
+export declare const defaultProps: DefaultProps;
+
 export declare const headingLevels: readonly ["h2", "h3", "h4", "h5", "h6"];
 
 export declare interface NotificationProps {
@@ -67,6 +77,11 @@ export declare interface NotificationProps {
      * When true, the notification will stack the action buttons on narrow screens.
      */
     hasStackedActions?: boolean;
+    /**
+     * 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
+     */
+    aria?: AriaProps;
 }
 
 /**
@@ -118,6 +133,7 @@ declare class PieNotification_2 extends LitElement implements NotificationProps
     leadingAction: NotificationProps['leadingAction'];
     supportingAction: NotificationProps['supportingAction'];
     hasStackedActions: boolean;
+    aria: NotificationProps['aria'];
     _iconSlot: Array<HTMLElement>;
     protected _hasExternalIcon: boolean;
     protected _hasIconClass: boolean;

package/dist/react.js

@@ -1,11 +1,12 @@
 import * as i from "react";
 import { createComponent as o } from "@lit/react";
 import { PieNotification as t } from "./index.js";
-import { ON_NOTIFICATION_CLOSE_EVENT as E, ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT as A, ON_NOTIFICATION_OPEN_EVENT as g, ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT as L, componentClass as d, componentSelector as k, headingLevels as F, positions as S, variants as V } from "./index.js";
+import { ON_NOTIFICATION_CLOSE_EVENT as A, ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT as g, ON_NOTIFICATION_OPEN_EVENT as L, ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT as d, componentClass as k, componentSelector as F, defaultProps as S, headingLevels as V, positions as u, variants as v } from "./index.js";
 import "lit";
 import "lit/static-html.js";
 import "@justeattakeaway/pie-webc-core";
 import "lit/decorators.js";
+import "lit/directives/if-defined.js";
 import "@justeattakeaway/pie-button";
 import "@justeattakeaway/pie-icon-button";
 import "@justeattakeaway/pie-icons-webc/dist/IconAlertCircle.js";
@@ -28,16 +29,17 @@ const n = o({
     onPieNotificationOpen: "pie-notification-open"
     // When the notification is opened.
   }
-}), T = n;
+}), l = n;
 export {
-  E as ON_NOTIFICATION_CLOSE_EVENT,
-  A as ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT,
-  g as ON_NOTIFICATION_OPEN_EVENT,
-  L as ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT,
-  T as PieNotification,
-  d as componentClass,
-  k as componentSelector,
-  F as headingLevels,
-  S as positions,
-  V as variants
+  A as ON_NOTIFICATION_CLOSE_EVENT,
+  g as ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT,
+  L as ON_NOTIFICATION_OPEN_EVENT,
+  d as ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT,
+  l as PieNotification,
+  k as componentClass,
+  F as componentSelector,
+  S as defaultProps,
+  V as headingLevels,
+  u as positions,
+  v as variants
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-notification",
   "description": "PIE Design System Notification built using Web Components",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -41,9 +41,9 @@
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-icon-button": "0.28.5",
-    "@justeattakeaway/pie-icons-webc": "0.23.1",
-    "@justeattakeaway/pie-webc-core": "0.22.0"
+    "@justeattakeaway/pie-icon-button": "0.28.6",
+    "@justeattakeaway/pie-icons-webc": "0.24.0",
+    "@justeattakeaway/pie-webc-core": "0.23.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/defs.ts

@@ -1,7 +1,14 @@
+import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+
 export const variants = ['neutral', 'neutral-alternative', 'info', 'success', 'warning', 'error'] as const;
 export const headingLevels = ['h2', 'h3', 'h4', 'h5', 'h6'] as const;
 export const positions = ['inline-content', 'full-width'] as const;
 
+export type AriaProps = {
+  close?: string;
+  label?: string;
+};
+
 export type ActionProps = {
   /**
    * The text to display inside the button.
@@ -69,6 +76,12 @@ export interface NotificationProps {
    * When true, the notification will stack the action buttons on narrow screens.
    */
   hasStackedActions?: boolean;
+
+  /**
+    * 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
+    */
+  aria?: AriaProps;
 }
 
 export const componentSelector = 'pie-notification';
@@ -101,3 +114,16 @@ export const ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT = `${componentSelector}-
  * @constant
  */
 export const ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT = `${componentSelector}-supporting-action-click`;
+
+export type DefaultProps = ComponentDefaultPropsGeneric<NotificationProps, 'isOpen' | 'variant' | 'position' | 'isDismissible' | 'isCompact' | 'headingLevel' | 'hideIcon' | 'hasStackedActions'>;
+
+export const defaultProps: DefaultProps = {
+    isOpen: true,
+    variant: 'neutral',
+    position: 'inline-content',
+    isDismissible: true,
+    isCompact: false,
+    headingLevel: 'h2',
+    hideIcon: false,
+    hasStackedActions: false,
+};

package/src/index.ts

@@ -8,6 +8,7 @@ import {
 import { type StaticValue, html, unsafeStatic } from 'lit/static-html.js';
 import { defineCustomElement, validPropertyValues, dispatchCustomEvent } from '@justeattakeaway/pie-webc-core';
 import { property, queryAssignedElements, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import {
     type NotificationProps,
     type ActionProps,
@@ -20,6 +21,7 @@ import {
     ON_NOTIFICATION_OPEN_EVENT,
     ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT,
     ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT,
+    defaultProps,
 } from './defs';
 import styles from './notification.scss?inline';
 
@@ -43,31 +45,31 @@ export * from './defs';
  */
 export class PieNotification extends LitElement implements NotificationProps {
     @property({ type: Boolean })
-    public isOpen = true;
+    public isOpen = defaultProps.isOpen;
 
     @property()
-    @validPropertyValues(componentSelector, variants, 'neutral')
-    public variant: NonNullable<NotificationProps['variant']> = 'neutral';
+    @validPropertyValues(componentSelector, variants, defaultProps.variant)
+    public variant: NonNullable<NotificationProps['variant']> = defaultProps.variant;
 
     @property()
-    @validPropertyValues(componentSelector, positions, 'inline-content')
-    public position: NonNullable<NotificationProps['position']> = 'inline-content';
+    @validPropertyValues(componentSelector, positions, defaultProps.position)
+    public position: NonNullable<NotificationProps['position']> = defaultProps.position;
 
     @property({ type: Boolean })
-    public isDismissible = true;
+    public isDismissible = defaultProps.isDismissible;
 
     @property({ type: Boolean })
-    public isCompact = false;
+    public isCompact = defaultProps.isCompact;
 
     @property({ type: String })
     public heading!: string;
 
     @property()
-    @validPropertyValues(componentSelector, headingLevels, 'h2')
-    public headingLevel: NonNullable<NotificationProps['headingLevel']> = 'h2';
+    @validPropertyValues(componentSelector, headingLevels, defaultProps.headingLevel)
+    public headingLevel: NonNullable<NotificationProps['headingLevel']> = defaultProps.headingLevel;
 
     @property({ type: Boolean })
-    public hideIcon = false;
+    public hideIcon = defaultProps.hideIcon;
 
     @property({ type: Object })
     public leadingAction!: NotificationProps['leadingAction'];
@@ -76,7 +78,10 @@ export class PieNotification extends LitElement implements NotificationProps {
     public supportingAction!: NotificationProps['supportingAction'];
 
     @property({ type: Boolean })
-    public hasStackedActions = false;
+    public hasStackedActions = defaultProps.hasStackedActions;
+
+    @property({ type: Object })
+    public aria: NotificationProps['aria'];
 
     @queryAssignedElements({ slot: 'icon' }) _iconSlot!: Array<HTMLElement>;
 
@@ -146,7 +151,12 @@ export class PieNotification extends LitElement implements NotificationProps {
      * @private
      */
     private renderNotificationHeading (heading: NotificationProps['heading'], headingTag: StaticValue): TemplateResult {
-        return html`<${headingTag} class="${componentClass}-heading" data-test-id="${componentSelector}-heading">${heading}</${headingTag}>`;
+        return html`<${headingTag}
+                        id="${componentSelector}-heading"
+                        class="${componentClass}-heading"
+                        data-test-id="${componentSelector}-heading">
+                            ${heading}
+                    </${headingTag}>`;
     }
 
     /**
@@ -233,6 +243,7 @@ export class PieNotification extends LitElement implements NotificationProps {
                 class="${componentClass}-icon-close"
                 data-test-id="${componentSelector}-icon-close"
                 @click="${this.handleCloseButton}"
+                aria-label="${ifDefined(this.aria?.close)}"
                 >
                 <icon-close></icon-close>
             </pie-icon-button>`;
@@ -318,6 +329,7 @@ export class PieNotification extends LitElement implements NotificationProps {
             leadingAction,
             supportingAction,
             isOpen,
+            aria,
         } = this;
 
         if (!isOpen) {
@@ -327,12 +339,16 @@ export class PieNotification extends LitElement implements NotificationProps {
         const showCloseButton = isDismissible && !isCompact;
 
         return html`
-            <div 
-                data-test-id="${componentSelector}" 
-                class="${componentClass}" 
-                variant="${variant}" 
+            <div
+                data-test-id="${componentSelector}"
+                class="${componentClass}"
+                variant="${variant}"
                 position="${position}"
-                ?isCompact="${isCompact}">
+                ?isCompact="${isCompact}"
+                role="region"
+                aria-live="${variant === 'error' ? 'assertive' : 'polite'}"
+                aria-labelledby="${heading ? `${componentSelector}-heading` : nothing}"
+                aria-label="${!heading && ifDefined(aria?.label)}">
                 ${showCloseButton ? this.renderCloseButton() : nothing}
 
                 <section class="${componentClass}-content-section" ?isDismissible="${showCloseButton}">