From 746ce9278b59ccd24116b654fa76513883a1b64d Mon Sep 17 00:00:00 2001
From: Richard O'flynn <richard.oflynn@brighter-software.co.uk>
Date: Tue, 1 Dec 2020 00:20:23 +0000
Subject: [PATCH] implement change requests

---
 docs/src/pages/components/RadioTile.svx      | 14 ++++++++++++
 docs/src/pages/components/SelectableTile.svx | 16 +++++++++++++-
 src/Tile/SelectableTileGroup.svelte          | 23 ++++++--------------
 3 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/docs/src/pages/components/RadioTile.svx b/docs/src/pages/components/RadioTile.svx
index 3488dc26..9c86a04f 100644
--- a/docs/src/pages/components/RadioTile.svx
+++ b/docs/src/pages/components/RadioTile.svx
@@ -26,3 +26,17 @@ components: ["RadioTileGroup", "RadioTile"]
     Plus plan
   </RadioTile>
 </RadioTileGroup>
+
+### Light variant
+
+<RadioTileGroup legend="Service pricing tiers">
+  <RadioTile light value="0" checked>
+    Lite plan
+  </RadioTile>
+  <RadioTile light value="1">
+    Standard plan
+  </RadioTile>
+  <RadioTile light value="2">
+    Plus plan
+  </RadioTile>
+</RadioTileGroup>
diff --git a/docs/src/pages/components/SelectableTile.svx b/docs/src/pages/components/SelectableTile.svx
index 6fd62c92..1bea70db 100644
--- a/docs/src/pages/components/SelectableTile.svx
+++ b/docs/src/pages/components/SelectableTile.svx
@@ -7,7 +7,7 @@ components: ["SelectableTile", "SelectableTileGroup"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Multi-selectable tiles
+### Default
 
 <SelectableTileGroup legend="Select the options you require">
   <SelectableTile title="Option 1" value="option1" selected>
@@ -20,3 +20,17 @@ components: ["SelectableTile", "SelectableTileGroup"]
     Option 3
   </SelectableTile>
 </SelectableTileGroup>
+
+### Light variant
+
+<SelectableTileGroup legend="Select the options you require">
+  <SelectableTile light title="Option 1" value="option1" selected>
+    Option 1
+  </SelectableTile>
+  <SelectableTile light title="Option 2" value="2" selected>
+    Option 2
+  </SelectableTile>
+  <SelectableTile light title="Option 3" value="3">
+    Option 3
+  </SelectableTile>
+</SelectableTileGroup>
diff --git a/src/Tile/SelectableTileGroup.svelte b/src/Tile/SelectableTileGroup.svelte
index 9c966a9a..110d8f1e 100644
--- a/src/Tile/SelectableTileGroup.svelte
+++ b/src/Tile/SelectableTileGroup.svelte
@@ -5,9 +5,6 @@
    */
   export let selectedValues = [];
 
-  /** Set to `true` to disable the tile group */
-  export let disabled = false;
-
   /** Specify the legend text */
   export let legend = "";
 
@@ -17,28 +14,22 @@
   const dispatch = createEventDispatcher();
   const _selectedValues = writable(selectedValues);
 
-  function newArray(value, selected) {
-    let a = [...$_selectedValues];
-    const i = a.indexOf(value);
-    if (selected && i === -1) {
-      a.push(value);
-    } else if (!selected && i > -1) {
-      a.splice(i, 1);
-    }
-    return a;
-  }
-
   setContext("SelectableTileGroup", {
     selectedValues: _selectedValues,
     update: ({ selected, value }) =>
-      _selectedValues.set(newArray(value, selected)),
+      _selectedValues.update((_) => {
+        if (_.includes(value)) {
+          return _.filter((i) => i !== value);
+        }
+        return [..._, value];
+      }),
   });
 
   $: selectedValues = $_selectedValues;
   $: dispatch("select", $_selectedValues);
 </script>
 
-<fieldset disabled="{disabled}" class:bx--tile-group="{true}" {...$$restProps}>
+<fieldset class:bx--tile-group="{true}" {...$$restProps}>
   {#if legend}
     <legend class:bx--label="{true}">{legend}</legend>
   {/if}