feat(components): add RadioButtonGroup

Closes #25

src/components/RadioButton/RadioButton.Skeleton.svelte

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

src/components/RadioButton/RadioButton.Story.svelte

@@ -8,11 +8,8 @@
 </script>
 
 <Layout>
-
   {#if story === 'skeleton'}
-    <div>
-      <RadioButtonSkeleton />
-    </div>
+    <RadioButtonSkeleton />
   {:else}
     <RadioButton {...$$props} id="radio-1" />
   {/if}

src/components/RadioButton/RadioButton.svelte

@@ -9,26 +9,38 @@
   export let hideLabel = false;
   export let labelPosition = 'right';
   export let name = '';
-  export let props = {};
+  export let style = undefined;
 
+  import { getContext } from 'svelte';
+  import { writable } from 'svelte/store';
   import { cx } from '../../lib';
 
+  const ctx = getContext('RadioButtonGroup');
   const _class = cx(
     '--radio-button-wrapper',
     labelPosition !== 'right' && `--radio-button-wrapper--label-${labelPosition}`,
     className
   );
   const _innerLabelClass = cx(hideLabel && '--visually-hidden');
+
+  let selected = ctx ? ctx.selected : writable(checked ? value : undefined);
+
+  if (ctx) {
+    ctx.add({ id, checked, disabled, value });
+  }
+
+  $: checked = $selected === value;
 </script>
 
-<div class={_class}>
+<div class={_class} {style}>
   <input
-    {...props}
     type="radio"
     class={cx('--radio-button')}
     on:change
-    on:change={event => {
-      value = event.target.value;
+    on:change={() => {
+      if (ctx) {
+        ctx.update(value);
+      }
     }}
     {id}
     {name}