chore: lift components folder

src/Toggle/Toggle.Skeleton.svelte

@@ -0,0 +1,30 @@
+<script>
+  export let id = "ccs-" + Math.random().toString(36);
+  export let labelText = "";
+</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--skeleton={true} />
+  <label
+    aria-label={labelText ? undefined : $$props['aria-label'] || 'Toggle is loading'}
+    for={id}
+    class:bx--toggle__label={true}
+    class:bx--skeleton={true}>
+    {#if labelText}
+      <span class:bx--toggle__label-text={true}>{labelText}</span>
+    {/if}
+    <span class:bx--toggle__text--left={true} />
+    <span class:bx--toggle__appearance={true} />
+    <span class:bx--toggle__text--right={true} />
+  </label>
+</div>

src/Toggle/Toggle.Story.svelte

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

src/Toggle/Toggle.stories.js

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

src/Toggle/Toggle.svelte

@@ -0,0 +1,50 @@
+<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"
+    class:bx--toggle-input={true}
+    checked={toggled}
+    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
+    {disabled}
+    {id}
+    {name} />
+  <label
+    aria-label={labelText ? undefined : $$props['aria-label'] || 'Toggle'}
+    for={id}
+    class:bx--toggle-input__label={true}>
+    {labelText}
+    <span class:bx--toggle__switch={true}>
+      <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/Toggle/index.js

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