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

.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-storybook/data/tag-variants-to-statuses-map.ts

@@ -1,9 +1,9 @@
 import { type TagVariantToStatusMap } from '../interfaces/tag-variant-to-status-map';
 
 export const tagVariantToStatusMap: TagVariantToStatusMap = {
-    alpha: 'yellow',
-    beta: 'yellow',
-    deprecated: 'red',
-    removed: 'red',
-    stable: 'green',
+    alpha: 'brand-02',
+    beta: 'brand-02',
+    deprecated: 'error',
+    removed: 'error',
+    stable: 'information',
 };

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

@@ -1,19 +1,47 @@
 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 onQueueUpdate = (event: CustomEvent) => {
+    action('pie-toast-provider-queue-update')(event.detail);
+
+    const queueLengthTag = document.querySelector('#queue-length-tag') as HTMLElement;
+    if (queueLengthTag) {
+        queueLengthTag.textContent = `Toast Queue Length: ${event.detail.length}`;
+    }
+};
+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: 'Global options to configure default toast behavior.',
+            control: 'object',
+            defaultValue: {
+                summary: defaultProps.options,
+            },
+        },
+    },
     args: defaultArgs,
     parameters: {
         design: {
@@ -25,10 +53,70 @@ 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) => 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 Toast',
+        variant: 'info',
+        duration: null,
+        leadingAction: {
+            text: 'Confirm',
+        },
+    });
+}}>
+            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
+            variant="secondary"
+            @click=${() => {
+    toaster.clearAll();
+}}>
+            Clear All Toasts
+        </pie-button>
+    </div>
 `;
 
 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,50 @@
-// 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';
+
+export const PRIORITY_ORDER: { [x: string]: number } = {
+    'error-actionable': 1,
+    error: 2,
+    'warning-actionable': 3,
+    'positive-actionable': 4,
+    'info-actionable': 5,
+    'neutral-actionable': 6,
+    warning: 7,
+    positive: 8,
+    info: 9,
+    neutral: 10,
+};
+
+export interface ExtendedToastProps extends ToastProps {
+    /**
+     * Callback for when the toast is closed.
+     */
+    onPieToastClose?: () => void;
+
+    /**
+     * Callback for when the toast is opened.
+     */
+    onPieToastOpen?: () => void;
+
+    /**
+     * Callback for when the leading action is clicked.
+     */
+    onPieToastLeadingActionClick?: (event: Event) => void;
+}
+
+export interface ToastProviderProps {
+    /**
+     * Default options for all toasts.
+     */
+    options?: Partial<ExtendedToastProps>;
+}
+
+export const defaultProps: ToastProviderProps = {
+    options: {},
+};
+
+/**
+ * Event name for when the chip is closed.
+ *
+ * @constant
+ */
+
+export const ON_TOAST_PROVIDER_QUEUE_UPDATE_EVENT = 'pie-toast-provider-queue-update';