@justeattakeaway/pie-notification 0.4.0 → 0.5.0

package/dist/index.js

@@ -1,24 +1,24 @@
-import { unsafeCSS as m, LitElement as $, nothing as d } from "lit";
-import { html as r, unsafeStatic as I } from "lit/static-html.js";
-import { validPropertyValues as u, defineCustomElement as b } from "@justeattakeaway/pie-webc-core";
-import { property as l, queryAssignedElements as y, state as v } from "lit/decorators.js";
+import { unsafeCSS as _, LitElement as N, nothing as a } from "lit";
+import { html as l, unsafeStatic as O } from "lit/static-html.js";
+import { validPropertyValues as m, defineCustomElement as x, dispatchCustomEvent as u } from "@justeattakeaway/pie-webc-core";
+import { property as s, queryAssignedElements as E, state as g } from "lit/decorators.js";
 import "@justeattakeaway/pie-icon-button";
 import "@justeattakeaway/pie-icons-webc/IconClose";
 import "@justeattakeaway/pie-icons-webc/IconInfoCircle";
 import "@justeattakeaway/pie-icons-webc/IconAlertCircle";
 import "@justeattakeaway/pie-icons-webc/IconAlertTriangle";
 import "@justeattakeaway/pie-icons-webc/IconCheckCircle";
