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('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> )) })
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('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> ))