@justeattakeaway/pie-notification 0.5.5 → 0.6.0

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",
@@ -86,6 +94,14 @@
             "module": "src/defs.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "positions",
+          "declaration": {
+            "name": "positions",
+            "module": "src/defs.js"
+          }
+        },
         {
           "kind": "js",
           "name": "componentSelector",
@@ -165,6 +181,16 @@
               "default": "'neutral'",
               "attribute": "variant"
             },
+            {
+              "kind": "field",
+              "name": "position",
+              "type": {
+                "text": "NonNullable<NotificationProps['position']>"
+              },
+              "privacy": "public",
+              "default": "'inline-content'",
+              "attribute": "position"
+            },
             {
               "kind": "field",
               "name": "isDismissible",
@@ -214,16 +240,6 @@
               "default": "false",
               "attribute": "hideIcon"
             },
-            {
-              "kind": "field",
-              "name": "hideCloseIcon",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "attribute": "hideCloseIcon"
-            },
             {
               "kind": "field",
               "name": "leadingAction",
@@ -277,15 +293,6 @@
               "privacy": "protected",
               "default": "false"
             },
-            {
-              "kind": "field",
-              "name": "_hasContentGutter",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "protected",
-              "default": "false"
-            },
             {
               "kind": "method",
               "name": "updateIconProperties",
@@ -523,6 +530,14 @@
               "default": "'neutral'",
               "fieldName": "variant"
             },
