chore: lift components folder

src/Checkbox/Checkbox.Skeleton.svelte

@@ -0,0 +1,11 @@
+<div
+  class:bx--form-item={true}
+  class:bx--checkbox-wrapper={true}
+  class:bx--checkbox-label={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
+  <span class:bx--checkbox-label-text={true} class:bx--skeleton={true} />
+</div>

src/Checkbox/Checkbox.Story.svelte

@@ -0,0 +1,47 @@
+<script>
+  export let story = undefined;
+
+  import Checkbox from "./Checkbox.svelte";
+  import CheckboxSkeleton from "./Checkbox.Skeleton.svelte";
+
+  const {
+    labelText,
+    indeterminate,
+    disabled,
+    hideLabel,
+    wrapperClassName
+  } = $$props;
+  const checkboxProps = {
+    labelText,
+    indeterminate,
+    disabled,
+    hideLabel,
+    wrapperClassName
+  };
+
+  let checked = true;
+</script>
+
+{#if story === 'skeleton'}
+  <div>
+    <CheckboxSkeleton />
+  </div>
+{:else if story === 'unchecked'}
+  <fieldset class="bx--fieldset">
+    <legend class="bx--label">Checkbox heading</legend>
+    <Checkbox {...checkboxProps} id="checkbox-label-1" />
+    <Checkbox {...checkboxProps} id="checkbox-label-2" />
+  </fieldset>
+{:else}
+  <fieldset class="bx--fieldset">
+    <legend class="bx--label">Checkbox heading</legend>
+    <Checkbox
+      {...checkboxProps}
+      id="checkbox-label-1"
+      bind:checked
+      on:check={({ detail }) => {
+        console.log('on:check', detail);
+      }} />
+    <Checkbox {...checkboxProps} id="checkbox-label-2" checked />
+  </fieldset>
+{/if}

src/Checkbox/Checkbox.stories.js

@@ -0,0 +1,27 @@
+import { withKnobs, boolean, text } from "@storybook/addon-knobs";
+import Component from "./Checkbox.Story.svelte";
+
+export default { title: "Checkbox", decorators: [withKnobs] };
+
+export const Checked = () => ({
+  Component,
+  props: {
+    labelText: text("Label text (labelText)", "Checkbox label"),
+    indeterminate: boolean("Intermediate (indeterminate)", false),
+    disabled: boolean("Disabled (disabled)", false),
+    hideLabel: boolean("Hide label (hideLabel)", false),
+  },
+});
+
+export const Unchecked = () => ({
+  Component,
+  props: {
+    story: "unchecked",
+    labelText: text("Label text (labelText)", "Checkbox label"),
+    indeterminate: boolean("Intermediate (indeterminate)", false),
+    disabled: boolean("Disabled (disabled)", false),
+    hideLabel: boolean("Hide label (hideLabel)", false),
+  },
+});
+
+export const Skeleton = () => ({ Component, props: { story: "skeleton" } });

src/Checkbox/Checkbox.svelte

@@ -0,0 +1,49 @@
+<script>
+  export let indeterminate = false;
+  export let readonly = false;
+  export let checked = false;
+  export let disabled = false;
+  export let labelText = "";
+  export let hideLabel = false;
+  export let id = "ccs-" + Math.random().toString(36);
+  export let name = "";
+  export let title = undefined;
+  export let ref = null;
+
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+
+  $: dispatch("check", checked);
+</script>
+
+<div
+  class:bx--form-item={true}
+  class:bx--checkbox-wrapper={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
+  <input
+    bind:this={ref}
+    type="checkbox"
+    {checked}
+    {disabled}
+    {id}
+    {indeterminate}
+    {name}
+    {readonly}
+    class:bx--checkbox={true}
+    on:change
+    on:change={() => {
+      checked = !checked;
+    }} />
+  <label class:bx--checkbox-label={true} for={id} {title}>
+    <span
+      class:bx--checkbox-label-text={true}
+      class:bx--visually-hidden={hideLabel}>
+      {labelText}
+    </span>
+  </label>
+</div>

src/Checkbox/index.js

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