feat(pie-toast-provider): DSW-2222 add toast provider to apps (#228)

* feat(pie-toast-provider): DSW-2222 add toast provider to apps

* feat(pie-toast-provider): DSW-2222 add toast provider to apps

* feat(pie-toast-provider): DSW-2222 update prop values

* feat(pie-toast-provider): DSW-2222 update prop values

* fix(pie-toast): DSW-2222 update webc

* fix(pie-toast): DSW-2222 update webc

* fix(pie-toast): DSW-2222 update spec files

* fix(pie-toast): DSW-2222 update spec files

* fix(pie-toast): DSW-2222 update spec files

* fix(pie-toast-provider): DSW-2222 add tests

nextjs-app-v14/package.json

@@ -15,8 +15,8 @@
   },
   "dependencies": {
     "@justeattakeaway/pie-css": "0.13.1",
-    "@justeattakeaway/pie-icons-webc": "1.1.0",
-    "@justeattakeaway/pie-webc": "0.5.59",
+    "@justeattakeaway/pie-icons-webc": "1.2.0",
+    "@justeattakeaway/pie-webc": "0.6.0",
     "@lit-labs/nextjs": "0.2.0",
     "@lit/react": "1.0.6",
     "next": "14.2.18",

nextjs-app-v14/src/app/components/home-page.tsx

@@ -37,6 +37,8 @@ export default function HomePage() {
       <li><PieLink onClick={() => router.push('/components/tag')} tag="button">Tag</PieLink></li>
       <li><PieLink onClick={() => router.push('/components/text-input')} tag="button">Text Input</PieLink></li>
       <li><PieLink onClick={() => router.push('/components/textarea')} tag="button">Textarea</PieLink></li>
+      <li><PieLink onClick={() => router.push('/components/toast')} tag="button">Toast</PieLink></li>
+      <li><PieLink onClick={() => router.push('/components/toast-provider')} tag="button">Toast Provider</PieLink></li>
     </ul>
     </NavigationLayout>
   );

nextjs-app-v14/src/app/components/toast-provider/page.tsx

@@ -0,0 +1,10 @@
+import ToastProvider from './toast-provider';
+import { type Metadata } from 'next';
+
+export const metadata: Metadata = {
+    title: 'Toast Provider',
+}
+
+export default function ToastProviderComponent() {
+    return <ToastProvider/>;
+}

nextjs-app-v14/src/app/components/toast-provider/toast-provider.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { useState } from 'react';
+import NavigationLayout from '@/app/layout/navigation';
+import { PieToastProvider } from '@justeattakeaway/pie-webc/react/toast-provider.js';
+import { toaster } from '@justeattakeaway/pie-webc/components/toast-provider.js';
+import { PieButton } from '@justeattakeaway/pie-webc/react/button.js';
+import { PieTag } from '@justeattakeaway/pie-webc/react/tag.js';
+
+export default function ToastProviderPage() {
+    const [queueLength, setQueueLength] = useState(0);
+
+    const handleQueueUpdate = (event: CustomEvent) => {
+        setQueueLength(event.detail.length);
+    };
+
+    return (
+        <NavigationLayout title="Toast Provider">
+            <PieToastProvider
+                options={{
+                    isDismissible: true,
+                    onPieToastOpen: () => console.log('Toast Opened'),
+                    onPieToastClose: () => console.log('Toast Closed'),
+                    onPieToastLeadingActionClick: () => console.log('Leading Action Clicked'),
+                }}
+                onPieToastProviderQueueUpdate={handleQueueUpdate}
+            />
+
+            <PieTag
+                data-test-id="toast-queue-length"
+                variant="information"
+                style={{ marginTop: '16px' }}>
+                Toast Queue Length: {queueLength}
+            </PieTag>
+
+            <div style={{ marginTop: '16px', display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
+                <PieButton
+                    data-test-id="info-toast-btn"
+                    onClick={() =>
+                        toaster.create({
+                            message: 'Low Priority Info',
+                            variant: 'info',
+                        })
+                    }
+                >
+                    Trigger Info Toast (Low Priority)
+                </PieButton>
+
+                <PieButton
+                    data-test-id="warning-toast-btn"
+                    onClick={() =>
+                        toaster.create({
+                            message: 'Medium Priority Warning Toast',
+                            variant: 'warning',
+                        })
+                    }
+                >
+                    Trigger Warning Toast (Medium Priority)
+                </PieButton>
+
+                <PieButton
+                    data-test-id="error-toast-btn"
+                    onClick={() =>
+                        toaster.create({
+                            message: 'High Priority Error Toast',
+                            variant: 'error',
+                        })
+                    }
+                >
+                    Trigger Error Toast (High Priority)
+                </PieButton>
+
+                <PieButton
+                    data-test-id="clear-toasts-btn"
+                    variant="secondary"
+                    onClick={() => toaster.clearAll()}>
+                    Clear All Toasts
+                </PieButton>
+            </div>
+        </NavigationLayout>
+    );
+}

nextjs-app-v14/src/app/components/toast/page.tsx

@@ -0,0 +1,10 @@
+import Toast from './toast';
+import { type Metadata } from 'next';
+
+export const metadata: Metadata = {
+    title: 'Toast',
+}
+
+export default function ToastComponent() {
+    return <Toast/>;
+}

nextjs-app-v14/src/app/components/toast/toast.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import NavigationLayout from "@/app/layout/navigation";
+import { PieToast } from '@justeattakeaway/pie-webc/react/toast.js';
+
+export default function Toast() {
+
+    return (
+        <NavigationLayout title="Toast">
+            <PieToast message="This is a message" isDismissible />
+        </NavigationLayout>
+    );
+}

nextjs-app-v14/test/visual/nextjs.spec.js

@@ -26,6 +26,7 @@ describe('NextJS Aperture App', () => {
         { url: '/components/tag', name: 'Tag' },
         { url: '/components/text-input', name: 'Text Input' },
         { url: '/components/textarea', name: 'Textarea' },
+        { url: '/components/toast', name: 'Toast' }
     ];
 
     pages.forEach((page) => {

nuxt-app/package.json

@@ -20,8 +20,8 @@
   },
   "dependencies": {
     "@justeattakeaway/pie-css": "0.13.1",
-    "@justeattakeaway/pie-icons-webc": "1.1.0",
-    "@justeattakeaway/pie-webc": "0.5.59",
+    "@justeattakeaway/pie-icons-webc": "1.2.0",
+    "@justeattakeaway/pie-webc": "0.6.0",
     "just-kebab-case": "4.2.0",
     "nuxt-ssr-lit": "1.6.27"
   },

nuxt-app/pages/components/toast-provider.vue

@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <pie-toast-provider :options="toastOptions"
+      @pie-toast-provider-queue-update="handleQueueUpdate"></pie-toast-provider>
+
+    <pie-tag data-test-id="toast-queue-length" variant="information" style="margin-top: 16px;">
+      Toast Queue Length: {{ queueLength }}
+    </pie-tag>
+
+    <div style="margin-top: 16px; display: flex; gap: 16px; flex-wrap: wrap;">
+      <pie-button data-test-id="info-toast-btn" @click="triggerInfoToast">Trigger Info Toast (Low Priority)</pie-button>
+      <pie-button data-test-id="warning-toast-btn" @click="triggerWarningToast">Trigger Warning Toast (Medium
+        Priority)</pie-button>
+      <pie-button data-test-id="error-toast-btn" @click="triggerErrorToast">Trigger Error Toast (High
+        Priority)</pie-button>
+      <pie-button data-test-id="clear-toasts-btn" variant="secondary" @click="clearToasts">Clear All Toasts</pie-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { definePageMeta } from '#imports';
+import { ref } from 'vue';
+import { toaster } from '@justeattakeaway/pie-webc/components/toast-provider.js';
+import '@justeattakeaway/pie-webc/components/toast-provider.js';
+import '@justeattakeaway/pie-webc/components/button.js';
+import '@justeattakeaway/pie-webc/components/tag.js';
+
+definePageMeta({
+  title: 'Toast Provider',
+});
+
+const toastOptions = ref({
+  isDismissible: true,
+  onPieToastOpen: () => console.log('Toast Opened'),
+  onPieToastClose: () => console.log('Toast Closed'),
+  onPieToastLeadingActionClick: () => console.log('Leading Action Clicked'),
+});
+
+const queueLength = ref(0);
+
+const handleQueueUpdate = (event: CustomEvent) => {
+  queueLength.value = event.detail.length;
+};
+
+const triggerInfoToast = () => {
+  toaster.create({
+    message: 'Low Priority Info',
+    variant: 'info',
+  });
+};
+
+const triggerWarningToast = () => {
+  toaster.create({
+    message: 'Medium Priority Warning Toast',
+    variant: 'warning',
+  });
+};
+
+const triggerErrorToast = () => {
+  toaster.create({
+    message: 'High Priority Error Toast',
+    variant: 'error',
+  });
+};
+
+const clearToasts = () => {
+  toaster.clearAll();
+};
+</script>

nuxt-app/pages/components/toast.vue

@@ -0,0 +1,17 @@
+<template>
+    <div>
+      <pie-toast 
+      message="This is a message"
+      isDismissible></pie-toast>
+    </div>
+  </template>
+
+  <script setup lang="ts">
+  import { definePageMeta } from '#imports';
+  import '@justeattakeaway/pie-webc/components/toast.js';
+  
+  definePageMeta({
+    title: 'Toast',
+  });
+  </script>
+

nuxt-app/pages/index.vue

@@ -27,6 +27,8 @@
       <li><pie-link href="/components/tag">Tag</pie-link></li>
       <li><pie-link href="/components/text-input">Text Input</pie-link></li>
       <li><pie-link href="/components/textarea">Textarea</pie-link></li>
+      <li><pie-link href="/components/toast">Toast</pie-link></li>
+      <li><pie-link href="/components/toast-provider">Toast Provider</pie-link></li>
 		</ul>
 	</div>
 </template>

nuxt-app/test/visual/nuxt.spec.js

@@ -26,6 +26,7 @@ describe('Nuxt Aperture App', () => {
         { url: '/components/tag', name: 'Tag' },
         { url: '/components/text-input', name: 'Text Input' },
         { url: '/components/textarea', name: 'Textarea' },
+        { url: '/components/toast', name: 'Toast' }
     ];
 
     pages.forEach((page) => {

test/playwright/page-objects/toast-provider.page.ts

@@ -0,0 +1,40 @@
+import { type Locator, type Page } from '@playwright/test';
+const { APP_NAME } = process.env;
+
+export class ToastProviderPage {
+    readonly page: Page;
+    readonly infoToastBtn: Locator;
+    readonly warningToastBtn: Locator;
+    readonly errorToastBtn: Locator;
+    readonly clearToastsBtn: Locator;
+    readonly toastQueueLength: Locator;
+
+    constructor(page: Page) {
+        this.page = page;
+        this.infoToastBtn = page.getByTestId('info-toast-btn');
+        this.warningToastBtn = page.getByTestId('warning-toast-btn');
+        this.errorToastBtn = page.getByTestId('error-toast-btn');
+        this.clearToastsBtn = page.getByTestId('clear-toasts-btn');
+        this.toastQueueLength = page.getByTestId('toast-queue-length');
+    }
+
+    async goto() {
+        let url = 'components/toast-provider';
+        const formattedUrl = APP_NAME === 'vanilla-app' ? `${url}.html` : url;
+        await this.page.goto(formattedUrl);
+    }
+
+    async addToastsToQueue() {
+        await this.infoToastBtn.click();
+        await this.warningToastBtn.click();
+        await this.errorToastBtn.click();
+    }
+
+    async clearAllToasts() {
+        await this.clearToastsBtn.click();
+    }
+
+    async getQueueLengthMessage() {
+       return await this.toastQueueLength.textContent();
+    }
+}

test/system/toast-provider.spec.ts

@@ -0,0 +1,32 @@
+import { test, expect } from '@playwright/test';
+import { ToastProviderPage } from '../playwright/page-objects/toast-provider.page';
+
+test.describe(`Toast Provider Page - ${process.env.APP_NAME}`, () => {
+
+    test('should add toasts to the queue', async ({ page }) => {
+        // Arrange
+        const toastProviderPage = new ToastProviderPage(page);
+
+        // Act
+        await toastProviderPage.goto();
+        await toastProviderPage.addToastsToQueue();
+
+        // Assert
+        const queueLengthMessage = await toastProviderPage.getQueueLengthMessage();
+        expect(queueLengthMessage?.trim()).toEqual('Toast Queue Length: 2');
+    });
+
+    test('should clear all toasts from the queue', async ({ page }) => {
+        // Arrange
+        const toastProviderPage = new ToastProviderPage(page);
+
+        // Act
+        await toastProviderPage.goto();
+        await toastProviderPage.addToastsToQueue();
+        await toastProviderPage.clearAllToasts();
+
+        // Assert
+        const queueLengthMessage = await toastProviderPage.getQueueLengthMessage();
+        expect(queueLengthMessage?.trim()).toEqual('Toast Queue Length: 0');
+    });
+});

vanilla-app/components/toast-provider.html

@@ -0,0 +1,6 @@
+<load
+        src="partials/page.html"
+        title="Toast Provider"
+        module="../js/toast-provider.js"
+/>
+

vanilla-app/components/toast.html

@@ -0,0 +1,6 @@
+<load
+        src="partials/page.html"
+        title="Toast"
+        module="../js/toast.js"
+/>
+

vanilla-app/js/index.js

@@ -29,4 +29,6 @@ document.querySelector('#navigation').innerHTML = `
         <li><pie-link href="/components/tag.html">Tag</pie-link></li>
         <li><pie-link href="/components/text-input.html">Text Input</pie-link></li>
         <li><pie-link href="/components/textarea.html">Textarea</pie-link></li>
+        <li><pie-link href="/components/toast.html">Toast</pie-link></li>
+        <li><pie-link href="/components/toast-provider.html">Toast Provider</pie-link></li>
     </ul>`;