From 724196abb5990363ae3e3fed6e721b208233966a Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Fri, 20 Dec 2019 19:13:56 -0800
Subject: [PATCH] fix(checkbox): support two way binding

- Forward events, inline functions
- Add style, remove exported props (#7)
---
 .../Checkbox/Checkbox.Skeleton.svelte         |  4 ++--
 src/components/Checkbox/Checkbox.Story.svelte | 10 ++------
 src/components/Checkbox/Checkbox.stories.js   |  5 +---
 src/components/Checkbox/Checkbox.svelte       | 23 +++++++++++++------
 4 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.Skeleton.svelte b/src/components/Checkbox/Checkbox.Skeleton.svelte
index 9d54c584..30afa041 100644
--- a/src/components/Checkbox/Checkbox.Skeleton.svelte
+++ b/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>
diff --git a/src/components/Checkbox/Checkbox.Story.svelte b/src/components/Checkbox/Checkbox.Story.svelte
index c8257664..4da4a5b7 100644
--- a/src/components/Checkbox/Checkbox.Story.svelte
+++ b/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>
diff --git a/src/components/Checkbox/Checkbox.stories.js b/src/components/Checkbox/Checkbox.stories.js
index 90d1a0a5..7ba8b3c3 100644
--- a/src/components/Checkbox/Checkbox.stories.js
+++ b/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' } });
diff --git a/src/components/Checkbox/Checkbox.svelte b/src/components/Checkbox/Checkbox.svelte
index 450914d4..575b368e 100644
--- a/src/components/Checkbox/Checkbox.svelte
+++ b/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}