From 10e6f1c79d3aba19d75244d0c835202db29288ef Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Tue, 31 Dec 2019 15:20:14 -0800
Subject: [PATCH] refactor(tile-group): change defaultSelected to selected

---
 src/components/Tile/RadioTile.svelte  | 18 ++++++------
 src/components/Tile/Tile.Story.svelte | 10 +++----
 src/components/Tile/TileGroup.svelte  | 40 +++++++++------------------
 3 files changed, 27 insertions(+), 41 deletions(-)

diff --git a/src/components/Tile/RadioTile.svelte b/src/components/Tile/RadioTile.svelte
index 1f3e33f8..fd4c2c2c 100644
--- a/src/components/Tile/RadioTile.svelte
+++ b/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 tabindex = '0';
+  export let id = Math.random();
   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}
diff --git a/src/components/Tile/Tile.Story.svelte b/src/components/Tile/Tile.Story.svelte
index c527a321..df08a77e 100644
--- a/src/components/Tile/Tile.Story.svelte
+++ b/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}
diff --git a/src/components/Tile/TileGroup.svelte b/src/components/Tile/TileGroup.svelte
index 6e0f87ae..2492ddf3 100644
--- a/src/components/Tile/TileGroup.svelte
+++ b/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,
-    addTile: tile => {
-      tiles = [...tiles, tile];
+    selectedValue,
+    add: ({ checked, value }) => {
+      if (checked) {
+        selectedValue.set(value);
+      }
     },
-    updateSelected: tile => {
-      selected.set(tile);
+    update: value => {
+      selectedValue.set(value);
     }
   });
 
+  $: selected = $selectedValue;
   $: {
-    const checkedTiles = tiles.filter(tile => tile.checked);
-
-    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);
+    dispatch('select', $selectedValue);
   }
 </script>
 
 <fieldset class={cx('--tile-group', className)} {disabled} {style}>
   {#if legend}
-    <legend>{legend}</legend>
+    <legend class={cx('--label')}>{legend}</legend>
   {/if}
   <div>
     <slot />