@justeattakeaway/pie-notification 0.6.0 → 0.6.1

package/custom-elements.json

@@ -75,6 +75,14 @@
           "name": "ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT",
           "default": "`${componentSelector}-supporting-action-click`",
           "description": "Event name for when the notification supporting action is clicked."
+        },
+        {
+          "kind": "variable",
+          "name": "defaultProps",
+          "type": {
+            "text": "DefaultProps"
+          },
+          "default": "{\n    isOpen: true,\n    variant: 'neutral',\n    position: 'inline-content',\n    isDismissible: true,\n    isCompact: false,\n    headingLevel: 'h2',\n    hideIcon: false,\n    hasStackedActions: false,\n}"
         }
       ],
       "exports": [
@@ -149,6 +157,14 @@
             "name": "ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT",
             "module": "src/defs.js"
           }
+        },
+        {
+          "kind": "js",
+          "name": "defaultProps",
+          "declaration": {
+            "name": "defaultProps",
+            "module": "src/defs.js"
+          }
         }
       ]
     },
@@ -164,11 +180,7 @@
             {
               "kind": "field",
               "name": "isOpen",
-              "type": {
-                "text": "boolean"
-              },
               "privacy": "public",
-              "default": "true",
               "attribute": "isOpen"
             },
             {
@@ -178,7 +190,6 @@
                 "text": "NonNullable<NotificationProps['variant']>"
               },
               "privacy": "public",
-              "default": "'neutral'",
               "attribute": "variant"
             },
             {
@@ -188,27 +199,18 @@
                 "text": "NonNullable<NotificationProps['position']>"
               },
               "privacy": "public",
-              "default": "'inline-content'",
               "attribute": "position"
             },
             {
               "kind": "field",
               "name": "isDismissible",
-              "type": {
-                "text": "boolean"
-              },
               "privacy": "public",
-              "default": "true",
               "attribute": "isDismissible"
             },
             {
               "kind": "field",
               "name": "isCompact",
-              "type": {
-                "text": "boolean"
-              },
               "privacy": "public",
-              "default": "false",
               "attribute": "isCompact"
             },
             {
@@ -227,17 +229,12 @@
                 "text": "NonNullable<NotificationProps['headingLevel']>"
               },
               "privacy": "public",
