├── .gitignore ├── .npmignore ├── .travis.yml ├── CHANGELOG.md ├── Dockerfile ├── LICENSE.md ├── README.md ├── babel.config.js ├── emotion.js ├── logo.png ├── package-lock.json ├── package.json ├── src └── index.js └── tests ├── __snapshots__ ├── emotion.js.snap └── index.js.snap ├── emotion.js └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | coverage 3 | .nyc_output 4 | node_modules 5 | site 6 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src 2 | docs 3 | coverage 4 | .nyc_output 5 | test.js* 6 | .babelrc 7 | .travis.yml 8 | tests 9 | styled-space 10 | site 11 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 10 4 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## v6.1.0 2019-08-06 4 | 5 | - Update to Styled System v5 6 | 7 | ## v6.0.0 2019-03-23 8 | 9 | - Official release with Styled Components v4 10 | 11 | ## v6.0.0-4 2018-09-25 12 | 13 | - Update to Babel 7 14 | 15 | ## v6.0.0-3 2018-09-14 16 | 17 | - Update dependencies 18 | 19 | ## v6.0.0-2 2018-09-12 20 | 21 | - Adjust build scripts 22 | 23 | ## v6.0.0-1 2018-09-12 24 | 25 | - Simplifies code base to be inline with Rebass v3 and for use with styled-components v4 26 | 27 | ## v6.0.0-0 2018-09-02 28 | 29 | - Rename package to `@rebass/grid` 30 | 31 | ## v5.0.0 - 2018-07-15 32 | 33 | - Updated to system-components v3 and styled-system v3 34 | - Removed legacy props (`wrap`, `align`, `justify`, `w`) 35 | - Cleaned up code base 36 | 37 | ## v4.2.0 - 2018-06-30 38 | 39 | - Use system-components 40 | 41 | ## v4.1.0 - 2018-04-17 42 | 43 | - support `alignSelf` property on Box 44 | 45 | ## v4.0.0 - 2018-04-13 46 | 47 | - added `styled-space` package 48 | - remove `styled-components` as a dependency and make it a peer dependency. 49 | 50 | ## v3.2.0 - 2018-02-17 51 | 52 | - change props of Flex: 53 | - `align` -> `alignItems` 54 | - `justify` -> `justifyContent` 55 | - `wrap` -> `flexWrap` 56 | 57 | - update to latest `styled-system` 58 | 59 | ## v3.1.1 - 2018-02-16 60 | 61 | - Fix order prop 62 | 63 | ## v3.1.0 - 2018-02-13 64 | 65 | - use class for `div` 66 | - use `is` prop 67 | - change props of Flex: 68 | - `direction` -> `flexDirection` 69 | 70 | - make `div` handle `innerRef` prop 71 | 72 | ## v3.0.0 - 2018-02-04 73 | 74 | - remove extensions: φ, ga, gb, A, B, Golden, Quarter, Third, 75 | - clean up React warnings on props 76 | - edit default `theme` 77 | - remove `Grid` 78 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:10-alpine 2 | 3 | WORKDIR /usr/src 4 | 5 | COPY package.json . 6 | COPY package-lock.json . 7 | RUN npm i 8 | 9 | COPY . . 10 | RUN npm run build && mv site /public 11 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | 2 | # The MIT License (MIT) 3 | Copyright (c) 2017 Brent Jackson 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 | 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | # Rebass Grid 5 | 6 | Responsive React grid system built with 7 | [styled-system][], with support for 8 | [styled-components][] and 9 | [emotion][] (previously called `grid-styled`) 10 | 11 | https://rebassjs.org/grid 12 | 13 | [![Build Status][badge]][travis] 14 | [![Downloads][downloads-badge]][npm] 15 | [![Version][version-badge]][npm] 16 | 17 | [badge]: https://flat.badgen.net/travis/rebassjs/grid/master 18 | [travis]: https://travis-ci.org/rebassjs/grid 19 | 20 | [downloads-badge]: https://flat.badgen.net/npm/dw/@rebass/grid 21 | [version-badge]: https://flat.badgen.net/npm/v/@rebass/grid 22 | [npm]: https://npmjs.com/package/@rebass/grid 23 | 24 | 25 | ## Getting Started 26 | 27 | ```sh 28 | npm i @rebass/grid 29 | ``` 30 | 31 | ```jsx 32 | import React from 'react' 33 | import { Flex, Box } from '@rebass/grid' 34 | 35 | const App = () => ( 36 | 37 | 38 | Half width 39 | 40 | 41 | Half width 42 | 43 | 44 | ) 45 | ``` 46 | 47 | ### Emotion 48 | 49 | *Or* for emotion , import `@rebass/grid/emotion` (uses v10 `@emotion/styled`) 50 | 51 | ```js 52 | import { Flex, Box } from '@rebass/grid/emotion' 53 | ``` 54 | 55 | ## Box 56 | 57 | The Box component handles width, margin and padding. 58 | 59 | ```jsx 60 | // Different widths at different breakpoints 61 | 69 | 70 | // Fixed pixel width 71 | 72 | 73 | // CSS value width 74 | 75 | ``` 76 | 77 | ```jsx 78 | // Padding 79 | 80 | 81 | // Padding top 82 | 83 | 84 | // Padding bottom 85 | 86 | 87 | // Padding left 88 | 89 | 90 | // Padding right 91 | 92 | 93 | // x-axis padding (left and right) 94 | 95 | 96 | // y-axis padding (top and bottom) 97 | 98 | ``` 99 | 100 | ```jsx 101 | // Margin 102 | 103 | 104 | // Margin top 105 | 106 | 107 | // Margin bottom 108 | 109 | 110 | // Margin left 111 | 112 | 113 | // Margin right 114 | 115 | 116 | // x-axis margin (left and right) 117 | 118 | 119 | // y-axis margin (top and bottom) 120 | 121 | ``` 122 | 123 | ```jsx 124 | // margin auto 125 | 126 | 127 | // negative margins 128 | 129 | ``` 130 | 131 | ## Props 132 | 133 | All @rebass/grid components use [styled-system][] for style props, 134 | which pick up values from a [theme](#theming) and allow for responsive styles to be passed as [array values](#responsive-styles). 135 | 136 | ### `width` (number|string|array) 137 | 138 | Sets width, where numbers `0-1` are percentage values, larger numbers are pixel values, and strings are raw CSS values with units. 139 | Pass an array to set different widths at different breakpoints for 140 | [responsive styles](#responsive-styles). 141 | 142 | ### Margin and Padding Props 143 | 144 | Both margin and padding props accept numbers, strings, and arrays as values. 145 | Using a number from `0-8` (i.e. an index of `theme.space`) will reference a step on the spacing scale. 146 | Larger numbers are converted to pixel values. 147 | Negative Numbers can be used to set negative margins and compensate for grid gutters. 148 | Strings are passed directly for other valid CSS values. 149 | 150 | Use array values to set different margin or padding values per breakpoint for 151 | [responsive styles](#responsive-styles). 152 | 153 | Margin and padding props follow a shorthand syntax for specifying direction. 154 | 155 | - `m`: margin 156 | - `mt`: margin-top 157 | - `mr`: margin-right 158 | - `mb`: margin-bottom 159 | - `ml`: margin-left 160 | - `mx`: margin-left and margin-right 161 | - `my`: margin-top and margin-bottom 162 | - `p`: padding 163 | - `pt`: padding-top 164 | - `pr`: padding-right 165 | - `pb`: padding-bottom 166 | - `pl`: padding-left 167 | - `px`: padding-left and padding-right 168 | - `py`: padding-top and padding-bottom 169 | 170 | ### `flex` (string|array) 171 | 172 | Sets the `flex` property. 173 | 174 | ```jsx 175 | 176 | ``` 177 | 178 | ### `order` (number|string|array) 179 | 180 | Sets the `order` property. 181 | 182 | ```jsx 183 | 184 | ``` 185 | 186 | ### `alignSelf` (string|array) 187 | 188 | Sets the `align-self` property. 189 | 190 | ```jsx 191 | 192 | ``` 193 | 194 | ### `css` (string|object) 195 | 196 | Pass styles to styled-components or emotion. 197 | This is useful as an escape hatch for one-off styles 198 | or as a way to extend Rebass Grid components. 199 | 200 | ```jsx 201 | 207 | ``` 208 | 209 | ## `Flex` 210 | 211 | The Flex component extends the Box component and sets display flex. 212 | 213 | ```jsx 214 | import React from 'react' 215 | import { Flex, Box } from '@rebass/grid' 216 | 217 | const App = props => 218 | 219 | Flex 220 | Box 221 | 222 | ``` 223 | 224 | In addition to the Box component props, 225 | Flex also includes the following: 226 | 227 | - `alignItems` (string|array) sets `align-items` 228 | - `justifyContent` (string|array) sets `justify-content` 229 | - `flexDirection` (string|array) sets `flex-direction` 230 | - `flexWrap` (string|array) sets `flex-wrap: wrap` 231 | 232 | 233 | ## Responsive Styles 234 | 235 | Rebass Grid props accept arrays as values for mobile-first responsive styles, 236 | where the first value is for all breakpoints, then each value after is for a min-width 237 | media query from that breakpoint and up. 238 | 239 | ```jsx 240 | // 100% below the smallest breakpoint, 241 | // 50% from the next breakpoint and up, 242 | // and 25% from the next breakpoint and up 243 | 244 | 245 | // responsive margin 246 | 247 | 248 | // responsive padding 249 | 250 | ``` 251 | 252 | ## Extending Components 253 | 254 | Component can be extended with React or using styled-components or emotion. 255 | 256 | ### InlineFlex 257 | 258 | ```jsx 259 | import React from 'react' 260 | import { Flex } from '@rebass/grid' 261 | 262 | const InlineFlex = props => 263 | 269 | ``` 270 | 271 | ```jsx 272 | // styled-components example 273 | import styled from 'styled-components' 274 | import { Flex } from '@rebass/grid' 275 | 276 | const InlineFlex = styled(Flex)` 277 | display: inline-flex; 278 | ` 279 | ``` 280 | 281 | ### Max-Width Container 282 | 283 | ```jsx 284 | import React from 'react' 285 | import { Box } from '@rebass/grid' 286 | 287 | const Container = props => 288 | 295 | ``` 296 | 297 | ```js 298 | // styled-components example 299 | import styled from 'styled-components' 300 | import { Box } from '@rebass/grid' 301 | 302 | const Container = styled(Box)` 303 | max-width: 1024px; 304 | ` 305 | Container.defaultProps = { 306 | mx: 'auto' 307 | } 308 | ``` 309 | 310 | 311 | ### Auto Grid 312 | 313 | This example creates components for a grid with set gutters where the columns expand to fill in the space. 314 | 315 | ```jsx 316 | // Example 317 | import React from 'react' 318 | import { Flex, Box } from '@rebass/grid' 319 | 320 | const Row = props => ( 321 | 325 | ) 326 | 327 | const Column = props => ( 328 | 333 | ) 334 | ``` 335 | 336 | ## Changing the HTML element 337 | 338 | Rebass Grid is intended for use with styled-components v4. 339 | To change the underlying HTML element, use the styled-components `as` prop. 340 | 341 | ```jsx 342 | 343 | ``` 344 | 345 | *Note:* Previous versions of grid-styled supported an `is` prop, which has been deprecated in favor of the styled-components `as` prop. 346 | 347 | ## Theming 348 | 349 | Rebass Grid uses smart defaults, but to customize the values, 350 | use the `ThemeProvider` component from styled-components or emotion. 351 | 352 | 353 | ```jsx 354 | import React from 'react' 355 | import { ThemeProvider } from 'styled-components' 356 | import { Box } from '@rebass/grid' 357 | 358 | const theme = { 359 | space: [ 0, 6, 12, 18, 24 ], 360 | breakpoints: [ '32em', '48em', '64em' ] 361 | } 362 | 363 | const App = () => ( 364 | 365 |
366 | Box with custom spacing scale and breakpoints 367 |
368 | 369 | ) 370 | ``` 371 | 372 | ### Breakpoints 373 | 374 | The Flex and Box components use a mobile-first responsive approach, 375 | where any value set works from that breakpoint and wider. 376 | Breakpoints are hard-coded to the following min-widths: `40em`, `52em`, `64em`. 377 | 378 | To customize, provide an array of string values that will be converted to media queries. 379 | 380 | ### Spacing Scale 381 | 382 | Rebass Grid components' margin and padding props use a 4 step spacing scale to help 383 | keep things aligned and keep layouts consistent. 384 | 385 | The default scale is based on an 8px/powers-of-two grid: `[ 0, 4, 8, 16, 32, 64, 128, 256, 512 ]`, 386 | which helps keep spacing consistent and elements aligned even when nesting components. 387 | 388 | ## Styled Space 389 | 390 | Rebass Grid also works with the optional [Rebass Space][] package. 391 | 392 | ```jsx 393 | import React from 'react' 394 | import { Flex, Box } from '@rebass/grid' 395 | import Space from '@rebass/space' 396 | 397 | const App = () => ( 398 | 399 | 400 |

Hello

401 | Beep 402 | 403 | 404 | ) 405 | ``` 406 | 407 | ## Related 408 | 409 | - [Rebass Space][] 410 | - [styled-system][] 411 | - [@rebass/components][] 412 | - [Rebass](https://rebassjs.org/) 413 | - [styled-components][] 414 | - [emotion][] 415 | 416 | [rebass space]: https://github.com/rebassjs/space 417 | [styled-components]: https://github.com/styled-components/styled-components 418 | [styled-system]: https://github.com/jxnblk/styled-system 419 | [emotion]: https://github.com/emotion-js/emotion 420 | [is-prop]: https://github.com/jxnblk/styled-system/tree/master/system-components#changing-the-underlying-html-element 421 | [@rebass/components]: https://github.com/rebassjs/components 422 | 423 | [MIT License](LICENSE.md) 424 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@babel/env', 4 | '@babel/react' 5 | ], 6 | plugins: [ 7 | 'babel-plugin-styled-components', 8 | ], 9 | env: { 10 | emotion: { 11 | plugins: [ 12 | [ 13 | "transform-rename-import", 14 | { 15 | "original": "^styled-components$", 16 | "replacement": "@emotion/styled" 17 | } 18 | ] 19 | ] 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /emotion.js: -------------------------------------------------------------------------------- 1 | 2 | module.exports = require('./dist/emotion') -------------------------------------------------------------------------------- /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rebassjs/grid/e57f673cf4e21706cdb8d277453d4809b8b19a83/logo.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@rebass/grid", 3 | "version": "6.1.0", 4 | "description": "Responsive React grid system built with styled-system, with support for styled-components and emotion", 5 | "main": "dist/index.js", 6 | "scripts": { 7 | "prepare": "rm -rf dist && babel src -d dist && npm run emotion", 8 | "test": "jest", 9 | "emotion": "NODE_ENV=emotion babel src -d dist/emotion", 10 | "logo": "npx repng docs/logo.js -w 768 -h 768 -d docs -f logo.png" 11 | }, 12 | "keywords": [ 13 | "react", 14 | "styled-components", 15 | "styled-system", 16 | "grid", 17 | "flexbox", 18 | "layout", 19 | "css" 20 | ], 21 | "author": "Brent Jackson", 22 | "license": "MIT", 23 | "dependencies": { 24 | "@styled-system/prop-types": "^5.0.18", 25 | "styled-system": "^5.0.18" 26 | }, 27 | "devDependencies": { 28 | "@babel/cli": "^7.5.5", 29 | "@babel/core": "^7.5.5", 30 | "@babel/preset-env": "^7.5.5", 31 | "@babel/preset-react": "^7.0.0", 32 | "@emotion/core": "^10.0.15", 33 | "@emotion/styled": "^10.0.15", 34 | "babel-jest": "^24.8.0", 35 | "babel-plugin-styled-components": "^1.10.6", 36 | "babel-plugin-transform-rename-import": "^2.3.0", 37 | "jest": "^24.8.0", 38 | "jest-emotion": "^10.0.14", 39 | "jest-styled-components": "^6.3.3", 40 | "react": "^16.8.6", 41 | "react-dom": "^16.8.6", 42 | "react-test-renderer": "^16.8.6", 43 | "styled-components": "^4.3.2" 44 | }, 45 | "jest": { 46 | "roots": [ 47 | "/tests/" 48 | ], 49 | "testMatch": [ 50 | "**/tests/**/*.js" 51 | ] 52 | }, 53 | "directories": { 54 | "doc": "docs", 55 | "test": "tests" 56 | }, 57 | "repository": { 58 | "type": "git", 59 | "url": "git+https://github.com/rebassjs/grid.git" 60 | }, 61 | "bugs": { 62 | "url": "https://github.com/rebassjs/grid/issues" 63 | }, 64 | "homepage": "https://github.com/rebassjs/grid#readme" 65 | } 66 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import { 3 | space, 4 | color, 5 | layout, 6 | flexbox, 7 | typography, 8 | compose 9 | } from 'styled-system' 10 | import propTypes from '@styled-system/prop-types' 11 | 12 | const boxProps = compose( 13 | space, 14 | color, 15 | layout, 16 | typography, 17 | flexbox, 18 | ) 19 | export const Box = styled('div')({ 20 | boxSizing: 'border-box' 21 | }, 22 | boxProps, 23 | ) 24 | 25 | Box.displayName = 'Box' 26 | 27 | Box.propTypes = { 28 | ...propTypes.space, 29 | ...propTypes.color, 30 | ...propTypes.layout, 31 | ...propTypes.typography, 32 | ...propTypes.flexbox, 33 | } 34 | 35 | export const Flex = styled(Box)({ 36 | display: 'flex' 37 | }) 38 | 39 | Flex.displayName = 'Flex' 40 | -------------------------------------------------------------------------------- /tests/__snapshots__/emotion.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Box renders 1`] = ` 4 | .emotion-0 { 5 | box-sizing: border-box; 6 | margin: 8px; 7 | padding-left: 16px; 8 | padding-right: 16px; 9 | } 10 | 11 |
14 | `; 15 | 16 | exports[`Box renders with props 1`] = ` 17 | .emotion-0 { 18 | box-sizing: border-box; 19 | margin: 4px; 20 | padding-left: 4px; 21 | padding-right: 4px; 22 | width: 100%; 23 | -webkit-flex: 1 1 auto; 24 | -ms-flex: 1 1 auto; 25 | flex: 1 1 auto; 26 | -webkit-align-self: flex-start; 27 | -ms-flex-item-align: start; 28 | align-self: flex-start; 29 | } 30 | 31 | @media screen and (min-width:40em) { 32 | .emotion-0 { 33 | margin: 8px; 34 | padding-left: 8px; 35 | padding-right: 8px; 36 | } 37 | } 38 | 39 |
43 | `; 44 | 45 | exports[`Flex renders 1`] = ` 46 | .emotion-0 { 47 | box-sizing: border-box; 48 | display: -webkit-box; 49 | display: -webkit-flex; 50 | display: -ms-flexbox; 51 | display: flex; 52 | } 53 | 54 |
57 | `; 58 | 59 | exports[`Flex renders with flexDirection prop 1`] = ` 60 | .emotion-0 { 61 | box-sizing: border-box; 62 | -webkit-flex-direction: column; 63 | -ms-flex-direction: column; 64 | flex-direction: column; 65 | display: -webkit-box; 66 | display: -webkit-flex; 67 | display: -ms-flexbox; 68 | display: flex; 69 | } 70 | 71 |
74 | `; 75 | 76 | exports[`Flex renders with props 1`] = ` 77 | .emotion-0 { 78 | box-sizing: border-box; 79 | -webkit-flex-wrap: wrap; 80 | -ms-flex-wrap: wrap; 81 | flex-wrap: wrap; 82 | -webkit-flex-direction: column; 83 | -ms-flex-direction: column; 84 | flex-direction: column; 85 | -webkit-align-items: center; 86 | -webkit-box-align: center; 87 | -ms-flex-align: center; 88 | align-items: center; 89 | -webkit-box-pack: justify; 90 | -webkit-justify-content: space-between; 91 | -ms-flex-pack: justify; 92 | justify-content: space-between; 93 | display: -webkit-box; 94 | display: -webkit-flex; 95 | display: -ms-flexbox; 96 | display: flex; 97 | } 98 | 99 |
102 | `; 103 | 104 | exports[`Flex renders with responsive props 1`] = ` 105 | .emotion-0 { 106 | box-sizing: border-box; 107 | -webkit-flex-wrap: wrap; 108 | -ms-flex-wrap: wrap; 109 | flex-wrap: wrap; 110 | -webkit-flex-direction: column; 111 | -ms-flex-direction: column; 112 | flex-direction: column; 113 | -webkit-align-items: stretch; 114 | -webkit-box-align: stretch; 115 | -ms-flex-align: stretch; 116 | align-items: stretch; 117 | -webkit-box-pack: justify; 118 | -webkit-justify-content: space-between; 119 | -ms-flex-pack: justify; 120 | justify-content: space-between; 121 | display: -webkit-box; 122 | display: -webkit-flex; 123 | display: -ms-flexbox; 124 | display: flex; 125 | } 126 | 127 | @media screen and (min-width:40em) { 128 | .emotion-0 { 129 | -webkit-flex-wrap: nowrap; 130 | -ms-flex-wrap: nowrap; 131 | flex-wrap: nowrap; 132 | -webkit-flex-direction: row; 133 | -ms-flex-direction: row; 134 | flex-direction: row; 135 | -webkit-align-items: center; 136 | -webkit-box-align: center; 137 | -ms-flex-align: center; 138 | align-items: center; 139 | -webkit-box-pack: center; 140 | -webkit-justify-content: center; 141 | -ms-flex-pack: center; 142 | justify-content: center; 143 | } 144 | } 145 | 146 |
149 | `; 150 | -------------------------------------------------------------------------------- /tests/__snapshots__/index.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Box accepts a css prop 1`] = ` 4 | .c0 { 5 | box-sizing: border-box; 6 | outline: 4px solid red; 7 | } 8 | 9 |
12 | `; 13 | 14 | exports[`Box renders 1`] = ` 15 | .c0 { 16 | box-sizing: border-box; 17 | margin: 8px; 18 | padding-left: 16px; 19 | padding-right: 16px; 20 | } 21 | 22 |
25 | `; 26 | 27 | exports[`Box renders with props 1`] = ` 28 | .c0 { 29 | box-sizing: border-box; 30 | margin: 4px; 31 | padding-left: 4px; 32 | padding-right: 4px; 33 | width: 100%; 34 | -webkit-flex: 1 1 auto; 35 | -ms-flex: 1 1 auto; 36 | flex: 1 1 auto; 37 | -webkit-align-self: flex-start; 38 | -ms-flex-item-align: start; 39 | align-self: flex-start; 40 | } 41 | 42 | @media screen and (min-width:40em) { 43 | .c0 { 44 | margin: 8px; 45 | padding-left: 8px; 46 | padding-right: 8px; 47 | } 48 | } 49 | 50 |
54 | `; 55 | 56 | exports[`Flex renders 1`] = ` 57 | .c0 { 58 | box-sizing: border-box; 59 | display: -webkit-box; 60 | display: -webkit-flex; 61 | display: -ms-flexbox; 62 | display: flex; 63 | } 64 | 65 |
68 | `; 69 | 70 | exports[`Flex renders with flexDirection prop 1`] = ` 71 | .c0 { 72 | box-sizing: border-box; 73 | -webkit-flex-direction: column; 74 | -ms-flex-direction: column; 75 | flex-direction: column; 76 | display: -webkit-box; 77 | display: -webkit-flex; 78 | display: -ms-flexbox; 79 | display: flex; 80 | } 81 | 82 |
85 | `; 86 | 87 | exports[`Flex renders with props 1`] = ` 88 | .c0 { 89 | box-sizing: border-box; 90 | -webkit-flex-wrap: wrap; 91 | -ms-flex-wrap: wrap; 92 | flex-wrap: wrap; 93 | -webkit-flex-direction: column; 94 | -ms-flex-direction: column; 95 | flex-direction: column; 96 | -webkit-align-items: center; 97 | -webkit-box-align: center; 98 | -ms-flex-align: center; 99 | align-items: center; 100 | -webkit-box-pack: justify; 101 | -webkit-justify-content: space-between; 102 | -ms-flex-pack: justify; 103 | justify-content: space-between; 104 | display: -webkit-box; 105 | display: -webkit-flex; 106 | display: -ms-flexbox; 107 | display: flex; 108 | } 109 | 110 |
113 | `; 114 | 115 | exports[`Flex renders with responsive props 1`] = ` 116 | .c0 { 117 | box-sizing: border-box; 118 | -webkit-flex-wrap: wrap; 119 | -ms-flex-wrap: wrap; 120 | flex-wrap: wrap; 121 | -webkit-flex-direction: column; 122 | -ms-flex-direction: column; 123 | flex-direction: column; 124 | -webkit-align-items: stretch; 125 | -webkit-box-align: stretch; 126 | -ms-flex-align: stretch; 127 | align-items: stretch; 128 | -webkit-box-pack: justify; 129 | -webkit-justify-content: space-between; 130 | -ms-flex-pack: justify; 131 | justify-content: space-between; 132 | display: -webkit-box; 133 | display: -webkit-flex; 134 | display: -ms-flexbox; 135 | display: flex; 136 | } 137 | 138 | @media screen and (min-width:40em) { 139 | .c0 { 140 | -webkit-flex-wrap: nowrap; 141 | -ms-flex-wrap: nowrap; 142 | flex-wrap: nowrap; 143 | -webkit-flex-direction: row; 144 | -ms-flex-direction: row; 145 | flex-direction: row; 146 | -webkit-align-items: center; 147 | -webkit-box-align: center; 148 | -ms-flex-align: center; 149 | align-items: center; 150 | -webkit-box-pack: center; 151 | -webkit-justify-content: center; 152 | -ms-flex-pack: center; 153 | justify-content: center; 154 | } 155 | } 156 | 157 |
160 | `; 161 | -------------------------------------------------------------------------------- /tests/emotion.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { create as render } from 'react-test-renderer' 3 | import serializer from 'jest-emotion' 4 | import { Box, Flex } from '../dist/emotion' 5 | 6 | expect.addSnapshotSerializer(serializer) 7 | 8 | const renderJSON = el => render(el).toJSON() 9 | 10 | // Box 11 | test('Box renders', () => { 12 | const json = renderJSON() 13 | expect(json).toMatchSnapshot() 14 | }) 15 | 16 | test('Box renders with props', () => { 17 | const json = renderJSON() 24 | expect(json).toMatchSnapshot() 25 | }) 26 | 27 | // Flex 28 | test('Flex renders', () => { 29 | const json = renderJSON() 30 | expect(json).toMatchSnapshot() 31 | }) 32 | 33 | test('Flex renders with props', () => { 34 | const json = renderJSON( 35 | 41 | ) 42 | expect(json).toMatchSnapshot() 43 | }) 44 | 45 | test('Flex renders with flexDirection prop', () => { 46 | const json = renderJSON( 47 | 50 | ) 51 | expect(json).toMatchSnapshot() 52 | }) 53 | 54 | test('Flex renders with responsive props', () => { 55 | const json = renderJSON( 56 | 62 | ) 63 | expect(json).toMatchSnapshot() 64 | }) 65 | -------------------------------------------------------------------------------- /tests/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { create as render } from 'react-test-renderer' 3 | import { Box, Flex } from '../src' 4 | import 'jest-styled-components' 5 | 6 | const renderJSON = el => render(el).toJSON() 7 | 8 | // Box 9 | test('Box renders', () => { 10 | const json = renderJSON() 11 | expect(json).toMatchSnapshot() 12 | }) 13 | 14 | test('Box renders with props', () => { 15 | const json = renderJSON() 22 | expect(json).toMatchSnapshot() 23 | expect(json).toHaveStyleRule('width', '100%') 24 | expect(json).toHaveStyleRule('flex', '1 1 auto') 25 | expect(json).toHaveStyleRule('align-self', 'flex-start') 26 | expect(json).toHaveStyleRule('margin', '4px') 27 | }) 28 | 29 | // Flex 30 | test('Flex renders', () => { 31 | const json = renderJSON() 32 | expect(json).toMatchSnapshot() 33 | expect(json).toHaveStyleRule('display', 'flex') 34 | }) 35 | 36 | test('Flex renders with props', () => { 37 | const json = renderJSON( 38 | 44 | ) 45 | expect(json).toMatchSnapshot() 46 | expect(json).toHaveStyleRule('flex-wrap', 'wrap') 47 | expect(json).toHaveStyleRule('flex-direction', 'column') 48 | expect(json).toHaveStyleRule('align-items', 'center') 49 | expect(json).toHaveStyleRule('justify-content', 'space-between') 50 | }) 51 | 52 | test('Flex renders with flexDirection prop', () => { 53 | const json = renderJSON( 54 | 57 | ) 58 | expect(json).toMatchSnapshot() 59 | expect(json).toHaveStyleRule('flex-direction', 'column') 60 | }) 61 | 62 | test('Flex renders with responsive props', () => { 63 | const json = renderJSON( 64 | 70 | ) 71 | expect(json).toMatchSnapshot() 72 | }) 73 | 74 | test('Box accepts a css prop', () => { 75 | const json = renderJSON( 76 | 81 | ) 82 | expect(json).toMatchSnapshot() 83 | expect(json).toHaveStyleRule('outline', '4px solid red') 84 | }) 85 | --------------------------------------------------------------------------------