DocSpace-client/web/ASC.Web.Storybook/stories/input/checkbox/checkbox.stories.js

35 lines
1.1 KiB
JavaScript
Raw Normal View History

2019-06-25 15:49:12 +00:00
import React from 'react';
import { storiesOf } from '@storybook/react';
2019-06-26 13:25:35 +00:00
import { action } from '@storybook/addon-actions';
2019-06-28 07:44:20 +00:00
import { BooleanValue } from 'react-values'
2019-06-25 15:49:12 +00:00
import { withKnobs, boolean, text } from '@storybook/addon-knobs/react';
import withReadme from 'storybook-readme/with-readme';
import Readme from './README.md';
import { Checkbox } from 'asc-web-components';
import Section from '../../../.storybook/decorators/section';
storiesOf('Components|Input', module)
.addDecorator(withKnobs)
.addDecorator(withReadme(Readme))
.add('checkbox', () => (
<Section>
2019-06-28 08:27:51 +00:00
<BooleanValue>
2019-06-28 07:44:20 +00:00
{({ value, toggle }) => (
2019-06-26 13:25:35 +00:00
<Checkbox
id={text('id', 'id')}
name={text('name', 'name')}
value={text('value', 'value')}
label={text('label', 'label')}
2019-06-28 07:44:20 +00:00
isChecked={value}
2019-06-26 13:25:35 +00:00
isIndeterminate={boolean('isIndeterminate', false)}
isDisabled={boolean('isDisabled', false)}
2019-06-28 07:44:20 +00:00
onChange={e => {
2019-06-28 08:27:51 +00:00
action('onChange')(e);
2019-06-28 07:44:20 +00:00
toggle(e.target.checked);
2019-06-26 13:25:35 +00:00
}}
/>
)}
2019-06-28 07:44:20 +00:00
</BooleanValue>
2019-06-25 15:49:12 +00:00
</Section>
));