@justeattakeaway/pie-toast 0.2.0 → 0.3.0

package/custom-elements.json

@@ -12,6 +12,14 @@
       "kind": "javascript-module",
       "path": "src/defs.js",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "variants",
+          "type": {
+            "text": "['neutral', 'info', 'warning', 'success', 'error']"
+          },
+          "default": "['neutral', 'info', 'warning', 'success', 'error']"
+        },
         {
           "kind": "variable",
           "name": "componentSelector",
@@ -52,10 +60,18 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\n    isOpen: true,\n    isDismissible: true,\n    isMultiline: false,\n}"
+          "default": "{\n    isOpen: true,\n    variant: 'neutral',\n    isStrong: false,\n    isDismissible: true,\n    isMultiline: false,\n}"
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "variants",
+          "declaration": {
+            "name": "variants",
+            "module": "src/defs.js"
+          }
+        },
         {
           "kind": "js",
           "name": "componentSelector",
@@ -131,6 +147,18 @@
               "privacy": "public",
               "attribute": "isOpen"
             },
+            {
+              "kind": "field",
+              "name": "variant",
+              "privacy": "public",
+              "attribute": "variant"
+            },
+            {
+              "kind": "field",
+              "name": "isStrong",
+              "privacy": "public",
+              "attribute": "isStrong"
+            },
             {
               "kind": "field",
               "name": "isDismissible",
@@ -293,6 +321,33 @@
               "name": "closeToastComponent",
               "privacy": "private",
               "description": "Util method responsible to close the component.\nIt handles the action when user clicks in the close button and triggers an event when is executed."
+            },
+            {
+              "kind": "method",
+              "name": "getVariantIcon",
+              "privacy": "private",
+              "description": "Util method that returns an icon from a variant that has default icon."
+            },
+            {
+              "kind": "method",
+              "name": "variantHasIcon",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "variant",
+                  "type": {
+                    "text": "typeof variants[number]"
+                  },
+                  "description": "The variant to check if has icon."
+                }
+              ],
+              "description": "Util method that returns true if the variant has an icon."
+            },
+            {
+              "kind": "method",
+              "name": "shouldNotUseInverseBtnVariant",
+              "privacy": "private",
+              "description": "util method that returns true if the variant is warning and is strong."
             }
           ],
           "attributes": [
@@ -308,6 +363,14 @@
               "name": "isOpen",
               "fieldName": "isOpen"
             },
