@justeattakeaway/pie-toast 0.3.2 → 0.3.4

package/dist/index.js

@@ -1,7 +1,7 @@
-import { LitElement as y, html as c, nothing as l, unsafeCSS as w } from "lit";
-import { property as h, query as O } from "lit/decorators.js";
-import { classMap as b } from "lit/directives/class-map.js";
-import { RtlMixin as A, dispatchCustomEvent as v, validPropertyValues as M, defineCustomElement as B } from "@justeattakeaway/pie-webc-core";
+import { LitElement as w, unsafeCSS as O, html as c, nothing as l } from "lit";
+import { property as h, query as A } from "lit/decorators.js";
+import { classMap as $ } from "lit/directives/class-map.js";
+import { RtlMixin as M, dispatchCustomEvent as f, validPropertyValues as k, defineCustomElement as B } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-icon-button";
 import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconInfoCircle.js";
@@ -9,20 +9,19 @@ import "@justeattakeaway/pie-icons-webc/dist/IconAlertCircle.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconAlertTriangle.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconCheckCircle.js";
 import "@justeattakeaway/pie-button";
-const C = `*,*:after,*:before{box-sizing:inherit}.c-toast{--toast-border-radius: var(--dt-radius-rounded-b);--toast-background-color: var(--dt-color-container-inverse);--toast-font-color: var(--dt-color-content-inverse);--toast-font-size: calc(var(--dt-font-body-s-size) * 1px);--toast-line-height: calc(var(--dt-font-body-s-line-height) * 1px);--toast-icon-fill: var(--dt-color-content-default);--toast-message-max-width: 100%;display:flex;flex-direction:column;justify-content:center;min-height:48px;max-height:122px;min-width:300px;max-width:420px;padding:var(--dt-spacing-a) var(--dt-spacing-c) var(--dt-spacing-a) var(--dt-spacing-d);border-radius:var(--toast-border-radius);gap:var(--dt-spacing-a);background-color:var(--toast-background-color);box-shadow:var(--dt-elevation-03);color:var(--toast-font-color);font-size:var(--toast-font-size);line-height:var(--toast-line-height)}.c-toast--info{--toast-icon-fill: var(--dt-color-support-info-inverse)}.c-toast--info.c-toast--strong{--toast-background-color: var(--dt-color-support-info);--toast-icon-fill: var(--dt-color-content-inverse)}.c-toast--warning{--toast-icon-fill: var(--dt-color-support-warning-inverse)}.c-toast--warning.c-toast--strong{--toast-background-color: var(--dt-color-support-warning);--toast-icon-fill: var(--dt-color-content-dark);--toast-font-color: var(--dt-color-content-dark)}.c-toast--success{--toast-icon-fill: var(--dt-color-support-positive-inverse)}.c-toast--success.c-toast--strong{--toast-background-color: var(--dt-color-support-positive);--toast-icon-fill: var(--dt-color-content-inverse)}.c-toast--error{--toast-icon-fill: var(--dt-color-support-error-inverse)}.c-toast--error.c-toast--strong{--toast-background-color: var(--dt-color-support-error);--toast-icon-fill: var(--dt-color-content-inverse)}.c-toast-contentArea{display:flex;gap:var(--dt-spacing-b);justify-content:space-between}.c-toast-messageArea{display:flex;align-items:center;gap:var(--dt-spacing-b);padding:calc(var(--dt-spacing-03) / 2) 0}.c-toast-messageArea span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:var(--toast-message-max-width)}.c-toast-messageArea.c-toast--multiline{align-items:flex-start}.c-toast-messageArea.c-toast--multiline span{max-height:60px;white-space:inherit;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.c-toast-actionsArea{display:flex;gap:var(--dt-spacing-b)}.c-toast-footer{display:flex;justify-content:flex-end}.c-toast-icon{color:var(--toast-icon-fill)}
-`, _ = ["neutral", "info", "warning", "success", "error"], i = "pie-toast", a = "c-toast", N = `${i}-close`, k = `${i}-open`, I = `${i}-leading-action-click`, g = {
+const C = "*,*:after,*:before{box-sizing:inherit}.c-toast{--toast-border-radius: var(--dt-radius-rounded-b);--toast-background-color: var(--dt-color-container-inverse);--toast-font-color: var(--dt-color-content-inverse);--toast-font-size: calc(var(--dt-font-body-s-size) * 1px);--toast-line-height: calc(var(--dt-font-body-s-line-height) * 1px);--toast-icon-fill: var(--dt-color-content-default);--toast-message-max-width: 100%;display:flex;flex-direction:column;justify-content:center;min-height:48px;max-height:122px;min-width:300px;max-width:420px;padding:var(--dt-spacing-a) var(--dt-spacing-c) var(--dt-spacing-a) var(--dt-spacing-d);border-radius:var(--toast-border-radius);gap:var(--dt-spacing-a);background-color:var(--toast-background-color);box-shadow:var(--dt-elevation-03);color:var(--toast-font-color);font-size:var(--toast-font-size);line-height:var(--toast-line-height)}.c-toast--info{--toast-icon-fill: var(--dt-color-support-info-inverse)}.c-toast--info.c-toast--strong{--toast-background-color: var(--dt-color-support-info);--toast-icon-fill: var(--dt-color-content-inverse)}.c-toast--warning{--toast-icon-fill: var(--dt-color-support-warning-inverse)}.c-toast--warning.c-toast--strong{--toast-background-color: var(--dt-color-support-warning);--toast-icon-fill: var(--dt-color-content-dark);--toast-font-color: var(--dt-color-content-dark)}.c-toast--success{--toast-icon-fill: var(--dt-color-support-positive-inverse)}.c-toast--success.c-toast--strong{--toast-background-color: var(--dt-color-support-positive);--toast-icon-fill: var(--dt-color-content-inverse)}.c-toast--error{--toast-icon-fill: var(--dt-color-support-error-inverse)}.c-toast--error.c-toast--strong{--toast-background-color: var(--dt-color-support-error);--toast-icon-fill: var(--dt-color-content-inverse)}.c-toast-contentArea{display:flex;gap:var(--dt-spacing-b);justify-content:space-between}.c-toast-messageArea{display:flex;align-items:center;gap:var(--dt-spacing-b);padding:calc(var(--dt-spacing-03) / 2) 0}.c-toast-messageArea span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:var(--toast-message-max-width)}.c-toast-messageArea.c-toast--multiline{align-items:flex-start}.c-toast-messageArea.c-toast--multiline span{max-height:60px;white-space:inherit;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.c-toast-actionsArea{display:flex;gap:var(--dt-spacing-b)}.c-toast-footer{display:flex;justify-content:flex-end}.c-toast-icon{color:var(--toast-icon-fill)}", N = ["neutral", "info", "warning", "success", "error"], s = "pie-toast", e = "c-toast", I = `${s}-close`, S = `${s}-open`, _ = `${s}-leading-action-click`, g = {
   isOpen: !0,
   variant: "neutral",
   isStrong: !1,
   isDismissible: !0,
   isMultiline: !1
 };
-var S = Object.defineProperty, T = Object.getOwnPropertyDescriptor, p = (f, t, s, o) => {
-  for (var n = o > 1 ? void 0 : o ? T(t, s) : t, e = f.length - 1, d; e >= 0; e--)
-    (d = f[e]) && (n = (o ? d(t, s, n) : d(n)) || n);
-  return o && n && S(t, s, n), n;
+var E = Object.defineProperty, d = (m, t, i, n) => {
+  for (var r = void 0, o = m.length - 1, p; o >= 0; o--)
+    (p = m[o]) && (r = p(t, i, r) || r);
+  return r && E(t, i, r), r;
 };
-class r extends A(y) {
+const v = class v extends M(w) {
   constructor() {
     super(...arguments), this.message = "", this.isOpen = g.isOpen, this.variant = g.variant, this.isStrong = g.isStrong, this.isDismissible = g.isDismissible, this.isMultiline = g.isMultiline, this._actionButtonOffset = 0, this._messageAreaMaxWidth = 0;
   }
@@ -36,9 +35,9 @@ class r extends A(y) {
    *
    * @returns {number} - The width of the message in pixels.
    */
-  getMessageMaxWidth(t, s, o, n) {
+  getMessageMaxWidth(t, i, n, r) {
     let u = 0;
-    return t && (u += 20 + 8), !s && o && (u += this._actionButtonOffset + 8), n && (u += 32 + 8), 392 - u;
+    return t && (u += 28), !i && n && (u += this._actionButtonOffset + 8), r && (u += 40), 392 - u;
   }
   /**
    * Lifecycle method executed when component is updated.
@@ -46,10 +45,10 @@ class r extends A(y) {
    * It calculates _messageAreaMaxWidth
    */
   async updated(t) {
-    var o;
-    t.has("isOpen") && this.isOpen && v(this, k, { targetNotification: this }), await this.updateComplete, this.actionButton && (this._actionButtonOffset = this.actionButton.offsetWidth);
-    const s = this.variantHasIcon(this.variant);
-    this._messageAreaMaxWidth = this.getMessageMaxWidth(s, this.isMultiline, !!((o = this.leadingAction) != null && o.text), this.isDismissible), (t.has("variant") || t.has("isStrong") || t.has("message") || t.has("isDismissible") || t.has("isMultiline") || t.has("leadingAction")) && this.requestUpdate();
+    var n;
+    t.has("isOpen") && this.isOpen && f(this, S, { targetNotification: this }), await this.updateComplete, this.actionButton && (this._actionButtonOffset = this.actionButton.offsetWidth);
+    const i = this.variantHasIcon(this.variant);
+    this._messageAreaMaxWidth = this.getMessageMaxWidth(i, this.isMultiline, !!((n = this.leadingAction) != null && n.text), this.isDismissible), (t.has("variant") || t.has("isStrong") || t.has("message") || t.has("isDismissible") || t.has("isMultiline") || t.has("leadingAction")) && this.requestUpdate();
   }
   /**
    * It handle the action button action.
@@ -57,7 +56,7 @@ class r extends A(y) {
    * @private
    */
   handleActionClick() {
-    v(this, I, { targetNotification: this });
+    f(this, _, { targetNotification: this });
   }
   /**
    * Render the action button depending on action type and its action.
@@ -68,16 +67,16 @@ class r extends A(y) {
    * @private
    */
   renderActionButton(t) {
-    const { text: s, ariaLabel: o } = t;
+    const { text: i, ariaLabel: n } = t;
     return c`
             <pie-button
                 variant="${this.shouldNotUseInverseBtnVariant() ? "ghost" : "ghost-inverse"}"
                 size="xsmall"
-                aria-label="${o || l}"
+                aria-label="${n || l}"
                 @click="${() => this.handleActionClick()}"
-                data-test-id="${i}-leading-action"
+                data-test-id="${s}-leading-action"
                 type="button">
-                ${s}
+                ${i}
             </pie-button>
         `;
   }
@@ -91,7 +90,7 @@ class r extends A(y) {
   renderFooter() {
     const { leadingAction: t } = this;
     return c`
-            <footer class="${a}-footer" data-test-id="${i}-footer" >
+            <footer class="${e}-footer" data-test-id="${s}-footer" >
                 ${t ? this.renderActionButton(t) : l}
             </footer>
         `;
@@ -107,7 +106,7 @@ class r extends A(y) {
             <pie-icon-button
                 variant="${this.shouldNotUseInverseBtnVariant() ? "ghost-secondary" : "ghost-inverse"}"
                 size="xsmall"
-                data-test-id="${i}-close"
+                data-test-id="${s}-close"
                 @click="${this.closeToastComponent}">
                 <icon-close></icon-close>
             </pie-icon-button>`;
@@ -121,9 +120,9 @@ class r extends A(y) {
    *
    * @private
    */
-  renderMessage(t, s) {
+  renderMessage(t, i) {
     return c`
-            <span style="--toast-message-max-width: ${s}px" data-test-id="${i}-message">
+            <span style="--toast-message-max-width: ${i}px" data-test-id="${s}-message">
                 ${t}
             </span>
         `;
@@ -135,7 +134,7 @@ class r extends A(y) {
    * @private
    */
   closeToastComponent() {
-    this.isOpen = !1, v(this, N, { targetNotification: this });
+    this.isOpen = !1, f(this, I, { targetNotification: this });
   }
   /**
    * Util method that returns an icon from a variant that has default icon.
@@ -145,13 +144,13 @@ class r extends A(y) {
   getVariantIcon() {
     switch (this.variant) {
       case "info":
-        return c`<icon-info-circle class="${a}-icon" size="s" data-test-id="${i}-heading-icon-info"></icon-info-circle>`;
+        return c`<icon-info-circle class="${e}-icon" size="s" data-test-id="${s}-heading-icon-info"></icon-info-circle>`;
       case "success":
-        return c`<icon-check-circle class="${a}-icon" size="s" data-test-id="${i}-heading-icon-success"></icon-check-circle>`;
+        return c`<icon-check-circle class="${e}-icon" size="s" data-test-id="${s}-heading-icon-success"></icon-check-circle>`;
       case "warning":
-        return c`<icon-alert-triangle class="${a}-icon" size="s" data-test-id="${i}-heading-icon-warning"></icon-alert-triangle>`;
+        return c`<icon-alert-triangle class="${e}-icon" size="s" data-test-id="${s}-heading-icon-warning"></icon-alert-triangle>`;
       case "error":
-        return c`<icon-alert-circle class="${a}-icon" size="s" data-test-id="${i}-heading-icon-error"></icon-alert-circle>`;
+        return c`<icon-alert-circle class="${e}-icon" size="s" data-test-id="${s}-heading-icon-error"></icon-alert-circle>`;
       default:
         return l;
     }
@@ -177,74 +176,75 @@ class r extends A(y) {
   render() {
     const {
       isOpen: t,
-      variant: s,
-      message: o,
-      isDismissible: n,
-      leadingAction: e,
-      isMultiline: d,
-      isStrong: m,
-      _messageAreaMaxWidth: x
+      variant: i,
+      message: n,
+      isDismissible: r,
+      leadingAction: o,
+      isMultiline: p,
+      isStrong: x,
+      _messageAreaMaxWidth: b
     } = this;
     if (!t)
       return l;
     const u = {
-      [a]: !0,
-      [`${a}--${s}`]: !0,
-      [`${a}--strong`]: m
-    }, $ = {
-      [`${a}-messageArea`]: !0,
-      [`${a}--multiline`]: d
+      [e]: !0,
+      [`${e}--${i}`]: !0,
+      [`${e}--strong`]: x
+    }, y = {
+      [`${e}-messageArea`]: !0,
+      [`${e}--multiline`]: p
     };
     return c`
-            <div data-test-id="${i}" class="${b(u)}">
-                <div class="${a}-contentArea">
-                    <div class="${b($)}">
-                        ${this.variantHasIcon(s) ? this.getVariantIcon() : l}
-                        ${o === "" ? l : this.renderMessage(o, x)} 
+            <div data-test-id="${s}" class="${$(u)}">
+                <div class="${e}-contentArea">
+                    <div class="${$(y)}">
+                        ${this.variantHasIcon(i) ? this.getVariantIcon() : l}
+                        ${n === "" ? l : this.renderMessage(n, b)} 
                     </div>
-                    <div class="${a}-actionsArea">
-                        ${!d && (e != null && e.text) ? this.renderActionButton(e) : l}
-                        ${n ? this.renderCloseButton() : l}
+                    <div class="${e}-actionsArea">
+                        ${!p && (o != null && o.text) ? this.renderActionButton(o) : l}
+                        ${r ? this.renderCloseButton() : l}
                     </div>
                 </div>
-                ${d && (e != null && e.text) ? this.renderFooter() : l}
+                ${p && (o != null && o.text) ? this.renderFooter() : l}
             </div>`;
   }
-}
-r.styles = w(C);
-p([
+};
+v.styles = O(C);
+let a = v;
+d([
   h()
-], r.prototype, "message", 2);
-p([
+], a.prototype, "message");
+d([
   h({ type: Boolean })
-], r.prototype, "isOpen", 2);
-p([
+], a.prototype, "isOpen");
+d([
   h(),
-  M(i, _, g.variant)
-], r.prototype, "variant", 2);
-p([
+  k(s, N, g.variant)
+], a.prototype, "variant");
+d([
   h({ type: Boolean })
-], r.prototype, "isStrong", 2);
-p([
+], a.prototype, "isStrong");
+d([
   h({ type: Boolean })
-], r.prototype, "isDismissible", 2);
-p([
+], a.prototype, "isDismissible");
+d([
   h({ type: Boolean })
-], r.prototype, "isMultiline", 2);
-p([
+], a.prototype, "isMultiline");
+d([
   h({ type: Object })
-], r.prototype, "leadingAction", 2);
-p([
-  O("pie-button")
-], r.prototype, "actionButton", 2);
-B(i, r);
+], a.prototype, "leadingAction");
+d([
+  A("pie-button")
+], a.prototype, "actionButton");
+B(s, a);
 export {
-  N as ON_TOAST_CLOSE_EVENT,
-  I as ON_TOAST_LEADING_ACTION_CLICK_EVENT,
-  k as ON_TOAST_OPEN_EVENT,
-  r as PieToast,
-  a as componentClass,
-  i as componentSelector,
+  I as ON_TOAST_CLOSE_EVENT,
+  _ as ON_TOAST_LEADING_ACTION_CLICK_EVENT,
+  S as ON_TOAST_OPEN_EVENT,
+  a as PieToast,
+  e as componentClass,
+  s as componentSelector,
   g as defaultProps,
-  _ as variants
+  N as variants
 };

package/dist/react.js

@@ -1,32 +1,21 @@
 import * as t from "react";
-import { createComponent as o } from "@lit/react";
-import { PieToast as e } from "./index.js";
-import { ON_TOAST_CLOSE_EVENT as A, ON_TOAST_LEADING_ACTION_CLICK_EVENT as S, ON_TOAST_OPEN_EVENT as I, componentClass as L, componentSelector as V, defaultProps as d, variants as v } from "./index.js";
-import "lit";
-import "lit/decorators.js";
-import "lit/directives/class-map.js";
-import "@justeattakeaway/pie-webc-core";
-import "@justeattakeaway/pie-icon-button";
-import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
-import "@justeattakeaway/pie-icons-webc/dist/IconInfoCircle.js";
-import "@justeattakeaway/pie-icons-webc/dist/IconAlertCircle.js";
-import "@justeattakeaway/pie-icons-webc/dist/IconAlertTriangle.js";
-import "@justeattakeaway/pie-icons-webc/dist/IconCheckCircle.js";
-import "@justeattakeaway/pie-button";
-const r = o({
+import { createComponent as e } from "@lit/react";
+import { PieToast as o } from "./index.js";
+import { ON_TOAST_CLOSE_EVENT as n, ON_TOAST_LEADING_ACTION_CLICK_EVENT as p, ON_TOAST_OPEN_EVENT as N, componentClass as _, componentSelector as c, defaultProps as E, variants as O } from "./index.js";
+const a = e({
   displayName: "PieToast",
-  elementClass: e,
+  elementClass: o,
   react: t,
   tagName: "pie-toast",
   events: {}
-}), P = r;
+}), r = a;
 export {
-  A as ON_TOAST_CLOSE_EVENT,
-  S as ON_TOAST_LEADING_ACTION_CLICK_EVENT,
-  I as ON_TOAST_OPEN_EVENT,
-  P as PieToast,
-  L as componentClass,
-  V as componentSelector,
-  d as defaultProps,
-  v as variants
+  n as ON_TOAST_CLOSE_EVENT,
+  p as ON_TOAST_LEADING_ACTION_CLICK_EVENT,
+  N as ON_TOAST_OPEN_EVENT,
+  r as PieToast,
+  _ as componentClass,
+  c as componentSelector,
+  E as defaultProps,
+  O as variants
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-toast",
   "description": "PIE Design System Toast built using Web Components",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -37,14 +37,14 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.18.0",
-    "@justeattakeaway/pie-css": "0.12.1",
+    "@justeattakeaway/pie-css": "0.13.0",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-button": "0.49.0",
-    "@justeattakeaway/pie-icon-button": "0.28.11",
-    "@justeattakeaway/pie-icons-webc": "0.25.1",
-    "@justeattakeaway/pie-webc-core": "0.24.0"
+    "@justeattakeaway/pie-button": "0.49.2",
+    "@justeattakeaway/pie-icon-button": "0.28.13",
+    "@justeattakeaway/pie-icons-webc": "0.25.2",
+    "@justeattakeaway/pie-webc-core": "0.24.1"
   },
   "volta": {
     "extends": "../../../package.json"