-              "default": "'h2'",
               "attribute": "headingLevel"
             },
             {
               "kind": "field",
               "name": "hideIcon",
-              "type": {
-                "text": "boolean"
-              },
               "privacy": "public",
-              "default": "false",
               "attribute": "hideIcon"
             },
             {
@@ -261,11 +258,7 @@
             {
               "kind": "field",
               "name": "hasStackedActions",
-              "type": {
-                "text": "boolean"
-              },
               "privacy": "public",
-              "default": "false",
               "attribute": "hasStackedActions"
             },
             {
@@ -516,10 +509,6 @@
           "attributes": [
             {
               "name": "isOpen",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true",
               "fieldName": "isOpen"
             },
             {
@@ -527,7 +516,6 @@
               "type": {
                 "text": "NonNullable<NotificationProps['variant']>"
               },
-              "default": "'neutral'",
               "fieldName": "variant"
             },
             {
@@ -535,23 +523,14 @@
               "type": {
                 "text": "NonNullable<NotificationProps['position']>"
               },
-              "default": "'inline-content'",
               "fieldName": "position"
             },
             {
               "name": "isDismissible",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true",
               "fieldName": "isDismissible"
             },
             {
               "name": "isCompact",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
               "fieldName": "isCompact"
             },
             {
@@ -566,15 +545,10 @@
               "type": {
                 "text": "NonNullable<NotificationProps['headingLevel']>"
               },
-              "default": "'h2'",
               "fieldName": "headingLevel"
             },
             {
               "name": "hideIcon",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
               "fieldName": "hideIcon"
             },
             {
@@ -593,10 +567,6 @@
             },
             {
               "name": "hasStackedActions",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
               "fieldName": "hasStackedActions"
             }
           ],

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
 import type { nothing } from 'lit';
@@ -19,6 +20,10 @@ export declare const componentClass = "c-notification";
 
 export declare const componentSelector = "pie-notification";
 
+export declare type DefaultProps = ComponentDefaultPropsGeneric<NotificationProps, 'isOpen' | 'variant' | 'position' | 'isDismissible' | 'isCompact' | 'headingLevel' | 'hideIcon' | 'hasStackedActions'>;
+
+export declare const defaultProps: DefaultProps;
+
 export declare const headingLevels: readonly ["h2", "h3", "h4", "h5", "h6"];
 
 export declare interface NotificationProps {

package/dist/index.js

@@ -1,7 +1,7 @@
-import { unsafeCSS as N, LitElement as x, nothing as c } from "lit";
-import { html as l, unsafeStatic as O } from "lit/static-html.js";
-import { validPropertyValues as g, defineCustomElement as E, dispatchCustomEvent as u } from "@justeattakeaway/pie-webc-core";
-import { property as s, queryAssignedElements as w, state as $ } from "lit/decorators.js";
+import { unsafeCSS as O, LitElement as x, nothing as c } from "lit";
+import { html as d, unsafeStatic as E } from "lit/static-html.js";
+import { validPropertyValues as v, defineCustomElement as k, dispatchCustomEvent as g } from "@justeattakeaway/pie-webc-core";
+import { property as l, queryAssignedElements as w, state as $ } from "lit/decorators.js";
 import "@justeattakeaway/pie-button";
 import "@justeattakeaway/pie-icon-button";
 import "@justeattakeaway/pie-icons-webc/dist/IconAlertCircle.js";
@@ -9,16 +9,25 @@ import "@justeattakeaway/pie-icons-webc/dist/IconAlertTriangle.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconCheckCircle.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconInfoCircle.js";
-const k = ["neutral", "neutral-alternative", "info", "success", "warning", "error"], A = ["h2", "h3", "h4", "h5", "h6"], z = ["inline-content", "full-width"], o = "pie-notification", h = "c-notification", S = `${o}-close`, V = `${o}-open`, T = `${o}-leading-action-click`, B = `${o}-supporting-action-click`, D = `*,*:after,*:before{box-sizing:inherit}.c-notification{--notification-border-radius: var(--dt-radius-rounded-c);--notification-background-color: var(--dt-color-container-subtle);--notification-direction: column;--notification-heading-font-size: calc(var(--dt-font-heading-s-size--narrow) * 1px);--notification-heading-line-height: calc(var(--dt-font-heading-s-line-height--narrow) * 1px);--notification-font-size: calc(var(--dt-font-body-l-size) * 1px);--notification-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--notification-icon-fill: var(--dt-color-content-default);--notification-close-icon-offset: var(--dt-spacing-b);--notification-heading-icon-offset: 2px;padding:var(--dt-spacing-d);border-radius:var(--notification-border-radius);background-color:var(--notification-background-color);position:relative;display:flex;flex-direction:var(--notification-direction);gap:var(--dt-spacing-d);font-size:var(--notification-font-size);line-height:var(--notification-line-height)}.c-notification[isCompact]{--notification-direction: row}.c-notification[position=full-width]{--notification-border-radius: var(--dt-radius-rounded-none)}.c-notification[variant=neutral-alternative]{--notification-background-color: var(--dt-color-container-default)}.c-notification[variant=info]{--notification-background-color: var(--dt-color-support-info-02);--notification-icon-fill: var(--dt-color-blue)}.c-notification[variant=success]{--notification-background-color: var(--dt-color-support-positive-02)}.c-notification[variant=warning]{--notification-background-color: var(--dt-color-support-warning-02)}.c-notification[variant=error]{--notification-background-color: var(--dt-color-support-error-02);--notification-icon-fill: var(--dt-color-red)}.c-notification-heading{margin:0;margin-block-end:var(--dt-spacing-a);font-size:var(--notification-heading-font-size);line-height:var(--notification-heading-line-height)}@media (min-width: 768px){.c-notification-heading{--notification-heading-font-size: calc(var(--dt-font-heading-s-size--wide) * 1px);--notification-heading-line-height: calc(var(--dt-font-heading-s-line-height--wide) * 1px)}}.c-notification-content-section{display:flex;flex-direction:row}.c-notification-content-section .has-icon{display:block ruby;margin-inline-end:var(--dt-spacing-c)}.c-notification-content-section[isDismissible]{max-width:calc(100% - var(--notification-close-icon-offset) - 40px)}.c-notification-heading-icon{padding-block-start:var(--notification-heading-icon-offset);color:var(--notification-icon-fill)}.c-notification-icon-close{position:absolute;inset-block-start:var(--notification-close-icon-offset);inset-inline-end:var(--notification-close-icon-offset)}.c-notification-footer{display:flex;flex-direction:row;justify-content:flex-end;gap:var(--dt-spacing-d)}.c-notification-footer[isCompact]{align-self:flex-end}@media (max-width: 768px){.c-notification-footer[isStacked]{flex-direction:column-reverse}}
+const A = ["neutral", "neutral-alternative", "info", "success", "warning", "error"], z = ["h2", "h3", "h4", "h5", "h6"], S = ["inline-content", "full-width"], o = "pie-notification", h = "c-notification", D = `${o}-close`, V = `${o}-open`, T = `${o}-leading-action-click`, B = `${o}-supporting-action-click`, r = {
+  isOpen: !0,
+  variant: "neutral",
+  position: "inline-content",
+  isDismissible: !0,
+  isCompact: !1,
+  headingLevel: "h2",
+  hideIcon: !1,
+  hasStackedActions: !1
+}, L = `*,*:after,*:before{box-sizing:inherit}.c-notification{--notification-border-radius: var(--dt-radius-rounded-c);--notification-background-color: var(--dt-color-container-subtle);--notification-direction: column;--notification-heading-font-size: calc(var(--dt-font-heading-s-size--narrow) * 1px);--notification-heading-line-height: calc(var(--dt-font-heading-s-line-height--narrow) * 1px);--notification-font-size: calc(var(--dt-font-body-l-size) * 1px);--notification-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--notification-icon-fill: var(--dt-color-content-default);--notification-close-icon-offset: var(--dt-spacing-b);--notification-heading-icon-offset: 2px;padding:var(--dt-spacing-d);border-radius:var(--notification-border-radius);background-color:var(--notification-background-color);position:relative;display:flex;flex-direction:var(--notification-direction);gap:var(--dt-spacing-d);font-size:var(--notification-font-size);line-height:var(--notification-line-height)}.c-notification[isCompact]{--notification-direction: row}.c-notification[position=full-width]{--notification-border-radius: var(--dt-radius-rounded-none)}.c-notification[variant=neutral-alternative]{--notification-background-color: var(--dt-color-container-default)}.c-notification[variant=info]{--notification-background-color: var(--dt-color-support-info-02);--notification-icon-fill: var(--dt-color-blue)}.c-notification[variant=success]{--notification-background-color: var(--dt-color-support-positive-02)}.c-notification[variant=warning]{--notification-background-color: var(--dt-color-support-warning-02)}.c-notification[variant=error]{--notification-background-color: var(--dt-color-support-error-02);--notification-icon-fill: var(--dt-color-red)}.c-notification-heading{margin:0;margin-block-end:var(--dt-spacing-a);font-size:var(--notification-heading-font-size);line-height:var(--notification-heading-line-height)}@media (min-width: 768px){.c-notification-heading{--notification-heading-font-size: calc(var(--dt-font-heading-s-size--wide) * 1px);--notification-heading-line-height: calc(var(--dt-font-heading-s-line-height--wide) * 1px)}}.c-notification-content-section{display:flex;flex-direction:row}.c-notification-content-section .has-icon{display:block ruby;margin-inline-end:var(--dt-spacing-c)}.c-notification-content-section[isDismissible]{max-width:calc(100% - var(--notification-close-icon-offset) - 40px)}.c-notification-heading-icon{padding-block-start:var(--notification-heading-icon-offset);color:var(--notification-icon-fill)}.c-notification-icon-close{position:absolute;inset-block-start:var(--notification-close-icon-offset);inset-inline-end:var(--notification-close-icon-offset)}.c-notification-footer{display:flex;flex-direction:row;justify-content:flex-end;gap:var(--dt-spacing-d)}.c-notification-footer[isCompact]{align-self:flex-end}@media (max-width: 768px){.c-notification-footer[isStacked]{flex-direction:column-reverse}}
 `;
-var P = Object.defineProperty, L = Object.getOwnPropertyDescriptor, e = (p, i, t, a) => {
-  for (var r = a > 1 ? void 0 : a ? L(i, t) : i, d = p.length - 1, f; d >= 0; d--)
-    (f = p[d]) && (r = (a ? f(i, t, r) : f(r)) || r);
-  return a && r && P(i, t, r), r;
+var P = Object.defineProperty, F = Object.getOwnPropertyDescriptor, e = (u, i, t, a) => {
+  for (var s = a > 1 ? void 0 : a ? F(i, t) : i, f = u.length - 1, p; f >= 0; f--)
+    (p = u[f]) && (s = (a ? p(i, t, s) : p(s)) || s);
+  return a && s && P(i, t, s), s;
 };
 class n extends x {
   constructor() {
-    super(...arguments), this.isOpen = !0, this.variant = "neutral", this.position = "inline-content", this.isDismissible = !0, this.isCompact = !1, this.headingLevel = "h2", this.hideIcon = !1, this.hasStackedActions = !1, this._hasExternalIcon = !1, this._hasIconClass = !1;
+    super(...arguments), this.isOpen = r.isOpen, this.variant = r.variant, this.position = r.position, this.isDismissible = r.isDismissible, this.isCompact = r.isCompact, this.headingLevel = r.headingLevel, this.hideIcon = r.hideIcon, this.hasStackedActions = r.hasStackedActions, this._hasExternalIcon = !1, this._hasIconClass = !1;
   }
   /**
    * Lifecycle method executed when component is about to update.
@@ -33,7 +42,7 @@ class n extends x {
    * 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 && u(this, V, { targetNotification: this });
+    i.has("isOpen") && this.isOpen && g(this, V, { targetNotification: this });
   }
   /**
    * Method responsible to check if an external icon has been provided.
@@ -51,7 +60,7 @@ class n extends x {
    * @private
    */
   renderFooter(i, t) {
-    return l`
+    return d`
             <footer class="${h}-footer" data-test-id="${o}-footer" ?isCompact="${this.isCompact}" ?isStacked="${this.hasStackedActions && !this.isCompact}">
                 ${t ? this.renderActionButton(t, "supporting") : c}
                 ${i ? this.renderActionButton(i, "leading") : c}
@@ -68,7 +77,7 @@ class n extends x {
    * @private
    */
   renderNotificationHeading(i, t) {
-    return l`<${t} class="${h}-heading" data-test-id="${o}-heading">${i}</${t}>`;
+    return d`<${t} class="${h}-heading" data-test-id="${o}-heading">${i}</${t}>`;
   }
   /**
    * Util method that returns a boolean if variant has a default icon.
@@ -90,13 +99,13 @@ class n extends x {
   getDefaultVariantIcon(i) {
     switch (i) {
       case "info":
-        return l`<icon-info-circle size="m" data-test-id="${o}-heading-icon-info"></icon-info-circle>`;
+        return d`<icon-info-circle size="m" data-test-id="${o}-heading-icon-info"></icon-info-circle>`;
       case "success":
-        return l`<icon-check-circle size="m" data-test-id="${o}-heading-icon-success"></icon-check-circle>`;
+        return d`<icon-check-circle size="m" data-test-id="${o}-heading-icon-success"></icon-check-circle>`;
       case "warning":
-        return l`<icon-alert-triangle size="m" data-test-id="${o}-heading-icon-warning"></icon-alert-triangle>`;
+        return d`<icon-alert-triangle size="m" data-test-id="${o}-heading-icon-warning"></icon-alert-triangle>`;
       case "error":
-        return l`<icon-alert-circle size="m" data-test-id="${o}-heading-icon-error"></icon-alert-circle>`;
+        return d`<icon-alert-circle size="m" data-test-id="${o}-heading-icon-error"></icon-alert-circle>`;
       default:
         return c;
     }
@@ -123,7 +132,7 @@ class n extends x {
    * @private
    */
   renderIcon(i, t, a) {
-    return l`
+    return d`
             <div data-test-id="${o}-icon-area" class="${a ? "has-icon " : ""}${h}-heading-icon">
                 ${t ? c : this.renderIconVariant(i)}
                 <slot name="icon"></slot>
@@ -137,7 +146,7 @@ class n extends x {
    * @private
    */
   renderCloseButton() {
-    return l`
+    return d`
             <pie-icon-button
                 variant="ghost-secondary"
                 size="small"
@@ -155,7 +164,7 @@ class n extends x {
    * @private
    */
   handleCloseButton() {
-    this.closeNotificationComponent(), u(this, S, { targetNotification: this });
+    this.closeNotificationComponent(), g(this, D, { targetNotification: this });
   }
   /**
    * Util method responsible to close the component.
@@ -174,7 +183,7 @@ class n extends x {
    * @private
    */
   handleActionClick(i) {
-    u(this, i === "leading" ? T : B, { targetNotification: this });
+    g(this, i === "leading" ? T : B, { targetNotification: this });
   }
   /**
    * Render the action button depending on action type and its action.
@@ -186,12 +195,12 @@ class n extends x {
    * @private
    */
   renderActionButton(i, t) {
-    const { text: a, ariaLabel: r } = i;
-    return a ? l`
+    const { text: a, ariaLabel: s } = i;
+    return a ? d`
             <pie-button
                 variant="${t === "leading" ? "primary" : "ghost"}"
                 size="small-productive"
-                aria-label="${r || c}"
+                aria-label="${s || c}"
                 @click="${() => this.handleActionClick(t)}"
                 data-test-id="${o}-${t}-action"
                 ?isFullWidth="${this.hasStackedActions}"
@@ -205,76 +214,76 @@ class n extends x {
       variant: i,
       position: t,
       heading: a,
-      headingLevel: r,
-      isDismissible: d,
-      isCompact: f,
-      _hasExternalIcon: b,
-      hideIcon: I,
-      _hasIconClass: C,
-      leadingAction: v,
-      supportingAction: y,
-      isOpen: _
+      headingLevel: s,
+      isDismissible: f,
+      isCompact: p,
+      _hasExternalIcon: I,
+      hideIcon: C,
+      _hasIconClass: y,
+      leadingAction: m,
+      supportingAction: _,
+      isOpen: N
     } = this;
-    if (!_)
+    if (!N)
       return c;
-    const m = d && !f;
-    return l`
-            <div 
-                data-test-id="${o}" 
-                class="${h}" 
-                variant="${i}" 
+    const b = f && !p;
+    return d`
+            <div
+                data-test-id="${o}"
+                class="${h}"
+                variant="${i}"
                 position="${t}"
-                ?isCompact="${f}">
-                ${m ? this.renderCloseButton() : c}
+                ?isCompact="${p}">
+                ${b ? this.renderCloseButton() : c}
 
-                <section class="${h}-content-section" ?isDismissible="${m}">
-                    ${I ? c : this.renderIcon(i, b, C)}
+                <section class="${h}-content-section" ?isDismissible="${b}">
+                    ${C ? c : this.renderIcon(i, I, y)}
                     <article>
-                        ${a ? this.renderNotificationHeading(a, O(r)) : c}
+                        ${a ? this.renderNotificationHeading(a, E(s)) : c}
                         <slot></slot>
                     </article>
                 </section>
 
-                ${v ? this.renderFooter(v, y) : c}
+                ${m ? this.renderFooter(m, _) : c}
             </div>`;
   }
 }
-n.styles = N(D);
+n.styles = O(L);
 e([
-  s({ type: Boolean })
+  l({ type: Boolean })
 ], n.prototype, "isOpen", 2);
 e([
-  s(),
-  g(o, k, "neutral")
+  l(),
+  v(o, A, r.variant)
 ], n.prototype, "variant", 2);
 e([
-  s(),
-  g(o, z, "inline-content")
+  l(),
+  v(o, S, r.position)
 ], n.prototype, "position", 2);
 e([
-  s({ type: Boolean })
+  l({ type: Boolean })
 ], n.prototype, "isDismissible", 2);
 e([
-  s({ type: Boolean })
+  l({ type: Boolean })
 ], n.prototype, "isCompact", 2);
 e([
-  s({ type: String })
+  l({ type: String })
 ], n.prototype, "heading", 2);
 e([
-  s(),
-  g(o, A, "h2")
+  l(),
+  v(o, z, r.headingLevel)
 ], n.prototype, "headingLevel", 2);
 e([
-  s({ type: Boolean })
+  l({ type: Boolean })
 ], n.prototype, "hideIcon", 2);
 e([
-  s({ type: Object })
+  l({ type: Object })
 ], n.prototype, "leadingAction", 2);
 e([
-  s({ type: Object })
+  l({ type: Object })
 ], n.prototype, "supportingAction", 2);
 e([
-  s({ type: Boolean })
+  l({ type: Boolean })
 ], n.prototype, "hasStackedActions", 2);
 e([
   w({ slot: "icon" })
@@ -285,16 +294,17 @@ e([
 e([
   $()
 ], n.prototype, "_hasIconClass", 2);
-E(o, n);
+k(o, n);
 export {
-  S as ON_NOTIFICATION_CLOSE_EVENT,
+  D as ON_NOTIFICATION_CLOSE_EVENT,
   T as ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT,
   V as ON_NOTIFICATION_OPEN_EVENT,
   B as ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT,
   n as PieNotification,
   h as componentClass,
   o as componentSelector,
-  A as headingLevels,
-  z as positions,
-  k as variants
+  r as defaultProps,
+  z as headingLevels,
+  S as positions,
+  A as variants
 };

package/dist/react.d.ts

@@ -1,3 +1,4 @@
+import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
 import type { nothing } from 'lit';
@@ -20,6 +21,10 @@ export declare const componentClass = "c-notification";
 
 export declare const componentSelector = "pie-notification";
 
+export declare type DefaultProps = ComponentDefaultPropsGeneric<NotificationProps, 'isOpen' | 'variant' | 'position' | 'isDismissible' | 'isCompact' | 'headingLevel' | 'hideIcon' | 'hasStackedActions'>;
+
+export declare const defaultProps: DefaultProps;
+
 export declare const headingLevels: readonly ["h2", "h3", "h4", "h5", "h6"];
 
 export declare interface NotificationProps {

package/dist/react.js

@@ -1,7 +1,7 @@
 import * as i from "react";
 import { createComponent as o } from "@lit/react";
 import { PieNotification as t } from "./index.js";
-import { ON_NOTIFICATION_CLOSE_EVENT as E, ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT as A, ON_NOTIFICATION_OPEN_EVENT as g, ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT as L, componentClass as d, componentSelector as k, headingLevels as F, positions as S, variants as V } from "./index.js";
+import { ON_NOTIFICATION_CLOSE_EVENT as E, ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT as A, ON_NOTIFICATION_OPEN_EVENT as g, ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT as L, componentClass as d, componentSelector as k, defaultProps as F, headingLevels as S, positions as V, variants as u } from "./index.js";
 import "lit";
 import "lit/static-html.js";
 import "@justeattakeaway/pie-webc-core";
@@ -37,7 +37,8 @@ export {
   T as PieNotification,
   d as componentClass,
   k as componentSelector,
-  F as headingLevels,
-  S as positions,
-  V as variants
+  F as defaultProps,
+  S as headingLevels,
+  V as positions,
+  u as variants
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-notification",
   "description": "PIE Design System Notification built using Web Components",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -41,9 +41,9 @@
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-icon-button": "0.28.5",
-    "@justeattakeaway/pie-icons-webc": "0.23.1",
-    "@justeattakeaway/pie-webc-core": "0.22.0"
+    "@justeattakeaway/pie-icon-button": "0.28.6",
+    "@justeattakeaway/pie-icons-webc": "0.24.0",
+    "@justeattakeaway/pie-webc-core": "0.23.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/defs.ts

@@ -1,3 +1,5 @@
+import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+
 export const variants = ['neutral', 'neutral-alternative', 'info', 'success', 'warning', 'error'] as const;
 export const headingLevels = ['h2', 'h3', 'h4', 'h5', 'h6'] as const;
 export const positions = ['inline-content', 'full-width'] as const;
@@ -101,3 +103,16 @@ export const ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT = `${componentSelector}-
  * @constant
  */
 export const ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT = `${componentSelector}-supporting-action-click`;
+
+export type DefaultProps = ComponentDefaultPropsGeneric<NotificationProps, 'isOpen' | 'variant' | 'position' | 'isDismissible' | 'isCompact' | 'headingLevel' | 'hideIcon' | 'hasStackedActions'>;
+
+export const defaultProps: DefaultProps = {
+    isOpen: true,
+    variant: 'neutral',
+    position: 'inline-content',
+    isDismissible: true,
+    isCompact: false,
+    headingLevel: 'h2',
+    hideIcon: false,
+    hasStackedActions: false,
+};

package/src/index.ts

@@ -20,6 +20,7 @@ import {
     ON_NOTIFICATION_OPEN_EVENT,
     ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT,
     ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT,
+    defaultProps,
 } from './defs';
 import styles from './notification.scss?inline';
 
@@ -43,31 +44,31 @@ export * from './defs';
  */
 export class PieNotification extends LitElement implements NotificationProps {
     @property({ type: Boolean })
-    public isOpen = true;
+    public isOpen = defaultProps.isOpen;
 
     @property()
-    @validPropertyValues(componentSelector, variants, 'neutral')
-    public variant: NonNullable<NotificationProps['variant']> = 'neutral';
+    @validPropertyValues(componentSelector, variants, defaultProps.variant)
+    public variant: NonNullable<NotificationProps['variant']> = defaultProps.variant;
 
     @property()
-    @validPropertyValues(componentSelector, positions, 'inline-content')
-    public position: NonNullable<NotificationProps['position']> = 'inline-content';
+    @validPropertyValues(componentSelector, positions, defaultProps.position)
+    public position: NonNullable<NotificationProps['position']> = defaultProps.position;
 
     @property({ type: Boolean })
-    public isDismissible = true;
+    public isDismissible = defaultProps.isDismissible;
 
     @property({ type: Boolean })
-    public isCompact = false;
+    public isCompact = defaultProps.isCompact;
 
     @property({ type: String })
     public heading!: string;
 
     @property()
-    @validPropertyValues(componentSelector, headingLevels, 'h2')
-    public headingLevel: NonNullable<NotificationProps['headingLevel']> = 'h2';
+    @validPropertyValues(componentSelector, headingLevels, defaultProps.headingLevel)
+    public headingLevel: NonNullable<NotificationProps['headingLevel']> = defaultProps.headingLevel;
 
     @property({ type: Boolean })
-    public hideIcon = false;
+    public hideIcon = defaultProps.hideIcon;
 
     @property({ type: Object })
     public leadingAction!: NotificationProps['leadingAction'];
@@ -76,7 +77,7 @@ export class PieNotification extends LitElement implements NotificationProps {
     public supportingAction!: NotificationProps['supportingAction'];
 
     @property({ type: Boolean })
-    public hasStackedActions = false;
+    public hasStackedActions = defaultProps.hasStackedActions;
 
     @queryAssignedElements({ slot: 'icon' }) _iconSlot!: Array<HTMLElement>;
 
@@ -327,10 +328,10 @@ export class PieNotification extends LitElement implements NotificationProps {
         const showCloseButton = isDismissible && !isCompact;
 
         return html`
-            <div 
-                data-test-id="${componentSelector}" 
-                class="${componentClass}" 
-                variant="${variant}" 
+            <div
+                data-test-id="${componentSelector}"
+                class="${componentClass}"
+                variant="${variant}"
                 position="${position}"
                 ?isCompact="${isCompact}">
                 ${showCloseButton ? this.renderCloseButton() : nothing}