From d4abc1dfd32b2c75bb7535a9334f953ab08a24d5 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Tue, 31 Dec 2019 16:22:40 -0800
Subject: [PATCH] refactor(radio-button-group): change defaultSelected to
 selected

---
 src/components/RadioButton/RadioButton.svelte  | 10 +++++-----
 .../RadioButtonGroup.Story.svelte              |  4 +++-
 .../RadioButtonGroup/RadioButtonGroup.svelte   | 18 +++++++++---------
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/components/RadioButton/RadioButton.svelte b/src/components/RadioButton/RadioButton.svelte
index 684fdd6d..d5571659 100644
--- a/src/components/RadioButton/RadioButton.svelte
+++ b/src/components/RadioButton/RadioButton.svelte
@@ -1,15 +1,15 @@
 <script>
   let className = undefined;
   export { className as class };
-  export let value = '';
   export let checked = false;
   export let disabled = false;
-  export let id = Math.random();
-  export let labelText = '';
   export let hideLabel = false;
+  export let id = Math.random();
   export let labelPosition = 'right';
+  export let labelText = '';
   export let name = '';
   export let style = undefined;
+  export let value = '';
 
   import { getContext } from 'svelte';
   import { writable } from 'svelte/store';
@@ -17,13 +17,13 @@
 
   const ctx = getContext('RadioButtonGroup');
 
-  let selected = ctx ? ctx.selected : writable(checked ? value : undefined);
+  let selectedValue = ctx ? ctx.selectedValue : writable(checked ? value : undefined);
 
   if (ctx) {
     ctx.add({ id, checked, disabled, value });
   }
 
-  $: checked = $selected === value;
+  $: checked = $selectedValue === value;
 </script>
 
 <div
diff --git a/src/components/RadioButtonGroup/RadioButtonGroup.Story.svelte b/src/components/RadioButtonGroup/RadioButtonGroup.Story.svelte
index 67690f80..b4bfc244 100644
--- a/src/components/RadioButtonGroup/RadioButtonGroup.Story.svelte
+++ b/src/components/RadioButtonGroup/RadioButtonGroup.Story.svelte
@@ -3,11 +3,13 @@
   import RadioButtonGroup from './RadioButtonGroup.svelte';
   import RadioButton from '../RadioButton';
   import FormGroup from '../FormGroup';
+
+  let selected = 'default-selected';
 </script>
 
 <Layout>
   <FormGroup legendText="Radio Button heading">
-    <RadioButtonGroup {...$$props.group} defaultSelected="default-selected" legend="Group Legend">
+    <RadioButtonGroup {...$$props.group} legend="Group Legend" bind:selected>
       <RadioButton {...$$props.radio} value="standard" id="radio-1" />
       <RadioButton {...$$props.radio} value="default-selected" id="radio-2" />
       <RadioButton {...$$props.radio} value="disabled" id="radio-3" />
diff --git a/src/components/RadioButtonGroup/RadioButtonGroup.svelte b/src/components/RadioButtonGroup/RadioButtonGroup.svelte
index 94427c18..58e136ea 100644
--- a/src/components/RadioButtonGroup/RadioButtonGroup.svelte
+++ b/src/components/RadioButtonGroup/RadioButtonGroup.svelte
@@ -1,10 +1,10 @@
 <script>
   let className = undefined;
   export { className as class };
-  export let orientation = 'horizontal';
-  export let labelPosition = 'right';
-  export let defaultSelected = undefined;
+  export let selected = undefined;
   export let disabled = false;
+  export let labelPosition = 'right';
+  export let orientation = 'horizontal';
   export let style = undefined;
 
   import { createEventDispatcher, setContext } from 'svelte';
@@ -13,23 +13,23 @@
 
   const dispatch = createEventDispatcher();
 
-  let selected = writable(defaultSelected);
+  let selectedValue = writable(selected);
 
   setContext('RadioButtonGroup', {
-    selected,
+    selectedValue,
     add: ({ checked, value }) => {
       if (checked) {
-        selected.set(value);
+        selectedValue.set(value);
       }
     },
     update: value => {
-      selected.set(value);
+      selectedValue.set(value);
     }
   });
 
+  $: selected = $selectedValue;
   $: {
-    defaultSelected = $selected;
-    dispatch('change', $selected);
+    dispatch('change', $selectedValue);
   }
 </script>