@justeattakeaway/pie-notification 0.8.0 → 0.9.1

package/README.md

@@ -29,11 +29,9 @@ This component can be easily integrated into various frontend frameworks and cus
 To install `pie-notification` in your application, run the following on your command line:
 
 ```bash
-# npm
-$ npm i @justeattakeaway/pie-notification
+npm i @justeattakeaway/pie-notification
 
-# yarn
-$ yarn add @justeattakeaway/pie-notification
+yarn add @justeattakeaway/pie-notification
 ```
 
 For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).
@@ -92,4 +90,4 @@ In your markup or JSX, you can then use these to set the properties for the `pie
 
 ## Contributing
 
-Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).
+Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).

package/custom-elements.json

@@ -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",

package/dist/index.d.ts

@@ -70,6 +70,7 @@ export declare interface NotificationProps {
     leadingAction?: ActionProps;
     /**
      * The supporting action for the notification.
+     * Will only render if `leadingAction` is passed
      */
     supportingAction?: ActionProps;
     /**
@@ -132,26 +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.
      */
     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.
@@ -163,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,39 +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.
    */
   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
@@ -59,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}
@@ -71,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>
         `;
   }
   /**
@@ -159,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>`;
   }
@@ -171,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.
@@ -190,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.
@@ -202,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"
@@ -212,7 +167,7 @@ class n extends k {
                 data-test-id="${t}-${o}-action"
                 ?isFullWidth="${this.hasStackedActions}"
                 type="button">
-                ${a}
+                ${e}
             </pie-button>
         ` : c;
   }
@@ -220,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

@@ -71,6 +71,7 @@ export declare interface NotificationProps {
     leadingAction?: ActionProps;
     /**
      * The supporting action for the notification.
+     * Will only render if `leadingAction` is passed
      */
     supportingAction?: ActionProps;
     /**
@@ -135,26 +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.
      */
     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.
@@ -166,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.8.0",
+  "version": "0.9.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -13,7 +13,7 @@
     "**/*.d.ts"
   ],
   "pieMetadata": {
-    "componentStatus": "alpha"
+    "componentStatus": "beta"
   },
   "scripts": {
     "build": "run -T vite build",
@@ -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

@@ -69,6 +69,7 @@ export interface NotificationProps {
 
   /**
    * The supporting action for the notification.
+   * Will only render if `leadingAction` is passed
    */
   supportingAction?: ActionProps;
 

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,
@@ -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,25 +85,9 @@ 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.
@@ -114,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}
@@ -144,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>
         `;
     }
 
@@ -242,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>`;
     }
@@ -319,14 +258,10 @@ export class PieNotification extends LitElement implements NotificationProps {
             variant,
             position,
             heading,
-            headingLevel,
             isDismissible,
             isCompact,
-            _hasExternalIcon,
             hideIcon,
-            _hasIconClass,
             leadingAction,
-            supportingAction,
             isOpen,
             aria,
         } = this;
@@ -351,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;
+    }
+}