mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-29 23:58:06 +01:00
Fix button-group.stories for new Storybook documentation (#12621)
* button-group * remove usage table * Update ui/components/ui/button-group/button-group.component.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/ui/button-group/README.mdx Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/ui/button-group/README.mdx Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/ui/button-group/README.mdx Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/ui/button-group/README.mdx Co-authored-by: George Marshall <george.marshall@consensys.net> Co-authored-by: George Marshall <george.marshall@consensys.net>
This commit is contained in:
Etienne Dusseault
GitHub
parent
8721c80054
commit
d5ba78f90f
63
ui/components/ui/button-group/README.mdx
Normal file
63
ui/components/ui/button-group/README.mdx
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
|
||||||
|
|
||||||
|
import ButtonGroup from '.';
|
||||||
|
|
||||||
|
# Button Group
|
||||||
|
|
||||||
|
Button Group is a wrapper for buttons to align them horizontally
|
||||||
|
|
||||||
|
<Canvas>
|
||||||
|
<Story id="ui-components-ui-button-group-button-group-stories-js--default-story" />
|
||||||
|
</Canvas>
|
||||||
|
|
||||||
|
## Component API
|
||||||
|
|
||||||
|
<ArgsTable of={ButtonGroup} />
|
||||||
|
|
||||||
|
### With Disabled Button
|
||||||
|
|
||||||
|
By changing the `disabled` value to true, the buttons inside the button group component will be disabled
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
<ButtonGroup disabled>
|
||||||
|
<button>cheap</button>
|
||||||
|
<button>average</button>
|
||||||
|
<button>fast</button>
|
||||||
|
</ButtonGroup>
|
||||||
|
```
|
||||||
|
|
||||||
|
<Canvas>
|
||||||
|
<Story id="ui-components-ui-button-group-button-group-stories-js--with-disabled-button" />
|
||||||
|
</Canvas>
|
||||||
|
|
||||||
|
### With Radio Button
|
||||||
|
|
||||||
|
Rendering radio type button instead
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
<ButtonGroup variant="radiogroup">
|
||||||
|
<button>cheap</button>
|
||||||
|
<button>average</button>
|
||||||
|
<button>fast</button>
|
||||||
|
</ButtonGroup>
|
||||||
|
```
|
||||||
|
|
||||||
|
<Canvas>
|
||||||
|
<Story id="ui-components-ui-button-group-button-group-stories-js--with-radio-button" />
|
||||||
|
</Canvas>
|
||||||
|
|
||||||
|
### No Active Button
|
||||||
|
|
||||||
|
Rendering button group without active button
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
<ButtonGroup noButtonActiveByDefault>
|
||||||
|
<button>cheap</button>
|
||||||
|
<button>average</button>
|
||||||
|
<button>fast</button>
|
||||||
|
</ButtonGroup>
|
||||||
|
```
|
||||||
|
|
||||||
|
<Canvas>
|
||||||
|
<Story id="ui-components-ui-button-group-button-group-stories-js--no-active-button" />
|
||||||
|
</Canvas>
|
||||||
@ -4,13 +4,37 @@ import classnames from 'classnames';
|
|||||||
|
|
||||||
export default class ButtonGroup extends PureComponent {
|
export default class ButtonGroup extends PureComponent {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
|
/**
|
||||||
|
* change button active order
|
||||||
|
*/
|
||||||
defaultActiveButtonIndex: PropTypes.number,
|
defaultActiveButtonIndex: PropTypes.number,
|
||||||
|
/**
|
||||||
|
* no button are active before clicked by the user
|
||||||
|
*/
|
||||||
noButtonActiveByDefault: PropTypes.bool,
|
noButtonActiveByDefault: PropTypes.bool,
|
||||||
|
/**
|
||||||
|
* disabling every button inside button group
|
||||||
|
*/
|
||||||
disabled: PropTypes.bool,
|
disabled: PropTypes.bool,
|
||||||
|
/**
|
||||||
|
* Children must be an array of button components
|
||||||
|
*/
|
||||||
children: PropTypes.array,
|
children: PropTypes.array,
|
||||||
|
/**
|
||||||
|
* Adds a className to the root div of the of the ButtonGroup component
|
||||||
|
*/
|
||||||
className: PropTypes.string,
|
className: PropTypes.string,
|
||||||
|
/**
|
||||||
|
* adding style for button group component
|
||||||
|
*/
|
||||||
style: PropTypes.object,
|
style: PropTypes.object,
|
||||||
|
/**
|
||||||
|
* updating value of active button in button group component
|
||||||
|
*/
|
||||||
newActiveButtonIndex: PropTypes.number,
|
newActiveButtonIndex: PropTypes.number,
|
||||||
|
/**
|
||||||
|
* options for rendering type of button, consist of 'default' and 'radiogroup'
|
||||||
|
*/
|
||||||
variant: PropTypes.oneOf(['radiogroup', 'default']),
|
variant: PropTypes.oneOf(['radiogroup', 'default']),
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -1,51 +1,94 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { action } from '@storybook/addon-actions';
|
|
||||||
import classnames from 'classnames';
|
|
||||||
import { text, boolean } from '@storybook/addon-knobs';
|
|
||||||
import Button from '../button';
|
import Button from '../button';
|
||||||
|
import README from './README.mdx';
|
||||||
import ButtonGroup from '.';
|
import ButtonGroup from '.';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
title: 'ButtonGroup',
|
title: 'Components/UI/ButtonGroup',
|
||||||
id: __filename,
|
id: __filename,
|
||||||
|
component: ButtonGroup,
|
||||||
|
parameters: { docs: { page: README } },
|
||||||
|
argTypes: {
|
||||||
|
defaultActiveButtonIndex: { control: 'number' },
|
||||||
|
noButtonActiveByDefault: { control: 'boolean' },
|
||||||
|
disabled: { control: 'boolean' },
|
||||||
|
children: { control: 'array' },
|
||||||
|
className: { control: 'text' },
|
||||||
|
style: { control: 'object' },
|
||||||
|
newActiveButtonIndex: { control: 'number' },
|
||||||
|
variant: {
|
||||||
|
options: ['radiogroup', 'default'],
|
||||||
|
control: { type: 'select' },
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export const withButtons = () => (
|
export const DefaultStory = (args) => (
|
||||||
<ButtonGroup
|
<ButtonGroup {...args}>{args.children}</ButtonGroup>
|
||||||
style={{ width: '300px' }}
|
|
||||||
disabled={boolean('Disabled', false)}
|
|
||||||
defaultActiveButtonIndex={1}
|
|
||||||
>
|
|
||||||
<Button onClick={action('cheap')}>{text('Button1', 'Cheap')}</Button>
|
|
||||||
<Button onClick={action('average')}>{text('Button2', 'Average')}</Button>
|
|
||||||
<Button onClick={action('fast')}>{text('Button3', 'Fast')}</Button>
|
|
||||||
</ButtonGroup>
|
|
||||||
);
|
);
|
||||||
|
|
||||||
export const withDisabledButton = () => (
|
DefaultStory.storyName = 'Default';
|
||||||
<ButtonGroup style={{ width: '300px' }} disabled={boolean('Disabled', false)}>
|
DefaultStory.args = {
|
||||||
<Button onClick={action('enabled')}>{text('Button1', 'Enabled')}</Button>
|
defaultActiveButtonIndex: 1,
|
||||||
<Button onClick={action('disabled')} disabled>
|
noButtonActiveByDefault: false,
|
||||||
{text('Button2', 'Disabled')}
|
disabled: false,
|
||||||
</Button>
|
children: ['cheap', 'average', 'fast'].map((label, index) => (
|
||||||
</ButtonGroup>
|
<Button key={index}>{label}</Button>
|
||||||
|
)),
|
||||||
|
className: '',
|
||||||
|
style: { width: '300px' },
|
||||||
|
newActiveButtonIndex: 0,
|
||||||
|
variant: 'default',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const WithDisabledButton = (args) => (
|
||||||
|
<ButtonGroup {...args}>{args.children}</ButtonGroup>
|
||||||
);
|
);
|
||||||
|
|
||||||
export const radioButtons = () => (
|
WithDisabledButton.args = {
|
||||||
<ButtonGroup
|
defaultActiveButtonIndex: 1,
|
||||||
style={{ width: '300px' }}
|
noButtonActiveByDefault: false,
|
||||||
defaultActiveButtonIndex={1}
|
disabled: true,
|
||||||
variant="radiogroup"
|
children: ['cheap', 'average', 'fast'].map((label, index) => (
|
||||||
>
|
<Button key={index}>{label}</Button>
|
||||||
<Button onClick={action('radio 1')}>{text('Button1', '1%')}</Button>
|
)),
|
||||||
<Button onClick={action('radio 2')}>{text('Button2', '2%')}</Button>
|
className: '',
|
||||||
<Button
|
style: { width: '300px' },
|
||||||
onClick={action('radio 3')}
|
newActiveButtonIndex: 0,
|
||||||
className={classnames({
|
variant: 'default',
|
||||||
'radio-button--danger': boolean('Button3 warning', false),
|
};
|
||||||
})}
|
|
||||||
>
|
export const WithRadioButton = (args) => (
|
||||||
{text('Button3', '5%')}
|
<ButtonGroup {...args}>{args.children}</ButtonGroup>
|
||||||
</Button>
|
|
||||||
</ButtonGroup>
|
|
||||||
);
|
);
|
||||||
|
|
||||||
|
WithRadioButton.args = {
|
||||||
|
defaultActiveButtonIndex: 1,
|
||||||
|
noButtonActiveByDefault: false,
|
||||||
|
disabled: false,
|
||||||
|
children: ['cheap', 'average', 'fast'].map((label, index) => (
|
||||||
|
<Button key={index}>{label}</Button>
|
||||||
|
)),
|
||||||
|
className: '',
|
||||||
|
style: { width: '300px' },
|
||||||
|
newActiveButtonIndex: 0,
|
||||||
|
variant: 'radiogroup',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const NoActiveButton = (args) => (
|
||||||
|
<ButtonGroup {...args}>{args.children}</ButtonGroup>
|
||||||
|
);
|
||||||
|
|
||||||
|
NoActiveButton.args = {
|
||||||
|
defaultActiveButtonIndex: 1,
|
||||||
|
noButtonActiveByDefault: true,
|
||||||
|
disabled: false,
|
||||||
|
children: ['cheap', 'average', 'fast'].map((label, index) => (
|
||||||
|
<Button key={index}>{label}</Button>
|
||||||
|
)),
|
||||||
|
className: '',
|
||||||
|
style: { width: '300px' },
|
||||||
|
newActiveButtonIndex: 0,
|
||||||
|
variant: 'default',
|
||||||
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user