diff --git a/.changeset/tiny-eels-play.md b/.changeset/tiny-eels-play.md new file mode 100644 index 0000000000..67002a14d6 --- /dev/null +++ b/.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 diff --git a/apps/pie-docs/src/components/toast/overview/priority-queue.json b/apps/pie-docs/src/components/toast/overview/priority-queue.json index e47860064e..647d8a4838 100644 --- a/apps/pie-docs/src/components/toast/overview/priority-queue.json +++ b/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", diff --git a/apps/pie-storybook/stories/pie-toast-provider.stories.ts b/apps/pie-storybook/stories/pie-toast-provider.stories.ts index f7e026cc80..7455fbb86f 100644 --- a/apps/pie-storybook/stories/pie-toast-provider.stories.ts +++ b/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; -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` - +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` + + + + + Toast Queue Length: 0 + + +
+ { + 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.create({ + message: 'Actionable Info Toast', + variant: 'info', + leadingAction: { text: 'Retry' }, + }); + }}> + Trigger Actionable Info Toast + + + { + toaster.create({ + message: 'Persistent Toast', + duration: null, + }); + }}> + Trigger Persistent Toast + + + { + toaster.clearAll(); + }}> + Clear All Toasts + +
`; +}; export const Default = createStory(Template, defaultArgs)(); diff --git a/apps/pie-storybook/stories/testing/pie-chip.test.stories.ts b/apps/pie-storybook/stories/testing/pie-chip.test.stories.ts index 94ea4192ba..675e1fc87e 100644 --- a/apps/pie-storybook/stories/testing/pie-chip.test.stories.ts +++ b/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 = ({ aria, diff --git a/apps/pie-storybook/stories/testing/pie-toast-provider.test.stories.ts b/apps/pie-storybook/stories/testing/pie-toast-provider.test.stories.ts new file mode 100644 index 0000000000..b9707d4965 --- /dev/null +++ b/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; + +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` + + +`; + +export const Default = createStory(Template, defaultArgs)(); diff --git a/packages/components/pie-toast-provider/package.json b/packages/components/pie-toast-provider/package.json index b19ba8a56b..b1a28326dd 100644 --- a/packages/components/pie-toast-provider/package.json +++ b/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": { diff --git a/packages/components/pie-toast-provider/playwright-lit-visual.config.ts b/packages/components/pie-toast-provider/playwright-lit-visual.config.ts index fb0f14c480..2fd82d7d5f 100644 --- a/packages/components/pie-toast-provider/playwright-lit-visual.config.ts +++ b/packages/components/pie-toast-provider/playwright-lit-visual.config.ts @@ -1,4 +1,4 @@ -import { defineConfig } from '@sand4rt/experimental-ct-web'; -import { getPlaywrightVisualConfig } from '@justeattakeaway/pie-components-config'; +import { defineConfig } from '@playwright/test'; +import { getPlaywrightNativeVisualConfig } from '@justeattakeaway/pie-components-config'; -export default defineConfig(getPlaywrightVisualConfig()); +export default defineConfig(getPlaywrightNativeVisualConfig()); diff --git a/packages/components/pie-toast-provider/playwright-lit.config.ts b/packages/components/pie-toast-provider/playwright-lit.config.ts index e50b9373b3..6dcc0f833d 100644 --- a/packages/components/pie-toast-provider/playwright-lit.config.ts +++ b/packages/components/pie-toast-provider/playwright-lit.config.ts @@ -1,4 +1,4 @@ -import { defineConfig } from '@sand4rt/experimental-ct-web'; -import { getPlaywrightConfig } from '@justeattakeaway/pie-components-config'; +import { defineConfig } from '@playwright/test'; +import { getPlaywrightNativeConfig } from '@justeattakeaway/pie-components-config'; -export default defineConfig(getPlaywrightConfig()); +export default defineConfig(getPlaywrightNativeConfig()); diff --git a/packages/components/pie-toast-provider/src/defs.ts b/packages/components/pie-toast-provider/src/defs.ts index e9a5c00337..f4475c7b98 100644 --- a/packages/components/pie-toast-provider/src/defs.ts +++ b/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; +} + +export type DefaultProps = ComponentDefaultProps; + +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'; diff --git a/packages/components/pie-toast-provider/src/index.ts b/packages/components/pie-toast-provider/src/index.ts index b9bc7e79fa..8d9842df49 100644 --- a/packages/components/pie-toast-provider/src/index.ts +++ b/packages/components/pie-toast-provider/src/index.ts @@ -1,20 +1,143 @@ -import { LitElement, html, unsafeCSS } from 'lit'; -import { RtlMixin, defineCustomElement } from '@justeattakeaway/pie-webc-core'; - +import { + LitElement, + html, + nothing, + unsafeCSS, + type PropertyValues, +} from 'lit'; +import { state, property } from 'lit/decorators.js'; +import { ifDefined } from 'lit/directives/if-defined.js'; +import { + RtlMixin, + defineCustomElement, + dispatchCustomEvent, +} from '@justeattakeaway/pie-webc-core'; +import '@justeattakeaway/pie-toast'; import styles from './toast-provider.scss?inline'; -import { type ToastProviderProps } from './defs'; +import { + defaultProps, + PRIORITY_ORDER, + type ToastProviderProps, + type ExtendedToastProps, + ON_TOAST_PROVIDER_QUEUE_UPDATE_EVENT, +} from './defs'; // Valid values available to consumers export * from './defs'; +export { toaster } from './toaster'; const componentSelector = 'pie-toast-provider'; /** * @tagname pie-toast-provider + * @event {CustomEvent} pie-toast-provider-queue-update - when a toast is added or removed from the queue. */ export class PieToastProvider extends RtlMixin(LitElement) implements ToastProviderProps { + @state() + private _toasts: ExtendedToastProps[] = []; + + @state() + private _currentToast: ExtendedToastProps | null = null; + + @property({ type: Object }) + public options = defaultProps.options; + + updated (changedProperties: PropertyValues): void { + if (changedProperties.has('_toasts' as keyof PieToastProvider)) { + this._dispatchQueueUpdateEvent(); + } + } + + private _dispatchQueueUpdateEvent (): void { + dispatchCustomEvent( + this, ON_TOAST_PROVIDER_QUEUE_UPDATE_EVENT, + this._toasts, + ); + } + + /** + * Get the priority for a toast. + * @param {string} type - The variant type of the toast. + * @param {boolean} hasAction - Whether the toast has an action. + * @returns {number} - The priority based on the variant and action. + */ + private getPriority (type: ExtendedToastProps['variant'], hasAction: boolean): number { + const key = `${type}${hasAction ? '-actionable' : ''}`; + return PRIORITY_ORDER[key]; + } + + /** + * Handles the dismissal of the current toast and displays the next one in the queue (if any). + */ + private _dismissToast () { + this._currentToast?.onPieToastClose?.(); + this._currentToast = null; + requestAnimationFrame(() => { this._showNextToast(); }); + } + + /** + * Displays the next toast in the queue, if available. + */ + private _showNextToast () { + if (this._toasts.length > 0) { + const [nextToast, ...remainingToasts] = this._toasts; + this._currentToast = nextToast; + this._toasts = remainingToasts; + } else { + this._currentToast = null; + } + } + + /** + * Adds a new toast to the queue and triggers its display if no toast is currently active. + * @param {ToastProps} toast - The toast props to display. + */ + public createToast (toast: ExtendedToastProps) { + const newToast = { ...this.options, ...toast }; + + this._toasts = [...this._toasts, newToast].sort((a, b) => { + const priorityB = this.getPriority(b.variant, !!b.leadingAction?.text); + const priorityA = this.getPriority(a.variant, !!a.leadingAction?.text); + + return priorityA - priorityB; + }); + + if (!this._currentToast) { + this._showNextToast(); + } + } + + /** + * + * Clears all toasts from the queue and dismisses the currently visible toast. + */ + public clearToasts () { + this._toasts = []; + this._currentToast = null; + } + render () { - return html`

