WIP: SelectableTileGroup

COMPONENT_INDEX.md

@@ -1,6 +1,6 @@
 # Component Index
 
-> 155 components exported from carbon-components-svelte@0.25.1.
+> 157 components exported from carbon-components-svelte@0.25.1.
 
 ## Components
 
@@ -97,6 +97,7 @@
 - [`RadioButtonGroup`](#radiobuttongroup)
 - [`RadioButtonSkeleton`](#radiobuttonskeleton)
 - [`RadioTile`](#radiotile)
+- [`RadioTileGroup`](#radiotilegroup)
 - [`Row`](#row)
 - [`Search`](#search)
 - [`SearchSkeleton`](#searchskeleton)
@@ -105,6 +106,7 @@
 - [`SelectItemGroup`](#selectitemgroup)
 - [`SelectSkeleton`](#selectskeleton)
 - [`SelectableTile`](#selectabletile)
+- [`SelectableTileGroup`](#selectabletilegroup)
 - [`SideNav`](#sidenav)
 - [`SideNavItems`](#sidenavitems)
 - [`SideNavLink`](#sidenavlink)
@@ -2693,10 +2695,12 @@ None.
 ### Props
 
 | Prop name       | Kind             | Reactive | Type                                      | Default value                                    | Description                                              |
-| :-------------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | -------------------------------------------------------- |
+| :-------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | -------------------------------------------------------- |
+| ref             | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code> | <code>null</code>                                | Obtain a reference to the input HTML element             |
+| light           | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to enable the light variant                |
 | checked         | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to check the tile                          |
-| light           | <code>let</code> | No       | <code>boolean</code> | <code>false</code>                               | Set to `true` to enable the light variant                |
 | value           | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the value of the radio input                     |
+| title           | <code>let</code> | No       | <code>string</code>                       | <code>"title"</code>                             | Specify the title of the selectable tile                 |
 | tabindex        | <code>let</code> | No       | <code>string</code>                       | <code>"0"</code>                                 | Specify the tabindex                                     |
 | iconDescription | <code>let</code> | No       | <code>string</code>                       | <code>"Tile checkmark"</code>                    | Specify the ARIA label for the radio tile checkmark icon |
 | id              | <code>let</code> | No       | <code>string</code>                       | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element                          |
@@ -2719,6 +2723,29 @@ None.
 | mouseenter | forwarded | --     |
 | mouseleave | forwarded | --     |
 
+## `RadioTileGroup`
+
+### Props
+
+| Prop name     | Kind             | Reactive | Type                 | Default value      | Description                               |
+| :------------ | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- |
+| selectedValue | <code>let</code> | Yes      | <code>string</code>  | --                 | Specify the selected tile value           |
+| disabled      | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tile group   |
+| light         | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
+| legend        | <code>let</code> | No       | <code>string</code>  | <code>""</code>    | Specify the legend text                   |
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| --        | Yes     | --    | --       |
+
+### Events
+
+| Event name | Type       | Detail |
+| :--------- | :--------- | :----- |
+| select     | dispatched | --     |
+
 ## `Row`
 
 ### Props
@@ -2904,8 +2931,8 @@ None.
 | Prop name       | Kind             | Reactive | Type                                      | Default value                                    | Description                                                   |
 | :-------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- |
 | ref             | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code> | <code>null</code>                                | Obtain a reference to the input HTML element                  |
+| light           | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to enable the light variant                     |
 | selected        | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to select the tile                              |
-| light           | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to enable the light variant                     |
 | title           | <code>let</code> | No       | <code>string</code>                       | <code>"title"</code>                             | Specify the title of the selectable tile                      |
 | value           | <code>let</code> | No       | <code>string</code>                       | <code>"value"</code>                             | Specify the value of the selectable tile                      |
 | tabindex        | <code>let</code> | No       | <code>string</code>                       | <code>"0"</code>                                 | Specify the tabindex                                          |
@@ -2929,6 +2956,29 @@ None.
 | mouseleave | forwarded | --     |
 | keydown    | forwarded | --     |
 
+## `SelectableTileGroup`
+
+### Props
+
+| Prop name      | Kind             | Reactive | Type                 | Default value      | Description                               |
+| :------------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- |
+| selectedValues | <code>let</code> | Yes      | <code>string</code>  | <code>[]</code>    | Specify the selected tile's               |
+| disabled       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tile group   |
+| light          | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
+| legend         | <code>let</code> | No       | <code>string</code>  | <code>""</code>    | Specify the legend text                   |
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| --        | Yes     | --    | --       |
+
+### Events
+
+| Event name | Type       | Detail |
+| :--------- | :--------- | :----- |
+| select     | dispatched | --     |
+
 ## `SideNav`
 
 ### Props

docs/src/COMPONENT_API.json

@@ -1,5 +1,5 @@
 {
-  "total": 155,
+  "total": 157,
   "components": [
     {
       "moduleName": "SkeletonText",
@@ -8534,7 +8534,7 @@
           "value": "false",
           "isFunction": false,
           "constant": false,
-          "reactive": false
+          "reactive": true
         },
         {
           "name": "title",
@@ -8640,7 +8640,7 @@
           "value": "false",
           "isFunction": false,
           "constant": false,
-          "reactive": false
+          "reactive": true
         },
         {
           "name": "value",
@@ -8652,6 +8652,16 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "title",
+          "kind": "let",
+          "description": "Specify the title of the selectable tile",
+          "type": "string",
+          "value": "\"title\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "tabindex",
           "kind": "let",
@@ -8691,6 +8701,16 @@
           "isFunction": false,
           "constant": false,
           "reactive": false
+        },
+        {
+          "name": "ref",
+          "kind": "let",
+          "description": "Obtain a reference to the input HTML element",
+          "type": "null | HTMLInputElement",
+          "value": "null",
+          "isFunction": false,
+          "constant": false,
+          "reactive": true
         }
       ],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
@@ -8744,6 +8764,105 @@
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "fieldset" }
     },
+    {
+      "moduleName": "RadioTileGroup",
+      "filePath": "/src/Tile/RadioTileGroup.svelte",
+      "props": [
+        {
+          "name": "selectedValue",
+          "kind": "let",
+          "description": "Specify the selected tile value",
+          "type": "string",
+          "isFunction": false,
+          "constant": false,
+          "reactive": true
+        },
+        {
+          "name": "disabled",
+          "kind": "let",
+          "description": "Set to `true` to disable the tile group",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "light",
+          "kind": "let",
+          "description": "Set to `true` to enable the light variant",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "legend",
+          "kind": "let",
+          "description": "Specify the legend text",
+          "type": "string",
+          "value": "\"\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        }
+      ],
+      "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+      "events": [{ "type": "dispatched", "name": "select" }],
+      "typedefs": [],
+      "rest_props": { "type": "Element", "name": "fieldset" }
+    },
+    {
+      "moduleName": "SelectableTileGroup",
+      "filePath": "/src/Tile/SelectableTileGroup.svelte",
+      "props": [
+        {
+          "name": "selectedValues",
+          "kind": "let",
+          "description": "Specify the selected tile's",
+          "type": "string",
+          "value": "[]",
+          "isFunction": false,
+          "constant": false,
+          "reactive": true
+        },
+        {
+          "name": "disabled",
+          "kind": "let",
+          "description": "Set to `true` to disable the tile group",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "light",
+          "kind": "let",
+          "description": "Set to `true` to enable the light variant",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "legend",
+          "kind": "let",
+          "description": "Specify the legend text",
+          "type": "string",
+          "value": "\"\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        }
+      ],
+      "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+      "events": [{ "type": "dispatched", "name": "select" }],
+      "typedefs": [],
+      "rest_props": { "type": "Element", "name": "fieldset" }
+    },
     {
       "moduleName": "TimePicker",
       "filePath": "/src/TimePicker/TimePicker.svelte",

docs/src/pages/components/RadioTile.svx

@@ -1,29 +1,35 @@
 ---
-components: ["TileGroup", "RadioTile"]
+components: ["RadioTileGroup", "RadioTile"]
 ---
 
 <script>
-  import { TileGroup, RadioTile } from "carbon-components-svelte";
+  import { RadioTileGroup, RadioTile, InlineNotification } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
+<InlineNotification svx-ignore title="Deprecation warning:" kind="warning" hideCloseButton>
+  <div>
+    The TileGroup component will be removed in favour of the RadioTileGroup component in the next major release.
+  </div>
+</InlineNotification>
+
 ### Default
 
-<TileGroup legend="Service pricing tiers">
+<RadioTileGroup legend="Service pricing tiers">
   <RadioTile value="0" checked>
     Lite plan
   </RadioTile>
   <RadioTile value="1">
     Standard plan
   </RadioTile>
-  <RadioTile value="2">
+  <RadioTile light value="2">
-    Plus plan
+    Plus plan (light variant)
   </RadioTile>
 </TileGroup>
 
 ### Light variant
 
-<TileGroup legend="Service pricing tiers">
+<RadioTileGroup light legend="Service pricing tiers">
   <RadioTile value="0" checked>
     Lite plan
   </RadioTile>

docs/src/pages/components/SelectableTile.svx

@@ -1,36 +1,42 @@
 ---
-components: ["SelectableTile"]
+components: ["SelectableTile", "SelectableTileGroup"]
 ---
 
 <script>
-  import { SelectableTile } from "carbon-components-svelte";
+  import { SelectableTile, SelectableTileGroup } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
 ### Multi-selectable tiles
 
-<div role="group" aria-label="selectable tiles">
+<SelectableTileGroup legend="Select the options you require" light>
-  <SelectableTile selected>
+  <SelectableTile title="Option 1" selected>
-    Multi-select Tile
+    Option 1
   </SelectableTile>
-  <SelectableTile selected>
+  <SelectableTile title="Option 2" selected>
-    Multi-select Tile
+    Option 2
   </SelectableTile>
-  <SelectableTile>
+  <SelectableTile title="Option 3£>
-    Multi-select Tile
+    Option 3
+  </SelectableTile>
+    <SelectableTile light title="Option 4£>
+    Option 4 (light variant)
   </SelectableTile>
 </div>
 
-### Light variant
+### Multi-selectable tiles with light variant
 
-<div role="group" aria-label="selectable tiles">
+<SelectableTileGroup light legend="Select the options you require" light>
-  <SelectableTile light selected>
+  <SelectableTile title="Option 1" selected>
-    Multi-select Tile
+    Option 1
   </SelectableTile>
-  <SelectableTile light selected>
+  <SelectableTile title="Option 2" selected>
-    Multi-select Tile
+    Option 2
   </SelectableTile>
-  <SelectableTile light>
+  <SelectableTile title="Option 3£>
-    Multi-select Tile
+    Option 3
+  </SelectableTile>
+    <SelectableTile title="Option 4£>
+    Option 4
   </SelectableTile>
 </div>

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="{() => {
+  on:click|preventDefault="{() => update(value, !selected)}"
-    selected = !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";

tests/RadioTile.test.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-  import { TileGroup, RadioTile } from "../types";
+  import { RadioTileGroup, RadioTile } from "../types";
 </script>
 
-<TileGroup legend="Service pricing tiers">
+<RadioTileGroup legend="Service pricing tiers">
   <RadioTile value="0" checked>Lite plan</RadioTile>
   <RadioTile value="1">Standard plan</RadioTile>
   <RadioTile value="2">Plus plan</RadioTile>
-</TileGroup>
+</RadioTileGroup>
 
-<TileGroup legend="Service pricing tiers">
+<RadioTileGroup legend="Service pricing tiers">
   <RadioTile value="0" checked>Lite plan</RadioTile>
   <RadioTile value="1">Standard plan</RadioTile>
   <RadioTile value="2">Plus plan</RadioTile>
-</TileGroup>
+</RadioTileGroup>

tests/SelectableTile.test.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-  import { SelectableTile } from "../types";
+  import { SelectableTileGroup, SelectableTile } from "../types";
 </script>
 
-<SelectableTile selected>Multi-select Tile</SelectableTile>
+<SelectableTileGroup legend="Service pricing tiers">
+  <SelectableTile value="0" checked>Lite plan</SelectableTile>
+  <SelectableTile value="1">Standard plan</SelectableTile>
+  <SelectableTile light value="2">Plus plan</SelectableTile>
+</SelectableTileGroup>
 
-<SelectableTile selected>Multi-select Tile</SelectableTile>
+<SelectableTileGroup light legend="Service pricing tiers">
-
+  <SelectableTile value="0" checked>Lite plan</SelectableTile>
-<SelectableTile>Multi-select Tile</SelectableTile>
+  <SelectableTile value="1">Standard plan</SelectableTile>
-
+  <SelectableTile value="2">Plus plan</SelectableTile>
-<SelectableTile light selected>Multi-select Tile</SelectableTile>
+</SelectableTileGroup>
-
-<SelectableTile light selected>Multi-select Tile</SelectableTile>
-
-<SelectableTile light>Multi-select Tile</SelectableTile>

types/Tile/RadioTile.d.ts

@@ -19,6 +19,12 @@ export interface RadioTileProps extends svelte.JSX.HTMLAttributes<HTMLElementTag
    */
   value?: string;
 
+  /**
+   * Specify the title of the selectable tile
+   * @default "title"
+   */
+  title?: string;
+
   /**
    * Specify the tabindex
    * @default "0"
@@ -42,6 +48,12 @@ export interface RadioTileProps extends svelte.JSX.HTMLAttributes<HTMLElementTag
    * @default ""
    */
   name?: string;
+
+  /**
+   * Obtain a reference to the input HTML element
+   * @default null
+   */
+  ref?: null | HTMLInputElement;
 }
 
 export default class RadioTile {

types/index.d.ts

@@ -123,6 +123,8 @@ export { default as ExpandableTile } from "./Tile/ExpandableTile";
 export { default as SelectableTile } from "./Tile/SelectableTile";
 export { default as RadioTile } from "./Tile/RadioTile";
 export { default as TileGroup } from "./Tile/TileGroup";
+export { default as RadioTileGroup } from "./Tile/RadioTileGroup";
+export { default as SelectableTileGroup } from "./Tile/SelectableTileGroup";
 export { default as TimePicker } from "./TimePicker/TimePicker";
 export { default as TimePickerSelect } from "./TimePicker/TimePickerSelect";
 export { default as Toggle } from "./Toggle/Toggle";