Add notification toast

[connor-baer]

Addresses #792.

Purpose

Introduces the new NotificationToast component.
The notification toast component non-disruptively provides quick, contextual or feedback based on the outcome of an action.

It comes in 4 variants, "info", "confirm", "notify" and "alert".
To communicate a message always provide a body copy, and if needed an optional headline can be included above the body copy.
The notification toast floats above the content, positioned at the bottom of the screen, centralized horizontally withing the content area.
The auto-dismiss duration is adjustable (default minimum duration is 3000 ms).
Toasts can also be dismissed by clicking on a close button in the top-right corner. You need to provide closeButtonLabel.

Approach and changes

Refer to the Storybook for further implementation and usage guidelines, and to the threads below for more details and discussion on the implementation.

Definition of done

• Development completed
• Reviewers assigned
• Unit and integration tests
• Meets minimum browser support
• Meets accessibility requirements

[changeset-bot]

🦋 Changeset detected

Latest commit: 8341e46

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

This PR includes changesets to release 1 package

Name	Type
@sumup/circuit-ui	Minor

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

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/sumup/oss-circuit-ui/H111VsbR1A825HtetHksevYwJeUS
✅ Preview: https://oss-circuit-ui-git-notification-toast-sumup.vercel.app

[codecov]

Codecov Report

Merging #1295 (8341e46) into main (a063b20) will decrease coverage by 0.02%.
The diff coverage is 92.13%.

@@            Coverage Diff             @@
##             main    #1295      +/-   ##
==========================================
- Coverage   92.25%   92.22%   -0.03%     
==========================================
  Files         186      189       +3     
  Lines        3681     3770      +89     
  Branches     1153     1170      +17     
==========================================
+ Hits         3396     3477      +81     
- Misses        268      275       +7     
- Partials       17       18       +1     

Impacted Files	Coverage Δ
packages/circuit-ui/hooks/useStack/useStack.ts	93.10% <ø> (ø)
...components/NotificationToast/NotificationToast.tsx	90.47% <90.47%> (ø)
...ircuit-ui/components/ToastContext/ToastContext.tsx	92.10% <92.10%> (ø)
...rcuit-ui/components/ToastContext/createUseToast.ts	100.00% <100.00%> (ø)
...mponents/NotificationBanner/NotificationBanner.tsx	81.96% <0.00%> (-1.64%)	⬇️

[connor-baer]

I'm so excited to see this component coming to life. It's very satisfying to see so many existing APIs being reused and seamlessly composed together 🤩

A good chunk of the comments is grammar or typo fixes. Next time, please run documentation or other prose text through Grammarly before requesting reviews on a PR.

[robinmetral]

Since we paired on the actual feature, and @connor-baer already gave a thorough review, I'm just adding high-level comments here on things we missed (especially related to accessibility).

Also for docs: I think we should make sure that the "Usage in code" section you've added is more prominent: right now the docs start with props, as usual, but several of these props are actually internal. I'm not sure if there's anything we can do to make this clearer (can we show just props that the useToast takes?) but at least let's emphasise that NotificationToast should never be used directly anyways

[robinmetral]

Left lots of smaller comments, but it's looking good! 🙂

[robinmetral]

Thanks so much, this looks great! Let's move forward and address the minor follow-ups we talked about early in 2022 🥳