WIP: SelectableTileGroup

src/Tile/RadioTile.svelte

@@ -8,6 +8,9 @@
   /** Specify the value of the radio input */
   export let value = "";
 
+  /** Specify the title of the selectable tile */
+  export let title = "title";
+
   /** Specify the tabindex */
   export let tabindex = "0";
 
@@ -20,10 +23,15 @@
   /** Specify a name attribute for the input */
   export let name = "";
 
+  /** Obtain a reference to the input HTML element */
+  export let ref = null;
+
   import { getContext } from "svelte";
   import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
 
-  const { add, update, selectedValue } = getContext("TileGroup");
+  const { _light, add, update, selectedValue } = getContext("RadioTileGroup");
+
+  light = light || _light;
 
   add({ value, checked });
 
@@ -31,13 +39,15 @@
 </script>
 
 <input
+  bind:this="{ref}"
   type="radio"
   id="{id}"
   name="{name}"
   value="{value}"
   checked="{checked}"
-  tabindex="{tabindex}"
+  tabindex="-1"
   class:bx--tile-input="{true}"
+  title="{title}"
   on:change
   on:change="{() => {
     update(value);
@@ -52,6 +62,7 @@
 />
 <label
   for="{id}"
+  tabindex="{tabindex}"
   class:bx--tile="{true}"
   class:bx--tile--selectable="{true}"
   class:bx--tile--is-selected="{checked}"

src/Tile/RadioTileGroup.svelte

@@ -0,0 +1,47 @@
+<script>
+  /**
+   * Specify the selected tile value
+   * @type {string}
+   */
+  export let selectedValue = undefined;
+
+  /** Set to `true` to disable the tile group */
+  export let disabled = false;
+
+  /** Set to `true` to enable the light variant */
+  export let light = false;
+
+  /** Specify the legend text */
+  export let legend = "";
+
+  import { createEventDispatcher, setContext } from "svelte";
+  import { writable } from "svelte/store";
+
+  const dispatch = createEventDispatcher();
+  const _selectedValue = writable(selectedValue);
+
+  setContext("RadioTileGroup", {
+    _light: light,
+    selectedValue: _selectedValue,
+    add: ({ checked, value }) => {
+      if (checked) {
+        _selectedValue.set(value);
+      }
+    },
+    update: (value) => {
+      _selectedValue.set(value);
+    },
+  });
+
+  $: selectedValue = $_selectedValue;
+  $: dispatch("select", $_selectedValue);
+</script>
+
+<fieldset disabled="{disabled}" class:bx--tile-group="{true}" {...$$restProps}>
+  {#if legend}
+    <legend class:bx--label="{true}">{legend}</legend>
+  {/if}
+  <div>
+    <slot />
+  </div>
+</fieldset>

src/Tile/SelectableTile.svelte

@@ -29,12 +29,16 @@
   /** Obtain a reference to the input HTML element */
   export let ref = null;
 
-  import { createEventDispatcher } from "svelte";
+  import { getContext } from "svelte";
   import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
 
-  const dispatch = createEventDispatcher();
+  const { _light, update, selectedValues } = getContext("SelectableTileGroup");
 
-  $: dispatch(selected ? "select" : "deselect", id);
+  light = light || _light;
+
+  update({ value, selected });
+
+  $: selected = $selectedValues.indexOf(value) > -1;
 </script>
 
 <input
@@ -57,9 +61,7 @@
   class:bx--tile--light="{light}"
   {...$$restProps}
   on:click
-  on:click|preventDefault="{() => {
-    selected = !selected;
-  }}"
+  on:click|preventDefault="{() => update(value, !selected)}"
   on:mouseover
   on:mouseenter
   on:mouseleave
@@ -67,7 +69,7 @@
   on:keydown="{(e) => {
     if (e.key === ' ' || e.key === 'Enter') {
       e.preventDefault();
-      selected = !selected;
+      update(value, !selected);
     }
   }}"
 >

src/Tile/SelectableTileGroup.svelte

@@ -0,0 +1,52 @@
+<script>
+  /**
+   * Specify the selected tile's
+   * @type {string}
+   */
+  export let selectedValues = [];
+
+  /** Set to `true` to disable the tile group */
+  export let disabled = false;
+
+  /** Set to `true` to enable the light variant */
+  export let light = false;
+
+  /** Specify the legend text */
+  export let legend = "";
+
+  import { createEventDispatcher, setContext } from "svelte";
+  import { writable } from "svelte/store";
+
+  const dispatch = createEventDispatcher();
+  const _selectedValues = writable(selectedValues);
+
+  function newArray(value, selected) {
+    let a = $_selectedValues;
+    const i = a.indexOf(value);
+    if (selected && i === -1) {
+      a = a.concat([value]);
+    } else if (!selected && i > -1) {
+      a = a.splice(index, 1);
+    }
+    return a;
+  }
+
+  setContext("SelectableTileGroup", {
+    _light: light,
+    selectedValues: _selectedValues,
+    update: ({ selected, value }) =>
+      _selectedValues.set(newArray(value, selected)),
+  });
+
+  $: selectedValues = $_selectedValues;
+  $: dispatch("select", $_selectedValues);
+</script>
+
+<fieldset disabled="{disabled}" class:bx--tile-group="{true}" {...$$restProps}>
+  {#if legend}
+    <legend class:bx--label="{true}">{legend}</legend>
+  {/if}
+  <div>
+    <slot />
+  </div>
+</fieldset>

src/Tile/TileGroup.svelte

@@ -17,7 +17,7 @@
   const dispatch = createEventDispatcher();
   const selectedValue = writable(selected);
 
-  setContext("TileGroup", {
+  setContext("RadioTileGroup", {
     selectedValue,
     add: ({ checked, value }) => {
       if (checked) {

src/Tile/index.js

@@ -4,3 +4,5 @@ export { default as ExpandableTile } from "./ExpandableTile.svelte";
 export { default as SelectableTile } from "./SelectableTile.svelte";
 export { default as RadioTile } from "./RadioTile.svelte";
 export { default as TileGroup } from "./TileGroup.svelte";
+export { default as RadioTileGroup } from "./RadioTileGroup.svelte";
+export { default as SelectableTileGroup } from "./SelectableTileGroup.svelte";

src/index.js

@@ -107,6 +107,8 @@ export {
   SelectableTile,
   RadioTile,
   TileGroup,
+  RadioTileGroup,
+  SelectableTileGroup,
 } from "./Tile";
 export { TimePicker, TimePickerSelect } from "./TimePicker";
 export { Toggle, ToggleSkeleton } from "./Toggle";