From 24d0cab4fe96b8a01a58ea8d34dd0b529914db94 Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Wed, 13 Oct 2021 08:29:48 -0700
Subject: [PATCH] docs(tree-view): document TreeView accessors

---
 docs/src/pages/components/TreeView.svx        | 32 ++++++++-
 .../TreeView/TreeViewCollapseAll.svelte       | 63 ++++++++++++++++
 .../TreeView/TreeViewCollapseNodes.svelte     | 71 +++++++++++++++++++
 .../framed/TreeView/TreeViewExpandAll.svelte  | 61 ++++++++++++++++
 .../TreeView/TreeViewExpandNodes.svelte       | 67 +++++++++++++++++
 5 files changed, 293 insertions(+), 1 deletion(-)
 create mode 100644 docs/src/pages/framed/TreeView/TreeViewCollapseAll.svelte
 create mode 100644 docs/src/pages/framed/TreeView/TreeViewCollapseNodes.svelte
 create mode 100644 docs/src/pages/framed/TreeView/TreeViewExpandAll.svelte
 create mode 100644 docs/src/pages/framed/TreeView/TreeViewExpandNodes.svelte

diff --git a/docs/src/pages/components/TreeView.svx b/docs/src/pages/components/TreeView.svx
index 4cd34e29..daaf5205 100644
--- a/docs/src/pages/components/TreeView.svx
+++ b/docs/src/pages/components/TreeView.svx
@@ -45,4 +45,34 @@ Expanded nodes can be set using `expandedIds`.
 
 Initial multiple selected nodes can be set using `selectedIds`.
 
-<FileSource src="/framed/TreeView/TreeViewMultiselect" />
\ No newline at end of file
+<FileSource src="/framed/TreeView/TreeViewMultiselect" />
+
+### Expand all nodes
+
+To programmatically expand all nodes, access the component instance using the [bind:this](https://svelte.dev/docs#bind_element) directive and invoke the `TreeView.expandAll()` method to expand all nodes.
+
+<FileSource src="/framed/TreeView/TreeViewExpandAll" />
+
+### Collapse all nodes
+
+Similarly, invoke `TreeView.collapseAll()` to collapse all nodes.
+
+<FileSource src="/framed/TreeView/TreeViewCollapseAll" />
+
+### Expand a subset of nodes
+
+Use the `TreeView.expandNodes` method to expand only a subset of nodes.
+
+The method accepts an argument that takes a node and returns a boolean.
+
+If no argument is provided, all nodes will be expanded.
+
+<FileSource src="/framed/TreeView/TreeViewExpandNodes" />
+
+### Collapse a subset of nodes
+
+Use the `TreeView.collapseNodes` method to collapse a subset of nodes.
+
+If no argument is provided, all nodes will be collapsed.
+
+<FileSource src="/framed/TreeView/TreeViewCollapseNodes" />
\ No newline at end of file
diff --git a/docs/src/pages/framed/TreeView/TreeViewCollapseAll.svelte b/docs/src/pages/framed/TreeView/TreeViewCollapseAll.svelte
new file mode 100644
index 00000000..abbd09e0
--- /dev/null
+++ b/docs/src/pages/framed/TreeView/TreeViewCollapseAll.svelte
@@ -0,0 +1,63 @@
+<script>
+  import { TreeView, Button } from "carbon-components-svelte";
+
+  let treeview = null;
+  let expandedIds = [0, 1, 2, 3, 4, 5, 6, 7, 8, 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>
+
+<div>
+  <Button on:click="{treeview?.collapseAll}">Collapse all</Button>
+</div>
+
+<TreeView
+  bind:this="{treeview}"
+  bind:expandedIds
+  labelText="Cloud Products"
+  children="{children}"
+/>
+
+<style>
+  div {
+    margin-bottom: var(--cds-spacing-05);
+  }
+</style>
diff --git a/docs/src/pages/framed/TreeView/TreeViewCollapseNodes.svelte b/docs/src/pages/framed/TreeView/TreeViewCollapseNodes.svelte
new file mode 100644
index 00000000..69bda008
--- /dev/null
+++ b/docs/src/pages/framed/TreeView/TreeViewCollapseNodes.svelte
@@ -0,0 +1,71 @@
+<script>
+  import { TreeView, Button } from "carbon-components-svelte";
+
+  let treeview = null;
+  let expandedIds = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 14];
+  let children = [
+    { id: 0, text: "AI / Machine learning" },
+    {
+      id: 1,
+      text: "Analytics",
+      disabled: true,
+      children: [
+        {
+          id: 2,
+          text: "IBM Analytics Engine",
+          disabled: true,
+          children: [
+            { id: 3, text: "Apache Spark", disabled: true },
+            { id: 4, text: "Hadoop", disabled: true },
+          ],
+        },
+        { id: 5, text: "IBM Cloud SQL Query", disabled: true },
+        { id: 6, text: "IBM Db2 Warehouse on Cloud", disabled: true },
+      ],
+    },
+    {
+      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>
+
+<div>
+  <Button
+    on:click="{() => {
+      treeview?.collapseNodes((node) => node.disabled);
+    }}"
+  >
+    Collapse disabled nodes
+  </Button>
+</div>
+
+<TreeView
+  bind:this="{treeview}"
+  bind:expandedIds
+  labelText="Cloud Products"
+  children="{children}"
+/>
+
+<style>
+  div {
+    margin-bottom: var(--cds-spacing-05);
+  }
+</style>
diff --git a/docs/src/pages/framed/TreeView/TreeViewExpandAll.svelte b/docs/src/pages/framed/TreeView/TreeViewExpandAll.svelte
new file mode 100644
index 00000000..ea10f4ac
--- /dev/null
+++ b/docs/src/pages/framed/TreeView/TreeViewExpandAll.svelte
@@ -0,0 +1,61 @@
+<script>
+  import { TreeView, Button } from "carbon-components-svelte";
+
+  let treeview = null;
+  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>
+
+<div>
+  <Button on:click="{treeview?.expandAll}">Expand all</Button>
+</div>
+
+<TreeView
+  bind:this="{treeview}"
+  labelText="Cloud Products"
+  children="{children}"
+/>
+
+<style>
+  div {
+    margin-bottom: var(--cds-spacing-05);
+  }
+</style>
diff --git a/docs/src/pages/framed/TreeView/TreeViewExpandNodes.svelte b/docs/src/pages/framed/TreeView/TreeViewExpandNodes.svelte
new file mode 100644
index 00000000..0c1efeb3
--- /dev/null
+++ b/docs/src/pages/framed/TreeView/TreeViewExpandNodes.svelte
@@ -0,0 +1,67 @@
+<script>
+  import { TreeView, Button } from "carbon-components-svelte";
+
+  let treeview = null;
+  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>
+
+<div>
+  <Button
+    on:click="{() => {
+      treeview?.expandNodes((node) => /^IBM/.test(node.text));
+    }}"
+  >
+    Expand nodes starting with "IBM"
+  </Button>
+</div>
+
+<TreeView
+  bind:this="{treeview}"
+  labelText="Cloud Products"
+  children="{children}"
+/>
+
+<style>
+  div {
+    margin-bottom: var(--cds-spacing-05);
+  }
+</style>