@justeattakeaway/pie-toast 0.12.44 → 0.13.0

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import { CSSResult } from 'lit';
+import { nothing } from 'lit';
 import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
 import { PropertyValues } from 'lit';
 import { TemplateResult } from 'lit';
@@ -168,7 +169,7 @@ export declare class PieToast extends PieElement implements ToastProps {
      * @private
      */
     private shouldNotUseInverseBtnVariant;
-    render(): TemplateResult<1>;
+    render(): typeof nothing | TemplateResult<1>;
 }
 
 export declare interface ToastProps {

package/dist/index.js

@@ -1,4 +1,4 @@
-import { LitElement as y, unsafeCSS as $, nothing as d, html as l } from "lit";
+import { LitElement as y, unsafeCSS as $, nothing as l, html as d } from "lit";
 import { property as u, query as b } from "lit/decorators.js";
 import { classMap as x } from "lit/directives/class-map.js";
 import { validPropertyValues as A, safeCustomElement as w, dispatchCustomEvent as g } from "@justeattakeaway/pie-webc-core";
@@ -14,9 +14,9 @@ const f = class f extends y {
     this.getAttribute("v") || this.setAttribute("v", f.v);
   }
 };
-f.v = "0.12.44";
+f.v = "0.13.0";
 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}.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 = {
+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)}", O = ["neutral", "info", "warning", "success", "error"], s = "pie-toast", n = "c-toast", _ = `${s}-close`, E = `${s}-open`, T = `${s}-leading-action-click`, p = {
   message: "",
   isOpen: !0,
   variant: "neutral",
