@justeattakeaway/pie-toast 0.1.0 → 0.2.0

package/custom-elements.json

@@ -11,8 +11,100 @@
     {
       "kind": "javascript-module",
       "path": "src/defs.js",
-      "declarations": [],
-      "exports": []
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "componentSelector",
+          "type": {
+            "text": "string"
+          },
+          "default": "'pie-toast'"
+        },
+        {
+          "kind": "variable",
+          "name": "componentClass",
+          "type": {
+            "text": "string"
+          },
+          "default": "'c-toast'"
+        },
+        {
+          "kind": "variable",
+          "name": "ON_TOAST_CLOSE_EVENT",
+          "default": "`${componentSelector}-close`",
+          "description": "Event name for when the toast is closed."
+        },
+        {
+          "kind": "variable",
+          "name": "ON_TOAST_OPEN_EVENT",
+          "default": "`${componentSelector}-open`",
+          "description": "Event name for when the toast is opened."
+        },
+        {
+          "kind": "variable",
+          "name": "ON_TOAST_LEADING_ACTION_CLICK_EVENT",
+          "default": "`${componentSelector}-leading-action-click`",
+          "description": "Event name for when the toast leading action is clicked."
+        },
+        {
+          "kind": "variable",
+          "name": "defaultProps",
+          "type": {
+            "text": "DefaultProps"
+          },
+          "default": "{\n    isOpen: true,\n    isDismissible: true,\n    isMultiline: false,\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "componentSelector",
+          "declaration": {
+            "name": "componentSelector",
+            "module": "src/defs.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "componentClass",
+          "declaration": {
+            "name": "componentClass",
+            "module": "src/defs.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ON_TOAST_CLOSE_EVENT",
+          "declaration": {
+            "name": "ON_TOAST_CLOSE_EVENT",
+            "module": "src/defs.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ON_TOAST_OPEN_EVENT",
+          "declaration": {
+            "name": "ON_TOAST_OPEN_EVENT",
+            "module": "src/defs.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ON_TOAST_LEADING_ACTION_CLICK_EVENT",
+          "declaration": {
+            "name": "ON_TOAST_LEADING_ACTION_CLICK_EVENT",
+            "module": "src/defs.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "defaultProps",
+          "declaration": {
+            "name": "defaultProps",
+            "module": "src/defs.js"
+          }
+        }
+      ]
     },
     {
       "kind": "javascript-module",
@@ -22,7 +114,216 @@
           "kind": "class",
           "description": "",
           "name": "PieToast",
-          "members": [],
+          "members": [
+            {
+              "kind": "field",
+              "name": "message",
+              "type": {
+                "text": "ToastProps['message']"
+              },
+              "privacy": "public",
+              "default": "''",
+              "attribute": "message"
+            },
+            {
+              "kind": "field",
+              "name": "isOpen",
+              "privacy": "public",
+              "attribute": "isOpen"
+            },
+            {
+              "kind": "field",
+              "name": "isDismissible",
+              "privacy": "public",
+              "attribute": "isDismissible"
+            },
+            {
+              "kind": "field",
+              "name": "isMultiline",
+              "privacy": "public",
+              "attribute": "isMultiline"
+            },
+            {
+              "kind": "field",
+              "name": "leadingAction",
+              "type": {
+                "text": "ToastProps['leadingAction']"
+              },
+              "privacy": "public",
+              "attribute": "leadingAction"
+            },
+            {
+              "kind": "field",
+              "name": "actionButton",
+              "type": {
+                "text": "HTMLElement | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_actionButtonOffset",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "_messageAreaMaxWidth",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "method",
+              "name": "getMessageMaxWidth",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "hasIcon",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "Indicates if the toast has an icon."
+                },
+                {
+                  "name": "isMultiline",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "Indicates if the message is multiline."
+                },
+                {
+                  "name": "hasActionButton",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "Indicates if the toast has an action button."
+                },
+                {
+                  "name": "hasCloseIcon",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "Indicates if the toast has a close icon."
+                }
+              ],
+              "description": "Calculates and returns the width of the message based on the toast properties."
+            },
+            {
+              "kind": "method",
+              "name": "handleActionClick",
+              "privacy": "private",
+              "description": "It handle the action button action."
+            },
+            {
+              "kind": "method",
+              "name": "renderActionButton",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "action",
+                  "type": {
+                    "text": "ActionProps"
+                  },
+                  "description": "The action properties."
+                }
+              ],
+              "description": "Render the action button depending on action type and its action."
+            },
+            {
+              "kind": "method",
+              "name": "renderFooter",
+              "privacy": "private",
+              "description": "Template for the footer area.\nIt should display only when isMultiline is true as well if has action button.\nCalled within the main render function."
+            },
+            {
+              "kind": "method",
+              "name": "renderCloseButton",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              },
+              "description": "Template for the close button element. Called within the\nmain render function."
+            },
+            {
+              "kind": "method",
+              "name": "renderMessage",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The message to be displayed."
+                },
+                {
+                  "name": "messageAreaMaxWidth",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The maximum width of the message area calculated in the lifecycle method."
+                }
+              ],
+              "description": "Template for the toast message. Called within the\nmain render function."
+            },
+            {
+              "kind": "method",
+              "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."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "message",
+              "type": {
+                "text": "ToastProps['message']"
+              },
+              "default": "''",
+              "fieldName": "message"
+            },
+            {
+              "name": "isOpen",
+              "fieldName": "isOpen"
+            },
+            {
+              "name": "isDismissible",
+              "fieldName": "isDismissible"
+            },
+            {
+              "name": "isMultiline",
+              "fieldName": "isMultiline"
+            },
+            {
+              "name": "leadingAction",
+              "type": {
+                "text": "ToastProps['leadingAction']"
+              },
+              "fieldName": "leadingAction"
+            }
+          ],
           "mixins": [
             {
               "name": "RtlMixin",

package/dist/index.d.ts

@@ -1,20 +1,155 @@
+import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import type { LitElement } from 'lit';
+import type { nothing } from 'lit';
+import type { PropertyValues } from 'lit';
 import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
-import type { TemplateResult } from 'lit-html';
+import type { TemplateResult } from 'lit';
+
+export declare type ActionProps = {
+    /**
+     * The text to display inside the button.
+     */
+    text: string;
+    /**
+     * The ARIA label for the button.
+     */
+    ariaLabel?: string;
+};
+
+export declare const componentClass = "c-toast";
+
+export declare const componentSelector = "pie-toast";
+
+export declare type DefaultProps = ComponentDefaultPropsGeneric<ToastProps, 'isOpen' | 'isDismissible' | 'isMultiline'>;
+
+export declare const defaultProps: DefaultProps;
+
+/**
+ * Event name for when the toast is closed.
+ *
+ * @constant
+ */
+export declare const ON_TOAST_CLOSE_EVENT: string;
+
+/**
+ * Event name for when the toast leading action is clicked.
+ *
+ * @constant
+ */
+export declare const ON_TOAST_LEADING_ACTION_CLICK_EVENT: string;
+
+/**
+ * Event name for when the toast is opened.
+ *
+ * @constant
+ */
+export declare const ON_TOAST_OPEN_EVENT: string;
 
 /**
  * @tagname pie-toast
  */
 export declare class PieToast extends PieToast_base implements ToastProps {
-    render(): TemplateResult<1>;
+    message: ToastProps['message'];
+    isOpen: any;
+    isDismissible: any;
+    isMultiline: any;
+    leadingAction: ToastProps['leadingAction'];
+    actionButton?: HTMLElement;
+    private _actionButtonOffset;
+    private _messageAreaMaxWidth;
     static styles: CSSResult;
+    /**
+     * Calculates and returns the width of the message based on the toast properties.
+     *
+     * @param {boolean} hasIcon - Indicates if the toast has an icon.
+     * @param {boolean} isMultiline - Indicates if the message is multiline.
+     * @param {boolean} hasActionButton - Indicates if the toast has an action button.
+     * @param {boolean} hasCloseIcon - Indicates if the toast has a close icon.
+     *
+     * @returns {number} - The width of the message in pixels.
+     */
+    private getMessageMaxWidth;
+    /**
+     * Lifecycle method executed when component is updated.
+     * It dispatches an event if toast is opened.
+     * It calculates _messageAreaMaxWidth
+     */
+    protected updated(_changedProperties: PropertyValues<this>): Promise<void>;
+    /**
+     * It handle the action button action.
+     *
+     * @private
+     */
+    private handleActionClick;
+    /**
+     * Render the action button depending on action type and its action.
+     *
+     * @param {ActionProps} action - The action properties.
+     *
+     * @returns {TemplateResult | typeof nothing} - The rendered action button or nothing if the action text is not defined.
+     * @private
+     */
+    private renderActionButton;
+    /**
+     * Template for the footer area.
+     * It should display only when isMultiline is true as well if has action button.
+     * Called within the main render function.
+     *
+     * @private
+     */
+    private renderFooter;
+    /**
+     * Template for the close button element. Called within the
+     * main render function.
+     *
+     * @private
+     */
+    private renderCloseButton;
+    /**
+     * Template for the toast message. Called within the
+     * main render function.
+     *
+     * @param {string} message - The message to be displayed.
+     * @param {number} messageAreaMaxWidth - The maximum width of the message area calculated in the lifecycle method.
+     *
+     * @private
+     */
+    private renderMessage;
+    /**
+     * Util method responsible to close the component.
+     * It handles the action when user clicks in the close button and triggers an event when is executed.
+     *
+     * @private
+     */
+    private closeToastComponent;
+    render(): TemplateResult<1> | typeof nothing;
 }
 
 declare const PieToast_base: GenericConstructor<RTLInterface> & typeof LitElement;
 
 export declare interface ToastProps {
+    /**
+     * When true, the toast is set to be open and visible.
+     */
+    isOpen?: boolean;
+    /**
+     * When true, allows dismissing the toast by clicking on the close button.
+     */
+    isDismissible?: boolean;
+    /**
+     * The message content of the toast.
+     */
+    message: string;
+    /**
+     * It allows the message content being displayed as multiline limited to three rows.
+     */
+    isMultiline?: boolean;
+    /**
+     * The leading action for the toast.
+     */
+    leadingAction?: ActionProps;
 }
 
 export { }

package/dist/index.js

@@ -1,14 +1,194 @@
-import { LitElement as t, html as o, unsafeCSS as s } from "lit";
-import { RtlMixin as n, defineCustomElement as i } from "@justeattakeaway/pie-webc-core";
-const r = `*,*:after,*:before{box-sizing:inherit}
-`, l = "pie-toast";
-class e extends n(t) {
+import { LitElement as x, html as p, nothing as r, unsafeCSS as b } 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 "@justeattakeaway/pie-icon-button";
+import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
+import "@justeattakeaway/pie-icons-webc/dist/IconPlaceholder.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 = {
+  isOpen: !0,
+  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;
+};
+class n extends $(x) {
+  constructor() {
+    super(...arguments), this.message = "", this.isOpen = m.isOpen, this.isDismissible = m.isDismissible, this.isMultiline = m.isMultiline, this._actionButtonOffset = 0, this._messageAreaMaxWidth = 0;
+  }
+  /**
+   * Calculates and returns the width of the message based on the toast properties.
+   *
+   * @param {boolean} hasIcon - Indicates if the toast has an icon.
+   * @param {boolean} isMultiline - Indicates if the message is multiline.
+   * @param {boolean} hasActionButton - Indicates if the toast has an action button.
+   * @param {boolean} hasCloseIcon - Indicates if the toast has a close icon.
+   *
+   * @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;
+  }
+  /**
+   * Lifecycle method executed when component is updated.
+   * It dispatches an event if toast is opened.
+   * 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();
+  }
+  /**
+   * It handle the action button action.
+   *
+   * @private
+   */
+  handleActionClick() {
+    g(this, w, { targetNotification: this });
+  }
+  /**
+   * Render the action button depending on action type and its action.
+   *
+   * @param {ActionProps} action - The action properties.
+   *
+   * @returns {TemplateResult | typeof nothing} - The rendered action button or nothing if the action text is not defined.
+   * @private
+   */
+  renderActionButton(t) {
+    const { text: s, ariaLabel: i } = t;
+    return p`
+            <pie-button
+                variant="ghost-inverse"
+                size="xsmall"
+                aria-label="${i || r}"
+                @click="${() => this.handleActionClick()}"
+                data-test-id="${o}-leading-action"
+                type="button">
+                ${s}
+            </pie-button>
+        `;
+  }
+  /**
+   * Template for the footer area.
+   * It should display only when isMultiline is true as well if has action button.
+   * Called within the main render function.
+   *
+   * @private
+   */
+  renderFooter() {
+    const { leadingAction: t } = this;
+    return p`
+            <footer class="${d}-footer" data-test-id="${o}-footer" >
+                ${t ? this.renderActionButton(t) : r}
+            </footer>
+        `;
+  }
+  /**
+   * Template for the close button element. Called within the
+   * main render function.
+   *
+   * @private
+   */
+  renderCloseButton() {
+    return p`
+            <pie-icon-button
+                variant="ghost-inverse"
+                size="xsmall"
+                data-test-id="${o}-close"
+                @click="${this.closeToastComponent}">
+                <icon-close></icon-close>
+            </pie-icon-button>`;
+  }
+  /**
+   * Template for the toast message. Called within the
+   * main render function.
+   *
+   * @param {string} message - The message to be displayed.
+   * @param {number} messageAreaMaxWidth - The maximum width of the message area calculated in the lifecycle method.
+   *
+   * @private
+   */
+  renderMessage(t, s) {
+    return p`
+            <span style="max-width: ${s}px" data-test-id="${o}-message">
+                ${t}
+            </span>
+        `;
+  }
+  /**
+   * Util method responsible to close the component.
+   * It handles the action when user clicks in the close button and triggers an event when is executed.
+   *
+   * @private
+   */
+  closeToastComponent() {
+    this.isOpen = !1, g(this, _, { targetNotification: this });
+  }
   render() {
-    return o`<h1 data-test-id="pie-toast">Hello world!</h1>`;
+    const {
+      isOpen: t,
+      message: s,
+      isDismissible: i,
+      leadingAction: e,
+      isMultiline: a,
+      _messageAreaMaxWidth: c
+    } = this;
+    if (!t)
+      return r;
+    const v = {
+      [`${d}-messageArea`]: !0,
+      "is-multiline": a
+    };
+    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)} 
+                    </div>
+                    <div class="${d}-actionsArea">
+                        ${!a && (e != null && e.text) ? this.renderActionButton(e) : r}
+                        ${i ? this.renderCloseButton() : r}
+                    </div>
+                </div>
+                ${a && (e != null && e.text) ? this.renderFooter() : r}
+            </div>`;
   }
 }
-e.styles = s(r);
-i(l, e);
+n.styles = b(M);
+l([
+  h()
+], n.prototype, "message", 2);
+l([
+  h({ type: Boolean })
+], n.prototype, "isOpen", 2);
+l([
+  h({ type: Boolean })
+], n.prototype, "isDismissible", 2);
+l([
+  h({ type: Boolean })
+], n.prototype, "isMultiline", 2);
+l([
+  h({ type: Object })
+], n.prototype, "leadingAction", 2);
+l([
+  O("pie-button")
+], n.prototype, "actionButton", 2);
+A(o, n);
 export {
-  e as PieToast
+  _ 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
 };

package/dist/react.d.ts

@@ -1,9 +1,52 @@
+import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import type { LitElement } from 'lit';
+import type { nothing } from 'lit';
+import type { PropertyValues } from 'lit';
 import * as React_2 from 'react';
 import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
-import type { TemplateResult } from 'lit-html';
+import type { TemplateResult } from 'lit';
+
+export declare type ActionProps = {
+    /**
+     * The text to display inside the button.
+     */
+    text: string;
+    /**
+     * The ARIA label for the button.
+     */
+    ariaLabel?: string;
+};
+
+export declare const componentClass = "c-toast";
+
+export declare const componentSelector = "pie-toast";
+
+export declare type DefaultProps = ComponentDefaultPropsGeneric<ToastProps, 'isOpen' | 'isDismissible' | 'isMultiline'>;
+
+export declare const defaultProps: DefaultProps;
+
+/**
+ * Event name for when the toast is closed.
+ *
+ * @constant
+ */
+export declare const ON_TOAST_CLOSE_EVENT: string;
+
+/**
+ * Event name for when the toast leading action is clicked.
+ *
+ * @constant
+ */
+export declare const ON_TOAST_LEADING_ACTION_CLICK_EVENT: string;
+
+/**
+ * Event name for when the toast is opened.
+ *
+ * @constant
+ */
+export declare const ON_TOAST_OPEN_EVENT: string;
 
 export declare const PieToast: React_2.ForwardRefExoticComponent<ToastProps & React_2.RefAttributes<PieToast_2> & ReactBaseType>;
 
@@ -11,8 +54,80 @@ export declare const PieToast: React_2.ForwardRefExoticComponent<ToastProps & Re
  * @tagname pie-toast
  */
 declare class PieToast_2 extends PieToast_base implements ToastProps {
-    render(): TemplateResult<1>;
+    message: ToastProps['message'];
+    isOpen: any;
+    isDismissible: any;
+    isMultiline: any;
+    leadingAction: ToastProps['leadingAction'];
+    actionButton?: HTMLElement;
+    private _actionButtonOffset;
+    private _messageAreaMaxWidth;
     static styles: CSSResult;
+    /**
+     * Calculates and returns the width of the message based on the toast properties.
+     *
+     * @param {boolean} hasIcon - Indicates if the toast has an icon.
+     * @param {boolean} isMultiline - Indicates if the message is multiline.
+     * @param {boolean} hasActionButton - Indicates if the toast has an action button.
+     * @param {boolean} hasCloseIcon - Indicates if the toast has a close icon.
+     *
+     * @returns {number} - The width of the message in pixels.
+     */
+    private getMessageMaxWidth;
+    /**
+     * Lifecycle method executed when component is updated.
+     * It dispatches an event if toast is opened.
+     * It calculates _messageAreaMaxWidth
+     */
+    protected updated(_changedProperties: PropertyValues<this>): Promise<void>;
+    /**
+     * It handle the action button action.
+     *
+     * @private
+     */
+    private handleActionClick;
+    /**
+     * Render the action button depending on action type and its action.
+     *
+     * @param {ActionProps} action - The action properties.
+     *
+     * @returns {TemplateResult | typeof nothing} - The rendered action button or nothing if the action text is not defined.
+     * @private
+     */
+    private renderActionButton;
+    /**
+     * Template for the footer area.
+     * It should display only when isMultiline is true as well if has action button.
+     * Called within the main render function.
+     *
+     * @private
+     */
+    private renderFooter;
+    /**
+     * Template for the close button element. Called within the
+     * main render function.
+     *
+     * @private
+     */
+    private renderCloseButton;
+    /**
+     * Template for the toast message. Called within the
+     * main render function.
+     *
+     * @param {string} message - The message to be displayed.
+     * @param {number} messageAreaMaxWidth - The maximum width of the message area calculated in the lifecycle method.
+     *
+     * @private
+     */
+    private renderMessage;
+    /**
+     * Util method responsible to close the component.
+     * It handles the action when user clicks in the close button and triggers an event when is executed.
+     *
+     * @private
+     */
+    private closeToastComponent;
+    render(): TemplateResult<1> | typeof nothing;
 }
 
 declare const PieToast_base: GenericConstructor<RTLInterface> & typeof LitElement;
@@ -20,6 +135,26 @@ declare const PieToast_base: GenericConstructor<RTLInterface> & typeof LitElemen
 declare type ReactBaseType = React_2.HTMLAttributes<HTMLElement>;
 
 export declare interface ToastProps {
+    /**
+     * When true, the toast is set to be open and visible.
+     */
+    isOpen?: boolean;
+    /**
+     * When true, allows dismissing the toast by clicking on the close button.
+     */
+    isDismissible?: boolean;
+    /**
+     * The message content of the toast.
+     */
+    message: string;
+    /**
+     * It allows the message content being displayed as multiline limited to three rows.
+     */
+    isMultiline?: boolean;
+    /**
+     * The leading action for the toast.
+     */
+    leadingAction?: ActionProps;
 }
 
 export { }

package/dist/react.js

@@ -1,15 +1,28 @@
 import * as t from "react";
-import { createComponent as e } from "@lit/react";
-import { PieToast as o } from "./index.js";
+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 "lit";
+import "lit/decorators.js";
+import "lit/directives/class-map.js";
 import "@justeattakeaway/pie-webc-core";
-const a = e({
+import "@justeattakeaway/pie-icon-button";
+import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
+import "@justeattakeaway/pie-icons-webc/dist/IconPlaceholder.js";
+import "@justeattakeaway/pie-button";
+const m = o({
   displayName: "PieToast",
-  elementClass: o,
+  elementClass: e,
   react: t,
   tagName: "pie-toast",
   events: {}
-}), p = a;
+}), E = m;
 export {
-  p as PieToast
+  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
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-toast",
   "description": "PIE Design System Toast built using Web Components",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -40,7 +40,7 @@
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.23.0"
+    "@justeattakeaway/pie-webc-core": "0.24.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/defs.ts

@@ -1,3 +1,70 @@
+import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+
 // 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 interface ToastProps {}
+export type ActionProps = {
+  /**
+   * The text to display inside the button.
+   */
+  text: string;
+
+  /**
+   * The ARIA label for the button.
+   */
+  ariaLabel?: string;
+};
+
+export interface ToastProps {
+  /**
+   * When true, the toast is set to be open and visible.
+   */
+  isOpen?: boolean;
+  /**
+   * When true, allows dismissing the toast by clicking on the close button.
+   */
+  isDismissible?: boolean;
+  /**
+   * The message content of the toast.
+   */
+  message: string;
+  /**
+   * It allows the message content being displayed as multiline limited to three rows.
+   */
+  isMultiline?: boolean;
+  /**
+   * The leading action for the toast.
+   */
+  leadingAction?: ActionProps;
+}
+
+export const componentSelector = 'pie-toast';
+export const componentClass = 'c-toast';
+
+/**
+ * Event name for when the toast is closed.
+ *
+ * @constant
+ */
+export const ON_TOAST_CLOSE_EVENT = `${componentSelector}-close`;
+
+/**
+ * Event name for when the toast is opened.
+ *
+ * @constant
+ */
+export const ON_TOAST_OPEN_EVENT = `${componentSelector}-open`;
+
+/**
+ * Event name for when the toast leading action is clicked.
+ *
+ * @constant
+ */
+export const ON_TOAST_LEADING_ACTION_CLICK_EVENT = `${componentSelector}-leading-action-click`;
+
+export type DefaultProps = ComponentDefaultPropsGeneric<ToastProps, 'isOpen' | 'isDismissible' | 'isMultiline'>;
+
+export const defaultProps: DefaultProps = {
+    isOpen: true,
+    isDismissible: true,
+    isMultiline: false,
+};

package/src/index.ts

@@ -1,24 +1,258 @@
-import { LitElement, html, unsafeCSS } from 'lit';
-import { RtlMixin, defineCustomElement } from '@justeattakeaway/pie-webc-core';
+import {
+    LitElement,
+    html,
+    unsafeCSS,
+    nothing,
+    type TemplateResult,
+    type PropertyValues,
+} 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 '@justeattakeaway/pie-icon-button';
+import '@justeattakeaway/pie-icons-webc/dist/IconClose.js';
+import '@justeattakeaway/pie-icons-webc/dist/IconPlaceholder.js';
+import '@justeattakeaway/pie-button';
 
 import styles from './toast.scss?inline';
-import { ToastProps } from './defs';
+import {
+    ToastProps,
+    componentSelector,
+    componentClass,
+    ActionProps,
+    ON_TOAST_CLOSE_EVENT,
+    ON_TOAST_OPEN_EVENT,
+    ON_TOAST_LEADING_ACTION_CLICK_EVENT,
+    defaultProps,
+} from './defs';
 
 // Valid values available to consumers
 export * from './defs';
 
-const componentSelector = 'pie-toast';
-
 /**
  * @tagname pie-toast
  */
 export class PieToast extends RtlMixin(LitElement) implements ToastProps {
-    render () {
-        return html`<h1 data-test-id="pie-toast">Hello world!</h1>`;
-    }
+    @property()
+    public message: ToastProps['message'] = '';
+
+    @property({ type: Boolean })
+    public isOpen = defaultProps.isOpen;
+
+    @property({ type: Boolean })
+    public isDismissible = defaultProps.isDismissible;
+
+    @property({ type: Boolean })
+    public isMultiline = defaultProps.isMultiline;
+
+    @property({ type: Object })
+    public leadingAction: ToastProps['leadingAction'];
+
+    @query('pie-button') actionButton?: HTMLElement;
+
+    private _actionButtonOffset = 0;
+
+    private _messageAreaMaxWidth = 0;
 
     // Renders a `CSSResult` generated from SCSS by Vite
     static styles = unsafeCSS(styles);
+
+    /**
+     * Calculates and returns the width of the message based on the toast properties.
+     *
+     * @param {boolean} hasIcon - Indicates if the toast has an icon.
+     * @param {boolean} isMultiline - Indicates if the message is multiline.
+     * @param {boolean} hasActionButton - Indicates if the toast has an action button.
+     * @param {boolean} hasCloseIcon - Indicates if the toast has a close icon.
+     *
+     * @returns {number} - The width of the message in pixels.
+     */
+    private getMessageMaxWidth (
+        hasIcon: boolean,
+        isMultiline: boolean,
+        hasActionButton: boolean,
+        hasCloseIcon: boolean,
+    ): number {
+        const iconOffset = 20;
+        const closeIconOffset = 32;
+        const gap = 8;
+        const toastMaxWidthWithoutPadding = 392;
+
+        let offset = 0;
+
+        if (hasIcon) {
+            offset += iconOffset + gap;
+        }
+
+        if (!isMultiline && hasActionButton) {
+            offset += this._actionButtonOffset + gap;
+        }
+
+        if (hasCloseIcon) {
+            offset += closeIconOffset + gap;
+        }
+
+        return toastMaxWidthWithoutPadding - offset;
+    }
+
+    /**
+     * Lifecycle method executed when component is updated.
+     * It dispatches an event if toast is opened.
+     * It calculates _messageAreaMaxWidth
+     */
+    protected async updated (_changedProperties: PropertyValues<this>) {
+        if (_changedProperties.has('isOpen') && this.isOpen) {
+            dispatchCustomEvent(this, ON_TOAST_OPEN_EVENT, { targetNotification: this });
+        }
+
+        await this.updateComplete;
+
+        if (this.actionButton) {
+            this._actionButtonOffset = this.actionButton.offsetWidth;
+        }
+
+        // Temporary const. This will be removed when we implement variants.
+        const hasIcon = true;
+
+        this._messageAreaMaxWidth = this.getMessageMaxWidth(hasIcon, this.isMultiline, !!this.leadingAction?.text, this.isDismissible);
+
+        if (
+            _changedProperties.has('message') ||
+            _changedProperties.has('isDismissible') ||
+            _changedProperties.has('isMultiline') ||
+            _changedProperties.has('leadingAction')) {
+            this.requestUpdate();
+        }
+    }
+
+    /**
+     * It handle the action button action.
+     *
+     * @private
+     */
+    private handleActionClick () {
+        dispatchCustomEvent(this, ON_TOAST_LEADING_ACTION_CLICK_EVENT, { targetNotification: this });
+    }
+
+    /**
+     * Render the action button depending on action type and its action.
+     *
+     * @param {ActionProps} action - The action properties.
+     *
+     * @returns {TemplateResult | typeof nothing} - The rendered action button or nothing if the action text is not defined.
+     * @private
+     */
+    private renderActionButton (action: ActionProps) : TemplateResult | typeof nothing {
+        const { text, ariaLabel } = action;
+
+        return html`
+            <pie-button
+                variant="ghost-inverse"
+                size="xsmall"
+                aria-label="${ariaLabel || nothing}"
+                @click="${() => this.handleActionClick()}"
+                data-test-id="${componentSelector}-leading-action"
+                type="button">
+                ${text}
+            </pie-button>
+        `;
+    }
+
+    /**
+     * Template for the footer area.
+     * It should display only when isMultiline is true as well if has action button.
+     * Called within the main render function.
+     *
+     * @private
+     */
+    private renderFooter () {
+        const { leadingAction } = this;
+        return html`
+            <footer class="${componentClass}-footer" data-test-id="${componentSelector}-footer" >
+                ${leadingAction ? this.renderActionButton(leadingAction) : nothing}
+            </footer>
+        `;
+    }
+
+    /**
+     * Template for the close button element. Called within the
+     * main render function.
+     *
+     * @private
+     */
+    private renderCloseButton (): TemplateResult {
+        return html`
+            <pie-icon-button
+                variant="ghost-inverse"
+                size="xsmall"
+                data-test-id="${componentSelector}-close"
+                @click="${this.closeToastComponent}">
+                <icon-close></icon-close>
+            </pie-icon-button>`;
+    }
+
+    /**
+     * Template for the toast message. Called within the
+     * main render function.
+     *
+     * @param {string} message - The message to be displayed.
+     * @param {number} messageAreaMaxWidth - The maximum width of the message area calculated in the lifecycle method.
+     *
+     * @private
+     */
+    private renderMessage (message: string, messageAreaMaxWidth: number): TemplateResult {
+        return html`
+            <span style="max-width: ${messageAreaMaxWidth}px" data-test-id="${componentSelector}-message">
+                ${message}
+            </span>
+        `;
+    }
+
+    /**
+     * Util method responsible to close the component.
+     * It handles the action when user clicks in the close button and triggers an event when is executed.
+     *
+     * @private
+     */
+    private closeToastComponent () {
+        this.isOpen = false;
+        dispatchCustomEvent(this, ON_TOAST_CLOSE_EVENT, { targetNotification: this });
+    }
+
+    render () {
+        const {
+            isOpen,
+            message,
+            isDismissible,
+            leadingAction,
+            isMultiline,
+            _messageAreaMaxWidth,
+        } = this;
+
+        if (!isOpen) {
+            return nothing;
+        }
+
+        const messageAreaClasses = {
+            [`${componentClass}-messageArea`]: true,
+            'is-multiline': isMultiline,
+        };
+
+        return html`
+            <div data-test-id="${componentSelector}" class="${componentClass}">
+                <div class="${componentClass}-contentArea">
+                    <div class="${classMap(messageAreaClasses)}">
+                        <icon-placeholder size="s"></icon-placeholder>
+                        ${message === '' ? nothing : this.renderMessage(message, _messageAreaMaxWidth)} 
+                    </div>
+                    <div class="${componentClass}-actionsArea">
+                        ${!isMultiline && leadingAction?.text ? this.renderActionButton(leadingAction) : nothing}
+                        ${isDismissible ? this.renderCloseButton() : nothing}
+                    </div>
+                </div>
+                ${isMultiline && leadingAction?.text ? this.renderFooter() : nothing}
+            </div>`;
+    }
 }
 
 defineCustomElement(componentSelector, PieToast);

package/src/toast.scss

@@ -1 +1,71 @@
 @use '@justeattakeaway/pie-css/scss' as p;
+
+.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: #{p.font-size(--dt-font-body-s-size)};
+  --toast-line-height: #{p.line-height(--dt-font-body-s-line-height)};
+
+  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;
+
+  span {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  &.is-multiline {
+    align-items: flex-start;
+
+    span {
+      max-height: 60px;
+      white-space: inherit;
+
+      // text-overflow: ellipsis; for multiline lines only works using webkit prefix
+      /* stylelint-disable */
+      display: -webkit-box;
+      /* stylelint-enable */
+      -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;
+}