refactor(tile-group): change defaultSelected to selected

src/components/Tile/RadioTile.svelte

@@ -2,23 +2,23 @@
   let className = undefined;
   export { className as class };
   export let checked = false;
-  export let id = Math.random();
-  export let name = '';
   export let iconDescription = 'Tile checkmark';
-  export let value = '';
+  export let id = Math.random();
-  export let tabindex = '0';
   export let light = false;
+  export let name = '';
   export let style = undefined;
+  export let tabindex = '0';
+  export let value = '';
 
   import { getContext } from 'svelte';
   import CheckmarkFilled16 from 'carbon-icons-svelte/lib/CheckmarkFilled16';
   import { cx } from '../../lib';
 
-  const { addTile, updateSelected, selected } = getContext('TileGroup');
+  const { add, update, selectedValue } = getContext('TileGroup');
 
-  addTile({ id, value, checked });
+  add({ value, checked });
 
-  $: checked = value === $selected.value;
+  $: checked = value === $selectedValue;
 </script>
 
 <input
@@ -26,7 +26,7 @@
   class={cx('--tile-input')}
   on:change
   on:change={() => {
-    updateSelected({ id, value });
+    update(value);
   }}
   {id}
   {name}
@@ -43,7 +43,7 @@
   on:keydown={event => {
     if (event.key === ' ' || event.key === 'Enter') {
       event.preventDefault();
-      updateSelected({ id, value });
+      update(value);
     }
   }}
   {tabindex}

src/components/Tile/Tile.Story.svelte

@@ -2,14 +2,14 @@
   export let story = undefined;
 
   import Layout from '../../internal/ui/Layout.svelte';
-  import Tile from './Tile.svelte';
   import ClickableTile from './ClickableTile.svelte';
-  import SelectableTile from './SelectableTile.svelte';
   import ExpandableTile from './ExpandableTile.svelte';
+  import RadioTile from './RadioTile.svelte';
+  import SelectableTile from './SelectableTile.svelte';
+  import Tile from './Tile.svelte';
   import TileAboveTheFoldContent from './TileAboveTheFoldContent.svelte';
   import TileBelowTheFoldContent from './TileBelowTheFoldContent.svelte';
   import TileGroup from './TileGroup.svelte';
-  import RadioTile from './RadioTile.svelte';
 
   const radioTiles = [
     { value: 'standard', id: 'tile-1', labelText: 'Selectable Tile' },
@@ -17,7 +17,7 @@
     { value: 'selected', id: 'tile-3', labelText: 'Selectable Tile' }
   ];
 
-  let defaultSelected = radioTiles[1];
+  let selected = radioTiles[1].value;
 </script>
 
 <Layout>
@@ -33,7 +33,7 @@
         <SelectableTile {...$$props} id="tile-3" name="tiles">Multi-select Tile</SelectableTile>
       </div>
     {:else if story === 'selectable'}
-      <TileGroup legend="Selectable Tile Group" bind:defaultSelected>
+      <TileGroup legend="Selectable Tile Group" bind:selected>
         {#each radioTiles as { value, id, labelText }, i (id)}
           <RadioTile {...$$props} {value} {id} {labelText}>Selectable Tile</RadioTile>
         {/each}

src/components/Tile/TileGroup.svelte

@@ -1,7 +1,7 @@
 <script>
   let className = undefined;
   export { className as class };
-  export let defaultSelected = { value: undefined };
+  export let selected = undefined;
   export let disabled = false;
   export let legend = '';
   export let style = undefined;
@@ -11,44 +11,30 @@
   import { cx } from '../../lib';
 
   const dispatch = createEventDispatcher();
-  let tiles = [];
+
-  let selected = writable(defaultSelected);
+  let selectedValue = writable(selected);
 
   setContext('TileGroup', {
-    selected,
+    selectedValue,
-    addTile: tile => {
+    add: ({ checked, value }) => {
-      tiles = [...tiles, tile];
+      if (checked) {
+        selectedValue.set(value);
+      }
     },
-    updateSelected: tile => {
+    update: value => {
-      selected.set(tile);
+      selectedValue.set(value);
     }
   });
 
+  $: selected = $selectedValue;
   $: {
-    const checkedTiles = tiles.filter(tile => tile.checked);
+    dispatch('select', $selectedValue);
-
-    if (checkedTiles.length > 1) {
-      console.warn('Multiple RadioTiles cannot be checked.');
-
-      if (defaultSelected.value) {
-        console.warn('Using `defaultSelected`:', defaultSelected);
-      } else {
-        console.warn('Using `RadioTile`:', checkedTiles[0]);
-        selected.set(checkedTiles[0]);
-      }
-    } else if (checkedTiles.length === 1) {
-      selected.set(checkedTiles[0]);
-      tiles = [];
-    }
-
-    defaultSelected = $selected;
-    dispatch('select', $selected);
   }
 </script>
 
 <fieldset class={cx('--tile-group', className)} {disabled} {style}>
   {#if legend}
-    <legend>{legend}</legend>
+    <legend class={cx('--label')}>{legend}</legend>
   {/if}
   <div>
     <slot />