+            {
+              "name": "variant",
+              "fieldName": "variant"
+            },
+            {
+              "name": "isStrong",
+              "fieldName": "isStrong"
+            },
             {
               "name": "isDismissible",
               "fieldName": "isDismissible"

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import type { LitElement } from 'lit';
@@ -22,7 +22,7 @@ export declare const componentClass = "c-toast";
 
 export declare const componentSelector = "pie-toast";
 
-export declare type DefaultProps = ComponentDefaultPropsGeneric<ToastProps, 'isOpen' | 'isDismissible' | 'isMultiline'>;
+export declare type DefaultProps = ComponentDefaultProps<ToastProps, keyof Omit<ToastProps, 'message' | 'leadingAction'>>;
 
 export declare const defaultProps: DefaultProps;
 
@@ -52,9 +52,11 @@ export declare const ON_TOAST_OPEN_EVENT: string;
  */
 export declare class PieToast extends PieToast_base implements ToastProps {
     message: ToastProps['message'];
-    isOpen: any;
-    isDismissible: any;
-    isMultiline: any;
+    isOpen: boolean;
+    variant: "neutral" | "info" | "warning" | "success" | "error";
+    isStrong: boolean;
+    isDismissible: boolean;
+    isMultiline: boolean;
     leadingAction: ToastProps['leadingAction'];
     actionButton?: HTMLElement;
     private _actionButtonOffset;
@@ -124,6 +126,26 @@ export declare class PieToast extends PieToast_base implements ToastProps {
      * @private
      */
     private closeToastComponent;
+    /**
+     * Util method that returns an icon from a variant that has default icon.
+     *
+     * @private
+     */
+    private getVariantIcon;
+    /**
+     * Util method that returns true if the variant has an icon.
+     *
+     * @param {typeof variants[number]} variant - The variant to check if has icon.
+     *
+     * @private
+     */
+    private variantHasIcon;
+    /**
+     * util method that returns true if the variant is warning and is strong.
+     *
+     * @private
+     */
+    private shouldNotUseInverseBtnVariant;
     render(): TemplateResult<1> | typeof nothing;
 }
 
@@ -134,6 +156,14 @@ export declare interface ToastProps {
      * When true, the toast is set to be open and visible.
      */
     isOpen?: boolean;
+    /**
+     * Sets the variant of the toast.
+     */
+    variant?: typeof variants[number];
+    /**
+     * When true, the toast is displayed with a strong visual style.
+     */
+    isStrong?: boolean;
     /**
      * When true, allows dismissing the toast by clicking on the close button.
      */
@@ -152,4 +182,6 @@ export declare interface ToastProps {
     leadingAction?: ActionProps;
 }
 
+export declare const variants: readonly ["neutral", "info", "warning", "success", "error"];
+
 export { }

package/dist/index.js

@@ -1,25 +1,30 @@
-import { LitElement as x, html as p, nothing as r, unsafeCSS as b } from "lit";
+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 y } from "lit/directives/class-map.js";
-import { RtlMixin as $, dispatchCustomEvent as g, defineCustomElement as A } from "@justeattakeaway/pie-webc-core";
+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 "@justeattakeaway/pie-icon-button";
 import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
-import "@justeattakeaway/pie-icons-webc/dist/IconPlaceholder.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 M = `*,*: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);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-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}.c-toast-messageArea.is-multiline{align-items:flex-start}.c-toast-messageArea.is-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}
-`, o = "pie-toast", d = "c-toast", _ = `${o}-close`, C = `${o}-open`, w = `${o}-leading-action-click`, m = {
+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 = {
   isOpen: !0,
+  variant: "neutral",
+  isStrong: !1,
   isDismissible: !0,
   isMultiline: !1
 };
-var B = Object.defineProperty, T = Object.getOwnPropertyDescriptor, l = (u, t, s, i) => {
-  for (var e = i > 1 ? void 0 : i ? T(t, s) : t, a = u.length - 1, c; a >= 0; a--)
-    (c = u[a]) && (e = (i ? c(t, s, e) : c(e)) || e);
-  return i && e && B(t, s, e), e;
+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;
 };
-class n extends $(x) {
+class r extends A(y) {
   constructor() {
-    super(...arguments), this.message = "", this.isOpen = m.isOpen, this.isDismissible = m.isDismissible, this.isMultiline = m.isMultiline, this._actionButtonOffset = 0, this._messageAreaMaxWidth = 0;
+    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;
   }
   /**
    * Calculates and returns the width of the message based on the toast properties.
@@ -31,9 +36,9 @@ class n extends $(x) {
    *
    * @returns {number} - The width of the message in pixels.
    */
-  getMessageMaxWidth(t, s, i, e) {
-    let f = 0;
-    return t && (f += 20 + 8), !s && i && (f += this._actionButtonOffset + 8), e && (f += 32 + 8), 392 - f;
+  getMessageMaxWidth(t, s, o, n) {
+    let u = 0;
+    return t && (u += 20 + 8), !s && o && (u += this._actionButtonOffset + 8), n && (u += 32 + 8), 392 - u;
   }
   /**
    * Lifecycle method executed when component is updated.
@@ -41,10 +46,10 @@ class n extends $(x) {
    * It calculates _messageAreaMaxWidth
    */
   async updated(t) {
-    var i;
-    t.has("isOpen") && this.isOpen && g(this, C, { targetNotification: this }), await this.updateComplete, this.actionButton && (this._actionButtonOffset = this.actionButton.offsetWidth);
-    const s = !0;
-    this._messageAreaMaxWidth = this.getMessageMaxWidth(s, this.isMultiline, !!((i = this.leadingAction) != null && i.text), this.isDismissible), (t.has("message") || t.has("isDismissible") || t.has("isMultiline") || t.has("leadingAction")) && this.requestUpdate();
+    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();
   }
   /**
    * It handle the action button action.
@@ -52,7 +57,7 @@ class n extends $(x) {
    * @private
    */
   handleActionClick() {
-    g(this, w, { targetNotification: this });
+    v(this, I, { targetNotification: this });
   }
   /**
    * Render the action button depending on action type and its action.
@@ -63,14 +68,14 @@ class n extends $(x) {
    * @private
    */
   renderActionButton(t) {
-    const { text: s, ariaLabel: i } = t;
-    return p`
+    const { text: s, ariaLabel: o } = t;
+    return c`
             <pie-button
-                variant="ghost-inverse"
+                variant="${this.shouldNotUseInverseBtnVariant() ? "ghost" : "ghost-inverse"}"
                 size="xsmall"
-                aria-label="${i || r}"
+                aria-label="${o || l}"
                 @click="${() => this.handleActionClick()}"
-                data-test-id="${o}-leading-action"
+                data-test-id="${i}-leading-action"
                 type="button">
                 ${s}
             </pie-button>
@@ -85,9 +90,9 @@ class n extends $(x) {
    */
   renderFooter() {
     const { leadingAction: t } = this;
-    return p`
-            <footer class="${d}-footer" data-test-id="${o}-footer" >
-                ${t ? this.renderActionButton(t) : r}
+    return c`
+            <footer class="${a}-footer" data-test-id="${i}-footer" >
+                ${t ? this.renderActionButton(t) : l}
             </footer>
         `;
   }
@@ -98,11 +103,11 @@ class n extends $(x) {
    * @private
    */
   renderCloseButton() {
-    return p`
+    return c`
             <pie-icon-button
-                variant="ghost-inverse"
+                variant="${this.shouldNotUseInverseBtnVariant() ? "ghost-secondary" : "ghost-inverse"}"
                 size="xsmall"
-                data-test-id="${o}-close"
+                data-test-id="${i}-close"
                 @click="${this.closeToastComponent}">
                 <icon-close></icon-close>
             </pie-icon-button>`;
@@ -117,8 +122,8 @@ class n extends $(x) {
    * @private
    */
   renderMessage(t, s) {
-    return p`
-            <span style="max-width: ${s}px" data-test-id="${o}-message">
+    return c`
+            <span style="--toast-message-max-width: ${s}px" data-test-id="${i}-message">
                 ${t}
             </span>
         `;
@@ -130,65 +135,116 @@ class n extends $(x) {
    * @private
    */
   closeToastComponent() {
-    this.isOpen = !1, g(this, _, { targetNotification: this });
+    this.isOpen = !1, v(this, N, { targetNotification: this });
+  }
+  /**
+   * Util method that returns an icon from a variant that has default icon.
+   *
+   * @private
+   */
+  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>`;
+      case "success":
+        return c`<icon-check-circle class="${a}-icon" size="s" data-test-id="${i}-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>`;
+      case "error":
+        return c`<icon-alert-circle class="${a}-icon" size="s" data-test-id="${i}-heading-icon-error"></icon-alert-circle>`;
+      default:
+        return l;
+    }
+  }
+  /**
+   * Util method that returns true if the variant has an icon.
+   *
+   * @param {typeof variants[number]} variant - The variant to check if has icon.
+   *
+   * @private
+   */
+  variantHasIcon(t) {
+    return ["info", "success", "warning", "error"].includes(t);
+  }
+  /**
+   * util method that returns true if the variant is warning and is strong.
+   *
+   * @private
+   */
+  shouldNotUseInverseBtnVariant() {
+    return this.variant === "warning" && this.isStrong;
   }
   render() {
     const {
       isOpen: t,
-      message: s,
-      isDismissible: i,
+      variant: s,
+      message: o,
+      isDismissible: n,
       leadingAction: e,
-      isMultiline: a,
-      _messageAreaMaxWidth: c
+      isMultiline: d,
+      isStrong: m,
+      _messageAreaMaxWidth: x
     } = this;
     if (!t)
-      return r;
-    const v = {
-      [`${d}-messageArea`]: !0,
-      "is-multiline": a
+      return l;
+    const u = {
+      [a]: !0,
+      [`${a}--${s}`]: !0,
+      [`${a}--strong`]: m
+    }, $ = {
+      [`${a}-messageArea`]: !0,
+      [`${a}--multiline`]: d
     };
-    return p`
-            <div data-test-id="${o}" class="${d}">
-                <div class="${d}-contentArea">
-                    <div class="${y(v)}">
-                        <icon-placeholder size="s"></icon-placeholder>
-                        ${s === "" ? r : this.renderMessage(s, c)} 
+    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>
-                    <div class="${d}-actionsArea">
-                        ${!a && (e != null && e.text) ? this.renderActionButton(e) : r}
-                        ${i ? this.renderCloseButton() : r}
+                    <div class="${a}-actionsArea">
+                        ${!d && (e != null && e.text) ? this.renderActionButton(e) : l}
+                        ${n ? this.renderCloseButton() : l}
                     </div>
                 </div>
-                ${a && (e != null && e.text) ? this.renderFooter() : r}
+                ${d && (e != null && e.text) ? this.renderFooter() : l}
             </div>`;
   }
 }
-n.styles = b(M);
-l([
+r.styles = w(C);
+p([
   h()
-], n.prototype, "message", 2);
-l([
+], r.prototype, "message", 2);
+p([
+  h({ type: Boolean })
+], r.prototype, "isOpen", 2);
+p([
+  h(),
+  M(i, _, g.variant)
+], r.prototype, "variant", 2);
+p([
   h({ type: Boolean })
-], n.prototype, "isOpen", 2);
-l([
+], r.prototype, "isStrong", 2);
+p([
   h({ type: Boolean })
-], n.prototype, "isDismissible", 2);
-l([
+], r.prototype, "isDismissible", 2);
+p([
   h({ type: Boolean })
-], n.prototype, "isMultiline", 2);
-l([
+], r.prototype, "isMultiline", 2);
+p([
   h({ type: Object })
-], n.prototype, "leadingAction", 2);
-l([
+], r.prototype, "leadingAction", 2);
+p([
   O("pie-button")
-], n.prototype, "actionButton", 2);
-A(o, n);
+], r.prototype, "actionButton", 2);
+B(i, r);
 export {
-  _ as ON_TOAST_CLOSE_EVENT,
-  w as ON_TOAST_LEADING_ACTION_CLICK_EVENT,
-  C as ON_TOAST_OPEN_EVENT,
-  n as PieToast,
-  d as componentClass,
-  o as componentSelector,
-  m as defaultProps
+  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,
+  g as defaultProps,
+  _ as variants
 };

package/dist/react.d.ts

@@ -1,4 +1,4 @@
-import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import type { LitElement } from 'lit';
@@ -23,7 +23,7 @@ export declare const componentClass = "c-toast";
 
 export declare const componentSelector = "pie-toast";
 
-export declare type DefaultProps = ComponentDefaultPropsGeneric<ToastProps, 'isOpen' | 'isDismissible' | 'isMultiline'>;
+export declare type DefaultProps = ComponentDefaultProps<ToastProps, keyof Omit<ToastProps, 'message' | 'leadingAction'>>;
 
 export declare const defaultProps: DefaultProps;
 
@@ -55,9 +55,11 @@ export declare const PieToast: React_2.ForwardRefExoticComponent<ToastProps & Re
  */
 declare class PieToast_2 extends PieToast_base implements ToastProps {
     message: ToastProps['message'];
-    isOpen: any;
-    isDismissible: any;
-    isMultiline: any;
+    isOpen: boolean;
+    variant: "neutral" | "info" | "warning" | "success" | "error";
+    isStrong: boolean;
+    isDismissible: boolean;
+    isMultiline: boolean;
     leadingAction: ToastProps['leadingAction'];
     actionButton?: HTMLElement;
     private _actionButtonOffset;
@@ -127,6 +129,26 @@ declare class PieToast_2 extends PieToast_base implements ToastProps {
      * @private
      */
     private closeToastComponent;
+    /**
+     * Util method that returns an icon from a variant that has default icon.
+     *
+     * @private
+     */
+    private getVariantIcon;
+    /**
+     * Util method that returns true if the variant has an icon.
+     *
+     * @param {typeof variants[number]} variant - The variant to check if has icon.
+     *
+     * @private
+     */
+    private variantHasIcon;
+    /**
+     * util method that returns true if the variant is warning and is strong.
+     *
+     * @private
+     */
+    private shouldNotUseInverseBtnVariant;
     render(): TemplateResult<1> | typeof nothing;
 }
 
@@ -139,6 +161,14 @@ export declare interface ToastProps {
      * When true, the toast is set to be open and visible.
      */
     isOpen?: boolean;
+    /**
+     * Sets the variant of the toast.
+     */
+    variant?: typeof variants[number];
+    /**
+     * When true, the toast is displayed with a strong visual style.
+     */
+    isStrong?: boolean;
     /**
      * When true, allows dismissing the toast by clicking on the close button.
      */
@@ -157,4 +187,6 @@ export declare interface ToastProps {
     leadingAction?: ActionProps;
 }
 
+export declare const variants: readonly ["neutral", "info", "warning", "success", "error"];
+
 export { }

package/dist/react.js

@@ -1,28 +1,32 @@
 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 P, ON_TOAST_LEADING_ACTION_CLICK_EVENT as l, ON_TOAST_OPEN_EVENT as f, componentClass as A, componentSelector as S, defaultProps as I } 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/IconPlaceholder.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 m = o({
+const r = o({
   displayName: "PieToast",
   elementClass: e,
   react: t,
   tagName: "pie-toast",
   events: {}
-}), E = m;
+}), P = r;
 export {
-  P as ON_TOAST_CLOSE_EVENT,
-  l as ON_TOAST_LEADING_ACTION_CLICK_EVENT,
-  f as ON_TOAST_OPEN_EVENT,
-  E as PieToast,
-  A as componentClass,
-  S as componentSelector,
-  I as defaultProps
+  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
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-toast",
   "description": "PIE Design System Toast built using Web Components",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -40,6 +40,9 @@
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
+    "@justeattakeaway/pie-button": "0.48.0",
+    "@justeattakeaway/pie-icon-button": "0.28.9",
+    "@justeattakeaway/pie-icons-webc": "0.24.2",
     "@justeattakeaway/pie-webc-core": "0.24.0"
   },
   "volta": {

package/src/defs.ts

@@ -1,7 +1,7 @@
-import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
+
+export const variants = ['neutral', 'info', 'warning', 'success', 'error'] as const;
 
-// TODO - please remove the eslint disable comment below when you add props to this interface
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
 export type ActionProps = {
   /**
    * The text to display inside the button.
@@ -19,6 +19,15 @@ export interface ToastProps {
    * When true, the toast is set to be open and visible.
    */
   isOpen?: boolean;
+  /**
+   * Sets the variant of the toast.
+   */
+  variant?: typeof variants[number];
+
+  /**
+   * When true, the toast is displayed with a strong visual style.
+   */
+  isStrong?: boolean;
   /**
    * When true, allows dismissing the toast by clicking on the close button.
    */
@@ -61,10 +70,12 @@ export const ON_TOAST_OPEN_EVENT = `${componentSelector}-open`;
  */
 export const ON_TOAST_LEADING_ACTION_CLICK_EVENT = `${componentSelector}-leading-action-click`;
 
-export type DefaultProps = ComponentDefaultPropsGeneric<ToastProps, 'isOpen' | 'isDismissible' | 'isMultiline'>;
+export type DefaultProps = ComponentDefaultProps<ToastProps, keyof Omit<ToastProps, 'message' | 'leadingAction'>>;
 
 export const defaultProps: DefaultProps = {
     isOpen: true,
+    variant: 'neutral',
+    isStrong: false,
     isDismissible: true,
     isMultiline: false,
 };

package/src/index.ts

@@ -8,10 +8,18 @@ import {
 } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { RtlMixin, defineCustomElement, dispatchCustomEvent } from '@justeattakeaway/pie-webc-core';
+import {
+    RtlMixin,
+    defineCustomElement,
+    dispatchCustomEvent,
+    validPropertyValues,
+} from '@justeattakeaway/pie-webc-core';
 import '@justeattakeaway/pie-icon-button';
 import '@justeattakeaway/pie-icons-webc/dist/IconClose.js';
-import '@justeattakeaway/pie-icons-webc/dist/IconPlaceholder.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';
 
 import styles from './toast.scss?inline';
@@ -24,6 +32,7 @@ import {
     ON_TOAST_OPEN_EVENT,
     ON_TOAST_LEADING_ACTION_CLICK_EVENT,
     defaultProps,
+    variants,
 } from './defs';
 
 // Valid values available to consumers
@@ -39,6 +48,13 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps {
     @property({ type: Boolean })
     public isOpen = defaultProps.isOpen;
 
+    @property()
+    @validPropertyValues(componentSelector, variants, defaultProps.variant)
+    public variant = defaultProps.variant;
+
+    @property({ type: Boolean })
+    public isStrong = defaultProps.isStrong;
+
     @property({ type: Boolean })
     public isDismissible = defaultProps.isDismissible;
 
@@ -111,12 +127,13 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps {
             this._actionButtonOffset = this.actionButton.offsetWidth;
         }
 
-        // Temporary const. This will be removed when we implement variants.
-        const hasIcon = true;
+        const hasIcon = this.variantHasIcon(this.variant);
 
         this._messageAreaMaxWidth = this.getMessageMaxWidth(hasIcon, this.isMultiline, !!this.leadingAction?.text, this.isDismissible);
 
         if (
+            _changedProperties.has('variant') ||
+            _changedProperties.has('isStrong') ||
             _changedProperties.has('message') ||
             _changedProperties.has('isDismissible') ||
             _changedProperties.has('isMultiline') ||
@@ -147,7 +164,7 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps {
 
         return html`
             <pie-button
-                variant="ghost-inverse"
+                variant="${this.shouldNotUseInverseBtnVariant() ? 'ghost' : 'ghost-inverse'}"
                 size="xsmall"
                 aria-label="${ariaLabel || nothing}"
                 @click="${() => this.handleActionClick()}"
@@ -183,7 +200,7 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps {
     private renderCloseButton (): TemplateResult {
         return html`
             <pie-icon-button
-                variant="ghost-inverse"
+                variant="${this.shouldNotUseInverseBtnVariant() ? 'ghost-secondary' : 'ghost-inverse'}"
                 size="xsmall"
                 data-test-id="${componentSelector}-close"
                 @click="${this.closeToastComponent}">
@@ -202,7 +219,7 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps {
      */
     private renderMessage (message: string, messageAreaMaxWidth: number): TemplateResult {
         return html`
-            <span style="max-width: ${messageAreaMaxWidth}px" data-test-id="${componentSelector}-message">
+            <span style="--toast-message-max-width: ${messageAreaMaxWidth}px" data-test-id="${componentSelector}-message">
                 ${message}
             </span>
         `;
@@ -219,13 +236,55 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps {
         dispatchCustomEvent(this, ON_TOAST_CLOSE_EVENT, { targetNotification: this });
     }
 
+    /**
+     * Util method that returns an icon from a variant that has default icon.
+     *
+     * @private
+     */
+    private getVariantIcon () {
+        switch (this.variant) {
+            case 'info':
+                return html`<icon-info-circle class="${componentClass}-icon" size="s" data-test-id="${componentSelector}-heading-icon-info"></icon-info-circle>`;
+            case 'success':
+                return html`<icon-check-circle class="${componentClass}-icon" size="s" data-test-id="${componentSelector}-heading-icon-success"></icon-check-circle>`;
+            case 'warning':
+                return html`<icon-alert-triangle class="${componentClass}-icon" size="s" data-test-id="${componentSelector}-heading-icon-warning"></icon-alert-triangle>`;
+            case 'error':
+                return html`<icon-alert-circle class="${componentClass}-icon" size="s" data-test-id="${componentSelector}-heading-icon-error"></icon-alert-circle>`;
+            default:
+                return nothing as never;
+        }
+    }
+
+    /**
+     * Util method that returns true if the variant has an icon.
+     *
+     * @param {typeof variants[number]} variant - The variant to check if has icon.
+     *
+     * @private
+     */
+    private variantHasIcon (variant: typeof variants[number]) {
+        return ['info', 'success', 'warning', 'error'].includes(variant);
+    }
+
+    /**
+     * util method that returns true if the variant is warning and is strong.
+     *
+     * @private
+     */
+    private shouldNotUseInverseBtnVariant () {
+        return this.variant === 'warning' && this.isStrong;
+    }
+
     render () {
         const {
             isOpen,
+            variant,
             message,
             isDismissible,
             leadingAction,
             isMultiline,
+            isStrong,
             _messageAreaMaxWidth,
         } = this;
 
@@ -233,16 +292,22 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps {
             return nothing;
         }
 
+        const componentWrapperClasses = {
+            [componentClass]: true,
+            [`${componentClass}--${variant}`]: true,
+            [`${componentClass}--strong`]: isStrong,
+        };
+
         const messageAreaClasses = {
             [`${componentClass}-messageArea`]: true,
-            'is-multiline': isMultiline,
+            [`${componentClass}--multiline`]: isMultiline,
         };
 
         return html`
-            <div data-test-id="${componentSelector}" class="${componentClass}">
+            <div data-test-id="${componentSelector}" class="${classMap(componentWrapperClasses)}">
                 <div class="${componentClass}-contentArea">
                     <div class="${classMap(messageAreaClasses)}">
-                        <icon-placeholder size="s"></icon-placeholder>
+                        ${this.variantHasIcon(variant) ? this.getVariantIcon() : nothing}
                         ${message === '' ? nothing : this.renderMessage(message, _messageAreaMaxWidth)} 
                     </div>
                     <div class="${componentClass}-actionsArea">

package/src/toast.scss

@@ -6,6 +6,8 @@
   --toast-font-color: var(--dt-color-content-inverse);
   --toast-font-size: #{p.font-size(--dt-font-body-s-size)};
   --toast-line-height: #{p.line-height(--dt-font-body-s-line-height)};
+  --toast-icon-fill: var(--dt-color-content-default);
+  --toast-message-max-width: 100%;
 
   display: flex;
   flex-direction: column;
@@ -25,6 +27,43 @@
   line-height: var(--toast-line-height);
 }
 
+.c-toast--info {
+  --toast-icon-fill: var(--dt-color-support-info-inverse);
+  
+  &.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--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--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--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);
@@ -41,11 +80,12 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
+    max-width: var(--toast-message-max-width);
   }
 
-  &.is-multiline {
+  &.c-toast--multiline {
     align-items: flex-start;
-
+    
     span {
       max-height: 60px;
       white-space: inherit;
@@ -69,3 +109,8 @@
   display: flex;
   justify-content: flex-end;
 }
+
+.c-toast-icon {
+  color: var(--toast-icon-fill);
+}
+