From b380393973f046419cc3bb3f1a2b6b7a5eebfe3d Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 6 Dec 2020 11:06:02 -0800
Subject: [PATCH] docs(selectable-tile): add use cases

---
 .../SelectableTileReactive.svelte             | 84 +++++++++++++++++++
 1 file changed, 84 insertions(+)
 create mode 100644 docs/src/pages/framed/SelectableTile/SelectableTileReactive.svelte

diff --git a/docs/src/pages/framed/SelectableTile/SelectableTileReactive.svelte b/docs/src/pages/framed/SelectableTile/SelectableTileReactive.svelte
new file mode 100644
index 00000000..a14df279
--- /dev/null
+++ b/docs/src/pages/framed/SelectableTile/SelectableTileReactive.svelte
@@ -0,0 +1,84 @@
+<script>
+  import {
+    SelectableTileGroup,
+    SelectableTile,
+    Button,
+  } from "carbon-components-svelte";
+
+  let selectedValues = ["1"];
+  let selectedValues2 = [];
+  let selectedValues3 = [
+    { value: "1", selected: true },
+    { value: "2", selected: false },
+    { value: "3", selected: false },
+  ];
+</script>
+
+<SelectableTileGroup
+  bind:selectedValues
+  legend="Select the options you require"
+>
+  <SelectableTile title="Option 1" value="1">Option 1</SelectableTile>
+  <SelectableTile title="Option 2" value="2">Option 2</SelectableTile>
+  <SelectableTile title="Option 3" value="3">
+    Option 3 (light variant)
+  </SelectableTile>
+</SelectableTileGroup>
+
+<div>
+  {selectedValues.join(', ')}
+
+  <Button
+    on:click="{() => {
+      selectedValues = [];
+    }}"
+  >
+    Reset selectedValues
+  </Button>
+</div>
+
+<SelectableTileGroup
+  bind:selectedValues="{selectedValues2}"
+  legend="Select the options you require"
+>
+  <SelectableTile title="Option 1" value="1">Option 1</SelectableTile>
+  <SelectableTile title="Option 2" value="2" selected>Option 2</SelectableTile>
+  <SelectableTile title="Option 3" selected value="3">
+    Option 3 (light variant)
+  </SelectableTile>
+</SelectableTileGroup>
+
+<div>
+  {selectedValues2.join(', ')}
+
+  <Button
+    on:click="{() => {
+      selectedValues2 = [];
+    }}"
+  >
+    Reset selectedValues2
+  </Button>
+</div>
+
+<SelectableTileGroup
+  selectedValues="{selectedValues3}"
+  legend="Select the options you require"
+>
+  {#each selectedValues3 as item}
+    <SelectableTile value="{item.value}" bind:selected="{item.selected}">
+      {item.value}
+    </SelectableTile>
+  {/each}
+</SelectableTileGroup>
+
+<div>
+  {selectedValues3.map((item) => item.value).join(', ')}
+
+  <Button
+    on:click="{() => {
+      selectedValues3 = [];
+    }}"
+  >
+    Reset selectedValues3
+  </Button>
+</div>