feat: initial commit

src/components/Checkbox/Checkbox.Skeleton.svelte

@@ -0,0 +1,13 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let props = {};
+
+  import { cx } from '../../lib';
+
+  const _class = cx('--form-item', '--checkbox-wrapper', className);
+</script>
+
+<div {...props} class={_class}>
+  <span class={cx('--checkbox-label', '--skeleton')} />
+</div>

src/components/Checkbox/Checkbox.Story.svelte

@@ -0,0 +1,35 @@
+<script>
+  export let story = undefined;
+  const { labelText, indeterminate, disabled, hideLabel, wrapperClassName } = $$props;
+
+  import { cx } from '../../lib';
+  import Layout from '../../internal/ui/Layout.svelte';
+  import Checkbox from './Checkbox.svelte';
+  import CheckboxSkeleton from './Checkbox.Skeleton.svelte';
+
+  const checkboxProps = {
+    labelText,
+    indeterminate,
+    disabled,
+    hideLabel,
+    wrapperClassName
+  };
+</script>
+
+<Layout>
+  {#if story === 'skeleton'}
+    <CheckboxSkeleton />
+  {:else if story === 'unchecked'}
+    <fieldset class={cx('--fieldset')}>
+      <legend class={cx('--label')}>Checkbox heading</legend>
+      <Checkbox {...checkboxProps} id="checkbox-label-1" />
+      <Checkbox {...checkboxProps} id="checkbox-label-2" />
+    </fieldset>
+  {:else}
+    <fieldset class={cx('--fieldset')}>
+      <legend class={cx('--label')}>Checkbox heading</legend>
+      <Checkbox {...checkboxProps} checked id="checkbox-label-1" />
+      <Checkbox {...checkboxProps} checked id="checkbox-label-2" />
+    </fieldset>
+  {/if}
+</Layout>

src/components/Checkbox/Checkbox.stories.js

@@ -0,0 +1,32 @@
+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('No label (hideLabel)', false),
+    wrapperClass: text('Wrapper CSS class name (wrapperClass)', '')
+  }
+});
+
+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('No label (hideLabel)', false),
+    wrapperClass: text('Wrapper CSS class name (wrapperClass)', '')
+  }
+});
+
+export const Skeleton = () => ({
+  Component,
+  props: { story: 'skeleton' }
+});

src/components/Checkbox/Checkbox.svelte

@@ -0,0 +1,41 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let checked = false;
+  export let indeterminate = false;
+  export let disabled = false;
+  export let id = undefined;
+  export let labelText = undefined;
+  export let hideLabel = false;
+  export let title = '';
+  export let wrapperClassName = undefined;
+  export { wrapperClassName as wrapperClass };
+  export let props = {};
+
+  import { createEventDispatcher } from 'svelte';
+  import { cx } from '../../lib';
+
+  const dispatch = createEventDispatcher();
+  const _labelClass = cx('--checkbox-label', className);
+  const _innerLabelClass = cx('--checkbox-label-text', hideLabel && '--visually-hidden');
+  const _wrapperClass = cx('--form-item', '--checkbox-wrapper', wrapperClassName);
+
+  function handleChange(event) {
+    dispatch('change', { checked: event.target.checked, id, event });
+  }
+</script>
+
+<div class={_wrapperClass}>
+  <input
+    {...props}
+    type="checkbox"
+    class={cx('--checkbox')}
+    on:change={handleChange}
+    {indeterminate}
+    {disabled}
+    {checked}
+    {id} />
+  <label for={id} class={_labelClass} title={title || null}>
+    <span class={_innerLabelClass}>{labelText}</span>
+  </label>
+</div>

src/components/Checkbox/index.js

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