UNPKG

7.98 kBJavaScriptView Raw
1'use strict';
2
3var _templateObject = _taggedTemplateLiteral(['\n height: 25vh;\n background: #F3F3F3;\n font-family: ', ';\n font-weight: 300;\n padding-top: 1em;\n text-align: center;\n'], ['\n height: 25vh;\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('tiny', '< 540px', 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 { tn: 2 / 4 },
50 _react2.default.createElement(
51 Demo,
52 null,
53 '2/4'
54 )
55 ),
56 _react2.default.createElement(
57 _index.Column,
58 { tn: 1 / 4 },
59 _react2.default.createElement(
60 Demo,
61 null,
62 '1/4'
63 )
64 ),
65 _react2.default.createElement(
66 _index.Column,
67 { tn: 1 / 4 },
68 _react2.default.createElement(
69 Demo,
70 null,
71 '1/4'
72 )
73 )
74 )
75 );
76}).addWithInfo('small', '> 540 && < 768px', function () {
77 return _react2.default.createElement(
78 SmallGrid,
79 null,
80 _react2.default.createElement(
81 _index.Row,
82 null,
83 _react2.default.createElement(
84 _index.Column,
85 { sm: 2 / 4 },
86 _react2.default.createElement(
87 Demo,
88 null,
89 '2/4'
90 )
91 ),
92 _react2.default.createElement(
93 _index.Column,
94 { sm: 1 / 4 },
95 _react2.default.createElement(
96 Demo,
97 null,
98 '1/4'
99 )
100 ),
101 _react2.default.createElement(
102 _index.Column,
103 { sm: 1 / 4 },
104 _react2.default.createElement(
105 Demo,
106 null,
107 '1/4'
108 )
109 )
110 )
111 );
112}).addWithInfo('medium', '>= 768px < 1220px', function () {
113 return _react2.default.createElement(
114 MediumGrid,
115 null,
116 _react2.default.createElement(
117 _index.Row,
118 null,
119 _react2.default.createElement(
120 _index.Column,
121 { md: 4 / 8 },
122 _react2.default.createElement(
123 Demo,
124 null,
125 '4/8'
126 )
127 ),
128 _react2.default.createElement(
129 _index.Column,
130 { md: 2 / 8 },
131 _react2.default.createElement(
132 Demo,
133 null,
134 '2/8'
135 )
136 ),
137 _react2.default.createElement(
138 _index.Column,
139 { md: 1 / 8 },
140 _react2.default.createElement(
141 Demo,
142 null,
143 '1/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 )
156 );
157}).addWithInfo('wide', '>= 1220px < 1440px', function () {
158 return _react2.default.createElement(
159 WideGrid,
160 null,
161 _react2.default.createElement(
162 _index.Row,
163 null,
164 _react2.default.createElement(
165 _index.Column,
166 { md: 4 / 8 },
167 _react2.default.createElement(
168 Demo,
169 null,
170 '4/8'
171 )
172 ),
173 _react2.default.createElement(
174 _index.Column,
175 { md: 2 / 8 },
176 _react2.default.createElement(
177 Demo,
178 null,
179 '2/8'
180 )
181 ),
182 _react2.default.createElement(
183 _index.Column,
184 { md: 1 / 8 },
185 _react2.default.createElement(
186 Demo,
187 null,
188 '1/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 )
201 );
202}).addWithInfo('extra wide', '>= 1440px', function () {
203 return _react2.default.createElement(
204 ExtraWideGrid,
205 null,
206 _react2.default.createElement(
207 _index.Row,
208 null,
209 _react2.default.createElement(
210 _index.Column,
211 { md: 4 / 8 },
212 _react2.default.createElement(
213 Demo,
214 null,
215 '4/8'
216 )
217 ),
218 _react2.default.createElement(
219 _index.Column,
220 { md: 2 / 8 },
221 _react2.default.createElement(
222 Demo,
223 null,
224 '2/8'
225 )
226 ),
227 _react2.default.createElement(
228 _index.Column,
229 { md: 1 / 8 },
230 _react2.default.createElement(
231 Demo,
232 null,
233 '1/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 )
246 );
247}).addWithInfo('extra wide w/ fixed', '>= 1440px', function () {
248 return _react2.default.createElement(
249 FixedGrid,
250 { fixed: true },
251 _react2.default.createElement(
252 _index.Row,
253 null,
254 _react2.default.createElement(
255 _index.Column,
256 { md: 4 / 8 },
257 _react2.default.createElement(
258 Demo,
259 null,
260 '4/8'
261 )
262 ),
263 _react2.default.createElement(
264 _index.Column,
265 { md: 2 / 8 },
266 _react2.default.createElement(
267 Demo,
268 null,
269 '2/8'
270 )
271 ),
272 _react2.default.createElement(
273 _index.Column,
274 { md: 1 / 8 },
275 _react2.default.createElement(
276 Demo,
277 null,
278 '1/8'
279 )
280 ),
281 _react2.default.createElement(
282 _index.Column,
283 { md: 1 / 8 },
284 _react2.default.createElement(
285 Demo,
286 null,
287 '1/8'
288 )
289 )
290 )
291 );
292}).addWithInfo('push & pull', '>= 1440px', function () {
293 return _react2.default.createElement(
294 FixedGrid,
295 { fixed: true },
296 _react2.default.createElement(
297 _index.Row,
298 null,
299 _react2.default.createElement(
300 _index.Column,
301 { md: 4 / 8, 'md-push': 4 / 8 },
302 _react2.default.createElement(
303 Demo,
304 null,
305 '4/8'
306 )
307 )
308 ),
309 _react2.default.createElement(
310 _index.Row,
311 null,
312 _react2.default.createElement(
313 _index.Column,
314 { md: 4 / 8, 'md-pull': 4 / 8 },
315 _react2.default.createElement(
316 Demo,
317 null,
318 '4/8'
319 )
320 )
321 )
322 );
323});
\No newline at end of file