Skip to content

Commit

Permalink
feat(docs): update stateful tree page to use new layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@chanceaclark
chanceaclark committed Oct 7, 2021
1 parent 604e1df commit 1654e9e
Show file tree
Hide file tree
Showing 4 changed files with 158 additions and 124 deletions.
5 changes: 3 additions & 2 deletions packages/docs/PropTables/StatefulTreePropTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion packages/docs/components/ContentRoutingTabs/useContentRoutingTabs.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions packages/docs/components/NextLink/NextLink.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 = '') {
Expand All @@ -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 (
Expand Down
271 changes: 152 additions & 119 deletions packages/docs/pages/statefulTree.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</>
);
};
Expand Down

0 comments on commit 1654e9e

Please sign in to comment.