joyent-portal/ui/stories/index.js

112 lines
2.6 KiB
JavaScript
Raw Normal View History

const React = require('react');
const {
storiesOf,
2016-12-08 19:29:04 +02:00
// action,
// linkTo
} = require('@kadira/storybook');
const {
Base,
Column,
2017-01-10 13:55:25 +02:00
Container,
MiniMetric: {
MiniMetricGraph,
MiniMetricMeta,
MiniMetricTitle,
MiniMetricSubtitle,
MiniMetricView
2017-01-09 14:13:12 +02:00
},
2017-01-10 13:55:25 +02:00
Row,
} = require('../src/');
const MiniMetricData = require('../src/components/list/mini-metric-data');
2017-01-06 17:10:37 +02:00
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>
));
2017-01-05 15:48:37 +02:00
storiesOf('Metrics', module)
2017-01-06 13:26:08 +02:00
.add('Mini Metric', () => (
2017-01-09 14:13:12 +02:00
<Base>
2017-01-10 21:12:50 +02:00
<Row around>
<Column xs={3}>
<MiniMetricView>
<MiniMetricMeta>
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
</MiniMetricMeta>
<MiniMetricGraph data={MiniMetricData} />
2017-01-10 21:12:50 +02:00
</MiniMetricView>
</Column>
<Column xs={3}>
<MiniMetricView>
<MiniMetricMeta>
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
</MiniMetricMeta>
<MiniMetricGraph data={MiniMetricData} />
2017-01-10 21:12:50 +02:00
</MiniMetricView>
</Column>
<Column xs={3}>
<MiniMetricView>
<MiniMetricMeta>
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
</MiniMetricMeta>
<MiniMetricGraph data={MiniMetricData} />
2017-01-10 21:12:50 +02:00
</MiniMetricView>
</Column>
</Row>
2017-01-09 14:13:12 +02:00
</Base>
2017-01-10 13:55:25 +02:00
));