├── .flowconfig ├── .babelrc ├── .travis.yml ├── src ├── index.js ├── Margin.jsx ├── Padding.jsx ├── core.js ├── Margin.test.jsx ├── Padding.test.jsx └── __snapshots__ │ ├── Margin.test.jsx.snap │ └── Padding.test.jsx.snap ├── .prettierrc.js ├── .gitignore ├── example ├── index.js ├── index.html └── components │ └── App.js ├── package.json ├── CHANGELOG.md └── README.md /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | /dist -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["env", "react"] 3 | } -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "stable" -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | export * from './Margin'; 3 | export * from './Padding'; 4 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 120, 3 | singleQuote: true 4 | }; 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | node_modules 3 | dist 4 | npm-debug.log 5 | npm-debug.log* 6 | .DS_Store 7 | -------------------------------------------------------------------------------- /example/index.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import React from 'react'; 3 | import ReactDOM from 'react-dom'; 4 | import App from './components/App'; 5 | 6 | const element = document.getElementById('app'); 7 | if (element) { 8 | ReactDOM.render(, element); 9 | } 10 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | styled-components-spacing: Example 8 | 9 | 10 | 11 | 12 |

13 | 14 | 15 | -------------------------------------------------------------------------------- /src/Margin.jsx: -------------------------------------------------------------------------------- 1 | // @flow 2 | import styled from 'styled-components'; 3 | import { type Theme, type Values, _m, _mx, _my, _mt, _mr, _mb, _ml } from './core'; 4 | 5 | export function m(values: Values) { 6 | return function({ theme }: { theme: Theme }) { 7 | return _m(values, theme); 8 | }; 9 | } 10 | 11 | export function mx(values: Values) { 12 | return function({ theme }: { theme: Theme }) { 13 | return _mx(values, theme); 14 | }; 15 | } 16 | 17 | export function my(values: Values) { 18 | return function({ theme }: { theme: Theme }) { 19 | return _my(values, theme); 20 | }; 21 | } 22 | 23 | export function mt(values: Values) { 24 | return function({ theme }: { theme: Theme }) { 25 | return _mt(values, theme); 26 | }; 27 | } 28 | 29 | export function mr(values: Values) { 30 | return function({ theme }: { theme: Theme }) { 31 | return _mr(values, theme); 32 | }; 33 | } 34 | 35 | export function mb(values: Values) { 36 | return function({ theme }: { theme: Theme }) { 37 | return _mb(values, theme); 38 | }; 39 | } 40 | 41 | export function ml(values: Values) { 42 | return function({ theme }: { theme: Theme }) { 43 | return _ml(values, theme); 44 | }; 45 | } 46 | 47 | export const Margin = styled.div` 48 | ${({ inline }) => inline && 'display: inline-block;'} 49 | ${({ all, theme }) => _m(all, theme)} 50 | ${({ horizontal, theme }) => _mx(horizontal, theme)} 51 | ${({ vertical, theme }) => _my(vertical, theme)} 52 | ${({ top, theme }) => _mt(top, theme)} 53 | ${({ right, theme }) => _mr(right, theme)} 54 | ${({ bottom, theme }) => _mb(bottom, theme)} 55 | ${({ left, theme }) => _ml(left, theme)} 56 | `; 57 | 58 | Margin.displayName = 'Margin'; 59 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "styled-components-spacing", 3 | "version": "3.1.2", 4 | "description": "Responsive margin and padding components for `styled-components`💅.", 5 | "keywords": [ 6 | "react", 7 | "styled-components", 8 | "responsive", 9 | "style", 10 | "spacing", 11 | "margin", 12 | "breakpoint", 13 | "grid" 14 | ], 15 | "repository": "jameslnewell/styled-components-spacing", 16 | "main": "dist/cjs/index.js", 17 | "module": "dist/esm/index.js", 18 | "jsnext:main": "dist/esm/index.js", 19 | "files": [ 20 | "dist/cjs", 21 | "dist/esm" 22 | ], 23 | "peerDependencies": { 24 | "styled-components": ">= 1 < 4" 25 | }, 26 | "dependencies": { 27 | "styled-components-breakpoint": "^2.0.1" 28 | }, 29 | "devDependencies": { 30 | "@tradie/react-component-scripts": "^1.0.0-alpha.a573b72a", 31 | "gh-pages": "^1.1.0", 32 | "husky": "^0.14.3", 33 | "jest-styled-components": "^4.11.0-1", 34 | "lint-staged": "^6.1.0", 35 | "prettier": "^1.10.2", 36 | "react": "^16.2.0", 37 | "react-dom": "^16.2.0", 38 | "react-test-renderer": "^16.2.0", 39 | "styled-components": "^3.1.6" 40 | }, 41 | "scripts": { 42 | "clean": "tradie clean", 43 | "build": "tradie build", 44 | "watch": "tradie build --watch", 45 | "dev": "tradie dev", 46 | "test": "tradie test", 47 | "deploy": "gh-pages -d \"./dist/example\"", 48 | "prepublishOnly": "yarn run clean && yarn run build && yarn run test", 49 | "postpublish": "yarn run deploy", 50 | "precommit": "lint-staged" 51 | }, 52 | "lint-staged": { 53 | "*.{js,jsx,json,md}": [ 54 | "prettier --write", 55 | "git add" 56 | ] 57 | }, 58 | "license": "MIT" 59 | } 60 | -------------------------------------------------------------------------------- /src/Padding.jsx: -------------------------------------------------------------------------------- 1 | // @flow 2 | import styled from 'styled-components'; 3 | import { type Theme, type Values, _p, _px, _py, _pt, _pr, _pb, _pl } from './core'; 4 | 5 | export function p(values: Values) { 6 | return function({ theme }: { theme: Theme }) { 7 | return _p(values, theme); 8 | }; 9 | } 10 | 11 | export function px(values: Values) { 12 | return function({ theme }: { theme: Theme }) { 13 | return _px(values, theme); 14 | }; 15 | } 16 | 17 | export function py(values: Values) { 18 | return function({ theme }: { theme: Theme }) { 19 | return _py(values, theme); 20 | }; 21 | } 22 | 23 | export function pt(values: Values) { 24 | return function({ theme }: { theme: Theme }) { 25 | return _pt(values, theme); 26 | }; 27 | } 28 | 29 | export function pr(values: Values) { 30 | return function({ theme }: { theme: Theme }) { 31 | return _pr(values, theme); 32 | }; 33 | } 34 | 35 | export function pb(values: Values) { 36 | return function({ theme }: { theme: Theme }) { 37 | return _pb(values, theme); 38 | }; 39 | } 40 | 41 | export function pl(values: Values) { 42 | return function({ theme }: { theme: Theme }) { 43 | return _pl(values, theme); 44 | }; 45 | } 46 | 47 | export const Padding = styled.div` 48 | ${({ inline }) => inline && 'display: inline-block;'} 49 | ${({ all, theme }) => _p(all, theme)} 50 | ${({ horizontal, theme }) => _px(horizontal, theme)} 51 | ${({ vertical, theme }) => _py(vertical, theme)} 52 | ${({ top, theme }) => _pt(top, theme)} 53 | ${({ right, theme }) => _pr(right, theme)} 54 | ${({ bottom, theme }) => _pb(bottom, theme)} 55 | ${({ left, theme }) => _pl(left, theme)} 56 | `; 57 | 58 | Padding.displayName = 'Padding'; 59 | 60 | export default Padding; 61 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## Change log 2 | 3 | ### 3.1.2 4 | 5 | - fix docs to reflect removed property ([#13](https://github.com/jameslnewell/styled-components-spacing/pull/13)) 6 | 7 | ### 3.1.1 8 | 9 | - fix zero indexed margin/paddings issue ([#12](https://github.com/jameslnewell/styled-components-spacing/pull/12)) 10 | 11 | ### 3.1.0 12 | 13 | - added the `module` field 14 | - added badges to README 15 | 16 | ## 3.0.1 17 | 18 | - added `Margin.displayName` and `Padding.displayName` ([#9](https://github.com/jameslnewell/styled-components-spacing/pull/9)) 19 | 20 | ## 3.0.0 21 | 22 | - updated the `peerDependency` to support `styled-components@^3` 23 | - potential breaking change: upgraded to `styled-components-breakpoint@2.0.0` which only supports breakpoints defined as px 24 | - potential breaking change: removed the `theme` parameter from the mixins, simplifying use of customised breakpoints and spacings 25 | - potential breaking change: removed use of `react-create-component-from-tag-prop` since `styled-components` now has `component.withComponent()` 26 | 27 | ## 2.1.3 28 | 29 | - fix: not used to a new IDE which doesn't auto save 30 | 31 | ## 2.1.2 32 | 33 | - fix: remove undefined margin values 34 | 35 | ## 2.1.1 36 | 37 | - fix: updated the documentation 38 | 39 | ## 2.1.0 40 | 41 | - add: added a `component` prop to customise the underlying element type 42 | 43 | ## 2.0.4 44 | 45 | - fix: Use `prop-types` to make warning with `react@15.5` go away 46 | 47 | ## 2.0.1-3 48 | 49 | - fix: usage examples 50 | 51 | ## 2.0.0 52 | 53 | - break: removed `display: inline-block;` from `` because an `inline-block` wrapping a `block` changes the width of the `block`. e.g. `

