chore: lift components folder

src/ToggleSmall/ToggleSmall.Skeleton.svelte

@@ -0,0 +1,38 @@
+<script>
+  export let labelText = "";
+  export let id = "ccs-" + Math.random().toString(36);
+</script>
+
+<div
+  class:bx--form-item={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
+  <input
+    type="checkbox"
+    {id}
+    class:bx--toggle={true}
+    class:bx--toggle--small={true}
+    class:bx--skeleton={true} />
+  <label
+    aria-label={labelText ? undefined : $$props['aria-label'] || 'Toggle is loading'}
+    class:bx--toggle__label={true}
+    class:bx--skeleton={true}
+    for={id}>
+    {#if labelText}
+      <span class:bx--toggle__label-text={true}>{labelText}</span>
+    {/if}
+    <span class:bx--toggle__appearance={true}>
+      <svg
+        class:bx--toggle__check={true}
+        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/ToggleSmall/ToggleSmall.Story.svelte

@@ -0,0 +1,21 @@
+<script>
+  export let story = undefined;
+
+  import ToggleSmall from "./ToggleSmall.svelte";
+  import ToggleSmallSkeleton from "./ToggleSmall.Skeleton.svelte";
+
+  $: toggled = true;
+  $: console.log("bind:toggled", toggled);
+</script>
+
+{#if story === 'toggled'}
+  <ToggleSmall
+    {...$$props}
+    id="toggle-small-id"
+    name="toggle-small-name"
+    bind:toggled />
+{:else if story === 'skeleton'}
+  <ToggleSmallSkeleton />
+{:else}
+  <ToggleSmall {...$$props} id="toggle-small-id" name="toggle-small-name" />
+{/if}

src/ToggleSmall/ToggleSmall.stories.js

@@ -0,0 +1,35 @@
+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),
+    id: text("ToggleSmall id", "toggle-small-id"),
+    name: text("ToggleSmall name", "toggle-small-name"),
+  },
+});
+
+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),
+    id: text("ToggleSmall id", "toggle-small-id"),
+    name: text("ToggleSmall name", "toggle-small-name"),
+  },
+});
+
+export const Skeleton = () => ({ Component, props: { story: "skeleton" } });

src/ToggleSmall/ToggleSmall.svelte

@@ -0,0 +1,58 @@
+<script>
+  export let toggled = false;
+  export let disabled = false;
+  export let labelA = "Off";
+  export let labelB = "On";
+  export let labelText = "";
+  export let id = "ccs-" + Math.random().toString(36);
+  export let name = undefined;
+</script>
+
+<div
+  class:bx--form-item={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
+  <input
+    type="checkbox"
+    checked={toggled}
+    {disabled}
+    {id}
+    {name}
+    class:bx--toggle-input={true}
+    class:bx--toggle-input--small={true}
+    on:change
+    on:change={() => {
+      toggled = !toggled;
+    }}
+    on:keyup
+    on:keyup={e => {
+      if (e.key === ' ' || e.key === 'Enter') {
+        e.preventDefault();
+        toggled = !toggled;
+      }
+    }}
+    on:focus
+    on:blur />
+  <label
+    aria-label={labelText ? undefined : $$props['aria-label'] || 'Toggle'}
+    for={id}
+    class:bx--toggle-input__label={true}>
+    {labelText}
+    <span class:bx--toggle__switch={true}>
+      <svg
+        width="6"
+        height="5"
+        viewBox="0 0 6 5"
+        class:bx--toggle__check={true}>
+        <path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
+      </svg>
+      <span aria-hidden="true" class:bx--toggle__text--off={true}>
+        {labelA}
+      </span>
+      <span aria-hidden="true" class:bx--toggle__text--on={true}>{labelB}</span>
+    </span>
+  </label>
+</div>

src/ToggleSmall/index.js

@@ -0,0 +1,2 @@
+export { default as ToggleSmall } from "./ToggleSmall.svelte";
+export { default as ToggleSmallSkeleton } from "./ToggleSmall.Skeleton.svelte";