-
Notifications
You must be signed in to change notification settings - Fork 64
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: add ActionBar component documentation (#1527)
* docs(patterns): add base documentation for ActionBar * docs(patterns): add SideNav link for Action Bar * docs(patterns): add changeset for action bar documentation * docs(patterns): correct array sample style for ActionButton Co-authored-by: Chancellor Clark <chancellor.clark@bigcommerce.com> --------- Co-authored-by: Chancellor Clark <chancellor.clark@bigcommerce.com>
- Loading branch information
1 parent
d7baf57
commit 8d80893
Showing
4 changed files
with
132 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
'@bigcommerce/docs': patch | ||
--- | ||
|
||
Added Action Bar pattern component documentation |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
import React from 'react'; | ||
|
||
import { NextLink, Prop, PropTable, PropTableWrapper } from '../components'; | ||
|
||
const actionBarProps: Prop[] = [ | ||
{ | ||
name: 'actions', | ||
types: ( | ||
<> | ||
<NextLink | ||
href={{ hash: 'action-button-prop-table', query: { props: 'action-button-props' } }} | ||
> | ||
ActionButton | ||
</NextLink> | ||
[] | ||
</> | ||
), | ||
description: 'An array of actions to display in the action bar. Supports up to three actions.', | ||
required: true, | ||
}, | ||
]; | ||
|
||
export const ActionBarPropsTable: React.FC<PropTableWrapper> = (props) => ( | ||
<PropTable propList={actionBarProps} title="ActionBar" {...props} /> | ||
); | ||
|
||
const actionButtonProps: Prop[] = [ | ||
{ | ||
name: 'text', | ||
types: 'string', | ||
description: 'The text content of the button.', | ||
required: true, | ||
}, | ||
]; | ||
|
||
export const ActionButtonPropsTable: React.FC<PropTableWrapper> = (props) => ( | ||
<PropTable propList={actionButtonProps} title="ActionBar[ActionButton]" {...props} /> | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,88 @@ | ||
import { H1, Panel, Text } from '@bigcommerce/big-design'; | ||
import { ActionBar } from '@bigcommerce/big-design-patterns'; | ||
import React, { Fragment } from 'react'; | ||
|
||
import { Code, CodePreview, CodeSnippet, ContentRoutingTabs, GuidelinesTable } from '../components'; | ||
import { ButtonPropTable } from '../PropTables'; | ||
import { ActionBarPropsTable, ActionButtonPropsTable } from '../PropTables/ActionBarPropTable'; | ||
|
||
const ActionBarPage = () => { | ||
return ( | ||
<> | ||
<H1>ActionBar</H1> | ||
|
||
<Panel header="Overview" headerId="overview"> | ||
<Text> | ||
The <Code primary>ActionBar</Code> component provides a consistent way to display a set of | ||
action buttons at the bottom of a page or section. It supports up to three actions and | ||
ensures visual consistency across the platform. | ||
</Text> | ||
|
||
<Text> | ||
Use to provide quick and consistent access to key actions at the bottom of a page. | ||
</Text> | ||
</Panel> | ||
|
||
<Panel header="Implementation" headerId="implementation"> | ||
<Fragment key="basic"> | ||
<Text> | ||
To use <Code primary>ActionBar</Code> import the component from the package: | ||
</Text> | ||
<CodeSnippet>{`import { ActionBar } from '@bigcommerce/big-design-patterns';`}</CodeSnippet> | ||
</Fragment> | ||
<CodePreview> | ||
{/* jsx-to-string:start */} | ||
<ActionBar | ||
actions={[ | ||
{ | ||
text: 'Primary', | ||
variant: 'primary', | ||
}, | ||
{ | ||
text: 'Secondary', | ||
variant: 'secondary', | ||
}, | ||
]} | ||
/> | ||
{/* jsx-to-string:end */} | ||
</CodePreview> | ||
</Panel> | ||
|
||
<Panel header="Props" headerId="props"> | ||
<ContentRoutingTabs | ||
id="props" | ||
routes={[ | ||
{ | ||
id: 'action-bar-props', | ||
title: 'ActionBar', | ||
render: () => <ActionBarPropsTable />, | ||
}, | ||
{ | ||
id: 'action-button-props', | ||
title: 'ActionButton', | ||
render: () => ( | ||
<ActionButtonPropsTable | ||
id="action-button-prop-table" | ||
inheritedProps={<ButtonPropTable collapsible />} | ||
/> | ||
), | ||
}, | ||
]} | ||
/> | ||
</Panel> | ||
|
||
<Panel header="Do's and Don'ts" headerId="guidelines"> | ||
<GuidelinesTable | ||
discouraged={["Don't use for non-critical actions."]} | ||
recommended={[ | ||
'Use to provide quick and consistent access to key actions.', | ||
'Limit the number of actions to three, prioritizing the most important ones.', | ||
'Ensure that only one primary action is included to guide user focus.', | ||
]} | ||
/> | ||
</Panel> | ||
</> | ||
); | ||
}; | ||
|
||
export default ActionBarPage; |