+            {
+              "name": "position",
+              "type": {
+                "text": "NonNullable<NotificationProps['position']>"
+              },
+              "default": "'inline-content'",
+              "fieldName": "position"
+            },
             {
               "name": "isDismissible",
               "type": {
@@ -562,14 +577,6 @@
               "default": "false",
               "fieldName": "hideIcon"
             },
-            {
-              "name": "hideCloseIcon",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "hideCloseIcon"
-            },
             {
               "name": "leadingAction",
               "type": {

package/dist/index.d.ts

@@ -26,6 +26,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 +106,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 +232,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 { 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 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 { 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 "@justeattakeaway/pie-button";
 import "@justeattakeaway/pie-icon-button";
 import "@justeattakeaway/pie-icons-webc/dist/IconAlertCircle.js";
@@ -9,37 +9,31 @@ 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 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}}
 `;
-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, 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;
 };
-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 = !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;
   }
   /**
    * 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 && u(this, V, { targetNotification: this });
   }
   /**
    * Method responsible to check if an external icon has been provided.
@@ -56,11 +50,11 @@ class n extends N {
    *
    * @private
    */
-  renderFooter(t, i) {
+  renderFooter(i, t) {
     return l`
             <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 +67,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 l`<${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 +77,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 +87,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 l`<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 l`<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 l`<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 l`<icon-alert-circle size="m" data-test-id="${o}-heading-icon-error"></icon-alert-circle>`;
       default:
-        return a;
+        return c;
     }
   }
   /**
@@ -119,8 +109,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 +122,10 @@ class n extends N {
    *
    * @private
    */
-  renderIcon(t, i, c) {
+  renderIcon(i, t, a) {
     return l`
-            <div data-test-id="${o}-icon-area" class="${c ? "has-icon " : ""}${h}-heading-icon">
-                ${i ? a : this.renderIconVariant(t)}
+            <div data-test-id="${o}-icon-area" class="${a ? "has-icon " : ""}${h}-heading-icon">
+                ${t ? c : this.renderIconVariant(i)}
                 <slot name="icon"></slot>
             </div>
         `;
@@ -165,7 +155,7 @@ class n extends N {
    * @private
    */
   handleCloseButton() {
-    this.closeNotificationComponent(), u(this, z, { targetNotification: this });
+    this.closeNotificationComponent(), u(this, S, { targetNotification: this });
   }
   /**
    * Util method responsible to close the component.
@@ -183,8 +173,8 @@ class n extends N {
    *
    * @private
    */
-  handleActionClick(t) {
-    u(this, t === "leading" ? V : w, { targetNotification: this });
+  handleActionClick(i) {
+    u(this, i === "leading" ? T : B, { targetNotification: this });
   }
   /**
    * Render the action button depending on action type and its action.
@@ -195,60 +185,72 @@ 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: r } = i;
+    return a ? l`
             <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="${r || 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,
-      hideIcon: C,
-      _hasIconClass: $,
+      variant: i,
+      position: t,
+      heading: a,
+      headingLevel: r,
+      isDismissible: d,
+      isCompact: f,
+      _hasExternalIcon: b,
+      hideIcon: I,
+      _hasIconClass: C,
       leadingAction: v,
-      supportingAction: I,
-      isOpen: b,
-      _hasContentGutter: y
+      supportingAction: y,
+      isOpen: _
     } = this;
-    return b ? l`
-            <div data-test-id="${o}" class="${h}" variant="${t}" ?isCompact="${d}">
-                ${r && !d ? this.renderCloseButton() : a}
+    if (!_)
+      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}
 
-                <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="${m}">
+                    ${I ? c : this.renderIcon(i, b, C)}
+                    <article>
+                        ${a ? this.renderNotificationHeading(a, O(r)) : c}
                         <slot></slot>
                     </article>
                 </section>
 
-                ${v ? this.renderFooter(v, I) : a}
-            </div>` : a;
+                ${v ? this.renderFooter(v, y) : c}
+            </div>`;
   }
 }
-n.styles = _(T);
+n.styles = N(D);
 e([
   s({ type: Boolean })
 ], n.prototype, "isOpen", 2);
 e([
   s(),
-  m(o, k, "neutral")
+  g(o, k, "neutral")
 ], n.prototype, "variant", 2);
+e([
+  s(),
+  g(o, z, "inline-content")
+], n.prototype, "position", 2);
 e([
   s({ type: Boolean })
 ], n.prototype, "isDismissible", 2);
@@ -260,14 +262,11 @@ e([
 ], n.prototype, "heading", 2);
 e([
   s(),
-  m(o, A, "h2")
+  g(o, A, "h2")
 ], n.prototype, "headingLevel", 2);
 e([
   s({ type: Boolean })
 ], n.prototype, "hideIcon", 2);
-e([
-  s({ type: Boolean })
-], n.prototype, "hideCloseIcon", 2);
 e([
   s({ type: Object })
 ], n.prototype, "leadingAction", 2);
@@ -278,26 +277,24 @@ e([
   s({ 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);
+E(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,
+  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,
   n as PieNotification,
   h as componentClass,
   o as componentSelector,
   A as headingLevels,
+  z as positions,
   k as variants
 };

package/dist/react.d.ts

@@ -27,6 +27,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 +109,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 +242,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, headingLevels as F, positions as S, variants as V } from "./index.js";
 import "lit";
 import "lit/static-html.js";
 import "@justeattakeaway/pie-webc-core";
@@ -38,5 +38,6 @@ export {
   d as componentClass,
   k as componentSelector,
   F as headingLevels,
-  S as variants
+  S 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.5.5",
+  "version": "0.6.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/defs.ts

@@ -1,5 +1,6 @@
 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 +20,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.
    */

package/src/index.ts

@@ -12,6 +12,7 @@ import {
     type NotificationProps,
     type ActionProps,
     variants,
+    positions,
     headingLevels,
     componentSelector,
     componentClass,
@@ -48,6 +49,10 @@ export class PieNotification extends LitElement implements NotificationProps {
     @validPropertyValues(componentSelector, variants, 'neutral')
     public variant: NonNullable<NotificationProps['variant']> = 'neutral';
 
+    @property()
+    @validPropertyValues(componentSelector, positions, 'inline-content')
+    public position: NonNullable<NotificationProps['position']> = 'inline-content';
+
     @property({ type: Boolean })
     public isDismissible = true;
 
@@ -64,9 +69,6 @@ export class PieNotification extends LitElement implements NotificationProps {
     @property({ type: Boolean })
     public hideIcon = false;
 
-    @property({ type: Boolean })
-    public hideCloseIcon = false;
-
     @property({ type: Object })
     public leadingAction!: NotificationProps['leadingAction'];
 
@@ -84,19 +86,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 +108,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 +146,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 +172,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 +307,7 @@ export class PieNotification extends LitElement implements NotificationProps {
     render () {
         const {
             variant,
+            position,
             heading,
             headingLevel,
             isDismissible,
@@ -333,20 +318,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;
             }
         }
     }