feat: initial commit

src/components/Toggle/Toggle.Skeleton.svelte

@@ -0,0 +1,24 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let id = undefined;
+  export let labelText = undefined;
+  export let props = {};
+
+  import { cx } from '../../lib';
+
+  const _class = cx('--form-item', className);
+  const ariaLabel = labelText ? null : $$props['aria-label'] || 'Toggle is loading';
+</script>
+
+<div {...props} class={_class}>
+  <input type="checkbox" class={cx('--toggle --skeleton')} {id} />
+  <label class={cx('--toggle__label', '--skeleton')} aria-label={ariaLabel} for={id}>
+    {#if labelText}
+      <span class={cx('--toggle__label-text')}>{labelText}</span>
+    {/if}
+    <span class={cx('--toggle__text--left')} />
+    <span class={cx('--toggle__appearance')} />
+    <span class={cx('--toggle__text--right')} />
+  </label>
+</div>

src/components/Toggle/Toggle.Story.svelte

@@ -0,0 +1,17 @@
+<script>
+  export let story = undefined;
+
+  import Layout from '../../internal/ui/Layout.svelte';
+  import Toggle from './Toggle.svelte';
+  import ToggleSkeleton from './Toggle.Skeleton.svelte';
+</script>
+
+<Layout>
+  {#if story === 'toggled'}
+    <Toggle {...$$props} id="toggle-1" toggled />
+  {:else if story === 'skeleton'}
+    <ToggleSkeleton />
+  {:else}
+    <Toggle {...$$props} id="toggle-1" />
+  {/if}
+</Layout>

src/components/Toggle/Toggle.stories.js

@@ -0,0 +1,31 @@
+import { withKnobs, boolean, text } from '@storybook/addon-knobs';
+import Component from './Toggle.Story.svelte';
+
+export default { title: 'Toggle', decorators: [withKnobs] };
+
+export const Default = () => ({
+  Component,
+  props: {
+    labelText: text('Label toggle input control (labelText)', ''),
+    'aria-label': text('ARIA label of the toggle (aria-label)', ''),
+    labelA: text('Label for untoggled state (labelA)', 'Off'),
+    labelB: text('Label for toggled state (labelB)', 'On'),
+    disabled: boolean('Disabled (disabled)', false)
+  }
+});
+
+Default.story = { name: 'Default (untoggled)' };
+
+export const Toggled = () => ({
+  Component,
+  props: {
+    story: 'toggled',
+    labelText: text('Label toggle input control (labelText)', ''),
+    'aria-label': text('ARIA label of the toggle (aria-label)', ''),
+    labelA: text('Label for untoggled state (labelA)', 'Off'),
+    labelB: text('Label for toggled state (labelB)', 'On'),
+    disabled: boolean('Disabled (disabled)', false)
+  }
+});
+
+export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });

src/components/Toggle/Toggle.svelte

@@ -0,0 +1,56 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let id = Math.random();
+  export let toggled = false;
+  export let disabled = false;
+  export let labelText = undefined;
+  export let labelA = 'Off';
+  export let labelB = 'On';
+  export let props = {};
+
+  import { createEventDispatcher } from 'svelte';
+  import { cx } from '../../lib';
+
+  const dispatch = createEventDispatcher();
+  const _class = cx('--form-item', className);
+  const ariaLabel = labelText ? undefined : $$props['aria-label'] || 'Toggle';
+  let inputRef = undefined;
+
+  function handleChange(event) {
+    dispatch('change', event);
+    dispatch('toggle', { checked: inputRef.checked, id, event });
+  }
+
+  function handleKeyUp(event) {
+    if (event.key === 'Enter') {
+      if (inputRef) {
+        inputRef.checked = !inputRef.checked;
+      }
+
+      handleChange(event);
+    }
+  }
+</script>
+
+<div class={_class}>
+  <input
+    {...props}
+    type="checkbox"
+    class={cx('--toggle-input')}
+    bind:this={inputRef}
+    checked={toggled}
+    {disabled}
+    {id}
+    on:change
+    on:change={handleChange}
+    on:keyup
+    on:keyup={handleKeyUp} />
+  <label class={cx('--toggle-input__label')} for={id} aria-label={ariaLabel}>
+    {labelText}
+    <span class={cx('--toggle__switch')}>
+      <span aria-hidden="true" class={cx('--toggle__text--off')}>{labelA}</span>
+      <span aria-hidden="true" class={cx('--toggle__text--on')}>{labelB}</span>
+    </span>
+  </label>
+</div>

src/components/Toggle/index.js

@@ -0,0 +1,4 @@
+import Toggle from './Toggle.svelte';
+
+export default Toggle;
+export { default as ToggleSkeleton } from './Toggle.Skeleton.svelte';