feat: initial commit

src/components/ToggleSmall/ToggleSmall.Skeleton.svelte

@@ -0,0 +1,26 @@
+<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 ? undefined : $$props['aria-label'] || 'Toggle is loading';
+</script>
+
+<div {...props} class={_class}>
+  <input type="checkbox" class={cx('--toggle', '--toggle--small', '--skeleton')} {id} />
+  <label class={cx('--toggle__label --skeleton')} for={id}>
+    {#if labelText}
+      <span class={cx('--toggle__label-text')}>{labelText}</span>
+    {/if}
+    <span class={cx('--toggle__appearance')}>
+      <svg class={cx('--toggle__check')} width="6" height="5" viewBox="0 0 6 5">
+        <path d="M2.2403 2.7299L4.9245 0 6 1.1117 2.2384 5 0 2.6863 1.0612 1.511z" />
+      </svg>
+    </span>
+  </label>
+</div>

src/components/ToggleSmall/ToggleSmall.Story.svelte

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

src/components/ToggleSmall/ToggleSmall.stories.js

@@ -0,0 +1,31 @@
+import { withKnobs, boolean, text } from '@storybook/addon-knobs';
+import Component from './ToggleSmall.Story.svelte';
+
+export default { title: 'ToggleSmall', 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/ToggleSmall/ToggleSmall.svelte

@@ -0,0 +1,60 @@
+<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', '--toggle-input--small')}
+    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')}>
+      <svg width="6" height="5" viewBox="0 0 6 5" class={cx('--toggle__check')}>
+        <path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
+      </svg>
+      <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/ToggleSmall/index.js

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