@@ -108,11 +108,11 @@ let e = class extends m {
    */
   renderActionButton(t) {
     const { text: i, ariaLabel: c } = t;
-    return l`
+    return d`
             <pie-button
                 variant="${this.shouldNotUseInverseBtnVariant() ? "ghost" : "ghost-inverse"}"
                 size="xsmall"
-                aria-label="${c || d}"
+                aria-label="${c || l}"
                 @click="${() => this.handleActionClick()}"
                 data-test-id="${s}-leading-action"
                 type="button">
@@ -129,9 +129,9 @@ let e = class extends m {
    */
   renderFooter() {
     const { leadingAction: t } = this;
-    return l`
+    return d`
             <footer class="${n}-footer" data-test-id="${s}-footer" >
-                ${t ? this.renderActionButton(t) : d}
+                ${t ? this.renderActionButton(t) : l}
             </footer>
         `;
   }
@@ -142,7 +142,7 @@ let e = class extends m {
    * @private
    */
   renderCloseButton() {
-    return l`
+    return d`
             <pie-icon-button
                 variant="${this.shouldNotUseInverseBtnVariant() ? "ghost-secondary" : "ghost-inverse"}"
                 size="xsmall"
@@ -160,7 +160,7 @@ let e = class extends m {
    * @private
    */
   renderMessage(t) {
-    return l`
+    return d`
             <span data-test-id="${s}-message">
                 ${t}
             </span>
@@ -173,7 +173,7 @@ let e = class extends m {
    * @private
    */
   closeToastComponent() {
-    this.isOpen = !1, g(this, O, { targetNotification: this }), this.abortAndCleanEventListeners();
+    this.isOpen = !1, g(this, _, { targetNotification: this }), this.abortAndCleanEventListeners();
   }
   /**
    * Util method that returns an icon from a variant that has default icon.
@@ -183,15 +183,15 @@ let e = class extends m {
   getVariantIcon() {
     switch (this.variant) {
       case "info":
-        return l`<icon-info-circle class="${n}-icon" size="s" data-test-id="${s}-heading-icon-info"></icon-info-circle>`;
+        return d`<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="${n}-icon" size="s" data-test-id="${s}-heading-icon-success"></icon-check-circle>`;
+        return d`<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="${n}-icon" size="s" data-test-id="${s}-heading-icon-warning"></icon-alert-triangle>`;
+        return d`<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="${n}-icon" size="s" data-test-id="${s}-heading-icon-error"></icon-alert-circle>`;
+        return d`<icon-alert-circle class="${n}-icon" size="s" data-test-id="${s}-heading-icon-error"></icon-alert-circle>`;
       default:
-        return d;
+        return l;
     }
   }
   /**
@@ -213,6 +213,8 @@ let e = class extends m {
     return this.variant === "warning" && this.isStrong;
   }
   render() {
+    if (!this.isOpen)
+      return l;
     const {
       variant: t,
       message: i,
@@ -226,22 +228,22 @@ let e = class extends m {
       [`${n}--${t}`]: !0,
       [`${n}--strong`]: h
     };
-    return l`
+    return d`
             <div
                 role="${t === "error" ? "alert" : "status"}"
                 data-test-id="${s}"
                 class="${x(v)}">
                 <div class="${n}-contentArea">
                     <div class="${n}-messageArea">
-                        ${this.variantHasIcon(t) ? this.getVariantIcon() : d}
-                        ${i === "" ? d : this.renderMessage(i)}
+                        ${this.variantHasIcon(t) ? this.getVariantIcon() : l}
+                        ${i === "" ? l : this.renderMessage(i)}
                     </div>
                     <div class="${n}-actionsArea">
-                        ${!r && (o != null && o.text) ? this.renderActionButton(o) : d}
-                        ${c ? this.renderCloseButton() : d}
+                        ${!r && (o != null && o.text) ? this.renderActionButton(o) : l}
+                        ${c ? this.renderCloseButton() : l}
                     </div>
                 </div>
-                ${r && (o != null && o.text) ? this.renderFooter() : d}
+                ${r && (o != null && o.text) ? this.renderFooter() : l}
             </div>`;
   }
 };
@@ -254,7 +256,7 @@ a([
 ], e.prototype, "isOpen", 2);
 a([
   u({ type: String }),
-  A(s, _, p.variant)
+  A(s, O, p.variant)
 ], e.prototype, "variant", 2);
 a([
   u({ type: Boolean })
@@ -281,12 +283,12 @@ e = a([
   w("pie-toast")
 ], e);
 export {
-  O as ON_TOAST_CLOSE_EVENT,
+  _ as ON_TOAST_CLOSE_EVENT,
   T as ON_TOAST_LEADING_ACTION_CLICK_EVENT,
   E as ON_TOAST_OPEN_EVENT,
   e as PieToast,
   n as componentClass,
   s as componentSelector,
   p as defaultProps,
-  _ as variants
+  O as variants
 };

package/dist/react.d.ts

@@ -1,5 +1,6 @@
 import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import { CSSResult } from 'lit';
+import { nothing } from 'lit';
 import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
 import { PropertyValues } from 'lit';
 import * as React_2 from 'react';
@@ -171,7 +172,7 @@ declare class PieToast_2 extends PieElement implements ToastProps {
      * @private
      */
     private shouldNotUseInverseBtnVariant;
-    render(): TemplateResult<1>;
+    render(): typeof nothing | TemplateResult<1>;
 }
 
 declare type PieToastEvents = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-toast",
   "description": "PIE Design System Toast built using Web Components",
-  "version": "0.12.44",
+  "version": "0.13.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -28,30 +28,30 @@
   },
   "scripts": {
     "build": "run -T vite build",
-    "build:react-wrapper": "npx build-react-wrapper",
+    "build:react-wrapper": "run -T build-react-wrapper",
     "create:manifest": "run -T cem analyze --litelement",
     "lint:scripts": "run -T eslint .",
     "lint:scripts:fix": "yarn lint:scripts --fix",
     "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
     "lint:style:fix": "yarn lint:style --fix",
     "watch": "run -T vite build --watch",
-    "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
+    "test:browsers": "run -T playwright test -c ./playwright-lit.config.ts",
     "test:browsers:ci": "yarn test:browsers",
-    "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_TOAST} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",
+    "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_TOAST} percy exec --allowed-hostname cloudfront.net -- run -T playwright test -c ./playwright-lit-visual.config.ts",
     "test:visual:ci": "yarn test:visual"
   },
   "author": "Just Eat Takeaway.com - Design System Team",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@justeattakeaway/pie-components-config": "0.21.2",
+    "@justeattakeaway/pie-components-config": "0.21.3",
     "@justeattakeaway/pie-css": "1.1.1",
-    "@justeattakeaway/pie-monorepo-utils": "0.9.1"
+    "@justeattakeaway/pie-monorepo-utils": "0.9.2"
   },
   "dependencies": {
-    "@justeattakeaway/pie-button": "1.14.1",
-    "@justeattakeaway/pie-icon-button": "2.7.14",
-    "@justeattakeaway/pie-icons-webc": "1.24.1",
-    "@justeattakeaway/pie-webc-core": "14.0.1"
+    "@justeattakeaway/pie-button": "1.14.2",
+    "@justeattakeaway/pie-icon-button": "2.7.15",
+    "@justeattakeaway/pie-icons-webc": "1.24.2",
+    "@justeattakeaway/pie-webc-core": "14.0.2"
   },
   "customElements": "custom-elements.json",
   "sideEffects": [

package/src/index.ts

@@ -312,6 +312,10 @@ export class PieToast extends PieElement implements ToastProps {
     }
 
     render () {
+        if (!this.isOpen) {
+            return nothing;
+        }
+
         const {
             variant,
             message,