// Buttons storiesOf('Modal', module) .add('simple', () => ( <Modal> <p>Hello world</p> </Modal> ))
fontsMap.map(font => { fontsStories.add(font.name, () => ( <span style={{ fontFamily: font.family }}>{font.name} - {font.family}</span> )) })
// 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> ))
// 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> ))
colorsMap.map(color => { colorStories.add(color.name, () => ( <span style={{ color: color.code }}>{color.name} - {color.code}</span> )) })
// Buttons storiesOf('Modal', module) .add('simple', () => ( <Modal> <p>Hello world</p> </Modal> ))
colorsMap.map(color => { colorStories.add(color.name, () => ( <span style={{ color: color.code }}>{color.name} - {color.code}</span> )) })
fontsMap.map(font => { fontsStories.add(font.name, () => ( <span style={{ fontFamily: font.family }}>{font.name} - {font.family}</span> )) })
// 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> ))