Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(docs): update tabs page to use new layout
Browse files Browse the repository at this point in the history
jorgemoya committed Oct 12, 2021

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent 3061ef5 commit a0d9fca
Showing 2 changed files with 60 additions and 57 deletions.
4 changes: 2 additions & 2 deletions packages/docs/PropTables/TabsPropTable.tsx
Original file line number Diff line number Diff line change
@@ -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.
</>
),
},
113 changes: 58 additions & 55 deletions packages/docs/pages/tabs.tsx
Original file line number Diff line number Diff line change
@@ -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>
</>
);
};

0 comments on commit a0d9fca

Please sign in to comment.