refactor(radio-button-group): change defaultSelected to selected

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

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" />

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>