From c99084118d356cf8e51a563d1a15a7f30c7dd014 Mon Sep 17 00:00:00 2001 From: Jose De Freitas Jr Date: Tue, 13 Aug 2024 10:47:21 -0600 Subject: [PATCH 01/19] feat(pie-toast): DSW-2204 updated lockfile --- yarn.lock | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/yarn.lock b/yarn.lock index 106a553da8..07c5c123de 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5592,7 +5592,7 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-form-label@0.13.6, @justeattakeaway/pie-form-label@workspace:packages/components/pie-form-label": +"@justeattakeaway/pie-form-label@0.14.0, @justeattakeaway/pie-form-label@workspace:packages/components/pie-form-label": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-form-label@workspace:packages/components/pie-form-label" dependencies: @@ -5819,14 +5819,14 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-textarea@0.5.0, @justeattakeaway/pie-textarea@workspace:packages/components/pie-textarea": +"@justeattakeaway/pie-textarea@0.6.0, @justeattakeaway/pie-textarea@workspace:packages/components/pie-textarea": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-textarea@workspace:packages/components/pie-textarea" dependencies: "@custom-elements-manifest/analyzer": 0.9.0 "@justeattakeaway/pie-components-config": 0.16.0 "@justeattakeaway/pie-css": 0.12.1 - "@justeattakeaway/pie-form-label": 0.13.6 + "@justeattakeaway/pie-form-label": 0.14.0 "@justeattakeaway/pie-webc-core": 0.24.0 "@types/lodash.throttle": 4.1.9 cem-plugin-module-file-extensions: 0.0.5 @@ -5834,7 +5834,7 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-toast@0.2.1, @justeattakeaway/pie-toast@workspace:packages/components/pie-toast": +"@justeattakeaway/pie-toast@0.3.0, @justeattakeaway/pie-toast@workspace:packages/components/pie-toast": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-toast@workspace:packages/components/pie-toast" dependencies: @@ -5869,7 +5869,7 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-webc@0.5.17, @justeattakeaway/pie-webc@workspace:packages/components/pie-webc": +"@justeattakeaway/pie-webc@0.5.18, @justeattakeaway/pie-webc@workspace:packages/components/pie-webc": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-webc@workspace:packages/components/pie-webc" dependencies: @@ -5882,7 +5882,7 @@ __metadata: "@justeattakeaway/pie-components-config": 0.16.0 "@justeattakeaway/pie-cookie-banner": 0.23.0 "@justeattakeaway/pie-divider": 0.13.7 - "@justeattakeaway/pie-form-label": 0.13.6 + "@justeattakeaway/pie-form-label": 0.14.0 "@justeattakeaway/pie-icon-button": 0.28.9 "@justeattakeaway/pie-link": 0.17.7 "@justeattakeaway/pie-modal": 0.44.0 @@ -5891,8 +5891,8 @@ __metadata: "@justeattakeaway/pie-switch": 0.29.11 "@justeattakeaway/pie-tag": 0.9.8 "@justeattakeaway/pie-text-input": 0.23.2 - "@justeattakeaway/pie-textarea": 0.5.0 - "@justeattakeaway/pie-toast": 0.2.1 + "@justeattakeaway/pie-textarea": 0.6.0 + "@justeattakeaway/pie-toast": 0.3.0 chalk: 5.3.0 bin: add-components: ./src/index.js @@ -26006,7 +26006,7 @@ __metadata: "@justeattakeaway/pie-cookie-banner": 0.23.0 "@justeattakeaway/pie-css": 0.12.1 "@justeattakeaway/pie-divider": 0.13.7 - "@justeattakeaway/pie-form-label": 0.13.6 + "@justeattakeaway/pie-form-label": 0.14.0 "@justeattakeaway/pie-icon-button": 0.28.9 "@justeattakeaway/pie-icons-configs": 4.5.1 "@justeattakeaway/pie-icons-webc": 0.24.2 @@ -26017,8 +26017,8 @@ __metadata: "@justeattakeaway/pie-switch": 0.29.11 "@justeattakeaway/pie-tag": 0.9.8 "@justeattakeaway/pie-text-input": 0.23.2 - "@justeattakeaway/pie-textarea": 0.5.0 - "@justeattakeaway/pie-toast": 0.2.1 + "@justeattakeaway/pie-textarea": 0.6.0 + "@justeattakeaway/pie-toast": 0.3.0 "@storybook/addon-a11y": 8.2.6 "@storybook/addon-designs": 8.0.3 "@storybook/addon-essentials": 8.2.6 @@ -33939,7 +33939,7 @@ __metadata: "@angular/platform-browser-dynamic": 15.2.0 "@angular/router": 15.2.0 "@justeattakeaway/pie-css": 0.12.1 - "@justeattakeaway/pie-webc": 0.5.17 + "@justeattakeaway/pie-webc": 0.5.18 rxjs: 7.8.0 tslib: 2.3.0 typescript: 4.9.4 @@ -33956,7 +33956,7 @@ __metadata: "@babel/preset-env": 7.24.5 "@babel/preset-react": 7.24.1 "@justeattakeaway/pie-css": 0.12.1 - "@justeattakeaway/pie-webc": 0.5.17 + "@justeattakeaway/pie-webc": 0.5.18 "@lit/react": 1.0.2 babel-loader: 8 eslint: 8.37.0 @@ -33973,7 +33973,7 @@ __metadata: resolution: "wc-next13@workspace:apps/examples/wc-next13" dependencies: "@justeattakeaway/pie-css": 0.12.1 - "@justeattakeaway/pie-webc": 0.5.17 + "@justeattakeaway/pie-webc": 0.5.18 "@lit-labs/nextjs": 0.2.0 "@lit/react": 1.0.5 "@types/react": 18.3.3 @@ -33996,7 +33996,7 @@ __metadata: dependencies: "@babel/preset-env": 7.24.5 "@justeattakeaway/pie-css": 0.12.1 - "@justeattakeaway/pie-webc": 0.5.17 + "@justeattakeaway/pie-webc": 0.5.18 babel-loader: 8 core-js: 3.30.0 nuxt: 2.17.0 @@ -34011,7 +34011,7 @@ __metadata: resolution: "wc-nuxt3@workspace:apps/examples/wc-nuxt3" dependencies: "@justeattakeaway/pie-css": 0.12.1 - "@justeattakeaway/pie-webc": 0.5.17 + "@justeattakeaway/pie-webc": 0.5.18 "@types/node": 18 nuxt: 3.4.3 nuxt-ssr-lit: 1.6.5 @@ -34023,7 +34023,7 @@ __metadata: resolution: "wc-react17@workspace:apps/examples/wc-react17" dependencies: "@justeattakeaway/pie-css": 0.12.1 - "@justeattakeaway/pie-webc": 0.5.17 + "@justeattakeaway/pie-webc": 0.5.18 "@lit/react": 1.0.5 "@types/react": ^17.0.2 "@types/react-dom": ^17.0.2 @@ -34043,7 +34043,7 @@ __metadata: resolution: "wc-react18@workspace:apps/examples/wc-react18" dependencies: "@justeattakeaway/pie-css": 0.12.1 - "@justeattakeaway/pie-webc": 0.5.17 + "@justeattakeaway/pie-webc": 0.5.18 "@lit/react": 1.0.5 "@types/react": 18.3.3 "@types/react-dom": 18.3.0 @@ -34065,7 +34065,7 @@ __metadata: "@justeat/pie-design-tokens": 6.3.1 "@justeattakeaway/pie-css": 0.12.1 "@justeattakeaway/pie-icons-webc": 0.24.2 - "@justeattakeaway/pie-webc": 0.5.17 + "@justeattakeaway/pie-webc": 0.5.18 vite: 4.5.3 languageName: unknown linkType: soft @@ -34075,7 +34075,7 @@ __metadata: resolution: "wc-vue3@workspace:apps/examples/wc-vue3" dependencies: "@justeattakeaway/pie-css": 0.12.1 - "@justeattakeaway/pie-webc": 0.5.17 + "@justeattakeaway/pie-webc": 0.5.18 "@types/node": 18.15.11 "@vitejs/plugin-vue": 4.0.0 "@vue/tsconfig": 0.1.3 From 3840581f6f9737e35bf3b2cfdc58744436233184 Mon Sep 17 00:00:00 2001 From: Jose De Freitas Jr Date: Tue, 13 Aug 2024 10:49:21 -0600 Subject: [PATCH 02/19] feat(pie-toast): DSW-2204 fixed wrong description --- apps/pie-storybook/stories/pie-toast.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/pie-storybook/stories/pie-toast.stories.ts b/apps/pie-storybook/stories/pie-toast.stories.ts index 377154964a..859a31b0b7 100644 --- a/apps/pie-storybook/stories/pie-toast.stories.ts +++ b/apps/pie-storybook/stories/pie-toast.stories.ts @@ -27,7 +27,7 @@ const toastStoryMeta: ToastStoryMeta = { }, }, variant: { - description: 'Set the variant of the notification.', + description: 'Set the variant of the toast.', control: 'select', options: variants, defaultValue: { From c19a1593dab6bb7902a075b895ed073e9a05eb60 Mon Sep 17 00:00:00 2001 From: Jose De Freitas Jr Date: Tue, 13 Aug 2024 11:49:43 -0600 Subject: [PATCH 03/19] feat(pie-toast): DSW-2204 added variants documentation in storybook --- .../stories/pie-toast-docs/variants.mdx | 44 +++++++++++++++++++ .../stories/pie-toast.stories.ts | 21 ++++++--- 2 files changed, 58 insertions(+), 7 deletions(-) create mode 100644 apps/pie-storybook/stories/pie-toast-docs/variants.mdx diff --git a/apps/pie-storybook/stories/pie-toast-docs/variants.mdx b/apps/pie-storybook/stories/pie-toast-docs/variants.mdx new file mode 100644 index 0000000000..841121604c --- /dev/null +++ b/apps/pie-storybook/stories/pie-toast-docs/variants.mdx @@ -0,0 +1,44 @@ +import { Meta, Canvas } from '@storybook/blocks'; +import * as ToastStories from '../pie-toast.stories.ts'; +import { ComponentStatus } from '../../docblocks/component-status.jsx'; + + + + + +### Neutral + + + +### Info + + + +### Info Strong + + + +### Warning + + + +### Warning Strong + + + +### Success + + + +### Success Strong + + + +### Error + + + +### Error Strong + + + diff --git a/apps/pie-storybook/stories/pie-toast.stories.ts b/apps/pie-storybook/stories/pie-toast.stories.ts index 859a31b0b7..a54f1b34a6 100644 --- a/apps/pie-storybook/stories/pie-toast.stories.ts +++ b/apps/pie-storybook/stories/pie-toast.stories.ts @@ -2,7 +2,7 @@ import { html } from 'lit'; import { ToastProps, defaultProps, variants } from '@justeattakeaway/pie-toast'; import { action } from '@storybook/addon-actions'; import { type StoryMeta } from '../types'; -import { createStory } from '../utilities'; +import { createStory, TemplateFunction } from '../utilities'; type ToastStoryMeta = StoryMeta; @@ -76,13 +76,10 @@ const toastStoryMeta: ToastStoryMeta = { export default toastStoryMeta; const pieToastLeadingActionClick = action('pie-toast-leading-action-click'); -const pieToastSupportingActionClick = action('pie-toast-supporting-action-click'); const pieToastClose = action('pie-toast-close'); const pieToastOpen = action('pie-toast-open'); -// TODO: remove the eslint-disable rule when props are added -// eslint-disable-next-line no-empty-pattern -const Template = ({ +const Template : TemplateFunction = ({ isOpen, isDismissible, message, @@ -100,10 +97,20 @@ const Template = ({ ?isMultiline="${isMultiline}" .leadingAction="${leadingAction}" @pie-toast-leading-action-click="${pieToastLeadingActionClick}" - @pie-toast-supporting-action-click="${pieToastSupportingActionClick}" @pie-toast-close="${pieToastClose}" @pie-toast-open="${pieToastOpen}" /> `; -export const Default = createStory(Template, defaultArgs)(); +const createToastStory = createStory(Template, defaultArgs); + +export const Neutral = createToastStory(); +export const Info = createToastStory({ variant: 'info' }); +export const InfoStrong = createToastStory({ variant: 'info', isStrong: true }); +export const Warning = createToastStory({ variant: 'warning' }); +export const WarningStrong = createToastStory({ variant: 'warning', isStrong: true }); +export const Success = createToastStory({ variant: 'success' }); +export const SuccessStrong = createToastStory({ variant: 'success', isStrong: true }); +export const Error = createToastStory({ variant: 'error' }); +export const ErrorStrong = createToastStory({ variant: 'error', isStrong: true }); +export const AutoDismiss = createToastStory(); From f76a0e9b51d604d31044017ddedd5c305fa76948 Mon Sep 17 00:00:00 2001 From: Jose De Freitas Jr Date: Tue, 13 Aug 2024 17:51:36 -0600 Subject: [PATCH 04/19] feat(pie-toast): DSW-2204 implemented auto-dismiss logic --- .../stories/pie-toast.stories.ts | 9 +- packages/components/pie-toast/src/defs.ts | 11 ++- packages/components/pie-toast/src/index.ts | 85 ++++++++++++++++++- 3 files changed, 102 insertions(+), 3 deletions(-) diff --git a/apps/pie-storybook/stories/pie-toast.stories.ts b/apps/pie-storybook/stories/pie-toast.stories.ts index a54f1b34a6..69e4506e3d 100644 --- a/apps/pie-storybook/stories/pie-toast.stories.ts +++ b/apps/pie-storybook/stories/pie-toast.stories.ts @@ -13,6 +13,7 @@ const defaultArgs: ToastProps = { text: 'Confirm', ariaLabel: 'Descriptive confirmation text', }, + duration: null, }; const toastStoryMeta: ToastStoryMeta = { @@ -63,6 +64,10 @@ const toastStoryMeta: ToastStoryMeta = { description: 'The leading action configuration for the toast.', control: 'object', }, + duration: { + description: 'It set the duration of the toast in milliseconds before it auto-dismiss.', + control: 'number', + }, }, args: defaultArgs, parameters: { @@ -87,6 +92,7 @@ const Template : TemplateFunction = ({ isMultiline, isStrong, variant, + duration, }: ToastProps) => html` = ({ ?isStrong="${isStrong}" variant="${variant}" message="${message}" + .duration="${duration}" ?isMultiline="${isMultiline}" .leadingAction="${leadingAction}" @pie-toast-leading-action-click="${pieToastLeadingActionClick}" @@ -113,4 +120,4 @@ export const Success = createToastStory({ variant: 'success' }); export const SuccessStrong = createToastStory({ variant: 'success', isStrong: true }); export const Error = createToastStory({ variant: 'error' }); export const ErrorStrong = createToastStory({ variant: 'error', isStrong: true }); -export const AutoDismiss = createToastStory(); +export const AutoDismiss = createToastStory({ duration: 3000, message: 'Closing in three seconds' }); diff --git a/packages/components/pie-toast/src/defs.ts b/packages/components/pie-toast/src/defs.ts index 3f6d1b0e26..eac37b12f9 100644 --- a/packages/components/pie-toast/src/defs.ts +++ b/packages/components/pie-toast/src/defs.ts @@ -2,6 +2,8 @@ import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core'; export const variants = ['neutral', 'info', 'warning', 'success', 'error'] as const; +export const defaultDuration = 5000; + export type ActionProps = { /** * The text to display inside the button. @@ -44,6 +46,13 @@ export interface ToastProps { * The leading action for the toast. */ leadingAction?: ActionProps; + + /** + * It set the duration of the toast in milliseconds before it auto-dismiss + * If the value is null auto-dismiss is disabled + * If the value is not provided it auto-dismiss after 5 seconds (5000 milliseconds) + */ + duration?: number | null; } export const componentSelector = 'pie-toast'; @@ -70,7 +79,7 @@ export const ON_TOAST_OPEN_EVENT = `${componentSelector}-open`; */ export const ON_TOAST_LEADING_ACTION_CLICK_EVENT = `${componentSelector}-leading-action-click`; -export type DefaultProps = ComponentDefaultProps>; +export type DefaultProps = ComponentDefaultProps>; export const defaultProps: DefaultProps = { isOpen: true, diff --git a/packages/components/pie-toast/src/index.ts b/packages/components/pie-toast/src/index.ts index b1dbcd5d82..704a43b376 100644 --- a/packages/components/pie-toast/src/index.ts +++ b/packages/components/pie-toast/src/index.ts @@ -33,6 +33,7 @@ import { ON_TOAST_LEADING_ACTION_CLICK_EVENT, defaultProps, variants, + defaultDuration, } from './defs'; // Valid values available to consumers @@ -64,15 +65,65 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps { @property({ type: Object }) public leadingAction: ToastProps['leadingAction']; + @property() + public duration: ToastProps['duration']; + @query('pie-button') actionButton?: HTMLElement; private _actionButtonOffset = 0; private _messageAreaMaxWidth = 0; + private _timeoutId: NodeJS.Timeout | null = null; + + private _abortController: AbortController | null = null; + // Renders a `CSSResult` generated from SCSS by Vite static styles = unsafeCSS(styles); + /** + * Create a timeout function and set its id into a private attribute. + * + * @private + */ + private setAutoDismiss () { + this._timeoutId = setTimeout(() => { + this.closeToastComponent(); + }, this.setAutoDismissDuration()); + } + + /** + * It gets the duration of the timeout in milliseconds. + * If the duration is undefined it returns 5000 which is the default value. + * If the duration is an arbitrary number provided by the user, it returns the number itself. + * + * @returns number + * @private + */ + private setAutoDismissDuration (): number { + switch (typeof this.duration) { + case 'undefined': + return defaultDuration; + case 'number': + return this.duration as number; + default: + return 0 as never; + } + } + + /** + * If the _abortController is set, it aborts all event + * listeners in this controller and the controller turns into null. + * + * @private + */ + private abortAndCleanEventListeners () { + if (this._abortController) { + this._abortController.abort(); + this._abortController = null; + } + } + /** * Calculates and returns the width of the message based on the toast properties. * @@ -111,6 +162,28 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps { return toastMaxWidthWithoutPadding - offset; } + /** + * It created all event listeners to handle the auto-dismiss capability + * as well the controller responsible to remove the events when needed. + * + * @private + */ + private createAutoDismissEventListeners () { + this._abortController = new AbortController(); + + this.setAutoDismiss(); + + const { signal } = this._abortController; + this.addEventListener('mouseover', () => { + if (this._timeoutId) { + clearTimeout(this._timeoutId); + } + }, { signal }); + this.addEventListener('mouseout', () => { + this.setAutoDismiss(); + }, { signal }); + } + /** * Lifecycle method executed when component is updated. * It dispatches an event if toast is opened. @@ -119,6 +192,14 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps { protected async updated (_changedProperties: PropertyValues) { if (_changedProperties.has('isOpen') && this.isOpen) { dispatchCustomEvent(this, ON_TOAST_OPEN_EVENT, { targetNotification: this }); + + if (this.duration !== null) { + this.createAutoDismissEventListeners(); + } + } + + if (_changedProperties.has('isOpen') && !this.isOpen && this._abortController) { + this.abortAndCleanEventListeners(); } await this.updateComplete; @@ -137,7 +218,8 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps { _changedProperties.has('message') || _changedProperties.has('isDismissible') || _changedProperties.has('isMultiline') || - _changedProperties.has('leadingAction')) { + _changedProperties.has('leadingAction') || + _changedProperties.has('duration')) { this.requestUpdate(); } } @@ -234,6 +316,7 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps { private closeToastComponent () { this.isOpen = false; dispatchCustomEvent(this, ON_TOAST_CLOSE_EVENT, { targetNotification: this }); + this.abortAndCleanEventListeners(); } /** From 8c46289a4a776757ea45a0a849b58b31458d02f3 Mon Sep 17 00:00:00 2001 From: Jose De Freitas Jr Date: Wed, 11 Sep 2024 17:06:57 -0600 Subject: [PATCH 05/19] feat(pie-toast): DSW-2204 implemented animations --- packages/components/pie-toast/src/index.ts | 6 ++-- packages/components/pie-toast/src/toast.scss | 34 ++++++++++++++++++++ 2 files changed, 36 insertions(+), 4 deletions(-) diff --git a/packages/components/pie-toast/src/index.ts b/packages/components/pie-toast/src/index.ts index 704a43b376..c8fd59cd72 100644 --- a/packages/components/pie-toast/src/index.ts +++ b/packages/components/pie-toast/src/index.ts @@ -371,14 +371,12 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps { _messageAreaMaxWidth, } = this; - if (!isOpen) { - return nothing; - } - const componentWrapperClasses = { [componentClass]: true, [`${componentClass}--${variant}`]: true, [`${componentClass}--strong`]: isStrong, + [`${componentClass}--animate-in`]: isOpen, + [`${componentClass}--animate-out`]: !isOpen, }; const messageAreaClasses = { diff --git a/packages/components/pie-toast/src/toast.scss b/packages/components/pie-toast/src/toast.scss index c43c687391..4daa435b74 100644 --- a/packages/components/pie-toast/src/toast.scss +++ b/packages/components/pie-toast/src/toast.scss @@ -25,8 +25,22 @@ color: var(--toast-font-color); font-size: var(--toast-font-size); line-height: var(--toast-line-height); + transition: all 200ms cubic-bezier(0, 0, 0.18, 0.99); + transform: translateX(100%); } +.c-toast--animate-in { + animation: 200ms animate-in cubic-bezier(0, 0, 0.18, 0.99); + transform: translateX(0); +} + +.c-toast--animate-out { + animation: 100ms animate-out cubic-bezier(0.8, 0, 1, 1); + transform: translateX(100%); + opacity: 0; +} + + .c-toast--info { --toast-icon-fill: var(--dt-color-support-info-inverse); @@ -114,3 +128,23 @@ color: var(--toast-icon-fill); } +@keyframes animate-in { + from { + transform: translateX(100%); + opacity: 0; + } + to { + transform: translateX(0); + opacity: 1; + } +} + +@keyframes animate-out { + from { + transform: translateX(0); + } + to { + transform: translateX(100%); + + } +} \ No newline at end of file From 03f26099f42b1384e212ec4dea3ad1e095d9e885 Mon Sep 17 00:00:00 2001 From: Jose De Freitas Jr Date: Wed, 11 Sep 2024 17:13:23 -0600 Subject: [PATCH 06/19] feat(pie-toast): DSW-2204 adjusted visual tests --- packages/components/pie-toast/test/visual/pie-toast.spec.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/pie-toast/test/visual/pie-toast.spec.ts b/packages/components/pie-toast/test/visual/pie-toast.spec.ts index 168fdb8844..12ea55d38d 100644 --- a/packages/components/pie-toast/test/visual/pie-toast.spec.ts +++ b/packages/components/pie-toast/test/visual/pie-toast.spec.ts @@ -37,6 +37,7 @@ const initialValues: ToastProps = { isMultiline: false, message: 'Item has been created', leadingAction: mainAction, + duration: null, }; export const screenWidths = { From fe4984dcca639eb177f12831a76b6dd62ff707a8 Mon Sep 17 00:00:00 2001 From: Jose De Freitas Jr Date: Fri, 13 Sep 2024 12:08:52 -0600 Subject: [PATCH 07/19] feat(pie-toast): DSW-2204 avoid toast to dismiss if user focus on buttons --- packages/components/pie-toast/src/index.ts | 48 ++++++++++++++++++---- 1 file changed, 39 insertions(+), 9 deletions(-) diff --git a/packages/components/pie-toast/src/index.ts b/packages/components/pie-toast/src/index.ts index c8fd59cd72..d85209649b 100644 --- a/packages/components/pie-toast/src/index.ts +++ b/packages/components/pie-toast/src/index.ts @@ -70,6 +70,8 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps { @query('pie-button') actionButton?: HTMLElement; + @query('pie-icon-button') closeButton?: HTMLElement; + private _actionButtonOffset = 0; private _messageAreaMaxWidth = 0; @@ -162,6 +164,34 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps { return toastMaxWidthWithoutPadding - offset; } + /** + * Adds event listeners to the specified element for handling the auto dismiss behavior. + * + * @param {typeof this | HTMLElement | undefined} element - The element to which the listeners will be added. It can be the current instance, an HTMLElement, or undefined. + * @param {keyof HTMLElementEventMap} inEvent - The event type to listen for when entering the element. (e.g., 'mouseenter', 'focusin'). + * @param {keyof HTMLElementEventMap} outEvent - The event type to listen for when leaving the element. (e.g., 'mouseleave', 'focusout'). + * @param {AddEventListenerOptions['signal']} abortSignal - An AbortSignal that can be used to remove the event listeners. + * + * @private + */ + private addListenersToElement ( + element: typeof this | HTMLElement | undefined, + inEvent: keyof HTMLElementEventMap, + outEvent: keyof HTMLElementEventMap, + abortSignal: AddEventListenerOptions['signal'], + ) { + if (element) { + element.addEventListener(inEvent, () => { + if (this._timeoutId) { + clearTimeout(this._timeoutId); + } + }, { signal: abortSignal }); + element.addEventListener(outEvent, () => { + this.setAutoDismiss(); + }, { signal: abortSignal }); + } + } + /** * It created all event listeners to handle the auto-dismiss capability * as well the controller responsible to remove the events when needed. @@ -174,14 +204,10 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps { this.setAutoDismiss(); const { signal } = this._abortController; - this.addEventListener('mouseover', () => { - if (this._timeoutId) { - clearTimeout(this._timeoutId); - } - }, { signal }); - this.addEventListener('mouseout', () => { - this.setAutoDismiss(); - }, { signal }); + + this.addListenersToElement(this.actionButton, 'focus', 'focusout', signal); + this.addListenersToElement(this.closeButton, 'focus', 'focusout', signal); + this.addListenersToElement(this, 'mouseover', 'mouseout', signal); } /** @@ -385,7 +411,11 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps { }; return html` -
+
${this.variantHasIcon(variant) ? this.getVariantIcon() : nothing} From 2aecbc360eb8d976e74b5712341612efdcc8bd89 Mon Sep 17 00:00:00 2001 From: Jose De Freitas Jr Date: Fri, 13 Sep 2024 14:36:40 -0600 Subject: [PATCH 08/19] feat(pie-toast): DSW-2204 updated lockfile --- yarn.lock | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/yarn.lock b/yarn.lock index cfa917f03c..50c39a5d50 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5453,7 +5453,7 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/generator-pie-component@0.22.0, @justeattakeaway/generator-pie-component@workspace:packages/tools/generator-pie-component": +"@justeattakeaway/generator-pie-component@0.22.1, @justeattakeaway/generator-pie-component@workspace:packages/tools/generator-pie-component": version: 0.0.0-use.local resolution: "@justeattakeaway/generator-pie-component@workspace:packages/tools/generator-pie-component" dependencies: @@ -5736,7 +5736,7 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-lottie-player@0.0.1, @justeattakeaway/pie-lottie-player@workspace:packages/components/pie-lottie-player": +"@justeattakeaway/pie-lottie-player@0.0.2, @justeattakeaway/pie-lottie-player@workspace:packages/components/pie-lottie-player": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-lottie-player@workspace:packages/components/pie-lottie-player" dependencies: @@ -5770,7 +5770,7 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-notification@0.10.2, @justeattakeaway/pie-notification@workspace:packages/components/pie-notification": +"@justeattakeaway/pie-notification@0.11.0, @justeattakeaway/pie-notification@workspace:packages/components/pie-notification": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-notification@workspace:packages/components/pie-notification" dependencies: @@ -5785,7 +5785,7 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-radio-group@0.0.0, @justeattakeaway/pie-radio-group@workspace:packages/components/pie-radio-group": +"@justeattakeaway/pie-radio-group@0.1.0, @justeattakeaway/pie-radio-group@workspace:packages/components/pie-radio-group": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-radio-group@workspace:packages/components/pie-radio-group" dependencies: @@ -5917,7 +5917,7 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-webc@0.5.31, @justeattakeaway/pie-webc@workspace:packages/components/pie-webc": +"@justeattakeaway/pie-webc@0.5.32, @justeattakeaway/pie-webc@workspace:packages/components/pie-webc": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-webc@workspace:packages/components/pie-webc" dependencies: @@ -5933,11 +5933,11 @@ __metadata: "@justeattakeaway/pie-form-label": 0.14.1 "@justeattakeaway/pie-icon-button": 0.28.12 "@justeattakeaway/pie-link": 0.18.0 - "@justeattakeaway/pie-lottie-player": 0.0.1 + "@justeattakeaway/pie-lottie-player": 0.0.2 "@justeattakeaway/pie-modal": 0.46.2 - "@justeattakeaway/pie-notification": 0.10.2 + "@justeattakeaway/pie-notification": 0.11.0 "@justeattakeaway/pie-radio": 0.0.0 - "@justeattakeaway/pie-radio-group": 0.0.0 + "@justeattakeaway/pie-radio-group": 0.1.0 "@justeattakeaway/pie-spinner": 0.7.0 "@justeattakeaway/pie-switch": 0.30.1 "@justeattakeaway/pie-tag": 0.10.0 @@ -26174,7 +26174,7 @@ __metadata: "@commitlint/config-conventional": 17.4.4 "@justeat/pie-design-tokens": 6.4.0 "@justeattakeaway/browserslist-config-pie": 0.2.0 - "@justeattakeaway/generator-pie-component": 0.22.0 + "@justeattakeaway/generator-pie-component": 0.22.1 "@justeattakeaway/pie-icons": 4.19.1 "@justeattakeaway/pie-webc-testing": 0.13.3 "@justeattakeaway/pie-wrapper-react": 0.14.1 @@ -26249,9 +26249,9 @@ __metadata: "@justeattakeaway/pie-icons-webc": 0.25.1 "@justeattakeaway/pie-link": 0.18.0 "@justeattakeaway/pie-modal": 0.46.2 - "@justeattakeaway/pie-notification": 0.10.2 + "@justeattakeaway/pie-notification": 0.11.0 "@justeattakeaway/pie-radio": 0.0.0 - "@justeattakeaway/pie-radio-group": 0.0.0 + "@justeattakeaway/pie-radio-group": 0.1.0 "@justeattakeaway/pie-spinner": 0.7.0 "@justeattakeaway/pie-switch": 0.30.1 "@justeattakeaway/pie-tag": 0.10.0 @@ -34188,7 +34188,7 @@ __metadata: "@angular/platform-browser-dynamic": 15.2.0 "@angular/router": 15.2.0 "@justeattakeaway/pie-css": 0.12.1 - "@justeattakeaway/pie-webc": 0.5.31 + "@justeattakeaway/pie-webc": 0.5.32 rxjs: 7.8.0 tslib: 2.3.0 typescript: 4.9.4 @@ -34205,7 +34205,7 @@ __metadata: "@babel/preset-env": 7.24.5 "@babel/preset-react": 7.24.1 "@justeattakeaway/pie-css": 0.12.1 - "@justeattakeaway/pie-webc": 0.5.31 + "@justeattakeaway/pie-webc": 0.5.32 "@lit/react": 1.0.2 babel-loader: 8 eslint: 8.37.0 @@ -34222,7 +34222,7 @@ __metadata: resolution: "wc-next13@workspace:apps/examples/wc-next13" dependencies: "@justeattakeaway/pie-css": 0.12.1 - "@justeattakeaway/pie-webc": 0.5.31 + "@justeattakeaway/pie-webc": 0.5.32 "@lit-labs/nextjs": 0.2.0 "@lit/react": 1.0.5 "@types/react": 18.3.3 @@ -34245,7 +34245,7 @@ __metadata: dependencies: "@babel/preset-env": 7.24.5 "@justeattakeaway/pie-css": 0.12.1 - "@justeattakeaway/pie-webc": 0.5.31 + "@justeattakeaway/pie-webc": 0.5.32 babel-loader: 8 core-js: 3.30.0 nuxt: 2.17.0 @@ -34260,7 +34260,7 @@ __metadata: resolution: "wc-nuxt3@workspace:apps/examples/wc-nuxt3" dependencies: "@justeattakeaway/pie-css": 0.12.1 - "@justeattakeaway/pie-webc": 0.5.31 + "@justeattakeaway/pie-webc": 0.5.32 "@types/node": 18 nuxt: 3.4.3 nuxt-ssr-lit: 1.6.5 @@ -34272,7 +34272,7 @@ __metadata: resolution: "wc-react17@workspace:apps/examples/wc-react17" dependencies: "@justeattakeaway/pie-css": 0.12.1 - "@justeattakeaway/pie-webc": 0.5.31 + "@justeattakeaway/pie-webc": 0.5.32 "@lit/react": 1.0.5 "@types/react": ^17.0.2 "@types/react-dom": ^17.0.2 @@ -34292,7 +34292,7 @@ __metadata: resolution: "wc-react18@workspace:apps/examples/wc-react18" dependencies: "@justeattakeaway/pie-css": 0.12.1 - "@justeattakeaway/pie-webc": 0.5.31 + "@justeattakeaway/pie-webc": 0.5.32 "@lit/react": 1.0.5 "@types/react": 18.3.3 "@types/react-dom": 18.3.0 @@ -34314,7 +34314,7 @@ __metadata: "@justeat/pie-design-tokens": 6.3.1 "@justeattakeaway/pie-css": 0.12.1 "@justeattakeaway/pie-icons-webc": 0.25.1 - "@justeattakeaway/pie-webc": 0.5.31 + "@justeattakeaway/pie-webc": 0.5.32 vite: 4.5.3 languageName: unknown linkType: soft @@ -34324,7 +34324,7 @@ __metadata: resolution: "wc-vue3@workspace:apps/examples/wc-vue3" dependencies: "@justeattakeaway/pie-css": 0.12.1 - "@justeattakeaway/pie-webc": 0.5.31 + "@justeattakeaway/pie-webc": 0.5.32 "@types/node": 18.15.11 "@vitejs/plugin-vue": 4.0.0 "@vue/tsconfig": 0.1.3 From cefd7a08bf1e145f9866f073e8b44fe2a207747b Mon Sep 17 00:00:00 2001 From: Jose De Freitas Jr Date: Fri, 13 Sep 2024 14:38:49 -0600 Subject: [PATCH 09/19] feat(pie-toast): DSW-2204 lint styles --- packages/components/pie-toast/src/toast.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/components/pie-toast/src/toast.scss b/packages/components/pie-toast/src/toast.scss index 4daa435b74..d3fe95c8b2 100644 --- a/packages/components/pie-toast/src/toast.scss +++ b/packages/components/pie-toast/src/toast.scss @@ -133,6 +133,7 @@ transform: translateX(100%); opacity: 0; } + to { transform: translateX(0); opacity: 1; @@ -143,6 +144,7 @@ from { transform: translateX(0); } + to { transform: translateX(100%); From 7ad08d9913b08ad56527e59c0fd1e8b8045a29b6 Mon Sep 17 00:00:00 2001 From: Jose De Freitas Jr Date: Fri, 13 Sep 2024 15:19:47 -0600 Subject: [PATCH 10/19] feat(pie-toast): DSW-2204 added changeset --- .changeset/itchy-games-fry.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/itchy-games-fry.md diff --git a/.changeset/itchy-games-fry.md b/.changeset/itchy-games-fry.md new file mode 100644 index 0000000000..c2c4408a70 --- /dev/null +++ b/.changeset/itchy-games-fry.md @@ -0,0 +1,7 @@ +--- +"@justeattakeaway/pie-toast": minor +"pie-storybook": minor +--- + +[Added] - `duration` property into pie-toast +[Added] - Auto-dismiss functionality into pie-toast with default duration of 5 seconds From b88f95eab497d35ed57ab7af20c487ccebd99e0b Mon Sep 17 00:00:00 2001 From: Jose De Freitas Jr Date: Fri, 20 Sep 2024 08:54:34 -0600 Subject: [PATCH 11/19] feat(pie-toast): DSW-2204 addressed typos --- packages/components/pie-toast/src/defs.ts | 4 ++-- packages/components/pie-toast/src/index.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/pie-toast/src/defs.ts b/packages/components/pie-toast/src/defs.ts index eac37b12f9..bbb98320f6 100644 --- a/packages/components/pie-toast/src/defs.ts +++ b/packages/components/pie-toast/src/defs.ts @@ -48,9 +48,9 @@ export interface ToastProps { leadingAction?: ActionProps; /** - * It set the duration of the toast in milliseconds before it auto-dismiss + * It sets the duration of the toast in milliseconds before it auto-dismisses. * If the value is null auto-dismiss is disabled - * If the value is not provided it auto-dismiss after 5 seconds (5000 milliseconds) + * If the value is not provided it auto-dismisses after 5 seconds (5000 milliseconds) */ duration?: number | null; } diff --git a/packages/components/pie-toast/src/index.ts b/packages/components/pie-toast/src/index.ts index d85209649b..7c41fefd32 100644 --- a/packages/components/pie-toast/src/index.ts +++ b/packages/components/pie-toast/src/index.ts @@ -193,7 +193,7 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps { } /** - * It created all event listeners to handle the auto-dismiss capability + * It creates all event listeners to handle the auto-dismiss capability * as well the controller responsible to remove the events when needed. * * @private From 29650818f7bfd44dd8e234b2f7e5dec845a1fe13 Mon Sep 17 00:00:00 2001 From: Jose De Freitas Jr Date: Fri, 20 Sep 2024 10:25:44 -0600 Subject: [PATCH 12/19] feat(pie-toast): DSW-2204 replaced hardcoded animations in favor of tokens --- packages/components/pie-toast/src/toast.scss | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/components/pie-toast/src/toast.scss b/packages/components/pie-toast/src/toast.scss index d3fe95c8b2..f403cce44e 100644 --- a/packages/components/pie-toast/src/toast.scss +++ b/packages/components/pie-toast/src/toast.scss @@ -25,22 +25,26 @@ color: var(--toast-font-color); font-size: var(--toast-font-size); line-height: var(--toast-line-height); - transition: all 200ms cubic-bezier(0, 0, 0.18, 0.99); - transform: translateX(100%); + transition-property: all; + transition-duration: var(--dt-motion-timing-100); + transition-timing-function: var(-dt-motion-easing-in); } .c-toast--animate-in { - animation: 200ms animate-in cubic-bezier(0, 0, 0.18, 0.99); + animation-duration: var(--dt-motion-timing-200); + animation-name: animate-in; + animation-timing-function: var(-dt-motion-easing-in); transform: translateX(0); } -.c-toast--animate-out { - animation: 100ms animate-out cubic-bezier(0.8, 0, 1, 1); +.c-toast--animate-out { + animation-duration: var(--dt-motion-timing-100); + animation-name: animate-out; + animation-timing-function: var(--dt-motion-easing-out); transform: translateX(100%); opacity: 0; } - .c-toast--info { --toast-icon-fill: var(--dt-color-support-info-inverse); @@ -131,12 +135,10 @@ @keyframes animate-in { from { transform: translateX(100%); - opacity: 0; } to { transform: translateX(0); - opacity: 1; } } @@ -147,6 +149,5 @@ to { transform: translateX(100%); - } } \ No newline at end of file From 95b48c3dd2efe7de4e339417599727c901a593f2 Mon Sep 17 00:00:00 2001 From: Jose De Freitas Jr Date: Mon, 23 Sep 2024 10:57:19 -0600 Subject: [PATCH 13/19] feat(pie-toast): DSW-2204 adapted tests to behave better with animations --- .../test/component/pie-toast.spec.ts | 38 ++++++++++++++++++- 1 file changed, 36 insertions(+), 2 deletions(-) diff --git a/packages/components/pie-toast/test/component/pie-toast.spec.ts b/packages/components/pie-toast/test/component/pie-toast.spec.ts index 4f6c07d768..78bcc912b7 100644 --- a/packages/components/pie-toast/test/component/pie-toast.spec.ts +++ b/packages/components/pie-toast/test/component/pie-toast.spec.ts @@ -33,6 +33,9 @@ test.describe('PieToast - Component tests', () => { props: {} as ToastProps, }); + // Wait for the component to render alongside its animations + await page.waitForTimeout(250); + // Act const toast = page.locator(componentSelector); @@ -42,7 +45,7 @@ test.describe('PieToast - Component tests', () => { test.describe('Props', () => { test.describe('isOpen', () => { - test('should not render component if isOpen is false', async ({ mount, page }) => { + test('should have c-toast--animate-out class if isOpen is false', async ({ mount, page }) => { // Arrange await mount(PieToast, { props: { @@ -50,11 +53,15 @@ test.describe('PieToast - Component tests', () => { } as ToastProps, }); + // Wait for the component to render alongside its animations + await page.waitForTimeout(250); + // Act const toast = page.locator(componentSelector); // Assert - expect(toast).not.toBeVisible(); + expect(toast).toBeVisible(); + expect(toast).toHaveClass(' c-toast c-toast--neutral c-toast--animate-out '); }); }); @@ -68,6 +75,9 @@ test.describe('PieToast - Component tests', () => { } as ToastProps, }); + // Wait for the component to render alongside its animations + await page.waitForTimeout(250); + // Act const toast = page.locator(componentSelector); const message = page.locator(messageSelector); @@ -86,6 +96,9 @@ test.describe('PieToast - Component tests', () => { } as ToastProps, }); + // Wait for the component to render alongside its animations + await page.waitForTimeout(250); + // Act const toast = page.locator(componentSelector); const message = page.locator(messageSelector); @@ -105,6 +118,9 @@ test.describe('PieToast - Component tests', () => { }, }); + // Wait for the component to render alongside its animations + await page.waitForTimeout(250); + // Act const toast = page.locator(componentSelector); const iconClose = page.locator(closeSelector); @@ -125,6 +141,9 @@ test.describe('PieToast - Component tests', () => { } as ToastProps, }); + // Wait for the component to render alongside its animations + await page.waitForTimeout(250); + // Act const toast = page.locator(componentSelector); const footer = page.locator(footerSelector); @@ -147,6 +166,9 @@ test.describe('PieToast - Component tests', () => { } as ToastProps, }); + // Wait for the component to render alongside its animations + await page.waitForTimeout(250); + // Act const toast = page.locator(componentSelector); const leadingAction = page.locator(leadingActionSelector); @@ -164,6 +186,9 @@ test.describe('PieToast - Component tests', () => { } as ToastProps, }); + // Wait for the component to render alongside its animations + await page.waitForTimeout(250); + // Act const toast = page.locator(componentSelector); const footer = page.locator(footerSelector); @@ -185,6 +210,9 @@ test.describe('PieToast - Component tests', () => { } as ToastProps, }); + // Wait for the component to render alongside its animations + await page.waitForTimeout(250); + // Act const toast = page.locator(componentSelector); const footer = page.locator(footerSelector); @@ -208,6 +236,9 @@ test.describe('PieToast - Component tests', () => { } as ToastProps, }); + // Wait for the component to render alongside its animations + await await page.waitForTimeout(250); + // Act const toast = page.locator(componentSelector); const icon = page.locator(getToastIconSelectors(variant)); @@ -225,6 +256,9 @@ test.describe('PieToast - Component tests', () => { } as ToastProps, }); + // Wait for the component to render alongside its animations + await page.waitForTimeout(250); + // Act const toast = page.locator(componentSelector); const icon = page.locator(getToastIconSelectors(variant)); From b3b47d987b9c5acdbec741a94a1ae7d9f71e0319 Mon Sep 17 00:00:00 2001 From: Jose De Freitas Jr Date: Mon, 23 Sep 2024 15:10:18 -0600 Subject: [PATCH 14/19] feat(pie-toast): DSW-2204 used defaultDuration into defaultProps --- packages/components/pie-toast/src/defs.ts | 5 ++-- packages/components/pie-toast/src/index.ts | 28 ++++------------------ 2 files changed, 7 insertions(+), 26 deletions(-) diff --git a/packages/components/pie-toast/src/defs.ts b/packages/components/pie-toast/src/defs.ts index bbb98320f6..4d8f3951bc 100644 --- a/packages/components/pie-toast/src/defs.ts +++ b/packages/components/pie-toast/src/defs.ts @@ -2,7 +2,7 @@ import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core'; export const variants = ['neutral', 'info', 'warning', 'success', 'error'] as const; -export const defaultDuration = 5000; +const defaultDuration = 5000; export type ActionProps = { /** @@ -79,7 +79,7 @@ export const ON_TOAST_OPEN_EVENT = `${componentSelector}-open`; */ export const ON_TOAST_LEADING_ACTION_CLICK_EVENT = `${componentSelector}-leading-action-click`; -export type DefaultProps = ComponentDefaultProps>; +export type DefaultProps = ComponentDefaultProps>; export const defaultProps: DefaultProps = { isOpen: true, @@ -87,4 +87,5 @@ export const defaultProps: DefaultProps = { isStrong: false, isDismissible: true, isMultiline: false, + duration: defaultDuration, }; diff --git a/packages/components/pie-toast/src/index.ts b/packages/components/pie-toast/src/index.ts index 7c41fefd32..f3803a833f 100644 --- a/packages/components/pie-toast/src/index.ts +++ b/packages/components/pie-toast/src/index.ts @@ -33,7 +33,6 @@ import { ON_TOAST_LEADING_ACTION_CLICK_EVENT, defaultProps, variants, - defaultDuration, } from './defs'; // Valid values available to consumers @@ -65,8 +64,8 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps { @property({ type: Object }) public leadingAction: ToastProps['leadingAction']; - @property() - public duration: ToastProps['duration']; + @property({ type: Number }) + public duration = defaultProps.duration; @query('pie-button') actionButton?: HTMLElement; @@ -91,26 +90,7 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps { private setAutoDismiss () { this._timeoutId = setTimeout(() => { this.closeToastComponent(); - }, this.setAutoDismissDuration()); - } - - /** - * It gets the duration of the timeout in milliseconds. - * If the duration is undefined it returns 5000 which is the default value. - * If the duration is an arbitrary number provided by the user, it returns the number itself. - * - * @returns number - * @private - */ - private setAutoDismissDuration (): number { - switch (typeof this.duration) { - case 'undefined': - return defaultDuration; - case 'number': - return this.duration as number; - default: - return 0 as never; - } + }, this.duration || 0 as never); } /** @@ -224,7 +204,7 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps { } } - if (_changedProperties.has('isOpen') && !this.isOpen && this._abortController) { + if (_changedProperties.has('isOpen') && !this.isOpen) { this.abortAndCleanEventListeners(); } From cf69f200c710dcbaedf284c9ac9f8ec56eef6e63 Mon Sep 17 00:00:00 2001 From: Jose De Freitas Jr Date: Fri, 27 Sep 2024 13:13:28 -0600 Subject: [PATCH 15/19] feat(pie-toast): DSW-2204 fixed typo and css variables --- packages/components/pie-toast/src/defs.ts | 4 +-- packages/components/pie-toast/src/toast.scss | 4 +-- yarn.lock | 32 ++++++++++---------- 3 files changed, 19 insertions(+), 21 deletions(-) diff --git a/packages/components/pie-toast/src/defs.ts b/packages/components/pie-toast/src/defs.ts index 4d8f3951bc..70c103c337 100644 --- a/packages/components/pie-toast/src/defs.ts +++ b/packages/components/pie-toast/src/defs.ts @@ -2,8 +2,6 @@ import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core'; export const variants = ['neutral', 'info', 'warning', 'success', 'error'] as const; -const defaultDuration = 5000; - export type ActionProps = { /** * The text to display inside the button. @@ -87,5 +85,5 @@ export const defaultProps: DefaultProps = { isStrong: false, isDismissible: true, isMultiline: false, - duration: defaultDuration, + duration: 5000, }; diff --git a/packages/components/pie-toast/src/toast.scss b/packages/components/pie-toast/src/toast.scss index f403cce44e..d9277758be 100644 --- a/packages/components/pie-toast/src/toast.scss +++ b/packages/components/pie-toast/src/toast.scss @@ -27,13 +27,13 @@ line-height: var(--toast-line-height); transition-property: all; transition-duration: var(--dt-motion-timing-100); - transition-timing-function: var(-dt-motion-easing-in); + transition-timing-function: var(--dt-motion-easing-in); } .c-toast--animate-in { animation-duration: var(--dt-motion-timing-200); animation-name: animate-in; - animation-timing-function: var(-dt-motion-easing-in); + animation-timing-function: var(--dt-motion-easing-in); transform: translateX(0); } diff --git a/yarn.lock b/yarn.lock index 26d7e64146..21b17a9b6c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5278,7 +5278,7 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-card@0.20.1, @justeattakeaway/pie-card@workspace:packages/components/pie-card": +"@justeattakeaway/pie-card@0.21.0, @justeattakeaway/pie-card@workspace:packages/components/pie-card": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-card@workspace:packages/components/pie-card" dependencies: @@ -5581,7 +5581,7 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-radio@0.1.0, @justeattakeaway/pie-radio@workspace:packages/components/pie-radio": +"@justeattakeaway/pie-radio@0.2.0, @justeattakeaway/pie-radio@workspace:packages/components/pie-radio": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-radio@workspace:packages/components/pie-radio" dependencies: @@ -5701,13 +5701,13 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-webc@0.5.36, @justeattakeaway/pie-webc@workspace:packages/components/pie-webc": +"@justeattakeaway/pie-webc@0.5.37, @justeattakeaway/pie-webc@workspace:packages/components/pie-webc": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-webc@workspace:packages/components/pie-webc" dependencies: "@justeattakeaway/pie-assistive-text": 0.7.1 "@justeattakeaway/pie-button": 0.49.1 - "@justeattakeaway/pie-card": 0.20.1 + "@justeattakeaway/pie-card": 0.21.0 "@justeattakeaway/pie-checkbox": 0.13.0 "@justeattakeaway/pie-checkbox-group": 0.7.0 "@justeattakeaway/pie-chip": 0.8.3 @@ -5720,7 +5720,7 @@ __metadata: "@justeattakeaway/pie-lottie-player": 0.0.2 "@justeattakeaway/pie-modal": 0.47.0 "@justeattakeaway/pie-notification": 0.12.0 - "@justeattakeaway/pie-radio": 0.1.0 + "@justeattakeaway/pie-radio": 0.2.0 "@justeattakeaway/pie-radio-group": 0.1.0 "@justeattakeaway/pie-spinner": 0.7.0 "@justeattakeaway/pie-switch": 0.30.1 @@ -26052,7 +26052,7 @@ __metadata: "@justeat/pie-design-tokens": 6.5.0 "@justeattakeaway/pie-assistive-text": 0.7.1 "@justeattakeaway/pie-button": 0.49.1 - "@justeattakeaway/pie-card": 0.20.1 + "@justeattakeaway/pie-card": 0.21.0 "@justeattakeaway/pie-checkbox": 0.13.0 "@justeattakeaway/pie-checkbox-group": 0.7.0 "@justeattakeaway/pie-chip": 0.8.3 @@ -26067,7 +26067,7 @@ __metadata: "@justeattakeaway/pie-lottie-player": 0.0.2 "@justeattakeaway/pie-modal": 0.47.0 "@justeattakeaway/pie-notification": 0.12.0 - "@justeattakeaway/pie-radio": 0.1.0 + "@justeattakeaway/pie-radio": 0.2.0 "@justeattakeaway/pie-radio-group": 0.1.0 "@justeattakeaway/pie-spinner": 0.7.0 "@justeattakeaway/pie-switch": 0.30.1 @@ -33918,7 +33918,7 @@ __metadata: "@angular/platform-browser-dynamic": 15.2.0 "@angular/router": 15.2.0 "@justeattakeaway/pie-css": 0.13.0 - "@justeattakeaway/pie-webc": 0.5.36 + "@justeattakeaway/pie-webc": 0.5.37 rxjs: 7.8.0 tslib: 2.3.0 typescript: 4.9.4 @@ -33935,7 +33935,7 @@ __metadata: "@babel/preset-env": 7.24.5 "@babel/preset-react": 7.24.1 "@justeattakeaway/pie-css": 0.13.0 - "@justeattakeaway/pie-webc": 0.5.36 + "@justeattakeaway/pie-webc": 0.5.37 "@lit/react": 1.0.2 babel-loader: 8 eslint: 8.37.0 @@ -33952,7 +33952,7 @@ __metadata: resolution: "wc-next13@workspace:apps/examples/wc-next13" dependencies: "@justeattakeaway/pie-css": 0.13.0 - "@justeattakeaway/pie-webc": 0.5.36 + "@justeattakeaway/pie-webc": 0.5.37 "@lit-labs/nextjs": 0.2.0 "@lit/react": 1.0.5 "@types/react": 18.3.3 @@ -33975,7 +33975,7 @@ __metadata: dependencies: "@babel/preset-env": 7.24.5 "@justeattakeaway/pie-css": 0.13.0 - "@justeattakeaway/pie-webc": 0.5.36 + "@justeattakeaway/pie-webc": 0.5.37 babel-loader: 8 core-js: 3.30.0 nuxt: 2.17.0 @@ -33990,7 +33990,7 @@ __metadata: resolution: "wc-nuxt3@workspace:apps/examples/wc-nuxt3" dependencies: "@justeattakeaway/pie-css": 0.13.0 - "@justeattakeaway/pie-webc": 0.5.36 + "@justeattakeaway/pie-webc": 0.5.37 "@types/node": 18 nuxt: 3.4.3 nuxt-ssr-lit: 1.6.5 @@ -34002,7 +34002,7 @@ __metadata: resolution: "wc-react17@workspace:apps/examples/wc-react17" dependencies: "@justeattakeaway/pie-css": 0.13.0 - "@justeattakeaway/pie-webc": 0.5.36 + "@justeattakeaway/pie-webc": 0.5.37 "@lit/react": 1.0.5 "@types/react": ^17.0.2 "@types/react-dom": ^17.0.2 @@ -34022,7 +34022,7 @@ __metadata: resolution: "wc-react18@workspace:apps/examples/wc-react18" dependencies: "@justeattakeaway/pie-css": 0.13.0 - "@justeattakeaway/pie-webc": 0.5.36 + "@justeattakeaway/pie-webc": 0.5.37 "@lit/react": 1.0.5 "@types/react": 18.3.3 "@types/react-dom": 18.3.0 @@ -34044,7 +34044,7 @@ __metadata: "@justeat/pie-design-tokens": 6.5.0 "@justeattakeaway/pie-css": 0.13.0 "@justeattakeaway/pie-icons-webc": 0.25.1 - "@justeattakeaway/pie-webc": 0.5.36 + "@justeattakeaway/pie-webc": 0.5.37 vite: 5.3.6 languageName: unknown linkType: soft @@ -34054,7 +34054,7 @@ __metadata: resolution: "wc-vue3@workspace:apps/examples/wc-vue3" dependencies: "@justeattakeaway/pie-css": 0.13.0 - "@justeattakeaway/pie-webc": 0.5.36 + "@justeattakeaway/pie-webc": 0.5.37 "@types/node": 18.15.11 "@vitejs/plugin-vue": 4.0.0 "@vue/tsconfig": 0.1.3 From 0eab87bb8e20824bb533781dee5e99f2533ac4ef Mon Sep 17 00:00:00 2001 From: Jose De Freitas Jr Date: Fri, 27 Sep 2024 14:49:09 -0600 Subject: [PATCH 16/19] feat(pie-toast): DSW-2204 fixed typo --- apps/pie-storybook/stories/pie-toast.stories.ts | 2 +- packages/components/pie-toast/src/defs.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/pie-storybook/stories/pie-toast.stories.ts b/apps/pie-storybook/stories/pie-toast.stories.ts index 92d19a8d4e..9ffd55528a 100644 --- a/apps/pie-storybook/stories/pie-toast.stories.ts +++ b/apps/pie-storybook/stories/pie-toast.stories.ts @@ -66,7 +66,7 @@ const toastStoryMeta: ToastStoryMeta = { control: 'object', }, duration: { - description: 'It sets the duration of the toast in milliseconds before it auto-dismisses.', + description: 'Sets the duration of the toast in milliseconds before it auto-dismisses.', control: 'number', }, }, diff --git a/packages/components/pie-toast/src/defs.ts b/packages/components/pie-toast/src/defs.ts index 70c103c337..addfe5074c 100644 --- a/packages/components/pie-toast/src/defs.ts +++ b/packages/components/pie-toast/src/defs.ts @@ -46,7 +46,7 @@ export interface ToastProps { leadingAction?: ActionProps; /** - * It sets the duration of the toast in milliseconds before it auto-dismisses. + * Sets the duration of the toast in milliseconds before it auto-dismisses. * If the value is null auto-dismiss is disabled * If the value is not provided it auto-dismisses after 5 seconds (5000 milliseconds) */ From 89a3e972ebb46d127fcc34801638ced258400a4a Mon Sep 17 00:00:00 2001 From: Jose De Freitas Jr Date: Tue, 1 Oct 2024 17:37:55 -0600 Subject: [PATCH 17/19] feat(pie-toast): DSW-2204 making isOpen reactive to storybook --- .../stories/pie-toast.stories.ts | 44 ++++++++++++------- 1 file changed, 29 insertions(+), 15 deletions(-) diff --git a/apps/pie-storybook/stories/pie-toast.stories.ts b/apps/pie-storybook/stories/pie-toast.stories.ts index 9ffd55528a..2457e44dba 100644 --- a/apps/pie-storybook/stories/pie-toast.stories.ts +++ b/apps/pie-storybook/stories/pie-toast.stories.ts @@ -1,4 +1,5 @@ import { html } from 'lit'; +import { useArgs } from '@storybook/preview-api'; import { action } from '@storybook/addon-actions'; import { type Meta } from '@storybook/web-components'; import { type ToastProps, defaultProps, variants } from '@justeattakeaway/pie-toast'; @@ -94,21 +95,34 @@ const Template : TemplateFunction = ({ isStrong, variant, duration, -}: ToastProps) => html` - -`; +}: ToastProps) => { + const [, updateArgs] = useArgs(); + + const pieToastCloseHandle = () => { + updateArgs({ isOpen: false }); + pieToastClose(); + }; + + const pieToastOpenHandle = () => { + updateArgs({ isOpen: true }); + pieToastOpen(); + }; + + return html` + + `; +}; const createToastStory = createStory(Template, defaultArgs); From 0b0378fa0c0e782b67b8691c7827a1ce8f36c38d Mon Sep 17 00:00:00 2001 From: Jose De Freitas Jr Date: Tue, 1 Oct 2024 17:41:30 -0600 Subject: [PATCH 18/19] feat(pie-toast): DSW-2204 remove never type from setAutoDismiss --- packages/components/pie-toast/src/index.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/components/pie-toast/src/index.ts b/packages/components/pie-toast/src/index.ts index f3803a833f..7ae95e1998 100644 --- a/packages/components/pie-toast/src/index.ts +++ b/packages/components/pie-toast/src/index.ts @@ -88,9 +88,13 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps { * @private */ private setAutoDismiss () { + if (this.duration === null) { + return; + } + this._timeoutId = setTimeout(() => { this.closeToastComponent(); - }, this.duration || 0 as never); + }, this.duration); } /** From d1c248b12326d2c28eeeeb2c5c3c7f90a29d62bf Mon Sep 17 00:00:00 2001 From: Jose De Freitas Jr Date: Wed, 2 Oct 2024 11:27:58 -0600 Subject: [PATCH 19/19] feat(pie-toast): DSW-2204 added comments in updated lifecycle method for better clarity --- packages/components/pie-toast/src/index.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/components/pie-toast/src/index.ts b/packages/components/pie-toast/src/index.ts index 5113ad9481..ac1a81b4b7 100644 --- a/packages/components/pie-toast/src/index.ts +++ b/packages/components/pie-toast/src/index.ts @@ -197,6 +197,8 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps { /** * Lifecycle method executed when component is updated. * It dispatches an event if toast is opened. + * It adds event listeners when toast is opened and if the duration is not null + * It aborts all event listeners when toast is closed. * It calculates _messageAreaMaxWidth */ protected async updated (_changedProperties: PropertyValues) { @@ -212,6 +214,10 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps { this.abortAndCleanEventListeners(); } + // This lifecycle method is async on purpose because we + // need to wait for the component to complete its rendering + // so we can calculate _messageAreaMaxWidth based on + // existing components such as icons and action buttons. await this.updateComplete; if (this.actionButton) { @@ -222,6 +228,11 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps { this._messageAreaMaxWidth = this.getMessageMaxWidth(hasIcon, this.isMultiline, !!this.leadingAction?.text, this.isDismissible); + // It checks if there are changes on one of the properties + // below and requests a new update in order to repeat the + // lifecycle and perform new calculations. + // This will make sure that all components will re-render + // properly on Storybook. if ( _changedProperties.has('variant') || _changedProperties.has('isStrong') ||