From 5d04308cb0514b93608874a043d5b24a5a0e283c Mon Sep 17 00:00:00 2001
From: Francine Lucca <40550942+francinelucca@users.noreply.github.com>
Date: Thu, 23 Feb 2023 11:48:12 -0500
Subject: [PATCH] feat(docs): add TreeView LiveDemo (#3398)

---
 src/data/docgen/react-docgen.json        |  10 +-
 src/pages/components/tree-view/code.mdx  | 266 +++++++++++++++++++++-
 src/pages/components/tree-view/usage.mdx | 268 ++++++++++++++++++++++-
 3 files changed, 528 insertions(+), 16 deletions(-)

diff --git a/src/data/docgen/react-docgen.json b/src/data/docgen/react-docgen.json
index 346309fd6eb..f6b81c364d8 100644
--- a/src/data/docgen/react-docgen.json
+++ b/src/data/docgen/react-docgen.json
@@ -8573,7 +8573,7 @@
       }
     }
   },
-  "unstable_TreeView": {
+  "TreeView": {
     "description": "",
     "displayName": "TreeView",
     "props": {
@@ -8596,12 +8596,12 @@
         "description": "Array representing all selected node IDs in the tree"
       },
       "size": {
-        "defaultValue": { "value": "'default'", "computed": false },
+        "defaultValue": { "value": "'sm'", "computed": false },
         "type": {
           "name": "enum",
           "value": [
-            { "value": "'default'", "computed": false },
-            { "value": "'compact'", "computed": false }
+            { "value": "'sm'", "computed": false },
+            { "value": "'xs'", "computed": false }
           ]
         },
         "required": false,
@@ -8642,7 +8642,7 @@
       }
     }
   },
