Toast component

[emilybrick]

I branched off of this initial branch so that we could preserve all the styles @ampinsk explored, and just focus on the block style in this one.

Updates in this branch:

• only using the "block" style (though, need to remove 'block' from the CSS classname as this should just become the default
• removed buttons, so links + dismiss icons are the only actions
• design tweaks

To Do:

• swap border to inset box-shadow
• use flex to align icon + text
• make sure that if the text wraps to two lines and has a dismiss, the dismiss stays to the top right
• define what should be built into the component (should animation be a modifier?)
• merge into release branch for 12.5.0 /cc @shawnbot

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

[simurai]

Started to add a few comments, but then it got a bit messy. So here a PR with some tweaks: #834

Feel free to disagree if something is too opinionated. 😜

[simurai]

Oh.. one more thing. Should the .Toast component have by default a fixed bottom left position ?

An alternative might be that the component doesn't have to know where it is and it can be added in a wrapper like:

<div class="position-fixed bottom-0 left-0">
  <div class="Toast">...</div>
</div>

The nice thing about that would be that if there are multiple Toasts at the same time, they would just start to stack on top of each other.. and we don't really have to bother about queuing them or calculate their individual positions.

[simurai]

I think this is good to go. 👍 We can always tweak it further after using it for a bit.