@justeattakeaway/pie-toast 0.12.34 → 0.12.35

package/dist/index.js

@@ -14,9 +14,9 @@ const f = class f extends y {
     this.getAttribute("v") || this.setAttribute("v", f.v);
   }
 };
-f.v = "0.12.34";
+f.v = "0.12.35";
 let m = f;
-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-family: var(--dt-font-body-s-family);--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-family:var(--toast-font-family);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 = {
+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-family: var(--dt-font-body-s-family);--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-family:var(--toast-font-family);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}.is-multiline .c-toast-contentArea{align-items:flex-start;gap:0}.is-multiline .c-toast-messageArea{align-items:flex-start;padding-block-end:var(--dt-spacing-b)}.is-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", n = "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, 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;
+var k = Object.defineProperty, B = Object.getOwnPropertyDescriptor, a = (t, i, c, o) => {
+  for (var r = o > 1 ? void 0 : o ? B(i, c) : i, h = t.length - 1, v; h >= 0; h--)
+    (v = t[h]) && (r = (o ? v(i, c, r) : v(r)) || r);
+  return o && r && k(i, c, r), r;
 };
 let e = class extends m {
   constructor() {
@@ -63,8 +63,8 @@ let e = class extends m {
    *
    * @private
    */
-  addListenersToElement(t, r, c, o) {
-    t && (t.addEventListener(r, () => {
+  addListenersToElement(t, i, c, o) {
+    t && (t.addEventListener(i, () => {
       this._timeoutId && clearTimeout(this._timeoutId);
     }, { signal: o }), t.addEventListener(c, () => {
       this.setAutoDismiss();
@@ -107,7 +107,7 @@ let e = class extends m {
    * @private
    */
   renderActionButton(t) {
-    const { text: r, ariaLabel: c } = t;
+    const { text: i, ariaLabel: c } = t;
     return l`
             <pie-button
                 variant="${this.shouldNotUseInverseBtnVariant() ? "ghost" : "ghost-inverse"}"
@@ -116,7 +116,7 @@ let e = class extends m {
                 @click="${() => this.handleActionClick()}"
                 data-test-id="${s}-leading-action"
                 type="button">
-                ${r}
+                ${i}
             </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="${s}-footer" >
+            <footer class="${n}-footer" data-test-id="${s}-footer" >
                 ${t ? this.renderActionButton(t) : d}
             </footer>
         `;
@@ -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="${s}-heading-icon-info"></icon-info-circle>`;
+        return l`<icon-info-circle class="${n}-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="${s}-heading-icon-success"></icon-check-circle>`;
+        return l`<icon-check-circle class="${n}-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="${s}-heading-icon-warning"></icon-alert-triangle>`;
+        return l`<icon-alert-triangle class="${n}-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="${s}-heading-icon-error"></icon-alert-circle>`;
+        return l`<icon-alert-circle class="${n}-icon" size="s" data-test-id="${s}-heading-icon-error"></icon-alert-circle>`;
       default:
         return d;
     }
@@ -215,33 +215,33 @@ let e = class extends m {
   render() {
     const {
       variant: t,
-      message: r,
+      message: i,
       isDismissible: c,
       leadingAction: o,
-      isMultiline: n,
+      isMultiline: r,
       isStrong: h
     } = this, v = {
-      [i]: !0,
-      [`${i}--multiline`]: n,
-      [`${i}--${t}`]: !0,
-      [`${i}--strong`]: h
+      [n]: !0,
+      "is-multiline": r,
+      [`${n}--${t}`]: !0,
+      [`${n}--strong`]: h
     };
     return l`
             <div
                 role="${t === "error" ? "alert" : "status"}"
                 data-test-id="${s}"
                 class="${x(v)}">
-                <div class="${i}-contentArea">
-                    <div class="${i}-messageArea">
+                <div class="${n}-contentArea">
+                    <div class="${n}-messageArea">
                         ${this.variantHasIcon(t) ? this.getVariantIcon() : d}
-                        ${r === "" ? d : this.renderMessage(r)}
+                        ${i === "" ? d : this.renderMessage(i)}
                     </div>
-                    <div class="${i}-actionsArea">
-                        ${!n && (o != null && o.text) ? this.renderActionButton(o) : d}
+                    <div class="${n}-actionsArea">
+                        ${!r && (o != null && o.text) ? this.renderActionButton(o) : d}
                         ${c ? this.renderCloseButton() : d}
                     </div>
                 </div>
-                ${n && (o != null && o.text) ? this.renderFooter() : d}
+                ${r && (o != null && o.text) ? this.renderFooter() : d}
             </div>`;
   }
 };
@@ -285,7 +285,7 @@ export {
   T as ON_TOAST_LEADING_ACTION_CLICK_EVENT,
   E as ON_TOAST_OPEN_EVENT,
   e as PieToast,
-  i as componentClass,
+  n as componentClass,
   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.34",
+  "version": "0.12.35",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -45,15 +45,15 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.21.0",
-    "@justeattakeaway/pie-css": "0.32.0",
+    "@justeattakeaway/pie-css": "1.0.0",
     "@justeattakeaway/pie-monorepo-utils": "0.7.0",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-button": "1.13.1",
-    "@justeattakeaway/pie-icon-button": "2.7.4",
-    "@justeattakeaway/pie-icons-webc": "1.21.1",
-    "@justeattakeaway/pie-webc-core": "12.0.0"
+    "@justeattakeaway/pie-button": "1.13.2",
+    "@justeattakeaway/pie-icon-button": "2.7.5",
+    "@justeattakeaway/pie-icons-webc": "1.21.2",
+    "@justeattakeaway/pie-webc-core": "13.0.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/index.ts

@@ -323,7 +323,7 @@ export class PieToast extends PieElement implements ToastProps {
 
         const componentWrapperClasses = {
             [componentClass]: true,
-            [`${componentClass}--multiline`]: isMultiline,
+            'is-multiline': isMultiline,
             [`${componentClass}--${variant}`]: true,
             [`${componentClass}--strong`]: isStrong,
         };

package/src/toast.scss

@@ -96,7 +96,7 @@
   flex-shrink: 0;
 }
 
-.c-toast--multiline {
+.is-multiline {
   .c-toast-contentArea {
     align-items: flex-start;
     gap: 0;