feat(components): add Switch story

Author: hobbitronics

components/mdc/Switch/Switch.svelte

@@ -0,0 +1,73 @@
+<!--  https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch -->
+<script>
+import { MDCSwitch } from '@material/switch'
+import { createEventDispatcher, onMount } from 'svelte'
+
+/**
+ * displayed right of the switch
+ */
+export let label = 'off/on'
+/**
+ * disables the switch
+ */
+export let disabled = false
+/**
+ * used to set the switch initial state
+ */
+export let selected = false
+
+let element = {}
+let switchControl = {}
+
+onMount(() => {
+  switchControl = new MDCSwitch(element)
+})
+
+const dispatch = createEventDispatcher()
+
+// Used setTimeout because switchControl.selected needs to be updated before dispatching the event
+function onClick() {
+  setTimeout(() => dispatch(switchControl.selected ? 'selected' : 'deselected'))
+}
+</script>
+
+<!--
+  @component
+  Used to toggle an item on tablet and mobile devices or immediately activate/deactive something
+  see https://silinternational.github.io/ui-components/?path=/docs/atoms-switch--primary for usage
+-->
+
+<button
+  on:click={onClick}
+  bind:this={element}
+  id="basic-switch"
+  class="mdc-switch"
+  class:mdc-switch--selected={selected}
+  class:mdc-switch--unselected={!selected}
+  type="button"
+  role="switch"
+  aria-checked={selected}
+  {disabled}
+>
+  <div class="mdc-switch__track" />
+  <div class="mdc-switch__handle-track">
+    <div class="mdc-switch__handle">
+      <div class="mdc-switch__shadow">
+        <div class="mdc-elevation-overlay" />
+      </div>
+      <div class="mdc-switch__ripple" />
+      <div class="mdc-switch__icons">
+        <svg class="mdc-switch__icon mdc-switch__icon--on" viewBox="0 0 24 24">
+          <path d="M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z" />
+        </svg>
+        <svg class="mdc-switch__icon mdc-switch__icon--off" viewBox="0 0 24 24">
+          <path d="M20 13H4v-2h16v2z" />
+        </svg>
+      </div>
+    </div>
+  </div>
+  <span class="mdc-switch__focus-ring-wrapper">
+    <div class="mdc-switch__focus-ring" />
+  </span>
+</button>
+<label for="basic-switch">{label}</label>

components/mdc/Switch/_index.scss

@@ -0,0 +1 @@
+@use '@material/switch/styles';

components/mdc/Switch/index.js

@@ -0,0 +1,4 @@
+import './_index.scss'
+import Switch from './Switch.svelte'
+
+export default Switch

components/mdc/index.js

@@ -21,6 +21,7 @@ import Page from './Page'
 import Progress from './Progress'
 import Select from './Select'
 import Snackbar from './Snackbar'
+import Switch from './Switch'
 import TabBar from './TabBar'
 import { TextArea, TextField, MoneyInput } from './TextInput'
 import Tooltip from './Tooltip'
@@ -55,4 +56,5 @@ export {
   Snackbar,
   Select,
   setNotice,
+  Switch,
 }

stories/Switch.stories.svelte

@@ -0,0 +1,24 @@
+<script>
+import { Meta, Template, Story } from '@storybook/addon-svelte-csf'
+import { Switch } from '../components/mdc'
+
+const args = {
+  class: '',
+  'on:selected': () => alert('switch is on'),
+  'on:deselected': () => alert('switch is off'),
+}
+</script>
+
+<Meta title="Atoms/Switch" component={Switch} />
+
+<Template let:args>
+  <Switch {...args} on:selected={args['on:selected']} on:deselected={args['on:deselected']} />
+</Template>
+
+<Story name="Primary" {args} />
+
+<Story name="Label" args={{ ...args, label: 'ON/OFF' }} />
+
+<Story name="Disabled" args={{ ...args, disabled: true }} />
+
+<Story name="Initially Selected" args={{ ...args, selected: true }} />