feat(pie-toast-provider): DSW-2222 add priorty order

feat(pie-toast-provider): DSW-2222 add tests

feat(pie-toast-provider): DSW-2222 update yarn

fix(pie-toast-provider): DSW-2222 update formating

fix(pie-toast-provider): DSW-2222 ensure duration is parsed correctly

fix(pie-toast-provider): DSW-2222 update markup

fix(pie-toast-provider): DSW-2222 update yarn

fix(pie-toast-provider): DSW-2222 add validation

fix(pie-toast-provider): DSW-2222 update logs

fix(pie-toast-provider): DSW-2222 refactor tests

fix(pie-toast-provider): DSW-2222 refactor tests

fix(pie-toast-provider): DSW-2222 refactor tests

.changeset/tiny-eels-play.md

@@ -0,0 +1,9 @@
+---
+"@justeattakeaway/pie-toast-provider": minor
+"@justeattakeaway/pie-toast": minor
+"@justeattakeaway/pie-webc": minor
+"pie-storybook": minor
+"pie-monorepo": minor
+---
+
+[Added] - priority order for the toast provider

apps/pie-docs/src/components/toast/overview/priority-queue.json

@@ -18,7 +18,7 @@
     ],
     [
       "4",
-      "Positive - actionable"
+      "Success - actionable"
     ],
     [
       "5",
@@ -34,7 +34,7 @@
     ],
     [
       "8",
-      "Positive"
+      "Success"
     ],
     [
       "9",

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

@@ -1,19 +1,39 @@
 import { html } from 'lit';
 import { type Meta } from '@storybook/web-components';
+import { action } from '@storybook/addon-actions';
 
-import '@justeattakeaway/pie-toast-provider';
-import { type ToastProviderProps } from '@justeattakeaway/pie-toast-provider';
+import { toaster } from '@justeattakeaway/pie-toast-provider';
+import { type ToastProviderProps, defaultProps } from '@justeattakeaway/pie-toast-provider';
+import '@justeattakeaway/pie-button';
+import '@justeattakeaway/pie-tag';
 
 import { createStory } from '../utilities';
 
 type ToastProviderStoryMeta = Meta<ToastProviderProps>;
 
-const defaultArgs: ToastProviderProps = {};
+const defaultArgs: ToastProviderProps = {
+    ...defaultProps,
+    options: {
+        duration: 3000,
+        isDismissible: true,
+        onPieToastOpen: action('onPieToastOpen'),
+        onPieToastClose: action('onPieToastClose'),
+        onPieToastLeadingActionClick: action('onPieToastLeadingActionClick'),
+    },
+};
 
 const toastProviderStoryMeta: ToastProviderStoryMeta = {
     title: 'Toast Provider',
     component: 'pie-toast-provider',
-    argTypes: {},
+    argTypes: {
+        options: {
+            description: 'Default options for all toasts; accepts all toast props.',
+            control: 'object',
+            defaultValue: {
+                summary: defaultProps.options,
+            },
+        },
+    },
     args: defaultArgs,
     parameters: {
         design: {
@@ -25,10 +45,85 @@ const toastProviderStoryMeta: ToastProviderStoryMeta = {
 
 export default toastProviderStoryMeta;
 
-// TODO: remove the eslint-disable rule when props are added
-// eslint-disable-next-line no-empty-pattern
-const Template = ({}: ToastProviderProps) => html`
-    <pie-toast-provider></pie-toast-provider>
+const Template = ({ options }: ToastProviderProps) => {
+    const onQueueUpdate = (event: CustomEvent) => {
+        const queueLength = document.querySelector('#queue-length-tag') as HTMLElement;
+        if (queueLength) {
+            queueLength.textContent = `Toast Queue Length: ${event.detail.length}`;
+        }
+    };
+
+    return html`
+    <pie-toast-provider 
+        .options=${options} 
+        @pie-toast-provider-queue-update=${onQueueUpdate}>
+    </pie-toast-provider>
+
+    <pie-tag id="queue-length-tag" variant="information" style="margin-top: 16px;">
+        Toast Queue Length: 0
+    </pie-tag>
+
+    <div style="margin-top: 16px; display: flex; gap: 16px; flex-wrap: wrap;">
+        <pie-button 
+            @click=${() => {
+        toaster.create({
+            message: 'Low Priority Info',
+            variant: 'info',
+        });
+    }}>
+            Trigger Info Toast (Low Priority)
+        </pie-button>
+
+        <pie-button
+            @click=${() => {
+        toaster.create({
+            message: 'Medium Priority Warning Toast',
+            variant: 'warning',
+        });
+    }}>
+            Trigger Warning Toast (Medium Priority)
+        </pie-button>
+
+        <pie-button
+            @click=${() => {
+        toaster.create({
+            message: 'High Priority Error Toast',
+            variant: 'error',
+        });
+    }}>
+            Trigger Error Toast (High Priority)
+        </pie-button>
+
+        <pie-button
+            @click=${() => {
+        toaster.create({
+            message: 'Actionable Info Toast',
+            variant: 'info',
+            leadingAction: { text: 'Retry' },
+        });
+    }}>
+            Trigger Actionable Info Toast
+        </pie-button>
+
+        <pie-button
+            @click=${() => {
+        toaster.create({
+            message: 'Persistent Toast',
+            duration: null,
+        });
+    }}>
+            Trigger Persistent Toast
+        </pie-button>
+
+        <pie-button
+            variant="secondary"
+            @click=${() => {
+        toaster.clearAll();
+    }}>
+            Clear All Toasts
+        </pie-button>
+    </div>
 `;
+};
 
 export const Default = createStory<ToastProviderProps>(Template, defaultArgs)();

apps/pie-storybook/stories/testing/pie-chip.test.stories.ts

@@ -1,6 +1,5 @@
 import { html, nothing } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { action } from '@storybook/addon-actions';
 import { type Meta } from '@storybook/web-components';
 
 import '@justeattakeaway/pie-chip';
@@ -88,11 +87,11 @@ const chipStoryMeta: ChipStoryMeta = {
 export default chipStoryMeta;
 
 const clickAction = () => {
-  console.log('pie-chip clicked');
-}
+    console.log('pie-chip clicked');
+};
 const closeAction = () => {
-  console.log('pie-chip-close clicked');
-}
+    console.log('pie-chip-close clicked');
+};
 
 const Template: TemplateFunction<ChipProps> = ({
     aria,

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

@@ -0,0 +1,43 @@
+import { html } from 'lit';
+import { type Meta } from '@storybook/web-components';
+
+import '@justeattakeaway/pie-toast-provider';
+import { type ToastProviderProps, defaultProps } from '@justeattakeaway/pie-toast-provider';
+
+import { createStory } from '../../utilities';
+
+type ToastProviderStoryMeta = Meta<ToastProviderProps>;
+
+const defaultArgs: ToastProviderProps = {
+    ...defaultProps,
+};
+
+const toastProviderStoryMeta: ToastProviderStoryMeta = {
+    title: 'Toast Provider',
+    component: 'pie-toast-provider',
+    argTypes: {
+        options: {
+            description: 'Default options for all toasts; accepts all toast props.',
+            control: 'object',
+            defaultValue: {
+                summary: defaultProps.options,
+            },
+        },
+    },
+    args: defaultArgs,
+};
+
+export default toastProviderStoryMeta;
+
+const onQueueUpdate = (queue: CustomEvent) => {
+    console.log('toast provider queue:', queue.detail);
+};
+
+const Template = ({ options }: ToastProviderProps) => html`
+    <pie-toast-provider 
+        .options="${options}"
+        @pie-toast-provider-queue-update="${onQueueUpdate}">
+    </pie-toast-provider>
+`;
+
+export const Default = createStory<ToastProviderProps>(Template, defaultArgs)();

packages/components/pie-toast-provider/package.json

@@ -41,6 +41,7 @@
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
+    "@justeattakeaway/pie-toast": "0.5.0",
     "@justeattakeaway/pie-webc-core": "0.24.2"
   },
   "volta": {

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

@@ -1,3 +1,54 @@
-// 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 ToastProviderProps {}
+import { type ToastProps } from '@justeattakeaway/pie-toast';
+
+import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
+
+export const PRIORITY_ORDER: { [x: string]: number } = {
+    'error-actionable': 1,
+    error: 2,
+    'warning-actionable': 3,
+    'success-actionable': 4,
+    'info-actionable': 5,
+    'neutral-actionable': 6,
+    warning: 7,
+    success: 8,
+    info: 9,
+    neutral: 10,
+};
+
+export interface ExtendedToastProps extends ToastProps {
+    /**
+     * Triggered when the user interacts with the close icon or when the toast auto dismiss.
+     */
+    onPieToastClose?: () => void;
+
+    /**
+     * Triggered when the toast is opened.
+     */
+    onPieToastOpen?: () => void;
+
+    /**
+     * Triggered when the user interacts with the leading action.
+     */
+    onPieToastLeadingActionClick?: (event: Event) => void;
+}
+
+export interface ToastProviderProps {
+    /**
+     * Default options for all toasts; accepts all toast props.
+     */
+    options?: Partial<ExtendedToastProps>;
+}
+
+export type DefaultProps = ComponentDefaultProps<ToastProviderProps>;
+
+export const defaultProps: DefaultProps = {
+    options: {},
+};
+
+/**
+ * Event name for when the toast provider queue is updated.
+ *
+ * @constant
+ */
+
+export const ON_TOAST_PROVIDER_QUEUE_UPDATE_EVENT = 'pie-toast-provider-queue-update';