Feat(web): Introduce the Toast component #DS-1112

[adamkudrna]

Description

Introduction of the Toast component. It's a composition of two subcomponents:

• Toast
• ToastBar (the message popup itself)

Additional context

Safe area inset on iPhone:

Virtual keyboard interaction on Android:

The same on iPhone (not working):

Issue reference

[netlify]

✅ Deploy Preview for spirit-design-system-demo canceled.

Name	Link
🔨 Latest commit	aeaa60e
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system-demo/deploys/65e0a90fb33a7c0007434014

[netlify]

✅ Deploy Preview for spirit-design-system-storybook canceled.

Name	Link
🔨 Latest commit	aeaa60e
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system-storybook/deploys/65e0a90f35e1cd00088b7c8f

[netlify]

✅ Deploy Preview for spirit-design-system-react canceled.

Name	Link
🔨 Latest commit	aeaa60e
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system-react/deploys/65e0a90f482cf100097f4abe

[netlify]

✅ Deploy Preview for spirit-design-system-validations canceled.

Name	Link
🔨 Latest commit	aeaa60e
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system-validations/deploys/65e0a90f9105ef00087bf976

[coveralls]

coverage: 80.15%. remained the same
when pulling aeaa60e on feature/web-toast
into c30f353 on main.

[literat]

Inverted variant has no hover effect on dismiss button?

[adamkudrna]

Inverted variant has no hover effect on dismiss button?

Just the border, not the background like in other button variants. Even the change of the border color is almost invisible. See https://spirit-design-system-demo.netlify.app/src/scss/components/button/.

[crishpeen]

LGTM, one thing I noticed is that when I open the demo on any of my devices, the floating bars are over the static ones and it is a little bit hard to distinguish them. Maybe at least one of them could be in some emotion color? Also when I switch to top alignment on my phone, I am not able to switch back without reloading. :)

[crishpeen]

Btw 😬

[adamkudrna]

LGTM, one thing I noticed is that when I open the demo on any of my devices, the floating bars are over the static ones and it is a little bit hard to distinguish them. Maybe at least one of them could be in some emotion color?

I know. Like this maybe?

Also when I switch to top alignment on my phone, I am not able to switch back without reloading. :)

Try scrolling the page 🙂.

[crishpeen]

Nice work! You can prepare a talk about Toast for next meetup :))