128 lines
2.4 KiB
JavaScript
128 lines
2.4 KiB
JavaScript
const React = require('react');
|
|
const {
|
|
storiesOf,
|
|
action,
|
|
linkTo
|
|
} = require('@kadira/storybook');
|
|
|
|
const {
|
|
Base,
|
|
Button,
|
|
Container,
|
|
Checkbox,
|
|
Row,
|
|
Column,
|
|
Avatar
|
|
} = 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>
|
|
));
|
|
|
|
storiesOf('Avatar', module)
|
|
.add('Avatar Picture', () => (
|
|
<Avatar
|
|
color='#ef6176'
|
|
name='Tom'
|
|
src='https://pbs.twimg.com/profile_images/641289584580493312/VBfsPlff_400x400.jpg'
|
|
/>
|
|
))
|
|
.add('Avatar Text', () => (
|
|
<Base>
|
|
<Avatar
|
|
color='#35a8c0'
|
|
name='Alex'
|
|
/>
|
|
<Avatar
|
|
color='#35a8c0'
|
|
name='Thomas'
|
|
/>
|
|
<Avatar
|
|
color='#35a8c0'
|
|
name='귀여운 오리'
|
|
/>
|
|
</Base>
|
|
));
|
|
|
|
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', () => (
|
|
<Checkbox>
|
|
Checkbox
|
|
</Checkbox>
|
|
))
|
|
.add('Checked', () => (
|
|
<Checkbox checked onChange={function noop() {}}>
|
|
Checkbox Checked
|
|
</Checkbox>
|
|
))
|
|
.add('Disabled', () => (
|
|
<Checkbox disabled>
|
|
Checkbox Disabled
|
|
</Checkbox>
|
|
));
|