From 1654e9ede14ba61c83ded0ff71eefc0d6e280b58 Mon Sep 17 00:00:00 2001
From: Chancellor Clark <chancellor.clark@bigcommerce.com>
Date: Wed, 6 Oct 2021 16:16:43 -0500
Subject: [PATCH] feat(docs): update stateful tree page to use new layout

---
 .../docs/PropTables/StatefulTreePropTable.tsx |   5 +-
 .../useContentRoutingTabs.ts                  |   2 +-
 .../docs/components/NextLink/NextLink.tsx     |   4 +-
 packages/docs/pages/statefulTree.tsx          | 271 ++++++++++--------
 4 files changed, 158 insertions(+), 124 deletions(-)

diff --git a/packages/docs/PropTables/StatefulTreePropTable.tsx b/packages/docs/PropTables/StatefulTreePropTable.tsx
index 2853f88ac..e7c76724a 100644
--- a/packages/docs/PropTables/StatefulTreePropTable.tsx
+++ b/packages/docs/PropTables/StatefulTreePropTable.tsx
@@ -31,10 +31,11 @@ const statefulTreeProps: Prop[] = [
   },
   {
     name: 'nodes',
-    types: <NextLink href="#tree-node-prop-table">TreeNode[]</NextLink>,
+    types: <NextLink href={{ hash: 'tree-node-prop-table', query: { props: 'treenode' } }}>TreeNode[]</NextLink>,
     description: (
       <>
-        Nodes to render in the tree. See <NextLink href="#tree-node-prop-table">below</NextLink> for usage.
+        Nodes to render in the tree. See{' '}
+        <NextLink href={{ hash: 'tree-node-prop-table', query: { props: 'treenode' } }}>TreeNode</NextLink> for usage.
       </>
     ),
     required: true,
diff --git a/packages/docs/components/ContentRoutingTabs/useContentRoutingTabs.ts b/packages/docs/components/ContentRoutingTabs/useContentRoutingTabs.ts
index 8318e89a0..5967ea65b 100644
--- a/packages/docs/components/ContentRoutingTabs/useContentRoutingTabs.ts
+++ b/packages/docs/components/ContentRoutingTabs/useContentRoutingTabs.ts
@@ -10,7 +10,7 @@ export const useContentRoutingTabs = (routes: Route[], id: string) => {
   const activeContent = routes.find((content) => content.id === activePill);
 
   const handlePillClick = (pillId: string) => {
-    push({ query: { ...query, [id]: pillId } }, undefined, { shallow: true });
+    push({ query: { ...query, [id]: pillId } }, undefined, { scroll: false, shallow: true });
   };
 
   return {
diff --git a/packages/docs/components/NextLink/NextLink.tsx b/packages/docs/components/NextLink/NextLink.tsx
index 3b69c483b..0a52a98b3 100644
--- a/packages/docs/components/NextLink/NextLink.tsx
+++ b/packages/docs/components/NextLink/NextLink.tsx
@@ -1,5 +1,5 @@
 import { Link } from '@bigcommerce/big-design';
-import { default as NLink } from 'next/link';
+import { LinkProps, default as NLink } from 'next/link';
 import React from 'react';
 
 function getLinkAs(as = '') {
@@ -12,7 +12,7 @@ function getLinkAs(as = '') {
   return prefix + as;
 }
 
-export const NextLink: React.FC<{ href: string; as?: string }> = (props) => {
+export const NextLink: React.FC<{ href: LinkProps['href']; as?: string }> = (props) => {
   const { as, children, href } = props;
 
   return (
diff --git a/packages/docs/pages/statefulTree.tsx b/packages/docs/pages/statefulTree.tsx
index 191d87690..638c77a10 100644
--- a/packages/docs/pages/statefulTree.tsx
+++ b/packages/docs/pages/statefulTree.tsx
@@ -2,135 +2,168 @@ import { H1, Message, Panel, StatefulTree, Text } from '@bigcommerce/big-design'
 import { AssignmentIcon, LanguageIcon, StoreIcon } from '@bigcommerce/big-design-icons';
 import React from 'react';
 
-import { Code, CodePreview, PageNavigation } from '../components';
+import { Code, CodePreview, ContentRoutingTabs, List } from '../components';
 import { StatefulTreePropTable, TreeNodePropTable } from '../PropTables';
 
 const StatefulTreePage = () => {
-  const items = [
-    {
-      id: 'examples',
-      title: 'Examples',
-      render: () => (
-        <>
-          <Panel header="Multiple selections">
-            <Text>
-              The <Code primary>StatefulTree</Code> component is used to display a tree of items. Useful for defining a
-              tree of categories or subcollections.
-            </Text>
-            <CodePreview>
-              {/* jsx-to-string:start */}
-              {function Example() {
-                const nodes = [
-                  {
-                    id: '0',
-                    value: 0,
-                    label: 'Category',
-                    children: [
+  return (
+    <>
+      <H1>StatefulTree</H1>
+
+      <Panel header="Overview" headerId="overview">
+        <Text>
+          The <Code primary>StatefulTree</Code> component is used to display a tree of items. Useful for defining a tree
+          of categories or subcollections.
+        </Text>
+        <Text bold>When to use it:</Text>
+        <List>
+          <List.Item>To display a tree of items</List.Item>
+          <List.Item>Creating or assigning items to a specific category/sub-category</List.Item>
+          <List.Item>To organize items through structure hierarchy</List.Item>
+        </List>
+      </Panel>
+
+      <Panel header="Implementation" headerId="implementation">
+        <ContentRoutingTabs
+          id="implementation"
+          routes={[
+            {
+              id: 'multiple-selections',
+              title: 'Multiple selections',
+              render: () => (
+                <CodePreview>
+                  {/* jsx-to-string:start */}
+                  {function Example() {
+                    const nodes = [
                       {
-                        id: '5',
-                        value: 5,
+                        id: '0',
+                        value: 0,
                         label: 'Category',
-                        children: [{ id: '9', value: 9, label: 'Category' }],
+                        children: [
+                          {
+                            id: '5',
+                            value: 5,
+                            label: 'Category',
+                            children: [{ id: '9', value: 9, label: 'Category' }],
+                          },
+                        ],
                       },
-                    ],
-                  },
-                  {
-                    id: '1',
-                    value: 1,
-                    label: 'Category',
-                    children: [{ id: '6', value: 6, label: 'Category' }],
-                  },
-                  { id: '2', value: 2, label: 'Category' },
-                  {
-                    id: '3',
-                    value: 3,
-                    label: 'Category',
-                    children: [{ id: '7', value: 7, label: 'Category' }],
-                  },
-                  { id: '4', value: 4, label: 'Category', children: [{ id: '8', value: 8, label: 'Category' }] },
-                ];
-
-                return (
-                  <StatefulTree
-                    defaultExpanded={['0', '5', '1']}
-                    defaultSelected={['9', '3', '7']}
-                    disabledNodes={['1']}
-                    nodes={nodes}
-                    selectable="multi"
-                  />
-                );
-              }}
-              {/* jsx-to-string:end */}
-            </CodePreview>
-          </Panel>
-          <Panel header="Single selection">
-            <CodePreview>
-              {/* jsx-to-string:start */}
-              {function Example() {
-                const nodes = [
-                  {
-                    id: '0',
-                    value: 0,
-                    label: 'Category',
-                    children: [{ id: '3', value: 3, label: 'Subcategory' }],
-                  },
-                  { id: '1', value: 1, label: 'Category' },
-                  { id: '2', value: 2, label: 'Category' },
-                ];
+                      {
+                        id: '1',
+                        value: 1,
+                        label: 'Category',
+                        children: [{ id: '6', value: 6, label: 'Category' }],
+                      },
+                      { id: '2', value: 2, label: 'Category' },
+                      {
+                        id: '3',
+                        value: 3,
+                        label: 'Category',
+                        children: [{ id: '7', value: 7, label: 'Category' }],
+                      },
+                      { id: '4', value: 4, label: 'Category', children: [{ id: '8', value: 8, label: 'Category' }] },
+                    ];
 
-                return (
-                  <StatefulTree selectable="radio" nodes={nodes} defaultExpanded={['0']} disabledNodes={['0', '2']} />
-                );
-              }}
-              {/* jsx-to-string:end */}
-            </CodePreview>
-          </Panel>
-          <Panel header="Custom icons">
-            <Text>You can replace the folder icon with a custom icon of your choice.</Text>
-            <Message
-              type="warning"
-              messages={[{ text: 'If you use the iconless prop, ALL icons will be hidden (including custom ones).' }]}
-              marginBottom="medium"
-            />
-            <CodePreview>
-              {/* jsx-to-string:start */}
-              {function Example() {
-                const nodes = [
-                  {
-                    id: '0',
-                    icon: <StoreIcon color="primary" />,
-                    label: 'Storefront - US',
-                    children: [{ id: '3', label: 'Subcategory' }],
-                  },
-                  { id: '1', icon: <LanguageIcon color="primary" />, label: 'Storefront - CA' },
-                  { id: '2', icon: <AssignmentIcon color="primary" />, label: 'Storefront - EU' },
-                ];
+                    return (
+                      <StatefulTree
+                        defaultExpanded={['0', '5', '1']}
+                        defaultSelected={['9', '3', '7']}
+                        disabledNodes={['1']}
+                        nodes={nodes}
+                        selectable="multi"
+                      />
+                    );
+                  }}
+                  {/* jsx-to-string:end */}
+                </CodePreview>
+              ),
+            },
+            {
+              id: 'single-select',
+              title: 'Single selection',
+              render: () => (
+                <CodePreview>
+                  {/* jsx-to-string:start */}
+                  {function Example() {
+                    const nodes = [
+                      {
+                        id: '0',
+                        value: 0,
+                        label: 'Category',
+                        children: [{ id: '3', value: 3, label: 'Subcategory' }],
+                      },
+                      { id: '1', value: 1, label: 'Category' },
+                      { id: '2', value: 2, label: 'Category' },
+                    ];
 
-                return <StatefulTree defaultExpanded={['0']} nodes={nodes} />;
-              }}
-              {/* jsx-to-string:end */}
-            </CodePreview>
-          </Panel>
-        </>
-      ),
-    },
-    {
-      id: 'props',
-      title: 'Props',
-      render: () => (
-        <>
-          <StatefulTreePropTable />
-          <TreeNodePropTable id="tree-node-prop-table" />
-        </>
-      ),
-    },
-  ];
+                    return (
+                      <StatefulTree
+                        selectable="radio"
+                        nodes={nodes}
+                        defaultExpanded={['0']}
+                        disabledNodes={['0', '2']}
+                      />
+                    );
+                  }}
+                  {/* jsx-to-string:end */}
+                </CodePreview>
+              ),
+            },
+            {
+              id: 'custom-icons',
+              title: 'Custom icons',
+              render: () => (
+                <>
+                  <Text>You can replace the folder icon with a custom icon of your choice.</Text>
+                  <Message
+                    type="warning"
+                    messages={[
+                      { text: 'If you use the iconless prop, ALL icons will be hidden (including custom ones).' },
+                    ]}
+                    marginBottom="medium"
+                  />
+                  <CodePreview>
+                    {/* jsx-to-string:start */}
+                    {function Example() {
+                      const nodes = [
+                        {
+                          id: '0',
+                          icon: <StoreIcon color="primary" />,
+                          label: 'Storefront - US',
+                          children: [{ id: '3', label: 'Subcategory' }],
+                        },
+                        { id: '1', icon: <LanguageIcon color="primary" />, label: 'Storefront - CA' },
+                        { id: '2', icon: <AssignmentIcon color="primary" />, label: 'Storefront - EU' },
+                      ];
 
-  return (
-    <>
-      <H1>StatefulTree</H1>
+                      return <StatefulTree defaultExpanded={['0']} nodes={nodes} />;
+                    }}
+                    {/* jsx-to-string:end */}
+                  </CodePreview>
+                </>
+              ),
+            },
+          ]}
+        />
+      </Panel>
 
-      <PageNavigation items={items} />
+      <Panel header="Props" headerId="props">
+        <ContentRoutingTabs
+          id="props"
+          routes={[
+            {
+              id: 'stateful-tree',
+              title: 'StatefulTree',
+              render: () => <StatefulTreePropTable renderPanel={false} />,
+            },
+            {
+              id: 'tree-node',
+              title: 'TreeNode',
+              render: () => <TreeNodePropTable id="tree-node-prop-table" renderPanel={false} />,
+            },
+          ]}
+        />
+      </Panel>
     </>
   );
 };