Skip to content

Commit

Permalink
feat(docs): add TreeView LiveDemo (#3398)
Browse files Browse the repository at this point in the history
  • Loading branch information
@francinelucca
francinelucca committed Feb 23, 2023
1 parent 6f68344 commit 5d04308
Show file tree
Hide file tree
Showing 3 changed files with 528 additions and 16 deletions.
10 changes: 5 additions & 5 deletions src/data/docgen/react-docgen.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8573,7 +8573,7 @@
}
}
},
"unstable_TreeView": {
"TreeView": {
"description": "",
"displayName": "TreeView",
"props": {
Expand All @@ -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,
Expand Down Expand Up @@ -8642,7 +8642,7 @@
}
}
},
"unstable_TreeNode": {
"TreeNode": {
"description": "",
"displayName": "TreeNode",
"props": {
Expand Down
266 changes: 261 additions & 5 deletions src/pages/components/tree-view/code.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Loading

1 comment on commit 5d04308

@vercel
Copy link

@vercel vercel bot commented on 5d04308 Feb 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

carbondesignsystem – ./

carbondesignsystem-carbon-design-system.vercel.app
carbondesignsystem.vercel.app
carbondesignsystem-git-main-carbon-design-system.vercel.app

Please sign in to comment.