-const x = ["neutral", "neutral-alternative", "info", "success", "warning", "error"], z = ["h2", "h3", "h4", "h5", "h6"], _ = `*,*:after,*:before{box-sizing:inherit}.c-notification{--notification-border-radius: var(--dt-radius-rounded-c);--notification-background-color: var(--dt-color-container-subtle);--notification-direction: column;--notification-icon-size-override: 22px;--notification-heading-font-size: calc(var(--dt-font-size-20) * 1px);--notification-heading-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--notification-font-size: calc(var(--dt-font-size-16) * 1px);--notification-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--notification-icon-fill: var(--dt-color-content-default);padding:var(--dt-spacing-d);border-radius:var(--notification-border-radius);background-color:var(--notification-background-color);position:relative;display:flex;flex-direction:var(--notification-direction);gap:var(--dt-spacing-d);font-size:var(--notification-font-size);line-height:var(--notification-line-height)}.c-notification h1,.c-notification h2,.c-notification h3,.c-notification h4,.c-notification h5,.c-notification h6{margin:0;font-size:var(--notification-heading-font-size);line-height:var(--notification-heading-line-height)}.c-notification[is-compact=true]{--notification-direction: row}.c-notification[variant=neutral-alternative]{--notification-background-color: var(--dt-color-container-default)}.c-notification[variant=info]{--notification-background-color: var(--dt-color-support-info-02);--notification-icon-fill: var(--dt-color-blue)}.c-notification[variant=success]{--notification-background-color: var(--dt-color-support-positive-02)}.c-notification[variant=warning]{--notification-background-color: var(--dt-color-support-warning-02)}.c-notification[variant=error]{--notification-background-color: var(--dt-color-support-error-02);--notification-icon-fill: var(--dt-color-red)}.c-notification-content-section{display:flex;flex-direction:row}.c-notification-content-section .has-icon{margin-inline-end:var(--dt-spacing-c)}.c-notification-heading-icon{padding-block-start:var(--dt-spacing-a);color:var(--notification-icon-fill)}.c-notification-icon-close{position:absolute;inset-block-start:var(--dt-spacing-b);inset-inline-end:var(--dt-spacing-b)}
+import "@justeattakeaway/pie-button";
+const k = ["neutral", "neutral-alternative", "info", "success", "warning", "error"], A = ["h2", "h3", "h4", "h5", "h6"], o = "pie-notification", h = "c-notification", z = `${o}-close`, S = `${o}-open`, V = `${o}-leading-action-click`, w = `${o}-supporting-action-click`, T = `*,*:after,*:before{box-sizing:inherit}.c-notification{--notification-border-radius: var(--dt-radius-rounded-c);--notification-background-color: var(--dt-color-container-subtle);--notification-direction: column;--notification-icon-size-override: 22px;--notification-heading-font-size: calc(var(--dt-font-size-20) * 1px);--notification-heading-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--notification-font-size: calc(var(--dt-font-size-16) * 1px);--notification-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--notification-icon-fill: var(--dt-color-content-default);padding:var(--dt-spacing-d);border-radius:var(--notification-border-radius);background-color:var(--notification-background-color);position:relative;display:flex;flex-direction:var(--notification-direction);gap:var(--dt-spacing-d);font-size:var(--notification-font-size);line-height:var(--notification-line-height)}.c-notification h1,.c-notification h2,.c-notification h3,.c-notification h4,.c-notification h5,.c-notification h6{margin:0;font-size:var(--notification-heading-font-size);line-height:var(--notification-heading-line-height)}.c-notification[isCompact]{--notification-direction: row}.c-notification[variant=neutral-alternative]{--notification-background-color: var(--dt-color-container-default)}.c-notification[variant=info]{--notification-background-color: var(--dt-color-support-info-02);--notification-icon-fill: var(--dt-color-blue)}.c-notification[variant=success]{--notification-background-color: var(--dt-color-support-positive-02)}.c-notification[variant=warning]{--notification-background-color: var(--dt-color-support-warning-02)}.c-notification[variant=error]{--notification-background-color: var(--dt-color-support-error-02);--notification-icon-fill: var(--dt-color-red)}.c-notification-content-section{display:flex;flex-direction:row}.c-notification-content-section article[hasGutter]{padding-inline-end:var(--dt-spacing-e)}.c-notification-content-section .has-icon{display:block ruby;margin-inline-end:var(--dt-spacing-c)}.c-notification-heading-icon{padding-block-start:var(--dt-spacing-a);color:var(--notification-icon-fill)}.c-notification-icon-close{position:absolute;inset-block-start:var(--dt-spacing-b);inset-inline-end:var(--dt-spacing-b)}.c-notification-footer{display:flex;flex-direction:row;justify-content:flex-end;gap:var(--dt-spacing-d)}.c-notification-footer[isCompact]{align-self:flex-end}@media (max-width: 640px){.c-notification-footer[isStacked]{flex-direction:column}}
 `;
-var C = Object.defineProperty, w = Object.getOwnPropertyDescriptor, a = (p, i, t, c) => {
-  for (var e = c > 1 ? void 0 : c ? w(i, t) : i, f = p.length - 1, h; f >= 0; f--)
-    (h = p[f]) && (e = (c ? h(i, t, e) : h(e)) || e);
-  return c && e && C(i, t, e), e;
+var B = Object.defineProperty, D = Object.getOwnPropertyDescriptor, e = (f, t, i, c) => {
+  for (var r = c > 1 ? void 0 : c ? D(t, i) : t, d = f.length - 1, p; d >= 0; d--)
+    (p = f[d]) && (r = (c ? p(t, i, r) : p(r)) || r);
+  return c && r && B(t, i, r), r;
 };
-const o = "pie-notification", s = "c-notification";
-class n extends $ {
+class n extends N {
   constructor() {
-    super(...arguments), this.isOpen = !0, this.variant = "neutral", this.isCompact = !1, this.headingLevel = "h2", this.hideIcon = !1, this.hideCloseIcon = !1, this._hasExternalIcon = !1, this._hasIconClass = !1;
+    super(...arguments), this.isOpen = !0, this.variant = "neutral", this.isDismissible = !0, this.isCompact = !1, this.headingLevel = "h2", this.hideIcon = !1, this.hideCloseIcon = !1, this.hasStackedActions = !1, this._hasExternalIcon = !1, this._hasIconClass = !1, this._hasContentGutter = !1;
   }
   /**
    * Lifecycle method executed after component renders.
@@ -30,8 +30,16 @@ class n extends $ {
    * Lifecycle method executed when component is about to update.
    * It update icon properties if variant has changes.
    */
-  willUpdate(i) {
-    i.has("variant") && this.updateIconProperties();
+  willUpdate(t) {
+    t.has("variant") && this.updateIconProperties();
+  }
+  /**
+   * Lifecycle method executed when component is updated.
+   * It dispatches an event if notification is opened.
+   * It applies a gutter if there's no heading content in order to avoid the close button overlap the content.
+   */
+  updated(t) {
+    t.has("isOpen") && this.isOpen && u(this, S, { targetNotification: this }), (t.has("heading") || t.has("isDismissible") || t.has("isCompact")) && (this._hasContentGutter = (this.heading === "" || this.heading === void 0) && this.isDismissible && !this.isCompact);
   }
   /**
    * Method responsible to check if an external icon has been provided.
@@ -48,9 +56,12 @@ class n extends $ {
    *
    * @private
    */
-  renderFooter() {
-    return r`
-            <footer class="${s}-footer"></footer>
+  renderFooter(t, i) {
+    return l`
+            <footer class="${h}-footer" data-test-id="${o}-footer" ?isCompact="${this.isCompact}" ?isStacked="${this.hasStackedActions && !this.isCompact}">
+                ${i ? this.renderActionButton(i, "supporting") : a}
+                ${t ? this.renderActionButton(t, "leading") : a}
+            </footer>
         `;
   }
   /**
@@ -62,10 +73,10 @@ class n extends $ {
    *
    * @private
    */
