@justeattakeaway/pie-notification 0.7.0 → 0.9.0

package/custom-elements.json

@@ -217,7 +217,7 @@
               "kind": "field",
               "name": "heading",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
               "privacy": "public",
               "attribute": "heading"
@@ -277,49 +277,10 @@
                 "text": "Array<HTMLElement>"
               }
             },
-            {
-              "kind": "field",
-              "name": "_hasExternalIcon",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "protected",
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "_hasIconClass",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "protected",
-              "default": "false"
-            },
-            {
-              "kind": "method",
-              "name": "updateIconProperties",
-              "privacy": "private",
-              "description": "Method responsible to check if an external icon has been provided.\nIt reads from icon slot if there is an external icon as well check if variant has default icon."
-            },
             {
               "kind": "method",
               "name": "renderFooter",
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "leadingAction",
-                  "type": {
-                    "text": "ActionProps"
-                  }
-                },
-                {
-                  "name": "supportingAction",
-                  "optional": true,
-                  "type": {
-                    "text": "ActionProps"
-                  }
-                }
-              ],
               "description": "Template for the footer area\nCalled within the main render function."
             },
             {
@@ -331,64 +292,14 @@
                   "text": "TemplateResult"
                 }
               },
-              "parameters": [
-                {
-                  "name": "heading",
-                  "type": {
-                    "text": "NotificationProps['heading']"
-                  }
-                },
-                {
-                  "name": "headingTag",
-                  "type": {
-                    "text": "StaticValue"
-                  }
-                }
-              ],
               "description": "Template for the header area\nCalled within the main render function."
             },
-            {
-              "kind": "method",
-              "name": "variantHasDefaultIcon",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "variant",
-                  "type": {
-                    "text": "NonNullable<NotificationProps['variant']>"
-                  }
-                }
-              ],
-              "description": "Util method that returns a boolean if variant has a default icon."
-            },
             {
               "kind": "method",
               "name": "getDefaultVariantIcon",
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "variant",
-                  "type": {
-                    "text": "NonNullable<NotificationProps['variant']>"
-                  }
-                }
-              ],
               "description": "Util method that returns an icon from a variant that has default icon."
             },
-            {
-              "kind": "method",
-              "name": "renderIconVariant",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "variant",
-                  "type": {
-                    "text": "NonNullable<NotificationProps['variant']>"
-                  }
-                }
-              ],
-              "description": "Util method that returns a template with a default icon according to the chosen variant.\nCalled within the renderIcon method."
-            },
             {
               "kind": "method",
               "name": "renderIcon",
@@ -398,27 +309,7 @@
                   "text": "TemplateResult | typeof nothing"
                 }
               },
