@justeattakeaway/pie-notification 0.5.5 → 0.6.1

package/custom-elements.json

@@ -28,6 +28,14 @@
           },
           "default": "['h2', 'h3', 'h4', 'h5', 'h6']"
         },
+        {
+          "kind": "variable",
+          "name": "positions",
+          "type": {
+            "text": "['inline-content', 'full-width']"
+          },
+          "default": "['inline-content', 'full-width']"
+        },
         {
           "kind": "variable",
           "name": "componentSelector",
@@ -67,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": [
@@ -86,6 +102,14 @@
             "module": "src/defs.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "positions",
+          "declaration": {
+            "name": "positions",
+            "module": "src/defs.js"
+          }
+        },
         {
           "kind": "js",
           "name": "componentSelector",
@@ -133,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"
+          }
         }
       ]
     },
@@ -148,11 +180,7 @@
             {
               "kind": "field",
               "name": "isOpen",
-              "type": {
-                "text": "boolean"
-              },
               "privacy": "public",
-              "default": "true",
               "attribute": "isOpen"
             },
             {
@@ -162,27 +190,27 @@
                 "text": "NonNullable<NotificationProps['variant']>"
               },
               "privacy": "public",
-              "default": "'neutral'",
               "attribute": "variant"
             },
             {
               "kind": "field",
-              "name": "isDismissible",
+              "name": "position",
               "type": {
-                "text": "boolean"
+                "text": "NonNullable<NotificationProps['position']>"
               },
               "privacy": "public",
-              "default": "true",
+              "attribute": "position"
+            },
+            {
+              "kind": "field",
+              "name": "isDismissible",
+              "privacy": "public",
               "attribute": "isDismissible"
             },
             {
               "kind": "field",
               "name": "isCompact",
-              "type": {
-                "text": "boolean"
-              },
               "privacy": "public",
-              "default": "false",
               "attribute": "isCompact"
             },
             {
@@ -201,29 +229,14 @@
                 "text": "NonNullable<NotificationProps['headingLevel']>"
               },
               "privacy": "public",
-              "default": "'h2'",
               "attribute": "headingLevel"
             },
             {
               "kind": "field",
               "name": "hideIcon",
-              "type": {
-                "text": "boolean"
-              },
               "privacy": "public",
-              "default": "false",
               "attribute": "hideIcon"
             },
