feat(docs): update tabs page to use new layout

bigcommerce · Oct 12, 2021 · a0d9fca · a0d9fca
1 parent 3061ef5
commit a0d9fca
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 57 deletions.
diff --git a/packages/docs/PropTables/TabsPropTable.tsx b/packages/docs/PropTables/TabsPropTable.tsx
@@ -10,10 +10,10 @@ const tabsProps: Prop[] = [
   },
   {
     name: 'items',
-    types: <NextLink href="#tabs-items-prop-table">TabItem[]</NextLink>,
+    types: <NextLink href={{ hash: 'tab-item-prop-table', query: { props: 'tab-item' } }}>TabItem[]</NextLink>,
     description: (
       <>
-        See <NextLink href="#tabs-items-prop-table">below</NextLink> for usage.
+        See <NextLink href={{ hash: 'tab-item-prop-table', query: { props: 'tab-item' } }}>TabItem</NextLink> for usage.
       </>
     ),
   },

diff --git a/packages/docs/pages/tabs.tsx b/packages/docs/pages/tabs.tsx
@@ -1,68 +1,71 @@
 import { Box, H1, Panel, Tabs, Text } from '@bigcommerce/big-design';
 import React, { useState } from 'react';
 
-import { Code, CodePreview, PageNavigation } from '../components';
+import { Code, CodePreview, ContentRoutingTabs, List } from '../components';
 import { TabItemPropTable, TabsPropTable } from '../PropTables';
 
 const TabsPage = () => {
-  const items = [
-    {
-      id: 'examples',
-      title: 'Examples',
-      render: () => (
-        <>
-          <Panel>
-            <Text>
-              The <Code primary>Tabs</Code> component is used to organize and navigate between content types that are
-              related and at the same level of information architecture heirarchy.
-            </Text>
-            <CodePreview>
-              {/* jsx-to-string:start */}
-              {function Example() {
-                const [activeTab, setActiveTab] = useState('tab1');
-
-                const items = [
-                  { id: 'tab1', title: 'Example 1' },
-                  { id: 'tab2', title: 'Example 2' },
-                  { id: 'tab3', title: 'Example 3' },
-                  { id: 'tab4', title: 'Example 4', disabled: true },
-                ];
-
-                return (
-                  <>
-                    <Tabs activeTab={activeTab} items={items} onTabClick={setActiveTab} />
-                    <Box marginTop="large">
-                      {activeTab === 'tab1' && <Text>Content 1</Text>}
-                      {activeTab === 'tab2' && <Text>Content 2</Text>}
-                      {activeTab === 'tab3' && <Text>Content 3</Text>}
-                      {activeTab === 'tab4' && <Text>Content 4</Text>}
-                    </Box>
-                  </>
-                );
-              }}
-              {/* jsx-to-string:end */}
-            </CodePreview>
-          </Panel>
-        </>
-      ),
-    },
-    {
-      id: 'props',
-      title: 'Props',
-      render: () => (
-        <>
-          <TabsPropTable />
-          <TabItemPropTable id="tabs-items-prop-table" />
-        </>
-      ),
-    },
-  ];
-
   return (
     <>
       <H1>Tabs</H1>
 
-      <PageNavigation items={items} />
+      <Panel header="Overview" headerId="overview">
+        <Text>
+          <Code primary>Tab</Code>s are navigation elements at the top of the page, used to switch between different
+          groups of related content on a page.
+        </Text>
+        <Text bold>When to use:</Text>
+        <List>
+          <List.Item>Breaking up a page’s content into distinct chunks or tasks.</List.Item>
+        </List>
+      </Panel>
+
+      <Panel header="Implementation" headerId="implementation">
+        <CodePreview>
+          {/* jsx-to-string:start */}
+          {function Example() {
+            const [activeTab, setActiveTab] = useState('tab1');
+
+            const items = [
+              { id: 'tab1', title: 'Example 1' },
+              { id: 'tab2', title: 'Example 2' },
+              { id: 'tab3', title: 'Example 3' },
+              { id: 'tab4', title: 'Example 4', disabled: true },
+            ];
+
+            return (
+              <>
+                <Tabs activeTab={activeTab} items={items} onTabClick={setActiveTab} />
+                <Box marginTop="large">
+                  {activeTab === 'tab1' && <Text>Content 1</Text>}
+                  {activeTab === 'tab2' && <Text>Content 2</Text>}
+                  {activeTab === 'tab3' && <Text>Content 3</Text>}
+                  {activeTab === 'tab4' && <Text>Content 4</Text>}
+                </Box>
+              </>
+            );
+          }}
+          {/* jsx-to-string:end */}
+        </CodePreview>
+      </Panel>
+
+      <Panel header="Props" headerId="props">
+        <ContentRoutingTabs
+          id="props"
+          routes={[
+            {
+              id: 'tabs',
+              title: 'Tabs',
+              render: () => <TabsPropTable renderPanel={false} />,
+            },
+            {
+              id: 'tab-item',
+              title: 'TabItem',
+              render: () => <TabItemPropTable id="tab-item-prop-table" renderPanel={false} />,
+            },
+          ]}
+        />
+      </Panel>
     </>
   );
 };