| 1 | import React, {Fragment} from 'react';
|
| 2 | import {storiesOf} from '@storybook/html';
|
| 3 |
|
| 4 | import reactDecorator from '../../.storybook/react-decorator';
|
| 5 | import Checkbox from '../checkbox/checkbox';
|
| 6 |
|
| 7 | storiesOf('Components|Checkbox', module).
|
| 8 | addParameters({
|
| 9 | notes: 'Displays a checkbox.'
|
| 10 | }).
|
| 11 | addDecorator(reactDecorator()).
|
| 12 | add('basic', () => (
|
| 13 | <Fragment>
|
| 14 | <h1>Base Examples</h1>
|
| 15 | <div id="checkbox-base">
|
| 16 | <Checkbox/>
|
| 17 | <Checkbox defaultChecked/>
|
| 18 | </div>
|
| 19 |
|
| 20 | <h1>Disabled checkboxes</h1>
|
| 21 | <div id="checkbox-base">
|
| 22 | <Checkbox disabled/>
|
| 23 | <Checkbox disabled defaultChecked/>
|
| 24 | </div>
|
| 25 |
|
| 26 | <h1>Examples with outer styles</h1>
|
| 27 | <div id="checkbox-additional">
|
| 28 | <div style={{lineHeight: '60px'}}>
|
| 29 | <Checkbox defaultChecked>
|
| 30 | This checkbox is inside a div with large line-height.
|
| 31 | </Checkbox>
|
| 32 | <span>This text should be aligned on same line with checkbox label</span>
|
| 33 | </div>
|
| 34 | <div style={{lineHeight: '6px'}}>
|
| 35 | <Checkbox defaultChecked>
|
| 36 | This checkbox is inside a div with small line-height.
|
| 37 | </Checkbox>
|
| 38 | <span>This text should be aligned on same line with checkbox label</span>
|
| 39 | </div>
|
| 40 | <div style={{lineHeight: '48px', fontSize: '40px'}}>
|
| 41 | <Checkbox defaultChecked>
|
| 42 | This checkbox is inside a div with large font-size.
|
| 43 | </Checkbox>
|
| 44 | <span>This text should be aligned on same line with checkbox label</span>
|
| 45 | </div>
|
| 46 | <div style={{lineHeight: '6px', fontSize: '4px'}}>
|
| 47 | <Checkbox defaultChecked>
|
| 48 | This checkbox is inside a div with small font-size.
|
| 49 | </Checkbox>
|
| 50 | <span>This text should be aligned on same line with checkbox label</span>
|
| 51 | </div>
|
| 52 | </div>
|
| 53 | </Fragment>
|
| 54 | ));
|