-            {
-              "kind": "field",
-              "name": "hideCloseIcon",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "attribute": "hideCloseIcon"
-            },
             {
               "kind": "field",
               "name": "leadingAction",
@@ -245,11 +258,7 @@
             {
               "kind": "field",
               "name": "hasStackedActions",
-              "type": {
-                "text": "boolean"
-              },
               "privacy": "public",
-              "default": "false",
               "attribute": "hasStackedActions"
             },
             {
@@ -277,15 +286,6 @@
               "privacy": "protected",
               "default": "false"
             },
-            {
-              "kind": "field",
-              "name": "_hasContentGutter",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "protected",
-              "default": "false"
-            },
             {
               "kind": "method",
               "name": "updateIconProperties",
@@ -509,10 +509,6 @@
           "attributes": [
             {
               "name": "isOpen",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true",
               "fieldName": "isOpen"
             },
             {
@@ -520,23 +516,21 @@
               "type": {
                 "text": "NonNullable<NotificationProps['variant']>"
               },
-              "default": "'neutral'",
               "fieldName": "variant"
             },
             {
-              "name": "isDismissible",
+              "name": "position",
               "type": {
-                "text": "boolean"
+                "text": "NonNullable<NotificationProps['position']>"
               },
-              "default": "true",
+              "fieldName": "position"
+            },
+            {
+              "name": "isDismissible",
               "fieldName": "isDismissible"
             },
             {
               "name": "isCompact",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
               "fieldName": "isCompact"
             },
             {
@@ -551,25 +545,12 @@
               "type": {
                 "text": "NonNullable<NotificationProps['headingLevel']>"
               },
-              "default": "'h2'",
               "fieldName": "headingLevel"
             },
             {
               "name": "hideIcon",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
               "fieldName": "hideIcon"
             },
-            {
-              "name": "hideCloseIcon",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "hideCloseIcon"
-            },
             {
               "name": "leadingAction",
               "type": {
@@ -586,10 +567,6 @@
             },
             {
               "name": "hasStackedActions",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
               "fieldName": "hasStackedActions"
             }
           ],

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';
@@ -19,6 +20,10 @@ 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 {
@@ -26,6 +31,10 @@ export declare interface NotificationProps {
      * Set the variant of the notification.
      */
     variant?: typeof variants[number];
+    /**
+     * The position of the notification defining proper styles if the component appear within the content or at the top of the interface.
+     */
+    position?: typeof positions[number];
     /**
      * When true, allows dismissing the notification by clicking on the close button.
      */
@@ -102,24 +111,19 @@ export declare const ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT: string;
 export declare class PieNotification extends LitElement implements NotificationProps {
     isOpen: boolean;
     variant: NonNullable<NotificationProps['variant']>;
+    position: NonNullable<NotificationProps['position']>;
     isDismissible: boolean;
     isCompact: boolean;
     heading: string;
     headingLevel: NonNullable<NotificationProps['headingLevel']>;
     hideIcon: boolean;
-    hideCloseIcon: boolean;
     leadingAction: NotificationProps['leadingAction'];
     supportingAction: NotificationProps['supportingAction'];
     hasStackedActions: boolean;
     _iconSlot: Array<HTMLElement>;
     protected _hasExternalIcon: boolean;
     protected _hasIconClass: boolean;
-    protected _hasContentGutter: boolean;
     static styles: CSSResult;
-    /**
-     * Lifecycle method executed after component renders.
-     */
-    protected firstUpdated(): void;
     /**
      * Lifecycle method executed when component is about to update.
      * It update icon properties if variant has changes.
@@ -233,6 +237,8 @@ export declare class PieNotification extends LitElement implements NotificationP
     render(): TemplateResult | typeof nothing;
 }
 
+export declare const positions: readonly ["inline-content", "full-width"];
+
 export declare const variants: readonly ["neutral", "neutral-alternative", "info", "success", "warning", "error"];
 
 export { }

package/dist/index.js

@@ -1,7 +1,7 @@
-import { unsafeCSS as _, LitElement as N, nothing as a } from "lit";
-import { html as l, unsafeStatic as O } from "lit/static-html.js";
-import { validPropertyValues as m, defineCustomElement as x, dispatchCustomEvent as u } from "@justeattakeaway/pie-webc-core";
-import { property as s, queryAssignedElements as E, state as g } from "lit/decorators.js";
+import { unsafeCSS as O, LitElement as x, nothing as c } from "lit";
+import { html as d, unsafeStatic as E } from "lit/static-html.js";
+import { validPropertyValues as v, defineCustomElement as k, dispatchCustomEvent as g } from "@justeattakeaway/pie-webc-core";
+import { property as l, queryAssignedElements as w, state as $ } from "lit/decorators.js";
 import "@justeattakeaway/pie-button";
 import "@justeattakeaway/pie-icon-button";
 import "@justeattakeaway/pie-icons-webc/dist/IconAlertCircle.js";
@@ -9,37 +9,40 @@ 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"], o = "pie-notification", h = "c-notification", z = `${o}-close`, S = `${o}-open`, V = `${o}-leading-action-click`, w = `${o}-supporting-action-click`, T = `*,*: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-icon-size-override: 22px;--notification-heading-font-size: calc(var(--dt-font-size-20) * 1px);--notification-heading-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--notification-font-size: calc(var(--dt-font-size-16) * 1px);--notification-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--notification-icon-fill: var(--dt-color-content-default);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 h1,.c-notification h2,.c-notification h3,.c-notification h4,.c-notification h5,.c-notification h6{margin:0;font-size:var(--notification-heading-font-size);line-height:var(--notification-heading-line-height)}.c-notification[isCompact]{--notification-direction: row}.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-content-section{display:flex;flex-direction:row}.c-notification-content-section article[hasGutter]{padding-inline-end:var(--dt-spacing-e)}.c-notification-content-section .has-icon{display:block ruby;margin-inline-end:var(--dt-spacing-c)}.c-notification-heading-icon{padding-block-start:var(--dt-spacing-a);color:var(--notification-icon-fill)}.c-notification-icon-close{position:absolute;inset-block-start:var(--dt-spacing-b);inset-inline-end:var(--dt-spacing-b)}.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: 640px){.c-notification-footer[isStacked]{flex-direction:column}}
+const A = ["neutral", "neutral-alternative", "info", "success", "warning", "error"], z = ["h2", "h3", "h4", "h5", "h6"], S = ["inline-content", "full-width"], o = "pie-notification", h = "c-notification", D = `${o}-close`, V = `${o}-open`, T = `${o}-leading-action-click`, B = `${o}-supporting-action-click`, r = {
+  isOpen: !0,
+  variant: "neutral",
+  position: "inline-content",
+  isDismissible: !0,
+  isCompact: !1,
+  headingLevel: "h2",
+  hideIcon: !1,
+  hasStackedActions: !1
+}, L = `*,*: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 B = Object.defineProperty, D = Object.getOwnPropertyDescriptor, e = (f, t, i, c) => {
-  for (var r = c > 1 ? void 0 : c ? D(t, i) : t, d = f.length - 1, p; d >= 0; d--)
-    (p = f[d]) && (r = (c ? p(t, i, r) : p(r)) || r);
-  return c && r && B(t, i, r), r;
+var P = Object.defineProperty, F = Object.getOwnPropertyDescriptor, e = (u, i, t, a) => {
+  for (var s = a > 1 ? void 0 : a ? F(i, t) : i, f = u.length - 1, p; f >= 0; f--)
+    (p = u[f]) && (s = (a ? p(i, t, s) : p(s)) || s);
+  return a && s && P(i, t, s), s;
 };
-class n extends N {
+class n extends x {
   constructor() {
-    super(...arguments), this.isOpen = !0, this.variant = "neutral", this.isDismissible = !0, this.isCompact = !1, this.headingLevel = "h2", this.hideIcon = !1, this.hideCloseIcon = !1, this.hasStackedActions = !1, this._hasExternalIcon = !1, this._hasIconClass = !1, this._hasContentGutter = !1;
-  }
-  /**
-   * Lifecycle method executed after component renders.
-   */
-  firstUpdated() {
-    this.updateIconProperties();
+    super(...arguments), this.isOpen = r.isOpen, this.variant = r.variant, this.position = r.position, this.isDismissible = r.isDismissible, this.isCompact = r.isCompact, this.headingLevel = r.headingLevel, this.hideIcon = r.hideIcon, this.hasStackedActions = r.hasStackedActions, this._hasExternalIcon = !1, this._hasIconClass = !1;
   }
   /**
    * Lifecycle method executed when component is about to update.
    * It update icon properties if variant has changes.
    */
-  willUpdate(t) {
-    t.has("variant") && this.updateIconProperties();
+  willUpdate(i) {
+    i.has("variant") && this.updateIconProperties();
   }
   /**
    * Lifecycle method executed when component is updated.
    * It dispatches an event if notification is opened.
    * It applies a gutter if there's no heading content in order to avoid the close button overlap the content.
    */
-  updated(t) {
-    t.has("isOpen") && this.isOpen && u(this, S, { targetNotification: this }), (t.has("heading") || t.has("isDismissible") || t.has("isCompact")) && (this._hasContentGutter = (this.heading === "" || this.heading === void 0) && this.isDismissible && !this.isCompact);
+  updated(i) {
+    i.has("isOpen") && this.isOpen && g(this, V, { targetNotification: this });
   }
   /**
    * Method responsible to check if an external icon has been provided.
@@ -56,11 +59,11 @@ class n extends N {
    *
    * @private
    */
-  renderFooter(t, i) {
-    return l`
+  renderFooter(i, t) {
+    return d`
             <footer class="${h}-footer" data-test-id="${o}-footer" ?isCompact="${this.isCompact}" ?isStacked="${this.hasStackedActions && !this.isCompact}">
-                ${i ? this.renderActionButton(i, "supporting") : a}
-                ${t ? this.renderActionButton(t, "leading") : a}
+                ${t ? this.renderActionButton(t, "supporting") : c}
+                ${i ? this.renderActionButton(i, "leading") : c}
             </footer>
         `;
   }
@@ -73,12 +76,8 @@ class n extends N {
    *
    * @private
    */
-  renderNotificationHeading(t, i) {
-    return l`
-            <header class="${h}-header" data-test-id="${o}-header">
-                <${i} class="${h}-heading" data-test-id="${o}-heading">${t}</${i}>
-            </header>
-        `;
+  renderNotificationHeading(i, t) {
+    return d`<${t} class="${h}-heading" data-test-id="${o}-heading">${i}</${t}>`;
   }
   /**
    * Util method that returns a boolean if variant has a default icon.
@@ -87,8 +86,8 @@ class n extends N {
    *
    * @private
    */
-  variantHasDefaultIcon(t) {
-    return ["info", "success", "warning", "error"].includes(t);
+  variantHasDefaultIcon(i) {
+    return ["info", "success", "warning", "error"].includes(i);
   }
   /**
    * Util method that returns an icon from a variant that has default icon.
@@ -97,18 +96,18 @@ class n extends N {
    *
    * @private
    */
-  getDefaultVariantIcon(t) {
-    switch (t) {
+  getDefaultVariantIcon(i) {
+    switch (i) {
       case "info":
-        return l`<icon-info-circle size="s" data-test-id="${o}-heading-icon-info"></icon-info-circle>`;
+        return d`<icon-info-circle size="m" data-test-id="${o}-heading-icon-info"></icon-info-circle>`;
       case "success":
-        return l`<icon-check-circle size="s" data-test-id="${o}-heading-icon-success"></icon-check-circle>`;
+        return d`<icon-check-circle size="m" data-test-id="${o}-heading-icon-success"></icon-check-circle>`;
       case "warning":
-        return l`<icon-alert-triangle size="s" data-test-id="${o}-heading-icon-warning"></icon-alert-triangle>`;
+        return d`<icon-alert-triangle size="m" data-test-id="${o}-heading-icon-warning"></icon-alert-triangle>`;
       case "error":
-        return l`<icon-alert-circle size="s" data-test-id="${o}-heading-icon-error"></icon-alert-circle>`;
+        return d`<icon-alert-circle size="m" data-test-id="${o}-heading-icon-error"></icon-alert-circle>`;
       default:
-        return a;
+        return c;
     }
   }
   /**
@@ -119,8 +118,8 @@ class n extends N {
    *
    * @private
    */
-  renderIconVariant(t) {
-    return this.variantHasDefaultIcon(t) ? this.getDefaultVariantIcon(t) : a;
+  renderIconVariant(i) {
+    return this.variantHasDefaultIcon(i) ? this.getDefaultVariantIcon(i) : c;
   }
   /**
    * Template for the heading icon area.
@@ -132,10 +131,10 @@ class n extends N {
    *
    * @private
    */
-  renderIcon(t, i, c) {
-    return l`
-            <div data-test-id="${o}-icon-area" class="${c ? "has-icon " : ""}${h}-heading-icon">
-                ${i ? a : this.renderIconVariant(t)}
+  renderIcon(i, t, a) {
+    return d`
+            <div data-test-id="${o}-icon-area" class="${a ? "has-icon " : ""}${h}-heading-icon">
+                ${t ? c : this.renderIconVariant(i)}
                 <slot name="icon"></slot>
             </div>
         `;
@@ -147,7 +146,7 @@ class n extends N {
    * @private
    */
   renderCloseButton() {
-    return l`
+    return d`
             <pie-icon-button
                 variant="ghost-secondary"
                 size="small"
@@ -165,7 +164,7 @@ class n extends N {
    * @private
    */
   handleCloseButton() {
-    this.closeNotificationComponent(), u(this, z, { targetNotification: this });
+    this.closeNotificationComponent(), g(this, D, { targetNotification: this });
   }
   /**
    * Util method responsible to close the component.
@@ -183,8 +182,8 @@ class n extends N {
    *
    * @private
    */
-  handleActionClick(t) {
-    u(this, t === "leading" ? V : w, { targetNotification: this });
+  handleActionClick(i) {
+    g(this, i === "leading" ? T : B, { targetNotification: this });
   }
   /**
    * Render the action button depending on action type and its action.
@@ -195,109 +194,117 @@ class n extends N {
    * @returns {TemplateResult | typeof nothing} - The rendered action button or nothing if the action text is not defined.
    * @private
    */
-  renderActionButton(t, i) {
-    const { text: c, ariaLabel: r } = t;
-    return c ? l`
+  renderActionButton(i, t) {
+    const { text: a, ariaLabel: s } = i;
+    return a ? d`
             <pie-button
-                variant="${i === "leading" ? "primary" : "ghost"}"
+                variant="${t === "leading" ? "primary" : "ghost"}"
                 size="small-productive"
-                aria-label="${r || a}"
-                @click="${() => this.handleActionClick(i)}"
-                data-test-id="${o}-${i}-action"
+                aria-label="${s || c}"
+                @click="${() => this.handleActionClick(t)}"
+                data-test-id="${o}-${t}-action"
                 ?isFullWidth="${this.hasStackedActions}"
                 type="button">
-                ${c}
+                ${a}
             </pie-button>
-        ` : a;
+        ` : c;
   }
   render() {
     const {
-      variant: t,
-      heading: i,
-      headingLevel: c,
-      isDismissible: r,
-      isCompact: d,
-      _hasExternalIcon: p,
+      variant: i,
+      position: t,
+      heading: a,
+      headingLevel: s,
+      isDismissible: f,
+      isCompact: p,
+      _hasExternalIcon: I,
       hideIcon: C,
-      _hasIconClass: $,
-      leadingAction: v,
-      supportingAction: I,
-      isOpen: b,
-      _hasContentGutter: y
+      _hasIconClass: y,
+      leadingAction: m,
+      supportingAction: _,
+      isOpen: N
     } = this;
-    return b ? l`
-            <div data-test-id="${o}" class="${h}" variant="${t}" ?isCompact="${d}">
-                ${r && !d ? this.renderCloseButton() : a}
+    if (!N)
+      return c;
+    const b = f && !p;
+    return d`
+            <div
+                data-test-id="${o}"
+                class="${h}"
+                variant="${i}"
+                position="${t}"
+                ?isCompact="${p}">
+                ${b ? this.renderCloseButton() : c}
 
-                <section class="${h}-content-section">
-                    ${C ? a : this.renderIcon(t, p, $)}
-                    <article ?hasGutter="${y}">
-                        ${i ? this.renderNotificationHeading(i, O(c)) : a}
+                <section class="${h}-content-section" ?isDismissible="${b}">
+                    ${C ? c : this.renderIcon(i, I, y)}
+                    <article>
+                        ${a ? this.renderNotificationHeading(a, E(s)) : c}
                         <slot></slot>
                     </article>
                 </section>
 
-                ${v ? this.renderFooter(v, I) : a}
-            </div>` : a;
+                ${m ? this.renderFooter(m, _) : c}
+            </div>`;
   }
 }
-n.styles = _(T);
+n.styles = O(L);
 e([
-  s({ type: Boolean })
+  l({ type: Boolean })
 ], n.prototype, "isOpen", 2);
 e([
-  s(),
-  m(o, k, "neutral")
+  l(),
+  v(o, A, r.variant)
 ], n.prototype, "variant", 2);
 e([
-  s({ type: Boolean })
+  l(),
+  v(o, S, r.position)
+], n.prototype, "position", 2);
+e([
+  l({ type: Boolean })
 ], n.prototype, "isDismissible", 2);
 e([
-  s({ type: Boolean })
+  l({ type: Boolean })
 ], n.prototype, "isCompact", 2);
 e([
-  s({ type: String })
+  l({ type: String })
 ], n.prototype, "heading", 2);
 e([
-  s(),
-  m(o, A, "h2")
+  l(),
+  v(o, z, r.headingLevel)
 ], n.prototype, "headingLevel", 2);
 e([
-  s({ type: Boolean })
+  l({ type: Boolean })
 ], n.prototype, "hideIcon", 2);
 e([
-  s({ type: Boolean })
-], n.prototype, "hideCloseIcon", 2);
-e([
-  s({ type: Object })
+  l({ type: Object })
 ], n.prototype, "leadingAction", 2);
 e([
-  s({ type: Object })
+  l({ type: Object })
 ], n.prototype, "supportingAction", 2);
 e([
-  s({ type: Boolean })
+  l({ type: Boolean })
 ], n.prototype, "hasStackedActions", 2);
 e([
-  E({ slot: "icon" })
+  w({ slot: "icon" })
 ], n.prototype, "_iconSlot", 2);
 e([
-  g()
+  $()
 ], n.prototype, "_hasExternalIcon", 2);
 e([
-  g()
+  $()
 ], n.prototype, "_hasIconClass", 2);
-e([
-  g()
-], n.prototype, "_hasContentGutter", 2);
-x(o, n);
+k(o, n);
 export {
-  z as ON_NOTIFICATION_CLOSE_EVENT,
-  V as ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT,
-  S as ON_NOTIFICATION_OPEN_EVENT,
-  w as ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT,
+  D 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,
   n as PieNotification,
   h as componentClass,
   o as componentSelector,
-  A as headingLevels,
-  k as variants
+  r as defaultProps,
+  z as headingLevels,
+  S as positions,
+  A 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';
@@ -20,6 +21,10 @@ 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 {
@@ -27,6 +32,10 @@ export declare interface NotificationProps {
      * Set the variant of the notification.
      */
     variant?: typeof variants[number];
+    /**
+     * The position of the notification defining proper styles if the component appear within the content or at the top of the interface.
+     */
+    position?: typeof positions[number];
     /**
      * When true, allows dismissing the notification by clicking on the close button.
      */
@@ -105,24 +114,19 @@ export declare const PieNotification: React_2.ForwardRefExoticComponent<Notifica
 declare class PieNotification_2 extends LitElement implements NotificationProps {
     isOpen: boolean;
     variant: NonNullable<NotificationProps['variant']>;
+    position: NonNullable<NotificationProps['position']>;
     isDismissible: boolean;
     isCompact: boolean;
     heading: string;
     headingLevel: NonNullable<NotificationProps['headingLevel']>;
     hideIcon: boolean;
-    hideCloseIcon: boolean;
     leadingAction: NotificationProps['leadingAction'];
     supportingAction: NotificationProps['supportingAction'];
     hasStackedActions: boolean;
     _iconSlot: Array<HTMLElement>;
     protected _hasExternalIcon: boolean;
     protected _hasIconClass: boolean;
-    protected _hasContentGutter: boolean;
     static styles: CSSResult;
-    /**
-     * Lifecycle method executed after component renders.
-     */
-    protected firstUpdated(): void;
     /**
      * Lifecycle method executed when component is about to update.
      * It update icon properties if variant has changes.
@@ -243,6 +247,8 @@ declare type PieNotificationEvents = {
     onPieNotificationOpen?: (event: CustomEvent) => void;
 };
 
+export declare const positions: readonly ["inline-content", "full-width"];
+
 declare type ReactBaseType = React_2.HTMLAttributes<HTMLDivElement>;
 
 export declare const variants: readonly ["neutral", "neutral-alternative", "info", "success", "warning", "error"];

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 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, variants as S } 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, defaultProps as F, headingLevels as S, positions as V, variants as u } from "./index.js";
 import "lit";
 import "lit/static-html.js";
 import "@justeattakeaway/pie-webc-core";
@@ -37,6 +37,8 @@ export {
   T as PieNotification,
   d as componentClass,
   k as componentSelector,
-  F as headingLevels,
-  S as variants
+  F as defaultProps,
+  S as headingLevels,
+  V as positions,
+  u as variants
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-notification",
   "description": "PIE Design System Notification built using Web Components",
-  "version": "0.5.5",
+  "version": "0.6.1",
   "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,5 +1,8 @@
+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 ActionProps = {
   /**
@@ -19,6 +22,11 @@ export interface NotificationProps {
    */
   variant?: typeof variants[number];
 
+  /**
+   * The position of the notification defining proper styles if the component appear within the content or at the top of the interface.
+   */
+  position?: typeof positions[number];
+
   /**
    * When true, allows dismissing the notification by clicking on the close button.
    */
@@ -95,3 +103,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

@@ -12,6 +12,7 @@ import {
     type NotificationProps,
     type ActionProps,
     variants,
+    positions,
     headingLevels,
     componentSelector,
     componentClass,
@@ -19,6 +20,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';
 
@@ -42,30 +44,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, 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';
-
-    @property({ type: Boolean })
-    public hideIcon = false;
+    @validPropertyValues(componentSelector, headingLevels, defaultProps.headingLevel)
+    public headingLevel: NonNullable<NotificationProps['headingLevel']> = defaultProps.headingLevel;
 
     @property({ type: Boolean })
-    public hideCloseIcon = false;
+    public hideIcon = defaultProps.hideIcon;
 
     @property({ type: Object })
     public leadingAction!: NotificationProps['leadingAction'];
@@ -74,7 +77,7 @@ export class PieNotification extends LitElement implements NotificationProps {
     public supportingAction!: NotificationProps['supportingAction'];
 
     @property({ type: Boolean })
-    public hasStackedActions = false;
+    public hasStackedActions = defaultProps.hasStackedActions;
 
     @queryAssignedElements({ slot: 'icon' }) _iconSlot!: Array<HTMLElement>;
 
@@ -84,19 +87,9 @@ export class PieNotification extends LitElement implements NotificationProps {
     @state()
     protected _hasIconClass = false;
 
-    @state()
-    protected _hasContentGutter = false;
-
     // Renders a `CSSResult` generated from SCSS by Vite
     static styles = unsafeCSS(styles);
 
-    /**
-     * Lifecycle method executed after component renders.
-     */
-    protected firstUpdated (): void {
-        this.updateIconProperties();
-    }
-
     /**
      * Lifecycle method executed when component is about to update.
      * It update icon properties if variant has changes.
@@ -116,10 +109,6 @@ export class PieNotification extends LitElement implements NotificationProps {
         if (_changedProperties.has('isOpen') && this.isOpen) {
             dispatchCustomEvent(this, ON_NOTIFICATION_OPEN_EVENT, { targetNotification: this });
         }
-
-        if (_changedProperties.has('heading') || _changedProperties.has('isDismissible') || _changedProperties.has('isCompact')) {
-            this._hasContentGutter = (this.heading === '' || this.heading === undefined) && (this.isDismissible && !this.isCompact);
-        }
     }
 
     /**
@@ -158,11 +147,7 @@ export class PieNotification extends LitElement implements NotificationProps {
      * @private
      */
     private renderNotificationHeading (heading: NotificationProps['heading'], headingTag: StaticValue): TemplateResult {
-        return html`
-            <header class="${componentClass}-header" data-test-id="${componentSelector}-header">
-                <${headingTag} class="${componentClass}-heading" data-test-id="${componentSelector}-heading">${heading}</${headingTag}>
-            </header>
-        `;
+        return html`<${headingTag} class="${componentClass}-heading" data-test-id="${componentSelector}-heading">${heading}</${headingTag}>`;
     }
 
     /**
@@ -188,13 +173,13 @@ export class PieNotification extends LitElement implements NotificationProps {
     private getDefaultVariantIcon (variant: NonNullable<NotificationProps['variant']>) {
         switch (variant) {
             case 'info':
-                return html`<icon-info-circle size="s" data-test-id="${componentSelector}-heading-icon-info"></icon-info-circle>`;
+                return html`<icon-info-circle size="m" data-test-id="${componentSelector}-heading-icon-info"></icon-info-circle>`;
             case 'success':
-                return html`<icon-check-circle size="s" data-test-id="${componentSelector}-heading-icon-success"></icon-check-circle>`;
+                return html`<icon-check-circle size="m" data-test-id="${componentSelector}-heading-icon-success"></icon-check-circle>`;
             case 'warning':
-                return html`<icon-alert-triangle size="s" data-test-id="${componentSelector}-heading-icon-warning"></icon-alert-triangle>`;
+                return html`<icon-alert-triangle size="m" data-test-id="${componentSelector}-heading-icon-warning"></icon-alert-triangle>`;
             case 'error':
-                return html`<icon-alert-circle size="s" data-test-id="${componentSelector}-heading-icon-error"></icon-alert-circle>`;
+                return html`<icon-alert-circle size="m" data-test-id="${componentSelector}-heading-icon-error"></icon-alert-circle>`;
             default:
                 return nothing as never;
         }
@@ -323,6 +308,7 @@ export class PieNotification extends LitElement implements NotificationProps {
     render () {
         const {
             variant,
+            position,
             heading,
             headingLevel,
             isDismissible,
@@ -333,20 +319,26 @@ export class PieNotification extends LitElement implements NotificationProps {
             leadingAction,
             supportingAction,
             isOpen,
-            _hasContentGutter,
         } = this;
 
         if (!isOpen) {
             return nothing;
         }
 
-        return html`
-            <div data-test-id="${componentSelector}" class="${componentClass}" variant="${variant}" ?isCompact="${isCompact}">
-                ${isDismissible && !isCompact ? this.renderCloseButton() : nothing}
+        const showCloseButton = isDismissible && !isCompact;
 
-                <section class="${componentClass}-content-section">
+        return html`
+            <div
+                data-test-id="${componentSelector}"
+                class="${componentClass}"
+                variant="${variant}"
+                position="${position}"
+                ?isCompact="${isCompact}">
+                ${showCloseButton ? this.renderCloseButton() : nothing}
+
+                <section class="${componentClass}-content-section" ?isDismissible="${showCloseButton}">
                     ${!hideIcon ? this.renderIcon(variant, _hasExternalIcon, _hasIconClass) : nothing}
-                    <article ?hasGutter="${_hasContentGutter}">
+                    <article>
                         ${heading ? this.renderNotificationHeading(heading, unsafeStatic(headingLevel)) : nothing}
                         <slot></slot>
                     </article>

package/src/notification.scss

@@ -1,17 +1,18 @@
 @use '@justeattakeaway/pie-css/scss' as p;
 
 .c-notification {
-    $breakpoint-narrow: 640px;
+    $breakpoint-wide: 768px;
 
     --notification-border-radius: var(--dt-radius-rounded-c);
     --notification-background-color: var(--dt-color-container-subtle);
     --notification-direction: column;
-    --notification-icon-size-override: 22px;
-    --notification-heading-font-size: #{p.font-size(--dt-font-size-20)};
-    --notification-heading-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
-    --notification-font-size: #{p.font-size(--dt-font-size-16)};
-    --notification-line-height: calc(var(--dt-font-size-16-line-height) * 1px);
+    --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-font-size: #{p.font-size(--dt-font-body-l-size)};
+    --notification-line-height: #{p.line-height(--dt-font-body-l-line-height)};
     --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);
@@ -23,21 +24,14 @@
     font-size: var(--notification-font-size);
     line-height: var(--notification-line-height);
 
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-        margin: 0;
-        font-size: var(--notification-heading-font-size);
-        line-height: var(--notification-heading-line-height);
-    }
-
     &[isCompact] {
         --notification-direction: row;
     }
 
+    &[position='full-width'] {
+        --notification-border-radius: var(--dt-radius-rounded-none);
+    }
+
     &[variant='neutral-alternative'] {
         --notification-background-color: var(--dt-color-container-default);
     }
@@ -60,31 +54,42 @@
         --notification-icon-fill: var(--dt-color-red);
     }
 
-    &-content-section {
-        display: flex;
-        flex-direction: row;
 
-        article {
-            &[hasGutter] {
-                padding-inline-end: var(--dt-spacing-e);
-            }
+    &-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: $breakpoint-wide) {
+            --notification-heading-font-size: #{p.font-size(--dt-font-heading-s-size--wide)};
+            --notification-heading-line-height: #{p.line-height(--dt-font-heading-s-line-height--wide)};
         }
+    }
 
+    &-content-section {
+        display: flex;
+        flex-direction: row;
+    
         .has-icon {
             display: block ruby; // This is a hack to avoid the icon overlap the text in Firefox
             margin-inline-end: var(--dt-spacing-c);
         }
+
+        &[isDismissible] {
+            max-width: calc(100% - var(--notification-close-icon-offset) - 40px); // 40px is the size of the medium icon button
+        }
     }
 
     &-heading-icon {
-        padding-block-start: var(--dt-spacing-a);
+        padding-block-start: var(--notification-heading-icon-offset);
         color: var(--notification-icon-fill);
     }
 
     &-icon-close {
         position: absolute;
-        inset-block-start: var(--dt-spacing-b);
-        inset-inline-end: var(--dt-spacing-b);
+        inset-block-start: var(--notification-close-icon-offset);
+        inset-inline-end: var(--notification-close-icon-offset);
     }
 
     &-footer {
@@ -97,9 +102,9 @@
             align-self: flex-end;
         }
 
-        @media (max-width: $breakpoint-narrow) {
+        @media (max-width: $breakpoint-wide) {
             &[isStacked] {
-                flex-direction: column;
+                flex-direction: column-reverse;
             }
         }
     }