2019-07-25 14:29:50 +00:00
|
|
|
import React from 'react';
|
|
|
|
import { storiesOf } from '@storybook/react';
|
|
|
|
import withReadme from 'storybook-readme/with-readme';
|
|
|
|
import { RadioButtonGroup } from 'asc-web-components';
|
|
|
|
import Section from '../../../.storybook/decorators/section';
|
2019-07-26 07:47:03 +00:00
|
|
|
import { withKnobs, text, boolean, number } from '@storybook/addon-knobs/react';
|
2019-07-25 14:29:50 +00:00
|
|
|
import Readme from './README.md';
|
|
|
|
|
|
|
|
storiesOf('Components|Input', module)
|
|
|
|
.addDecorator(withKnobs)
|
|
|
|
.addDecorator(withReadme(Readme))
|
|
|
|
.add('radio-button-group', () => {
|
|
|
|
return (
|
|
|
|
<Section>
|
|
|
|
<>
|
2019-07-26 07:47:03 +00:00
|
|
|
<RadioButtonGroup
|
2019-07-26 09:33:34 +00:00
|
|
|
onClick={e => {
|
|
|
|
console.log('Value of selected radiobutton: ', e.target.value);
|
|
|
|
}}
|
2019-07-26 07:47:03 +00:00
|
|
|
isDisabledGroup={boolean('isDisabledGroup', false)}
|
|
|
|
selected={text('selected radio button(value)', 'second')}
|
2019-07-26 07:53:02 +00:00
|
|
|
radiobuttonSpacing={number('radiobuttonSpacing', 33)}
|
2019-07-26 07:47:03 +00:00
|
|
|
name={text('name of your group', 'group')}
|
|
|
|
options={
|
|
|
|
[
|
|
|
|
{ value: text('value 1st radiobutton', 'first'), label: text('label 1st radiobutton', 'First radiobtn'), disabled: boolean('isDisabled 1st radiobutton', false) },
|
|
|
|
{ value: text('value 2nd radiobutton', 'second'), label: text('label 2nd radiobutton', 'Second radiobtn'), disabled: boolean('isDisabled 2nd radiobutton', true) },
|
|
|
|
{ value: text('value 3rd radiobutton', 'third'), label: text('label 3rd radiobutton', '3nd radiobtn'), disabled: boolean('isDisabled 3rd radiobutton', false) },
|
|
|
|
{ value: text('value 4th radiobutton', 'fourth'), label: text('label 4th radiobutton', '4th radiobtn'), disabled: boolean('isDisabled 4th radiobutton', true) },
|
|
|
|
|
|
|
|
]
|
|
|
|
}
|
|
|
|
/>
|
2019-07-25 14:29:50 +00:00
|
|
|
</>
|
|
|
|
</Section>
|
|
|
|
);
|
|
|
|
});
|