1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99
import React from 'react'; import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import centered from '@storybook/addon-centered'; import { withKnobs, text, boolean, select } from '@storybook/addon-knobs'; import { List } from './ui'; import defaultStyles from '../src/styles'; import { AwesomeButton } from '../src/index'; const buttons = ( <List> <AwesomeButton size="medium" type="primary" cssModule={defaultStyles} /* Skipped props */ action={action('clicked')} > Primary </AwesomeButton> <AwesomeButton size="medium" type="secondary" cssModule={defaultStyles} action={action('clicked')}> Secondary </AwesomeButton> <AwesomeButton size="medium" type="link" cssModule={defaultStyles} action={action('clicked')}> Link </AwesomeButton> <AwesomeButton size="medium" disabled cssModule={defaultStyles} action={action('clicked')}> Disabled </AwesomeButton> <AwesomeButton size="medium" disabled placeholder cssModule={defaultStyles} action={action('clicked')} /> </List> ); storiesOf('AwesomeButton', module) .addDecorator(centered) .addDecorator(withKnobs) .add('All Types', () => buttons) .add('Primary', () => ( <AwesomeButton size={select('size', [null, 'small', 'medium', 'large'], 'medium')} type={select('type', ['primary', 'secondary', 'link'], 'primary')} disabled={boolean('disabled', false)} ripple={boolean('ripple', false)} cssModule={defaultStyles} action={action('clicked')} > {text('text', 'Primary')} </AwesomeButton> )) .add('Secondary', () => ( <AwesomeButton size={select('size', [null, 'small', 'medium', 'large'], 'medium')} type={select('type', ['primary', 'secondary', 'link'], 'secondary')} disabled={boolean('disabled', false)} ripple={boolean('ripple', false)} cssModule={defaultStyles} action={action('clicked')} > {text('text', 'Secondary')} </AwesomeButton> ))
.add('Link', () => ( <AwesomeButton size={select('size', [null, 'small', 'medium', 'large'], 'medium')} type={select('type', ['primary', 'secondary', 'link'], 'link')} disabled={boolean('disabled', false)} ripple={boolean('ripple', false)} href={text('href', 'https://github.com/rcaferati')} target={select('target', ['_blank', '_self', '_parent', '_top'], '_blank')} cssModule={defaultStyles} action={action('clicked')} > {text('text', 'Anchored Link')} </AwesomeButton> )).add('Disabled', () => ( <AwesomeButton size={select('size', [null, 'small', 'medium', 'large'], 'medium')} type={select('type', ['primary', 'secondary', 'link'], 'primary')} disabled={boolean('disabled', true)} ripple={boolean('ripple', false)} cssModule={defaultStyles} action={action('clicked')} > {text('Text', 'Disabled')} </AwesomeButton> )) .add('Placeholder', () => ( <AwesomeButton size={select('size', [null, 'small', 'medium', 'large'], 'medium')} type={select('type', ['primary', 'secondary', 'link'], 'primary')} disabled={boolean('disabled', false)} ripple={boolean('ripple', false)} placeholder={boolean('placeholder', true)} cssModule={defaultStyles} action={action('clicked')} > {text('text', null)} </AwesomeButton> ));