joyent-portal/ui/stories/index.js

150 lines
2.9 KiB
JavaScript
Raw Normal View History

const React = require('react');
const {
storiesOf,
2016-12-08 19:29:04 +02:00
// action,
// linkTo
} = require('@kadira/storybook');
const {
Base,
2016-12-08 14:41:37 +02:00
Button,
Container,
2016-12-08 14:41:37 +02:00
Checkbox,
Row,
Column,
2016-12-09 12:40:57 +02:00
Avatar,
2016-12-09 13:24:22 +02:00
Toggle,
2016-12-09 12:40:57 +02:00
Widget
} = require('../src/');
const styles = {
base: {
backgroundColor: '#FFEBEE'
},
row: {
backgroundColor: '#EF5350'
},
column: {
backgroundColor: '#B71C1C',
textAlign: 'center',
color: 'white'
}
};
storiesOf('Grid', module)
.add('Row and Column', () => (
<Base>
<Container fluid>
<Row>
<Column
md={10}
sm={9}
style={styles.base}
xs={12}
>
<Row around style={styles.row}>
<Column
lg={4}
md={3}
sm={2}
style={styles.column}
xs={1}
>1</Column>
<Column
lg={4}
md={3}
sm={2}
style={styles.column}
xs={1}
>2</Column>
<Column
lg={4}
md={3}
sm={2}
style={styles.column}
xs={1}
>3</Column>
</Row>
</Column>
</Row>
</Container>
</Base>
));
2016-12-08 19:29:04 +02:00
const profile =
'https://pbs.twimg.com/profile_images/' +
'641289584580493312/VBfsPlff_400x400.jpg';
storiesOf('Avatar', module)
.add('Avatar Picture', () => (
<Avatar
color='#ef6176'
name='Tom'
2016-12-08 19:29:04 +02:00
src={profile}
/>
))
.add('Avatar Text', () => (
<Base>
<Avatar
color='#35a8c0'
name='Alex'
/>
<Avatar
color='#35a8c0'
name='Thomas'
/>
<Avatar
color='#35a8c0'
name='귀여운 오리'
/>
</Base>
));
2016-12-08 14:41:37 +02:00
storiesOf('Button', module)
.add('With text', () => (
<Button>
Inspire the lazy
</Button>
)).add('Secondary', () => (
<Button secondary>
Inspire the brave
</Button>
)).add('Disabled', () => (
<Button disabled>
Inspire the liars
</Button>
));
storiesOf('Checkbox', module)
.add('Default', () => (
2016-12-08 17:39:16 +02:00
<Checkbox />
2016-12-08 14:41:37 +02:00
))
.add('Checked', () => (
2016-12-08 17:39:16 +02:00
<Checkbox checked onChange={function noop() {}} />
2016-12-08 14:41:37 +02:00
))
.add('Disabled', () => (
2016-12-08 17:39:16 +02:00
<Checkbox disabled />
2016-12-08 14:41:37 +02:00
));
2016-12-09 12:40:57 +02:00
2016-12-09 13:24:22 +02:00
storiesOf('Toggle', module)
.add('checked', () => (
<Toggle checked />
))
.add('unchecked', () => (
<Toggle checked={false} />
))
.add('defaultChecked', () => (
<Toggle defaultChecked />
))
.add('no props', () => (
<Toggle />
))
2016-12-09 12:40:57 +02:00
storiesOf('Widget', module)
.add('single', () => (
<Widget checked selectable='single' name='flag' value='flag_1'>
<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Union_flag_1606_(Kings_Colors).svg/2000px-Union_flag_1606_(Kings_Colors).svg.png' />
<p>Some text</p>
</Widget>
))