mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-26 12:29: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 {
|
||||
static propTypes = {
|
||||
/**
|
||||
* change button active order
|
||||
*/
|
||||
defaultActiveButtonIndex: PropTypes.number,
|
||||
/**
|
||||
* no button are active before clicked by the user
|
||||
*/
|
||||
noButtonActiveByDefault: PropTypes.bool,
|
||||
/**
|
||||
* disabling every button inside button group
|
||||
*/
|
||||
disabled: PropTypes.bool,
|
||||
/**
|
||||
* Children must be an array of button components
|
||||
*/
|
||||
children: PropTypes.array,
|
||||
/**
|
||||
* Adds a className to the root div of the of the ButtonGroup component
|
||||
*/
|
||||
className: PropTypes.string,
|
||||
/**
|
||||
* adding style for button group component
|
||||
*/
|
||||
style: PropTypes.object,
|
||||
/**
|
||||
* updating value of active button in button group component
|
||||
*/
|
||||
newActiveButtonIndex: PropTypes.number,
|
||||
/**
|
||||
* options for rendering type of button, consist of 'default' and 'radiogroup'
|
||||
*/
|
||||
variant: PropTypes.oneOf(['radiogroup', 'default']),
|
||||
};
|
||||
|
||||
|
||||
@ -1,51 +1,94 @@
|
||||
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 README from './README.mdx';
|
||||
import ButtonGroup from '.';
|
||||
|
||||
export default {
|
||||
title: 'ButtonGroup',
|
||||
title: 'Components/UI/ButtonGroup',
|
||||
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 = () => (
|
||||
<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 DefaultStory = (args) => (
|
||||
<ButtonGroup {...args}>{args.children}</ButtonGroup>
|
||||
);
|
||||
|
||||
export const withDisabledButton = () => (
|
||||
<ButtonGroup style={{ width: '300px' }} disabled={boolean('Disabled', false)}>
|
||||
<Button onClick={action('enabled')}>{text('Button1', 'Enabled')}</Button>
|
||||
<Button onClick={action('disabled')} disabled>
|
||||
{text('Button2', 'Disabled')}
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
DefaultStory.storyName = 'Default';
|
||||
DefaultStory.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: 'default',
|
||||
};
|
||||
|
||||
export const WithDisabledButton = (args) => (
|
||||
<ButtonGroup {...args}>{args.children}</ButtonGroup>
|
||||
);
|
||||
|
||||
export const radioButtons = () => (
|
||||
<ButtonGroup
|
||||
style={{ width: '300px' }}
|
||||
defaultActiveButtonIndex={1}
|
||||
variant="radiogroup"
|
||||
>
|
||||
<Button onClick={action('radio 1')}>{text('Button1', '1%')}</Button>
|
||||
<Button onClick={action('radio 2')}>{text('Button2', '2%')}</Button>
|
||||
<Button
|
||||
onClick={action('radio 3')}
|
||||
className={classnames({
|
||||
'radio-button--danger': boolean('Button3 warning', false),
|
||||
})}
|
||||
>
|
||||
{text('Button3', '5%')}
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
WithDisabledButton.args = {
|
||||
defaultActiveButtonIndex: 1,
|
||||
noButtonActiveByDefault: false,
|
||||
disabled: true,
|
||||
children: ['cheap', 'average', 'fast'].map((label, index) => (
|
||||
<Button key={index}>{label}</Button>
|
||||
)),
|
||||
className: '',
|
||||
style: { width: '300px' },
|
||||
newActiveButtonIndex: 0,
|
||||
variant: 'default',
|
||||
};
|
||||
|
||||
export const WithRadioButton = (args) => (
|
||||
<ButtonGroup {...args}>{args.children}</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