-  renderNotificationHeading(i, t) {
-    return r`
-            <header class="${s}-header" data-test-id="${o}-header">
-                <${t} class="${s}-heading" data-test-id="${o}-heading">${i}</${t}>
+  renderNotificationHeading(t, i) {
+    return l`
+            <header class="${h}-header" data-test-id="${o}-header">
+                <${i} class="${h}-heading" data-test-id="${o}-heading">${t}</${i}>
             </header>
         `;
   }
@@ -76,8 +87,8 @@ class n extends $ {
    *
    * @private
    */
-  variantHasDefaultIcon(i) {
-    return ["info", "success", "warning", "error"].includes(i);
+  variantHasDefaultIcon(t) {
+    return ["info", "success", "warning", "error"].includes(t);
   }
   /**
    * Util method that returns an icon from a variant that has default icon.
@@ -86,18 +97,18 @@ class n extends $ {
    *
    * @private
    */
-  getDefaultVariantIcon(i) {
-    switch (i) {
+  getDefaultVariantIcon(t) {
+    switch (t) {
       case "info":
-        return r`<icon-info-circle size="s" data-test-id="${o}-heading-icon-info"></icon-info-circle>`;
+        return l`<icon-info-circle size="s" data-test-id="${o}-heading-icon-info"></icon-info-circle>`;
       case "success":
-        return r`<icon-check-circle size="s" data-test-id="${o}-heading-icon-success"></icon-check-circle>`;
+        return l`<icon-check-circle size="s" data-test-id="${o}-heading-icon-success"></icon-check-circle>`;
       case "warning":
-        return r`<icon-alert-triangle size="s" data-test-id="${o}-heading-icon-warning"></icon-alert-triangle>`;
+        return l`<icon-alert-triangle size="s" data-test-id="${o}-heading-icon-warning"></icon-alert-triangle>`;
       case "error":
-        return r`<icon-alert-circle size="s" data-test-id="${o}-heading-icon-error"></icon-alert-circle>`;
+        return l`<icon-alert-circle size="s" data-test-id="${o}-heading-icon-error"></icon-alert-circle>`;
       default:
-        return d;
+        return a;
     }
   }
   /**
@@ -108,8 +119,8 @@ class n extends $ {
    *
    * @private
    */
-  renderIconVariant(i) {
-    return this.variantHasDefaultIcon(i) ? this.getDefaultVariantIcon(i) : d;
+  renderIconVariant(t) {
+    return this.variantHasDefaultIcon(t) ? this.getDefaultVariantIcon(t) : a;
   }
   /**
    * Template for the heading icon area.
@@ -121,10 +132,10 @@ class n extends $ {
    *
    * @private
    */
-  renderIcon(i, t, c) {
-    return r`
-            <div data-test-id="${o}-icon-area" class="${c ? "has-icon " : ""}${s}-heading-icon">
-                ${t ? d : this.renderIconVariant(i)}
+  renderIcon(t, i, c) {
+    return l`
+            <div data-test-id="${o}-icon-area" class="${c ? "has-icon " : ""}${h}-heading-icon">
+                ${i ? a : this.renderIconVariant(t)}
                 <slot name="icon"></slot>
             </div>
         `;
@@ -136,78 +147,157 @@ class n extends $ {
    * @private
    */
   renderCloseButton() {
-    return r`
+    return l`
             <pie-icon-button
                 variant="ghost-secondary"
                 size="small"
-                class="${s}-icon-close"
+                class="${h}-icon-close"
                 data-test-id="${o}-icon-close"
+                @click="${this.handleCloseButton}"
                 >
                 <icon-close></icon-close>
             </pie-icon-button>`;
   }
+  /**
+   * It handles the action when user clicks in the close button.
+   * Also triggers an event when is executed.
+   *
+   * @private
+   */
+  handleCloseButton() {
+    this.closeNotificationComponent(), u(this, z, { targetNotification: this });
+  }
+  /**
+   * Util method responsible to close the component.
+   *
+   * @private
+   */
+  closeNotificationComponent() {
+    this.isOpen = !1;
+  }
+  /**
+   * It handle the action button action.
+   * Also triggers an event according to its `actionType`.
+   *
+   * @param {'leading' | 'supporting'} actionType
+   *
+   * @private
+   */
+  handleActionClick(t) {
+    u(this, t === "leading" ? V : w, { targetNotification: this });
+  }
+  /**
+   * Render the action button depending on action type and its action.
+   *
+   * @param {ActionProps} action - The action properties.
+   * @param {'leading' | 'supporting'} actionType - The type of the action.
+   *
+   * @returns {TemplateResult | typeof nothing} - The rendered action button or nothing if the action text is not defined.
+   * @private
+   */
+  renderActionButton(t, i) {
+    const { text: c, ariaLabel: r } = t;
+    return c ? l`
+            <pie-button
+                variant="${i === "leading" ? "primary" : "ghost"}"
+                size="small-productive"
+                aria-label="${r || a}"
+                @click="${() => this.handleActionClick(i)}"
+                data-test-id="${o}-${i}-action"
+                ?isFullWidth="${this.hasStackedActions}"
+                type="button">
+                ${c}
+            </pie-button>
+        ` : a;
+  }
   render() {
     const {
-      variant: i,
-      heading: t,
+      variant: t,
+      heading: i,
       headingLevel: c,
-      isCompact: e,
-      _hasExternalIcon: f,
-      hideIcon: h,
-      _hasIconClass: g
+      isDismissible: r,
+      isCompact: d,
+      _hasExternalIcon: p,
+      hideIcon: C,
+      _hasIconClass: $,
+      leadingAction: v,
+      supportingAction: I,
+      isOpen: b,
+      _hasContentGutter: y
     } = this;
-    return r`
-            <div data-test-id="${o}" class="${s}" variant="${i}" is-compact="${e}">
-                ${e ? d : this.renderCloseButton()}
+    return b ? l`
+            <div data-test-id="${o}" class="${h}" variant="${t}" ?isCompact="${d}">
+                ${r && !d ? this.renderCloseButton() : a}
 
-                <section class="${s}-content-section">
-                    ${h ? d : this.renderIcon(i, f, g)}    
-                    <article>
-                        ${t ? this.renderNotificationHeading(t, I(c)) : d}
+                <section class="${h}-content-section">
+                    ${C ? a : this.renderIcon(t, p, $)}    
+                    <article ?hasGutter="${y}">
+                        ${i ? this.renderNotificationHeading(i, O(c)) : a}
                         <slot></slot>
                     </article>
                 </section>
                 
-                ${this.renderFooter()}
-            </div>`;
+                ${v ? this.renderFooter(v, I) : a}
+            </div>` : a;
   }
 }
-n.styles = m(_);
-a([
-  l({ type: Boolean })
+n.styles = _(T);
+e([
+  s({ type: Boolean })
 ], n.prototype, "isOpen", 2);
-a([
-  l(),
-  u(o, x, "neutral")
+e([
+  s(),
+  m(o, k, "neutral")
 ], n.prototype, "variant", 2);
-a([
-  l({ type: Boolean })
+e([
+  s({ type: Boolean })
+], n.prototype, "isDismissible", 2);
+e([
+  s({ type: Boolean })
 ], n.prototype, "isCompact", 2);
-a([
-  l({ type: String })
+e([
+  s({ type: String })
 ], n.prototype, "heading", 2);
-a([
-  l(),
-  u(o, z, "h2")
+e([
+  s(),
+  m(o, A, "h2")
 ], n.prototype, "headingLevel", 2);
-a([
-  l({ type: Boolean })
+e([
+  s({ type: Boolean })
 ], n.prototype, "hideIcon", 2);
-a([
-  l({ type: Boolean })
+e([
+  s({ type: Boolean })
 ], n.prototype, "hideCloseIcon", 2);
-a([
-  y({ slot: "icon" })
+e([
+  s({ type: Object })
+], n.prototype, "leadingAction", 2);
+e([
+  s({ type: Object })
+], n.prototype, "supportingAction", 2);
+e([
+  s({ type: Boolean })
+], n.prototype, "hasStackedActions", 2);
+e([
+  E({ slot: "icon" })
 ], n.prototype, "_iconSlot", 2);
-a([
-  v()
+e([
+  g()
 ], n.prototype, "_hasExternalIcon", 2);
-a([
-  v()
+e([
+  g()
 ], n.prototype, "_hasIconClass", 2);
-b(o, n);
+e([
+  g()
+], n.prototype, "_hasContentGutter", 2);
+x(o, n);
 export {
+  z as ON_NOTIFICATION_CLOSE_EVENT,
+  V as ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT,
+  S as ON_NOTIFICATION_OPEN_EVENT,
+  w as ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT,
   n as PieNotification,
-  z as headingLevels,
-  x as variants
+  h as componentClass,
+  o as componentSelector,
+  A as headingLevels,
+  k as variants
 };

package/dist/react.d.ts

@@ -1,9 +1,25 @@
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
+import type { nothing } from 'lit';
 import type { PropertyValues } from 'lit';
 import * as React_2 from 'react';
 import type { TemplateResult } from 'lit';
 
+export declare type ActionProps = {
+    /**
+     * The text to display inside the button.
+     */
+    text: string;
+    /**
+     * The ARIA label for the button.
+     */
+    ariaLabel?: string;
+};
+
+export declare const componentClass = "c-notification";
+
+export declare const componentSelector = "pie-notification";
+
 export declare const headingLevels: readonly ["h2", "h3", "h4", "h5", "h6"];
 
 export declare interface NotificationProps {
@@ -11,6 +27,10 @@ export declare interface NotificationProps {
      * Set the variant of the notification.
      */
     variant?: typeof variants[number];
+    /**
+     * When true, allows dismissing the notification by clicking on the close button.
+     */
+    isDismissible?: boolean;
     /**
      * When true, the footer aligns to the header and icons which makes the component compact.
      */
@@ -31,24 +51,73 @@ export declare interface NotificationProps {
      * When true, the notification is set to be open and visible.
      */
     isOpen?: boolean;
+    /**
+     * The leading action for the notification.
+     */
+    leadingAction?: ActionProps;
+    /**
+     * The supporting action for the notification.
+     */
+    supportingAction?: ActionProps;
+    /**
+     * When true, the notification will stack the action buttons on narrow screens.
+     */
+    hasStackedActions?: boolean;
 }
 
-export declare const PieNotification: React_2.ForwardRefExoticComponent<NotificationProps & React_2.RefAttributes<PieNotification_2> & ReactBaseType>;
+/**
+ * Event name for when the notification is closed.
+ *
+ * @constant
+ */
+export declare const ON_NOTIFICATION_CLOSE_EVENT: string;
+
+/**
+ * Event name for when the notification leading action is clicked.
+ *
+ * @constant
+ */
+export declare const ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT: string;
+
+/**
+ * Event name for when the notification is opened.
+ *
+ * @constant
+ */
+export declare const ON_NOTIFICATION_OPEN_EVENT: string;
+
+/**
+ * Event name for when the notification supporting action is clicked.
+ *
+ * @constant
+ */
+export declare const ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT: string;
+
+export declare const PieNotification: React_2.ForwardRefExoticComponent<NotificationProps & React_2.RefAttributes<PieNotification_2> & PieNotificationEvents & ReactBaseType>;
 
 /**
  * @tagname pie-notification
+ * @event {CustomEvent} pie-notification-leading-action-click -  When the notification leading action is clicked.
+ * @event {CustomEvent} pie-notification-supporting-action-click - When the notification supporting action is clicked.
+ * @event {CustomEvent} pie-notification-close - When the notification is closed.
+ * @event {CustomEvent} pie-notification-open - When the notification is opened.
  */
 declare class PieNotification_2 extends LitElement implements NotificationProps {
     isOpen: boolean;
     variant: NonNullable<NotificationProps['variant']>;
+    isDismissible: boolean;
     isCompact: boolean;
     heading: string;
     headingLevel: NonNullable<NotificationProps['headingLevel']>;
     hideIcon: boolean;
     hideCloseIcon: boolean;
+    leadingAction: NotificationProps['leadingAction'];
+    supportingAction: NotificationProps['supportingAction'];
+    hasStackedActions: boolean;
     _iconSlot: Array<HTMLElement>;
     protected _hasExternalIcon: boolean;
     protected _hasIconClass: boolean;
+    protected _hasContentGutter: boolean;
     static styles: CSSResult;
     /**
      * Lifecycle method executed after component renders.
@@ -59,6 +128,12 @@ declare class PieNotification_2 extends LitElement implements NotificationProps
      * 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.
@@ -126,9 +201,48 @@ declare class PieNotification_2 extends LitElement implements NotificationProps
      * @private
      */
     private renderCloseButton;
-    render(): TemplateResult;
+    /**
+     * It handles the action when user clicks in the close button.
+     * Also triggers an event when is executed.
+     *
+     * @private
+     */
+    private handleCloseButton;
+    /**
+     * Util method responsible to close the component.
+     *
+     * @private
+     */
+    private closeNotificationComponent;
+    /**
+     * It handle the action button action.
+     * Also triggers an event according to its `actionType`.
+     *
+     * @param {'leading' | 'supporting'} actionType
+     *
+     * @private
+     */
+    private handleActionClick;
+    /**
+     * Render the action button depending on action type and its action.
+     *
+     * @param {ActionProps} action - The action properties.
+     * @param {'leading' | 'supporting'} actionType - The type of the action.
+     *
+     * @returns {TemplateResult | typeof nothing} - The rendered action button or nothing if the action text is not defined.
+     * @private
+     */
+    private renderActionButton;
+    render(): typeof nothing | TemplateResult;
 }
 
+declare type PieNotificationEvents = {
+    onPieNotificationLeadingActionClick?: (event: CustomEvent) => void;
+    onPieNotificationSupportingActionClick?: (event: CustomEvent) => void;
+    onPieNotificationClose?: (event: CustomEvent) => void;
+    onPieNotificationOpen?: (event: CustomEvent) => void;
+};
+
 declare type ReactBaseType = React_2.HTMLAttributes<HTMLDivElement>;
 
 export declare const variants: readonly ["neutral", "neutral-alternative", "info", "success", "warning", "error"];

package/dist/react.js

@@ -1,7 +1,7 @@
 import * as i from "react";
-import { createComponent as t } from "@lit/react";
-import { PieNotification as o } from "./index.js";
-import { headingLevels as C, variants as R } from "./index.js";
+import { createComponent as o } from "@lit/react";
+import { PieNotification as t } from "./index.js";
+import { ON_NOTIFICATION_CLOSE_EVENT as E, ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT as A, ON_NOTIFICATION_OPEN_EVENT as g, ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT as L, componentClass as d, componentSelector as k, headingLevels as F, variants as S } from "./index.js";
 import "lit";
 import "lit/static-html.js";
 import "@justeattakeaway/pie-webc-core";
@@ -12,15 +12,31 @@ import "@justeattakeaway/pie-icons-webc/IconInfoCircle";
 import "@justeattakeaway/pie-icons-webc/IconAlertCircle";
 import "@justeattakeaway/pie-icons-webc/IconAlertTriangle";
 import "@justeattakeaway/pie-icons-webc/IconCheckCircle";
-const e = t({
+import "@justeattakeaway/pie-button";
+const n = o({
   displayName: "PieNotification",
-  elementClass: o,
+  elementClass: t,
   react: i,
   tagName: "pie-notification",
-  events: {}
-}), d = e;
+  events: {
+    onPieNotificationLeadingActionClick: "pie-notification-leading-action-click",
+    //  When the notification leading action is clicked.
+    onPieNotificationSupportingActionClick: "pie-notification-supporting-action-click",
+    // When the notification supporting action is clicked.
+    onPieNotificationClose: "pie-notification-close",
+    // When the notification is closed.
+    onPieNotificationOpen: "pie-notification-open"
+    // When the notification is opened.
+  }
+}), T = n;
 export {
-  d as PieNotification,
-  C as headingLevels,
-  R as variants
+  E as ON_NOTIFICATION_CLOSE_EVENT,
+  A as ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT,
+  g as ON_NOTIFICATION_OPEN_EVENT,
+  L as ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT,
+  T as PieNotification,
+  d as componentClass,
+  k as componentSelector,
+  F as headingLevels,
+  S as variants
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-notification",
   "description": "PIE Design System Notification built using Web Components",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/defs.ts

@@ -1,12 +1,29 @@
 export const variants = ['neutral', 'neutral-alternative', 'info', 'success', 'warning', 'error'] as const;
 export const headingLevels = ['h2', 'h3', 'h4', 'h5', 'h6'] as const;
 
+export type ActionProps = {
+  /**
+   * The text to display inside the button.
+   */
+  text: string;
+
+  /**
+   * The ARIA label for the button.
+   */
+  ariaLabel?: string;
+};
+
 export interface NotificationProps {
   /**
    * Set the variant of the notification.
    */
   variant?: typeof variants[number];
 
+  /**
+   * When true, allows dismissing the notification by clicking on the close button.
+   */
+  isDismissible?: boolean;
+
   /**
    * When true, the footer aligns to the header and icons which makes the component compact.
    */
@@ -31,4 +48,50 @@ export interface NotificationProps {
    * When true, the notification is set to be open and visible.
    */
   isOpen?: boolean;
+
+  /**
+   * The leading action for the notification.
+   */
+  leadingAction?: ActionProps;
+
+  /**
+   * The supporting action for the notification.
+   */
+  supportingAction?: ActionProps;
+
+  /**
+   * When true, the notification will stack the action buttons on narrow screens.
+   */
+  hasStackedActions?: boolean;
 }
+
+export const componentSelector = 'pie-notification';
+export const componentClass = 'c-notification';
+
+/**
+ * Event name for when the notification is closed.
+ *
+ * @constant
+ */
+export const ON_NOTIFICATION_CLOSE_EVENT = `${componentSelector}-close`;
+
+/**
+ * Event name for when the notification is opened.
+ *
+ * @constant
+ */
+export const ON_NOTIFICATION_OPEN_EVENT = `${componentSelector}-open`;
+
+/**
+ * Event name for when the notification leading action is clicked.
+ *
+ * @constant
+ */
+export const ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT = `${componentSelector}-leading-action-click`;
+
+/**
+ * Event name for when the notification supporting action is clicked.
+ *
+ * @constant
+ */
+export const ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT = `${componentSelector}-supporting-action-click`;