joyent-portal/ui/stories/index.js

564 lines
12 KiB
JavaScript
Raw Normal View History

const React = require('react');
const {
storiesOf,
action,
2016-12-08 19:29:04 +02:00
// 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,
AddMetric,
2016-12-09 12:40:57 +02:00
Avatar,
Input,
2017-01-09 14:13:12 +02:00
List: {
ListItem,
ListItemView,
ListItemTitle,
ListItemSubTitle,
ListItemDescription,
ListItemMeta,
ListItemOutlet,
ListItemOptions,
},
2017-01-05 15:48:37 +02:00
MiniMetric,
Modal,
Notificaton,
2016-12-09 19:43:26 +02:00
Pagination,
2016-12-09 19:15:08 +02:00
RangeSlider,
2016-12-09 17:34:10 +02:00
Select,
2017-01-06 17:10:37 +02:00
SelectCustom,
2016-12-09 16:57:23 +02:00
Tabs,
Tab,
2016-12-09 13:24:22 +02:00
Toggle,
2016-12-20 14:02:47 +02:00
Tooltip,
2016-12-09 17:09:54 +02:00
Widget,
Radio,
RadioGroup
} = require('../src/');
2017-01-09 14:13:12 +02:00
2017-01-06 17:10:37 +02:00
const seed = require('./seed');
const {
selectData
} = seed;
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('Add Metric', module)
.add('Add Metric', () => (
<Base>
<Row>
<Column>
<AddMetric
addLabel='Add'
addedLabel='Added'
description='CPU usages accross all of the CPU cores.'
link='http://somelink.com'
linkLabel='Learn more'
onAddToggle={action('toggle-added')}
title='Aggregated CPU usage'
/>
</Column>
</Row>
</Base>
))
.add('Added Metric', () => (
<Base>
<Row>
<Column>
<AddMetric
addLabel='Add'
added
addedLabel='Added'
description='CPU usages accross all of the CPU cores.'
link='http://somelink.com'
linkLabel='Learn more'
onAddToggle={action('toggle-added')}
title='Aggregated CPU usage'
/>
</Column>
</Row>
</Base>
));
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>
2017-01-09 14:01:26 +02:00
)).add('Anchor', () => (
<div>
<Button href='#'>
Inspire the anchor
</Button>
</div>
2016-12-08 14:41:37 +02:00
));
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 17:26:11 +02:00
storiesOf('Radio', module)
.add('Default', () => (
<Radio>
Video killed the radio star
</Radio>
))
.add('Checked', () => (
<Radio checked onChange={function noop() {}} />
))
.add('Disabled', () => (
<Radio disabled />
));
storiesOf('Input', module)
.add('Default', () => (
2016-12-12 18:55:52 +02:00
<Input placeholder="I am the placeholder" />
))
.add('type=email', () => (
<Input
label='Email Address'
2016-12-12 01:54:53 +02:00
placeholder='Enter email'
type='email'
>
2016-12-12 01:54:53 +02:00
<small>We&apos;ll never share your email with anyone else.</small>
</Input>
));
storiesOf('Modal', module)
.add('Default', () => (
<Modal>
<h2>This is the Modal</h2>
</Modal>
));
storiesOf('Notificaton', module)
.add('Default', () => (
<Notificaton>
<span>This is the default content</span>
</Notificaton>
))
.add('warning', () => (
<Notificaton type='warning'>
<span>This is the warning content</span>
</Notificaton>
))
.add('alert', () => (
<Notificaton type='alert'>
<span>This is the alert content</span>
</Notificaton>
));
2016-12-09 19:43:26 +02:00
storiesOf('Pagination', module)
.add('Default', () => (
<Pagination>
<a>
<span>&laquo;</span>
<span>Previous</span>
</a>
<a>1</a>
<a active>2</a>
<a>3</a>
</Pagination>
));
storiesOf('Radio Group', module)
.add('Default', () => (
<RadioGroup>
2016-12-13 13:01:18 +02:00
<Radio name='hello' value='default'>
Video killed the radio star
</Radio>
2016-12-13 13:01:18 +02:00
<Radio name='hello' value='fancy'>
Video killed the radio star
</Radio>
2016-12-13 13:01:18 +02:00
<Radio name='hello' value='none'>
Video killed the radio star
</Radio>
</RadioGroup>
2016-12-12 01:54:53 +02:00
));
2016-12-09 19:15:08 +02:00
storiesOf('RangeSlider', module)
.add('Default', () => (
<RangeSlider />
));
2016-12-09 17:34:10 +02:00
storiesOf('Select', module)
.add('Default', () => (
<Select label='example select'>
2016-12-14 19:22:09 +02:00
<option>Apple</option>
<option>Banana</option>
<option>Pear</option>
<option>Orange</option>
2016-12-09 17:34:10 +02:00
</Select>
))
.add('multiple', () => (
<Select label='example multiple select' multiple>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</Select>
));
2017-01-06 17:10:37 +02:00
storiesOf('Select Custom', module)
.add('Default', () => (
<SelectCustom
label="This is the label"
onChange={function noop() {}}
options={selectData}
/>
))
.add('Multiple', () => (
<SelectCustom
label="This is the label"
multi
onChange={function noop() {}}
options={selectData}
/>
));
2016-12-09 16:57:23 +02:00
storiesOf('Tabs', module)
.add('Default', () => (
<Tabs name='my-tab-group'>
<Tab title='Containers'>
<h1>Containers</h1>
</Tab>
<Tab title='Users'>
<h1>User</h1>
</Tab>
</Tabs>
2016-12-09 17:34:10 +02:00
));
2016-12-09 16:57:23 +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 17:34:10 +02:00
));
2016-12-09 13:24:22 +02:00
2016-12-20 14:02:47 +02:00
storiesOf('Tooltip', module)
.add('default', () => (
<Tooltip>
<li>One</li>
<li>Two</li>
<li>Three</li>
</Tooltip>
))
.add('custom position', () => {
const arrowPosition = {
left: '90%',
bottom: '100%'
};
return (
<Tooltip arrowPosition={arrowPosition}>
<li>One</li>
<li>Two</li>
<li>Three</li>
</Tooltip>
);
});
2016-12-09 12:40:57 +02:00
storiesOf('Widget', module)
.add('single', () => (
2016-12-09 17:34:10 +02:00
<Widget
checked
name='flag'
selectable='single'
value='flag_1'
>
<img
alt='england flag'
// eslint-disable-next-line max-len
src='https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Union_flag_1606_(Kings_Colors).svg/2000px-Union_flag_1606_(Kings_Colors).svg.png'
/>
2016-12-09 12:40:57 +02:00
<p>Some text</p>
</Widget>
2016-12-09 17:34:10 +02:00
));
2017-01-05 15:48:37 +02:00
2017-01-06 13:06:02 +02:00
const colors = {
perc: 'rgba(54, 74, 205, 0.2)',
alt: 'rgba(245, 93, 93, 0.2)'
};
2017-01-05 15:48:37 +02:00
storiesOf('Metrics', module)
2017-01-06 13:26:08 +02:00
.add('Mini Metric', () => (
2017-01-06 13:06:02 +02:00
<MiniMetric
datasets={[{
backgroundColor: colors['perc'],
altBackgroundColor: colors['alt'],
data: [
{
firstQuartile: 15,
thirdQuartile: 15,
median: 15,
max: 15,
min: 15,
},
{
firstQuartile: 26,
thirdQuartile: 26,
median: 26,
max: 26,
min: 26,
},
{
firstQuartile: 17,
thirdQuartile: 17,
median: 17,
max: 17,
min: 17,
},
{
firstQuartile: 15,
thirdQuartile: 25,
median: 19,
max: 19,
min: 20,
},
{
firstQuartile: 19,
thirdQuartile: 25,
median: 21,
max: 20,
min: 25,
},
{
firstQuartile: 24,
thirdQuartile: 30,
median: 25,
max: 26,
min: 27,
},
{
firstQuartile: 28,
thirdQuartile: 34,
median: 30,
max: 30,
min: 30,
},
{
firstQuartile: 30,
thirdQuartile: 45,
median: 35,
max: 40,
min: 40,
},
{
firstQuartile: 20,
thirdQuartile: 55,
median: 45,
max: 44,
min: 44,
},
{
firstQuartile: 55,
thirdQuartile: 55,
median: 55,
max: 55,
min: 55,
},
{
firstQuartile: 57,
thirdQuartile: 56,
median: 57,
max: 58,
min: 57,
},
{
firstQuartile: 57,
thirdQuartile: 56,
median: 56,
max: 56,
min: 56,
},
{
firstQuartile: 60,
thirdQuartile: 56,
median: 60,
max: 60,
min: 60,
},
{
firstQuartile: 57,
thirdQuartile: 57,
median: 57,
max: 57,
min: 57,
},
{
firstQuartile: 57,
thirdQuartile: 55,
median: 55,
max: 55,
min: 55,
},
{
firstQuartile: 20,
thirdQuartile: 45,
median: 45,
max: 45,
min: 45,
},
{
firstQuartile: 15,
thirdQuartile: 40,
median: 30,
max: 49,
min: 30,
},
]
}]}
labels={17}
name='Memory'
/>
2017-01-05 15:48:37 +02:00
));
2017-01-09 14:13:12 +02:00
storiesOf('ListItem', module)
.add('default', () => (
<Base>
<ListItem>
<ListItemView>
<ListItemMeta>
<ListItemTitle>Nginx 01</ListItemTitle>
<ListItemSubTitle>4 instances</ListItemSubTitle>
<ListItemDescription>Flags</ListItemDescription>
</ListItemMeta>
<ListItemOutlet>
Metrics
</ListItemOutlet>
</ListItemView>
<ListItemOptions>
</ListItemOptions>
</ListItem>
</Base>
))
.add('collapsed', () => (
<Base>
<ListItem collapsed>
<ListItemView>
<ListItemMeta>
<ListItemTitle>Nginx 01</ListItemTitle>
<ListItemSubTitle>4 instances</ListItemSubTitle>
<ListItemDescription>Flags</ListItemDescription>
</ListItemMeta>
<ListItemOutlet>
Metrics
</ListItemOutlet>
</ListItemView>
<ListItemOptions>
</ListItemOptions>
</ListItem>
</Base>
));