UNPKG

6.52 kBJavaScriptView Raw
1'use strict';
2
3var _templateObject = _taggedTemplateLiteral(['\n height: 500px;\n background: #F3F3F3;\n font-family: ', ';\n font-weight: 300;\n padding-top: 1em;\n text-align: center;\n'], ['\n height: 500px;\n background: #F3F3F3;\n font-family: ', ';\n font-weight: 300;\n padding-top: 1em;\n text-align: center;\n']),
4 _templateObject2 = _taggedTemplateLiteral(['\n width: 320px;\n'], ['\n width: 320px;\n']),
5 _templateObject3 = _taggedTemplateLiteral(['\n width: 768px;\n'], ['\n width: 768px;\n']),
6 _templateObject4 = _taggedTemplateLiteral(['\n width: 1220px;\n'], ['\n width: 1220px;\n']),
7 _templateObject5 = _taggedTemplateLiteral(['\n width: 1440px;\n'], ['\n width: 1440px;\n']),
8 _templateObject6 = _taggedTemplateLiteral(['\n width: 1600px;\n'], ['\n width: 1600px;\n']);
9
10var _react = require('react');
11
12var _react2 = _interopRequireDefault(_react);
13
14var _styledComponents = require('styled-components');
15
16var _styledComponents2 = _interopRequireDefault(_styledComponents);
17
18var _storybook = require('@kadira/storybook');
19
20var _index = require('./index');
21
22function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
23
24function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
25
26var Demo = (0, _styledComponents2.default)(_index.Column)(_templateObject, function (props) {
27 return props.theme.fontBase;
28});
29
30var SmallGrid = (0, _styledComponents2.default)(_index.Grid)(_templateObject2);
31
32var MediumGrid = (0, _styledComponents2.default)(_index.Grid)(_templateObject3);
33
34var WideGrid = (0, _styledComponents2.default)(_index.Grid)(_templateObject4);
35
36var ExtraWideGrid = (0, _styledComponents2.default)(_index.Grid)(_templateObject5);
37
38var FixedGrid = (0, _styledComponents2.default)(_index.Grid)(_templateObject6);
39
40(0, _storybook.storiesOf)('Grid').addWithInfo('small', '< 768px', function () {
41 return _react2.default.createElement(
42 SmallGrid,
43 null,
44 _react2.default.createElement(
45 _index.Row,
46 null,
47 _react2.default.createElement(
48 _index.Column,
49 { sm: 2 / 4 },
50 _react2.default.createElement(
51 Demo,
52 null,
53 '2/4'
54 )
55 ),
56 _react2.default.createElement(
57 _index.Column,
58 { sm: 1 / 4 },
59 _react2.default.createElement(
60 Demo,
61 null,
62 '1/4'
63 )
64 ),
65 _react2.default.createElement(
66 _index.Column,
67 { sm: 1 / 4 },
68 _react2.default.createElement(
69 Demo,
70 null,
71 '1/4'
72 )
73 )
74 )
75 );
76}).addWithInfo('medium', '>= 768px < 1220px', function () {
77 return _react2.default.createElement(
78 MediumGrid,
79 null,
80 _react2.default.createElement(
81 _index.Row,
82 null,
83 _react2.default.createElement(
84 _index.Column,
85 { md: 4 / 8 },
86 _react2.default.createElement(
87 Demo,
88 null,
89 '4/8'
90 )
91 ),
92 _react2.default.createElement(
93 _index.Column,
94 { md: 2 / 8 },
95 _react2.default.createElement(
96 Demo,
97 null,
98 '2/8'
99 )
100 ),
101 _react2.default.createElement(
102 _index.Column,
103 { md: 1 / 8 },
104 _react2.default.createElement(
105 Demo,
106 null,
107 '1/8'
108 )
109 ),
110 _react2.default.createElement(
111 _index.Column,
112 { md: 1 / 8 },
113 _react2.default.createElement(
114 Demo,
115 null,
116 '1/8'
117 )
118 )
119 )
120 );
121}).addWithInfo('wide', '>= 1220px < 1440px', function () {
122 return _react2.default.createElement(
123 WideGrid,
124 null,
125 _react2.default.createElement(
126 _index.Row,
127 null,
128 _react2.default.createElement(
129 _index.Column,
130 { md: 4 / 8 },
131 _react2.default.createElement(
132 Demo,
133 null,
134 '4/8'
135 )
136 ),
137 _react2.default.createElement(
138 _index.Column,
139 { md: 2 / 8 },
140 _react2.default.createElement(
141 Demo,
142 null,
143 '2/8'
144 )
145 ),
146 _react2.default.createElement(
147 _index.Column,
148 { md: 1 / 8 },
149 _react2.default.createElement(
150 Demo,
151 null,
152 '1/8'
153 )
154 ),
155 _react2.default.createElement(
156 _index.Column,
157 { md: 1 / 8 },
158 _react2.default.createElement(
159 Demo,
160 null,
161 '1/8'
162 )
163 )
164 )
165 );
166}).addWithInfo('extra wide', '>= 1440px', function () {
167 return _react2.default.createElement(
168 ExtraWideGrid,
169 null,
170 _react2.default.createElement(
171 _index.Row,
172 null,
173 _react2.default.createElement(
174 _index.Column,
175 { md: 4 / 8 },
176 _react2.default.createElement(
177 Demo,
178 null,
179 '4/8'
180 )
181 ),
182 _react2.default.createElement(
183 _index.Column,
184 { md: 2 / 8 },
185 _react2.default.createElement(
186 Demo,
187 null,
188 '2/8'
189 )
190 ),
191 _react2.default.createElement(
192 _index.Column,
193 { md: 1 / 8 },
194 _react2.default.createElement(
195 Demo,
196 null,
197 '1/8'
198 )
199 ),
200 _react2.default.createElement(
201 _index.Column,
202 { md: 1 / 8 },
203 _react2.default.createElement(
204 Demo,
205 null,
206 '1/8'
207 )
208 )
209 )
210 );
211}).addWithInfo('extra wide w/ fixed', '>= 1440px', function () {
212 return _react2.default.createElement(
213 FixedGrid,
214 { fixed: true },
215 _react2.default.createElement(
216 _index.Row,
217 null,
218 _react2.default.createElement(
219 _index.Column,
220 { md: 4 / 8 },
221 _react2.default.createElement(
222 Demo,
223 null,
224 '4/8'
225 )
226 ),
227 _react2.default.createElement(
228 _index.Column,
229 { md: 2 / 8 },
230 _react2.default.createElement(
231 Demo,
232 null,
233 '2/8'
234 )
235 ),
236 _react2.default.createElement(
237 _index.Column,
238 { md: 1 / 8 },
239 _react2.default.createElement(
240 Demo,
241 null,
242 '1/8'
243 )
244 ),
245 _react2.default.createElement(
246 _index.Column,
247 { md: 1 / 8 },
248 _react2.default.createElement(
249 Demo,
250 null,
251 '1/8'
252 )
253 )
254 )
255 );
256});
\No newline at end of file