Merge pull request #52 from metonym/fix-checkbox

fix(checkbox): support two way binding

src/components/Checkbox/Checkbox.Skeleton.svelte

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

src/components/Checkbox/Checkbox.Story.svelte

@@ -1,19 +1,13 @@
 <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
-  };
+  const { labelText, indeterminate, disabled, hideLabel, wrapperClassName } = $$props;
+  const checkboxProps = { labelText, indeterminate, disabled, hideLabel, wrapperClassName };
 </script>
 
 <Layout>

src/components/Checkbox/Checkbox.stories.js

@@ -26,7 +26,4 @@ export const Unchecked = () => ({
   }
 });
 
-export const Skeleton = () => ({
-  Component,
-  props: { story: 'skeleton' }
-});
+export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });

src/components/Checkbox/Checkbox.svelte

@@ -4,13 +4,13 @@
   export let checked = false;
   export let indeterminate = false;
   export let disabled = false;
-  export let id = undefined;
+  export let id = Math.random();
   export let labelText = undefined;
   export let hideLabel = false;
   export let title = '';
   export let wrapperClassName = undefined;
   export { wrapperClassName as wrapperClass };
-  export let props = {};
+  export let style = undefined;
 
   import { createEventDispatcher } from 'svelte';
   import { cx } from '../../lib';
@@ -20,17 +20,26 @@
   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 });
+  let inputRef = undefined;
+
+  $: {
+    dispatch('check', { id, checked });
+
+    if (inputRef) {
+      inputRef.checked = checked;
+    }
   }
 </script>
 
-<div class={_wrapperClass}>
+<div on:click on:mouseover on:mouseenter on:mouseleave class={_wrapperClass} {style}>
   <input
-    {...props}
+    bind:this={inputRef}
     type="checkbox"
     class={cx('--checkbox')}
-    on:change={handleChange}
+    on:change
+    on:change={() => {
+      checked = !checked;
+    }}
     {indeterminate}
     {disabled}
     {checked}