[discovery] Implement Toasts container

[adamstankiewicz]

Context

Currently, consumers of Paragon's Toast must render the Toast before its visible (for fade in transition to work properly). However, consumers need to implement their own state to determine whether the Toast is visible or not.

It may be helpful to provide a ToastContainer component with helpful utility function(s) to dynamically create/show Toast notifications as needed throughout the component rendering lifecycle.

Possibly use for inspiration:

• https://github.com/timolins/react-hot-toast
• https://www.npmjs.com/package/react-toastify

---

Prior notes:

Toast component makes it trivial to render a single toast for a given use case. However, it does not adequately provide a mechanism to support multiple toasts displayed at once, keeping their animation (fade in/out) and their default close behavior.

Ideas

• Should we separate out the logic of
  • "data" -> toastText
  • Some key that exists used as "global state" to flag when a toast is trigger on/off.

[bradenmacdonald]

I put a related comment on a PR: open-craft/frontend-app-authoring#38 (comment)

That what we really want when showing a toast is just to "push a message onto the toast queue" so that it will eventually get displayed to the user, without needing to worry about whether or not other toasts are also being displayed now.