2018-09-27 13:39:37 -07:00
|
|
|
import * as React from 'react';
|
2018-10-03 10:11:44 -07:00
|
|
|
import { BrowserRouter } from 'react-router-dom';
|
2018-09-27 13:39:37 -07:00
|
|
|
import { storiesOf } from '@storybook/react';
|
2018-11-16 15:05:17 -08:00
|
|
|
import { User } from 'types';
|
2018-09-27 13:39:37 -07:00
|
|
|
|
|
|
|
import 'components/UserRow/style.less';
|
|
|
|
import UserRow from 'components/UserRow';
|
|
|
|
|
2018-11-16 15:05:17 -08:00
|
|
|
const user: User = {
|
|
|
|
userid: 123,
|
|
|
|
displayName: 'Dana Hayes',
|
2018-09-27 13:39:37 -07:00
|
|
|
title: 'QA Engineer',
|
2018-11-16 15:05:17 -08:00
|
|
|
avatar: {
|
2018-11-26 17:14:00 -08:00
|
|
|
imageUrl: 'https://randomuser.me/api/portraits/women/19.jpg',
|
2018-11-16 15:05:17 -08:00
|
|
|
},
|
2018-09-27 13:39:37 -07:00
|
|
|
emailAddress: 'test@test.test',
|
2018-11-16 15:05:17 -08:00
|
|
|
socialMedias: [],
|
2018-09-27 13:39:37 -07:00
|
|
|
};
|
|
|
|
|
2018-11-16 15:05:17 -08:00
|
|
|
interface Case {
|
|
|
|
disp: string;
|
|
|
|
props: {
|
|
|
|
user: User;
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
const cases: Case[] = [
|
2018-09-27 13:39:37 -07:00
|
|
|
{
|
|
|
|
disp: 'Full User',
|
|
|
|
props: {
|
|
|
|
user: {
|
|
|
|
...user,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
2018-12-27 09:41:26 -08:00
|
|
|
disp: 'ZEC Address Only User',
|
2018-09-27 13:39:37 -07:00
|
|
|
props: {
|
|
|
|
user: {
|
|
|
|
...user,
|
2018-11-16 15:05:17 -08:00
|
|
|
avatar: null,
|
2018-09-27 13:39:37 -07:00
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
2018-12-27 09:41:26 -08:00
|
|
|
disp: 'No Avatar, No ZEC Address User',
|
2018-09-27 13:39:37 -07:00
|
|
|
props: {
|
|
|
|
user: {
|
|
|
|
...user,
|
2018-11-16 15:05:17 -08:00
|
|
|
avatar: null,
|
2018-09-27 13:39:37 -07:00
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
disp: 'Long text user',
|
|
|
|
props: {
|
|
|
|
user: {
|
|
|
|
...user,
|
2018-11-16 15:05:17 -08:00
|
|
|
displayName: 'Dr. Baron Longnamivitch von Testeronomous III Esq.',
|
2018-09-27 13:39:37 -07:00
|
|
|
title: 'Amazing person, all around cool neat-o guy, 10/10 would order again',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
storiesOf('UserRow', module).add('all', () => (
|
2018-10-03 10:11:44 -07:00
|
|
|
<BrowserRouter>
|
|
|
|
<div style={{ padding: '2em' }}>
|
|
|
|
{cases.map(c => (
|
|
|
|
<div key={c.disp} style={{ marginBottom: '2rem' }}>
|
|
|
|
<div style={{ fontSize: '0.9em', paddingBottom: '0.5rem' }}>{`${c.disp}`}</div>
|
|
|
|
<UserRow {...c.props} />
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
</BrowserRouter>
|
2018-09-27 13:39:37 -07:00
|
|
|
));
|