diff --git a/packages/docs/PropTables/TabsPropTable.tsx b/packages/docs/PropTables/TabsPropTable.tsx
index bd460274b..a4ca732c6 100644
--- a/packages/docs/PropTables/TabsPropTable.tsx
+++ b/packages/docs/PropTables/TabsPropTable.tsx
@@ -10,10 +10,10 @@ const tabsProps: Prop[] = [
},
{
name: 'items',
- types: TabItem[],
+ types: TabItem[],
description: (
<>
- See below for usage.
+ See TabItem for usage.
>
),
},
diff --git a/packages/docs/pages/tabs.tsx b/packages/docs/pages/tabs.tsx
index d97f6e4f7..2a6de07f0 100644
--- 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: () => (
- <>
-
-
- The Tabs
component is used to organize and navigate between content types that are
- related and at the same level of information architecture heirarchy.
-
-
- {/* 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 (
- <>
-
-
- {activeTab === 'tab1' && Content 1}
- {activeTab === 'tab2' && Content 2}
- {activeTab === 'tab3' && Content 3}
- {activeTab === 'tab4' && Content 4}
-
- >
- );
- }}
- {/* jsx-to-string:end */}
-
-
- >
- ),
- },
- {
- id: 'props',
- title: 'Props',
- render: () => (
- <>
-
-
- >
- ),
- },
- ];
-
return (
<>
Tabs
-
+
+
+ Tab
s are navigation elements at the top of the page, used to switch between different
+ groups of related content on a page.
+
+ When to use:
+
+ Breaking up a page’s content into distinct chunks or tasks.
+
+
+
+
+
+ {/* 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 (
+ <>
+
+
+ {activeTab === 'tab1' && Content 1}
+ {activeTab === 'tab2' && Content 2}
+ {activeTab === 'tab3' && Content 3}
+ {activeTab === 'tab4' && Content 4}
+
+ >
+ );
+ }}
+ {/* jsx-to-string:end */}
+
+
+
+
+ ,
+ },
+ {
+ id: 'tab-item',
+ title: 'TabItem',
+ render: () => ,
+ },
+ ]}
+ />
+
>
);
};