-              "parameters": [
-                {
-                  "name": "variant",
-                  "type": {
-                    "text": "NonNullable<NotificationProps['variant']>"
-                  }
-                },
-                {
-                  "name": "hasExternalIcon",
-                  "type": {
-                    "text": "boolean"
-                  }
-                },
-                {
-                  "name": "hasIconClass",
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ],
-              "description": "Template for the heading icon area.\nIt can return an icon provided externally via named slot or it can return an default icon according to the chosen variant.\nCalled within the main render function."
+              "description": "Template for the heading icon area.\nIt can return an icon provided externally via named slot or it can return a default icon according to the chosen variant if defined.\nCalled within the main render function."
             },
             {
               "kind": "method",
@@ -545,7 +436,7 @@
             {
               "name": "heading",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
               "fieldName": "heading"
             },

package/dist/index.d.ts

@@ -33,11 +33,11 @@ export declare const headingLevels: readonly ["h2", "h3", "h4", "h5", "h6"];
 
 export declare interface NotificationProps {
     /**
-     * Set the variant of the notification.
+     * Sets 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.
+     * Defines the proper styles, whether the component appears within the content or at the top of the interface
      */
     position?: typeof positions[number];
     /**
@@ -45,7 +45,7 @@ export declare interface NotificationProps {
      */
     isDismissible?: boolean;
     /**
-     * When true, the footer aligns to the header and icons which makes the component compact.
+     * When true, aligns the footer with the header and icons, making the component compact.
      */
     isCompact?: boolean;
     /**
@@ -57,7 +57,7 @@ export declare interface NotificationProps {
      */
     headingLevel?: typeof headingLevels[number];
     /**
-     * Option to hide the icon regardless its variant or if user provided an icon.
+     * When true, the icon will be hidden.
      */
     hideIcon?: boolean;
     /**
@@ -70,10 +70,11 @@ export declare interface NotificationProps {
     leadingAction?: ActionProps;
     /**
      * The supporting action for the notification.
+     * Will only render if `leadingAction` is passed
      */
     supportingAction?: ActionProps;
     /**
-     * When true, the notification will stack the action buttons on narrow screens.
+     * When true, action buttons will stack on narrow screens.
      */
     hasStackedActions?: boolean;
     /**
@@ -124,7 +125,7 @@ export declare class PieNotification extends LitElement implements NotificationP
     position: NonNullable<NotificationProps['position']>;
     isDismissible: boolean;
     isCompact: boolean;
-    heading: string;
+    heading?: string;
     headingLevel: NonNullable<NotificationProps['headingLevel']>;
     hideIcon: boolean;
     leadingAction: NotificationProps['leadingAction'];
@@ -132,27 +133,12 @@ export declare class PieNotification extends LitElement implements NotificationP
     hasStackedActions: boolean;
     aria: NotificationProps['aria'];
     _iconSlot: Array<HTMLElement>;
-    protected _hasExternalIcon: boolean;
-    protected _hasIconClass: boolean;
     static styles: CSSResult;
-    /**
-     * Lifecycle method executed when component is about to update.
-     * It update icon properties if variant has changes.
-     */
-    protected willUpdate(_changedProperties: PropertyValues<this>): void;
     /**
      * 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.
      */
     protected updated(_changedProperties: PropertyValues<this>): void;
-    /**
-     * Method responsible to check if an external icon has been provided.
-     * It reads from icon slot if there is an external icon as well check if variant has default icon.
-     *
-     * @private
-     */
-    private updateIconProperties;
     /**
      * Template for the footer area
      * Called within the main render function.
@@ -164,45 +150,20 @@ export declare class PieNotification extends LitElement implements NotificationP
      * Template for the header area
      * Called within the main render function.
      *
-     * @param {NotificationProps['heading']} heading
-     * @param {StaticValue} headingTag
-     *
      * @private
      */
     private renderNotificationHeading;
-    /**
-     * Util method that returns a boolean if variant has a default icon.
-     *
-     * @param {NonNullable<NotificationProps['variant']>} variant
-     *
-     * @private
-     */
-    private variantHasDefaultIcon;
     /**
      * Util method that returns an icon from a variant that has default icon.
      *
-     * @param {NonNullable<NotificationProps['variant']>} variant
-     *
      * @private
      */
     private getDefaultVariantIcon;
-    /**
-     * Util method that returns a template with a default icon according to the chosen variant.
-     * Called within the renderIcon method.
-     *
-     * @param {NonNullable<NotificationProps['variant']>} variant
-     *
-     * @private
-     */
-    private renderIconVariant;
     /**
      * Template for the heading icon area.
-     * It can return an icon provided externally via named slot or it can return an default icon according to the chosen variant.
+     * It can return an icon provided externally via named slot or it can return a default icon according to the chosen variant if defined.
      * Called within the main render function.
      *
-     * @param {NonNullable<NotificationProps['variant']>} variant
-     * @param {boolean} hasExternalIcon
-     *
      * @private
      */
     private renderIcon;

package/dist/index.js

@@ -1,8 +1,8 @@
-import { unsafeCSS as E, LitElement as k, nothing as c } from "lit";
-import { html as d, unsafeStatic as w } from "lit/static-html.js";
-import { validPropertyValues as m, defineCustomElement as A, dispatchCustomEvent as v } from "@justeattakeaway/pie-webc-core";
-import { property as r, queryAssignedElements as z, state as C } from "lit/decorators.js";
-import { ifDefined as I } from "lit/directives/if-defined.js";
+import { unsafeCSS as O, LitElement as x, nothing as c } from "lit";
+import { html as d, unsafeStatic as N } from "lit/static-html.js";
+import { validPropertyValues as b, defineCustomElement as I, dispatchCustomEvent as m } from "@justeattakeaway/pie-webc-core";
+import { property as r, queryAssignedElements as _ } from "lit/decorators.js";
+import { ifDefined as y } from "lit/directives/if-defined.js";
 import "@justeattakeaway/pie-button";
 import "@justeattakeaway/pie-icon-button";
 import "@justeattakeaway/pie-icons-webc/dist/IconAlertCircle.js";
@@ -10,7 +10,7 @@ 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 S = ["neutral", "neutral-alternative", "info", "success", "warning", "error"], D = ["h2", "h3", "h4", "h5", "h6"], V = ["inline-content", "full-width"], t = "pie-notification", h = "c-notification", T = `${t}-close`, B = `${t}-open`, L = `${t}-leading-action-click`, P = `${t}-supporting-action-click`, l = {
+const k = ["neutral", "neutral-alternative", "info", "success", "warning", "error"], w = ["h2", "h3", "h4", "h5", "h6"], A = ["inline-content", "full-width"], t = "pie-notification", h = "c-notification", E = `${t}-close`, z = `${t}-open`, S = `${t}-leading-action-click`, T = `${t}-supporting-action-click`, l = {
   isOpen: !0,
   variant: "neutral",
   position: "inline-content",
@@ -19,40 +19,23 @@ const S = ["neutral", "neutral-alternative", "info", "success", "warning", "erro
   headingLevel: "h2",
   hideIcon: !1,
   hasStackedActions: !1
-}, F = `*,*:after,*:before{box-sizing:inherit}.c-notification{--notification-border-radius: var(--dt-radius-rounded-c);--notification-background-color: var(--dt-color-container-subtle);--notification-direction: column;--notification-heading-font-size: calc(var(--dt-font-heading-s-size--narrow) * 1px);--notification-heading-line-height: calc(var(--dt-font-heading-s-line-height--narrow) * 1px);--notification-font-size: calc(var(--dt-font-body-l-size) * 1px);--notification-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--notification-icon-fill: var(--dt-color-content-default);--notification-close-icon-offset: var(--dt-spacing-b);--notification-heading-icon-offset: 2px;padding:var(--dt-spacing-d);border-radius:var(--notification-border-radius);background-color:var(--notification-background-color);position:relative;display:flex;flex-direction:var(--notification-direction);gap:var(--dt-spacing-d);font-size:var(--notification-font-size);line-height:var(--notification-line-height)}.c-notification[isCompact]{--notification-direction: row}.c-notification[position=full-width]{--notification-border-radius: var(--dt-radius-rounded-none)}.c-notification[variant=neutral-alternative]{--notification-background-color: var(--dt-color-container-default)}.c-notification[variant=info]{--notification-background-color: var(--dt-color-support-info-02);--notification-icon-fill: var(--dt-color-blue)}.c-notification[variant=success]{--notification-background-color: var(--dt-color-support-positive-02)}.c-notification[variant=warning]{--notification-background-color: var(--dt-color-support-warning-02)}.c-notification[variant=error]{--notification-background-color: var(--dt-color-support-error-02);--notification-icon-fill: var(--dt-color-red)}.c-notification-heading{margin:0;margin-block-end:var(--dt-spacing-a);font-size:var(--notification-heading-font-size);line-height:var(--notification-heading-line-height)}@media (min-width: 768px){.c-notification-heading{--notification-heading-font-size: calc(var(--dt-font-heading-s-size--wide) * 1px);--notification-heading-line-height: calc(var(--dt-font-heading-s-line-height--wide) * 1px)}}.c-notification-content-section{display:flex;flex-direction:row}.c-notification-content-section .has-icon{display:block ruby;margin-inline-end:var(--dt-spacing-c)}.c-notification-content-section[isDismissible]{max-width:calc(100% - var(--notification-close-icon-offset) - 40px)}.c-notification-heading-icon{padding-block-start:var(--notification-heading-icon-offset);color:var(--notification-icon-fill)}.c-notification-icon-close{position:absolute;inset-block-start:var(--notification-close-icon-offset);inset-inline-end:var(--notification-close-icon-offset)}.c-notification-footer{display:flex;flex-direction:row;justify-content:flex-end;gap:var(--dt-spacing-d)}.c-notification-footer[isCompact]{align-self:flex-end}@media (max-width: 768px){.c-notification-footer[isStacked]{flex-direction:column-reverse}}
+}, B = `*,*: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-close-icon-offset: var(--dt-spacing-b);--notification-icon-fill: var(--dt-color-content-default);--notification-icon-offset: 2px;--icon-size-override: 24px;padding:var(--dt-spacing-d);border-radius:var(--notification-border-radius);background-color:var(--notification-background-color);position:relative;display:flex;flex-direction:var(--notification-direction);gap:var(--dt-spacing-d);font-size:var(--notification-font-size);line-height:var(--notification-line-height)}.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);--notification-icon-fill: var(--dt-color-content-positive)}.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-support-error)}.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;gap:var(--dt-spacing-c)}.c-notification-content-section[isDismissible]{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[isCompact]{align-self:flex-end}@media (max-width: 768px){.c-notification-footer[isStacked]{flex-direction:column-reverse}}.icon,::slotted([slot=icon]){display:inline-flex;color:var(--notification-icon-fill);margin-block-start:var(--notification-icon-offset)}@media (max-width: 768px){.icon,::slotted([slot=icon]){margin-block-start:0}}
 `;
-var j = Object.defineProperty, H = Object.getOwnPropertyDescriptor, e = (u, i, o, a) => {
-  for (var s = a > 1 ? void 0 : a ? H(i, o) : i, f = u.length - 1, p; f >= 0; f--)
-    (p = u[f]) && (s = (a ? p(i, o, s) : p(s)) || s);
-  return a && s && j(i, o, s), s;
+var D = Object.defineProperty, L = Object.getOwnPropertyDescriptor, a = (g, i, o, e) => {
+  for (var s = e > 1 ? void 0 : e ? L(i, o) : i, f = g.length - 1, p; f >= 0; f--)
+    (p = g[f]) && (s = (e ? p(i, o, s) : p(s)) || s);
+  return e && s && D(i, o, s), s;
 };
-class n extends k {
+class n extends x {
   constructor() {
-    super(...arguments), this.isOpen = l.isOpen, this.variant = l.variant, this.position = l.position, this.isDismissible = l.isDismissible, this.isCompact = l.isCompact, this.headingLevel = l.headingLevel, this.hideIcon = l.hideIcon, this.hasStackedActions = l.hasStackedActions, this._hasExternalIcon = !1, this._hasIconClass = !1;
-  }
-  /**
-   * Lifecycle method executed when component is about to update.
-   * It update icon properties if variant has changes.
-   */
-  willUpdate(i) {
-    i.has("variant") && this.updateIconProperties();
+    super(...arguments), this.isOpen = l.isOpen, this.variant = l.variant, this.position = l.position, this.isDismissible = l.isDismissible, this.isCompact = l.isCompact, this.headingLevel = l.headingLevel, this.hideIcon = l.hideIcon, this.hasStackedActions = l.hasStackedActions;
   }
   /**
    * 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(i) {
-    i.has("isOpen") && this.isOpen && v(this, B, { targetNotification: this });
-  }
-  /**
-   * Method responsible to check if an external icon has been provided.
-   * It reads from icon slot if there is an external icon as well check if variant has default icon.
-   *
-   * @private
-   */
-  updateIconProperties() {
-    this._hasExternalIcon = this._iconSlot.length > 0, this._hasIconClass = this._hasExternalIcon || this.variantHasDefaultIcon(this.variant);
+    i.has("isOpen") && this.isOpen && m(this, z, { targetNotification: this });
   }
   /**
    * Template for the footer area
@@ -60,7 +43,8 @@ class n extends k {
    *
    * @private
    */
-  renderFooter(i, o) {
+  renderFooter() {
+    const { leadingAction: i, supportingAction: o } = this;
     return d`
             <footer class="${h}-footer" data-test-id="${t}-footer" ?isCompact="${this.isCompact}" ?isStacked="${this.hasStackedActions && !this.isCompact}">
                 ${o ? this.renderActionButton(o, "supporting") : c}
@@ -72,77 +56,48 @@ class n extends k {
    * Template for the header area
    * Called within the main render function.
    *
-   * @param {NotificationProps['heading']} heading
-   * @param {StaticValue} headingTag
-   *
    * @private
    */
-  renderNotificationHeading(i, o) {
-    return d`<${o}
+  renderNotificationHeading() {
+    const { heading: i, headingLevel: o } = this, e = N(o);
+    return d`<${e}
                         id="${t}-heading"
                         class="${h}-heading"
                         data-test-id="${t}-heading">
                             ${i}
-                    </${o}>`;
-  }
-  /**
-   * Util method that returns a boolean if variant has a default icon.
-   *
-   * @param {NonNullable<NotificationProps['variant']>} variant
-   *
-   * @private
-   */
-  variantHasDefaultIcon(i) {
-    return ["info", "success", "warning", "error"].includes(i);
+                    </${e}>`;
   }
   /**
    * Util method that returns an icon from a variant that has default icon.
    *
-   * @param {NonNullable<NotificationProps['variant']>} variant
-   *
    * @private
    */
-  getDefaultVariantIcon(i) {
-    switch (i) {
+  getDefaultVariantIcon() {
+    switch (this.variant) {
       case "info":
-        return d`<icon-info-circle size="m" data-test-id="${t}-heading-icon-info"></icon-info-circle>`;
+        return d`<icon-info-circle class="icon" size="m" data-test-id="${t}-heading-icon-info"></icon-info-circle>`;
       case "success":
-        return d`<icon-check-circle size="m" data-test-id="${t}-heading-icon-success"></icon-check-circle>`;
+        return d`<icon-check-circle class="icon" size="m" data-test-id="${t}-heading-icon-success"></icon-check-circle>`;
       case "warning":
-        return d`<icon-alert-triangle size="m" data-test-id="${t}-heading-icon-warning"></icon-alert-triangle>`;
+        return d`<icon-alert-triangle class="icon" size="m" data-test-id="${t}-heading-icon-warning"></icon-alert-triangle>`;
       case "error":
-        return d`<icon-alert-circle size="m" data-test-id="${t}-heading-icon-error"></icon-alert-circle>`;
+        return d`<icon-alert-circle class="icon" size="m" data-test-id="${t}-heading-icon-error"></icon-alert-circle>`;
       default:
         return c;
     }
   }
-  /**
-   * Util method that returns a template with a default icon according to the chosen variant.
-   * Called within the renderIcon method.
-   *
-   * @param {NonNullable<NotificationProps['variant']>} variant
-   *
-   * @private
-   */
-  renderIconVariant(i) {
-    return this.variantHasDefaultIcon(i) ? this.getDefaultVariantIcon(i) : c;
-  }
   /**
    * Template for the heading icon area.
-   * It can return an icon provided externally via named slot or it can return an default icon according to the chosen variant.
+   * It can return an icon provided externally via named slot or it can return a default icon according to the chosen variant if defined.
    * Called within the main render function.
    *
-   * @param {NonNullable<NotificationProps['variant']>} variant
-   * @param {boolean} hasExternalIcon
-   *
    * @private
    */
-  renderIcon(i, o, a) {
+  renderIcon() {
+    const i = this._iconSlot.length > 0;
     return d`
-            <div data-test-id="${t}-icon-area" class="${a ? "has-icon " : ""}${h}-heading-icon">
-                ${o ? c : this.renderIconVariant(i)}
+                ${i ? c : this.getDefaultVariantIcon()}
                 <slot name="icon"></slot>
-            </div>
         `;
   }
   /**
@@ -160,8 +115,7 @@ class n extends k {
                 class="${h}-icon-close"
                 data-test-id="${t}-icon-close"
                 @click="${this.handleCloseButton}"
-                aria-label="${I((i = this.aria) == null ? void 0 : i.close)}"
-                >
+                aria-label="${y((i = this.aria) == null ? void 0 : i.close)}">
                 <icon-close></icon-close>
             </pie-icon-button>`;
   }
@@ -172,7 +126,7 @@ class n extends k {
    * @private
    */
   handleCloseButton() {
-    this.closeNotificationComponent(), v(this, T, { targetNotification: this });
+    this.closeNotificationComponent(), m(this, E, { targetNotification: this });
   }
   /**
    * Util method responsible to close the component.
@@ -191,7 +145,7 @@ class n extends k {
    * @private
    */
   handleActionClick(i) {
-    v(this, i === "leading" ? L : P, { targetNotification: this });
+    m(this, i === "leading" ? S : T, { targetNotification: this });
   }
   /**
    * Render the action button depending on action type and its action.
@@ -203,8 +157,8 @@ class n extends k {
    * @private
    */
   renderActionButton(i, o) {
-    const { text: a, ariaLabel: s } = i;
-    return a ? d`
+    const { text: e, ariaLabel: s } = i;
+    return e ? d`
             <pie-button
                 variant="${o === "leading" ? "primary" : "ghost"}"
                 size="small-productive"
@@ -213,7 +167,7 @@ class n extends k {
                 data-test-id="${t}-${o}-action"
                 ?isFullWidth="${this.hasStackedActions}"
                 type="button">
-                ${a}
+                ${e}
             </pie-button>
         ` : c;
   }
@@ -221,106 +175,96 @@ class n extends k {
     const {
       variant: i,
       position: o,
-      heading: a,
-      headingLevel: s,
-      isDismissible: f,
-      isCompact: p,
-      _hasExternalIcon: y,
-      hideIcon: _,
-      _hasIconClass: O,
-      leadingAction: b,
-      supportingAction: N,
-      isOpen: x,
-      aria: g
+      heading: e,
+      isDismissible: s,
+      isCompact: f,
+      hideIcon: p,
+      leadingAction: u,
+      isOpen: C,
+      aria: v
     } = this;
-    if (!x)
+    if (!C)
       return c;
-    const $ = f && !p;
+    const $ = s && !f;
     return d`
             <div
                 data-test-id="${t}"
                 class="${h}"
                 variant="${i}"
                 position="${o}"
-                ?isCompact="${p}"
+                ?isCompact="${f}"
                 role="region"
                 aria-live="${i === "error" ? "assertive" : "polite"}"
-                aria-labelledby="${a ? `${t}-heading` : c}"
-                aria-label="${!a && I(g == null ? void 0 : g.label)}">
+                aria-labelledby="${e ? `${t}-heading` : c}"
+                aria-label="${!e && y(v == null ? void 0 : v.label)}">
                 ${$ ? this.renderCloseButton() : c}
 
                 <section class="${h}-content-section" ?isDismissible="${$}">
-                    ${_ ? c : this.renderIcon(i, y, O)}
+                    ${p ? c : this.renderIcon()}
                     <article>
-                        ${a ? this.renderNotificationHeading(a, w(s)) : c}
+                        ${e ? this.renderNotificationHeading() : c}
                         <slot></slot>
                     </article>
                 </section>
 
-                ${b ? this.renderFooter(b, N) : c}
+                ${u != null && u.text ? this.renderFooter() : c}
             </div>`;
   }
 }
-n.styles = E(F);
-e([
+n.styles = O(B);
+a([
   r({ type: Boolean })
 ], n.prototype, "isOpen", 2);
-e([
+a([
   r(),
-  m(t, S, l.variant)
+  b(t, k, l.variant)
 ], n.prototype, "variant", 2);
-e([
+a([
   r(),
-  m(t, V, l.position)
+  b(t, A, l.position)
 ], n.prototype, "position", 2);
-e([
+a([
   r({ type: Boolean })
 ], n.prototype, "isDismissible", 2);
-e([
+a([
   r({ type: Boolean })
 ], n.prototype, "isCompact", 2);
-e([
+a([
   r({ type: String })
 ], n.prototype, "heading", 2);
-e([
+a([
   r(),
-  m(t, D, l.headingLevel)
+  b(t, w, l.headingLevel)
 ], n.prototype, "headingLevel", 2);
-e([
+a([
   r({ type: Boolean })
 ], n.prototype, "hideIcon", 2);
-e([
+a([
   r({ type: Object })
 ], n.prototype, "leadingAction", 2);
-e([
+a([
   r({ type: Object })
 ], n.prototype, "supportingAction", 2);
-e([
+a([
   r({ type: Boolean })
 ], n.prototype, "hasStackedActions", 2);
-e([
+a([
   r({ type: Object })
 ], n.prototype, "aria", 2);
-e([
-  z({ slot: "icon" })
+a([
+  _({ slot: "icon" })
 ], n.prototype, "_iconSlot", 2);
-e([
-  C()
-], n.prototype, "_hasExternalIcon", 2);
-e([
-  C()
-], n.prototype, "_hasIconClass", 2);
-A(t, n);
+I(t, n);
 export {
-  T as ON_NOTIFICATION_CLOSE_EVENT,
-  L as ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT,
-  B as ON_NOTIFICATION_OPEN_EVENT,
-  P as ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT,
+  E as ON_NOTIFICATION_CLOSE_EVENT,
+  S as ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT,
+  z as ON_NOTIFICATION_OPEN_EVENT,
+  T as ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT,
   n as PieNotification,
   h as componentClass,
   t as componentSelector,
   l as defaultProps,
-  D as headingLevels,
-  V as positions,
-  S as variants
+  w as headingLevels,
+  A as positions,
+  k as variants
 };

package/dist/react.d.ts

@@ -34,11 +34,11 @@ export declare const headingLevels: readonly ["h2", "h3", "h4", "h5", "h6"];
 
 export declare interface NotificationProps {
     /**
-     * Set the variant of the notification.
+     * Sets 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.
+     * Defines the proper styles, whether the component appears within the content or at the top of the interface
      */
     position?: typeof positions[number];
     /**
@@ -46,7 +46,7 @@ export declare interface NotificationProps {
      */
     isDismissible?: boolean;
     /**
-     * When true, the footer aligns to the header and icons which makes the component compact.
+     * When true, aligns the footer with the header and icons, making the component compact.
      */
     isCompact?: boolean;
     /**
@@ -58,7 +58,7 @@ export declare interface NotificationProps {
      */
     headingLevel?: typeof headingLevels[number];
     /**
-     * Option to hide the icon regardless its variant or if user provided an icon.
+     * When true, the icon will be hidden.
      */
     hideIcon?: boolean;
     /**
@@ -71,10 +71,11 @@ export declare interface NotificationProps {
     leadingAction?: ActionProps;
     /**
      * The supporting action for the notification.
+     * Will only render if `leadingAction` is passed
      */
     supportingAction?: ActionProps;
     /**
-     * When true, the notification will stack the action buttons on narrow screens.
+     * When true, action buttons will stack on narrow screens.
      */
     hasStackedActions?: boolean;
     /**
@@ -127,7 +128,7 @@ declare class PieNotification_2 extends LitElement implements NotificationProps
     position: NonNullable<NotificationProps['position']>;
     isDismissible: boolean;
     isCompact: boolean;
-    heading: string;
+    heading?: string;
     headingLevel: NonNullable<NotificationProps['headingLevel']>;
     hideIcon: boolean;
     leadingAction: NotificationProps['leadingAction'];
@@ -135,27 +136,12 @@ declare class PieNotification_2 extends LitElement implements NotificationProps
     hasStackedActions: boolean;
     aria: NotificationProps['aria'];
     _iconSlot: Array<HTMLElement>;
-    protected _hasExternalIcon: boolean;
-    protected _hasIconClass: boolean;
     static styles: CSSResult;
-    /**
-     * Lifecycle method executed when component is about to update.
-     * It update icon properties if variant has changes.
-     */
-    protected willUpdate(_changedProperties: PropertyValues<this>): void;
     /**
      * 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.
      */
     protected updated(_changedProperties: PropertyValues<this>): void;
-    /**
-     * Method responsible to check if an external icon has been provided.
-     * It reads from icon slot if there is an external icon as well check if variant has default icon.
-     *
-     * @private
-     */
-    private updateIconProperties;
     /**
      * Template for the footer area
      * Called within the main render function.
@@ -167,45 +153,20 @@ declare class PieNotification_2 extends LitElement implements NotificationProps
      * Template for the header area
      * Called within the main render function.
      *
-     * @param {NotificationProps['heading']} heading
-     * @param {StaticValue} headingTag
-     *
      * @private
      */
     private renderNotificationHeading;
-    /**
-     * Util method that returns a boolean if variant has a default icon.
-     *
-     * @param {NonNullable<NotificationProps['variant']>} variant
-     *
-     * @private
-     */
-    private variantHasDefaultIcon;
     /**
      * Util method that returns an icon from a variant that has default icon.
      *
-     * @param {NonNullable<NotificationProps['variant']>} variant
-     *
      * @private
      */
     private getDefaultVariantIcon;
-    /**
-     * Util method that returns a template with a default icon according to the chosen variant.
-     * Called within the renderIcon method.
-     *
-     * @param {NonNullable<NotificationProps['variant']>} variant
-     *
-     * @private
-     */
-    private renderIconVariant;
     /**
      * Template for the heading icon area.
-     * It can return an icon provided externally via named slot or it can return an default icon according to the chosen variant.
+     * It can return an icon provided externally via named slot or it can return a default icon according to the chosen variant if defined.
      * Called within the main render function.
      *
-     * @param {NonNullable<NotificationProps['variant']>} variant
-     * @param {boolean} hasExternalIcon
-     *
      * @private
      */
     private renderIcon;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-notification",
   "description": "PIE Design System Notification built using Web Components",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -37,12 +37,12 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.16.0",
-    "@justeattakeaway/pie-wrapper-react": "0.14.0",
+    "@justeattakeaway/pie-wrapper-react": "0.14.1",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-icon-button": "0.28.6",
-    "@justeattakeaway/pie-icons-webc": "0.24.0",
+    "@justeattakeaway/pie-icon-button": "0.28.7",
+    "@justeattakeaway/pie-icons-webc": "0.24.1",
     "@justeattakeaway/pie-webc-core": "0.23.0"
   },
   "volta": {

package/src/defs.ts

@@ -23,12 +23,12 @@ export type ActionProps = {
 
 export interface NotificationProps {
   /**
-   * Set the variant of the notification.
+   * Sets 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.
+   * Defines the proper styles, whether the component appears within the content or at the top of the interface
    */
   position?: typeof positions[number];
 
@@ -38,7 +38,7 @@ export interface NotificationProps {
   isDismissible?: boolean;
 
   /**
-   * When true, the footer aligns to the header and icons which makes the component compact.
+   * When true, aligns the footer with the header and icons, making the component compact.
    */
   isCompact?: boolean;
 
@@ -53,7 +53,7 @@ export interface NotificationProps {
   headingLevel?: typeof headingLevels[number];
 
   /**
-   * Option to hide the icon regardless its variant or if user provided an icon.
+   * When true, the icon will be hidden.
    */
   hideIcon?: boolean;
 
@@ -69,11 +69,12 @@ export interface NotificationProps {
 
   /**
    * The supporting action for the notification.
+   * Will only render if `leadingAction` is passed
    */
   supportingAction?: ActionProps;
 
   /**
-   * When true, the notification will stack the action buttons on narrow screens.
+   * When true, action buttons will stack on narrow screens.
    */
   hasStackedActions?: boolean;
 

package/src/index.ts

@@ -5,9 +5,9 @@ import {
     type TemplateResult,
     type PropertyValues,
 } from 'lit';
-import { type StaticValue, html, unsafeStatic } from 'lit/static-html.js';
+import { html, unsafeStatic } from 'lit/static-html.js';
 import { defineCustomElement, validPropertyValues, dispatchCustomEvent } from '@justeattakeaway/pie-webc-core';
-import { property, queryAssignedElements, state } from 'lit/decorators.js';
+import { property, queryAssignedElements } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import {
     type NotificationProps,
@@ -62,7 +62,7 @@ export class PieNotification extends LitElement implements NotificationProps {
     public isCompact = defaultProps.isCompact;
 
     @property({ type: String })
-    public heading!: string;
+    public heading?: string;
 
     @property()
     @validPropertyValues(componentSelector, headingLevels, defaultProps.headingLevel)
@@ -72,10 +72,10 @@ export class PieNotification extends LitElement implements NotificationProps {
     public hideIcon = defaultProps.hideIcon;
 
     @property({ type: Object })
-    public leadingAction!: NotificationProps['leadingAction'];
+    public leadingAction: NotificationProps['leadingAction'];
 
     @property({ type: Object })
-    public supportingAction!: NotificationProps['supportingAction'];
+    public supportingAction: NotificationProps['supportingAction'];
 
     @property({ type: Boolean })
     public hasStackedActions = defaultProps.hasStackedActions;
@@ -85,29 +85,12 @@ export class PieNotification extends LitElement implements NotificationProps {
 
     @queryAssignedElements({ slot: 'icon' }) _iconSlot!: Array<HTMLElement>;
 
-    @state()
-    protected _hasExternalIcon = false;
-
-    @state()
-    protected _hasIconClass = false;
-
     // Renders a `CSSResult` generated from SCSS by Vite
     static styles = unsafeCSS(styles);
 
-    /**
-     * Lifecycle method executed when component is about to update.
-     * It update icon properties if variant has changes.
-     */
-    protected willUpdate (_changedProperties: PropertyValues<this>): void {
-        if (_changedProperties.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.
      */
     protected updated (_changedProperties: PropertyValues<this>): void {
         if (_changedProperties.has('isOpen') && this.isOpen) {
@@ -115,24 +98,14 @@ export class PieNotification extends LitElement implements NotificationProps {
         }
     }
 
-    /**
-     * Method responsible to check if an external icon has been provided.
-     * It reads from icon slot if there is an external icon as well check if variant has default icon.
-     *
-     * @private
-     */
-    private updateIconProperties () {
-        this._hasExternalIcon = this._iconSlot.length > 0;
-        this._hasIconClass = this._hasExternalIcon || this.variantHasDefaultIcon(this.variant);
-    }
-
     /**
      * Template for the footer area
      * Called within the main render function.
      *
      * @private
      */
-    private renderFooter (leadingAction: ActionProps, supportingAction?: ActionProps) {
+    private renderFooter () {
+        const { leadingAction, supportingAction } = this;
         return html`
             <footer class="${componentClass}-footer" data-test-id="${componentSelector}-footer" ?isCompact="${this.isCompact}" ?isStacked="${this.hasStackedActions && !this.isCompact}">
                 ${supportingAction ? this.renderActionButton(supportingAction, 'supporting') : nothing}
@@ -145,87 +118,53 @@ export class PieNotification extends LitElement implements NotificationProps {
      * Template for the header area
      * Called within the main render function.
      *
-     * @param {NotificationProps['heading']} heading
-     * @param {StaticValue} headingTag
-     *
      * @private
      */
-    private renderNotificationHeading (heading: NotificationProps['heading'], headingTag: StaticValue): TemplateResult {
-        return html`<${headingTag}
+    private renderNotificationHeading (): TemplateResult {
+        const { heading, headingLevel } = this;
+        const tag = unsafeStatic(headingLevel);
+
+        return html`<${tag}
                         id="${componentSelector}-heading"
                         class="${componentClass}-heading"
                         data-test-id="${componentSelector}-heading">
                             ${heading}
-                    </${headingTag}>`;
-    }
-
-    /**
-     * Util method that returns a boolean if variant has a default icon.
-     *
-     * @param {NonNullable<NotificationProps['variant']>} variant
-     *
-     * @private
-     */
-    private variantHasDefaultIcon (variant: NonNullable<NotificationProps['variant']>) {
-        const validVariants = ['info', 'success', 'warning', 'error'];
-
-        return validVariants.includes(variant);
+                    </${tag}>`;
     }
 
     /**
      * Util method that returns an icon from a variant that has default icon.
      *
-     * @param {NonNullable<NotificationProps['variant']>} variant
-     *
      * @private
      */
-    private getDefaultVariantIcon (variant: NonNullable<NotificationProps['variant']>) {
-        switch (variant) {
+    private getDefaultVariantIcon () {
+        switch (this.variant) {
             case 'info':
-                return html`<icon-info-circle size="m" data-test-id="${componentSelector}-heading-icon-info"></icon-info-circle>`;
+                return html`<icon-info-circle class="icon" size="m" data-test-id="${componentSelector}-heading-icon-info"></icon-info-circle>`;
             case 'success':
-                return html`<icon-check-circle size="m" data-test-id="${componentSelector}-heading-icon-success"></icon-check-circle>`;
+                return html`<icon-check-circle class="icon" size="m" data-test-id="${componentSelector}-heading-icon-success"></icon-check-circle>`;
             case 'warning':
-                return html`<icon-alert-triangle size="m" data-test-id="${componentSelector}-heading-icon-warning"></icon-alert-triangle>`;
+                return html`<icon-alert-triangle class="icon" size="m" data-test-id="${componentSelector}-heading-icon-warning"></icon-alert-triangle>`;
             case 'error':
-                return html`<icon-alert-circle size="m" data-test-id="${componentSelector}-heading-icon-error"></icon-alert-circle>`;
+                return html`<icon-alert-circle class="icon" size="m" data-test-id="${componentSelector}-heading-icon-error"></icon-alert-circle>`;
             default:
                 return nothing as never;
         }
     }
 
-    /**
-     * Util method that returns a template with a default icon according to the chosen variant.
-     * Called within the renderIcon method.
-     *
-     * @param {NonNullable<NotificationProps['variant']>} variant
-     *
-     * @private
-     */
-    private renderIconVariant (variant: NonNullable<NotificationProps['variant']>) {
-        if (this.variantHasDefaultIcon(variant)) {
-            return this.getDefaultVariantIcon(variant);
-        }
-
-        return nothing;
-    }
-
     /**
      * Template for the heading icon area.
-     * It can return an icon provided externally via named slot or it can return an default icon according to the chosen variant.
+     * It can return an icon provided externally via named slot or it can return a default icon according to the chosen variant if defined.
      * Called within the main render function.
      *
-     * @param {NonNullable<NotificationProps['variant']>} variant
-     * @param {boolean} hasExternalIcon
-     *
      * @private
      */
-    private renderIcon (variant: NonNullable<NotificationProps['variant']>, hasExternalIcon: boolean, hasIconClass: boolean): TemplateResult | typeof nothing {
+    private renderIcon (): TemplateResult | typeof nothing {
+        const hasExternalIcon = this._iconSlot.length > 0;
+
         return html`
-            <div data-test-id="${componentSelector}-icon-area" class="${hasIconClass ? 'has-icon ' : ''}${componentClass}-heading-icon">
-                ${!hasExternalIcon ? this.renderIconVariant(variant) : nothing}
+                ${!hasExternalIcon ? this.getDefaultVariantIcon() : nothing}
                 <slot name="icon"></slot>
-            </div>
         `;
     }
 
@@ -243,8 +182,7 @@ export class PieNotification extends LitElement implements NotificationProps {
                 class="${componentClass}-icon-close"
                 data-test-id="${componentSelector}-icon-close"
                 @click="${this.handleCloseButton}"
-                aria-label="${ifDefined(this.aria?.close)}"
-                >
+                aria-label="${ifDefined(this.aria?.close)}">
                 <icon-close></icon-close>
             </pie-icon-button>`;
     }
@@ -320,14 +258,10 @@ export class PieNotification extends LitElement implements NotificationProps {
             variant,
             position,
             heading,
-            headingLevel,
             isDismissible,
             isCompact,
-            _hasExternalIcon,
             hideIcon,
-            _hasIconClass,
             leadingAction,
-            supportingAction,
             isOpen,
             aria,
         } = this;
@@ -352,14 +286,14 @@ export class PieNotification extends LitElement implements NotificationProps {
                 ${showCloseButton ? this.renderCloseButton() : nothing}
 
                 <section class="${componentClass}-content-section" ?isDismissible="${showCloseButton}">
-                    ${!hideIcon ? this.renderIcon(variant, _hasExternalIcon, _hasIconClass) : nothing}
+                    ${!hideIcon ? this.renderIcon() : nothing}
                     <article>
-                        ${heading ? this.renderNotificationHeading(heading, unsafeStatic(headingLevel)) : nothing}
+                        ${heading ? this.renderNotificationHeading() : nothing}
                         <slot></slot>
                     </article>
                 </section>
 
-                ${leadingAction ? this.renderFooter(leadingAction, supportingAction) : nothing}
+                ${leadingAction?.text ? this.renderFooter() : nothing}
             </div>`;
     }
 }

package/src/notification.scss

@@ -1,8 +1,8 @@
 @use '@justeattakeaway/pie-css/scss' as p;
 
-.c-notification {
-    $breakpoint-wide: 768px;
+$breakpoint-wide: 768px;
 
+.c-notification {
     --notification-border-radius: var(--dt-radius-rounded-c);
     --notification-background-color: var(--dt-color-container-subtle);
     --notification-direction: column;
@@ -10,9 +10,10 @@
     --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;
+    --notification-icon-fill: var(--dt-color-content-default);
+    --notification-icon-offset: 2px;
+    --icon-size-override: 24px;
 
     padding: var(--dt-spacing-d);
     border-radius: var(--notification-border-radius);
@@ -43,6 +44,7 @@
 
     &[variant='success'] {
         --notification-background-color: var(--dt-color-support-positive-02);
+        --notification-icon-fill: var(--dt-color-content-positive);
     }
 
     &[variant='warning'] {
@@ -51,7 +53,7 @@
 
     &[variant='error'] {
         --notification-background-color: var(--dt-color-support-error-02);
-        --notification-icon-fill: var(--dt-color-red);
+        --notification-icon-fill: var(--dt-color-support-error);
     }
 
 
@@ -70,22 +72,13 @@
     &-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);
-        }
+        gap: 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(--notification-heading-icon-offset);
-        color: var(--notification-icon-fill);
-    }
-
     &-icon-close {
         position: absolute;
         inset-block-start: var(--notification-close-icon-offset);
@@ -109,3 +102,14 @@
         }
     }
 }
+
+.icon,
+::slotted([slot="icon"]) {
+    display: inline-flex;
+    color: var(--notification-icon-fill);
+    margin-block-start: var(--notification-icon-offset);
+
+    @media (max-width: $breakpoint-wide) {
+        margin-block-start: 0;
+    }
+}