@justeattakeaway/pie-notification 0.9.3 → 0.10.1

package/custom-elements.json

@@ -82,7 +82,7 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\n    variant: 'neutral',\n    position: 'inline-content',\n    isDismissible: true,\n    isCompact: false,\n    headingLevel: 'h2',\n    hideIcon: false,\n    isOpen: true,\n    hasStackedActions: false,\n}"
+          "default": "{\n    variant: 'neutral',\n    position: 'inline-content',\n    isDismissible: false,\n    isCompact: false,\n    headingLevel: 'h2',\n    hideIcon: false,\n    isOpen: true,\n    hasStackedActions: false,\n}"
         }
       ],
       "exports": [
@@ -176,6 +176,16 @@
           "kind": "class",
           "description": "",
           "name": "PieNotification",
+          "slots": [
+            {
+              "description": "Default slot",
+              "name": ""
+            },
+            {
+              "description": "The icon slot",
+              "name": "icon"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -328,12 +338,6 @@
               "privacy": "private",
               "description": "It handles the action when user clicks in the close button.\nAlso triggers an event when is executed."
             },
-            {
-              "kind": "method",
-              "name": "closeNotificationComponent",
-              "privacy": "private",
-              "description": "Util method responsible to close the component."
-            },
             {
               "kind": "method",
               "name": "handleActionClick",
@@ -346,7 +350,7 @@
                   }
                 }
               ],
