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('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 | }).addWithInfo('push & pull', '>= 1440px', function () {
|
257 | return _react2.default.createElement(
|
258 | FixedGrid,
|
259 | { fixed: true },
|
260 | _react2.default.createElement(
|
261 | _index.Row,
|
262 | null,
|
263 | _react2.default.createElement(
|
264 | _index.Column,
|
265 | { md: 4 / 8, 'md-push': 4 / 8 },
|
266 | _react2.default.createElement(
|
267 | Demo,
|
268 | null,
|
269 | '4/8'
|
270 | )
|
271 | )
|
272 | ),
|
273 | _react2.default.createElement(
|
274 | _index.Row,
|
275 | null,
|
276 | _react2.default.createElement(
|
277 | _index.Column,
|
278 | { md: 4 / 8, 'md-pull': 4 / 8 },
|
279 | _react2.default.createElement(
|
280 | Demo,
|
281 | null,
|
282 | '4/8'
|
283 | )
|
284 | )
|
285 | )
|
286 | );
|
287 | }); |
\ | No newline at end of file |