├── .babelrc
├── .gitignore
├── .npmignore
├── .npmrc
├── README.md
├── __snapshots__
    └── test.js.snap
├── package.json
├── src
    └── Hide.js
└── test.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     "env"
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | package-lock.json
2 | dist
3 | coverage
4 | .nyc_output
5 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | coverage
2 | .nyc_output
3 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | package-lock=false
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # hidden-styled
 3 | 
 4 | Responsive CSS hiding utility component built with [styled-components](https://github.com/styled-components/styled-components)
 5 | 
 6 | ```sh
 7 | npm i hidden-styled
 8 | ```
 9 | 
10 | ```jsx
11 | import React from 'react'
12 | import Hide from 'hidden-styled'
13 | 
14 | const App = props => (
15 |   <div>
16 |     <Hide xs>I‘m hidden on extra small screens</Hide>
17 |     <Hide sm>I‘m hidden on small screens</Hide>
18 |     <Hide md>I‘m hidden on medium screens</Hide>
19 |     <Hide lg>I‘m hidden on large screens</Hide>
20 |     <Hide md lg>I‘m hidden on medium and large screens</Hide>
21 |   </div>
22 | )
23 | ```
24 | 
25 | MIT License
26 | 


--------------------------------------------------------------------------------
/__snapshots__/test.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`renders 1`] = `
 4 | <div
 5 |   className="sc-bdVaJa bDWFJH"
 6 | />
 7 | `;
 8 | 
 9 | exports[`renders with lg 1`] = `
10 | <div
11 |   className="sc-bdVaJa hKJEBu"
12 | />
13 | `;
14 | 
15 | exports[`renders with md 1`] = `
16 | <div
17 |   className="sc-bdVaJa gLCTHw"
18 | />
19 | `;
20 | 
21 | exports[`renders with sm 1`] = `
22 | <div
23 |   className="sc-bdVaJa bEMGDB"
24 | />
25 | `;
26 | 
27 | exports[`renders with xs 1`] = `
28 | <div
29 |   className="sc-bdVaJa kBXXYC"
30 | />
31 | `;
32 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "hidden-styled",
 3 |   "version": "1.0.0-0",
 4 |   "description": "Responsive CSS hide utility React component, built with styled-components",
 5 |   "main": "dist/Hide.js",
 6 |   "scripts": {
 7 |     "prepublish": "babel src -d dist",
 8 |     "test": "nyc ava"
 9 |   },
10 |   "keywords": [
11 |     "react",
12 |     "react-component",
13 |     "styled-components",
14 |     "css",
15 |     "css-in-js",
16 |     "responsive"
17 |   ],
18 |   "author": "Brent Jackson",
19 |   "license": "MIT",
20 |   "dependencies": {
21 |     "styled-components": "^2.1.0"
22 |   },
23 |   "devDependencies": {
24 |     "ava": "^0.19.1",
25 |     "babel-cli": "^6.24.1",
26 |     "babel-core": "^6.25.0",
27 |     "babel-preset-env": "^1.5.2",
28 |     "babel-register": "^6.24.1",
29 |     "nyc": "^11.0.2",
30 |     "react": "^15.6.1",
31 |     "react-dom": "^15.6.1",
32 |     "react-test-renderer": "^15.6.1"
33 |   },
34 |   "ava": {
35 |     "require": [
36 |       "babel-register"
37 |     ],
38 |     "babel": "inherit"
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/Hide.js:
--------------------------------------------------------------------------------
 1 | import styled from 'styled-components'
 2 | 
 3 | export const breakpoints = {
 4 |   xs: '@media screen and (max-width: 40em)',
 5 |   sm: '@media screen and (min-width: 40em) and (max-width: 52em)',
 6 |   md: '@media screen and (min-width: 52em) and (max-width: 64em)',
 7 |   lg: '@media screen and (min-width: 64em)',
 8 | }
 9 | 
10 | export const hidden = key => props => props[key] ? {
11 |   [breakpoints[key]]: {
12 |     display: 'none'
13 |   }
14 | } : null
15 | 
16 | export const xs = hidden('xs')
17 | export const sm = hidden('sm')
18 | export const md = hidden('md')
19 | export const lg = hidden('lg')
20 | 
21 | const Hide = styled.div([],
22 |   xs,
23 |   sm,
24 |   md,
25 |   lg
26 | )
27 | 
28 | export default Hide
29 | 


--------------------------------------------------------------------------------
/test.js:
--------------------------------------------------------------------------------
 1 | import test from 'ava'
 2 | import { ThemeProvider } from 'styled-components'
 3 | import { createElement as h } from 'react'
 4 | import { create as render } from 'react-test-renderer'
 5 | import Hide, {
 6 |   breakpoints,
 7 |   hidden,
 8 |   xs,
 9 |   sm,
10 |   md,
11 |   lg
12 | } from './src/Hide'
13 | 
14 | test('renders', t => {
15 |   const json = render(h(Hide)).toJSON()
16 |   t.snapshot(json)
17 | })
18 | 
19 | test('renders with xs', t => {
20 |   const json = render(h(Hide, { xs: true })).toJSON()
21 |   t.snapshot(json)
22 | })
23 | 
24 | test('renders with sm', t => {
25 |   const json = render(h(Hide, { sm: true })).toJSON()
26 |   t.snapshot(json)
27 | })
28 | 
29 | test('renders with md', t => {
30 |   const json = render(h(Hide, { md: true })).toJSON()
31 |   t.snapshot(json)
32 | })
33 | 
34 | test('renders with lg', t => {
35 |   const json = render(h(Hide, { lg: true })).toJSON()
36 |   t.snapshot(json)
37 | })
38 | 
39 | test('hidden returns a function', t => {
40 |   t.is(typeof hidden('foo'), 'function')
41 | })
42 | 
43 | test('hidden function returns a style object', t => {
44 |   const a = hidden('sm')({ sm: true })
45 |   t.is(typeof a, 'object')
46 |   t.deepEqual(a, {
47 |     [breakpoints.sm]: {
48 |       display: 'none'
49 |     }
50 |   })
51 | })
52 | 
53 | test('xs returns a style object', t => {
54 |   const a = xs({ xs: true })
55 |   t.deepEqual(a, {
56 |     [breakpoints.xs]: {
57 |       display: 'none'
58 |     }
59 |   })
60 | })
61 | 
62 | test('sm returns a style object', t => {
63 |   const a = sm({ sm: true })
64 |   t.deepEqual(a, {
65 |     [breakpoints.sm]: {
66 |       display: 'none'
67 |     }
68 |   })
69 | })
70 | 
71 | test('md returns a style object', t => {
72 |   const a = md({ md: true })
73 |   t.deepEqual(a, {
74 |     [breakpoints.md]: {
75 |       display: 'none'
76 |     }
77 |   })
78 | })
79 | 
80 | test('lg returns a style object', t => {
81 |   const a = lg({ lg: true })
82 |   t.deepEqual(a, {
83 |     [breakpoints.lg]: {
84 |       display: 'none'
85 |     }
86 |   })
87 | })
88 | 
89 | test.todo('breakpoints can be configured with theme')
90 | 


--------------------------------------------------------------------------------