Merge pull request #86 from metonym/refactor-checkbox

refactor(checkbox): make classes reactive

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>

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
-      <Checkbox {...checkboxProps} checked id="checkbox-label-2" />
+        {...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>

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),
+    hideLabel: boolean('No label (hideLabel)', false)
-    wrapperClass: text('Wrapper CSS class name (wrapperClass)', '')
   }
 });
 
@@ -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),
+    hideLabel: boolean('No label (hideLabel)', false)
-    wrapperClass: text('Wrapper CSS class name (wrapperClass)', '')
   }
 });
 

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 });
+    dispatch('check', checked);
-
-    if (inputRef) {
-      inputRef.checked = 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}>
+  <label class={cx('--checkbox-label')} for={id} title={title || undefined}>
-    <span class={_innerLabelClass}>{labelText}</span>
+    <span class={cx('--checkbox-label-text', hideLabel && '--visually-hidden')}>{labelText}</span>
   </label>
 </div>