feat(design): add basic switch component
PR Checklist
Please check if your PR fulfills the following requirements:
- [x] The commit message follows our guidelines: https://github.com/graycoreio/daffodil/blob/develop/CONTRIBUTING.md#commit
- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
PR Type
What kind of change does this PR introduce?
[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:
What is the current behavior?
Starter for #1022
What is the new behavior?
A basic switch component is set up.
Does this PR introduce a breaking change?
[ ] Yes
[x] No
Other information
To do:
- [x] Loading state
- [x] Disabled state (ability to disable a switch, or set disabled when toggle is also loading)
- [x] Show error message if switch fails to toggle
- [x] A label position property that changes the orientation of the label from being displayed left or right of the toggle UI
- [x] ARIA considerations (https://www.w3.org/WAI/ARIA/apg/patterns/switch/)
- [x] Keyboard interactions
To-do ARIA considerations (https://www.w3.org/WAI/ARIA/apg/patterns/switch/):
- [x] A visible label referenced by the value of aria-labelledby set on the element with role switch.
- [x] aria-label set on the element with role switch.
- [x] When on, the switch element has state aria-checked set to true.
- [x] When off, the switch element has state aria-checked set to false.
@gracetxgao I went ahead and made updates to the aria labels. Lmk if you have any questions.
In the basic switch example, clicking on the disabled or loading switches toggles the default switch. Clicking on the switch in switch-label-positions-example also toggles the default switch. I think you may need to add form controls to examples.
@gracetxgao please remove the package-lock.json from this diff.
@gracetxgao please rebase on develop since we pushed updates to linting, so there may be a few linting errors in this PR.