@justeattakeaway/pie-toast 0.12.0 → 0.12.2

package/dist/index.js

@@ -14,9 +14,9 @@ const g = class g extends $ {
     this.getAttribute("v") || this.setAttribute("v", g.v);
   }
 };
-g.v = "0.12.0";
+g.v = "0.12.2";
 let m = g;
-const C = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.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);display:flex;flex-direction:column;justify-content:center;min-height:48px;max-height:122px;min-width:300px;max-width:420px;padding:var(--dt-spacing-b) var(--dt-spacing-c) var(--dt-spacing-b) var(--dt-spacing-d);border-radius:var(--toast-border-radius);background-color:var(--toast-background-color);box-shadow:var(--dt-elevation-below-20);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:6px var(--dt-spacing-a) 6px 0;overflow:hidden}.c-toast-messageArea span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.c-toast-actionsArea{display:flex;gap:var(--dt-spacing-b);flex-shrink:0}.c-toast--multiline .c-toast-contentArea{align-items:flex-start;gap:0}.c-toast--multiline .c-toast-messageArea{align-items:flex-start;padding-block-end:var(--dt-spacing-b)}.c-toast--multiline .c-toast-messageArea span{max-height:60px;white-space:inherit;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.c-toast-footer{display:flex;justify-content:flex-end}.c-toast-icon{color:var(--toast-icon-fill)}", _ = ["neutral", "info", "warning", "success", "error"], o = "pie-toast", i = "c-toast", O = `${o}-close`, E = `${o}-open`, T = `${o}-leading-action-click`, p = {
+const C = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.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);display:flex;flex-direction:column;justify-content:center;min-height:48px;max-height:122px;min-width:300px;max-width:420px;padding:var(--dt-spacing-b) var(--dt-spacing-c) var(--dt-spacing-b) var(--dt-spacing-d);border-radius:var(--toast-border-radius);background-color:var(--toast-background-color);box-shadow:var(--dt-elevation-below-20);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-light);--toast-font-color: var(--dt-color-content-light)}.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:6px var(--dt-spacing-a) 6px 0;overflow:hidden}.c-toast-messageArea span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.c-toast-actionsArea{display:flex;gap:var(--dt-spacing-b);flex-shrink:0}.c-toast--multiline .c-toast-contentArea{align-items:flex-start;gap:0}.c-toast--multiline .c-toast-messageArea{align-items:flex-start;padding-block-end:var(--dt-spacing-b)}.c-toast--multiline .c-toast-messageArea span{max-height:60px;white-space:inherit;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.c-toast-footer{display:flex;justify-content:flex-end}.c-toast-icon{color:var(--toast-icon-fill)}", _ = ["neutral", "info", "warning", "success", "error"], s = "pie-toast", i = "c-toast", O = `${s}-close`, E = `${s}-open`, T = `${s}-leading-action-click`, p = {
   message: "",
   isOpen: !0,
   variant: "neutral",
@@ -25,10 +25,10 @@ const C = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-toast{--
   isMultiline: !1,
   duration: 5e3
 };
-var k = Object.defineProperty, B = Object.getOwnPropertyDescriptor, a = (t, r, c, s) => {
-  for (var n = s > 1 ? void 0 : s ? B(r, c) : r, h = t.length - 1, v; h >= 0; h--)
-    (v = t[h]) && (n = (s ? v(r, c, n) : v(n)) || n);
-  return s && n && k(r, c, n), n;
+var k = Object.defineProperty, B = Object.getOwnPropertyDescriptor, a = (t, r, c, o) => {
+  for (var n = o > 1 ? void 0 : o ? B(r, c) : r, h = t.length - 1, v; h >= 0; h--)
+    (v = t[h]) && (n = (o ? v(r, c, n) : v(n)) || n);
+  return o && n && k(r, c, n), n;
 };
 let e = class extends m {
   constructor() {
@@ -63,12 +63,12 @@ let e = class extends m {
    *
    * @private
    */
-  addListenersToElement(t, r, c, s) {
+  addListenersToElement(t, r, c, o) {
     t && (t.addEventListener(r, () => {
       this._timeoutId && clearTimeout(this._timeoutId);
-    }, { signal: s }), t.addEventListener(c, () => {
+    }, { signal: o }), t.addEventListener(c, () => {
       this.setAutoDismiss();
-    }, { signal: s }));
+    }, { signal: o }));
   }
   /**
    * It creates all event listeners to handle the auto-dismiss capability
@@ -114,7 +114,7 @@ let e = class extends m {
                 size="xsmall"
                 aria-label="${c || d}"
                 @click="${() => this.handleActionClick()}"
-                data-test-id="${o}-leading-action"
+                data-test-id="${s}-leading-action"
                 type="button">
                 ${r}
             </pie-button>
@@ -130,7 +130,7 @@ let e = class extends m {
   renderFooter() {
     const { leadingAction: t } = this;
     return l`
-            <footer class="${i}-footer" data-test-id="${o}-footer" >
+            <footer class="${i}-footer" data-test-id="${s}-footer" >
                 ${t ? this.renderActionButton(t) : d}
             </footer>
         `;
@@ -146,7 +146,7 @@ let e = class extends m {
             <pie-icon-button
                 variant="${this.shouldNotUseInverseBtnVariant() ? "ghost-secondary" : "ghost-inverse"}"
                 size="xsmall"
-                data-test-id="${o}-close"
+                data-test-id="${s}-close"
                 @click="${this.closeToastComponent}">
                 <icon-close></icon-close>
             </pie-icon-button>`;
@@ -161,7 +161,7 @@ let e = class extends m {
    */
   renderMessage(t) {
     return l`
-            <span data-test-id="${o}-message">
+            <span data-test-id="${s}-message">
                 ${t}
             </span>
         `;
@@ -183,13 +183,13 @@ let e = class extends m {
   getVariantIcon() {
     switch (this.variant) {
       case "info":
-        return l`<icon-info-circle class="${i}-icon" size="s" data-test-id="${o}-heading-icon-info"></icon-info-circle>`;
+        return l`<icon-info-circle class="${i}-icon" size="s" data-test-id="${s}-heading-icon-info"></icon-info-circle>`;
       case "success":
-        return l`<icon-check-circle class="${i}-icon" size="s" data-test-id="${o}-heading-icon-success"></icon-check-circle>`;
+        return l`<icon-check-circle class="${i}-icon" size="s" data-test-id="${s}-heading-icon-success"></icon-check-circle>`;
       case "warning":
-        return l`<icon-alert-triangle class="${i}-icon" size="s" data-test-id="${o}-heading-icon-warning"></icon-alert-triangle>`;
+        return l`<icon-alert-triangle class="${i}-icon" size="s" data-test-id="${s}-heading-icon-warning"></icon-alert-triangle>`;
       case "error":
-        return l`<icon-alert-circle class="${i}-icon" size="s" data-test-id="${o}-heading-icon-error"></icon-alert-circle>`;
+        return l`<icon-alert-circle class="${i}-icon" size="s" data-test-id="${s}-heading-icon-error"></icon-alert-circle>`;
       default:
         return d;
     }
@@ -217,7 +217,7 @@ let e = class extends m {
       variant: t,
       message: r,
       isDismissible: c,
-      leadingAction: s,
+      leadingAction: o,
       isMultiline: n,
       isStrong: h
     } = this, v = {
@@ -229,7 +229,7 @@ let e = class extends m {
     return l`
             <div
                 role="${t === "error" ? "alert" : "status"}"
-                data-test-id="${o}"
+                data-test-id="${s}"
                 class="${x(v)}">
                 <div class="${i}-contentArea">
                     <div class="${i}-messageArea">
@@ -237,11 +237,11 @@ let e = class extends m {
                         ${r === "" ? d : this.renderMessage(r)}
                     </div>
                     <div class="${i}-actionsArea">
-                        ${!n && (s != null && s.text) ? this.renderActionButton(s) : d}
+                        ${!n && (o != null && o.text) ? this.renderActionButton(o) : d}
                         ${c ? this.renderCloseButton() : d}
                     </div>
                 </div>
-                ${n && (s != null && s.text) ? this.renderFooter() : d}
+                ${n && (o != null && o.text) ? this.renderFooter() : d}
             </div>`;
   }
 };
@@ -254,7 +254,7 @@ a([
 ], e.prototype, "isOpen", 2);
 a([
   u({ type: String }),
-  A(o, _, p.variant)
+  A(s, _, p.variant)
 ], e.prototype, "variant", 2);
 a([
   u({ type: Boolean })
@@ -286,7 +286,7 @@ export {
   E as ON_TOAST_OPEN_EVENT,
   e as PieToast,
   i as componentClass,
-  o as componentSelector,
+  s as componentSelector,
   p as defaultProps,
   _ as variants
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-toast",
   "description": "PIE Design System Toast built using Web Components",
-  "version": "0.12.0",
+  "version": "0.12.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -40,13 +40,13 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.21.0",
-    "@justeattakeaway/pie-css": "0.20.0",
+    "@justeattakeaway/pie-css": "0.21.0",
     "@justeattakeaway/pie-monorepo-utils": "0.7.0",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-button": "1.6.7",
-    "@justeattakeaway/pie-icon-button": "2.0.6",
+    "@justeattakeaway/pie-button": "1.7.0",
+    "@justeattakeaway/pie-icon-button": "2.1.0",
     "@justeattakeaway/pie-icons-webc": "1.14.2",
     "@justeattakeaway/pie-webc-core": "1.1.0"
   },

package/src/toast.scss

@@ -63,7 +63,8 @@
 
   &.c-toast--strong {
     --toast-background-color: var(--dt-color-support-error);
-    --toast-icon-fill: var(--dt-color-content-inverse);
+    --toast-icon-fill: var(--dt-color-content-light);
+    --toast-font-color: var(--dt-color-content-light);
   }
 }