From 60d9258d0baaeccbc7b2f1a30c3c1db543989a1e Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 29 Dec 2019 18:52:20 -0800
Subject: [PATCH] refactor(checkbox): make classes reactive

---
 .../Checkbox/Checkbox.Skeleton.svelte         | 10 ++++---
 src/components/Checkbox/Checkbox.Story.svelte | 12 +++++++--
 src/components/Checkbox/Checkbox.stories.js   |  6 ++---
 src/components/Checkbox/Checkbox.svelte       | 26 +++++++------------
 4 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.Skeleton.svelte b/src/components/Checkbox/Checkbox.Skeleton.svelte
index 30afa041..ee39cbe7 100644
--- a/src/components/Checkbox/Checkbox.Skeleton.svelte
+++ b/src/components/Checkbox/Checkbox.Skeleton.svelte
@@ -4,10 +4,14 @@
   export let style = undefined;
 
   import { cx } from '../../lib';
-
-  const _class = cx('--form-item', '--checkbox-wrapper', className);
 </script>
 
-<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
+<div
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  class={cx('--form-item', '--checkbox-wrapper', className)}
+  {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 4da4a5b7..beb33761 100644
--- a/src/components/Checkbox/Checkbox.Story.svelte
+++ b/src/components/Checkbox/Checkbox.Story.svelte
@@ -8,6 +8,8 @@
 
   const { labelText, indeterminate, disabled, hideLabel, wrapperClassName } = $$props;
   const checkboxProps = { labelText, indeterminate, disabled, hideLabel, wrapperClassName };
+
+  let checked = true;
 </script>
 
 <Layout>
@@ -22,8 +24,14 @@
   {: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" />
+      <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}
 </Layout>
diff --git a/src/components/Checkbox/Checkbox.stories.js b/src/components/Checkbox/Checkbox.stories.js
index 7ba8b3c3..9f1f715f 100644
--- a/src/components/Checkbox/Checkbox.stories.js
+++ b/src/components/Checkbox/Checkbox.stories.js
@@ -9,8 +9,7 @@ export const Checked = () => ({
     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)', '')
+    hideLabel: boolean('No label (hideLabel)', false)
   }
 });
 
@@ -21,8 +20,7 @@ export const 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)', '')
+    hideLabel: boolean('No label (hideLabel)', false)
   }
 });
 
diff --git a/src/components/Checkbox/Checkbox.svelte b/src/components/Checkbox/Checkbox.svelte
index 575b368e..e7303f38 100644
--- a/src/components/Checkbox/Checkbox.svelte
+++ b/src/components/Checkbox/Checkbox.svelte
@@ -8,32 +8,26 @@
   export let labelText = undefined;
   export let hideLabel = false;
   export let title = '';
-  export let wrapperClassName = undefined;
-  export { wrapperClassName as wrapperClass };
   export let style = undefined;
 
   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);
-
-  let inputRef = undefined;
 
   $: {
-    dispatch('check', { id, checked });
-
-    if (inputRef) {
-      inputRef.checked = checked;
-    }
+    dispatch('check', checked);
   }
 </script>
 
-<div on:click on:mouseover on:mouseenter on:mouseleave class={_wrapperClass} {style}>
+<div
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  class={cx('--form-item', '--checkbox-wrapper', className)}
+  {style}>
   <input
-    bind:this={inputRef}
     type="checkbox"
     class={cx('--checkbox')}
     on:change
@@ -44,7 +38,7 @@
     {disabled}
     {checked}
     {id} />
-  <label for={id} class={_labelClass} title={title || null}>
-    <span class={_innerLabelClass}>{labelText}</span>
+  <label class={cx('--checkbox-label')} for={id} title={title || undefined}>
+    <span class={cx('--checkbox-label-text', hideLabel && '--visually-hidden')}>{labelText}</span>
   </label>
 </div>