-  "unstable_TreeNode": {
+  "TreeNode": {
     "description": "",
     "displayName": "TreeNode",
     "props": {
diff --git a/src/pages/components/tree-view/code.mdx b/src/pages/components/tree-view/code.mdx
index 96a2d0fccda..42cd79a7028 100755
--- a/src/pages/components/tree-view/code.mdx
+++ b/src/pages/components/tree-view/code.mdx
@@ -30,9 +30,265 @@ usage documentation, see the Storybooks for each framework below.
 
 ## Live demo
 
-<InlineNotification>
+import { Document, Folder } from '@carbon/icons-react';
 
-**Coming soon:** The live demo for tree view is underdevelopment and will be
-available soon.
-
-</InlineNotification>
+<ComponentDemo
+  components={[
+    {
+      id: 'default-treeview',
+      label: 'Default',
+    },
+    {
+      id: 'treeview-with-icons',
+      label: 'With Icons',
+    },
+  ]}
+  scope={{ Document, Folder }}
+>
+  <ComponentVariant
+    id="default-treeview"
+    knobs={{
+      TreeView: ['size', 'hideLabel'],
+    }}
+    links={{
+      React:
+        'https://react.carbondesignsystem.com/?path=/story/components-treeview--default',
+    }}
+  >
+    {`
+      <div style={{width: '300px'}}>
+        <TreeView label="Tree View">
+          <TreeNode
+            key='1'
+            id='1'
+            value='Artificial intelligence'
+            label={<span>Artificial intelligence</span>}
+          />
+          <TreeNode
+            key='2'
+            id='2'
+            value='Blockchain'
+            label='Blockchain'
+          />
+          <TreeNode
+            key='3'
+            id='3'
+            value='Business automation'
+            label='Business automation'
+          >
+            <TreeNode
+              key='3-1'
+              id='3-1'
+              value='Business process automation'
+              label='Business process automation'
+            />
+            <TreeNode
+              key='3-2'
+              id='3-2'
+              value='Business process mapping'
+              label='Business process mapping'
+            />
+          </TreeNode>
+          <TreeNode
+            key='4'
+            id='4'
+            value='Business operations'
+            label='Business operations'
+          />
+          <TreeNode
+            key='5'
+            id='5'
+            value='Cloud computing'
+            label='Cloud computing'
+            isExpanded={true}
+          >
+            <TreeNode
+              key='5-1'
+              id='5-1'
+              value='Containers'
+              label='Containers'
+            />
+            <TreeNode
+              key='5-2'
+              id='5-2'
+              value='Databases'
+              label='Databases'
+            />
+            <TreeNode
+              key='5-3'
+              id='5-3'
+              value='DevOps'
+              label='DevOps'>
+                <TreeNode
+                  key='5-4'
+                  id='5-4'
+                  value='Solutions'
+                  label='Solutions'
+                />
+                <TreeNode
+                  key='5-5'
+                  id='5-5'
+                  value='Case studies'
+                  label='Case studies'>
+                  <TreeNode
+                      key='5-6'
+                      id='5-6'
+                      value='Resources'
+                      label='Resources'
+                  />
+                </TreeNode>
+            </TreeNode>
+          </TreeNode>
+          <TreeNode
+            key='6'
+            id='6'
+            value='Data & Analytics'
+            label='Data & Analytics'>
+            <TreeNode
+              key='6-1'
+              id='6-1'
+              value='Big data'
+              label='Big data'
+            />
+            <TreeNode
+              id='6-2'
+              value='Business intelligence'
+              label='Business intelligence'
+            />
+          </TreeNode>
+        </TreeView>
+      </div>
+  `}
+  </ComponentVariant>
+  <ComponentVariant
+    id="treeview-with-icons"
+    knobs={{
+      TreeView: ['size', 'hideLabel'],
+    }}
+    links={{
+      React:
+        'https://react.carbondesignsystem.com/?path=/story/components-treeview--with-icons',
+    }}
+  >
+    {`
+      <div style={{width: '300px'}}>
+        <TreeView label="Tree View">
+          <TreeNode
+            key='1'
+            id='1'
+            value='Artificial intelligence'
+            label={<span>Artificial intelligence</span>}
+            renderIcon={Document}
+            />
+          <TreeNode
+            key='2'
+            id='2'
+            value='Blockchain'
+            label='Blockchain'
+            renderIcon={Document}
+            />
+          <TreeNode
+            key='3'
+            id='3'
+            value='Business automation'
+            label='Business automation'
+            renderIcon={Folder}
+          >
+            <TreeNode
+              key='3-1'
+              id='3-1'
+              value='Business process automation'
+              label='Business process automation'
+              renderIcon={Document}
+            />
+            <TreeNode
+              key='3-2'
+              id='3-2'
+              value='Business process mapping'
+              label='Business process mapping'
+              renderIcon={Document}
+            />
+          </TreeNode>
+          <TreeNode
+            key='4'
+            id='4'
+            value='Business operations'
+            label='Business operations'
+            renderIcon={Document}
+          />
+          <TreeNode
+            key='5'
+            id='5'
+            value='Cloud computing'
+            label='Cloud computing'
+            isExpanded={true}
+            renderIcon={Folder}
+          >
+            <TreeNode
+              key='5-1'
+              id='5-1'
+              value='Containers'
+              label='Containers'
+              renderIcon={Document}
+            />
+            <TreeNode
+              key='5-2'
+              id='5-2'
+              value='Databases'
+              label='Databases'
+              renderIcon={Document}
+            />
+            <TreeNode
+              key='5-3'
+              id='5-3'
+              value='DevOps'
+              label='DevOps'
+              renderIcon={Folder}>
+                <TreeNode
+                  key='5-4'
+                  id='5-4'
+                  value='Solutions'
+                  label='Solutions'
+                  renderIcon={Document}
+                />
+                <TreeNode
+                  key='5-5'
+                  id='5-5'
+                  value='Case studies'
+                  label='Case studies'
+                  renderIcon={Folder}>
+                  <TreeNode
+                      key='5-6'
+                      id='5-6'
+                      value='Resources'
+                      label='Resources'
+                      renderIcon={Document}
+                  />
+                </TreeNode>
+            </TreeNode>
+          </TreeNode>
+          <TreeNode
+            key='6'
+            id='6'
+            value='Data & Analytics'
+            label='Data & Analytics'
+            renderIcon={Folder}>
+            <TreeNode
+              key='6-1'
+              id='6-1'
+              value='Big data'
+              label='Big data'
+              renderIcon={Document}
+            />
+            <TreeNode
+              id='6-2'
+              value='Business intelligence'
+              label='Business intelligence'
+              renderIcon={Document}
+            />
+          </TreeNode>
+        </TreeView>
+      </div>
+  `}
+  </ComponentVariant>
+</ComponentDemo>
diff --git a/src/pages/components/tree-view/usage.mdx b/src/pages/components/tree-view/usage.mdx
index 1258419a6cc..b6f044eb43a 100755
--- a/src/pages/components/tree-view/usage.mdx
+++ b/src/pages/components/tree-view/usage.mdx
@@ -64,12 +64,268 @@ child nodes.
 
 ## Live demo
 
-<InlineNotification>
-
-**Coming soon:** The live demo for tree view is underdevelopment and will be
-available soon.
-
-</InlineNotification>
+import { Document, Folder } from '@carbon/icons-react';
+
+<ComponentDemo
+  components={[
+    {
+      id: 'default-treeview',
+      label: 'Default',
+    },
+    {
+      id: 'treeview-with-icons',
+      label: 'With Icons',
+    },
+  ]}
+  scope={{ Document, Folder }}
+>
+  <ComponentVariant
+    id="default-treeview"
+    knobs={{
+      TreeView: ['size', 'hideLabel'],
+    }}
+    links={{
+      React:
+        'https://react.carbondesignsystem.com/?path=/story/components-treeview--default',
+    }}
+  >
+    {`
+      <div style={{width: '300px'}}>
+        <TreeView label="Tree View">
+          <TreeNode
+            key='1'
+            id='1'
+            value='Artificial intelligence'
+            label={<span>Artificial intelligence</span>}
+          />
+          <TreeNode
+            key='2'
+            id='2'
+            value='Blockchain'
+            label='Blockchain'
+          />
+          <TreeNode
+            key='3'
+            id='3'
+            value='Business automation'
+            label='Business automation'
+          >
+            <TreeNode
+              key='3-1'
+              id='3-1'
+              value='Business process automation'
+              label='Business process automation'
+            />
+            <TreeNode
+              key='3-2'
+              id='3-2'
+              value='Business process mapping'
+              label='Business process mapping'
+            />
+          </TreeNode>
+          <TreeNode
+            key='4'
+            id='4'
+            value='Business operations'
+            label='Business operations'
+          />
+          <TreeNode
+            key='5'
+            id='5'
+            value='Cloud computing'
+            label='Cloud computing'
+            isExpanded={true}
+          >
+            <TreeNode
+              key='5-1'
+              id='5-1'
+              value='Containers'
+              label='Containers'
+            />
+            <TreeNode
+              key='5-2'
+              id='5-2'
+              value='Databases'
+              label='Databases'
+            />
+            <TreeNode
+              key='5-3'
+              id='5-3'
+              value='DevOps'
+              label='DevOps'>
+                <TreeNode
+                  key='5-4'
+                  id='5-4'
+                  value='Solutions'
+                  label='Solutions'
+                />
+                <TreeNode
+                  key='5-5'
+                  id='5-5'
+                  value='Case studies'
+                  label='Case studies'>
+                  <TreeNode
+                      key='5-6'
+                      id='5-6'
+                      value='Resources'
+                      label='Resources'
+                  />
+                </TreeNode>
+            </TreeNode>
+          </TreeNode>
+          <TreeNode
+            key='6'
+            id='6'
+            value='Data & Analytics'
+            label='Data & Analytics'>
+            <TreeNode
+              key='6-1'
+              id='6-1'
+              value='Big data'
+              label='Big data'
+            />
+            <TreeNode
+              id='6-2'
+              value='Business intelligence'
+              label='Business intelligence'
+            />
+          </TreeNode>
+        </TreeView>
+      </div>
+  `}
+  </ComponentVariant>
+  <ComponentVariant
+    id="treeview-with-icons"
+    knobs={{
+      TreeView: ['size', 'hideLabel'],
+    }}
+    links={{
+      React:
+        'https://react.carbondesignsystem.com/?path=/story/components-treeview--with-icons',
+    }}
+  >
+    {`
+      <div style={{width: '300px'}}>
+        <TreeView label="Tree View">
+          <TreeNode
+            key='1'
+            id='1'
+            value='Artificial intelligence'
+            label={<span>Artificial intelligence</span>}
+            renderIcon={Document}
+            />
+          <TreeNode
+            key='2'
+            id='2'
+            value='Blockchain'
+            label='Blockchain'
+            renderIcon={Document}
+            />
+          <TreeNode
+            key='3'
+            id='3'
+            value='Business automation'
+            label='Business automation'
+            renderIcon={Folder}
+          >
+            <TreeNode
+              key='3-1'
+              id='3-1'
+              value='Business process automation'
+              label='Business process automation'
+              renderIcon={Document}
+            />
+            <TreeNode
+              key='3-2'
+              id='3-2'
+              value='Business process mapping'
+              label='Business process mapping'
+              renderIcon={Document}
+            />
+          </TreeNode>
+          <TreeNode
+            key='4'
+            id='4'
+            value='Business operations'
+            label='Business operations'
+            renderIcon={Document}
+          />
+          <TreeNode
+            key='5'
+            id='5'
+            value='Cloud computing'
+            label='Cloud computing'
+            isExpanded={true}
+            renderIcon={Folder}
+          >
+            <TreeNode
+              key='5-1'
+              id='5-1'
+              value='Containers'
+              label='Containers'
+              renderIcon={Document}
+            />
+            <TreeNode
+              key='5-2'
+              id='5-2'
+              value='Databases'
+              label='Databases'
+              renderIcon={Document}
+            />
+            <TreeNode
+              key='5-3'
+              id='5-3'
+              value='DevOps'
+              label='DevOps'
+              renderIcon={Folder}>
+                <TreeNode
+                  key='5-4'
+                  id='5-4'
+                  value='Solutions'
+                  label='Solutions'
+                  renderIcon={Document}
+                />
+                <TreeNode
+                  key='5-5'
+                  id='5-5'
+                  value='Case studies'
+                  label='Case studies'
+                  renderIcon={Folder}>
+                  <TreeNode
+                      key='5-6'
+                      id='5-6'
+                      value='Resources'
+                      label='Resources'
+                      renderIcon={Document}
+                  />
+                </TreeNode>
+            </TreeNode>
+          </TreeNode>
+          <TreeNode
+            key='6'
+            id='6'
+            value='Data & Analytics'
+            label='Data & Analytics'
+            renderIcon={Folder}>
+            <TreeNode
+              key='6-1'
+              id='6-1'
+              value='Big data'
+              label='Big data'
+              renderIcon={Document}
+            />
+            <TreeNode
+              id='6-2'
+              value='Business intelligence'
+              label='Business intelligence'
+              renderIcon={Document}
+            />
+          </TreeNode>
+        </TreeView>
+      </div>
+  `}
+  </ComponentVariant>
+</ComponentDemo>
 
 ## Formatting