docs(tree-view): new component (#3062)

* docs(tree-view): new component

* remove-tooltip-content

* Update usage.mdx

* formate updates

* Update usage.mdx

* add-style-tab-content

* remove line breaks

* fixed format bug

* fixed bugs

* image size test

* Update code.mdx

* update-images

* Update usage.mdx

* Apply suggestions from design review

Co-authored-by: Lauren Rice <[email protected]>

* Update src/pages/components/tree-view/style.mdx

Co-authored-by: Lauren Rice <[email protected]>

* updated-overview-image

* fix: format and add to nav

* Update code.mdx

Co-authored-by: Lauren Rice <[email protected]>
Co-authored-by: Josefina Mancilla <[email protected]>

src/data/nav-items.yaml

@@ -174,6 +174,8 @@
       path: /components/toggletip/usage/
     - title: Tooltip
       path: /components/tooltip/usage/
+    - title: Tree view
+      path: /components/tree-view/usage/
     - title: UI shell header
       path: /components/UI-shell-header/usage/
     - title: UI shell left panel

src/pages/components/tree-view/accessibility.mdx

@@ -0,0 +1,26 @@
+---
+title: Tree view
+description:
+  A tree view is a hierarchical structure that provides nested levels of
+  navigation.
+tabs: ['Usage', 'Style', 'Code', 'Accessibility']
+---
+
+<PageDescription>
+
+Design annotations are needed for specific instances shown below, but for the
+standard accordion component, Carbon already incorporates accessibility.
+
+</PageDescription>
+
+<InlineNotification>
+
+This page is underdevelopment. Please check back later updates.
+
+</InlineNotification>
+
+<AnchorLinks>
+  <AnchorLink>What Carbon provides</AnchorLink>
+  <AnchorLink>Design recommendations</AnchorLink>
+  <AnchorLink>Development considerations</AnchorLink>
+</AnchorLinks>

src/pages/components/tree-view/code.mdx

@@ -0,0 +1,38 @@
+---
+title: Tree view
+description:
+  A tree view is a hierarchical structure that provides nested levels of
+  navigation.
+tabs: ['Usage', 'Style', 'Code', 'Accessibility']
+---
+
+<PageDescription>
+
+Preview the tree view component with the React live demo. For detailed code
+usage documentation, see the Storybooks for each framework below.
+
+</PageDescription>
+
+## Documentation
+
+<Row className="resource-card-group">
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+    subTitle="React"
+    href="https://carbon-components-react.netlify.app/?path=/story/components-treeview--default"
+    >
+
+<MdxIcon name="react" />
+
+  </ResourceCard>
+</Column>
+</Row>
+
+## Live demo
+
+<InlineNotification>
+
+**Coming soon:** The live demo for tree view is underdevelopment and will be
+available soon.
+
+</InlineNotification>

src/pages/components/tree-view/style.mdx

@@ -0,0 +1,134 @@
+---
+title: Tree view
+description:
+  A tree view is a hierarchical structure that provides nested levels of
+  navigation.
+tabs: ['Usage', 'Style', 'Code', 'Accessibility']
+---
+
+## Color
+
+| Element    | Property         | Color token       |
+| ---------- | ---------------- | ----------------- |
+| Label      | text color       | `$text-secondary` |
+| Caret icon | svg              | `$icon-secondary` |
+| Node icon  | svg              | `$icon-secondary` |
+| Node       | background-color | `$layer`\*        |
+
+<Caption>
+  * Denotes a contextual color token that will change values based on the layer
+  it is placed on.
+</Caption>
+
+<Row>
+<Column colLg={8}>
+
+![Closed and open states for tree-view](images/tree-view-style-1.png)
+
+</Column>
+</Row>
+
+<Caption>Example of closed (top) and open (bottom) tree view states.</Caption>
+
+### Interactive states
+
+| State            | Element              | Property         | Color token               |
+| ---------------- | -------------------- | ---------------- | ------------------------- |
+| Hover            | Label                | text-color       | `$text-primary`           |
+|                  | Caret icon           | svg              | `$icon-primary`           |
+|                  | Node icon (optional) | svg              | `$icon-primary`           |
+|                  | Node                 | background-color | `$layer-hover`\*          |
+| Focus            | Node                 | border           | `$focus`                  |
+| Selected         | Label                | text-color       | `$text-primary`           |
+|                  | Caret icon           | svg              | `$icon-primary`           |
+|                  | Node icon (optional) | svg              | `$icon-primary`           |
+|                  | Node                 | background-color | `$layer-selected`\*       |
+|                  |                      | border-left      | `$border-interactive`     |
+| Selected + hover | Label                | text-color       | `$text-primary`           |
+|                  | Caret icon           | svg              | `$icon-primary`           |
+|                  | Node icon (optional) | svg              | `$icon-primary`           |
+|                  | Node                 | background-color | `$layer-selected-hover`\* |
+| Disabled         | Label                | text-color       | `$text-disabled`          |
+|                  | Caret icon           | svg              | `$icon-disabled`          |
+|                  | Node icon (optional) | svg              | `$icon-disabled`          |
+|                  | Node                 | background-color | `$layer`\*                |
+
+<Caption>
+  * Denotes a contextual color token that will change values based on the layer
+  it is placed on.
+</Caption>
+
+<Row>
+<Column colLg={12}>
+
+![Examples of the interactive states for tree-view](images/tree-view-style-2.png)
+
+</Column>
+</Row>
+
+## Typography
+
+| Element | Font-size (px/rem) | Font-weight   | Type token         |
+| ------- | ------------------ | ------------- | ------------------ |
+| Label   | 14 / 0.875         | Regular / 400 | `$body-compact-01` |
+
+## Structure
+
+The internal structure of each node varies depending on the node type and level.
+The labels of nodes on the same level should always vertically align. Do not mix
+text-only and icon nodes together as this will misalign labels.
+
+| Element    | Property      | px / rem | Spacing token |
+| ---------- | ------------- | -------- | ------------- |
+| Node       | padding-right | 16 / 1   | `$spacing-05` |
+| Caret icon | margin-right  | 8 / .5   | `$spacing-03` |
+
+### Tree view (text only)
+
+| Node type | Level  | Property     | px / rem | Spacing token |
+| --------- | ------ | ------------ | -------- | ------------- |
+| _Branch_  | First  | padding-left | 16 / 1   | `$spacing-05` |
+|           | Second | padding-left | 32 / 2   | `$spacing-07` |
+|           | Third  | padding-left | 48 / 3   | `$spacing-09` |
+|           | Fourth | padding-left | 64 / 4   | `$spacing-10` |
+| _Leaf_    | First  | padding-left | 40 / 2.5 | `$spacing-08` |
+|           | Second | padding-left | 56 / 3.5 | –             |
+|           | Third  | padding-left | 72 / 4.5 | –             |
+|           | Fourth | padding-left | 88 / 5.5 | –             |
+
+<Row>
+<Column colLg={12}>
+
+![Examples of text-only tree view node structures](images/tree-view-style-3.png)
+
+</Column>
+</Row>
+
+<Caption>
+  Structure and spacing measurements for text only tree view | px / rem
+</Caption>
+
+### Tree view (with icons)
+
+| Node type | Level  | Property     | px / rem | Spacing token |
+| --------- | ------ | ------------ | -------- | ------------- |
+| _Branch_  | First  | padding-left | 16 / 1   | `$spacing-05` |
+|           | Second | padding-left | 32 / 2   | `$spacing-07` |
+|           | Third  | padding-left | 48 / 3   | `$spacing-09` |
+|           | Fourth | padding-left | 64 / 4   | `$spacing-10` |
+| _Leaf_    | First  | padding-left | 32 / 2   | `$spacing-07` |
+|           | Second | padding-left | 48 / 3   | `$spacing-09` |
+|           | Third  | padding-left | 64 / 4   | `$spacing-10` |
+|           | Fourth | padding-left | 80 / 5   | `$spacing-11` |
+
+<Row>
+<Column colLg={12}>
+
+![Examples of tree view with icons node structures](images/tree-view-style-4.png)
+
+</Column>
+</Row>
+
+<Caption>
+  Structure and spacing measurements for tree view with icons | px / rem
+</Caption>