@justeattakeaway/pie-toast 0.4.2 → 0.4.4

package/custom-elements.json

@@ -60,7 +60,7 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\n    isOpen: true,\n    variant: 'neutral',\n    isStrong: false,\n    isDismissible: true,\n    isMultiline: false,\n    duration: 5000,\n}"
+          "default": "{\n    message: '',\n    isOpen: true,\n    variant: 'neutral',\n    isStrong: false,\n    isDismissible: true,\n    isMultiline: false,\n    duration: 5000,\n}"
         }
       ],
       "exports": [
@@ -134,11 +134,7 @@
             {
               "kind": "field",
               "name": "message",
-              "type": {
-                "text": "ToastProps['message']"
-              },
               "privacy": "public",
-              "default": "''",
               "attribute": "message"
             },
             {
@@ -191,14 +187,16 @@
               "name": "actionButton",
               "type": {
                 "text": "HTMLElement | undefined"
-              }
+              },
+              "privacy": "private"
             },
             {
               "kind": "field",
               "name": "closeButton",
               "type": {
                 "text": "HTMLElement | undefined"
-              }
+              },
+              "privacy": "private"
             },
             {
               "kind": "field",
@@ -438,10 +436,6 @@
           "attributes": [
             {
               "name": "message",
-              "type": {
-                "text": "ToastProps['message']"
-              },
-              "default": "''",
               "fieldName": "message"
             },
             {

package/dist/index.d.ts

@@ -21,7 +21,7 @@ export declare const componentClass = "c-toast";
 
 export declare const componentSelector = "pie-toast";
 
-export declare type DefaultProps = ComponentDefaultProps<ToastProps, keyof Omit<ToastProps, 'message' | 'leadingAction'>>;
+export declare type DefaultProps = ComponentDefaultProps<ToastProps, keyof Omit<ToastProps, 'leadingAction'>>;
 
 export declare const defaultProps: DefaultProps;
 
@@ -50,7 +50,7 @@ export declare const ON_TOAST_OPEN_EVENT: string;
  * @tagname pie-toast
  */
 export declare class PieToast extends PieToast_base implements ToastProps {
-    message: ToastProps['message'];
+    message: string;
     isOpen: boolean;
     variant: "neutral" | "info" | "warning" | "success" | "error";
     isStrong: boolean;
@@ -58,8 +58,8 @@ export declare class PieToast extends PieToast_base implements ToastProps {
     isMultiline: boolean;
     leadingAction: ToastProps['leadingAction'];
     duration: number | null;
-    actionButton?: HTMLElement;
-    closeButton?: HTMLElement;
+    private actionButton?;
+    private closeButton?;
     private _actionButtonOffset;
     private _messageAreaMaxWidth;
     private _timeoutId;

package/dist/index.js

@@ -1,5 +1,5 @@
 import { LitElement as C, unsafeCSS as w, html as l, nothing as d } from "lit";
-import { property as u, query as y } from "lit/decorators.js";
+import { property as p, query as y } from "lit/decorators.js";
 import { classMap as $ } from "lit/directives/class-map.js";
 import { RtlMixin as O, dispatchCustomEvent as f, validPropertyValues as E, defineCustomElement as _ } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-icon-button";
@@ -9,7 +9,8 @@ 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 k = "*,*: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);transition-property:all;transition-duration:var(--dt-motion-timing-100);transition-timing-function:var(--dt-motion-easing-in)}.c-toast--animate-in{animation-duration:var(--dt-motion-timing-200);animation-name:animate-in;animation-timing-function:var(--dt-motion-easing-in);transform:translate(0)}.c-toast--animate-out{animation-duration:var(--dt-motion-timing-100);animation-name:animate-out;animation-timing-function:var(--dt-motion-easing-out);transform:translate(100%);opacity:0}.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)}@keyframes animate-in{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes animate-out{0%{transform:translate(0)}to{transform:translate(100%)}}", B = ["neutral", "info", "warning", "success", "error"], o = "pie-toast", s = "c-toast", M = `${o}-close`, I = `${o}-open`, T = `${o}-leading-action-click`, h = {
+const k = "*,*: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);transition-property:all;transition-duration:var(--dt-motion-timing-100);transition-timing-function:var(--dt-motion-easing-in)}.c-toast--animate-in{animation-duration:var(--dt-motion-timing-200);animation-name:animate-in;animation-timing-function:var(--dt-motion-easing-in);transform:translate(0)}.c-toast--animate-out{animation-duration:var(--dt-motion-timing-100);animation-name:animate-out;animation-timing-function:var(--dt-motion-easing-out);transform:translate(100%);opacity:0}.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)}@keyframes animate-in{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes animate-out{0%{transform:translate(0)}to{transform:translate(100%)}}", B = ["neutral", "info", "warning", "success", "error"], o = "pie-toast", s = "c-toast", M = `${o}-close`, I = `${o}-open`, T = `${o}-leading-action-click`, u = {
+  message: "",
   isOpen: !0,
   variant: "neutral",
   isStrong: !1,
@@ -18,13 +19,13 @@ const k = "*,*:after,*:before{box-sizing:inherit}.c-toast{--toast-border-radius:
   duration: 5e3
 };
 var L = Object.defineProperty, c = (v, t, i, n) => {
-  for (var e = void 0, r = v.length - 1, p; r >= 0; r--)
-    (p = v[r]) && (e = p(t, i, e) || e);
+  for (var e = void 0, r = v.length - 1, h; r >= 0; r--)
+    (h = v[r]) && (e = h(t, i, e) || e);
   return e && L(t, i, e), e;
 };
 const g = class g extends O(C) {
   constructor() {
-    super(...arguments), this.message = "", this.isOpen = h.isOpen, this.variant = h.variant, this.isStrong = h.isStrong, this.isDismissible = h.isDismissible, this.isMultiline = h.isMultiline, this.duration = h.duration, this._actionButtonOffset = 0, this._messageAreaMaxWidth = 0, this._timeoutId = null, this._abortController = null;
+    super(...arguments), this.message = u.message, this.isOpen = u.isOpen, this.variant = u.variant, this.isStrong = u.isStrong, this.isDismissible = u.isDismissible, this.isMultiline = u.isMultiline, this.duration = u.duration, this._actionButtonOffset = 0, this._messageAreaMaxWidth = 0, this._timeoutId = null, this._abortController = null;
   }
   /**
    * Create a timeout function and set its id into a private attribute.
@@ -230,7 +231,7 @@ const g = class g extends O(C) {
       message: n,
       isDismissible: e,
       leadingAction: r,
-      isMultiline: p,
+      isMultiline: h,
       isStrong: b,
       _messageAreaMaxWidth: x
     } = this, m = {
@@ -241,12 +242,12 @@ const g = class g extends O(C) {
       [`${s}--animate-out`]: !t
     }, A = {
       [`${s}-messageArea`]: !0,
-      [`${s}--multiline`]: p
+      [`${s}--multiline`]: h
     };
     return l`
-            <div 
-                data-test-id="${o}" 
-                class="${$(m)}" 
+            <div
+                data-test-id="${o}"
+                class="${$(m)}"
                 aria-live="${i === "error" ? "assertive" : "polite"}"
             >
                 <div class="${s}-contentArea">
@@ -255,40 +256,40 @@ const g = class g extends O(C) {
                         ${n === "" ? d : this.renderMessage(n, x)}
                     </div>
                     <div class="${s}-actionsArea">
-                        ${!p && (r != null && r.text) ? this.renderActionButton(r) : d}
+                        ${!h && (r != null && r.text) ? this.renderActionButton(r) : d}
                         ${e ? this.renderCloseButton() : d}
                     </div>
                 </div>
-                ${p && (r != null && r.text) ? this.renderFooter() : d}
+                ${h && (r != null && r.text) ? this.renderFooter() : d}
             </div>`;
   }
 };
 g.styles = w(k);
 let a = g;
 c([
-  u()
+  p({ type: String })
 ], a.prototype, "message");
 c([
-  u({ type: Boolean })
+  p({ type: Boolean })
 ], a.prototype, "isOpen");
 c([
-  u(),
-  E(o, B, h.variant)
+  p({ type: String }),
+  E(o, B, u.variant)
 ], a.prototype, "variant");
 c([
-  u({ type: Boolean })
+  p({ type: Boolean })
 ], a.prototype, "isStrong");
 c([
-  u({ type: Boolean })
+  p({ type: Boolean })
 ], a.prototype, "isDismissible");
 c([
-  u({ type: Boolean })
+  p({ type: Boolean })
 ], a.prototype, "isMultiline");
 c([
-  u({ type: Object })
+  p({ type: Object })
 ], a.prototype, "leadingAction");
 c([
-  u({ type: Number })
+  p({ type: Number })
 ], a.prototype, "duration");
 c([
   y("pie-button")
@@ -304,6 +305,6 @@ export {
   a as PieToast,
   s as componentClass,
   o as componentSelector,
-  h as defaultProps,
+  u as defaultProps,
   B as variants
 };

package/dist/react.d.ts

@@ -22,7 +22,7 @@ export declare const componentClass = "c-toast";
 
 export declare const componentSelector = "pie-toast";
 
-export declare type DefaultProps = ComponentDefaultProps<ToastProps, keyof Omit<ToastProps, 'message' | 'leadingAction'>>;
+export declare type DefaultProps = ComponentDefaultProps<ToastProps, keyof Omit<ToastProps, 'leadingAction'>>;
 
 export declare const defaultProps: DefaultProps;
 
@@ -53,7 +53,7 @@ export declare const PieToast: React_2.ForwardRefExoticComponent<ToastProps & Re
  * @tagname pie-toast
  */
 declare class PieToast_2 extends PieToast_base implements ToastProps {
-    message: ToastProps['message'];
+    message: string;
     isOpen: boolean;
     variant: "neutral" | "info" | "warning" | "success" | "error";
     isStrong: boolean;
@@ -61,8 +61,8 @@ declare class PieToast_2 extends PieToast_base implements ToastProps {
     isMultiline: boolean;
     leadingAction: ToastProps['leadingAction'];
     duration: number | null;
-    actionButton?: HTMLElement;
-    closeButton?: HTMLElement;
+    private actionButton?;
+    private closeButton?;
     private _actionButtonOffset;
     private _messageAreaMaxWidth;
     private _timeoutId;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-toast",
   "description": "PIE Design System Toast built using Web Components",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -41,8 +41,8 @@
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-button": "0.49.3",
-    "@justeattakeaway/pie-icon-button": "0.29.1",
+    "@justeattakeaway/pie-button": "1.0.0",
+    "@justeattakeaway/pie-icon-button": "1.0.0",
     "@justeattakeaway/pie-icons-webc": "1.1.0",
     "@justeattakeaway/pie-webc-core": "0.24.2"
   },

package/src/defs.ts

@@ -77,9 +77,10 @@ export const ON_TOAST_OPEN_EVENT = `${componentSelector}-open`;
  */
 export const ON_TOAST_LEADING_ACTION_CLICK_EVENT = `${componentSelector}-leading-action-click`;
 
-export type DefaultProps = ComponentDefaultProps<ToastProps, keyof Omit<ToastProps, 'message' | 'leadingAction'>>;
+export type DefaultProps = ComponentDefaultProps<ToastProps, keyof Omit<ToastProps, 'leadingAction'>>;
 
 export const defaultProps: DefaultProps = {
+    message: '',
     isOpen: true,
     variant: 'neutral',
     isStrong: false,

package/src/index.ts

@@ -42,13 +42,13 @@ export * from './defs';
  * @tagname pie-toast
  */
 export class PieToast extends RtlMixin(LitElement) implements ToastProps {
-    @property()
-    public message: ToastProps['message'] = '';
+    @property({ type: String })
+    public message = defaultProps.message;
 
     @property({ type: Boolean })
     public isOpen = defaultProps.isOpen;
 
-    @property()
+    @property({ type: String })
     @validPropertyValues(componentSelector, variants, defaultProps.variant)
     public variant = defaultProps.variant;
 
@@ -67,9 +67,11 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps {
     @property({ type: Number })
     public duration = defaultProps.duration;
 
-    @query('pie-button') actionButton?: HTMLElement;
+    @query('pie-button')
+    private actionButton?: HTMLElement;
 
-    @query('pie-icon-button') closeButton?: HTMLElement;
+    @query('pie-icon-button')
+    private closeButton?: HTMLElement;
 
     private _actionButtonOffset = 0;
 
@@ -406,9 +408,9 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps {
         };
 
         return html`
-            <div 
-                data-test-id="${componentSelector}" 
-                class="${classMap(componentWrapperClasses)}" 
+            <div
+                data-test-id="${componentSelector}"
+                class="${classMap(componentWrapperClasses)}"
                 aria-live="${variant === 'error' ? 'assertive' : 'polite'}"
             >
                 <div class="${componentClass}-contentArea">