94 lines
1.7 KiB
JavaScript
94 lines
1.7 KiB
JavaScript
const React = require('react');
|
|
const {
|
|
storiesOf,
|
|
action,
|
|
linkTo
|
|
} = require('@kadira/storybook');
|
|
|
|
const {
|
|
Base,
|
|
Container,
|
|
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>
|
|
));
|