Skip to content

Commit

Permalink
feat(docs): update buttongroup page to use new layout (#608)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jorgemoya
jorgemoya authored Oct 7, 2021
1 parent b178d4d commit 6e35b19
Showing 1 changed file with 99 additions and 70 deletions.
169 changes: 99 additions & 70 deletions packages/docs/pages/button-group.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,83 +2,112 @@ import { Box, ButtonGroup, H1, Panel, Text } from '@bigcommerce/big-design';
import { CheckIcon, InfoIcon } from '@bigcommerce/big-design-icons';
import React from 'react';

import { Code, CodePreview, PageNavigation } from '../components';
import { Code, CodePreview, ContentRoutingTabs, List } from '../components';
import { ButtonGroupPropTable } from '../PropTables';

const ButtonGroupPage = () => {
const items = [
{
id: 'examples',
title: 'Examples',
render: () => (
<>
<Panel>
<Text>
The <Code primary>Button Group</Code> component is used for grouping actions like{' '}
<Code primary>Button</Code>. Allows to save space and reduce visual overload when there are multiple
actions available for the same entity.
</Text>
<CodePreview>
{/* jsx-to-string:start */}
<Box style={{ width: 400 }}>
<ButtonGroup
actions={[
{ text: 'Button 1' },
{ text: 'Button 2' },
{ text: 'Button 3' },
{ text: 'Button 4' },
{ text: 'Button 5' },
]}
/>
</Box>
{/* jsx-to-string:end */}
</CodePreview>
</Panel>
<Panel header="Action type destructive">
<Text>
By default action with <Code>actionsType: 'destructive'</Code> hides under the ellipsis.
</Text>
<CodePreview>
{/* jsx-to-string:start */}
<ButtonGroup
actions={[{ actionType: 'destructive', text: 'Button 1' }, { text: 'Button 2' }, { text: 'Button 3' }]}
/>
{/* jsx-to-string:end */}
</CodePreview>
</Panel>
<Panel header="Icon property">
<Text>Icon is available only for actions which is hidden under the ellipsis.</Text>
<CodePreview>
{/* jsx-to-string:start */}
<Box style={{ width: 400 }}>
<ButtonGroup
actions={[
{ icon: <InfoIcon />, text: 'Button 1' },
{ text: 'Button 2' },
{ text: 'Button 3' },
{ icon: <InfoIcon />, text: 'Button 4' },
{ icon: <CheckIcon />, text: 'Button 5' },
]}
/>
</Box>
{/* jsx-to-string:end */}
</CodePreview>
</Panel>
</>
),
},
{
id: 'props',
title: 'Props',
render: () => <ButtonGroupPropTable />,
},
];

return (
<>
<H1>Button Group</H1>

<PageNavigation items={items} />
<Panel header="Overview" headerId="overview">
<Text>
Allows to save space and reduce visual overload when there are multiple actions available for the same entity.
</Text>
<Text bold>When to use it:</Text>
<List>
<List.Item>In tables as a list of bulk actions available for the selected items.</List.Item>
</List>
</Panel>

<Panel header="Implementation" headerId="implementation">
<ContentRoutingTabs
id="implementation"
routes={[
{
id: 'basic',
title: 'Basic',
render: () => (
<>
<Text>
The <Code primary>Button Group</Code> component is used for grouping actions like{' '}
<Code primary>Button</Code>. Allows to save space and reduce visual overload when there are multiple
actions available for the same entity.
</Text>

<CodePreview>
{/* jsx-to-string:start */}
<Box style={{ width: 400 }}>
<ButtonGroup
actions={[
{ text: 'Button 1' },
{ text: 'Button 2' },
{ text: 'Button 3' },
{ text: 'Button 4' },
{ text: 'Button 5' },
]}
/>
</Box>
{/* jsx-to-string:end */}
</CodePreview>
</>
),
},
{
id: 'action-type-destructive',
title: 'Action type destructive',
render: () => (
<>
<Text>
By default action with <Code>actionsType: 'destructive'</Code> hides under the ellipsis.
</Text>

<CodePreview>
{/* jsx-to-string:start */}
<ButtonGroup
actions={[
{ actionType: 'destructive', text: 'Button 1' },
{ text: 'Button 2' },
{ text: 'Button 3' },
]}
/>
{/* jsx-to-string:end */}
</CodePreview>
</>
),
},
{
id: 'icon-property',
title: 'Icon property',
render: () => (
<>
<Text>Icon is available only for actions which is hidden under the ellipsis.</Text>

<CodePreview>
{/* jsx-to-string:start */}
<Box style={{ width: 400 }}>
<ButtonGroup
actions={[
{ icon: <InfoIcon />, text: 'Button 1' },
{ text: 'Button 2' },
{ text: 'Button 3' },
{ icon: <InfoIcon />, text: 'Button 4' },
{ icon: <CheckIcon />, text: 'Button 5' },
]}
/>
</Box>
{/* jsx-to-string:end */}
</CodePreview>
</>
),
},
]}
/>
</Panel>

<Panel header="Props" headerId="props">
<ButtonGroupPropTable renderPanel={false} />
</Panel>
</>
);
};
Expand Down

0 comments on commit 6e35b19

Please sign in to comment.