feat(pie-toast): DSW-2204 implement auto-dismiss / persistent feature

[thejfreitas]

In this Pull Request we are implementing the auto-dismiss feature after 5 seconds or when configurable via duration property and deactivating it if the duration property is null as well persistence when the user hover the mouse onto the component and when the user focus on the action button and close button using the keyboard avoiding closing the toast and reseting the auto-dismiss functionality.

Extra

We've created additional documentation pages for each variant as well its combination with isStrong property.

Screenshots and Videos

Screen.Recording.2024-09-13.at.2.40.03.PM.mov

═══════════════════════════════════════════════════════════

Describe your changes (can list changeset entries if preferable)

Author Checklist (complete before requesting a review)

• I have performed a self-review of my code
• I have added thorough tests where applicable (unit / component / visual)
• I have reviewed the PIE Storybook/PIE Docs PR preview
• I have reviewed visual test updates properly before approving
• If changes will affect consumers of the package, I have created a changeset entry.
• If a changeset file has been created, I have used the /snapit functionality to test my changes in a consuming application

Reviewer checklists (complete before approving)

Reviewer 1 - @jamieomaguire

• I have reviewed the PIE Storybook/PIE Docs PR preview
• If there are visual test updates, I have reviewed them

Reviewer 2 - @xander-marjoram

• I have reviewed the PIE Storybook/PIE Docs PR preview
• If there are visual test updates, I have reviewed them

[changeset-bot]

🦋 Changeset detected

Latest commit: d1c248b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 12 packages

Name	Type
@justeattakeaway/pie-toast	Minor
pie-storybook	Minor
@justeattakeaway/pie-webc	Patch
wc-angular12	Patch
wc-next10	Patch
wc-next13	Patch
wc-nuxt2	Patch
wc-nuxt3	Patch
wc-react17	Patch
wc-react18	Patch
wc-vanilla	Patch
wc-vue3	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

[Lint PR Title] ❌ Failed.
The PR title should follow the same convention used for commits, e.g.:
type(scope): DSW-123 title where DSW-123 is the Jira ticket id or DSW-000 when one is not available.

[Lint PR Title] ✅ All good!

[kevinrodrigues]

LGTM 🎉 We may need some component tests for some of the behaviour?

[thejfreitas]

A couple of comments about the storybook preview, I'm happy if you want to address these in a follow-up PR:

1. Please can you use UseArgs to link the value of isOpen to the current state of the toast? We use it in a few components to create a two-way binding between the control and its value (e.g., checked in pie-radio), it makes for quite a nice experience, in my opinion. In this case it makes it easier to reopen the toast once it has dismissed itself.
2. I noticed that if you load the toast story with isDismissible = false, the close button is still shown: https://pr1862-storybook.pie.design/?path=/story/toast--auto-dismiss&args=isDismissible:!false
3. If you set the duration to 10000 and refresh the page to restart the timer, then after 5 seconds close and immediately reopen the toast, it will close again once the original 10 seconds is finished. For me the expected behaviour is that the timer should be reset when the toast is reopened.

1. has been solved. 2 and 3 needs more time to investigate which we can involve more people to fix these issues.

[thejfreitas]

/test-aperture

[pie-design-system-bot]

Starting a new snapshot build. You can view the logs here.

[pie-design-system-bot]

The build failed, please see the logs or take a look at the Workflow Tooling wiki page to make sure your PR meets the requirements.

[xander-marjoram]

I'm happy to approve this because it all seems to work well and I don't want to stand in your way too much. I would appreciate if you could address my request to add that comment, but that can be as part of a follow-up PR if you like.

[thejfreitas]

I'm happy to approve this because it all seems to work well and I don't want to stand in your way too much. I would appreciate if you could address my request to add that comment, but that can be as part of a follow-up PR if you like.

Since my approvals were reset I took the opportunity to add the comments in this PR already. I totally missed that comment.
Its done ✅