feat(design): add basic switch component

[gracetxgao]

PR Checklist

Please check if your PR fulfills the following requirements:

• 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

[xelaint]

To do:

• Loading state
• Disabled state (ability to disable a switch, or set disabled when toggle is also loading)
• Show error message if switch fails to toggle
• A label position property that changes the orientation of the label from being displayed left or right of the toggle UI
• ARIA considerations (https://www.w3.org/WAI/ARIA/apg/patterns/switch/)
• Keyboard interactions

[xelaint]

To-do ARIA considerations (https://www.w3.org/WAI/ARIA/apg/patterns/switch/):

• A visible label referenced by the value of aria-labelledby set on the element with role switch.
• aria-label set on the element with role switch.
• When on, the switch element has state aria-checked set to true.
• When off, the switch element has state aria-checked set to false.

[xelaint]

@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.

[xelaint]

Keyboard functionalities:

• tab key should tab to a switch. Switches are currently not tabbable.
• space key to toggle the switch.

[xelaint]

There seems to be something funny with tabindex and focus. When I tab to the first switch and then tab again, the focus goes somewhere not visible. Focus goes to the HTML button upon the 3rd tab.

Tabbing after focus is on the switch should move focus to the next available element (in this case is the HTML button). Something else that's not visible within the component seems to be tabbable.

[damienwebdev]

@gracetxgao please remove the package-lock.json from this diff.

[xelaint]

@gracetxgao please rebase on develop since we pushed updates to linting, so there may be a few linting errors in this PR.

[damienwebdev]

lgtm