@justeattakeaway/pie-notification 0.23.4 → 0.24.0

package/README.md

@@ -34,6 +34,7 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
 | --- | --- | --- | --- |
 | `variant` | `"neutral"`, `"neutral-alternative"`, `"info"`, `"success"`, `"warning"`, `"error"`, `"translucent"` | Sets the variant of the notification. | `"neutral"` |
 | `position` | `"inline-content"`, `"full-width"` | Defines the proper styles, whether the component appears within the content or at the top of the interface. | `"inline-content"` |
+| `size` | `"small"`, `"large"` | Sets the size of the notification. When `small`, renders with reduced dimensions on narrow screens (below the `md` breakpoint). On wide screens, both sizes render identically. | `"large"` |
 | `heading` | — | The heading text of the notification. | `undefined` |
 | `headingLevel` | `h2`, `h3`, `h4`, `h5`, `h6` | The HTML tag to use for the notification's heading. | `h2` |
 | `isDismissible` | `true`, `false` | When true, allows dismissing the notification by clicking on the close button. | `false` |

package/custom-elements.json

@@ -36,6 +36,14 @@
           },
           "default": "['inline-content', 'full-width']"
         },
+        {
+          "kind": "variable",
+          "name": "sizes",
+          "type": {
+            "text": "['small', 'large']"
+          },
+          "default": "['small', 'large']"
+        },
         {
           "kind": "variable",
           "name": "actionSizes",
@@ -98,7 +106,7 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{ variant: 'neutral', position: 'inline-content', isDismissible: false, isCompact: false, headingLevel: 'h2', hideIcon: false, isOpen: true, hasStackedActions: false, leadingAction: defaultActionButtonProps, supportingAction: defaultActionButtonProps, }"
+          "default": "{ variant: 'neutral', position: 'inline-content', size: 'large', isDismissible: false, isCompact: false, headingLevel: 'h2', hideIcon: false, isOpen: true, hasStackedActions: false, leadingAction: defaultActionButtonProps, supportingAction: defaultActionButtonProps, }"
         }
       ],
       "exports": [
@@ -126,6 +134,14 @@
             "module": "src/defs.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "sizes",
+          "declaration": {
+            "name": "sizes",
+            "module": "src/defs.js"
+          }
+        },
         {
           "kind": "js",
           "name": "actionSizes",
@@ -245,6 +261,12 @@
               "privacy": "public",
               "attribute": "position"
             },
+            {
+              "kind": "field",
+              "name": "size",
+              "privacy": "public",
+              "attribute": "size"
+            },
             {
               "kind": "field",
               "name": "isDismissible",
@@ -468,6 +490,10 @@
               "name": "position",
               "fieldName": "position"
             },
