@justeattakeaway/pie-toast 1.0.6 → 1.1.0

package/README.md

@@ -42,6 +42,7 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
 | `isMultiline`    | `true`, `false`                                                           | Allows the message content to be displayed as multiline, limited to three rows.                                                                                          | `false`     |
 | `leadingAction`  | `{ text: string, ariaLabel?: string }`                                    | The leading action for the toast.                                                                                                                                        | `undefined` |
 | `duration`       | `number`, `null`                                                          | Sets the duration of the toast in milliseconds before it auto-dismisses. `null` disables auto-dismiss. Defaults to 5 seconds if not specified.                          | `5000`      |
+| `aria`           | `{ close?: string }`                                                      | The ARIA labels used for various parts of the toast. `close` sets the `aria-label` on the close button.                                                                 | `undefined` |
 
 ### Slots
 This component does not have any slots. All content is controlled through properties.

package/custom-elements.json

@@ -182,6 +182,15 @@
               "privacy": "public",
               "attribute": "duration"
             },
+            {
+              "kind": "field",
+              "name": "aria",
+              "type": {
+                "text": "ToastProps['aria']"
+              },
+              "privacy": "public",
+              "attribute": "aria"
+            },
             {
               "kind": "field",
               "name": "actionButton",
@@ -425,6 +434,13 @@
             {
               "name": "duration",
               "fieldName": "duration"
+            },
+            {
+              "name": "aria",
+              "type": {
+                "text": "ToastProps['aria']"
+              },
+              "fieldName": "aria"
             }
           ],
           "superclass": {

package/dist/index.d.ts

@@ -16,11 +16,15 @@ export declare type ActionProps = {
     ariaLabel?: string;
 };
 
+declare type AriaProps = {
+    close?: string;
+};
+
 export declare const componentClass = "c-toast";
 
 export declare const componentSelector = "pie-toast";
 
-export declare type DefaultProps = ComponentDefaultProps<ToastProps, keyof Omit<ToastProps, 'leadingAction'>>;
+export declare type DefaultProps = ComponentDefaultProps<ToastProps, keyof Omit<ToastProps, 'leadingAction' | 'aria'>>;
 
 export declare const defaultProps: DefaultProps;
 
@@ -60,6 +64,7 @@ export declare class PieToast extends PieElement implements ToastProps {
     isMultiline: boolean;
     leadingAction: ToastProps['leadingAction'];
     duration: number | null;
+    aria: ToastProps['aria'];
     private actionButton?;
     private closeButton?;
     private _timeoutId;
@@ -207,6 +212,10 @@ export declare interface ToastProps {
      * If the value is not provided it auto-dismisses after 5 seconds
      */
     duration?: number | null;
+    /**
+     * The ARIA labels used for various parts of the toast.
+     */
+    aria?: AriaProps;
 }
 
 export declare const variants: readonly ["neutral", "info", "warning", "success", "error"];

package/dist/index.js

@@ -1,5 +1,5 @@
 import { LitElement as y, unsafeCSS as $, nothing as l, html as d } from "lit";
-import { property as u, query as b } from "lit/decorators.js";
+import { property as p, query as b } from "lit/decorators.js";
 import { classMap as x } from "lit/directives/class-map.js";
 import { validPropertyValues as A, safeCustomElement as w, dispatchCustomEvent as g } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-icon-button";
@@ -14,9 +14,9 @@ const f = class f extends y {
     this.getAttribute("v") || this.setAttribute("v", f.v);
   }
 };
-f.v = "1.0.6";
+f.v = "1.1.0";
 let m = f;
-const C = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-toast{--toast-border-radius: var(--dt-radius-rounded-b);--toast-background-color: var(--dt-color-container-inverse);--toast-font-color: var(--dt-color-content-inverse);--toast-font-family: var(--dt-font-body-s-family);--toast-font-size: calc(var(--dt-font-body-s-size) * 1px);--toast-line-height: calc(var(--dt-font-body-s-line-height) * 1px);--toast-icon-fill: var(--dt-color-content-default);display:flex;flex-direction:column;justify-content:center;min-height:48px;max-height:122px;min-width:300px;max-width:420px;padding:var(--dt-spacing-b) var(--dt-spacing-c) var(--dt-spacing-b) var(--dt-spacing-d);border-radius:var(--toast-border-radius);background-color:var(--toast-background-color);box-shadow:var(--dt-elevation-below-20);color:var(--toast-font-color);font-family:var(--toast-font-family);font-size:var(--toast-font-size);line-height:var(--toast-line-height)}.c-toast--info{--toast-icon-fill: var(--dt-color-support-info-inverse)}.c-toast--info.c-toast--strong{--toast-background-color: var(--dt-color-support-info);--toast-icon-fill: var(--dt-color-content-inverse)}.c-toast--warning{--toast-icon-fill: var(--dt-color-support-warning-inverse)}.c-toast--warning.c-toast--strong{--toast-background-color: var(--dt-color-support-warning);--toast-icon-fill: var(--dt-color-content-dark);--toast-font-color: var(--dt-color-content-dark)}.c-toast--success{--toast-icon-fill: var(--dt-color-support-positive-inverse)}.c-toast--success.c-toast--strong{--toast-background-color: var(--dt-color-support-positive);--toast-icon-fill: var(--dt-color-content-inverse)}.c-toast--error{--toast-icon-fill: var(--dt-color-support-error-inverse)}.c-toast--error.c-toast--strong{--toast-background-color: var(--dt-color-support-error);--toast-icon-fill: var(--dt-color-content-light);--toast-font-color: var(--dt-color-content-light)}.c-toast-contentArea{display:flex;gap:var(--dt-spacing-b);justify-content:space-between}.c-toast-messageArea{display:flex;align-items:center;gap:var(--dt-spacing-b);padding:6px var(--dt-spacing-a) 6px 0;overflow:hidden}.c-toast-messageArea span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.c-toast-actionsArea{display:flex;gap:var(--dt-spacing-b);flex-shrink:0}.is-multiline .c-toast-contentArea{align-items:flex-start;gap:0}.is-multiline .c-toast-messageArea{align-items:flex-start;padding-block-end:var(--dt-spacing-b)}.is-multiline .c-toast-messageArea span{max-height:60px;white-space:inherit;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.c-toast-footer{display:flex;justify-content:flex-end}.c-toast-icon{color:var(--toast-icon-fill)}", O = ["neutral", "info", "warning", "success", "error"], s = "pie-toast", n = "c-toast", _ = `${s}-close`, E = `${s}-open`, T = `${s}-leading-action-click`, p = {
+const C = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-toast{--toast-border-radius: var(--dt-radius-rounded-b);--toast-background-color: var(--dt-color-container-inverse);--toast-font-color: var(--dt-color-content-inverse);--toast-font-family: var(--dt-font-body-s-family);--toast-font-size: calc(var(--dt-font-body-s-size) * 1px);--toast-line-height: calc(var(--dt-font-body-s-line-height) * 1px);--toast-icon-fill: var(--dt-color-content-default);display:flex;flex-direction:column;justify-content:center;min-height:48px;max-height:122px;min-width:300px;max-width:420px;padding:var(--dt-spacing-b) var(--dt-spacing-c) var(--dt-spacing-b) var(--dt-spacing-d);border-radius:var(--toast-border-radius);background-color:var(--toast-background-color);box-shadow:var(--dt-elevation-below-20);color:var(--toast-font-color);font-family:var(--toast-font-family);font-size:var(--toast-font-size);line-height:var(--toast-line-height)}.c-toast--info{--toast-icon-fill: var(--dt-color-support-info-inverse)}.c-toast--info.c-toast--strong{--toast-background-color: var(--dt-color-support-info);--toast-icon-fill: var(--dt-color-content-inverse)}.c-toast--warning{--toast-icon-fill: var(--dt-color-support-warning-inverse)}.c-toast--warning.c-toast--strong{--toast-background-color: var(--dt-color-support-warning);--toast-icon-fill: var(--dt-color-content-dark);--toast-font-color: var(--dt-color-content-dark)}.c-toast--success{--toast-icon-fill: var(--dt-color-support-positive-inverse)}.c-toast--success.c-toast--strong{--toast-background-color: var(--dt-color-support-positive);--toast-icon-fill: var(--dt-color-content-inverse)}.c-toast--error{--toast-icon-fill: var(--dt-color-support-error-inverse)}.c-toast--error.c-toast--strong{--toast-background-color: var(--dt-color-support-error);--toast-icon-fill: var(--dt-color-content-light);--toast-font-color: var(--dt-color-content-light)}.c-toast-contentArea{display:flex;gap:var(--dt-spacing-b);justify-content:space-between}.c-toast-messageArea{display:flex;align-items:center;gap:var(--dt-spacing-b);padding:6px var(--dt-spacing-a) 6px 0;overflow:hidden}.c-toast-messageArea span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.c-toast-actionsArea{display:flex;gap:var(--dt-spacing-b);flex-shrink:0}.is-multiline .c-toast-contentArea{align-items:flex-start;gap:0}.is-multiline .c-toast-messageArea{align-items:flex-start;padding-block-end:var(--dt-spacing-b)}.is-multiline .c-toast-messageArea span{max-height:60px;white-space:inherit;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.c-toast-footer{display:flex;justify-content:flex-end}.c-toast-icon{color:var(--toast-icon-fill)}", O = ["neutral", "info", "warning", "success", "error"], e = "pie-toast", a = "c-toast", _ = `${e}-close`, E = `${e}-open`, T = `${e}-leading-action-click`, u = {
   message: "",
   isOpen: !0,
   variant: "neutral",
@@ -25,14 +25,14 @@ const C = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-toast{--
   isMultiline: !1,
   duration: 5e3
 };
-var k = Object.defineProperty, B = Object.getOwnPropertyDescriptor, a = (t, i, c, o) => {
-  for (var r = o > 1 ? void 0 : o ? B(i, c) : i, h = t.length - 1, v; h >= 0; h--)
-    (v = t[h]) && (r = (o ? v(i, c, r) : v(r)) || r);
-  return o && r && k(i, c, r), r;
+var k = Object.defineProperty, B = Object.getOwnPropertyDescriptor, i = (t, r, c, o) => {
+  for (var n = o > 1 ? void 0 : o ? B(r, c) : r, h = t.length - 1, v; h >= 0; h--)
+    (v = t[h]) && (n = (o ? v(r, c, n) : v(n)) || n);
+  return o && n && k(r, c, n), n;
 };
-let e = class extends m {
+let s = class extends m {
   constructor() {
-    super(...arguments), this.message = p.message, this.isOpen = p.isOpen, this.variant = p.variant, this.isStrong = p.isStrong, this.isDismissible = p.isDismissible, this.isMultiline = p.isMultiline, this.duration = p.duration, 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._timeoutId = null, this._abortController = null;
   }
   /**
    * Create a timeout function and set its id into a private attribute.
@@ -63,8 +63,8 @@ let e = class extends m {
    *
    * @private
    */
-  addListenersToElement(t, i, c, o) {
-    t && (t.addEventListener(i, () => {
+  addListenersToElement(t, r, c, o) {
+    t && (t.addEventListener(r, () => {
       this._timeoutId && clearTimeout(this._timeoutId);
     }, { signal: o }), t.addEventListener(c, () => {
       this.setAutoDismiss();
@@ -107,16 +107,16 @@ let e = class extends m {
    * @private
    */
   renderActionButton(t) {
-    const { text: i, ariaLabel: c } = t;
+    const { text: r, ariaLabel: c } = t;
     return d`
             <pie-button
                 variant="${this.shouldNotUseInverseBtnVariant() ? "ghost" : "ghost-inverse"}"
                 size="xsmall"
                 aria-label="${c || l}"
                 @click="${() => this.handleActionClick()}"
-                data-test-id="${s}-leading-action"
+                data-test-id="${e}-leading-action"
                 type="button">
-                ${i}
+                ${r}
             </pie-button>
         `;
   }
@@ -130,7 +130,7 @@ let e = class extends m {
   renderFooter() {
     const { leadingAction: t } = this;
     return d`
-            <footer class="${n}-footer" data-test-id="${s}-footer" >
+            <footer class="${a}-footer" data-test-id="${e}-footer" >
                 ${t ? this.renderActionButton(t) : l}
             </footer>
         `;
@@ -142,11 +142,13 @@ let e = class extends m {
    * @private
    */
   renderCloseButton() {
+    var t;
     return d`
             <pie-icon-button
                 variant="${this.shouldNotUseInverseBtnVariant() ? "ghost-secondary" : "ghost-inverse"}"
                 size="xsmall"
-                data-test-id="${s}-close"
+                data-test-id="${e}-close"
+                .aria="${{ label: (t = this.aria) == null ? void 0 : t.close }}"
                 @click="${this.closeToastComponent}">
                 <icon-close></icon-close>
             </pie-icon-button>`;
@@ -161,7 +163,7 @@ let e = class extends m {
    */
   renderMessage(t) {
     return d`
-            <span data-test-id="${s}-message">
+            <span data-test-id="${e}-message">
                 ${t}
             </span>
         `;
@@ -183,13 +185,13 @@ let e = class extends m {
   getVariantIcon() {
     switch (this.variant) {
       case "info":
-        return d`<icon-info-circle class="${n}-icon" size="s" data-test-id="${s}-heading-icon-info"></icon-info-circle>`;
+        return d`<icon-info-circle class="${a}-icon" size="s" data-test-id="${e}-heading-icon-info"></icon-info-circle>`;
       case "success":
-        return d`<icon-check-circle class="${n}-icon" size="s" data-test-id="${s}-heading-icon-success"></icon-check-circle>`;
+        return d`<icon-check-circle class="${a}-icon" size="s" data-test-id="${e}-heading-icon-success"></icon-check-circle>`;
       case "warning":
-        return d`<icon-alert-triangle class="${n}-icon" size="s" data-test-id="${s}-heading-icon-warning"></icon-alert-triangle>`;
+        return d`<icon-alert-triangle class="${a}-icon" size="s" data-test-id="${e}-heading-icon-warning"></icon-alert-triangle>`;
       case "error":
-        return d`<icon-alert-circle class="${n}-icon" size="s" data-test-id="${s}-heading-icon-error"></icon-alert-circle>`;
+        return d`<icon-alert-circle class="${a}-icon" size="s" data-test-id="${e}-heading-icon-error"></icon-alert-circle>`;
       default:
         return l;
     }
@@ -217,78 +219,81 @@ let e = class extends m {
       return l;
     const {
       variant: t,
-      message: i,
+      message: r,
       isDismissible: c,
       leadingAction: o,
-      isMultiline: r,
+      isMultiline: n,
       isStrong: h
     } = this, v = {
-      [n]: !0,
-      "is-multiline": r,
-      [`${n}--${t}`]: !0,
-      [`${n}--strong`]: h
+      [a]: !0,
+      "is-multiline": n,
+      [`${a}--${t}`]: !0,
+      [`${a}--strong`]: h
     };
     return d`
             <div
                 role="${t === "error" ? "alert" : "status"}"
-                data-test-id="${s}"
+                data-test-id="${e}"
                 class="${x(v)}">
-                <div class="${n}-contentArea">
-                    <div class="${n}-messageArea">
+                <div class="${a}-contentArea">
+                    <div class="${a}-messageArea">
                         ${this.variantHasIcon(t) ? this.getVariantIcon() : l}
-                        ${i === "" ? l : this.renderMessage(i)}
+                        ${r === "" ? l : this.renderMessage(r)}
                     </div>
-                    <div class="${n}-actionsArea">
-                        ${!r && (o != null && o.text) ? this.renderActionButton(o) : l}
+                    <div class="${a}-actionsArea">
+                        ${!n && (o != null && o.text) ? this.renderActionButton(o) : l}
                         ${c ? this.renderCloseButton() : l}
                     </div>
                 </div>
-                ${r && (o != null && o.text) ? this.renderFooter() : l}
+                ${n && (o != null && o.text) ? this.renderFooter() : l}
             </div>`;
   }
 };
-e.styles = $(C);
-a([
-  u({ type: String })
-], e.prototype, "message", 2);
-a([
-  u({ type: Boolean })
-], e.prototype, "isOpen", 2);
-a([
-  u({ type: String }),
-  A(s, O, p.variant)
-], e.prototype, "variant", 2);
-a([
-  u({ type: Boolean })
-], e.prototype, "isStrong", 2);
-a([
-  u({ type: Boolean })
-], e.prototype, "isDismissible", 2);
-a([
-  u({ type: Boolean })
-], e.prototype, "isMultiline", 2);
-a([
-  u({ type: Object })
-], e.prototype, "leadingAction", 2);
-a([
-  u({ type: Number })
-], e.prototype, "duration", 2);
-a([
+s.styles = $(C);
+i([
+  p({ type: String })
+], s.prototype, "message", 2);
+i([
+  p({ type: Boolean })
+], s.prototype, "isOpen", 2);
+i([
+  p({ type: String }),
+  A(e, O, u.variant)
+], s.prototype, "variant", 2);
+i([
+  p({ type: Boolean })
+], s.prototype, "isStrong", 2);
+i([
+  p({ type: Boolean })
+], s.prototype, "isDismissible", 2);
+i([
+  p({ type: Boolean })
+], s.prototype, "isMultiline", 2);
+i([
+  p({ type: Object })
+], s.prototype, "leadingAction", 2);
+i([
+  p({ type: Number })
+], s.prototype, "duration", 2);
+i([
+  p({ type: Object })
+], s.prototype, "aria", 2);
+i([
   b("pie-button")
-], e.prototype, "actionButton", 2);
-a([
+], s.prototype, "actionButton", 2);
+i([
   b("pie-icon-button")
-], e.prototype, "closeButton", 2);
-e = a([
+], s.prototype, "closeButton", 2);
+s = i([
   w("pie-toast")
-], e);
+], s);
 export {
   _ as ON_TOAST_CLOSE_EVENT,
   T as ON_TOAST_LEADING_ACTION_CLICK_EVENT,
   E as ON_TOAST_OPEN_EVENT,
-  e as PieToast,
-  n as componentClass,
-  s as componentSelector,
-  p as defaultProps,
+  s as PieToast,
+  a as componentClass,
+  e as componentSelector,
+  u as defaultProps,
   O as variants
 };

package/dist/react.d.ts

@@ -17,11 +17,15 @@ export declare type ActionProps = {
     ariaLabel?: string;
 };
 
+declare type AriaProps = {
+    close?: string;
+};
+
 export declare const componentClass = "c-toast";
 
 export declare const componentSelector = "pie-toast";
 
-export declare type DefaultProps = ComponentDefaultProps<ToastProps, keyof Omit<ToastProps, 'leadingAction'>>;
+export declare type DefaultProps = ComponentDefaultProps<ToastProps, keyof Omit<ToastProps, 'leadingAction' | 'aria'>>;
 
 export declare const defaultProps: DefaultProps;
 
@@ -63,6 +67,7 @@ declare class PieToast_2 extends PieElement implements ToastProps {
     isMultiline: boolean;
     leadingAction: ToastProps['leadingAction'];
     duration: number | null;
+    aria: ToastProps['aria'];
     private actionButton?;
     private closeButton?;
     private _timeoutId;
@@ -218,6 +223,10 @@ export declare interface ToastProps {
      * If the value is not provided it auto-dismisses after 5 seconds
      */
     duration?: number | null;
+    /**
+     * The ARIA labels used for various parts of the toast.
+     */
+    aria?: AriaProps;
 }
 
 export declare const variants: readonly ["neutral", "info", "warning", "success", "error"];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-toast",
   "description": "PIE Design System Toast built using Web Components",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -45,12 +45,12 @@
   "devDependencies": {
     "@justeattakeaway/pie-components-config": "0.21.3",
     "@justeattakeaway/pie-css": "1.3.0",
-    "@justeattakeaway/pie-monorepo-utils": "0.9.6"
+    "@justeattakeaway/pie-monorepo-utils": "0.9.7"
   },
   "dependencies": {
     "@justeattakeaway/pie-button": "1.14.8",
-    "@justeattakeaway/pie-icon-button": "2.7.23",
-    "@justeattakeaway/pie-icons-webc": "1.25.4",
+    "@justeattakeaway/pie-icon-button": "2.7.24",
+    "@justeattakeaway/pie-icons-webc": "1.26.0",
     "@justeattakeaway/pie-webc-core": "16.0.0"
   },
   "customElements": "custom-elements.json",

package/src/defs.ts

@@ -2,6 +2,10 @@ import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 
 export const variants = ['neutral', 'info', 'warning', 'success', 'error'] as const;
 
+type AriaProps = {
+  close?: string;
+};
+
 export type ActionProps = {
   /**
    * The text to display inside the button.
@@ -51,6 +55,11 @@ export interface ToastProps {
    * If the value is not provided it auto-dismisses after 5 seconds
    */
   duration?: number | null;
+
+  /**
+   * The ARIA labels used for various parts of the toast.
+   */
+  aria?: AriaProps;
 }
 
 export const componentSelector = 'pie-toast';
@@ -77,7 +86,7 @@ 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, 'leadingAction'>>;
+export type DefaultProps = ComponentDefaultProps<ToastProps, keyof Omit<ToastProps, 'leadingAction' | 'aria'>>;
 
 export const defaultProps: DefaultProps = {
     message: '',

package/src/index.ts

@@ -70,6 +70,9 @@ export class PieToast extends PieElement implements ToastProps {
     @property({ type: Number })
     public duration = defaultProps.duration;
 
+    @property({ type: Object })
+    public aria: ToastProps['aria'];
+
     @query('pie-button')
     private actionButton?: HTMLElement;
 
@@ -238,6 +241,7 @@ export class PieToast extends PieElement implements ToastProps {
                 variant="${this.shouldNotUseInverseBtnVariant() ? 'ghost-secondary' : 'ghost-inverse'}"
                 size="xsmall"
                 data-test-id="${componentSelector}-close"
+                .aria="${{ label: this.aria?.close }}"
                 @click="${this.closeToastComponent}">
                 <icon-close></icon-close>
             </pie-icon-button>`;