// Buttons storiesOf('Modal', module) .add('simple', () => ( <Modal> <p>Hello world</p> </Modal> ))
// Buttons storiesOf('Icon', module) .add('simple', () => ( <Icon size={3}>face</Icon> )) .add('color', () => ( <Icon size={3} style={{ color: 'red' }}>face</Icon> ))
// Buttons storiesOf('Button', module) .add('primary', () => ( <Button type="button" theme="primary" onClick={action('clicked')}>Button</Button> )) .add('secondary', () => ( <Button type="button" theme="secondary" onClick={action('clicked')}>Button</Button> )) .add('default', () => ( <Button type="button" onClick={action('clicked')}>Button</Button> )) .add('with icon', () => ( <Button type="button" theme="primary" onClick={action('clicked')}>Button <Icon size={1.3}>face</Icon></Button> ))
// Buttons storiesOf('Card', module) .add('default', () => ( <Card style={{ margin: '1em' }}> <H3 font="secondary">Hello</H3> <p>Lunas persuadere! Urias sunt castors de alter nomen. Sunt nixes perdere alter, festus capioes.</p> </Card> ))
// Stories storiesOf('Typography', module) .add('H1/primary', () => ( <H1 font="primary">Heading 1</H1> )) .add('H1/secondary', () => ( <H1 font="secondary">Heading 1</H1> )) .add('H2', () => ( <H2>Heading 2</H2> )) .add('H3', () => ( <H3>Heading 3</H3> )) .add('H4', () => ( <H4>Heading 4</H4> )) .add('H5', () => ( <H5>Heading 5</H5> )) .add('H6', () => ( <H6>Heading 6</H6> ))
// Buttons storiesOf('Input', module) .add('text', () => ( <Input type="text" /> )) .add('password', () => ( <Input type="password" /> )) .add('textarea', () => ( <Textarea /> )) .add('select', () => ( <Select> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> <option value="4">Four</option> <option value="5">Five</option> </Select> ))
// Stories storiesOf('Grid', module) .add('Grid and Grid Cell', () => ( <Grid gutter={true} alignTop={true} flexCells={true} style={{ background: 'red', height: 400 }}> <GridCell style={{ background: 'yellow' }}> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu. Maecenas sagittis ante ut turpis varius interdum. Quisque tellus ipsum, eleifend non ipsum id, suscipit ultricies neque. </GridCell> <GridCell style={{ background: 'orange' }}> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu. Maecenas sagittis ante ut turpis varius interdum. Quisque tellus ipsum, eleifend non ipsum id, suscipit ultricies neque. </GridCell> <GridCell style={{ background: 'lightblue' }}> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu. Maecenas sagittis ante ut turpis varius interdum. Quisque tellus ipsum, eleifend non ipsum id, suscipit ultricies neque. </GridCell> </Grid> ))
storiesOf('Hashtag', module) .addDecorator(withA11y) .addDecorator(helpers.layout) .add('clickable', () => ({ components: { Hashtag }, store: helpers.store, data: () => ({ hashtag: 'SomeHashtag', }), template: '<hashtag :id="hashtag" />', }))
// Buttons storiesOf('Modal', module) .add('simple', () => ( <Modal> <p>Hello world</p> </Modal> ))
// Buttons storiesOf('Icon', module) .add('simple', () => ( <Icon size={3}>face</Icon> )) .add('color', () => ( <Icon size={3} style={{ color: 'red' }}>face</Icon> ))
// Buttons storiesOf('Card', module) .add('default', () => ( <Card style={{ margin: '1em' }}> <H3 font="secondary">Hello</H3> <p>Lunas persuadere! Urias sunt castors de alter nomen. Sunt nixes perdere alter, festus capioes.</p> </Card> ))
// Buttons storiesOf('Button', module) .add('primary', () => ( <Button type="button" theme="primary" onClick={action('clicked')}>Button</Button> )) .add('secondary', () => ( <Button type="button" theme="secondary" onClick={action('clicked')}>Button</Button> )) .add('default', () => ( <Button type="button" onClick={action('clicked')}>Button</Button> )) .add('with icon', () => ( <Button type="button" theme="primary" onClick={action('clicked')}>Button <Icon size={1.3}>face</Icon></Button> ))
// Stories storiesOf('Grid', module) .add('Grid and Grid Cell', () => ( <Grid gutter={true} alignTop={true} flexCells={true} style={{ background: 'red', height: 400 }}> <GridCell style={{ background: 'yellow' }}> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu. Maecenas sagittis ante ut turpis varius interdum. Quisque tellus ipsum, eleifend non ipsum id, suscipit ultricies neque. </GridCell> <GridCell style={{ background: 'orange' }}> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu. Maecenas sagittis ante ut turpis varius interdum. Quisque tellus ipsum, eleifend non ipsum id, suscipit ultricies neque. </GridCell> <GridCell style={{ background: 'lightblue' }}> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu. Maecenas sagittis ante ut turpis varius interdum. Quisque tellus ipsum, eleifend non ipsum id, suscipit ultricies neque. </GridCell> </Grid> ))
// Buttons storiesOf('Input', module) .add('text', () => ( <Input type="text" /> )) .add('password', () => ( <Input type="password" /> )) .add('textarea', () => ( <Textarea /> )) .add('select', () => ( <Select> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> <option value="4">Four</option> <option value="5">Five</option> </Select> ))
// Stories storiesOf('Typography', module) .add('H1/primary', () => ( <H1 font="primary">Heading 1</H1> )) .add('H1/secondary', () => ( <H1 font="secondary">Heading 1</H1> )) .add('H2', () => ( <H2>Heading 2</H2> )) .add('H3', () => ( <H3>Heading 3</H3> )) .add('H4', () => ( <H4>Heading 4</H4> )) .add('H5', () => ( <H5>Heading 5</H5> )) .add('H6', () => ( <H6>Heading 6</H6> ))