feat(Toggle): new component

[alinahorodetska]

Add a new Toggle component.
Related story: https://jira.textkernel.nl/browse/ONEUI-241

Checklist

• The implementation has been manually tested and complies with Textkernel browser support guidelines
• The implementation complies with accessibility standards.
• The component has a displayName defined.
• The component comes with a detailed PropTypes (and defaultProps) definition.
• Component PropTypes are sufficiently described / documented.
• There is a story in Storybook.

[carlobernardini]

When the toggle is switched on and disabled, it looks like it's switched off. Can you apply --color-green-25 when it's on + disabled?

[alinahorodetska]

When the toggle is switched on and disabled, it looks like it's switched off. Can you apply --color-green-25 when it's on + disabled?

sure, I can!
but again I did the same as we have in Checkbox (color natural if it checked), but yeah in Checkbox it is more obvious that it is checked =)

[carlobernardini]

but again I did the same as we have in Checkbox

While indeed it's more obvious for Checkbox, I think we can do the same there. I'll look into it + focus state.

[mukiienko]

For me, Toogle label looks more aligned without align-items: center;

[mukiienko]

Animation doesn't work smoothly the first time:

Screen.Recording.2021-02-28.at.12.36.05.mov

[alinahorodetska]

For me, Toogle label looks more aligned without align-items: center;

---

@mukiienko
Well, for me it is more aligned with align-items: center;

Screen.Recording.2021-03-01.at.10.31.32.mov

@carlobernardini what do you think?

[alinahorodetska]

Animation doesn't work smoothly the first time:

@mukiienko interesting. For me it works smoothly in all browsers.

Screen.Recording.2021-03-01.at.10.41.47.mov

What browser and what version do you use?

[carlobernardini]

@agorodetskaya For me it also seems to be better aligned without align-items: center in Chrome. In Safari I'm not sure, but the difference is more subtle.

What seems to work for me is when I apply the same styling as for Checkbox:

1. Apply var(--spacing-normal) 0 var(--spacing-normal) var(--spacing-2x) to the label text.
2. Keep align-items: center.