mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
b80ab53396
Add a prop to the `ButtonGroup` component to make it act as a group of radio buttons, rather than a group of regular buttons. These commits were written by @danjm - I just pulled them into this branch.
81 lines
1.6 KiB
JavaScript
81 lines
1.6 KiB
JavaScript
import React from 'react'
|
|
import { action } from '@storybook/addon-actions'
|
|
import classnames from 'classnames'
|
|
import { text, boolean } from '@storybook/addon-knobs/react'
|
|
import Button from '../button'
|
|
import ButtonGroup from '.'
|
|
|
|
export default {
|
|
title: 'ButtonGroup',
|
|
}
|
|
|
|
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 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>
|
|
)
|
|
|
|
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>
|
|
)
|