feat(pie-toast): DSW-1234 support slot

.changeset/khaki-rules-provide.md

@@ -0,0 +1,7 @@
+---
+"@justeattakeaway/pie-toast-provider": minor
+"@justeattakeaway/pie-toast": minor
+"@justeattakeaway/pie-storybook": minor
+---
+
+[Added] - support slot

apps/pie-storybook/stories/pie-toast-provider.stories.ts

@@ -140,6 +140,20 @@ const Template = ({ options = defaultProps.options, position, '--toast-provider-
             Trigger Persistent Toast
         </pie-button>
 
+
+        <pie-button
+            variant="outline"
+            @click=${() => {
+        toaster.create({
+            variant: 'info',
+            slot: html`<span>Order <strong>#12345</strong> confirmed! <a href="#" style="color: inherit;">View order</a></span>`,
+            isDismissible: false,
+            duration: null,
+        });
+    }}>
+            Trigger Toast with Slot
+        </pie-button>
+
         <pie-button
             variant="secondary"
             @click=${() => {

apps/pie-storybook/stories/pie-toast.stories.ts

@@ -137,3 +137,39 @@ export const SuccessStrong = createToastStory({ variant: 'success', isStrong: tr
 export const Error = createToastStory({ variant: 'error' });
 export const ErrorStrong = createToastStory({ variant: 'error', isStrong: true });
 export const AutoDismiss = createToastStory({ duration: 3000, message: 'Closing in three seconds' });
+
+export const SlotContent = {
+    render: () => {
+        const [, updateArgs] = useArgs();
+
+        const pieToastCloseHandle = () => {
+            updateArgs({ isOpen: false });
+            pieToastClose();
+        };
+
+        const pieToastOpenHandle = () => {
+            updateArgs({ isOpen: true });
+            pieToastOpen();
+        };
+
+        return html`
+            <pie-toast
+                isOpen
+                isDismissible
+                variant="info"
+                .duration="${null}"
+                @pie-toast-close="${pieToastCloseHandle}"
+                @pie-toast-open="${pieToastOpenHandle}">
+                <span>Check out our <a href="#" style="color: inherit;">latest deals</a> for great savings!</span>
+            </pie-toast>
+        `;
+    },
+    args: {},
+    parameters: {
+        docs: {
+            description: {
+                story: 'Toast with custom slot content instead of the message prop. This allows for rich content like links and formatted text.',
+            },
+        },
+    },
+};

packages/components/pie-toast-provider/src/defs.ts

@@ -1,4 +1,5 @@
 import { type ToastProps } from '@justeattakeaway/pie-toast';
+import { type TemplateResult } from 'lit';
 
 import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 
@@ -20,6 +21,12 @@ export type Priority = keyof typeof PRIORITY_ORDER;
 export const positions = ['default', 'bottom-left', 'bottom-right', 'bottom-center'] as const;
 
 export interface ExtendedToastProps extends ToastProps {
+    /**
+     * Custom content to render inside the toast slot.
+     * Use this for complex content like links, formatted text, or other HTML elements.
+     */
+    slot?: TemplateResult | string;
+
     /**
      * Triggered when the user interacts with the close icon or when the toast auto dismiss.
      */

packages/components/pie-toast-provider/src/index.ts

@@ -148,7 +148,7 @@ export class PieToastProvider extends PieElement implements ToastProviderProps {
             html`
                 <pie-toast
                     class=${classMap(toastClasses)}
-                    message="${_currentToast.message}"
+                    message="${ifDefined(_currentToast.message)}"
                     variant="${ifDefined(_currentToast.variant)}"
                     ?isStrong="${_currentToast.isStrong}"
                     ?isDismissible="${_currentToast.isDismissible}"
@@ -158,6 +158,7 @@ export class PieToastProvider extends PieElement implements ToastProviderProps {
                     @pie-toast-close="${this._dismissToast}"
                     @pie-toast-open="${_currentToast.onPieToastOpen}"
                     @pie-toast-leading-action-click="${_currentToast.onPieToastLeadingActionClick}">
+                    ${_currentToast.slot || nothing}
                 </pie-toast>
             `}
             </div>

packages/components/pie-toast/src/defs.ts

@@ -35,7 +35,7 @@ export interface ToastProps {
   /**
    * The message content of the toast.
    */
-  message: string;
+  message?: string;
   /**
    * Allows the message content to be displayed as multiline, limited to three rows.
    */
@@ -77,10 +77,9 @@ 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' | 'message'>>;
 
 export const defaultProps: DefaultProps = {
-    message: '',
     isOpen: true,
     variant: 'neutral',
     isStrong: false,

packages/components/pie-toast/src/index.ts

@@ -46,7 +46,7 @@ export * from './defs';
 @safeCustomElement('pie-toast')
 export class PieToast extends PieElement implements ToastProps {
     @property({ type: String })
-    public message = defaultProps.message;
+    public message?: string;
 
     @property({ type: Boolean })
     public isOpen = defaultProps.isOpen;
@@ -243,22 +243,6 @@ export class PieToast extends PieElement implements ToastProps {
             </pie-icon-button>`;
     }
 
-    /**
-     * Template for the toast message. Called within the
-     * main render function.
-     *
-     * @param {string} message - The message to be displayed.
-     *
-     * @private
-     */
-    private renderMessage (message: string): TemplateResult {
-        return html`
-            <span 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.
@@ -336,7 +320,10 @@ export class PieToast extends PieElement implements ToastProps {
                 <div class="${componentClass}-contentArea">
                     <div class="${componentClass}-messageArea">
                         ${this.variantHasIcon(variant) ? this.getVariantIcon() : nothing}
-                        ${message === '' ? nothing : this.renderMessage(message)}
+                        <span data-test-id="${componentSelector}-message">
+                            ${message || nothing}
+                            <slot></slot>
+                        </span>
                     </div>
                     <div class="${componentClass}-actionsArea">
                         ${!isMultiline && leadingAction?.text ? this.renderActionButton(leadingAction) : nothing}