-              "description": "It handle the action button action.\nAlso triggers an event according to its `actionType`."
+              "description": "It handles the action button action.\nAlso triggers an event according to its `actionType`."
             },
             {
               "kind": "method",

package/dist/index.d.ts

@@ -118,6 +118,8 @@ export declare const ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT: string;
  * @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.
+ * @slot - Default slot
+ * @slot icon - The icon slot
  */
 export declare class PieNotification extends LitElement implements NotificationProps {
     isOpen: boolean;
@@ -182,13 +184,7 @@ export declare class PieNotification extends LitElement implements NotificationP
      */
     private handleCloseButton;
     /**
-     * Util method responsible to close the component.
-     *
-     * @private
-     */
-    private closeNotificationComponent;
-    /**
-     * It handle the action button action.
+     * It handles the action button action.
      * Also triggers an event according to its `actionType`.
      *
      * @param {'leading' | 'supporting'} actionType

package/dist/index.js

@@ -1,7 +1,7 @@
-import { unsafeCSS as O, LitElement as x, nothing as c } from "lit";
+import { unsafeCSS as O, LitElement as x, nothing as s } 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 { property as c, queryAssignedElements as k } from "lit/decorators.js";
 import { ifDefined as y } from "lit/directives/if-defined.js";
 import "@justeattakeaway/pie-button";
 import "@justeattakeaway/pie-icon-button";
@@ -10,10 +10,10 @@ 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"], 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 = {
+const _ = ["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 = {
   variant: "neutral",
   position: "inline-content",
-  isDismissible: !0,
+  isDismissible: !1,
   isCompact: !1,
   headingLevel: "h2",
   hideIcon: !1,
@@ -22,9 +22,9 @@ const k = ["neutral", "neutral-alternative", "info", "success", "warning", "erro
 }, 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 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;
+  for (var r = e > 1 ? void 0 : e ? L(i, o) : i, f = g.length - 1, p; f >= 0; f--)
+    (p = g[f]) && (r = (e ? p(i, o, r) : p(r)) || r);
+  return e && r && D(i, o, r), r;
 };
 class n extends x {
   constructor() {
@@ -46,9 +46,13 @@ class n extends x {
   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}
-                ${i ? this.renderActionButton(i, "leading") : c}
+            <footer    
+                class="${h}-footer" 
+                data-test-id="${t}-footer" 
+                ?isCompact="${this.isCompact}" 
+                ?isStacked="${this.hasStackedActions && !this.isCompact}">
+                    ${o ? this.renderActionButton(o, "supporting") : s}
+                    ${i ? this.renderActionButton(i, "leading") : s}
             </footer>
         `;
   }
@@ -83,7 +87,7 @@ class n extends x {
       case "error":
         return d`<icon-alert-circle class="icon" size="m" data-test-id="${t}-heading-icon-error"></icon-alert-circle>`;
       default:
-        return c;
+        return s;
     }
   }
   /**
@@ -94,11 +98,7 @@ class n extends x {
    * @private
    */
   renderIcon() {
-    const i = this._iconSlot.length > 0;
-    return d`
-                ${i ? c : this.getDefaultVariantIcon()}
-                <slot name="icon"></slot>
-        `;
+    return d`<slot name="icon">${this.getDefaultVariantIcon()}</slot>`;
   }
   /**
    * Template for the close button element. Called within the
@@ -126,18 +126,10 @@ class n extends x {
    * @private
    */
   handleCloseButton() {
-    this.closeNotificationComponent(), m(this, E, { targetNotification: this });
-  }
-  /**
-   * Util method responsible to close the component.
-   *
-   * @private
-   */
-  closeNotificationComponent() {
-    this.isOpen = !1;
+    this.isOpen = !1, m(this, E, { targetNotification: this });
   }
   /**
-   * It handle the action button action.
+   * It handles the action button action.
    * Also triggers an event according to its `actionType`.
    *
    * @param {'leading' | 'supporting'} actionType
@@ -157,26 +149,26 @@ class n extends x {
    * @private
    */
   renderActionButton(i, o) {
-    const { text: e, ariaLabel: s } = i;
+    const { text: e, ariaLabel: r } = i;
     return e ? d`
             <pie-button
                 variant="${o === "leading" ? "primary" : "ghost"}"
                 size="small-productive"
-                aria-label="${s || c}"
+                aria-label="${r || s}"
                 @click="${() => this.handleActionClick(o)}"
                 data-test-id="${t}-${o}-action"
                 ?isFullWidth="${this.hasStackedActions}"
                 type="button">
                 ${e}
             </pie-button>
-        ` : c;
+        ` : s;
   }
   render() {
     const {
       variant: i,
       position: o,
       heading: e,
-      isDismissible: s,
+      isDismissible: r,
       isCompact: f,
       hideIcon: p,
       leadingAction: u,
@@ -184,8 +176,8 @@ class n extends x {
       aria: v
     } = this;
     if (!C)
-      return c;
-    const $ = s && !f;
+      return s;
+    const $ = r && !f;
     return d`
             <div
                 data-test-id="${t}"
@@ -195,64 +187,64 @@ class n extends x {
                 ?isCompact="${f}"
                 role="region"
                 aria-live="${i === "error" ? "assertive" : "polite"}"
-                aria-labelledby="${e ? `${t}-heading` : c}"
+                aria-labelledby="${e ? `${t}-heading` : s}"
                 aria-label="${!e && y(v == null ? void 0 : v.label)}">
-                ${$ ? this.renderCloseButton() : c}
+                ${$ ? this.renderCloseButton() : s}
 
                 <section class="${h}-content-section" ?isDismissible="${$}">
-                    ${p ? c : this.renderIcon()}
+                    ${p ? s : this.renderIcon()}
                     <article>
-                        ${e ? this.renderNotificationHeading() : c}
+                        ${e ? this.renderNotificationHeading() : s}
                         <slot></slot>
                     </article>
                 </section>
 
-                ${u != null && u.text ? this.renderFooter() : c}
+                ${u != null && u.text ? this.renderFooter() : s}
             </div>`;
   }
 }
 n.styles = O(B);
 a([
-  r({ type: Boolean })
+  c({ type: Boolean })
 ], n.prototype, "isOpen", 2);
 a([
-  r(),
-  b(t, k, l.variant)
+  c(),
+  b(t, _, l.variant)
 ], n.prototype, "variant", 2);
 a([
-  r(),
+  c(),
   b(t, A, l.position)
 ], n.prototype, "position", 2);
 a([
-  r({ type: Boolean })
+  c({ type: Boolean })
 ], n.prototype, "isDismissible", 2);
 a([
-  r({ type: Boolean })
+  c({ type: Boolean })
 ], n.prototype, "isCompact", 2);
 a([
-  r({ type: String })
+  c({ type: String })
 ], n.prototype, "heading", 2);
 a([
-  r(),
+  c(),
   b(t, w, l.headingLevel)
 ], n.prototype, "headingLevel", 2);
 a([
-  r({ type: Boolean })
+  c({ type: Boolean })
 ], n.prototype, "hideIcon", 2);
 a([
-  r({ type: Object })
+  c({ type: Object })
 ], n.prototype, "leadingAction", 2);
 a([
-  r({ type: Object })
+  c({ type: Object })
 ], n.prototype, "supportingAction", 2);
 a([
-  r({ type: Boolean })
+  c({ type: Boolean })
 ], n.prototype, "hasStackedActions", 2);
 a([
-  r({ type: Object })
+  c({ type: Object })
 ], n.prototype, "aria", 2);
 a([
-  _({ slot: "icon" })
+  k({ slot: "icon" })
 ], n.prototype, "_iconSlot", 2);
 I(t, n);
 export {
@@ -266,5 +258,5 @@ export {
   l as defaultProps,
   w as headingLevels,
   A as positions,
-  k as variants
+  _ as variants
 };

package/dist/react.d.ts

@@ -121,6 +121,8 @@ export declare const PieNotification: React_2.ForwardRefExoticComponent<Notifica
  * @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.
+ * @slot - Default slot
+ * @slot icon - The icon slot
  */
 declare class PieNotification_2 extends LitElement implements NotificationProps {
     isOpen: boolean;
@@ -185,13 +187,7 @@ declare class PieNotification_2 extends LitElement implements NotificationProps
      */
     private handleCloseButton;
     /**
-     * Util method responsible to close the component.
-     *
-     * @private
-     */
-    private closeNotificationComponent;
-    /**
-     * It handle the action button action.
+     * It handles the action button action.
      * Also triggers an event according to its `actionType`.
      *
      * @param {'leading' | 'supporting'} actionType

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-notification",
   "description": "PIE Design System Notification built using Web Components",
-  "version": "0.9.3",
+  "version": "0.10.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -36,13 +36,14 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeattakeaway/pie-components-config": "0.16.0",
+    "@justeattakeaway/pie-components-config": "0.18.0",
+    "@justeattakeaway/pie-css": "0.12.1",
     "@justeattakeaway/pie-wrapper-react": "0.14.1",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-icon-button": "0.28.9",
-    "@justeattakeaway/pie-icons-webc": "0.24.2",
+    "@justeattakeaway/pie-icon-button": "0.28.11",
+    "@justeattakeaway/pie-icons-webc": "0.25.1",
     "@justeattakeaway/pie-webc-core": "0.24.0"
   },
   "volta": {

package/src/defs.ts

@@ -121,7 +121,7 @@ export type DefaultProps = ComponentDefaultProps<NotificationProps, keyof Omit<N
 export const defaultProps: DefaultProps = {
     variant: 'neutral',
     position: 'inline-content',
-    isDismissible: true,
+    isDismissible: false,
     isCompact: false,
     headingLevel: 'h2',
     hideIcon: false,

package/src/index.ts

@@ -42,6 +42,8 @@ export * from './defs';
  * @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.
+ * @slot - Default slot
+ * @slot icon - The icon slot
  */
 export class PieNotification extends LitElement implements NotificationProps {
     @property({ type: Boolean })
@@ -107,9 +109,13 @@ export class PieNotification extends LitElement implements NotificationProps {
     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}
-                ${leadingAction ? this.renderActionButton(leadingAction, 'leading') : nothing}
+            <footer    
+                class="${componentClass}-footer" 
+                data-test-id="${componentSelector}-footer" 
+                ?isCompact="${this.isCompact}" 
+                ?isStacked="${this.hasStackedActions && !this.isCompact}">
+                    ${supportingAction ? this.renderActionButton(supportingAction, 'supporting') : nothing}
+                    ${leadingAction ? this.renderActionButton(leadingAction, 'leading') : nothing}
             </footer>
         `;
     }
@@ -160,12 +166,7 @@ export class PieNotification extends LitElement implements NotificationProps {
      * @private
      */
     private renderIcon (): TemplateResult | typeof nothing {
-        const hasExternalIcon = this._iconSlot.length > 0;
-
-        return html`
-                ${!hasExternalIcon ? this.getDefaultVariantIcon() : nothing}
-                <slot name="icon"></slot>
-        `;
+        return html`<slot name="icon">${this.getDefaultVariantIcon()}</slot>`;
     }
 
     /**
@@ -194,21 +195,12 @@ export class PieNotification extends LitElement implements NotificationProps {
      * @private
      */
     private handleCloseButton () {
-        this.closeNotificationComponent();
-        dispatchCustomEvent(this, ON_NOTIFICATION_CLOSE_EVENT, { targetNotification: this });
-    }
-
-    /**
-     * Util method responsible to close the component.
-     *
-     * @private
-     */
-    private closeNotificationComponent () {
         this.isOpen = false;
+        dispatchCustomEvent(this, ON_NOTIFICATION_CLOSE_EVENT, { targetNotification: this });
     }
 
     /**
-     * It handle the action button action.
+     * It handles the action button action.
      * Also triggers an event according to its `actionType`.
      *
      * @param {'leading' | 'supporting'} actionType