` meant the `h1` was unexpectedly not full width 54 | - addition: added a prop named `inline` to change `` and `` to from `block` to `inline-block`. 55 | -------------------------------------------------------------------------------- /src/core.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | /* global process / 3 | import { map } from 'styled-components-breakpoint'; 4 | 5 | export type Theme = { 6 | [string]: mixed, 7 | breakpoints: { 8 | [string]: number 9 | }, 10 | spacing: { 11 | [string]: string 12 | } 13 | }; 14 | 15 | export type Values = 16 | | string 17 | | number 18 | | { 19 | [string]: string | number 20 | }; 21 | 22 | const defaultSpacing = { 23 | '0': '0', 24 | '1': '0.25rem', 25 | '2': '0.5rem', 26 | '3': '1rem', 27 | '4': '2rem', 28 | '5': '4rem', 29 | '6': '8rem' 30 | }; 31 | 32 | export function getSpacingFromTheme(key: string, theme: Theme): string { 33 | const value = (theme && theme.spacing && theme.spacing[key]) || defaultSpacing[key]; 34 | if (process.env.NODE_ENV !== 'production' && typeof key === 'undefined') { 35 | console.error(`A spacing named "${key}" does not exist.`); // eslint-disable-line no-console 36 | return '0'; 37 | } 38 | return value; 39 | } 40 | 41 | export function _m(values: Values, theme: Theme) { 42 | return map(values, key => { 43 | if (typeof key === 'string' || typeof key === 'number') { 44 | return ` 45 | margin: ${getSpacingFromTheme(key, theme)}; 46 | `; 47 | } else { 48 | return ''; 49 | } 50 | }); 51 | } 52 | 53 | export function _mx(values: Values, theme: Theme) { 54 | return map(values, key => { 55 | if (typeof key === 'string' || typeof key === 'number') { 56 | return ` 57 | margin-left: ${getSpacingFromTheme(key, theme)}; 58 | margin-right: ${getSpacingFromTheme(key, theme)}; 59 | `; 60 | } else { 61 | return ''; 62 | } 63 | }); 64 | } 65 | 66 | export function _my(values: Values, theme: Theme) { 67 | return map(values, key => { 68 | if (typeof key === 'string' || typeof key === 'number') { 69 | return ` 70 | margin-top: ${getSpacingFromTheme(key, theme)}; 71 | margin-bottom: ${getSpacingFromTheme(key, theme)}; 72 | `; 73 | } else { 74 | return ''; 75 | } 76 | }); 77 | } 78 | 79 | export function _mt(values: Values, theme: Theme) { 80 | return map(values, key => { 81 | if (typeof key === 'string' || typeof key === 'number') { 82 | return ` 83 | margin-top: ${getSpacingFromTheme(key, theme)}; 84 | `; 85 | } else { 86 | return ''; 87 | } 88 | }); 89 | } 90 | 91 | export function _mr(values: Values, theme: Theme) { 92 | return map(values, key => { 93 | if (typeof key === 'string' || typeof key === 'number') { 94 | return ` 95 | margin-right: ${getSpacingFromTheme(key, theme)}; 96 | `; 97 | } else { 98 | return ''; 99 | } 100 | }); 101 | } 102 | 103 | export function _mb(values: Values, theme: Theme) { 104 | return map(values, key => { 105 | if (typeof key === 'string' || typeof key === 'number') { 106 | return ` 107 | margin-bottom: ${getSpacingFromTheme(key, theme)}; 108 | `; 109 | } else { 110 | return ''; 111 | } 112 | }); 113 | } 114 | 115 | export function _ml(values: Values, theme: Theme) { 116 | return map(values, key => { 117 | if (typeof key === 'string' || typeof key === 'number') { 118 | return ` 119 | margin-left: ${getSpacingFromTheme(key, theme)}; 120 | `; 121 | } else { 122 | return ''; 123 | } 124 | }); 125 | } 126 | 127 | export function _p(values: Values, theme: Theme) { 128 | return map(values, key => { 129 | if (typeof key === 'string' || typeof key === 'number') { 130 | return ` 131 | padding: ${getSpacingFromTheme(key, theme)}; 132 | `; 133 | } else { 134 | return ''; 135 | } 136 | }); 137 | } 138 | 139 | export function _px(values: Values, theme: Theme) { 140 | return map(values, key => { 141 | if (typeof key === 'string' || typeof key === 'number') { 142 | return ` 143 | padding-left: ${getSpacingFromTheme(key, theme)}; 144 | padding-right: ${getSpacingFromTheme(key, theme)}; 145 | `; 146 | } else { 147 | return ''; 148 | } 149 | }); 150 | } 151 | 152 | export function _py(values: Values, theme: Theme) { 153 | return map(values, key => { 154 | if (typeof key === 'string' || typeof key === 'number') { 155 | return ` 156 | padding-top: ${getSpacingFromTheme(key, theme)}; 157 | padding-bottom: ${getSpacingFromTheme(key, theme)}; 158 | `; 159 | } else { 160 | return ''; 161 | } 162 | }); 163 | } 164 | 165 | export function _pt(values: Values, theme: Theme) { 166 | return map(values, key => { 167 | if (typeof key === 'string' || typeof key === 'number') { 168 | return ` 169 | padding-top: ${getSpacingFromTheme(key, theme)}; 170 | `; 171 | } else { 172 | return ''; 173 | } 174 | }); 175 | } 176 | 177 | export function _pr(values: Values, theme: Theme) { 178 | return map(values, key => { 179 | if (typeof key === 'string' || typeof key === 'number') { 180 | return ` 181 | padding-right: ${getSpacingFromTheme(key, theme)}; 182 | `; 183 | } else { 184 | return ''; 185 | } 186 | }); 187 | } 188 | 189 | export function _pb(values: Values, theme: Theme) { 190 | return map(values, key => { 191 | if (typeof key === 'string' || typeof key === 'number') { 192 | return ` 193 | padding-bottom: ${getSpacingFromTheme(key, theme)}; 194 | `; 195 | } else { 196 | return ''; 197 | } 198 | }); 199 | } 200 | 201 | export function _pl(values: Values, theme: Theme) { 202 | return map(values, key => { 203 | if (typeof key === 'string' || typeof key === 'number') { 204 | return ` 205 | padding-left: ${getSpacingFromTheme(key, theme)}; 206 | `; 207 | } else { 208 | return ''; 209 | } 210 | }); 211 | } 212 | -------------------------------------------------------------------------------- /src/Margin.test.jsx: -------------------------------------------------------------------------------- 1 | import 'jest-styled-components'; 2 | import React from 'react'; 3 | import renderer from 'react-test-renderer'; 4 | import { Margin } from './Margin'; 5 | 6 | describe('Margin', () => { 7 | it('it should have no styles when no props are passed', () => { 8 | const tree = renderer.create().toJSON(); 9 | expect(tree).toMatchSnapshot(); 10 | }); 11 | 12 | describe('inline', () => { 13 | it('it should be set when the prop is true', () => { 14 | const tree = renderer.create().toJSON(); 15 | expect(tree).toMatchSnapshot(); 16 | expect(tree).toHaveStyleRule('display', 'inline-block'); 17 | }); 18 | 19 | it('it should not be set when the prop is false', () => { 20 | const tree = renderer.create().toJSON(); 21 | expect(tree).not.toHaveStyleRule('display', 'inline-block'); 22 | }); 23 | }); 24 | 25 | describe('all', () => { 26 | it('it should have a single margin for all breakpoints when the prop is passed', () => { 27 | const tree = renderer.create().toJSON(); 28 | expect(tree).toMatchSnapshot(); 29 | }); 30 | 31 | it('it should have a different margin for all breakpoints when the prop is passed', () => { 32 | const tree = renderer.create().toJSON(); 33 | expect(tree).toMatchSnapshot(); 34 | }); 35 | 36 | it('it should have a different margin for some breakpoints when the prop is passed', () => { 37 | const tree = renderer.create().toJSON(); 38 | expect(tree).toMatchSnapshot(); 39 | expect(tree).toHaveStyleRule('margin', '0.5rem', { 40 | media: '(min-width:46.0625em)' 41 | }); 42 | expect(tree).toHaveStyleRule('margin', '2rem', { 43 | media: '(min-width:64.0625em)' 44 | }); 45 | }); 46 | }); 47 | 48 | describe('horizontal', () => { 49 | it('it should have a single margin for all breakpoints when the prop is passed', () => { 50 | const tree = renderer.create().toJSON(); 51 | expect(tree).toMatchSnapshot(); 52 | }); 53 | 54 | it('it should have a different margin for all breakpoints when the prop is passed', () => { 55 | const tree = renderer.create().toJSON(); 56 | expect(tree).toMatchSnapshot(); 57 | }); 58 | 59 | it('it should have a different margin for some breakpoints when the prop is passed', () => { 60 | const tree = renderer.create().toJSON(); 61 | expect(tree).toMatchSnapshot(); 62 | }); 63 | }); 64 | 65 | describe('vertical', () => { 66 | it('it should have a single margin for all breakpoints when the prop is passed', () => { 67 | const tree = renderer.create().toJSON(); 68 | expect(tree).toMatchSnapshot(); 69 | }); 70 | 71 | it('it should have a different margin for all breakpoints when the prop is passed', () => { 72 | const tree = renderer.create().toJSON(); 73 | expect(tree).toMatchSnapshot(); 74 | }); 75 | 76 | it('it should have a different margin for some breakpoints when the prop is passed', () => { 77 | const tree = renderer.create().toJSON(); 78 | expect(tree).toMatchSnapshot(); 79 | }); 80 | }); 81 | 82 | describe('top', () => { 83 | it('it should have a single margin for all breakpoints when the prop is passed', () => { 84 | const tree = renderer.create().toJSON(); 85 | expect(tree).toMatchSnapshot(); 86 | }); 87 | 88 | it('it should have a different margin for all breakpoints when the prop is passed', () => { 89 | const tree = renderer.create().toJSON(); 90 | expect(tree).toMatchSnapshot(); 91 | }); 92 | 93 | it('it should have a different margin for some breakpoints when the prop is passed', () => { 94 | const tree = renderer.create().toJSON(); 95 | expect(tree).toMatchSnapshot(); 96 | }); 97 | }); 98 | 99 | describe('right', () => { 100 | it('it should have a single margin for all breakpoints when the prop is passed', () => { 101 | const tree = renderer.create().toJSON(); 102 | expect(tree).toMatchSnapshot(); 103 | }); 104 | 105 | it('it should have a different margin for all breakpoints when the prop is passed', () => { 106 | const tree = renderer.create().toJSON(); 107 | expect(tree).toMatchSnapshot(); 108 | }); 109 | 110 | it('it should have a different margin for some breakpoints when the prop is passed', () => { 111 | const tree = renderer.create().toJSON(); 112 | expect(tree).toMatchSnapshot(); 113 | }); 114 | }); 115 | 116 | describe('bottom', () => { 117 | it('it should have a single margin for all breakpoints when the prop is passed', () => { 118 | const tree = renderer.create().toJSON(); 119 | expect(tree).toMatchSnapshot(); 120 | }); 121 | 122 | it('it should have a different margin for all breakpoints when the prop is passed', () => { 123 | const tree = renderer.create().toJSON(); 124 | expect(tree).toMatchSnapshot(); 125 | }); 126 | 127 | it('it should have a different margin for some breakpoints when the prop is passed', () => { 128 | const tree = renderer.create().toJSON(); 129 | expect(tree).toMatchSnapshot(); 130 | }); 131 | }); 132 | 133 | describe('left', () => { 134 | it('it should have a single margin for all breakpoints when the prop is passed', () => { 135 | const tree = renderer.create().toJSON(); 136 | expect(tree).toMatchSnapshot(); 137 | }); 138 | 139 | it('it should have a different margin for all breakpoints when the prop is passed', () => { 140 | const tree = renderer.create().toJSON(); 141 | expect(tree).toMatchSnapshot(); 142 | }); 143 | 144 | it('it should have a different margin for some breakpoints when the prop is passed', () => { 145 | const tree = renderer.create().toJSON(); 146 | expect(tree).toMatchSnapshot(); 147 | }); 148 | }); 149 | }); 150 | -------------------------------------------------------------------------------- /src/Padding.test.jsx: -------------------------------------------------------------------------------- 1 | import 'jest-styled-components'; 2 | import React from 'react'; 3 | import renderer from 'react-test-renderer'; 4 | import { Padding } from './Padding'; 5 | 6 | describe('Padding', () => { 7 | it('it should have no styles when no props are passed', () => { 8 | const tree = renderer.create().toJSON(); 9 | expect(tree).toMatchSnapshot(); 10 | }); 11 | 12 | describe('inline', () => { 13 | it('it should be set when the prop is true', () => { 14 | const tree = renderer.create().toJSON(); 15 | expect(tree).toMatchSnapshot(); 16 | expect(tree).toHaveStyleRule('display', 'inline-block'); 17 | }); 18 | 19 | it('it should not be set when the prop is false', () => { 20 | const tree = renderer.create().toJSON(); 21 | expect(tree).not.toHaveStyleRule('display', 'inline-block'); 22 | }); 23 | }); 24 | 25 | describe('all', () => { 26 | it('it should have a single padding for all breakpoints when the prop is passed', () => { 27 | const tree = renderer.create().toJSON(); 28 | expect(tree).toMatchSnapshot(); 29 | }); 30 | 31 | it('it should have a different padding for all breakpoints when the prop is passed', () => { 32 | const tree = renderer.create().toJSON(); 33 | expect(tree).toMatchSnapshot(); 34 | }); 35 | 36 | it('it should have a different padding for some breakpoints when the prop is passed', () => { 37 | const tree = renderer.create().toJSON(); 38 | expect(tree).toMatchSnapshot(); 39 | expect(tree).toHaveStyleRule('padding', '0.5rem', { 40 | media: '(min-width:46.0625em)' 41 | }); 42 | expect(tree).toHaveStyleRule('padding', '2rem', { 43 | media: '(min-width:64.0625em)' 44 | }); 45 | }); 46 | }); 47 | 48 | describe('horizontal', () => { 49 | it('it should have a single padding for all breakpoints when the prop is passed', () => { 50 | const tree = renderer.create().toJSON(); 51 | expect(tree).toMatchSnapshot(); 52 | }); 53 | 54 | it('it should have a different padding for all breakpoints when the prop is passed', () => { 55 | const tree = renderer.create().toJSON(); 56 | expect(tree).toMatchSnapshot(); 57 | }); 58 | 59 | it('it should have a different padding for some breakpoints when the prop is passed', () => { 60 | const tree = renderer.create().toJSON(); 61 | expect(tree).toMatchSnapshot(); 62 | }); 63 | }); 64 | 65 | describe('vertical', () => { 66 | it('it should have a single padding for all breakpoints when the prop is passed', () => { 67 | const tree = renderer.create().toJSON(); 68 | expect(tree).toMatchSnapshot(); 69 | }); 70 | 71 | it('it should have a different padding for all breakpoints when the prop is passed', () => { 72 | const tree = renderer.create().toJSON(); 73 | expect(tree).toMatchSnapshot(); 74 | }); 75 | 76 | it('it should have a different padding for some breakpoints when the prop is passed', () => { 77 | const tree = renderer.create().toJSON(); 78 | expect(tree).toMatchSnapshot(); 79 | }); 80 | }); 81 | 82 | describe('top', () => { 83 | it('it should have a single padding for all breakpoints when the prop is passed', () => { 84 | const tree = renderer.create().toJSON(); 85 | expect(tree).toMatchSnapshot(); 86 | }); 87 | 88 | it('it should have a different padding for all breakpoints when the prop is passed', () => { 89 | const tree = renderer.create().toJSON(); 90 | expect(tree).toMatchSnapshot(); 91 | }); 92 | 93 | it('it should have a different padding for some breakpoints when the prop is passed', () => { 94 | const tree = renderer.create().toJSON(); 95 | expect(tree).toMatchSnapshot(); 96 | }); 97 | }); 98 | 99 | describe('right', () => { 100 | it('it should have a single padding for all breakpoints when the prop is passed', () => { 101 | const tree = renderer.create().toJSON(); 102 | expect(tree).toMatchSnapshot(); 103 | }); 104 | 105 | it('it should have a different padding for all breakpoints when the prop is passed', () => { 106 | const tree = renderer.create().toJSON(); 107 | expect(tree).toMatchSnapshot(); 108 | }); 109 | 110 | it('it should have a different padding for some breakpoints when the prop is passed', () => { 111 | const tree = renderer.create().toJSON(); 112 | expect(tree).toMatchSnapshot(); 113 | }); 114 | }); 115 | 116 | describe('bottom', () => { 117 | it('it should have a single padding for all breakpoints when the prop is passed', () => { 118 | const tree = renderer.create().toJSON(); 119 | expect(tree).toMatchSnapshot(); 120 | }); 121 | 122 | it('it should have a different padding for all breakpoints when the prop is passed', () => { 123 | const tree = renderer.create().toJSON(); 124 | expect(tree).toMatchSnapshot(); 125 | }); 126 | 127 | it('it should have a different padding for some breakpoints when the prop is passed', () => { 128 | const tree = renderer.create().toJSON(); 129 | expect(tree).toMatchSnapshot(); 130 | }); 131 | }); 132 | 133 | describe('left', () => { 134 | it('it should have a single padding for all breakpoints when the prop is passed', () => { 135 | const tree = renderer.create().toJSON(); 136 | expect(tree).toMatchSnapshot(); 137 | }); 138 | 139 | it('it should have a different padding for all breakpoints when the prop is passed', () => { 140 | const tree = renderer.create().toJSON(); 141 | expect(tree).toMatchSnapshot(); 142 | }); 143 | 144 | it('it should have a different padding for some breakpoints when the prop is passed', () => { 145 | const tree = renderer.create().toJSON(); 146 | expect(tree).toMatchSnapshot(); 147 | }); 148 | }); 149 | }); 150 | -------------------------------------------------------------------------------- /src/snapshots/Margin.test.jsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Margin all it should have a different margin for all breakpoints when the prop is passed 1`] = ` 4 | .c0 { 5 | margin: 0; 6 | } 7 | 8 | @media (min-width:46.0625em) { 9 | .c0 { 10 | margin: 0.5rem; 11 | } 12 | } 13 | 14 | @media (min-width:64.0625em) { 15 | .c0 { 16 | margin: 2rem; 17 | } 18 | } 19 | 20 |
23 | `; 24 | 25 | exports[`Margin all it should have a different margin for some breakpoints when the prop is passed 1`] = ` 26 | @media (min-width:46.0625em) { 27 | .c0 { 28 | margin: 0.5rem; 29 | } 30 | } 31 | 32 | @media (min-width:64.0625em) { 33 | .c0 { 34 | margin: 2rem; 35 | } 36 | } 37 | 38 |
41 | `; 42 | 43 | exports[`Margin all it should have a single margin for all breakpoints when the prop is passed 1`] = ` 44 | .c0 { 45 | margin: 0.25rem; 46 | } 47 | 48 |
51 | `; 52 | 53 | exports[`Margin bottom it should have a different margin for all breakpoints when the prop is passed 1`] = ` 54 | .c0 { 55 | margin-bottom: 0; 56 | } 57 | 58 | @media (min-width:46.0625em) { 59 | .c0 { 60 | margin-bottom: 0.5rem; 61 | } 62 | } 63 | 64 | @media (min-width:64.0625em) { 65 | .c0 { 66 | margin-bottom: 2rem; 67 | } 68 | } 69 | 70 |
73 | `; 74 | 75 | exports[`Margin bottom it should have a different margin for some breakpoints when the prop is passed 1`] = ` 76 | @media (min-width:46.0625em) { 77 | .c0 { 78 | margin-bottom: 0.5rem; 79 | } 80 | } 81 | 82 | @media (min-width:64.0625em) { 83 | .c0 { 84 | margin-bottom: 2rem; 85 | } 86 | } 87 | 88 |
91 | `; 92 | 93 | exports[`Margin bottom it should have a single margin for all breakpoints when the prop is passed 1`] = ` 94 | .c0 { 95 | margin-bottom: 0.25rem; 96 | } 97 | 98 |
101 | `; 102 | 103 | exports[`Margin horizontal it should have a different margin for all breakpoints when the prop is passed 1`] = ` 104 | .c0 { 105 | margin-left: 0; 106 | margin-right: 0; 107 | } 108 | 109 | @media (min-width:46.0625em) { 110 | .c0 { 111 | margin-left: 0.5rem; 112 | margin-right: 0.5rem; 113 | } 114 | } 115 | 116 | @media (min-width:64.0625em) { 117 | .c0 { 118 | margin-left: 2rem; 119 | margin-right: 2rem; 120 | } 121 | } 122 | 123 |
126 | `; 127 | 128 | exports[`Margin horizontal it should have a different margin for some breakpoints when the prop is passed 1`] = ` 129 | @media (min-width:46.0625em) { 130 | .c0 { 131 | margin-left: 0.5rem; 132 | margin-right: 0.5rem; 133 | } 134 | } 135 | 136 | @media (min-width:64.0625em) { 137 | .c0 { 138 | margin-left: 2rem; 139 | margin-right: 2rem; 140 | } 141 | } 142 | 143 |
146 | `; 147 | 148 | exports[`Margin horizontal it should have a single margin for all breakpoints when the prop is passed 1`] = ` 149 | .c0 { 150 | margin-left: 0.25rem; 151 | margin-right: 0.25rem; 152 | } 153 | 154 |
157 | `; 158 | 159 | exports[`Margin inline it should be set when the prop is true 1`] = ` 160 | .c0 { 161 | display: inline-block; 162 | } 163 | 164 |
167 | `; 168 | 169 | exports[`Margin it should have no styles when no props are passed 1`] = ` 170 |
173 | `; 174 | 175 | exports[`Margin left it should have a different margin for all breakpoints when the prop is passed 1`] = ` 176 | .c0 { 177 | margin-left: 0; 178 | } 179 | 180 | @media (min-width:46.0625em) { 181 | .c0 { 182 | margin-left: 0.5rem; 183 | } 184 | } 185 | 186 | @media (min-width:64.0625em) { 187 | .c0 { 188 | margin-left: 2rem; 189 | } 190 | } 191 | 192 |
195 | `; 196 | 197 | exports[`Margin left it should have a different margin for some breakpoints when the prop is passed 1`] = ` 198 | @media (min-width:46.0625em) { 199 | .c0 { 200 | margin-left: 0.5rem; 201 | } 202 | } 203 | 204 | @media (min-width:64.0625em) { 205 | .c0 { 206 | margin-left: 2rem; 207 | } 208 | } 209 | 210 |
213 | `; 214 | 215 | exports[`Margin left it should have a single margin for all breakpoints when the prop is passed 1`] = ` 216 | .c0 { 217 | margin-left: 0.25rem; 218 | } 219 | 220 |
223 | `; 224 | 225 | exports[`Margin right it should have a different margin for all breakpoints when the prop is passed 1`] = ` 226 | .c0 { 227 | margin-right: 0; 228 | } 229 | 230 | @media (min-width:46.0625em) { 231 | .c0 { 232 | margin-right: 0.5rem; 233 | } 234 | } 235 | 236 | @media (min-width:64.0625em) { 237 | .c0 { 238 | margin-right: 2rem; 239 | } 240 | } 241 | 242 |
245 | `; 246 | 247 | exports[`Margin right it should have a different margin for some breakpoints when the prop is passed 1`] = ` 248 | @media (min-width:46.0625em) { 249 | .c0 { 250 | margin-right: 0.5rem; 251 | } 252 | } 253 | 254 | @media (min-width:64.0625em) { 255 | .c0 { 256 | margin-right: 2rem; 257 | } 258 | } 259 | 260 |
263 | `; 264 | 265 | exports[`Margin right it should have a single margin for all breakpoints when the prop is passed 1`] = ` 266 | .c0 { 267 | margin-right: 0.25rem; 268 | } 269 | 270 |
273 | `; 274 | 275 | exports[`Margin top it should have a different margin for all breakpoints when the prop is passed 1`] = ` 276 | .c0 { 277 | margin-top: 0; 278 | } 279 | 280 | @media (min-width:46.0625em) { 281 | .c0 { 282 | margin-top: 0.5rem; 283 | } 284 | } 285 | 286 | @media (min-width:64.0625em) { 287 | .c0 { 288 | margin-top: 2rem; 289 | } 290 | } 291 | 292 |
295 | `; 296 | 297 | exports[`Margin top it should have a different margin for some breakpoints when the prop is passed 1`] = ` 298 | @media (min-width:46.0625em) { 299 | .c0 { 300 | margin-top: 0.5rem; 301 | } 302 | } 303 | 304 | @media (min-width:64.0625em) { 305 | .c0 { 306 | margin-top: 2rem; 307 | } 308 | } 309 | 310 |
313 | `; 314 | 315 | exports[`Margin top it should have a single margin for all breakpoints when the prop is passed 1`] = ` 316 | .c0 { 317 | margin-top: 0.25rem; 318 | } 319 | 320 |
323 | `; 324 | 325 | exports[`Margin vertical it should have a different margin for all breakpoints when the prop is passed 1`] = ` 326 | .c0 { 327 | margin-top: 0; 328 | margin-bottom: 0; 329 | } 330 | 331 | @media (min-width:46.0625em) { 332 | .c0 { 333 | margin-top: 0.5rem; 334 | margin-bottom: 0.5rem; 335 | } 336 | } 337 | 338 | @media (min-width:64.0625em) { 339 | .c0 { 340 | margin-top: 2rem; 341 | margin-bottom: 2rem; 342 | } 343 | } 344 | 345 |
348 | `; 349 | 350 | exports[`Margin vertical it should have a different margin for some breakpoints when the prop is passed 1`] = ` 351 | @media (min-width:46.0625em) { 352 | .c0 { 353 | margin-top: 0.5rem; 354 | margin-bottom: 0.5rem; 355 | } 356 | } 357 | 358 | @media (min-width:64.0625em) { 359 | .c0 { 360 | margin-top: 2rem; 361 | margin-bottom: 2rem; 362 | } 363 | } 364 | 365 |
368 | `; 369 | 370 | exports[`Margin vertical it should have a single margin for all breakpoints when the prop is passed 1`] = ` 371 | .c0 { 372 | margin-top: 0.25rem; 373 | margin-bottom: 0.25rem; 374 | } 375 | 376 |
379 | `; 380 | -------------------------------------------------------------------------------- /src/snapshots/Padding.test.jsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Padding all it should have a different padding for all breakpoints when the prop is passed 1`] = ` 4 | .c0 { 5 | padding: 0; 6 | } 7 | 8 | @media (min-width:46.0625em) { 9 | .c0 { 10 | padding: 0.5rem; 11 | } 12 | } 13 | 14 | @media (min-width:64.0625em) { 15 | .c0 { 16 | padding: 2rem; 17 | } 18 | } 19 | 20 |
23 | `; 24 | 25 | exports[`Padding all it should have a different padding for some breakpoints when the prop is passed 1`] = ` 26 | @media (min-width:46.0625em) { 27 | .c0 { 28 | padding: 0.5rem; 29 | } 30 | } 31 | 32 | @media (min-width:64.0625em) { 33 | .c0 { 34 | padding: 2rem; 35 | } 36 | } 37 | 38 |
41 | `; 42 | 43 | exports[`Padding all it should have a single padding for all breakpoints when the prop is passed 1`] = ` 44 | .c0 { 45 | padding: 0.25rem; 46 | } 47 | 48 |
51 | `; 52 | 53 | exports[`Padding bottom it should have a different padding for all breakpoints when the prop is passed 1`] = ` 54 | .c0 { 55 | padding-bottom: 0; 56 | } 57 | 58 | @media (min-width:46.0625em) { 59 | .c0 { 60 | padding-bottom: 0.5rem; 61 | } 62 | } 63 | 64 | @media (min-width:64.0625em) { 65 | .c0 { 66 | padding-bottom: 2rem; 67 | } 68 | } 69 | 70 |
73 | `; 74 | 75 | exports[`Padding bottom it should have a different padding for some breakpoints when the prop is passed 1`] = ` 76 | @media (min-width:46.0625em) { 77 | .c0 { 78 | padding-bottom: 0.5rem; 79 | } 80 | } 81 | 82 | @media (min-width:64.0625em) { 83 | .c0 { 84 | padding-bottom: 2rem; 85 | } 86 | } 87 | 88 |
91 | `; 92 | 93 | exports[`Padding bottom it should have a single padding for all breakpoints when the prop is passed 1`] = ` 94 | .c0 { 95 | padding-bottom: 0.25rem; 96 | } 97 | 98 |
101 | `; 102 | 103 | exports[`Padding horizontal it should have a different padding for all breakpoints when the prop is passed 1`] = ` 104 | .c0 { 105 | padding-left: 0; 106 | padding-right: 0; 107 | } 108 | 109 | @media (min-width:46.0625em) { 110 | .c0 { 111 | padding-left: 0.5rem; 112 | padding-right: 0.5rem; 113 | } 114 | } 115 | 116 | @media (min-width:64.0625em) { 117 | .c0 { 118 | padding-left: 2rem; 119 | padding-right: 2rem; 120 | } 121 | } 122 | 123 |
126 | `; 127 | 128 | exports[`Padding horizontal it should have a different padding for some breakpoints when the prop is passed 1`] = ` 129 | @media (min-width:46.0625em) { 130 | .c0 { 131 | padding-left: 0.5rem; 132 | padding-right: 0.5rem; 133 | } 134 | } 135 | 136 | @media (min-width:64.0625em) { 137 | .c0 { 138 | padding-left: 2rem; 139 | padding-right: 2rem; 140 | } 141 | } 142 | 143 |
146 | `; 147 | 148 | exports[`Padding horizontal it should have a single padding for all breakpoints when the prop is passed 1`] = ` 149 | .c0 { 150 | padding-left: 0.25rem; 151 | padding-right: 0.25rem; 152 | } 153 | 154 |
157 | `; 158 | 159 | exports[`Padding inline it should be set when the prop is true 1`] = ` 160 | .c0 { 161 | display: inline-block; 162 | } 163 | 164 |
167 | `; 168 | 169 | exports[`Padding it should have no styles when no props are passed 1`] = ` 170 |
173 | `; 174 | 175 | exports[`Padding left it should have a different padding for all breakpoints when the prop is passed 1`] = ` 176 | .c0 { 177 | padding-left: 0; 178 | } 179 | 180 | @media (min-width:46.0625em) { 181 | .c0 { 182 | padding-left: 0.5rem; 183 | } 184 | } 185 | 186 | @media (min-width:64.0625em) { 187 | .c0 { 188 | padding-left: 2rem; 189 | } 190 | } 191 | 192 |
195 | `; 196 | 197 | exports[`Padding left it should have a different padding for some breakpoints when the prop is passed 1`] = ` 198 | @media (min-width:46.0625em) { 199 | .c0 { 200 | padding-left: 0.5rem; 201 | } 202 | } 203 | 204 | @media (min-width:64.0625em) { 205 | .c0 { 206 | padding-left: 2rem; 207 | } 208 | } 209 | 210 |
213 | `; 214 | 215 | exports[`Padding left it should have a single padding for all breakpoints when the prop is passed 1`] = ` 216 | .c0 { 217 | padding-left: 0.25rem; 218 | } 219 | 220 |
223 | `; 224 | 225 | exports[`Padding right it should have a different padding for all breakpoints when the prop is passed 1`] = ` 226 | .c0 { 227 | padding-right: 0; 228 | } 229 | 230 | @media (min-width:46.0625em) { 231 | .c0 { 232 | padding-right: 0.5rem; 233 | } 234 | } 235 | 236 | @media (min-width:64.0625em) { 237 | .c0 { 238 | padding-right: 2rem; 239 | } 240 | } 241 | 242 |
245 | `; 246 | 247 | exports[`Padding right it should have a different padding for some breakpoints when the prop is passed 1`] = ` 248 | @media (min-width:46.0625em) { 249 | .c0 { 250 | padding-right: 0.5rem; 251 | } 252 | } 253 | 254 | @media (min-width:64.0625em) { 255 | .c0 { 256 | padding-right: 2rem; 257 | } 258 | } 259 | 260 |
263 | `; 264 | 265 | exports[`Padding right it should have a single padding for all breakpoints when the prop is passed 1`] = ` 266 | .c0 { 267 | padding-right: 0.25rem; 268 | } 269 | 270 |
273 | `; 274 | 275 | exports[`Padding top it should have a different padding for all breakpoints when the prop is passed 1`] = ` 276 | .c0 { 277 | padding-top: 0; 278 | } 279 | 280 | @media (min-width:46.0625em) { 281 | .c0 { 282 | padding-top: 0.5rem; 283 | } 284 | } 285 | 286 | @media (min-width:64.0625em) { 287 | .c0 { 288 | padding-top: 2rem; 289 | } 290 | } 291 | 292 |
295 | `; 296 | 297 | exports[`Padding top it should have a different padding for some breakpoints when the prop is passed 1`] = ` 298 | @media (min-width:46.0625em) { 299 | .c0 { 300 | padding-top: 0.5rem; 301 | } 302 | } 303 | 304 | @media (min-width:64.0625em) { 305 | .c0 { 306 | padding-top: 2rem; 307 | } 308 | } 309 | 310 |
313 | `; 314 | 315 | exports[`Padding top it should have a single padding for all breakpoints when the prop is passed 1`] = ` 316 | .c0 { 317 | padding-top: 0.25rem; 318 | } 319 | 320 |
323 | `; 324 | 325 | exports[`Padding vertical it should have a different padding for all breakpoints when the prop is passed 1`] = ` 326 | .c0 { 327 | padding-top: 0; 328 | padding-bottom: 0; 329 | } 330 | 331 | @media (min-width:46.0625em) { 332 | .c0 { 333 | padding-top: 0.5rem; 334 | padding-bottom: 0.5rem; 335 | } 336 | } 337 | 338 | @media (min-width:64.0625em) { 339 | .c0 { 340 | padding-top: 2rem; 341 | padding-bottom: 2rem; 342 | } 343 | } 344 | 345 |
348 | `; 349 | 350 | exports[`Padding vertical it should have a different padding for some breakpoints when the prop is passed 1`] = ` 351 | @media (min-width:46.0625em) { 352 | .c0 { 353 | padding-top: 0.5rem; 354 | padding-bottom: 0.5rem; 355 | } 356 | } 357 | 358 | @media (min-width:64.0625em) { 359 | .c0 { 360 | padding-top: 2rem; 361 | padding-bottom: 2rem; 362 | } 363 | } 364 | 365 |
368 | `; 369 | 370 | exports[`Padding vertical it should have a single padding for all breakpoints when the prop is passed 1`] = ` 371 | .c0 { 372 | padding-top: 0.25rem; 373 | padding-bottom: 0.25rem; 374 | } 375 | 376 |
379 | `; 380 | -------------------------------------------------------------------------------- /example/components/App.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import as React from 'react'; 3 | import styled, { injectGlobal, ThemeProvider } from 'styled-components'; 4 | import breakpoint, { createStatic } from 'styled-components-breakpoint'; 5 | import { Margin, Padding } from '../../src'; 6 | 7 | const DEFAULT_THEME = { 8 | breakpoints: { 9 | mobile: 0, 10 | tablet: 737, 11 | desktop: 1025 12 | }, 13 | spacing: { 14 | '0': '0', 15 | '1': '0.25rem', 16 | '2': '0.5rem', 17 | '3': '1rem', 18 | '4': '2rem', 19 | '5': '4rem', 20 | '6': '8rem' 21 | } 22 | }; 23 | 24 | const CUSTOM_THEME = { 25 | breakpoints: { 26 | xs: 0, 27 | sm: 576, 28 | md: 768, 29 | lg: 992, 30 | xl: 1200 31 | }, 32 | spacing: { 33 | '0': '0', 34 | '1': '0.25rem', 35 | '2': '0.5rem', 36 | '3': '1rem', 37 | '4': '1.5rem', 38 | '5': '3rem' 39 | } 40 | }; 41 | 42 | const DEFAULT_VALUES = { 43 | mobile: 2, 44 | tablet: 4, 45 | desktop: 6 46 | }; 47 | 48 | const CUSTOM_VALUES = { 49 | xs: 1, 50 | md: 3, 51 | xl: 5 52 | }; 53 | 54 | const BREAKPOINT_TITLES = { 55 | mobile: 'Mobile', 56 | tablet: 'Tablet', 57 | desktop: 'Desktop', 58 | xs: 'XS', 59 | sm: 'SM', 60 | md: 'MD', 61 | lg: 'LG', 62 | xl: 'XL' 63 | }; 64 | 65 | const STATIC_BREAKPOINTS = createStatic(); 66 | 67 | /* eslint-disable no-unused-expressions / 68 | injectGlobal` 69 | 70 | body { 71 | 72 | margin: auto; 73 | padding: 0 1em; 74 | min-width: 500px; 75 | max-width: 800px; 76 | 77 | color: #444; 78 | font-size: 0.9em; 79 | font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; 80 | 81 | ${STATIC_BREAKPOINTS.tablet` 82 | font-size: 1em; 83 | `} 84 | 85 | ${STATIC_BREAKPOINTS.desktop` 86 | font-size: 1.1em; 87 | `} 88 | 89 | } 90 | 91 | `; 92 | 93 | / eslint-enable no-unused-expressions / 94 | 95 | const Main = styled.main` 96 | padding-bottom: 1em; 97 | `; 98 | 99 | const H1 = styled.h1` 100 | margin: 1em 0; 101 | `; 102 | 103 | const H2 = styled.h2` 104 | margin: 1em 0; 105 | `; 106 | 107 | const Grid = styled.div` 108 | display: flex; 109 | align-items: center; 110 | `; 111 | 112 | const Col1 = styled.div` 113 | flex-grow: 1; 114 | `; 115 | 116 | const Col2 = styled.div``; 117 | 118 | const Button = styled.button` 119 | padding: 0.5em; 120 | font-size: 1em; 121 | border-radius: 3px; 122 | `; 123 | 124 | const Instruction = styled.blockquote` 125 | margin: 0; 126 | font-size: 0.9em; 127 | font-weight: bold; 128 | text-align: right; 129 | `; 130 | 131 | const BreakpointName = styled.div` 132 | flex-shrink: 0; 133 | width: 5em; 134 | &:after { 135 | font-weight: bold; 136 | ${({ theme }) => 137 | Object.keys(theme.breakpoints).map(name => breakpoint(name)`content: '${BREAKPOINT_TITLES[name]}';`)}; 138 | } 139 | `; 140 | const Code = styled.div` 141 | flex-grow: 1; 142 | overflow: hidden; 143 | white-space: pre; 144 | text-overflow: ellipsis; 145 | white-space: nowrap; 146 | overflow: hidden; 147 | color: #666; 148 | font-family: monospace; 149 | `; 150 | 151 | const innerStyles = ` 152 | display: flex; 153 | align-items: center; 154 | `; 155 | 156 | const MarginOuter = styled.div` 157 | overflow: hidden; 158 | background-color: #bde4a8; 159 | `; 160 | 161 | const MarginInner = styled.div` 162 | ${innerStyles} padding: 0.7em; 163 | background-color: #d7f2ba; 164 | `; 165 | 166 | const WrappedMargin = (props: { prop: string, values: { [string]: number }, children: React.Node }) => ( 167 | 168 | 169 | 170 | 171 | `{props.children}` 172 | 173 | 174 | 175 | ); 176 | 177 | const PaddingOuter = styled.div` 178 | background-color: #d7f2ba; 179 | `; 180 | 181 | const PaddingInner = styled.div` 182 | display: flex; 183 | padding: 0.75em; 184 | ${innerStyles} background-color: #BDE4A8; 185 | `; 186 | 187 | const WrappedPadding = (props: { prop: string, values: { [string]: number }, children: React.Node }) => ( 188 | 189 | 190 | 191 | 192 | `{props.children}` 193 | 194 | 195 | 196 | ); 197 | 198 | export type AppProps = {}; 199 | 200 | export type AppState = { 201 | theme: { [name: string]: mixed }, 202 | values: { [name: string]: number } 203 | }; 204 | 205 | export default class App extends React.Component { 206 | state = { 207 | theme: DEFAULT_THEME, 208 | values: DEFAULT_VALUES 209 | }; 210 | 211 | handleToggleTheme = () => { 212 | this.setState(({ theme }) => ({ 213 | theme: theme !== DEFAULT_THEME ? DEFAULT_THEME : CUSTOM_THEME, 214 | values: theme !== DEFAULT_THEME ? DEFAULT_VALUES : CUSTOM_VALUES 215 | })); 216 | }; 217 | 218 | render() { 219 | const { theme, values } = this.state; 220 | return ( 221 | 222 |
223 |
styled-components-spacing
224 | 225 | 226 | 227 | 230 | 231 | 232 | Try resizing the window. 👉 233 | 234 | 235 | 236 |
Margin
237 | 238 | {` `} 239 | 240 |
241 | 242 | {` `} 243 | 244 |
245 | 246 | {``} 247 | 248 |
249 | 250 | {``} 251 | 252 |
253 | 254 | {``} 255 | 256 |
257 | 258 | {``} 259 | 260 |
261 | 262 | {``} 263 | 264 | 265 |
Padding
266 | 267 | {``} 268 | 269 |
270 | 271 | {``} 272 | 273 |
274 | 275 | {``} 276 | 277 |
278 | 279 | {``} 280 | 281 |
282 | 283 | {``} 284 | 285 |
286 | 287 | {``} 288 | 289 |
290 | 291 | {``} 292 | 293 |
294 | 295 | ); 296 | } 297 | } 298 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # styled-components-spacing 2 | 3 | ![npm](https://img.shields.io/npm/v/styled-components-spacing.svg) ![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/styled-components-spacing.svg) ![npm](https://img.shields.io/npm/dm/styled-components-spacing.svg) [![Build Status](https://travis-ci.org/jameslnewell/styled-components-spacing.svg?branch=master)](https://travis-ci.org/jameslnewell/styled-components-spacing) 4 | 5 | Responsive margin and padding components for `styled-components` 💅. 6 | 7 | > [Change log](https://github.com/jameslnewell/styled-components-spacing/blob/master/CHANGELOG.md) 8 | 9 | > Have a look 👀 at [`styled-components-breakpoint`](https://github.com/jameslnewell/styled-components-breakpoint) and [`styled-components-grid`](https://github.com/jameslnewell/styled-components-grid) which both work well with this package. 10 | 11 | ## Installation 12 | 13 | npm install --save styled-components styled-components-spacing 14 | 15 | ## Usage 16 | 17 | > [Examples](https://jameslnewell.github.io/styled-components-spacing/) 18 | 19 | ### Using the default spacings at the default breakpoints 20 | 21 | ```js 22 | import React from 'react'; 23 | import { Margin, Padding } from 'styled-components-spacing'; 24 | 25 | 26 | 27 | Hello World 28 | You are on earth! 29 | 30 | 31 | 32 | 33 | ; 34 | ``` 35 | 36 | ### Using custom spacings at custom breakpoints 37 | 38 | Spacings and breakpoints can be customised using `ThemeProvider`. For example, to use the same breakpoints and spacings as [Bootstrap](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints), you can do so like this: 39 | 40 | ```js 41 | import React from 'react'; 42 | import { ThemeProvider } from 'styled-components'; 43 | import { Margin, Padding } from 'styled-components-spacing'; 44 | 45 | const theme = { 46 | breakpoints: { 47 | xs: 0, 48 | sm: 576, 49 | md: 768, 50 | lg: 992, 51 | xl: 1200 52 | }, 53 | spacing: { 54 | 0: '0', 55 | 1: '0.25rem', 56 | 2: '0.5rem', 57 | 3: '1rem', 58 | 4: '1.5rem', 59 | 5: '3rem' 60 | } 61 | }; 62 | 63 | 64 | 65 | 66 | Hello World 67 | You are on earth! 68 | 69 | 70 | 71 | 72 | 73 | ; 74 | ``` 75 | 76 | ### Using the mixins 77 | 78 | ```js 79 | import React from 'react'; 80 | import styled from 'styled-components'; 81 | import { my, px } from 'styled-components-spacing'; 82 | 83 | const Panel = styled.div` 84 | ${my({ mobile: 2, tablet: 4 })} ${px(6)}; 85 | `; 86 | ``` 87 | 88 | ## Components 89 | 90 | ### <Margin/> 91 | 92 | #### all 93 | 94 | Margin on all sides. 95 | 96 | Optional. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints. 97 | 98 | #### horizontal 99 | 100 | Margin on the left and right. 101 | 102 | Optional. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints. 103 | 104 | #### vertical 105 | 106 | Margin on the top and bottom. 107 | 108 | Optional. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints. 109 | 110 | #### top 111 | 112 | Margin on the top. 113 | 114 | Optional. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints. 115 | 116 | #### bottom 117 | 118 | Margin on the bottom. 119 | 120 | Optional. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints. 121 | 122 | #### left 123 | 124 | Margin on the left. 125 | 126 | Optional. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints. 127 | 128 | #### right 129 | 130 | Margin on the right. 131 | 132 | Optional. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints. 133 | 134 | #### inline 135 | 136 | Size the element to the width of its children. 137 | 138 | Optional. A `boolean`. Defaults to `false`. 139 | 140 | ### <Padding/> 141 | 142 | #### all 143 | 144 | Padding on all sides. 145 | 146 | Optional. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints. 147 | 148 | #### horizontal 149 | 150 | Padding on the left and right. 151 | 152 | Optional. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints. 153 | 154 | #### vertical 155 | 156 | Padding on the top and bottom. 157 | 158 | Optional. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints. 159 | 160 | #### top 161 | 162 | Padding on the top. 163 | 164 | Optional. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints. 165 | 166 | #### bottom 167 | 168 | Padding on the bottom. 169 | 170 | Optional. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints. 171 | 172 | #### left 173 | 174 | Padding on the left. 175 | 176 | Optional. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints. 177 | 178 | #### right 179 | 180 | Padding on the right. 181 | 182 | Optional. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints. 183 | 184 | #### inline 185 | 186 | Size the element to the width of its children. 187 | 188 | Optional. A `boolean`. Defaults to `false`. 189 | 190 | ## Mixins 191 | 192 | #### m(values) 193 | 194 | Margin on all sides. 195 | 196 | Parameters: 197 | 198 | `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints. 199 | 200 | #### mx(values) 201 | 202 | Margin on the left and right. 203 | 204 | Parameters: 205 | 206 | * `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints. 207 | 208 | #### my(values) 209 | 210 | Margin on the top and bottom. 211 | 212 | Parameters: 213 | 214 | * `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints. 215 | 216 | #### mt(values) 217 | 218 | Margin on the top. 219 | 220 | Parameters: 221 | 222 | * `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints. 223 | 224 | #### mr(values) 225 | 226 | Margin on the right. 227 | 228 | Parameters: 229 | 230 | * `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints. 231 | 232 | #### mb(values) 233 | 234 | Margin on the bottom. 235 | 236 | Parameters: 237 | 238 | * `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints. 239 | 240 | #### ml(values) 241 | 242 | Margin on the left. 243 | 244 | Parameters: 245 | 246 | * `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints. 247 | 248 | --- 249 | 250 | #### p(values) 251 | 252 | Padding on all sides. 253 | 254 | Parameters: 255 | 256 | * `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints. 257 | 258 | #### px(values) 259 | 260 | Padding on the left and right. 261 | 262 | Parameters: 263 | 264 | * `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints. 265 | 266 | #### py(values) 267 | 268 | Padding on the top and bottom. 269 | 270 | Parameters: 271 | 272 | * `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints. 273 | 274 | #### pt(values) 275 | 276 | Padding on the top. 277 | 278 | Parameters: 279 | 280 | * `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints. 281 | 282 | #### pr(values) 283 | 284 | Padding on the right. 285 | 286 | Parameters: 287 | 288 | * `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints. 289 | 290 | #### pb(values) 291 | 292 | Padding on the bottom. 293 | 294 | Parameters: 295 | 296 | * `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints. 297 | 298 | #### pl(values) 299 | 300 | Padding on the left. 301 | 302 | Parameters: 303 | 304 | * `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints. 305 | 306 | ## Defaults 307 | 308 | ```js 309 | { 310 | 0: '0', 311 | 1: '0.25rem', 312 | 2: '0.5rem', 313 | 3: '1rem', 314 | 4: '2rem', 315 | 5: '4rem', 316 | 6: '8rem' 317 | } 318 | ``` 319 | 320 | ## Rendering on a custom component 321 | 322 | This library no longer supports the `component` prop - if you wish to use a custom component with this library use [`.withComponent()`](https://www.styled-components.com/docs/api#withcomponent) 323 | --------------------------------------------------------------------------------