├── .babelrc
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .npmignore
├── .prettierrc
├── .travis.yml
├── LICENSE.md
├── README.md
├── __tests__
├── __snapshots__
│ ├── container.js.snap
│ └── item.js.snap
├── container.js
└── item.js
├── package.json
├── src
├── flex.js
├── index.js
└── item.js
└── yarn.lock
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["env"],
3 | "plugins": ["babel-plugin-styled-components"]
4 | }
5 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | coverage/*
3 | dist/*
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "airbnb",
3 | "plugins": ["jest"],
4 | "rules": {
5 | "arrow-parens": 0
6 | },
7 | "env": {
8 | "jest": true
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 |
6 | # testing
7 | /coverage
8 |
9 | # production
10 | /build
11 |
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 |
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 | .eslintcache
23 | coverage/
24 |
25 |
26 | dist
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | __tests__/
2 | src/
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "singleQuote": true,
3 | "trailingComma": "es5",
4 | "useTabs": false,
5 | "printWidth": 80
6 | }
7 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | cache:
3 | directories:
4 | - node_modules
5 | node_js:
6 | - 8
7 | - 7
8 | script:
9 | - 'npm run test:coverage'
10 | after_success:
11 | - 'bash <(curl -s https://codecov.io/bash)'
12 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | # The MIT License
2 |
3 | Copyright 2017 Sara Vieira (https://iamsaravieira.com), contributors
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6 |
7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
8 |
9 | THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
10 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Styled Flex Component
2 |
3 | [](https://codecov.io/gh/SaraVieira/styled-flex-component) [](https://travis-ci.org/SaraVieira/styled-flex-component)
4 |
5 | Flex Element for not writing any more custom flex styles because fuck that
6 |
7 | ## Install
8 |
9 | ```
10 | yarn add styled-flex-component
11 | or
12 | npm i styled-flex-component
13 | ```
14 |
15 | ## Usage
16 |
17 | ```jsx
18 | import React from 'react';
19 | import Flex, { FlexItem } from 'styled-flex-component';
20 |
21 | export default () => (
22 |
23 | World
24 | Hello
25 |
26 | );
27 | ```
28 |
29 | ## Props
30 |
31 | All props without description are just true or false values and take no arguments
32 |
33 | ### Flex Container
34 |
35 | #### General
36 |
37 | * full -> Sets width, height and flex basis to 100%
38 | * inline -> Sets the item to inline-flex
39 | * center -> Sets justify-content and align-items to center
40 |
41 | #### Direction
42 |
43 | * row
44 | * rowReverse
45 | * column
46 | * columnReverse
47 |
48 | #### Wrap
49 |
50 | * wrap
51 | * wrapReverse
52 |
53 | #### Align Items
54 |
55 | * alignCenter
56 | * alignStart
57 | * alignEnd
58 | * alignBaseline
59 | * alignStretch
60 | * alignCenter
61 |
62 | #### Align Content
63 |
64 | * contentCenter
65 | * contentStart
66 | * contentEnd
67 | * contentBaseline
68 | * contentStretch
69 | * contentAround
70 |
71 | #### Justify Content
72 |
73 | * justifyCenter
74 | * justifyStart
75 | * justifyEnd
76 | * justifyBetween
77 | * justifyAround
78 | * justifyEvenly
79 |
80 | ### Flex Item
81 |
82 | * Order -> Takes a number to se the order of that item
83 | * basis -> Takes a number to se the flex-basis of that item
84 | * grow
85 | * shrink
86 | * noShrink
87 |
88 | # License
89 |
90 | MIT
91 |
--------------------------------------------------------------------------------
/__tests__/__snapshots__/container.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`it works - alignBaseline 1`] = `
4 | .c0 {
5 | display: -webkit-box;
6 | display: -webkit-flex;
7 | display: -ms-flexbox;
8 | display: flex;
9 | -webkit-flex-direction: row;
10 | -ms-flex-direction: row;
11 | flex-direction: row;
12 | -webkit-flex-wrap: nowrap;
13 | -ms-flex-wrap: nowrap;
14 | flex-wrap: nowrap;
15 | -webkit-box-pack: start;
16 | -webkit-justify-content: flex-start;
17 | -ms-flex-pack: start;
18 | justify-content: flex-start;
19 | -webkit-align-content: stretch;
20 | -ms-flex-line-pack: stretch;
21 | align-content: stretch;
22 | -webkit-align-items: baseline;
23 | -webkit-box-align: baseline;
24 | -ms-flex-align: baseline;
25 | align-items: baseline;
26 | }
27 |
28 |
31 | `;
32 |
33 | exports[`it works - alignCenter 1`] = `
34 | .c0 {
35 | display: -webkit-box;
36 | display: -webkit-flex;
37 | display: -ms-flexbox;
38 | display: flex;
39 | -webkit-flex-direction: row;
40 | -ms-flex-direction: row;
41 | flex-direction: row;
42 | -webkit-flex-wrap: nowrap;
43 | -ms-flex-wrap: nowrap;
44 | flex-wrap: nowrap;
45 | -webkit-box-pack: start;
46 | -webkit-justify-content: flex-start;
47 | -ms-flex-pack: start;
48 | justify-content: flex-start;
49 | -webkit-align-content: stretch;
50 | -ms-flex-line-pack: stretch;
51 | align-content: stretch;
52 | -webkit-align-items: center;
53 | -webkit-box-align: center;
54 | -ms-flex-align: center;
55 | align-items: center;
56 | }
57 |
58 |
61 | `;
62 |
63 | exports[`it works - alignEnd 1`] = `
64 | .c0 {
65 | display: -webkit-box;
66 | display: -webkit-flex;
67 | display: -ms-flexbox;
68 | display: flex;
69 | -webkit-flex-direction: row;
70 | -ms-flex-direction: row;
71 | flex-direction: row;
72 | -webkit-flex-wrap: nowrap;
73 | -ms-flex-wrap: nowrap;
74 | flex-wrap: nowrap;
75 | -webkit-box-pack: start;
76 | -webkit-justify-content: flex-start;
77 | -ms-flex-pack: start;
78 | justify-content: flex-start;
79 | -webkit-align-content: stretch;
80 | -ms-flex-line-pack: stretch;
81 | align-content: stretch;
82 | -webkit-align-items: flex-end;
83 | -webkit-box-align: flex-end;
84 | -ms-flex-align: flex-end;
85 | align-items: flex-end;
86 | }
87 |
88 |
91 | `;
92 |
93 | exports[`it works - alignStart 1`] = `
94 | .c0 {
95 | display: -webkit-box;
96 | display: -webkit-flex;
97 | display: -ms-flexbox;
98 | display: flex;
99 | -webkit-flex-direction: row;
100 | -ms-flex-direction: row;
101 | flex-direction: row;
102 | -webkit-flex-wrap: nowrap;
103 | -ms-flex-wrap: nowrap;
104 | flex-wrap: nowrap;
105 | -webkit-box-pack: start;
106 | -webkit-justify-content: flex-start;
107 | -ms-flex-pack: start;
108 | justify-content: flex-start;
109 | -webkit-align-content: stretch;
110 | -ms-flex-line-pack: stretch;
111 | align-content: stretch;
112 | -webkit-align-items: flex-start;
113 | -webkit-box-align: flex-start;
114 | -ms-flex-align: flex-start;
115 | align-items: flex-start;
116 | }
117 |
118 |
121 | `;
122 |
123 | exports[`it works - alignStretch 1`] = `
124 | .c0 {
125 | display: -webkit-box;
126 | display: -webkit-flex;
127 | display: -ms-flexbox;
128 | display: flex;
129 | -webkit-flex-direction: row;
130 | -ms-flex-direction: row;
131 | flex-direction: row;
132 | -webkit-flex-wrap: nowrap;
133 | -ms-flex-wrap: nowrap;
134 | flex-wrap: nowrap;
135 | -webkit-box-pack: start;
136 | -webkit-justify-content: flex-start;
137 | -ms-flex-pack: start;
138 | justify-content: flex-start;
139 | -webkit-align-content: stretch;
140 | -ms-flex-line-pack: stretch;
141 | align-content: stretch;
142 | -webkit-align-items: stretch;
143 | -webkit-box-align: stretch;
144 | -ms-flex-align: stretch;
145 | align-items: stretch;
146 | }
147 |
148 |
151 | `;
152 |
153 | exports[`it works - center 1`] = `
154 | .c0 {
155 | display: -webkit-box;
156 | display: -webkit-flex;
157 | display: -ms-flexbox;
158 | display: flex;
159 | -webkit-flex-direction: row;
160 | -ms-flex-direction: row;
161 | flex-direction: row;
162 | -webkit-flex-wrap: nowrap;
163 | -ms-flex-wrap: nowrap;
164 | flex-wrap: nowrap;
165 | -webkit-box-pack: start;
166 | -webkit-justify-content: flex-start;
167 | -ms-flex-pack: start;
168 | justify-content: flex-start;
169 | -webkit-align-content: stretch;
170 | -ms-flex-line-pack: stretch;
171 | align-content: stretch;
172 | -webkit-align-items: center;
173 | -webkit-box-align: center;
174 | -ms-flex-align: center;
175 | align-items: center;
176 | -webkit-box-pack: center;
177 | -webkit-justify-content: center;
178 | -ms-flex-pack: center;
179 | justify-content: center;
180 | }
181 |
182 |
185 | `;
186 |
187 | exports[`it works - column 1`] = `
188 | .c0 {
189 | display: -webkit-box;
190 | display: -webkit-flex;
191 | display: -ms-flexbox;
192 | display: flex;
193 | -webkit-flex-direction: row;
194 | -ms-flex-direction: row;
195 | flex-direction: row;
196 | -webkit-flex-wrap: nowrap;
197 | -ms-flex-wrap: nowrap;
198 | flex-wrap: nowrap;
199 | -webkit-box-pack: start;
200 | -webkit-justify-content: flex-start;
201 | -ms-flex-pack: start;
202 | justify-content: flex-start;
203 | -webkit-align-content: stretch;
204 | -ms-flex-line-pack: stretch;
205 | align-content: stretch;
206 | -webkit-flex-direction: column;
207 | -ms-flex-direction: column;
208 | flex-direction: column;
209 | }
210 |
211 |
214 | `;
215 |
216 | exports[`it works - columnReverse 1`] = `
217 | .c0 {
218 | display: -webkit-box;
219 | display: -webkit-flex;
220 | display: -ms-flexbox;
221 | display: flex;
222 | -webkit-flex-direction: row;
223 | -ms-flex-direction: row;
224 | flex-direction: row;
225 | -webkit-flex-wrap: nowrap;
226 | -ms-flex-wrap: nowrap;
227 | flex-wrap: nowrap;
228 | -webkit-box-pack: start;
229 | -webkit-justify-content: flex-start;
230 | -ms-flex-pack: start;
231 | justify-content: flex-start;
232 | -webkit-align-content: stretch;
233 | -ms-flex-line-pack: stretch;
234 | align-content: stretch;
235 | -webkit-flex-direction: column-reverse;
236 | -ms-flex-direction: column-reverse;
237 | flex-direction: column-reverse;
238 | }
239 |
240 |
243 | `;
244 |
245 | exports[`it works - contentCenter 1`] = `
246 | .c0 {
247 | display: -webkit-box;
248 | display: -webkit-flex;
249 | display: -ms-flexbox;
250 | display: flex;
251 | -webkit-flex-direction: row;
252 | -ms-flex-direction: row;
253 | flex-direction: row;
254 | -webkit-flex-wrap: nowrap;
255 | -ms-flex-wrap: nowrap;
256 | flex-wrap: nowrap;
257 | -webkit-box-pack: start;
258 | -webkit-justify-content: flex-start;
259 | -ms-flex-pack: start;
260 | justify-content: flex-start;
261 | -webkit-align-content: stretch;
262 | -ms-flex-line-pack: stretch;
263 | align-content: stretch;
264 | -webkit-align-content: center;
265 | -ms-flex-line-pack: center;
266 | align-content: center;
267 | }
268 |
269 |
272 | `;
273 |
274 | exports[`it works - contentEnd 1`] = `
275 | .c0 {
276 | display: -webkit-box;
277 | display: -webkit-flex;
278 | display: -ms-flexbox;
279 | display: flex;
280 | -webkit-flex-direction: row;
281 | -ms-flex-direction: row;
282 | flex-direction: row;
283 | -webkit-flex-wrap: nowrap;
284 | -ms-flex-wrap: nowrap;
285 | flex-wrap: nowrap;
286 | -webkit-box-pack: start;
287 | -webkit-justify-content: flex-start;
288 | -ms-flex-pack: start;
289 | justify-content: flex-start;
290 | -webkit-align-content: stretch;
291 | -ms-flex-line-pack: stretch;
292 | align-content: stretch;
293 | -webkit-align-content: flex-end;
294 | -ms-flex-line-pack: end;
295 | align-content: flex-end;
296 | }
297 |
298 |
301 | `;
302 |
303 | exports[`it works - contentSpaceAround 1`] = `
304 | .c0 {
305 | display: -webkit-box;
306 | display: -webkit-flex;
307 | display: -ms-flexbox;
308 | display: flex;
309 | -webkit-flex-direction: row;
310 | -ms-flex-direction: row;
311 | flex-direction: row;
312 | -webkit-flex-wrap: nowrap;
313 | -ms-flex-wrap: nowrap;
314 | flex-wrap: nowrap;
315 | -webkit-box-pack: start;
316 | -webkit-justify-content: flex-start;
317 | -ms-flex-pack: start;
318 | justify-content: flex-start;
319 | -webkit-align-content: stretch;
320 | -ms-flex-line-pack: stretch;
321 | align-content: stretch;
322 | -webkit-align-content: space-around;
323 | -ms-flex-line-pack: space-around;
324 | align-content: space-around;
325 | }
326 |
327 |
330 | `;
331 |
332 | exports[`it works - contentSpaceBetween 1`] = `
333 | .c0 {
334 | display: -webkit-box;
335 | display: -webkit-flex;
336 | display: -ms-flexbox;
337 | display: flex;
338 | -webkit-flex-direction: row;
339 | -ms-flex-direction: row;
340 | flex-direction: row;
341 | -webkit-flex-wrap: nowrap;
342 | -ms-flex-wrap: nowrap;
343 | flex-wrap: nowrap;
344 | -webkit-box-pack: start;
345 | -webkit-justify-content: flex-start;
346 | -ms-flex-pack: start;
347 | justify-content: flex-start;
348 | -webkit-align-content: stretch;
349 | -ms-flex-line-pack: stretch;
350 | align-content: stretch;
351 | -webkit-align-content: space-between;
352 | -ms-flex-line-pack: space-between;
353 | align-content: space-between;
354 | }
355 |
356 |
359 | `;
360 |
361 | exports[`it works - contentStart 1`] = `
362 | .c0 {
363 | display: -webkit-box;
364 | display: -webkit-flex;
365 | display: -ms-flexbox;
366 | display: flex;
367 | -webkit-flex-direction: row;
368 | -ms-flex-direction: row;
369 | flex-direction: row;
370 | -webkit-flex-wrap: nowrap;
371 | -ms-flex-wrap: nowrap;
372 | flex-wrap: nowrap;
373 | -webkit-box-pack: start;
374 | -webkit-justify-content: flex-start;
375 | -ms-flex-pack: start;
376 | justify-content: flex-start;
377 | -webkit-align-content: stretch;
378 | -ms-flex-line-pack: stretch;
379 | align-content: stretch;
380 | -webkit-align-content: flex-start;
381 | -ms-flex-line-pack: start;
382 | align-content: flex-start;
383 | }
384 |
385 |
388 | `;
389 |
390 | exports[`it works - contentStretch 1`] = `
391 | .c0 {
392 | display: -webkit-box;
393 | display: -webkit-flex;
394 | display: -ms-flexbox;
395 | display: flex;
396 | -webkit-flex-direction: row;
397 | -ms-flex-direction: row;
398 | flex-direction: row;
399 | -webkit-flex-wrap: nowrap;
400 | -ms-flex-wrap: nowrap;
401 | flex-wrap: nowrap;
402 | -webkit-box-pack: start;
403 | -webkit-justify-content: flex-start;
404 | -ms-flex-pack: start;
405 | justify-content: flex-start;
406 | -webkit-align-content: stretch;
407 | -ms-flex-line-pack: stretch;
408 | align-content: stretch;
409 | -webkit-align-content: stretch;
410 | -ms-flex-line-pack: stretch;
411 | align-content: stretch;
412 | }
413 |
414 |
417 | `;
418 |
419 | exports[`it works - full 1`] = `
420 | .c0 {
421 | display: -webkit-box;
422 | display: -webkit-flex;
423 | display: -ms-flexbox;
424 | display: flex;
425 | -webkit-flex-direction: row;
426 | -ms-flex-direction: row;
427 | flex-direction: row;
428 | -webkit-flex-wrap: nowrap;
429 | -ms-flex-wrap: nowrap;
430 | flex-wrap: nowrap;
431 | -webkit-box-pack: start;
432 | -webkit-justify-content: flex-start;
433 | -ms-flex-pack: start;
434 | justify-content: flex-start;
435 | -webkit-align-content: stretch;
436 | -ms-flex-line-pack: stretch;
437 | align-content: stretch;
438 | width: 100%;
439 | height: 100%;
440 | -webkit-flex-basis: 100%;
441 | -ms-flex-preferred-size: 100%;
442 | flex-basis: 100%;
443 | }
444 |
445 |
448 | `;
449 |
450 | exports[`it works - inline 1`] = `
451 | .c0 {
452 | display: -webkit-box;
453 | display: -webkit-flex;
454 | display: -ms-flexbox;
455 | display: flex;
456 | -webkit-flex-direction: row;
457 | -ms-flex-direction: row;
458 | flex-direction: row;
459 | -webkit-flex-wrap: nowrap;
460 | -ms-flex-wrap: nowrap;
461 | flex-wrap: nowrap;
462 | -webkit-box-pack: start;
463 | -webkit-justify-content: flex-start;
464 | -ms-flex-pack: start;
465 | justify-content: flex-start;
466 | -webkit-align-content: stretch;
467 | -ms-flex-line-pack: stretch;
468 | align-content: stretch;
469 | display: -webkit-inline-box;
470 | display: -webkit-inline-flex;
471 | display: -ms-inline-flexbox;
472 | display: inline-flex;
473 | }
474 |
475 |
478 | `;
479 |
480 | exports[`it works - justifyAround 1`] = `
481 | .c0 {
482 | display: -webkit-box;
483 | display: -webkit-flex;
484 | display: -ms-flexbox;
485 | display: flex;
486 | -webkit-flex-direction: row;
487 | -ms-flex-direction: row;
488 | flex-direction: row;
489 | -webkit-flex-wrap: nowrap;
490 | -ms-flex-wrap: nowrap;
491 | flex-wrap: nowrap;
492 | -webkit-box-pack: start;
493 | -webkit-justify-content: flex-start;
494 | -ms-flex-pack: start;
495 | justify-content: flex-start;
496 | -webkit-align-content: stretch;
497 | -ms-flex-line-pack: stretch;
498 | align-content: stretch;
499 | -webkit-box-pack: space-around;
500 | -webkit-justify-content: space-around;
501 | -ms-flex-pack: space-around;
502 | justify-content: space-around;
503 | }
504 |
505 |
508 | `;
509 |
510 | exports[`it works - justifyBetween 1`] = `
511 | .c0 {
512 | display: -webkit-box;
513 | display: -webkit-flex;
514 | display: -ms-flexbox;
515 | display: flex;
516 | -webkit-flex-direction: row;
517 | -ms-flex-direction: row;
518 | flex-direction: row;
519 | -webkit-flex-wrap: nowrap;
520 | -ms-flex-wrap: nowrap;
521 | flex-wrap: nowrap;
522 | -webkit-box-pack: start;
523 | -webkit-justify-content: flex-start;
524 | -ms-flex-pack: start;
525 | justify-content: flex-start;
526 | -webkit-align-content: stretch;
527 | -ms-flex-line-pack: stretch;
528 | align-content: stretch;
529 | -webkit-box-pack: justify;
530 | -webkit-justify-content: space-between;
531 | -ms-flex-pack: justify;
532 | justify-content: space-between;
533 | }
534 |
535 |
538 | `;
539 |
540 | exports[`it works - justifyCenter 1`] = `
541 | .c0 {
542 | display: -webkit-box;
543 | display: -webkit-flex;
544 | display: -ms-flexbox;
545 | display: flex;
546 | -webkit-flex-direction: row;
547 | -ms-flex-direction: row;
548 | flex-direction: row;
549 | -webkit-flex-wrap: nowrap;
550 | -ms-flex-wrap: nowrap;
551 | flex-wrap: nowrap;
552 | -webkit-box-pack: start;
553 | -webkit-justify-content: flex-start;
554 | -ms-flex-pack: start;
555 | justify-content: flex-start;
556 | -webkit-align-content: stretch;
557 | -ms-flex-line-pack: stretch;
558 | align-content: stretch;
559 | -webkit-box-pack: center;
560 | -webkit-justify-content: center;
561 | -ms-flex-pack: center;
562 | justify-content: center;
563 | }
564 |
565 |
568 | `;
569 |
570 | exports[`it works - justifyEnd 1`] = `
571 | .c0 {
572 | display: -webkit-box;
573 | display: -webkit-flex;
574 | display: -ms-flexbox;
575 | display: flex;
576 | -webkit-flex-direction: row;
577 | -ms-flex-direction: row;
578 | flex-direction: row;
579 | -webkit-flex-wrap: nowrap;
580 | -ms-flex-wrap: nowrap;
581 | flex-wrap: nowrap;
582 | -webkit-box-pack: start;
583 | -webkit-justify-content: flex-start;
584 | -ms-flex-pack: start;
585 | justify-content: flex-start;
586 | -webkit-align-content: stretch;
587 | -ms-flex-line-pack: stretch;
588 | align-content: stretch;
589 | -webkit-box-pack: end;
590 | -webkit-justify-content: flex-end;
591 | -ms-flex-pack: end;
592 | justify-content: flex-end;
593 | }
594 |
595 |
598 | `;
599 |
600 | exports[`it works - justifyStart 1`] = `
601 | .c0 {
602 | display: -webkit-box;
603 | display: -webkit-flex;
604 | display: -ms-flexbox;
605 | display: flex;
606 | -webkit-flex-direction: row;
607 | -ms-flex-direction: row;
608 | flex-direction: row;
609 | -webkit-flex-wrap: nowrap;
610 | -ms-flex-wrap: nowrap;
611 | flex-wrap: nowrap;
612 | -webkit-box-pack: start;
613 | -webkit-justify-content: flex-start;
614 | -ms-flex-pack: start;
615 | justify-content: flex-start;
616 | -webkit-align-content: stretch;
617 | -ms-flex-line-pack: stretch;
618 | align-content: stretch;
619 | -webkit-box-pack: start;
620 | -webkit-justify-content: flex-start;
621 | -ms-flex-pack: start;
622 | justify-content: flex-start;
623 | }
624 |
625 |
628 | `;
629 |
630 | exports[`it works - nowrap 1`] = `
631 | .c0 {
632 | display: -webkit-box;
633 | display: -webkit-flex;
634 | display: -ms-flexbox;
635 | display: flex;
636 | -webkit-flex-direction: row;
637 | -ms-flex-direction: row;
638 | flex-direction: row;
639 | -webkit-flex-wrap: nowrap;
640 | -ms-flex-wrap: nowrap;
641 | flex-wrap: nowrap;
642 | -webkit-box-pack: start;
643 | -webkit-justify-content: flex-start;
644 | -ms-flex-pack: start;
645 | justify-content: flex-start;
646 | -webkit-align-content: stretch;
647 | -ms-flex-line-pack: stretch;
648 | align-content: stretch;
649 | -webkit-flex-wrap: nowrap;
650 | -ms-flex-wrap: nowrap;
651 | flex-wrap: nowrap;
652 | }
653 |
654 |
657 | `;
658 |
659 | exports[`it works - row 1`] = `
660 | .c0 {
661 | display: -webkit-box;
662 | display: -webkit-flex;
663 | display: -ms-flexbox;
664 | display: flex;
665 | -webkit-flex-direction: row;
666 | -ms-flex-direction: row;
667 | flex-direction: row;
668 | -webkit-flex-wrap: nowrap;
669 | -ms-flex-wrap: nowrap;
670 | flex-wrap: nowrap;
671 | -webkit-box-pack: start;
672 | -webkit-justify-content: flex-start;
673 | -ms-flex-pack: start;
674 | justify-content: flex-start;
675 | -webkit-align-content: stretch;
676 | -ms-flex-line-pack: stretch;
677 | align-content: stretch;
678 | -webkit-flex-direction: row;
679 | -ms-flex-direction: row;
680 | flex-direction: row;
681 | }
682 |
683 |
686 | `;
687 |
688 | exports[`it works - rowReverse 1`] = `
689 | .c0 {
690 | display: -webkit-box;
691 | display: -webkit-flex;
692 | display: -ms-flexbox;
693 | display: flex;
694 | -webkit-flex-direction: row;
695 | -ms-flex-direction: row;
696 | flex-direction: row;
697 | -webkit-flex-wrap: nowrap;
698 | -ms-flex-wrap: nowrap;
699 | flex-wrap: nowrap;
700 | -webkit-box-pack: start;
701 | -webkit-justify-content: flex-start;
702 | -ms-flex-pack: start;
703 | justify-content: flex-start;
704 | -webkit-align-content: stretch;
705 | -ms-flex-line-pack: stretch;
706 | align-content: stretch;
707 | -webkit-flex-direction: row-reverse;
708 | -ms-flex-direction: row-reverse;
709 | flex-direction: row-reverse;
710 | }
711 |
712 |
715 | `;
716 |
717 | exports[`it works - wrap 1`] = `
718 | .c0 {
719 | display: -webkit-box;
720 | display: -webkit-flex;
721 | display: -ms-flexbox;
722 | display: flex;
723 | -webkit-flex-direction: row;
724 | -ms-flex-direction: row;
725 | flex-direction: row;
726 | -webkit-flex-wrap: nowrap;
727 | -ms-flex-wrap: nowrap;
728 | flex-wrap: nowrap;
729 | -webkit-box-pack: start;
730 | -webkit-justify-content: flex-start;
731 | -ms-flex-pack: start;
732 | justify-content: flex-start;
733 | -webkit-align-content: stretch;
734 | -ms-flex-line-pack: stretch;
735 | align-content: stretch;
736 | -webkit-flex-wrap: wrap;
737 | -ms-flex-wrap: wrap;
738 | flex-wrap: wrap;
739 | }
740 |
741 |
745 | `;
746 |
747 | exports[`it works - wrapReverse 1`] = `
748 | .c0 {
749 | display: -webkit-box;
750 | display: -webkit-flex;
751 | display: -ms-flexbox;
752 | display: flex;
753 | -webkit-flex-direction: row;
754 | -ms-flex-direction: row;
755 | flex-direction: row;
756 | -webkit-flex-wrap: nowrap;
757 | -ms-flex-wrap: nowrap;
758 | flex-wrap: nowrap;
759 | -webkit-box-pack: start;
760 | -webkit-justify-content: flex-start;
761 | -ms-flex-pack: start;
762 | justify-content: flex-start;
763 | -webkit-align-content: stretch;
764 | -ms-flex-line-pack: stretch;
765 | align-content: stretch;
766 | -webkit-flex-wrap: wrap-reverse;
767 | -ms-flex-wrap: wrap-reverse;
768 | flex-wrap: wrap-reverse;
769 | }
770 |
771 |
774 | `;
775 |
776 | exports[`it works 1`] = `
777 | .c0 {
778 | display: -webkit-box;
779 | display: -webkit-flex;
780 | display: -ms-flexbox;
781 | display: flex;
782 | -webkit-flex-direction: row;
783 | -ms-flex-direction: row;
784 | flex-direction: row;
785 | -webkit-flex-wrap: nowrap;
786 | -ms-flex-wrap: nowrap;
787 | flex-wrap: nowrap;
788 | -webkit-box-pack: start;
789 | -webkit-justify-content: flex-start;
790 | -ms-flex-pack: start;
791 | justify-content: flex-start;
792 | -webkit-align-content: stretch;
793 | -ms-flex-line-pack: stretch;
794 | align-content: stretch;
795 | }
796 |
797 |
800 | `;
801 |
--------------------------------------------------------------------------------
/__tests__/__snapshots__/item.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`it works - basis=-10 1`] = `
4 | .c0 {
5 | -webkit-order: 0;
6 | -ms-flex-order: 0;
7 | order: 0;
8 | -webkit-flex-basis: auto;
9 | -ms-flex-preferred-size: auto;
10 | flex-basis: auto;
11 | -webkit-box-flex: 0;
12 | -webkit-flex-grow: 0;
13 | -ms-flex-positive: 0;
14 | flex-grow: 0;
15 | -webkit-flex-shrink: 1;
16 | -ms-flex-negative: 1;
17 | flex-shrink: 1;
18 | display: block;
19 | -webkit-flex-basis: -10;
20 | -ms-flex-preferred-size: -10;
21 | flex-basis: -10;
22 | }
23 |
24 |
27 | `;
28 |
29 | exports[`it works - basis=10 1`] = `
30 | .c0 {
31 | -webkit-order: 0;
32 | -ms-flex-order: 0;
33 | order: 0;
34 | -webkit-flex-basis: auto;
35 | -ms-flex-preferred-size: auto;
36 | flex-basis: auto;
37 | -webkit-box-flex: 0;
38 | -webkit-flex-grow: 0;
39 | -ms-flex-positive: 0;
40 | flex-grow: 0;
41 | -webkit-flex-shrink: 1;
42 | -ms-flex-negative: 1;
43 | flex-shrink: 1;
44 | display: block;
45 | -webkit-flex-basis: 10;
46 | -ms-flex-preferred-size: 10;
47 | flex-basis: 10;
48 | }
49 |
50 |
53 | `;
54 |
55 | exports[`it works - grow=-10 1`] = `
56 | .c0 {
57 | -webkit-order: 0;
58 | -ms-flex-order: 0;
59 | order: 0;
60 | -webkit-flex-basis: auto;
61 | -ms-flex-preferred-size: auto;
62 | flex-basis: auto;
63 | -webkit-box-flex: 0;
64 | -webkit-flex-grow: 0;
65 | -ms-flex-positive: 0;
66 | flex-grow: 0;
67 | -webkit-flex-shrink: 1;
68 | -ms-flex-negative: 1;
69 | flex-shrink: 1;
70 | display: block;
71 | -webkit-box-flex: -10;
72 | -webkit-flex-grow: -10;
73 | -ms-flex-positive: -10;
74 | flex-grow: -10;
75 | }
76 |
77 |
80 | `;
81 |
82 | exports[`it works - grow=10 1`] = `
83 | .c0 {
84 | -webkit-order: 0;
85 | -ms-flex-order: 0;
86 | order: 0;
87 | -webkit-flex-basis: auto;
88 | -ms-flex-preferred-size: auto;
89 | flex-basis: auto;
90 | -webkit-box-flex: 0;
91 | -webkit-flex-grow: 0;
92 | -ms-flex-positive: 0;
93 | flex-grow: 0;
94 | -webkit-flex-shrink: 1;
95 | -ms-flex-negative: 1;
96 | flex-shrink: 1;
97 | display: block;
98 | -webkit-box-flex: 10;
99 | -webkit-flex-grow: 10;
100 | -ms-flex-positive: 10;
101 | flex-grow: 10;
102 | }
103 |
104 |
107 | `;
108 |
109 | exports[`it works - noShrink 1`] = `
110 | .c0 {
111 | -webkit-order: 0;
112 | -ms-flex-order: 0;
113 | order: 0;
114 | -webkit-flex-basis: auto;
115 | -ms-flex-preferred-size: auto;
116 | flex-basis: auto;
117 | -webkit-box-flex: 0;
118 | -webkit-flex-grow: 0;
119 | -ms-flex-positive: 0;
120 | flex-grow: 0;
121 | -webkit-flex-shrink: 1;
122 | -ms-flex-negative: 1;
123 | flex-shrink: 1;
124 | display: block;
125 | -webkit-flex-shrink: 0;
126 | -ms-flex-negative: 0;
127 | flex-shrink: 0;
128 | }
129 |
130 |
133 | `;
134 |
135 | exports[`it works - order=-1 1`] = `
136 | .c0 {
137 | -webkit-order: 0;
138 | -ms-flex-order: 0;
139 | order: 0;
140 | -webkit-flex-basis: auto;
141 | -ms-flex-preferred-size: auto;
142 | flex-basis: auto;
143 | -webkit-box-flex: 0;
144 | -webkit-flex-grow: 0;
145 | -ms-flex-positive: 0;
146 | flex-grow: 0;
147 | -webkit-flex-shrink: 1;
148 | -ms-flex-negative: 1;
149 | flex-shrink: 1;
150 | display: block;
151 | -webkit-order: -1;
152 | -ms-flex-order: -1;
153 | order: -1;
154 | }
155 |
156 |
160 | `;
161 |
162 | exports[`it works - order=1 1`] = `
163 | .c0 {
164 | -webkit-order: 0;
165 | -ms-flex-order: 0;
166 | order: 0;
167 | -webkit-flex-basis: auto;
168 | -ms-flex-preferred-size: auto;
169 | flex-basis: auto;
170 | -webkit-box-flex: 0;
171 | -webkit-flex-grow: 0;
172 | -ms-flex-positive: 0;
173 | flex-grow: 0;
174 | -webkit-flex-shrink: 1;
175 | -ms-flex-negative: 1;
176 | flex-shrink: 1;
177 | display: block;
178 | -webkit-order: 1;
179 | -ms-flex-order: 1;
180 | order: 1;
181 | }
182 |
183 |
187 | `;
188 |
189 | exports[`it works - shrink=-10 1`] = `
190 | .c0 {
191 | -webkit-order: 0;
192 | -ms-flex-order: 0;
193 | order: 0;
194 | -webkit-flex-basis: auto;
195 | -ms-flex-preferred-size: auto;
196 | flex-basis: auto;
197 | -webkit-box-flex: 0;
198 | -webkit-flex-grow: 0;
199 | -ms-flex-positive: 0;
200 | flex-grow: 0;
201 | -webkit-flex-shrink: 1;
202 | -ms-flex-negative: 1;
203 | flex-shrink: 1;
204 | display: block;
205 | -webkit-flex-shrink: -10;
206 | -ms-flex-negative: -10;
207 | flex-shrink: -10;
208 | }
209 |
210 |
213 | `;
214 |
215 | exports[`it works - shrink=10 1`] = `
216 | .c0 {
217 | -webkit-order: 0;
218 | -ms-flex-order: 0;
219 | order: 0;
220 | -webkit-flex-basis: auto;
221 | -ms-flex-preferred-size: auto;
222 | flex-basis: auto;
223 | -webkit-box-flex: 0;
224 | -webkit-flex-grow: 0;
225 | -ms-flex-positive: 0;
226 | flex-grow: 0;
227 | -webkit-flex-shrink: 1;
228 | -ms-flex-negative: 1;
229 | flex-shrink: 1;
230 | display: block;
231 | -webkit-flex-shrink: 10;
232 | -ms-flex-negative: 10;
233 | flex-shrink: 10;
234 | }
235 |
236 |
239 | `;
240 |
241 | exports[`it works 1`] = `
242 | .c0 {
243 | -webkit-order: 0;
244 | -ms-flex-order: 0;
245 | order: 0;
246 | -webkit-flex-basis: auto;
247 | -ms-flex-preferred-size: auto;
248 | flex-basis: auto;
249 | -webkit-box-flex: 0;
250 | -webkit-flex-grow: 0;
251 | -ms-flex-positive: 0;
252 | flex-grow: 0;
253 | -webkit-flex-shrink: 1;
254 | -ms-flex-negative: 1;
255 | flex-shrink: 1;
256 | display: block;
257 | }
258 |
259 |
262 | `;
263 |
--------------------------------------------------------------------------------
/__tests__/container.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import renderer from 'react-test-renderer';
3 | import 'jest-styled-components';
4 | import Flex from '../src/flex';
5 |
6 | test('it works', () => {
7 | const tree = renderer.create(React.createElement(Flex)).toJSON();
8 | expect(tree).toMatchSnapshot();
9 | expect(tree).toHaveStyleRule('display', 'flex');
10 | expect(tree).toHaveStyleRule('flex-direction', 'row');
11 | expect(tree).toHaveStyleRule('flex-wrap', 'nowrap');
12 | expect(tree).toHaveStyleRule('justify-content', 'flex-start');
13 | expect(tree).toHaveStyleRule('align-content', 'stretch');
14 | });
15 |
16 | test('it works - inline', () => {
17 | const tree = renderer
18 | .create(React.createElement(Flex, { inline: true }))
19 | .toJSON();
20 | expect(tree).toMatchSnapshot();
21 | expect(tree).toHaveStyleRule('display', 'inline-flex');
22 | });
23 |
24 | test('it works - row', () => {
25 | const tree = renderer
26 | .create(React.createElement(Flex, { row: true }))
27 | .toJSON();
28 | expect(tree).toMatchSnapshot();
29 | expect(tree).toHaveStyleRule('flex-direction', 'row');
30 | });
31 |
32 | test('it works - rowReverse', () => {
33 | const tree = renderer
34 | .create(React.createElement(Flex, { rowReverse: true }))
35 | .toJSON();
36 | expect(tree).toMatchSnapshot();
37 | expect(tree).toHaveStyleRule('flex-direction', 'row-reverse');
38 | });
39 |
40 | test('it works - column', () => {
41 | const tree = renderer
42 | .create(React.createElement(Flex, { column: true }))
43 | .toJSON();
44 | expect(tree).toMatchSnapshot();
45 | expect(tree).toHaveStyleRule('flex-direction', 'column');
46 | });
47 |
48 | test('it works - columnReverse', () => {
49 | const tree = renderer
50 | .create(React.createElement(Flex, { columnReverse: true }))
51 | .toJSON();
52 | expect(tree).toMatchSnapshot();
53 | expect(tree).toHaveStyleRule('flex-direction', 'column-reverse');
54 | });
55 |
56 | test('it works - nowrap', () => {
57 | const tree = renderer
58 | .create(React.createElement(Flex, { nowrap: true }))
59 | .toJSON();
60 | expect(tree).toMatchSnapshot();
61 | expect(tree).toHaveStyleRule('flex-wrap', 'nowrap');
62 | });
63 |
64 | test('it works - wrap', () => {
65 | const tree = renderer
66 | .create(React.createElement(Flex, { wrap: true }))
67 | .toJSON();
68 | expect(tree).toMatchSnapshot();
69 | expect(tree).toHaveStyleRule('flex-wrap', 'wrap');
70 | });
71 |
72 | test('it works - wrapReverse', () => {
73 | const tree = renderer
74 | .create(React.createElement(Flex, { wrapReverse: true }))
75 | .toJSON();
76 | expect(tree).toMatchSnapshot();
77 | expect(tree).toHaveStyleRule('flex-wrap', 'wrap-reverse');
78 | });
79 |
80 | test('it works - justifyStart', () => {
81 | const tree = renderer
82 | .create(React.createElement(Flex, { justifyStart: true }))
83 | .toJSON();
84 | expect(tree).toMatchSnapshot();
85 | expect(tree).toHaveStyleRule('justify-content', 'flex-start');
86 | });
87 |
88 | test('it works - justifyEnd', () => {
89 | const tree = renderer
90 | .create(React.createElement(Flex, { justifyEnd: true }))
91 | .toJSON();
92 | expect(tree).toMatchSnapshot();
93 | expect(tree).toHaveStyleRule('justify-content', 'flex-end');
94 | });
95 |
96 | test('it works - justifyCenter', () => {
97 | const tree = renderer
98 | .create(React.createElement(Flex, { justifyCenter: true }))
99 | .toJSON();
100 | expect(tree).toMatchSnapshot();
101 | expect(tree).toHaveStyleRule('justify-content', 'center');
102 | });
103 |
104 | test('it works - justifyBetween', () => {
105 | const tree = renderer
106 | .create(React.createElement(Flex, { justifyBetween: true }))
107 | .toJSON();
108 | expect(tree).toMatchSnapshot();
109 | expect(tree).toHaveStyleRule('justify-content', 'space-between');
110 | });
111 |
112 | test('it works - justifyAround', () => {
113 | const tree = renderer
114 | .create(React.createElement(Flex, { justifyAround: true }))
115 | .toJSON();
116 | expect(tree).toMatchSnapshot();
117 | expect(tree).toHaveStyleRule('justify-content', 'space-around');
118 | });
119 |
120 | test('it works - contentStart', () => {
121 | const tree = renderer
122 | .create(React.createElement(Flex, { contentStart: true }))
123 | .toJSON();
124 | expect(tree).toMatchSnapshot();
125 | expect(tree).toHaveStyleRule('align-content', 'flex-start');
126 | });
127 |
128 | test('it works - contentEnd', () => {
129 | const tree = renderer
130 | .create(React.createElement(Flex, { contentEnd: true }))
131 | .toJSON();
132 | expect(tree).toMatchSnapshot();
133 | expect(tree).toHaveStyleRule('align-content', 'flex-end');
134 | });
135 |
136 | test('it works - contentCenter', () => {
137 | const tree = renderer
138 | .create(React.createElement(Flex, { contentCenter: true }))
139 | .toJSON();
140 | expect(tree).toMatchSnapshot();
141 | expect(tree).toHaveStyleRule('align-content', 'center');
142 | });
143 |
144 | test('it works - contentSpaceBetween', () => {
145 | const tree = renderer
146 | .create(React.createElement(Flex, { contentSpaceBetween: true }))
147 | .toJSON();
148 | expect(tree).toMatchSnapshot();
149 | expect(tree).toHaveStyleRule('align-content', 'space-between');
150 | });
151 |
152 | test('it works - contentSpaceAround', () => {
153 | const tree = renderer
154 | .create(React.createElement(Flex, { contentSpaceAround: true }))
155 | .toJSON();
156 | expect(tree).toMatchSnapshot();
157 | expect(tree).toHaveStyleRule('align-content', 'space-around');
158 | });
159 |
160 | test('it works - contentStretch', () => {
161 | const tree = renderer
162 | .create(React.createElement(Flex, { contentStretch: true }))
163 | .toJSON();
164 | expect(tree).toMatchSnapshot();
165 | expect(tree).toHaveStyleRule('align-content', 'stretch');
166 | });
167 |
168 | test('it works - alignStart', () => {
169 | const tree = renderer
170 | .create(React.createElement(Flex, { alignStart: true }))
171 | .toJSON();
172 | expect(tree).toMatchSnapshot();
173 | expect(tree).toHaveStyleRule('align-items', 'flex-start');
174 | });
175 |
176 | test('it works - alignEnd', () => {
177 | const tree = renderer
178 | .create(React.createElement(Flex, { alignEnd: true }))
179 | .toJSON();
180 | expect(tree).toMatchSnapshot();
181 | expect(tree).toHaveStyleRule('align-items', 'flex-end');
182 | });
183 |
184 | test('it works - alignCenter', () => {
185 | const tree = renderer
186 | .create(React.createElement(Flex, { alignCenter: true }))
187 | .toJSON();
188 | expect(tree).toMatchSnapshot();
189 | expect(tree).toHaveStyleRule('align-items', 'center');
190 | });
191 |
192 | test('it works - alignBaseline', () => {
193 | const tree = renderer
194 | .create(React.createElement(Flex, { alignBaseline: true }))
195 | .toJSON();
196 | expect(tree).toMatchSnapshot();
197 | expect(tree).toHaveStyleRule('align-items', 'baseline');
198 | });
199 |
200 | test('it works - alignStretch', () => {
201 | const tree = renderer
202 | .create(React.createElement(Flex, { alignStretch: true }))
203 | .toJSON();
204 | expect(tree).toMatchSnapshot();
205 | expect(tree).toHaveStyleRule('align-items', 'stretch');
206 | });
207 |
208 | test('it works - full', () => {
209 | const tree = renderer
210 | .create(React.createElement(Flex, { full: true }))
211 | .toJSON();
212 | expect(tree).toMatchSnapshot();
213 | expect(tree).toHaveStyleRule('width', '100%');
214 | expect(tree).toHaveStyleRule('height', '100%');
215 | expect(tree).toHaveStyleRule('flex-basis', '100%');
216 | });
217 |
218 | test('it works - center', () => {
219 | const tree = renderer
220 | .create(React.createElement(Flex, { center: true }))
221 | .toJSON();
222 | expect(tree).toMatchSnapshot();
223 | expect(tree).toHaveStyleRule('align-items', 'center');
224 | expect(tree).toHaveStyleRule('justify-content', 'center');
225 | });
226 |
--------------------------------------------------------------------------------
/__tests__/item.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import renderer from 'react-test-renderer';
3 | import 'jest-styled-components';
4 | import Item from '../src/item';
5 |
6 | test('it works', () => {
7 | const tree = renderer.create(React.createElement(Item)).toJSON();
8 | expect(tree).toMatchSnapshot();
9 | expect(tree).toHaveStyleRule('order', '0');
10 | expect(tree).toHaveStyleRule('flex-basis', 'auto');
11 | expect(tree).toHaveStyleRule('flex-grow', '0');
12 | expect(tree).toHaveStyleRule('flex-shrink', '1');
13 | });
14 |
15 | test('it works - order=1', () => {
16 | const tree = renderer
17 | .create(React.createElement(Item, { order: 1 }))
18 | .toJSON();
19 | expect(tree).toMatchSnapshot();
20 | expect(tree).toHaveStyleRule('order', '1');
21 | });
22 |
23 | test('it works - order=-1', () => {
24 | const tree = renderer
25 | .create(React.createElement(Item, { order: -1 }))
26 | .toJSON();
27 | expect(tree).toMatchSnapshot();
28 | expect(tree).toHaveStyleRule('order', '-1');
29 | });
30 |
31 | test('it works - basis=10', () => {
32 | const tree = renderer
33 | .create(React.createElement(Item, { basis: 10 }))
34 | .toJSON();
35 | expect(tree).toMatchSnapshot();
36 | expect(tree).toHaveStyleRule('flex-basis', '10');
37 | });
38 |
39 | test('it works - basis=-10', () => {
40 | const tree = renderer
41 | .create(React.createElement(Item, { basis: -10 }))
42 | .toJSON();
43 | expect(tree).toMatchSnapshot();
44 | expect(tree).toHaveStyleRule('flex-basis', '-10');
45 | });
46 |
47 | test('it works - grow=10', () => {
48 | const tree = renderer
49 | .create(React.createElement(Item, { grow: 10 }))
50 | .toJSON();
51 | expect(tree).toMatchSnapshot();
52 | expect(tree).toHaveStyleRule('flex-grow', '10');
53 | });
54 |
55 | test('it works - grow=-10', () => {
56 | const tree = renderer
57 | .create(React.createElement(Item, { grow: -10 }))
58 | .toJSON();
59 | expect(tree).toMatchSnapshot();
60 | expect(tree).toHaveStyleRule('flex-grow', '-10');
61 | });
62 |
63 | test('it works - shrink=10', () => {
64 | const tree = renderer
65 | .create(React.createElement(Item, { shrink: 10 }))
66 | .toJSON();
67 | expect(tree).toMatchSnapshot();
68 | expect(tree).toHaveStyleRule('flex-shrink', '10');
69 | });
70 |
71 | test('it works - noShrink', () => {
72 | const tree = renderer
73 | .create(React.createElement(Item, { noShrink: true }))
74 | .toJSON();
75 | expect(tree).toMatchSnapshot();
76 | expect(tree).toHaveStyleRule('flex-shrink', '0');
77 | });
78 |
79 | test('it works - shrink=-10', () => {
80 | const tree = renderer
81 | .create(React.createElement(Item, { shrink: -10 }))
82 | .toJSON();
83 | expect(tree).toMatchSnapshot();
84 | expect(tree).toHaveStyleRule('flex-shrink', '-10');
85 | });
86 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "styled-flex-component",
3 | "version": "3.0.5",
4 | "license": "MIT",
5 | "description": "Flex Element for not writing any more custom flex styles because fuck that",
6 | "keywords": [
7 | "flex",
8 | "flexbox",
9 | "styled",
10 | "react",
11 | "css",
12 | "css-in-js",
13 | "styled-components"
14 | ],
15 | "repository": "github:SaraVieira/styled-flex-component",
16 | "main": "dist/styled-flex-component.umd.js",
17 | "jsnext:main": "dist/styled-flex-component.es.js",
18 | "module": "dist/styled-flex-component.es.js",
19 | "entry": "src/index.js",
20 | "files": [
21 | "dist"
22 | ],
23 | "scripts": {
24 | "lint": "eslint . --cache --fix",
25 | "pretest": "NODE_ENV=test bup",
26 | "format": "prettier --write '**/*.{js,md,json}'",
27 | "posttest": "npm run format",
28 | "test:jest": "jest",
29 | "test:watch": "jest --watch",
30 | "test:coverage": "jest --coverage",
31 | "test": "npm run test:jest && npm run lint",
32 | "build": "NODE_ENV=development bup",
33 | "prepublish": "NODE_ENV=production bup"
34 | },
35 | "dependencies": {
36 | "styled-is": "^1.3.0"
37 | },
38 | "peerDependencies": {
39 | "react": "^16.13.1",
40 | "react-dom": "^16.13.1",
41 | "styled-components": "^5.1.0"
42 | },
43 | "devDependencies": {
44 | "babel-plugin-styled-components": "^1.10.7",
45 | "babel-preset-env": "^1.7.0",
46 | "bup": "^4.1.6",
47 | "eslint": "^5.12.1",
48 | "eslint-config-airbnb": "^17.1.0",
49 | "eslint-plugin-import": "^2.15.0",
50 | "eslint-plugin-jest": "^22.1.3",
51 | "eslint-plugin-jsx-a11y": "^6.1.2",
52 | "eslint-plugin-react": "^7.12.4",
53 | "husky": "^4.2.5",
54 | "jest": "^26.0.1",
55 | "jest-styled-components": "^7.0.2",
56 | "lint-staged": "^10.2.11",
57 | "prettier": "^2.0.5",
58 | "react-test-renderer": "^16.13.1"
59 | },
60 | "lint-staged": {
61 | "**.{js,md}": [
62 | "eslint --fix",
63 | "git add"
64 | ]
65 | },
66 | "husky": {
67 | "hooks": {
68 | "pre-commit": "lint-staged"
69 | }
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/src/flex.js:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line import/no-unresolved
2 | import styled from 'styled-components';
3 | import is from 'styled-is';
4 |
5 | export default styled.div.withConfig({
6 | shouldForwardProp: (prop) => ['children'].includes(prop),
7 | })`
8 | display: flex;
9 | flex-direction: row;
10 | flex-wrap: nowrap;
11 | justify-content: flex-start;
12 | align-content: stretch;
13 |
14 | /********************************* display *********************************/
15 | /***************** http://cssreference.io/property/display *****************/
16 |
17 | ${is('inline')`
18 | display: inline-flex;
19 | `};
20 |
21 | /******************************** direction ********************************/
22 | /************** http://cssreference.io/property/flex-direction **************/
23 |
24 | ${is('row')`
25 | flex-direction: row; /* default */
26 | `};
27 |
28 | ${is('rowReverse')`
29 | flex-direction: row-reverse;
30 | `};
31 |
32 | ${is('column')`
33 | flex-direction: column;
34 | `};
35 |
36 | ${is('columnReverse')`
37 | flex-direction: column-reverse;
38 | `};
39 |
40 | /*********************************** wrap ***********************************/
41 | /**************** http://cssreference.io/property/flex-wrap ****************/
42 |
43 | ${is('nowrap')`
44 | flex-wrap: nowrap; /* default */
45 | `};
46 |
47 | ${is('wrap')`
48 | flex-wrap: wrap;
49 | `};
50 |
51 | ${is('wrapReverse')`
52 | flex-wrap: wrap-reverse;
53 | `};
54 |
55 | /***************************** justify-content *****************************/
56 | /************* http://cssreference.io/property/justify-content *************/
57 |
58 | ${is('justifyStart')`
59 | justify-content: flex-start; /* default */
60 | `};
61 |
62 | ${is('justifyEnd')`
63 | justify-content: flex-end;
64 | `};
65 |
66 | ${is('justifyCenter')`
67 | justify-content: center;
68 | `};
69 |
70 | ${is('justifyBetween')`
71 | justify-content: space-between;
72 | `};
73 |
74 | ${is('justifyAround')`
75 | justify-content: space-around;
76 | `};
77 |
78 | /****************************** align-content ******************************/
79 | /************** http://cssreference.io/property/align-content **************/
80 |
81 | ${is('contentStart')`
82 | align-content: flex-start;
83 | `};
84 |
85 | ${is('contentEnd')`
86 | align-content: flex-end;
87 | `};
88 |
89 | ${is('contentCenter')`
90 | align-content: center;
91 | `};
92 |
93 | ${is('contentSpaceBetween')`
94 | align-content: space-between;
95 | `};
96 |
97 | ${is('contentSpaceAround')`
98 | align-content: space-around;
99 | `};
100 |
101 | ${is('contentStretch')`
102 | align-content: stretch; /* default */
103 | `};
104 |
105 | /******************************* align-items *******************************/
106 | /*************** http://cssreference.io/property/align-items ***************/
107 |
108 | ${is('alignStart')`
109 | align-items: flex-start;
110 | `};
111 |
112 | ${is('alignEnd')`
113 | align-items: flex-end;
114 | `};
115 |
116 | ${is('alignCenter')`
117 | align-items: center;
118 | `};
119 |
120 | ${is('alignBaseline')`
121 | align-items: baseline;
122 | `};
123 |
124 | ${is('alignStretch')`
125 | align-items: stretch;
126 | `};
127 |
128 | /******************************** utilities ********************************/
129 |
130 | ${is('full')`
131 | width: 100%;
132 | height: 100%;
133 | flex-basis: 100%;
134 | `};
135 |
136 | ${is('center')`
137 | align-items: center;
138 | justify-content: center;
139 | `};
140 | `;
141 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './flex';
2 | export { default as FlexItem } from './item';
3 |
--------------------------------------------------------------------------------
/src/item.js:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line import/no-unresolved
2 | import styled from 'styled-components';
3 | import is from 'styled-is';
4 |
5 | export default styled.div.withConfig({
6 | shouldForwardProp: (prop) => ['children'].includes(prop),
7 | })`
8 | order: 0;
9 | flex-basis: auto;
10 | flex-grow: 0;
11 | flex-shrink: 1;
12 | display: block;
13 |
14 | ${is('inlineBlock')`
15 | display: inline-block;
16 | `};
17 |
18 | ${is('inlineFlex')`
19 | display: inline-flex;
20 | `};
21 |
22 | ${is('flex')`
23 | display: flex;
24 | `};
25 |
26 | /********************************** order **********************************/
27 | /****************** http://cssreference.io/property/order ******************/
28 |
29 | ${is('order')`
30 | order: ${(props) => props.order};
31 | `};
32 |
33 | /******************************** flex-basis ********************************/
34 | /**************** http://cssreference.io/property/flex-basis ****************/
35 |
36 | ${is('basis')`
37 | flex-basis: ${(props) => props.basis};
38 | `};
39 |
40 | /******************************** flex-grow ********************************/
41 | /**************** http://cssreference.io/property/flex-grow ****************/
42 |
43 | ${is('grow')`
44 | flex-grow: ${(props) => props.grow};
45 | `};
46 |
47 | /******************************* flex-shrink *******************************/
48 | /*************** http://cssreference.io/property/flex-shrink ***************/
49 |
50 | ${is('shrink')`
51 | flex-shrink: ${(props) => props.shrink};
52 | `};
53 |
54 | ${is('noShrink')`
55 | flex-shrink: 0;
56 | `};
57 | `;
58 |
--------------------------------------------------------------------------------