-
Notifications
You must be signed in to change notification settings - Fork 27
/
index.js
114 lines (107 loc) 路 2.97 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
import React from 'react';
import { storiesOf } from '@storybook/react';
import {
withReadme,
withDocs,
} from 'storybook-readme';
import {
Column,
Row,
} from '../../../packages/styled-grid-system-component';
import { Container } from '../../../packages/styled-container-component';
import GridReadme from '../../../packages/styled-grid-system-component/README.md';
import GridSimpleDocs from './docs/simple.md';
import GridAdvancedDocs from './docs/advanced.md';
const ColumnStyle = {
paddingTop: '.75rem',
paddingBottom: '.75rem',
backgroundColor: 'rgba(86,61,124,.15)',
border: '1px solid rgba(86,61,124,.2)',
}
const RowStyle = {
backgroundColor: "#ececec",
marginBottom: "1rem",
}
storiesOf('Grid', module)
.add('Simple', withReadme(GridReadme, withDocs(GridSimpleDocs, () => (
<Container fluid>
<Row style={RowStyle}>
<Column md={6} style={ColumnStyle}>
{'md={6}'}
</Column>
<Column md={6} style={ColumnStyle}>
{'md={6}'}
</Column>
</Row>
<Row style={RowStyle}>
<Column style={ColumnStyle}>
{'no props'}
</Column>
<Column style={ColumnStyle}>
{'no props'}
</Column>
<Column style={ColumnStyle}>
{'no props'}
</Column>
</Row>
<Row style={RowStyle}>
<Column sm={3} style={ColumnStyle}>
{'sm={3}'}
</Column>
<Column sm={3} style={ColumnStyle}>
{'sm={3}'}
</Column>
<Column sm={6} style={ColumnStyle}>
{'sm={6}'}
</Column>
</Row>
</Container>
))))
.add('Advanced', withReadme(GridReadme, withDocs(GridAdvancedDocs, () => (
<Container fluid>
<Row style={RowStyle}>
<Column sm={12} md={8} style={ColumnStyle}>
{'sm={12} md={8}'}
</Column>
<Column md={4} sm={6} style={ColumnStyle}>
{'sm={6} md={4}'}
</Column>
</Row>
<Row style={RowStyle}>
<Column xs={6} md={4} style={ColumnStyle}>
{'xs={6} md={4}'}
</Column>
<Column xs={6} md={4} style={ColumnStyle}>
{'xs={6} md={4}'}
</Column>
<Column xs={12} sm={8} md={4} style={ColumnStyle}>
{'xs={12} sm={8} md={4}'}
</Column>
</Row>
<Row style={RowStyle}>
<Column sm={6} style={ColumnStyle}>
{'sm={6}'}
</Column>
<Column sm={6} style={ColumnStyle}>
{'sm={6}'}
</Column>
</Row>
<Row style={RowStyle}>
<Column md={6} mdOffset={6} style={ColumnStyle}>
{'md={6} mdOffset={6}'}
</Column>
</Row>
<Row style={RowStyle}>
<Column md={6} mdOffset={6} style={ColumnStyle}>
<Row>
<Column md={6} style={ColumnStyle}>
{'md={6}'}
</Column>
<Column md={6} style={ColumnStyle}>
{'md={6}'}
</Column>
</Row>
</Column>
</Row>
</Container>
))));