moving avatar story and data used for it
This commit is contained in:
parent
900268ab27
commit
0b7473d9de
40
ui/src/components/avatar/story.js
Normal file
40
ui/src/components/avatar/story.js
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
const React = require('react');
|
||||||
|
const fakeData = require('../../shared/fake-data');
|
||||||
|
const Base = require('../base');
|
||||||
|
|
||||||
|
const {
|
||||||
|
profile
|
||||||
|
} = fakeData;
|
||||||
|
|
||||||
|
const {
|
||||||
|
storiesOf
|
||||||
|
} = require('@kadira/storybook');
|
||||||
|
|
||||||
|
const Avatar = require('./');
|
||||||
|
|
||||||
|
storiesOf('Avatar', module)
|
||||||
|
.add('Avatar Picture', () => (
|
||||||
|
<Base>
|
||||||
|
<Avatar
|
||||||
|
color='#ef6176'
|
||||||
|
name='Tom'
|
||||||
|
src={profile}
|
||||||
|
/>
|
||||||
|
</Base>
|
||||||
|
))
|
||||||
|
.add('Avatar Text', () => (
|
||||||
|
<Base>
|
||||||
|
<Avatar
|
||||||
|
color='#35a8c0'
|
||||||
|
name='Alex'
|
||||||
|
/>
|
||||||
|
<Avatar
|
||||||
|
color='#35a8c0'
|
||||||
|
name='Thomas'
|
||||||
|
/>
|
||||||
|
<Avatar
|
||||||
|
color='#35a8c0'
|
||||||
|
name='귀여운 오리'
|
||||||
|
/>
|
||||||
|
</Base>
|
||||||
|
));
|
@ -25,6 +25,10 @@ const selectData = [
|
|||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
// eslint-disable-next-line max-len
|
||||||
|
const profile = 'https://pbs.twimg.com/profile_images/641289584580493312/VBfsPlff_400x400.jpg';
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
|
profile,
|
||||||
selectData
|
selectData
|
||||||
};
|
};
|
@ -7,7 +7,6 @@ const {
|
|||||||
|
|
||||||
const {
|
const {
|
||||||
Base,
|
Base,
|
||||||
// Button,
|
|
||||||
Container,
|
Container,
|
||||||
Checkbox,
|
Checkbox,
|
||||||
Row,
|
Row,
|
||||||
@ -20,7 +19,6 @@ const {
|
|||||||
AddMetricTile,
|
AddMetricTile,
|
||||||
AddMetricTitle
|
AddMetricTitle
|
||||||
},
|
},
|
||||||
Avatar,
|
|
||||||
Input,
|
Input,
|
||||||
List: {
|
List: {
|
||||||
ListItemDescription,
|
ListItemDescription,
|
||||||
@ -56,10 +54,11 @@ const {
|
|||||||
RadioGroup
|
RadioGroup
|
||||||
} = require('../src/');
|
} = require('../src/');
|
||||||
|
|
||||||
const seed = require('./seed');
|
const fakeData = require('../src/shared/fake-data');
|
||||||
|
|
||||||
const {
|
const {
|
||||||
selectData
|
selectData
|
||||||
} = seed;
|
} = fakeData;
|
||||||
|
|
||||||
const styles = {
|
const styles = {
|
||||||
base: {
|
base: {
|
||||||
@ -115,10 +114,6 @@ storiesOf('Grid', module)
|
|||||||
</Base>
|
</Base>
|
||||||
));
|
));
|
||||||
|
|
||||||
const profile =
|
|
||||||
'https://pbs.twimg.com/profile_images/' +
|
|
||||||
'641289584580493312/VBfsPlff_400x400.jpg';
|
|
||||||
|
|
||||||
storiesOf('Add Metric', module)
|
storiesOf('Add Metric', module)
|
||||||
.add('Add Metric', () => (
|
.add('Add Metric', () => (
|
||||||
<Base>
|
<Base>
|
||||||
@ -153,52 +148,6 @@ storiesOf('Add Metric', module)
|
|||||||
</Base>
|
</Base>
|
||||||
));
|
));
|
||||||
|
|
||||||
storiesOf('Avatar', module)
|
|
||||||
.add('Avatar Picture', () => (
|
|
||||||
<Avatar
|
|
||||||
color='#ef6176'
|
|
||||||
name='Tom'
|
|
||||||
src={profile}
|
|
||||||
/>
|
|
||||||
))
|
|
||||||
.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>
|
|
||||||
// )).add('Anchor', () => (
|
|
||||||
// <div>
|
|
||||||
// <Button href='#'>
|
|
||||||
// Inspire the anchor
|
|
||||||
// </Button>
|
|
||||||
// </div>
|
|
||||||
// ));
|
|
||||||
|
|
||||||
storiesOf('Checkbox', module)
|
storiesOf('Checkbox', module)
|
||||||
.add('Default', () => (
|
.add('Default', () => (
|
||||||
<Checkbox />
|
<Checkbox />
|
||||||
|
Loading…
Reference in New Issue
Block a user