diff --git a/nextjs-app-v14/package.json b/nextjs-app-v14/package.json index e882fdb0..23f120d8 100644 --- a/nextjs-app-v14/package.json +++ b/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", diff --git a/nextjs-app-v14/src/app/components/home-page.tsx b/nextjs-app-v14/src/app/components/home-page.tsx index b4890f70..926db888 100644 --- a/nextjs-app-v14/src/app/components/home-page.tsx +++ b/nextjs-app-v14/src/app/components/home-page.tsx @@ -37,6 +37,8 @@ export default function HomePage() {
  • router.push('/components/tag')} tag="button">Tag
  • router.push('/components/text-input')} tag="button">Text Input
  • router.push('/components/textarea')} tag="button">Textarea
    • +
  • router.push('/components/toast')} tag="button">Toast
    • +
  • router.push('/components/toast-provider')} tag="button">Toast Provider
    • ); diff --git a/nextjs-app-v14/src/app/components/toast-provider/page.tsx b/nextjs-app-v14/src/app/components/toast-provider/page.tsx new file mode 100644 index 00000000..1ca84ec9 --- /dev/null +++ b/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 ; +} diff --git a/nextjs-app-v14/src/app/components/toast-provider/toast-provider.tsx b/nextjs-app-v14/src/app/components/toast-provider/toast-provider.tsx new file mode 100644 index 00000000..18eefc40 --- /dev/null +++ b/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 ( + + console.log('Toast Opened'), + onPieToastClose: () => console.log('Toast Closed'), + onPieToastLeadingActionClick: () => console.log('Leading Action Clicked'), + }} + onPieToastProviderQueueUpdate={handleQueueUpdate} + /> + + + Toast Queue Length: {queueLength} + + +
    + + toaster.create({ + message: 'Low Priority Info', + variant: 'info', + }) + } + > + Trigger Info Toast (Low Priority) + + + + toaster.create({ + message: 'Medium Priority Warning Toast', + variant: 'warning', + }) + } + > + Trigger Warning Toast (Medium Priority) + + + + toaster.create({ + message: 'High Priority Error Toast', + variant: 'error', + }) + } + > + Trigger Error Toast (High Priority) + + + toaster.clearAll()}> + Clear All Toasts + +
    +     + ); +} diff --git a/nextjs-app-v14/src/app/components/toast/page.tsx b/nextjs-app-v14/src/app/components/toast/page.tsx new file mode 100644 index 00000000..2febc1d9 --- /dev/null +++ b/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 ; +} diff --git a/nextjs-app-v14/src/app/components/toast/toast.tsx b/nextjs-app-v14/src/app/components/toast/toast.tsx new file mode 100644 index 00000000..b4b9a818 --- /dev/null +++ b/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 ( + + + + ); +} diff --git a/nextjs-app-v14/test/visual/nextjs.spec.js b/nextjs-app-v14/test/visual/nextjs.spec.js index a5ec5bc8..aaacaf95 100644 --- a/nextjs-app-v14/test/visual/nextjs.spec.js +++ b/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) => { diff --git a/nuxt-app/package.json b/nuxt-app/package.json index c385cb43..7946eca6 100644 --- a/nuxt-app/package.json +++ b/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" }, diff --git a/nuxt-app/pages/components/toast-provider.vue b/nuxt-app/pages/components/toast-provider.vue new file mode 100644 index 00000000..22fbfb61 --- /dev/null +++ b/nuxt-app/pages/components/toast-provider.vue @@ -0,0 +1,70 @@ + + + \ No newline at end of file diff --git a/nuxt-app/pages/components/toast.vue b/nuxt-app/pages/components/toast.vue new file mode 100644 index 00000000..dea950a5 --- /dev/null +++ b/nuxt-app/pages/components/toast.vue @@ -0,0 +1,17 @@ + + + + \ No newline at end of file diff --git a/nuxt-app/pages/index.vue b/nuxt-app/pages/index.vue index 9d7da453..2a87d465 100644 --- a/nuxt-app/pages/index.vue +++ b/nuxt-app/pages/index.vue @@ -27,6 +27,8 @@
  • Tag
  • Text Input
  • Textarea
    • +
  • Toast
    • +
  • Toast Provider
    • diff --git a/nuxt-app/test/visual/nuxt.spec.js b/nuxt-app/test/visual/nuxt.spec.js index 9aa099f6..fcad84f5 100644 --- a/nuxt-app/test/visual/nuxt.spec.js +++ b/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) => { diff --git a/test/playwright/page-objects/toast-provider.page.ts b/test/playwright/page-objects/toast-provider.page.ts new file mode 100644 index 00000000..a5184abf --- /dev/null +++ b/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(); + } +} \ No newline at end of file diff --git a/test/system/toast-provider.spec.ts b/test/system/toast-provider.spec.ts new file mode 100644 index 00000000..a6b94c12 --- /dev/null +++ b/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'); + }); +}); diff --git a/vanilla-app/components/toast-provider.html b/vanilla-app/components/toast-provider.html new file mode 100644 index 00000000..fecb51c6 --- /dev/null +++ b/vanilla-app/components/toast-provider.html @@ -0,0 +1,6 @@ + + diff --git a/vanilla-app/components/toast.html b/vanilla-app/components/toast.html new file mode 100644 index 00000000..64ca6d8d --- /dev/null +++ b/vanilla-app/components/toast.html @@ -0,0 +1,6 @@ + + diff --git a/vanilla-app/js/index.js b/vanilla-app/js/index.js index ba33dd6c..30edfe4b 100644 --- a/vanilla-app/js/index.js +++ b/vanilla-app/js/index.js @@ -29,4 +29,6 @@ document.querySelector('#navigation').innerHTML = `
  • Tag
  • Text Input
  • Textarea
    • +
  • Toast
    • +
  • Toast Provider
    • `; diff --git a/vanilla-app/js/toast-provider.js b/vanilla-app/js/toast-provider.js new file mode 100644 index 00000000..cfadaf1c --- /dev/null +++ b/vanilla-app/js/toast-provider.js @@ -0,0 +1,83 @@ +import '@justeattakeaway/pie-webc/components/toast-provider.js'; +import '@justeattakeaway/pie-webc/components/button.js'; +import '@justeattakeaway/pie-webc/components/tag.js'; +import { toaster } from '@justeattakeaway/pie-webc/components/toast-provider.js'; + +import './utils/navigation.js'; +import './shared.js'; + +document.querySelector('#app').innerHTML = ` + + + + Toast Queue Length: 0 + + +
    + + Trigger Info Toast + + + Trigger Warning Toast + + + Trigger Error Toast + + + Clear All Toasts + +
    +`; + +let queueLength = 0; +const toastProvider = document.getElementById('toast-provider'); +const queueLengthTag = document.getElementById('toast-queue-length'); + + +toastProvider.addEventListener('pie-toast-open', () => { + console.log('Toast Opened'); +}); + +toastProvider.addEventListener('pie-toast-close', () => { + console.log('Toast Closed'); +}); + +toastProvider.addEventListener('pie-toast-leading-action-click', () => { + console.log('Leading Action Clicked'); +}); + +/** + * Queue update event - update the displayed queue length + */ +toastProvider.addEventListener('pie-toast-provider-queue-update', (event) => { + queueLength = event.detail.length || 0; + queueLengthTag.textContent = `Toast Queue Length: ${queueLength}`; +}); + +/** + * Button events + */ +document.getElementById('info-toast-btn').addEventListener('click', () => { + toaster.create({ + message: 'This is an info toast (Low Priority)', + variant: 'info' + }); +}); + +document.getElementById('warning-toast-btn').addEventListener('click', () => { + toaster.create({ + message: 'This is a warning toast (Medium Priority)', + variant: 'warning' + }); +}); + +document.getElementById('error-toast-btn').addEventListener('click', () => { + toaster.create({ + message: 'This is an error toast (High Priority)', + variant: 'error' + }); +}); + +document.getElementById('clear-toasts-btn').addEventListener('click', () => { + toaster.clearAll(); +}); diff --git a/vanilla-app/js/toast.js b/vanilla-app/js/toast.js new file mode 100644 index 00000000..590827c5 --- /dev/null +++ b/vanilla-app/js/toast.js @@ -0,0 +1,7 @@ +import '@justeattakeaway/pie-webc/components/toast.js'; + +import './utils/navigation.js'; +import './shared.js'; + +document.querySelector('#app').innerHTML = ` + `; \ No newline at end of file diff --git a/vanilla-app/package.json b/vanilla-app/package.json index 07431f07..c790b5b9 100644 --- a/vanilla-app/package.json +++ b/vanilla-app/package.json @@ -19,8 +19,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" }, "installConfig": { "hoistingLimits": "workspaces" diff --git a/vanilla-app/test/visual/vanilla.spec.js b/vanilla-app/test/visual/vanilla.spec.js index d1633270..d4ba36fc 100644 --- a/vanilla-app/test/visual/vanilla.spec.js +++ b/vanilla-app/test/visual/vanilla.spec.js @@ -26,6 +26,7 @@ describe('Vanilla Aperture App', () => { { url: '/components/tag.html', name: 'Tag' }, { url: '/components/text-input.html', name: 'Text Input' }, { url: '/components/textarea.html', name: 'Textarea' }, + { url: '/components/toast.html', name: 'Toast' } ]; pages.forEach((page) => { diff --git a/yarn.lock b/yarn.lock index b9dddd47..708752d3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1214,15 +1214,6 @@ __metadata: languageName: node linkType: hard -"@justeattakeaway/pie-icons-webc@npm:1.1.0": - version: 1.1.0 - resolution: "@justeattakeaway/pie-icons-webc@npm:1.1.0" - dependencies: - "@justeattakeaway/pie-webc-core": 0.24.2 - checksum: eb9ed23cb3dcd65883bc5ee3e7cbf9798e4fd13ebb06c79165122deafa337ae0a2f4d5a1405c3984a7a8663d376520541e053bfcce7b981025e0c43c242a4a0c - languageName: node - linkType: hard - "@justeattakeaway/pie-icons-webc@npm:1.2.0": version: 1.2.0 resolution: "@justeattakeaway/pie-icons-webc@npm:1.2.0" @@ -1357,24 +1348,25 @@ __metadata: languageName: node linkType: hard -"@justeattakeaway/pie-toast-provider@npm:0.0.0": - version: 0.0.0 - resolution: "@justeattakeaway/pie-toast-provider@npm:0.0.0" +"@justeattakeaway/pie-toast-provider@npm:0.1.0": + version: 0.1.0 + resolution: "@justeattakeaway/pie-toast-provider@npm:0.1.0" dependencies: + "@justeattakeaway/pie-toast": 0.6.0 "@justeattakeaway/pie-webc-core": 0.24.2 - checksum: a1263498229a3434326ab56f56fbbb80a90e5d0561f5d8d7f4ad54d9495b21680f147a3067ad5ba76d45fe1fef7857b56de9dfcdf1b6d158ef778869491eea89 + checksum: 5243ff73af33c077d7f6f6db67b6642d71e02b4049329e87e4f05f7ad515423ff69aa7a280aae4c4147921dbad3886295fea7c231a7212732ca14096d37c2f67 languageName: node linkType: hard -"@justeattakeaway/pie-toast@npm:0.5.2": - version: 0.5.2 - resolution: "@justeattakeaway/pie-toast@npm:0.5.2" +"@justeattakeaway/pie-toast@npm:0.6.0": + version: 0.6.0 + resolution: "@justeattakeaway/pie-toast@npm:0.6.0" dependencies: "@justeattakeaway/pie-button": 1.1.0 "@justeattakeaway/pie-icon-button": 1.1.0 "@justeattakeaway/pie-icons-webc": 1.2.0 "@justeattakeaway/pie-webc-core": 0.24.2 - checksum: f9690f8bcb044e41adc155cf7c4bce6f0ec0ec10aa65979d67427013d69ff7266962970ef85b5bddd8521f1225dfde018bf34eb17707530aeaf85eabfe7ba576 + checksum: 786412975e3eafc50a62d5f6f290f37733008ecbd2f360c4b5f937e7e2d306b719e88f6e35bae5c1fd4c2f6109e3ed8554139dad528ff3b357789407ae0bc71a languageName: node linkType: hard @@ -1387,9 +1379,9 @@ __metadata: languageName: node linkType: hard -"@justeattakeaway/pie-webc@npm:0.5.59": - version: 0.5.59 - resolution: "@justeattakeaway/pie-webc@npm:0.5.59" +"@justeattakeaway/pie-webc@npm:0.6.0": + version: 0.6.0 + resolution: "@justeattakeaway/pie-webc@npm:0.6.0" dependencies: "@justeattakeaway/pie-assistive-text": 0.8.1 "@justeattakeaway/pie-button": 1.1.0 @@ -1413,11 +1405,11 @@ __metadata: "@justeattakeaway/pie-text-input": 0.24.6 "@justeattakeaway/pie-textarea": 0.13.1 "@justeattakeaway/pie-thumbnail": 0.1.0 - "@justeattakeaway/pie-toast": 0.5.2 - "@justeattakeaway/pie-toast-provider": 0.0.0 + "@justeattakeaway/pie-toast": 0.6.0 + "@justeattakeaway/pie-toast-provider": 0.1.0 bin: add-components: src/index.js - checksum: cf71c943b48c86976f51d15070a471c2be97cc1e4fb5bab8b458b48980b1691fe727b7c9f1343a74b3efd2a469e489618554841f4f436e699d43e15755f094a0 + checksum: 14ba7b5efa939d2708855fd53702da34fe6c3a2fdadf8bb1310312b3c7fbe44141ec6c24a6f46b10d74683d6d0d659387323893bf4a5ba8866b37ee586472006 languageName: node linkType: hard @@ -9991,8 +9983,8 @@ __metadata: resolution: "nextjs-app-v14@workspace:nextjs-app-v14" 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 "@types/node": 20.17.9 @@ -10308,8 +10300,8 @@ __metadata: resolution: "nuxt-app@workspace:nuxt-app" 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 deepmerge: 4.3.1 just-kebab-case: 4.2.0 nuxt: 3.14.1592 @@ -13858,8 +13850,8 @@ __metadata: resolution: "vanilla-app@workspace:vanilla-app" 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 deepmerge: 4.3.1 vite: 4.5.5 vite-plugin-html-inject: 1.1.2