+            {
+              "name": "size",
+              "fieldName": "size"
+            },
             {
               "name": "isDismissible",
               "fieldName": "isDismissible"

package/dist/index.d.ts

@@ -64,6 +64,12 @@ export declare interface NotificationProps {
      * Defines the proper styles, whether the component appears within the content or at the top of the interface
      */
     position?: typeof positions[number];
+    /**
+     * Sets the size of the notification. When `small`, the component renders with
+     * reduced dimensions on narrow screens (below the md breakpoint).
+     * On wide screens, both sizes render identically.
+     */
+    size?: typeof sizes[number];
     /**
      * When true, allows dismissing the notification by clicking on the close button.
      */
@@ -152,6 +158,7 @@ export declare class PieNotification extends PieElement implements NotificationP
     isOpen: boolean;
     variant: "neutral" | "neutral-alternative" | "info" | "success" | "warning" | "error" | "translucent";
     position: "inline-content" | "full-width";
+    size: "small" | "large";
     isDismissible: boolean;
     isCompact: boolean;
     heading: NotificationProps['heading'];
@@ -247,6 +254,8 @@ export declare class PieNotification extends PieElement implements NotificationP
 
 export declare const positions: readonly ["inline-content", "full-width"];
 
+export declare const sizes: readonly ["small", "large"];
+
 export declare const variants: readonly ["neutral", "neutral-alternative", "info", "success", "warning", "error", "translucent"];
 
 export { }

package/dist/index.js

@@ -1,9 +1,9 @@
-import { LitElement as N, unsafeCSS as I, nothing as l } from "lit";
-import { classMap as w } from "lit/directives/class-map.js";
-import { html as d, unsafeStatic as z } from "lit/static-html.js";
-import { validPropertyValues as O, safeCustomElement as S, dispatchCustomEvent as A } from "@justeattakeaway/pie-webc-core";
-import { property as r, queryAssignedElements as _ } from "lit/decorators.js";
-import { ifDefined as h } from "lit/directives/if-defined.js";
+import { LitElement as O, unsafeCSS as N, nothing as f } from "lit";
+import { classMap as k } from "lit/directives/class-map.js";
+import { html as d, unsafeStatic as I } from "lit/static-html.js";
+import { validPropertyValues as $, safeCustomElement as S, dispatchCustomEvent as z } from "@justeattakeaway/pie-webc-core";
+import { property as s, queryAssignedElements as _ } from "lit/decorators.js";
+import { ifDefined as g } from "lit/directives/if-defined.js";
 import "@justeattakeaway/pie-button";
 import "@justeattakeaway/pie-icon-button";
 import "@justeattakeaway/pie-icons-webc/dist/IconAlertCircle.js";
@@ -11,44 +11,45 @@ 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 $ = class $ extends N {
+const y = class y extends O {
   willUpdate() {
-    this.getAttribute("v") || this.setAttribute("v", $.v);
+    this.getAttribute("v") || this.setAttribute("v", y.v);
   }
 };
-$.v = "0.23.4";
-let C = $;
-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"], o = "pie-notification", u = "c-notification", D = `${o}-close`, V = `${o}-open`, P = `${o}-leading-action-click`, F = `${o}-supporting-action-click`, b = {
+y.v = "0.24.0";
+let A = y;
+const E = ["neutral", "neutral-alternative", "info", "success", "warning", "error", "translucent"], L = ["h2", "h3", "h4", "h5", "h6"], T = ["inline-content", "full-width"], B = ["small", "large"], D = ["small-productive", "xsmall"], o = "pie-notification", h = "c-notification", V = `${o}-close`, P = `${o}-open`, F = `${o}-leading-action-click`, j = `${o}-supporting-action-click`, C = {
   text: "",
   ariaLabel: "",
   size: "small-productive"
-}, s = {
+}, r = {
   variant: "neutral",
   position: "inline-content",
+  size: "large",
   isDismissible: !1,
   isCompact: !1,
   headingLevel: "h2",
   hideIcon: !1,
   isOpen: !0,
   hasStackedActions: !1,
-  leadingAction: b,
-  supportingAction: b
-}, 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-family: var(--dt-font-heading-s-family);--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-family: var(--dt-font-body-l-family);--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);font-family:var(--notification-font-family);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.is-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-family:var(--notification-heading-font-family);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.is-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 pie-button,.c-notification-footer ::slotted(pie-button){margin-block-start:var(--dt-spacing-d)}.c-notification-footer.is-compact{align-self:center;margin-inline-start:auto}@media(max-width:767px){.c-notification-footer.c-notification-footer--stacked{flex-direction:column-reverse;gap:0}.c-notification-footer.c-notification-footer--stacked ::slotted(pie-button){--btn-inline-size: 100%}}@media(min-width:768px){.c-notification-footer.c-notification-footer--stacked>pie-button{width:auto}}.c-notification-footer ::slotted(:not(pie-button)){display:none}:host([isCompact]) .c-notification-footer pie-button,:host([isCompact]) .c-notification-footer ::slotted(pie-button){margin-block-start:0}.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, t, e, f) => {
-  for (var a = f > 1 ? void 0 : f ? H(t, e) : t, p = i.length - 1, g; p >= 0; p--)
-    (g = i[p]) && (a = (f ? g(t, e, a) : g(a)) || a);
-  return f && a && G(t, e, a), a;
+  leadingAction: C,
+  supportingAction: C
+}, G = "*,*: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-family: var(--dt-font-heading-s-family);--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-family: var(--dt-font-body-l-family);--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-btn-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);font-family:var(--notification-font-family);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.is-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.c-notification--small{--notification-close-btn-size: 40px;--notification-content-min-height: 20px;--notification-content-min-height-dismissible: 32px}.c-notification-heading{margin:0;margin-block-end:var(--dt-spacing-a);font-family:var(--notification-heading-font-family);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.is-dismissible{max-width:calc(100% - var(--notification-close-btn-offset) - 40px)}.c-notification-icon-close{position:absolute;inset-block-start:var(--notification-close-btn-offset);inset-inline-end:var(--notification-close-btn-offset)}.c-notification-footer{display:flex;flex-direction:row;justify-content:flex-end;gap:var(--dt-spacing-d)}.c-notification-footer pie-button,.c-notification-footer ::slotted(pie-button){margin-block-start:var(--dt-spacing-d)}.c-notification-footer.is-compact{align-self:center;margin-inline-start:auto}@media(max-width:767px){.c-notification-footer.c-notification-footer--stacked{flex-direction:column-reverse;gap:0}.c-notification-footer.c-notification-footer--stacked pie-button,.c-notification-footer.c-notification-footer--stacked ::slotted(pie-button){--btn-inline-size: 100%}}@media(min-width:768px){.c-notification-footer.c-notification-footer--stacked>pie-button{width:auto}}.c-notification-footer ::slotted(:not(pie-button)){display:none}@media(max-width:767px){.c-notification.c-notification--small{--notification-heading-font-family: var(--dt-font-heading-xs-family);--notification-heading-font-size: calc(var(--dt-font-heading-xs-size--narrow) * 1px);--notification-heading-line-height: calc(var(--dt-font-heading-xs-line-height--narrow) * 1px);--notification-heading-font-weight: var(--dt-font-heading-xs-weight);--notification-font-family: var(--dt-font-body-s-family);--notification-font-size: calc(var(--dt-font-body-s-size) * 1px);--notification-line-height: calc(var(--dt-font-body-s-line-height) * 1px);--notification-font-weight: var(--dt-font-body-s-weight);--notification-close-btn-offset: var(--dt-spacing-a);padding:var(--dt-spacing-b);gap:0}.c-notification.c-notification--small.is-compact{gap:var(--dt-spacing-b)}.c-notification.c-notification--small .c-notification-icon-close{inset-block-start:var(--notification-close-btn-offset);inset-inline-end:var(--notification-close-btn-offset)}.c-notification.c-notification--small .c-notification-content-section{gap:var(--dt-spacing-b);min-height:var(--notification-content-min-height)}.c-notification.c-notification--small .c-notification-content-section.is-dismissible{min-height:var(--notification-content-min-height-dismissible);max-width:calc(100% - var(--notification-close-btn-size))}.c-notification.c-notification--small.is-compact .c-notification-content-section{flex:1;min-width:0}.c-notification.c-notification--small .c-notification-footer{align-items:flex-end}.c-notification.c-notification--small .c-notification-footer.is-compact{align-self:stretch;align-items:center}.c-notification.c-notification--small .c-notification-footer pie-button,.c-notification.c-notification--small .c-notification-footer ::slotted(pie-button){margin-block-start:var(--dt-spacing-b)}}:host([isCompact]) .c-notification-footer pie-button,:host([isCompact]) .c-notification-footer ::slotted(pie-button){margin-block-start:0}.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 H = Object.defineProperty, K = Object.getOwnPropertyDescriptor, e = (i, t, a, l) => {
+  for (var c = l > 1 ? void 0 : l ? K(t, a) : t, p = i.length - 1, u; p >= 0; p--)
+    (u = i[p]) && (c = (l ? u(t, a, c) : u(c)) || c);
+  return l && c && H(t, a, c), c;
 };
