feat(toasts): MVP - No Animation

[FMorrison87]

Brief Description

This PR is for the stripped down, basic rux-toast and rux-toast-stack components. No animation, no toast amount restriction in the toast stack.

A toast is a trivial alert that pops up within the user's field-of-view in any of the corners of the viewport. Toasts stack and array downward as they come in.

The rux-toast props are message, hideClose and closeAfter which handles the toast message, hides the close icon, and adds in auto-close functionality, respectively.

The rux-toast-stack component manages the placement and imperative creation of toasts. It includes the position prop which handles where the stack is placed in the viewport and the addToast() method which handles creating toasts and adding them to the particular stack.

JIRA Link

TOAST-MVP Ticket

Related Issue

General Notes

This component is meant to be a relatively bare bones, but highly extensible MVP for a toast alert. We can, and should extend it to have toast animation, and toast stack restriction functionality. Animation as it is a better experience for the app user so toasts appearing in the viewport is not so jarring, and stack restriction as design has stipulated that we don't want to have more than 4 toasts displaying at a time in the stack. For stack restriction, not having this set at the component level does not restrict the app developer from adding their own styling.

There are two separate branches where most of the animation and a good deal of the stack restriction work has been completed, but it is well behind this MVP branch, so it will need to be carefully merged if that work is to be carried over: fm.6189-poc-toasts fm.toast-MVP

Motivation and Context

These new components solve the problem of app developers wanting an app alert for tangential notifications. Toasts should be trivial enough that if they are not seen or read, they do not affect critical user action, but they serve the purpose of lower-level confirmations, such as for save states.

Issues and Limitations

Types of changes

• [ ] Bug fix
• [x] New feature
• [ ] Breaking change

Checklist

• [x] This PR adds or removes a Storybook story.
• [x] I have added tests to cover my changes.
• [x] Regressions are passing and/or failures are documented
• [x] Changes have been checked in evergreen browsers

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 0b5658e88abe40d7b32d45981881f1ee746e6369

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

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

[netlify[bot]]

✅ Deploy Preview for astro-stencil canceled.

Name	Link
🔨 Latest commit	0b5658e88abe40d7b32d45981881f1ee746e6369
🔍 Latest deploy log	https://app.netlify.com/sites/astro-stencil/deploys/649d951d2602990008496c96

[netlify[bot]]

✅ Deploy Preview for astro-preview canceled.

Name	Link
🔨 Latest commit	0b5658e88abe40d7b32d45981881f1ee746e6369
🔍 Latest deploy log	https://app.netlify.com/sites/astro-preview/deploys/649d951d75764200083fc9fa

[FMorrison87]

/update-snapshots