From a06c8f810c66d1a7137353449d561a1e5d699464 Mon Sep 17 00:00:00 2001
From: Eric Y Liu <ericyl.us@gmail.com>
Date: Mon, 5 Jul 2021 05:09:06 -0700
Subject: [PATCH] docs(tree-view): update examples

---
 docs/src/pages/components/TreeView.svx        | 14 ++-
 .../src/pages/framed/TreeView/TreeView.svelte | 65 ++++++++++++
 .../framed/TreeView/TreeViewActive.svelte     | 65 ++++++++++++
 .../framed/TreeView/TreeViewCompact.svelte    | 66 +++++++++++++
 .../framed/TreeView/TreeViewExpanded.svelte   | 67 +++++++++++++
 .../framed/TreeView/TreeViewIcons.svelte      | 98 +++++++++++++++++++
 .../TreeView/TreeViewMultiselect.svelte       | 65 ++++++++++++
 7 files changed, 439 insertions(+), 1 deletion(-)
 create mode 100644 docs/src/pages/framed/TreeView/TreeView.svelte
 create mode 100644 docs/src/pages/framed/TreeView/TreeViewActive.svelte
 create mode 100644 docs/src/pages/framed/TreeView/TreeViewCompact.svelte
 create mode 100644 docs/src/pages/framed/TreeView/TreeViewExpanded.svelte
 create mode 100644 docs/src/pages/framed/TreeView/TreeViewIcons.svelte
 create mode 100644 docs/src/pages/framed/TreeView/TreeViewMultiselect.svelte

diff --git a/docs/src/pages/components/TreeView.svx b/docs/src/pages/components/TreeView.svx
index 14b06a87..b32b31ea 100644
--- a/docs/src/pages/components/TreeView.svx
+++ b/docs/src/pages/components/TreeView.svx
@@ -9,10 +9,22 @@ Note: every node MUST have an id.
 
 <FileSource src="/framed/TreeView/TreeView" />
 
+### Initial active node
+
+<FileSource src="/framed/TreeView/TreeViewActive" />
+
 ### Compact size
 
 <FileSource src="/framed/TreeView/TreeViewCompact" />
 
+### Initial expanded nodes
+
+<FileSource src="/framed/TreeView/TreeViewExpanded" />
+
 ### With icons
 