Hello world!

`; + const { _currentToast, _dismissToast } = this; + + return html` +
+ ${_currentToast && + html` + + + `} +
+ `; } // Renders a `CSSResult` generated from SCSS by Vite @@ -28,3 +151,4 @@ declare global { [componentSelector]: PieToastProvider; } } + diff --git a/packages/components/pie-toast-provider/src/toast-provider.scss b/packages/components/pie-toast-provider/src/toast-provider.scss index 6ffaedad64..fa5c53d152 100644 --- a/packages/components/pie-toast-provider/src/toast-provider.scss +++ b/packages/components/pie-toast-provider/src/toast-provider.scss @@ -1 +1,15 @@ @use '@justeattakeaway/pie-css/scss' as p; +@use '@justeattakeaway/pie-css/scss/settings' as *; + + +.c-toast-provider { + --toast-provider-offset: var(--dt-spacing-d); + + position: absolute; + inset-inline-start: var(--toast-provider-offset); + inset-block-end: var(--toast-provider-offset); + + @include media('>md') { + --toast-offset: var(--dt-spacing-e); + } +} \ No newline at end of file diff --git a/packages/components/pie-toast-provider/src/toaster.ts b/packages/components/pie-toast-provider/src/toaster.ts new file mode 100644 index 0000000000..d10fef4a5f --- /dev/null +++ b/packages/components/pie-toast-provider/src/toaster.ts @@ -0,0 +1,35 @@ +import { type PieToastProvider } from './index'; +import { type ExtendedToastProps } from './defs'; + +/** + * Singleton toaster interface for global access. + */ +export const toaster = { + _getToastProvider (): PieToastProvider | null { + const toastProviders = document.querySelectorAll('pie-toast-provider'); + + if (toastProviders.length === 0) { + console.error('The pie-toast component requires a pie-toast-provider element present in the DOM.'); + return null; + } + + if (toastProviders.length > 1) { + console.error('Multiple pie-toast-provider are found in the DOM. Only one provider is supported currently and should be registered at the root of the app.'); + return null; + } + + return toastProviders[0]; + }, + create (toast: ExtendedToastProps) { + const toastProvider = this._getToastProvider(); + if (!toastProvider) return; + + toastProvider.createToast(toast); + }, + clearAll () { + const toastProvider = this._getToastProvider(); + if (!toastProvider) return; + + toastProvider.clearToasts(); + }, +}; diff --git a/packages/components/pie-toast-provider/test/accessibility/pie-toast-provider.spec.ts b/packages/components/pie-toast-provider/test/accessibility/pie-toast-provider.spec.ts index 4b28a77e21..7f8bc71269 100644 --- a/packages/components/pie-toast-provider/test/accessibility/pie-toast-provider.spec.ts +++ b/packages/components/pie-toast-provider/test/accessibility/pie-toast-provider.spec.ts @@ -1,9 +1,10 @@ -import { test, expect } from '@justeattakeaway/pie-webc-testing/src/playwright/webc-fixtures.ts'; -import { PieToastProvider } from '../../src/index.ts'; +import { test, expect } from '@justeattakeaway/pie-webc-testing/src/playwright/playwright-fixtures.ts'; +import { BasePage } from '@justeattakeaway/pie-webc-testing/src/helpers/page-object/base-page.ts'; test.describe('PieToastProvider - Accessibility tests', () => { - test('a11y - should test the PieToastProvider component WCAG compliance', async ({ makeAxeBuilder, mount }) => { - await mount(PieToastProvider); + test('a11y - should test the PieToastProvider component WCAG compliance', async ({ makeAxeBuilder, page }) => { + const pieToastProviderPage = new BasePage(page, 'toast-provider--default'); + await pieToastProviderPage.load(); const results = await makeAxeBuilder().analyze(); diff --git a/packages/components/pie-toast-provider/test/component/pie-toast-provider.spec.ts b/packages/components/pie-toast-provider/test/component/pie-toast-provider.spec.ts index 26ce1fc31a..d426b5769c 100644 --- a/packages/components/pie-toast-provider/test/component/pie-toast-provider.spec.ts +++ b/packages/components/pie-toast-provider/test/component/pie-toast-provider.spec.ts @@ -1,17 +1,147 @@ -import { test, expect } from '@sand4rt/experimental-ct-web'; -import { PieToastProvider } from '../../src/index.ts'; +import { test, expect } from '@playwright/test'; +import { BasePage } from '@justeattakeaway/pie-webc-testing/src/helpers/page-object/base-page.ts'; -const componentSelector = '[data-test-id="pie-toast-provider"]'; +import { type PieToastProvider } from 'src/index.ts'; +import { + PRIORITY_ORDER, + type ExtendedToastProps, +} from '../../src/defs.ts'; + +import { toastProvider } from '../helpers/page-object/selectors.ts'; test.describe('PieToastProvider - Component tests', () => { - test('should render successfully', async ({ mount, page }) => { + let toastsQueue: ExtendedToastProps[] = []; + + test.beforeEach(({ page }) => { + // Set up a listener for the queue update log + page.on('console', async (message) => { + if (message.text().includes('toast provider queue:')) { + toastsQueue = await message.args()[1].jsonValue(); + } + }); + }); + + test('should render successfully', async ({ page }) => { // Arrange - await mount(PieToastProvider); + const pieToastProviderPage = new BasePage(page, 'toast-provider--default'); + await pieToastProviderPage.load(); // Act - const toastProvider = page.locator(componentSelector); + const toastProviderComponent = page.locator(toastProvider.selectors.container.dataTestId); // Assert - expect(toastProvider).toBeVisible(); + await expect(toastProviderComponent).toBeDefined(); + }); + + test.describe('Priority Order Tests', () => { + test('should handle toast priority correctly', async ({ page }) => { + // Arrange + const pieToastProviderPage = new BasePage(page, 'toast-provider--default'); + await pieToastProviderPage.load(); + + // Act + await page.evaluate(() => { + const toastProvider = document.querySelector('pie-toast-provider') as PieToastProvider; + + toastProvider.createToast({ + message: 'Neutral toast (Priority 10)', + variant: 'neutral', + }); + + toastProvider.createToast({ + message: 'Success toast with action (Priority 4)', + variant: 'success', + leadingAction: { text: 'Action' }, + }); + + toastProvider.createToast({ + message: 'Info toast with action (Priority 5)', + variant: 'info', + leadingAction: { text: 'Action' }, + }); + + toastProvider.createToast({ + message: 'Error toast (Priority 2)', + variant: 'error', + }); + }); + + // Assert + const queueVariants = toastsQueue.map((toast: ExtendedToastProps) => `${toast.variant}${toast.leadingAction ? '-actionable' : ''}`); + for (let i = 1; i < queueVariants.length; i++) { + const prevPriority = PRIORITY_ORDER[queueVariants[i - 1]]; + const currPriority = PRIORITY_ORDER[queueVariants[i]]; + expect(currPriority).toBeGreaterThanOrEqual(prevPriority); // Ensure the current has a higher priority + } + }); + + test('should clear all toasts when clearToasts is called', async ({ page }) => { + // Arrange + const pieToastProviderPage = new BasePage(page, 'toast-provider--default'); + await pieToastProviderPage.load(); + + // Act + await page.evaluate(() => { + const toastProvider = document.querySelector('pie-toast-provider') as PieToastProvider; + + toastProvider.createToast({ message: 'Toast 1', variant: 'neutral' }); + toastProvider.createToast({ message: 'Toast 2', variant: 'success' }); + + toastProvider.clearToasts(); + }); + + // Assert + await expect(toastsQueue.length).toBe(0); + }); + }); + + test.describe('Props', () => { + test.describe('options', () => { + test('should apply global options to all toasts when options are passed', async ({ page }) => { + // Arrange + const pieToastProviderPage = new BasePage(page, 'toast-provider--default'); + await pieToastProviderPage.load({ + options: { + variant: 'neutral', + isDismissible: true, + }, + }); + + // Act + await page.evaluate(() => { + const toastProvider = document.querySelector('pie-toast-provider') as PieToastProvider; + toastProvider.createToast({ message: 'Toast 1' }); + toastProvider.createToast({ message: 'Toast 2' }); + }); + + // Assert + toastsQueue.forEach((toast) => { + expect(toast.isDismissible).toBeTruthy(); + expect(toast.variant).toBe('neutral'); + }); + }); + + test('should respect individual toast overrides when provided', async ({ page }) => { + const pieToastProviderPage = new BasePage(page, 'toast-provider--default'); + await pieToastProviderPage.load({ + options: { + duration: null, + isDismissible: true, + }, + }); + + // Act + await page.evaluate(() => { + const toastProvider = document.querySelector('pie-toast-provider') as PieToastProvider; + toastProvider.createToast({ message: 'Toast 1' }); + toastProvider.createToast({ message: 'Toast 2' }); + toastProvider.createToast({ message: 'Toast 3', isDismissible: false }); + }); + + // Assert + expect(toastsQueue[0].isDismissible).toBeTruthy(); // Global option should apply + expect(toastsQueue[1].isDismissible).toBeFalsy(); // Override should take precedence + }); + }); }); }); diff --git a/packages/components/pie-toast-provider/test/helpers/page-object/selectors.ts b/packages/components/pie-toast-provider/test/helpers/page-object/selectors.ts new file mode 100644 index 0000000000..3a3bcab6da --- /dev/null +++ b/packages/components/pie-toast-provider/test/helpers/page-object/selectors.ts @@ -0,0 +1,11 @@ +const toastProvider = { + selectors: { + container: { + description: 'The selector for the toast provider container', + dataTestId: 'pie-toast-provider', + }, + }, +}; +export { + toastProvider, +}; diff --git a/packages/components/pie-toast-provider/test/visual/pie-toast-provider.spec.ts b/packages/components/pie-toast-provider/test/visual/pie-toast-provider.spec.ts index 63dd54df0a..3cfe499933 100644 --- a/packages/components/pie-toast-provider/test/visual/pie-toast-provider.spec.ts +++ b/packages/components/pie-toast-provider/test/visual/pie-toast-provider.spec.ts @@ -1,10 +1,15 @@ -import { test } from '@sand4rt/experimental-ct-web'; +import { test } from '@playwright/test'; import percySnapshot from '@percy/playwright'; -import { PieToastProvider } from '../../src/index.ts'; +import { BasePage } from '@justeattakeaway/pie-webc-testing/src/helpers/page-object/base-page.ts'; test.describe('PieToastProvider - Visual tests`', () => { - test('should display the PieToastProvider component successfully', async ({ page, mount }) => { - await mount(PieToastProvider); + test('should display the PieToastProvider component successfully', async ({ page }) => { + const basePage = new BasePage(page, 'toast-provider--default'); + + basePage.load(); + + // Follow up to remove in Jan + await page.waitForTimeout(5000); await percySnapshot(page, 'PieToastProvider - Visual Test'); }); diff --git a/packages/components/pie-toast/src/toast.scss b/packages/components/pie-toast/src/toast.scss index 050e162fdc..46b3324060 100644 --- a/packages/components/pie-toast/src/toast.scss +++ b/packages/components/pie-toast/src/toast.scss @@ -1,5 +1,4 @@ @use '@justeattakeaway/pie-css/scss' as p; -@use '@justeattakeaway/pie-css/scss/settings' as *; .c-toast { --toast-border-radius: var(--dt-radius-rounded-b); @@ -8,13 +7,9 @@ --toast-font-size: #{p.font-size(--dt-font-body-s-size)}; --toast-line-height: #{p.line-height(--dt-font-body-s-line-height)}; --toast-icon-fill: var(--dt-color-content-default); - --toast-offset: var(--dt-spacing-d); --toast-translate-start: -100%; --toast-translate-end: 0; - position: absolute; - inset-inline-start: var(--toast-offset); - inset-block-end: var(--toast-offset); display: flex; flex-direction: column; justify-content: center; @@ -33,10 +28,6 @@ transition-property: all; transition-duration: var(--dt-motion-timing-100); transition-timing-function: var(--dt-motion-easing-in); - - @include media('>md') { - --toast-offset: var(--dt-spacing-e); - } } .c-toast--rtl { diff --git a/yarn.lock b/yarn.lock index 70eb806ffc..c840eda311 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4766,6 +4766,17 @@ __metadata: languageName: unknown linkType: soft +"@justeattakeaway/pie-button@npm:1.0.0": + version: 1.0.0 + resolution: "@justeattakeaway/pie-button@npm:1.0.0" + dependencies: + "@justeattakeaway/pie-spinner": 1.0.0 + "@justeattakeaway/pie-webc-core": 0.24.2 + element-internals-polyfill: 1.3.11 + checksum: 6607c2ce5339538a6955e9c93c0332edf236ca3fcf21434dca968f28aeaaedd675334f9467e8dafb9e375b24302ba0cb131e805e28dfe3b584a28cb052db1482 + languageName: node + linkType: hard + "@justeattakeaway/pie-card@0.21.3, @justeattakeaway/pie-card@workspace:packages/components/pie-card": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-card@workspace:packages/components/pie-card" @@ -4906,6 +4917,17 @@ __metadata: languageName: unknown linkType: soft +"@justeattakeaway/pie-icon-button@npm:1.0.0": + version: 1.0.0 + resolution: "@justeattakeaway/pie-icon-button@npm:1.0.0" + dependencies: + "@justeattakeaway/pie-icons-webc": 1.1.0 + "@justeattakeaway/pie-spinner": 1.0.0 + "@justeattakeaway/pie-webc-core": 0.24.2 + checksum: 12cc22907d87218d102fd1e243c82f0ac20c437ec864c955d39585ebf6cb611fbf771a86f9fb2a5f5943b4006a35821d9f64e17387d6750adf02b9ca85bd032e + languageName: node + linkType: hard + "@justeattakeaway/pie-icons-configs@4.5.1, @justeattakeaway/pie-icons-configs@workspace:packages/tools/pie-icons-configs": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-icons-configs@workspace:packages/tools/pie-icons-configs" @@ -4974,6 +4996,15 @@ __metadata: languageName: unknown linkType: soft +"@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@5.3.0, @justeattakeaway/pie-icons@workspace:packages/tools/pie-icons": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-icons@workspace:packages/tools/pie-icons" @@ -5181,6 +5212,7 @@ __metadata: "@custom-elements-manifest/analyzer": 0.9.0 "@justeattakeaway/pie-components-config": 0.18.0 "@justeattakeaway/pie-css": 0.13.1 + "@justeattakeaway/pie-toast": 0.5.0 "@justeattakeaway/pie-webc-core": 0.24.2 cem-plugin-module-file-extensions: 0.0.5 languageName: unknown @@ -5201,6 +5233,18 @@ __metadata: languageName: unknown linkType: soft +"@justeattakeaway/pie-toast@npm:0.5.0": + version: 0.5.0 + resolution: "@justeattakeaway/pie-toast@npm:0.5.0" + dependencies: + "@justeattakeaway/pie-button": 1.0.0 + "@justeattakeaway/pie-icon-button": 1.0.0 + "@justeattakeaway/pie-icons-webc": 1.1.0 + "@justeattakeaway/pie-webc-core": 0.24.2 + checksum: ce9bf157922006d4debe8e004b8950e6d461e539f02760969930085ebfed7d023fef23c746be51e28da3f002a747f45b0ba27a646b7c1b971950caab8596b1a2 + languageName: node + linkType: hard + "@justeattakeaway/pie-webc-core@0.24.2, @justeattakeaway/pie-webc-core@workspace:packages/components/pie-webc-core": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-webc-core@workspace:packages/components/pie-webc-core"