1 | 'use strict';
|
2 |
|
3 | var _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 |
|
10 | var _react = require('react');
|
11 |
|
12 | var _react2 = _interopRequireDefault(_react);
|
13 |
|
14 | var _styledComponents = require('styled-components');
|
15 |
|
16 | var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
17 |
|
18 | var _storybook = require('@kadira/storybook');
|
19 |
|
20 | var _index = require('./index');
|
21 |
|
22 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
23 |
|
24 | function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
25 |
|
26 | var Demo = (0, _styledComponents2.default)(_index.Column)(_templateObject, function (props) {
|
27 | return props.theme.fontBase;
|
28 | });
|
29 |
|
30 | var SmallGrid = (0, _styledComponents2.default)(_index.Grid)(_templateObject2);
|
31 |
|
32 | var MediumGrid = (0, _styledComponents2.default)(_index.Grid)(_templateObject3);
|
33 |
|
34 | var WideGrid = (0, _styledComponents2.default)(_index.Grid)(_templateObject4);
|
35 |
|
36 | var ExtraWideGrid = (0, _styledComponents2.default)(_index.Grid)(_templateObject5);
|
37 |
|
38 | var 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 |