-<FileSource src="/framed/TreeView/TreeViewIcons" />
\ No newline at end of file
+<FileSource src="/framed/TreeView/TreeViewIcons" />
+
+### Initial multiselected nodes
+
+<FileSource src="/framed/TreeView/TreeViewMultiselect" />
\ No newline at end of file
diff --git a/docs/src/pages/framed/TreeView/TreeView.svelte b/docs/src/pages/framed/TreeView/TreeView.svelte
new file mode 100644
index 00000000..4489cb9c
--- /dev/null
+++ b/docs/src/pages/framed/TreeView/TreeView.svelte
@@ -0,0 +1,65 @@
+<script>
+  import { TreeView } from "carbon-components-svelte";
+
+  let activeId = "";
+  let selectedIds = [];
+  let children = [
+    { id: 0, text: "AI / Machine learning" },
+    {
+      id: 1,
+      text: "Analytics",
+      children: [
+        {
+          id: 2,
+          text: "IBM Analytics Engine",
+          children: [
+            { id: 3, text: "Apache Spark" },
+            { id: 4, text: "Hadoop" },
+          ],
+        },
+        { id: 5, text: "IBM Cloud SQL Query" },
+        { id: 6, text: "IBM Db2 Warehouse on Cloud" },
+      ],
+    },
+    {
+      id: 7,
+      text: "Blockchain",
+      children: [{ id: 8, text: "IBM Blockchain Platform" }],
+    },
+    {
+      id: 9,
+      text: "Databases",
+      children: [
+        { id: 10, text: "IBM Cloud Databases for Elasticsearch" },
+        { id: 11, text: "IBM Cloud Databases for Enterprise DB" },
+        { id: 12, text: "IBM Cloud Databases for MongoDB" },
+        { id: 13, text: "IBM Cloud Databases for PostgreSQL" },
+      ],
+    },
+    {
+      id: 14,
+      text: "Integration",
+      disabled: true,
+      children: [{ id: 15, text: "IBM API Connect", disabled: true }],
+    },
+  ];
+</script>
+
+<TreeView
+  labelText="Cloud Products"
+  children="{children}"
+  bind:activeId
+  bind:selectedIds
+  on:select="{({ detail }) => console.log('select', detail)}"
+  on:toggle="{({ detail }) => console.log('toggle', detail)}"
+  on:focus="{({ detail }) => console.log('focus', detail)}"
+/>
+
+<div>Active node id: {activeId}</div>
+<div>Selected ids: {JSON.stringify(selectedIds)}</div>
+
+<style>
+  div {
+    margin-top: var(--cds-spacing-05);
+  }
+</style>
diff --git a/docs/src/pages/framed/TreeView/TreeViewActive.svelte b/docs/src/pages/framed/TreeView/TreeViewActive.svelte
new file mode 100644
index 00000000..fafeb48c
--- /dev/null
+++ b/docs/src/pages/framed/TreeView/TreeViewActive.svelte
@@ -0,0 +1,65 @@
+<script>
+  import { TreeView } from "carbon-components-svelte";
+
+  let activeId = 0;
+  let selectedIds = [];
+  let children = [
+    { id: 0, text: "AI / Machine learning" },
+    {
+      id: 1,
+      text: "Analytics",
+      children: [
+        {
+          id: 2,
+          text: "IBM Analytics Engine",
+          children: [
+            { id: 3, text: "Apache Spark" },
+            { id: 4, text: "Hadoop" },
+          ],
+        },
+        { id: 5, text: "IBM Cloud SQL Query" },
+        { id: 6, text: "IBM Db2 Warehouse on Cloud" },
+      ],
+    },
+    {
+      id: 7,
+      text: "Blockchain",
+      children: [{ id: 8, text: "IBM Blockchain Platform" }],
+    },
+    {
+      id: 9,
+      text: "Databases",
+      children: [
+        { id: 10, text: "IBM Cloud Databases for Elasticsearch" },
+        { id: 11, text: "IBM Cloud Databases for Enterprise DB" },
+        { id: 12, text: "IBM Cloud Databases for MongoDB" },
+        { id: 13, text: "IBM Cloud Databases for PostgreSQL" },
+      ],
+    },
+    {
+      id: 14,
+      text: "Integration",
+      disabled: true,
+      children: [{ id: 15, text: "IBM API Connect", disabled: true }],
+    },
+  ];
+</script>
+
+<TreeView
+  labelText="Cloud Products"
+  children="{children}"
+  bind:activeId
+  bind:selectedIds
+  on:select="{({ detail }) => console.log('select', detail)}"
+  on:toggle="{({ detail }) => console.log('toggle', detail)}"
+  on:focus="{({ detail }) => console.log('focus', detail)}"
+/>
+
+<div>Active node id: {activeId}</div>
+<div>Selected ids: {JSON.stringify(selectedIds)}</div>
+
+<style>
+  div {
+    margin-top: var(--cds-spacing-05);
+  }
+</style>
diff --git a/docs/src/pages/framed/TreeView/TreeViewCompact.svelte b/docs/src/pages/framed/TreeView/TreeViewCompact.svelte
new file mode 100644
index 00000000..0a9bf2b9
--- /dev/null
+++ b/docs/src/pages/framed/TreeView/TreeViewCompact.svelte
@@ -0,0 +1,66 @@
+<script>
+  import { TreeView } from "carbon-components-svelte";
+
+  let activeId = 0;
+  let selectedIds = [];
+  let children = [
+    { id: 0, text: "AI / Machine learning" },
+    {
+      id: 1,
+      text: "Analytics",
+      children: [
+        {
+          id: 2,
+          text: "IBM Analytics Engine",
+          children: [
+            { id: 3, text: "Apache Spark" },
+            { id: 4, text: "Hadoop" },
+          ],
+        },
+        { id: 5, text: "IBM Cloud SQL Query" },
+        { id: 6, text: "IBM Db2 Warehouse on Cloud" },
+      ],
+    },
+    {
+      id: 7,
+      text: "Blockchain",
+      children: [{ id: 8, text: "IBM Blockchain Platform" }],
+    },
+    {
+      id: 9,
+      text: "Databases",
+      children: [
+        { id: 10, text: "IBM Cloud Databases for Elasticsearch" },
+        { id: 11, text: "IBM Cloud Databases for Enterprise DB" },
+        { id: 12, text: "IBM Cloud Databases for MongoDB" },
+        { id: 13, text: "IBM Cloud Databases for PostgreSQL" },
+      ],
+    },
+    {
+      id: 14,
+      text: "Integration",
+      disabled: true,
+      children: [{ id: 15, text: "IBM API Connect", disabled: true }],
+    },
+  ];
+</script>
+
+<TreeView
+  size="compact"
+  labelText="Cloud Products"
+  children="{children}"
+  bind:activeId
+  bind:selectedIds
+  on:select="{({ detail }) => console.log('select', detail)}"
+  on:toggle="{({ detail }) => console.log('toggle', detail)}"
+  on:focus="{({ detail }) => console.log('focus', detail)}"
+/>
+
+<div>Active node id: {activeId}</div>
+<div>Selected ids: {JSON.stringify(selectedIds)}</div>
+
+<style>
+  div {
+    margin-top: var(--cds-spacing-05);
+  }
+</style>
diff --git a/docs/src/pages/framed/TreeView/TreeViewExpanded.svelte b/docs/src/pages/framed/TreeView/TreeViewExpanded.svelte
new file mode 100644
index 00000000..819babd2
--- /dev/null
+++ b/docs/src/pages/framed/TreeView/TreeViewExpanded.svelte
@@ -0,0 +1,67 @@
+<script>
+  import { TreeView } from "carbon-components-svelte";
+
+  let activeId = 1;
+  let selectedIds = [];
+  let children = [
+    { id: 0, text: "AI / Machine learning" },
+    {
+      id: 1,
+      text: "Analytics",
+      expanded: true,
+      children: [
+        {
+          id: 2,
+          text: "IBM Analytics Engine",
+          expanded: true,
+          children: [
+            { id: 3, text: "Apache Spark" },
+            { id: 4, text: "Hadoop" },
+          ],
+        },
+        { id: 5, text: "IBM Cloud SQL Query" },
+        { id: 6, text: "IBM Db2 Warehouse on Cloud" },
+      ],
+    },
+    {
+      id: 7,
+      text: "Blockchain",
+      children: [{ id: 8, text: "IBM Blockchain Platform" }],
+    },
+    {
+      id: 9,
+      text: "Databases",
+      children: [
+        { id: 10, text: "IBM Cloud Databases for Elasticsearch" },
+        { id: 11, text: "IBM Cloud Databases for Enterprise DB" },
+        { id: 12, text: "IBM Cloud Databases for MongoDB" },
+        { id: 13, text: "IBM Cloud Databases for PostgreSQL" },
+      ],
+    },
+    {
+      id: 14,
+      text: "Integration",
+      disabled: true,
+      children: [{ id: 15, text: "IBM API Connect", disabled: true }],
+    },
+  ];
+</script>
+
+<TreeView
+  labelText="Cloud Products"
+  children="{children}"
+  bind:activeId
+  bind:selectedIds
+  on:select="{({ detail }) => console.log('select', detail)}"
+  on:toggle="{({ detail }) => console.log('toggle', detail)}"
+  on:focus="{({ detail }) => console.log('focus', detail)}"
+/>
+
+<div>Active node id: {activeId}</div>
+<div>Selected ids: {JSON.stringify(selectedIds)}</div>
+
+<style>
+  div {
+    margin-top: var(--cds-spacing-05);
+  }
+</style>
diff --git a/docs/src/pages/framed/TreeView/TreeViewIcons.svelte b/docs/src/pages/framed/TreeView/TreeViewIcons.svelte
new file mode 100644
index 00000000..04de81c3
--- /dev/null
+++ b/docs/src/pages/framed/TreeView/TreeViewIcons.svelte
@@ -0,0 +1,98 @@
+<script>
+  import { TreeView } from "carbon-components-svelte";
+  import WatsonMachineLearning16 from "carbon-icons-svelte/lib/WatsonMachineLearning16";
+  import Analytics16 from "carbon-icons-svelte/lib/Analytics16";
+  import Blockchain16 from "carbon-icons-svelte/lib/Blockchain16";
+  import DataBase16 from "carbon-icons-svelte/lib/DataBase16";
+  import SignalStrength16 from "carbon-icons-svelte/lib/SignalStrength16";
+
+  let activeId = 1;
+  let selectedIds = [];
+  let children = [
+    { id: 0, text: "AI / Machine learning", icon: WatsonMachineLearning16 },
+    {
+      id: 1,
+      text: "Analytics",
+      icon: Analytics16,
+      expanded: true,
+      children: [
+        {
+          id: 2,
+          text: "IBM Analytics Engine",
+          icon: Analytics16,
+          expanded: true,
+          children: [
+            { id: 3, text: "Apache Spark", icon: Analytics16 },
+            { id: 4, text: "Hadoop", icon: Analytics16 },
+          ],
+        },
+        { id: 5, text: "IBM Cloud SQL Query", icon: Analytics16 },
+        { id: 6, text: "IBM Db2 Warehouse on Cloud", icon: Analytics16 },
+      ],
+    },
+    {
+      id: 7,
+      text: "Blockchain",
+      icon: Blockchain16,
+      children: [
+        { id: 8, text: "IBM Blockchain Platform", icon: Blockchain16 },
+      ],
+    },
+    {
+      id: 9,
+      text: "Databases",
+      icon: DataBase16,
+      children: [
+        {
+          id: 10,
+          text: "IBM Cloud Databases for Elasticsearch",
+          icon: DataBase16,
+        },
+        {
+          id: 11,
+          text: "IBM Cloud Databases for Enterprise DB",
+          icon: DataBase16,
+        },
+        { id: 12, text: "IBM Cloud Databases for MongoDB", icon: DataBase16 },
+        {
+          id: 13,
+          text: "IBM Cloud Databases for PostgreSQL",
+          icon: DataBase16,
+        },
+      ],
+    },
+    {
+      id: 14,
+      text: "Integration",
+      icon: SignalStrength16,
+      disabled: true,
+      children: [
+        {
+          id: 15,
+          text: "IBM API Connect",
+          icon: SignalStrength16,
+          disabled: true,
+        },
+      ],
+    },
+  ];
+</script>
+
+<TreeView
+  labelText="Cloud Products"
+  children="{children}"
+  bind:activeId
+  bind:selectedIds
+  on:select="{({ detail }) => console.log('select', detail)}"
+  on:toggle="{({ detail }) => console.log('toggle', detail)}"
+  on:focus="{({ detail }) => console.log('focus', detail)}"
+/>
+
+<div>Active node id: {activeId}</div>
+<div>Selected ids: {JSON.stringify(selectedIds)}</div>
+
+<style>
+  div {
+    margin-top: var(--cds-spacing-05);
+  }
+</style>
diff --git a/docs/src/pages/framed/TreeView/TreeViewMultiselect.svelte b/docs/src/pages/framed/TreeView/TreeViewMultiselect.svelte
new file mode 100644
index 00000000..6ea62569
--- /dev/null
+++ b/docs/src/pages/framed/TreeView/TreeViewMultiselect.svelte
@@ -0,0 +1,65 @@
+<script>
+  import { TreeView } from "carbon-components-svelte";
+
+  let activeId = 0;
+  let selectedIds = [0, 7, 9];
+  let children = [
+    { id: 0, text: "AI / Machine learning" },
+    {
+      id: 1,
+      text: "Analytics",
+      children: [
+        {
+          id: 2,
+          text: "IBM Analytics Engine",
+          children: [
+            { id: 3, text: "Apache Spark" },
+            { id: 4, text: "Hadoop" },
+          ],
+        },
+        { id: 5, text: "IBM Cloud SQL Query" },
+        { id: 6, text: "IBM Db2 Warehouse on Cloud" },
+      ],
+    },
+    {
+      id: 7,
+      text: "Blockchain",
+      children: [{ id: 8, text: "IBM Blockchain Platform" }],
+    },
+    {
+      id: 9,
+      text: "Databases",
+      children: [
+        { id: 10, text: "IBM Cloud Databases for Elasticsearch" },
+        { id: 11, text: "IBM Cloud Databases for Enterprise DB" },
+        { id: 12, text: "IBM Cloud Databases for MongoDB" },
+        { id: 13, text: "IBM Cloud Databases for PostgreSQL" },
+      ],
+    },
+    {
+      id: 14,
+      text: "Integration",
+      disabled: true,
+      children: [{ id: 15, text: "IBM API Connect", disabled: true }],
+    },
+  ];
+</script>
+
+<TreeView
+  labelText="Cloud Products"
+  children="{children}"
+  bind:activeId
+  bind:selectedIds
+  on:select="{({ detail }) => console.log('select', detail)}"
+  on:toggle="{({ detail }) => console.log('toggle', detail)}"
+  on:focus="{({ detail }) => console.log('focus', detail)}"
+/>
+
+<div>Active node id: {activeId}</div>
+<div>Selected ids: {JSON.stringify(selectedIds)}</div>
+
+<style>
+  div {
+    margin-top: var(--cds-spacing-05);
+  }
+</style>