Feat(web): Introduce UNSTABLE Toggle component #DS-1345

[crishpeen]

Description

Additional context

Issue reference

[netlify]

✅ Deploy Preview for spirit-design-system ready!

Name	Link
🔨 Latest commit	8a409b8
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system/deploys/66966294ab6d1a0008bce213
😎 Deploy Preview	https://deploy-preview-1543--spirit-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 96 (no change from production) Accessibility: 93 (no change from production) Best Practices: 100 (no change from production) SEO: 82 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

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

Name	Link
🔨 Latest commit	8a409b8
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system-storybook/deploys/6696629412a7080008701c02

[coveralls]

coverage: 77.951%. remained the same
when pulling 8a409b8 on feat/web-toggle
into bd48607 on main.

[dlouhak]

🎩 , I have only a few comments.

During the code review, I came up with a few insights, mostly related to the stable version of this component:

1. In the Figma it is possible to set if the component has icon or not. This shouldn't be implemented?

2. Should it be possible change state by clicking on the validation/helper text? (related to the Checkbox component, where you probably inspired yourself). And I've also noticed that in the example of validation states the danger variant with multiple error messages doesn't have cursor over label.

3. Nitpicking idea for form components: If there would be a composition of various form components, I can imagine that designer would like to have possibility to set order of the component (toggle-label or label-toggle), because eg. Checkbox has input first and then label. The same applies for transitions between checked/unchecked states.
   

[crishpeen]

🎩 , I have only a few comments.

During the code review, I came up with a few insights, mostly related to the stable version of this component:

1. In the Figma it is possible to set if the component has icon or not. This shouldn't be implemented?

2. Should it be possible **change state by clicking on the validation/helper text**? (related to the Checkbox component, where you probably inspired yourself). And I've also noticed that in the example of validation states the danger variant with multiple error messages doesn't have cursor over label. 3. Nitpicking idea for form components: If there would be a composition of various form components, I can imagine that designer would like to have **possibility to set order of the component** (toggle-label or label-toggle), because eg. `Checkbox` has input first and then label. The same applies for transitions between checked/unchecked states. 

1. yes, I missed that
2. it acts the same as in checkbox, the danger state with multiple validation texts is a problem and I will create a topic for our thurday talks, because currently we are causing invalid HTML and I don't know what is the best solution. The current state is as elsewhere (not ideal, but working)
3. We decided to do this layout now. In relatively short term we plan to split all form components to small pieces and user will be able to combine them as they want.

[github-actions]

Here is the URL of the uploaded artifact: https://github.com/lmc-eu/spirit-design-system/actions/runs/9956403469/artifacts/1706068420