-let n = class extends C {
+let n = class extends A {
   constructor() {
-    super(...arguments), this.isOpen = s.isOpen, this.variant = s.variant, this.position = s.position, this.isDismissible = s.isDismissible, this.isCompact = s.isCompact, this.headingLevel = s.headingLevel, this.hideIcon = s.hideIcon, this.hasStackedActions = s.hasStackedActions;
+    super(...arguments), this.isOpen = r.isOpen, this.variant = r.variant, this.position = r.position, this.size = r.size, this.isDismissible = r.isDismissible, this.isCompact = r.isCompact, this.headingLevel = r.headingLevel, this.hideIcon = r.hideIcon, this.hasStackedActions = r.hasStackedActions;
   }
   /**
    * Lifecycle method executed when component is updated.
    * It dispatches an event if notification is opened.
    */
   updated(i) {
-    i.has("isOpen") && this.isOpen && A(this, V, { targetNotification: this });
+    i.has("isOpen") && this.isOpen && z(this, P, { targetNotification: this });
   }
   /**
    * Renders the supporting action - either from slot or props.
@@ -58,7 +59,7 @@ let n = class extends C {
    */
   renderSupportingAction() {
     const { supportingAction: i, leadingAction: t } = this;
-    return i && (t != null && t.text) ? this.renderActionButton(i, "supporting") : l;
+    return i && (t != null && t.text) ? this.renderActionButton(i, "supporting") : f;
   }
   /**
    * Renders the leading action from props.
@@ -67,7 +68,7 @@ let n = class extends C {
    */
   renderLeadingAction() {
     const { leadingAction: i } = this;
-    return i ? this.renderActionButton(i, "leading") : l;
+    return i ? this.renderActionButton(i, "leading") : f;
   }
   /**
    * Template for the footer area
@@ -79,14 +80,14 @@ let n = class extends C {
     const {
       isCompact: i,
       hasStackedActions: t
-    } = this, e = {
-      [`${u}-footer`]: !0,
+    } = this, a = {
+      [`${h}-footer`]: !0,
       "is-compact": i,
-      [`${u}-footer--stacked`]: t && !i
+      [`${h}-footer--stacked`]: t && !i
     };
     return d`
             <div
-                class="${w(e)}"
+                class="${k(a)}"
                 data-test-id="${o}-footer">
                     ${this.renderSupportingAction()}
                     <slot name="supportingAction"></slot>
@@ -102,13 +103,13 @@ let n = class extends C {
    * @private
    */
   renderNotificationHeading() {
-    const { heading: i, headingLevel: t } = this, e = z(t);
-    return d`<${e}
+    const { heading: i, headingLevel: t } = this, a = I(t);
+    return d`<${a}
                         id="${o}-heading"
-                        class="${u}-heading"
+                        class="${h}-heading"
                         data-test-id="${o}-heading">
                             ${i}
-                    </${e}>`;
+                    </${a}>`;
   }
   /**
    * Util method that returns an icon from a variant that has default icon.
@@ -126,7 +127,7 @@ let n = class extends C {
       case "error":
         return d`<icon-alert-circle class="icon" size="m" data-test-id="${o}-heading-icon-error"></icon-alert-circle>`;
       default:
-        return l;
+        return f;
     }
   }
   /**
@@ -151,10 +152,10 @@ let n = class extends C {
             <pie-icon-button
                 variant="ghost-secondary"
                 size="small"
-                class="${u}-icon-close"
+                class="${h}-icon-close"
                 data-test-id="${o}-icon-close"
                 @click="${this.handleCloseButton}"
-                aria-label="${h((i = this.aria) == null ? void 0 : i.close)}">
+                aria-label="${g((i = this.aria) == null ? void 0 : i.close)}">
                 <icon-close></icon-close>
             </pie-icon-button>`;
   }
@@ -165,7 +166,7 @@ let n = class extends C {
    * @private
    */
   handleCloseButton() {
-    this.isOpen = !1, A(this, D, { targetNotification: this });
+    this.isOpen = !1, z(this, V, { targetNotification: this });
   }
   /**
    * It handles the action button action.
@@ -176,7 +177,7 @@ let n = class extends C {
    * @private
    */
   handleActionClick(i) {
-    A(this, i === "leading" ? P : F, { targetNotification: this });
+    z(this, i === "leading" ? F : j, { targetNotification: this });
   }
   /**
    * Render the action button depending on action type and its action.
@@ -189,32 +190,32 @@ let n = class extends C {
    */
   renderActionButton(i, t) {
     const {
-      text: e,
-      ariaLabel: f,
-      size: a = b.size,
+      text: a,
+      ariaLabel: l,
+      size: c,
       href: p,
-      target: g,
-      rel: v,
-      download: m
+      target: u,
+      rel: x,
+      download: v
     } = i;
-    if (!e)
-      return l;
-    const y = t === "leading" ? "primary" : "ghost", k = a && B.includes(a) ? a : b.size, x = !!p;
+    if (!a)
+      return f;
+    const m = t === "leading" ? "primary" : "ghost", w = c && D.includes(c) ? c : C.size, b = !!p;
     return d`
             <pie-button
-                variant="${y}"
-                size="${h(k)}"
-                aria-label="${h(f)}"
+                variant="${m}"
+                size="${g(w)}"
+                aria-label="${g(l)}"
                 @click="${() => this.handleActionClick(t)}"
                 data-test-id="${o}-${t}-action"
                 ?isFullWidth="${this.hasStackedActions}"
-                tag="${x ? "a" : "button"}"
-                type="${x ? l : "button"}"
-                href="${h(p)}"
-                target="${h(g)}"
-                rel="${h(v)}"
-                download="${h(m)}">
-                ${e}
+                tag="${b ? "a" : "button"}"
+                type="${b ? f : "button"}"
+                href="${g(p)}"
+                target="${g(u)}"
+                rel="${g(x)}"
+                download="${g(v)}">
+                ${a}
             </pie-button>
         `;
   }
@@ -222,38 +223,40 @@ let n = class extends C {
     const {
       variant: i,
       position: t,
-      heading: e,
-      isDismissible: f,
-      isCompact: a,
-      hideIcon: p,
-      isOpen: g,
+      size: a,
+      heading: l,
+      isDismissible: c,
+      isCompact: p,
+      hideIcon: u,
+      isOpen: x,
       aria: v
     } = this;
-    if (!g)
-      return l;
-    const m = f && !a, y = {
-      [u]: !0,
-      [`${u}--${i}`]: !0,
-      [`${u}--${t}`]: !0,
-      "is-compact": a
-    }, k = {
-      [`${u}-content-section`]: !0,
+    if (!x)
+      return f;
+    const m = c && !p, w = {
+      [h]: !0,
+      [`${h}--${i}`]: !0,
+      [`${h}--${t}`]: !0,
+      [`${h}--${a}`]: !0,
+      "is-compact": p
+    }, b = {
+      [`${h}-content-section`]: !0,
       "is-dismissible": m
     };
     return d`
             <div
                 data-test-id="${o}"
-                class="${w(y)}"
+                class="${k(w)}"
                 role="region"
                 aria-live="${i === "error" ? "assertive" : "polite"}"
-                aria-labelledby="${e ? `${o}-heading` : l}"
-                aria-label="${!e && h(v == null ? void 0 : v.label)}">
-                ${m ? this.renderCloseButton() : l}
+                aria-labelledby="${l ? `${o}-heading` : f}"
+                aria-label="${!l && g(v == null ? void 0 : v.label)}">
+                ${m ? this.renderCloseButton() : f}
 
-                <div class="${w(k)}">
-                    ${p ? l : this.renderIcon()}
+                <div class="${k(b)}">
+                    ${u ? f : this.renderIcon()}
                     <div>
-                        ${e ? this.renderNotificationHeading() : l}
+                        ${l ? this.renderNotificationHeading() : f}
                         <slot></slot>
                     </div>
                 </div>
@@ -262,64 +265,69 @@ let n = class extends C {
             </div>`;
   }
 };
-n.styles = I(j);
-c([
-  r({ type: Boolean })
+n.styles = N(G);
+e([
+  s({ type: Boolean })
 ], n.prototype, "isOpen", 2);
-c([
-  r({ type: String }),
-  O(o, E, s.variant)
+e([
+  s({ type: String }),
+  $(o, E, r.variant)
 ], n.prototype, "variant", 2);
-c([
-  r({ type: String }),
-  O(o, T, s.position)
+e([
+  s({ type: String }),
+  $(o, T, r.position)
 ], n.prototype, "position", 2);
-c([
-  r({ type: Boolean })
+e([
+  s({ type: String }),
+  $(o, B, r.size)
+], n.prototype, "size", 2);
+e([
+  s({ type: Boolean })
 ], n.prototype, "isDismissible", 2);
-c([
-  r({ type: Boolean, reflect: !0 })
+e([
+  s({ type: Boolean, reflect: !0 })
 ], n.prototype, "isCompact", 2);
-c([
-  r({ type: String })
+e([
+  s({ type: String })
 ], n.prototype, "heading", 2);
-c([
-  r({ type: String }),
-  O(o, L, s.headingLevel)
+e([
+  s({ type: String }),
+  $(o, L, r.headingLevel)
 ], n.prototype, "headingLevel", 2);
-c([
-  r({ type: Boolean })
+e([
+  s({ type: Boolean })
 ], n.prototype, "hideIcon", 2);
-c([
-  r({ type: Object })
+e([
+  s({ type: Object })
 ], n.prototype, "leadingAction", 2);
-c([
-  r({ type: Object })
+e([
+  s({ type: Object })
 ], n.prototype, "supportingAction", 2);
-c([
-  r({ type: Boolean, reflect: !0 })
+e([
+  s({ type: Boolean, reflect: !0 })
 ], n.prototype, "hasStackedActions", 2);
-c([
-  r({ type: Object })
+e([
+  s({ type: Object })
 ], n.prototype, "aria", 2);
-c([
+e([
   _({ slot: "icon" })
 ], n.prototype, "_iconSlot", 2);
-n = c([
+n = e([
   S("pie-notification")
 ], n);
 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,
+  V as ON_NOTIFICATION_CLOSE_EVENT,
+  F as ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT,
+  P as ON_NOTIFICATION_OPEN_EVENT,
+  j as ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT,
   n as PieNotification,
-  B as actionSizes,
-  u as componentClass,
+  D as actionSizes,
+  h as componentClass,
   o as componentSelector,
-  b as defaultActionButtonProps,
-  s as defaultProps,
+  C as defaultActionButtonProps,
+  r as defaultProps,
   L as headingLevels,
   T as positions,
+  B as sizes,
   E as variants
 };

package/dist/react.d.ts

@@ -65,6 +65,12 @@ export declare interface NotificationProps {
      * Defines the proper styles, whether the component appears within the content or at the top of the interface
      */
     position?: typeof positions[number];
+    /**
+     * Sets the size of the notification. When `small`, the component renders with
+     * reduced dimensions on narrow screens (below the md breakpoint).
+     * On wide screens, both sizes render identically.
+     */
+    size?: typeof sizes[number];
     /**
      * When true, allows dismissing the notification by clicking on the close button.
      */
@@ -155,6 +161,7 @@ declare class PieNotification_2 extends PieElement implements NotificationProps
     isOpen: boolean;
     variant: "neutral" | "neutral-alternative" | "info" | "success" | "warning" | "error" | "translucent";
     position: "inline-content" | "full-width";
+    size: "small" | "large";
     isDismissible: boolean;
     isCompact: boolean;
     heading: NotificationProps['heading'];
@@ -259,6 +266,8 @@ export declare const positions: readonly ["inline-content", "full-width"];
 
 declare type ReactBaseType = React_2.HTMLAttributes<HTMLDivElement>;
 
+export declare const sizes: readonly ["small", "large"];
+
 export declare const variants: readonly ["neutral", "neutral-alternative", "info", "success", "warning", "error", "translucent"];
 
 export { }

package/dist/react.js

@@ -1,7 +1,7 @@
 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 f, ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT as s, ON_NOTIFICATION_OPEN_EVENT as I, ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT as O, actionSizes as r, componentClass as C, componentSelector as _, defaultActionButtonProps as l, defaultProps as T, headingLevels as P, positions as m, variants as E } from "./index.js";
+import { ON_NOTIFICATION_CLOSE_EVENT as s, ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT as f, ON_NOTIFICATION_OPEN_EVENT as I, ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT as O, actionSizes as r, componentClass as C, componentSelector as _, defaultActionButtonProps as l, defaultProps as T, headingLevels as P, positions as m, sizes as E, variants as A } from "./index.js";
 const n = o({
   displayName: "PieNotification",
   elementClass: t,
@@ -19,8 +19,8 @@ const n = o({
   }
 }), c = n;
 export {
-  f as ON_NOTIFICATION_CLOSE_EVENT,
-  s as ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT,
+  s as ON_NOTIFICATION_CLOSE_EVENT,
+  f as ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT,
   I as ON_NOTIFICATION_OPEN_EVENT,
   O as ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT,
   c as PieNotification,
@@ -31,5 +31,6 @@ export {
   T as defaultProps,
   P as headingLevels,
   m as positions,
-  E as variants
+  E as sizes,
+  A as variants
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-notification",
   "description": "PIE Design System Notification built using Web Components",
-  "version": "0.23.4",
+  "version": "0.24.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",

package/src/defs.ts

@@ -3,6 +3,7 @@ import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 export const variants = ['neutral', 'neutral-alternative', 'info', 'success', 'warning', 'error', 'translucent'] as const;
 export const headingLevels = ['h2', 'h3', 'h4', 'h5', 'h6'] as const;
 export const positions = ['inline-content', 'full-width'] as const;
+export const sizes = ['small', 'large'] as const;
 export const actionSizes = ['small-productive', 'xsmall'] as const;
 
 type AriaProps = {
@@ -58,6 +59,13 @@ export interface NotificationProps {
    */
   position?: typeof positions[number];
 
+  /**
+   * Sets the size of the notification. When `small`, the component renders with
+   * reduced dimensions on narrow screens (below the md breakpoint).
+   * On wide screens, both sizes render identically.
+   */
+  size?: typeof sizes[number];
+
   /**
    * When true, allows dismissing the notification by clicking on the close button.
    */
@@ -154,6 +162,7 @@ export const defaultActionButtonProps: ActionProps = {
 export const defaultProps: DefaultProps = {
     variant: 'neutral',
     position: 'inline-content',
+    size: 'large',
     isDismissible: false,
     isCompact: false,
     headingLevel: 'h2',

package/src/index.ts

@@ -8,13 +8,17 @@ import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElem
 import { classMap } from 'lit/directives/class-map.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
 import { validPropertyValues, dispatchCustomEvent, safeCustomElement } from '@justeattakeaway/pie-webc-core';
-import { property, queryAssignedElements } from 'lit/decorators.js';
+import {
+    property,
+    queryAssignedElements,
+} from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import {
     type NotificationProps,
     type ActionProps,
     variants,
     positions,
+    sizes,
     headingLevels,
     actionSizes,
     componentSelector,
@@ -63,6 +67,10 @@ export class PieNotification extends PieElement implements NotificationProps {
     @validPropertyValues(componentSelector, positions, defaultProps.position)
     public position = defaultProps.position;
 
+    @property({ type: String })
+    @validPropertyValues(componentSelector, sizes, defaultProps.size)
+    public size = defaultProps.size;
+
     @property({ type: Boolean })
     public isDismissible = defaultProps.isDismissible;
 
@@ -273,7 +281,7 @@ export class PieNotification extends PieElement implements NotificationProps {
         const {
             text,
             ariaLabel,
-            size = defaultActionButtonProps.size,
+            size: actionSize,
             href,
             target,
             rel,
@@ -285,7 +293,7 @@ export class PieNotification extends PieElement implements NotificationProps {
         }
 
         const buttonVariant = actionType === 'leading' ? 'primary' : 'ghost';
-        const buttonSize = size && actionSizes.includes(size) ? size : defaultActionButtonProps.size;
+        const buttonSize = actionSize && actionSizes.includes(actionSize) ? actionSize : defaultActionButtonProps.size;
         const isLink = !!href;
 
         return html`
@@ -311,6 +319,7 @@ export class PieNotification extends PieElement implements NotificationProps {
         const {
             variant,
             position,
+            size,
             heading,
             isDismissible,
             isCompact,
@@ -329,6 +338,7 @@ export class PieNotification extends PieElement implements NotificationProps {
             [componentClass]: true,
             [`${componentClass}--${variant}`]: true,
             [`${componentClass}--${position}`]: true,
+            [`${componentClass}--${size}`]: true,
             'is-compact': isCompact,
         };
 

package/src/notification.scss

@@ -17,7 +17,7 @@
     --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-close-btn-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;
@@ -68,13 +68,17 @@
         --notification-icon-fill: var(--dt-color-content-light);
     }
 
-     &.c-notification--translucent {
+    &.c-notification--translucent {
         --notification-background-color: var(--dt-color-container-prominent);
 
         backdrop-filter: blur(var(--dt-blur-prominent));
-
     }
 
+    &.c-notification--small {
+        --notification-close-btn-size: 40px;
+        --notification-content-min-height: 20px; // 36px total - 8px padding top - 8px padding bottom
+        --notification-content-min-height-dismissible: 32px; // 48px total - 8px padding top - 8px padding bottom
+    }
 
     &-heading {
         margin: 0;
@@ -97,14 +101,14 @@
         gap: var(--dt-spacing-c);
 
         &.is-dismissible {
-            max-width: calc(100% - var(--notification-close-icon-offset) - 40px); // 40px is the size of the medium icon button
+            max-width: calc(100% - var(--notification-close-btn-offset) - 40px); // 40px is the size of the medium icon button
         }
     }
 
     &-icon-close {
         position: absolute;
-        inset-block-start: var(--notification-close-icon-offset);
-        inset-inline-end: var(--notification-close-icon-offset);
+        inset-block-start: var(--notification-close-btn-offset);
+        inset-inline-end: var(--notification-close-btn-offset);
     }
 
     &-footer {
@@ -128,6 +132,7 @@
                 flex-direction: column-reverse;
                 gap: 0;
 
+                pie-button,
                 ::slotted(pie-button) {
                     --btn-inline-size: 100%;
                 }
@@ -145,6 +150,63 @@
             display: none;
         }
     }
+
+    @include media('<md') {
+        &.c-notification--small {
+            --notification-heading-font-family: var(--dt-font-heading-xs-family);
+            --notification-heading-font-size: #{p.font-size(--dt-font-heading-xs-size--narrow)};
+            --notification-heading-line-height: #{p.line-height(--dt-font-heading-xs-line-height--narrow)};
+            --notification-heading-font-weight: var(--dt-font-heading-xs-weight);
+            --notification-font-family: var(--dt-font-body-s-family);
+            --notification-font-size: #{p.font-size(--dt-font-body-s-size)};
+            --notification-line-height: #{p.line-height(--dt-font-body-s-line-height)};
+            --notification-font-weight: var(--dt-font-body-s-weight);
+            --notification-close-btn-offset: var(--dt-spacing-a);
+
+            padding: var(--dt-spacing-b);
+            gap: 0;
+
+            &.is-compact {
+                gap: var(--dt-spacing-b);
+            }
+
+            .c-notification-icon-close {
+                inset-block-start: var(--notification-close-btn-offset);
+                inset-inline-end: var(--notification-close-btn-offset);
+            }
+
+            .c-notification-content-section {
+                gap: var(--dt-spacing-b);
+
+                min-height: var(--notification-content-min-height);
+
+                &.is-dismissible {
+                    min-height: var(--notification-content-min-height-dismissible);
+                    max-width: calc(100% - var(--notification-close-btn-size));
+                }
+            }
+
+            &.is-compact .c-notification-content-section {
+                flex: 1;
+                min-width: 0;
+
+            }
+
+            .c-notification-footer {
+                align-items: flex-end;
+
+                &.is-compact {
+                    align-self: stretch;
+                    align-items: center;
+                }
+
+                pie-button,
+                ::slotted(pie-button) {
+                    margin-block-start: var(--dt-spacing-b);
+                }
+            }
+        }
+    }
 }
 
 :host([isCompact]) {