feat(responsive): add minWidth prop

src/components/Responsive/Responsive.jsx

@@ -1,32 +1,35 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-// import MediaQuery from 'react-responsive'
+import MediaQuery from 'react-responsive'
 
-import safeRest from '../../utils/safeRest'
-
-// import styles from './Responsive.modules.scss'
+const breakpoints = {
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+}
 
-// const breakpoints = {
-//   small: 576,
-//   medium: 768,
-//   large: 992,
-//   xl: 1200,
-// }
+const getQuery = breakpoint => {
+  if (!breakpoint) {
+    return undefined
+  }
 
-// const Small = props => <MediaQuery {...props} minWidth={breakpoints.small} />
-// const Medium = props => <MediaQuery {...props} minWidth={breakpoints.medium} />
-// const Large = props => <MediaQuery {...props} minWidth={breakpoints.large} />
-// const XL = props => <MediaQuery {...props} minWidth={breakpoints.xl} />
+  return `(min-width: ${breakpoints[breakpoint]}px)`
+}
 
-const Responsive = ({ children, ...rest }) => <div {...safeRest(rest)}>{children}</div>
+const Responsive = ({ minWidth, children }) => (
+  <MediaQuery query={getQuery(minWidth)}>{children}</MediaQuery>
+)
 
 Responsive.propTypes = {
-  query: PropTypes.string,
+  minWidth: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+  // maxWidth: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
   children: PropTypes.node.isRequired,
 }
 
 Responsive.defaultProps = {
-  query: undefined,
+  minWidth: undefined,
+  // maxWidth: undefined,
 }
 
 export default Responsive

src/components/Responsive/__tests__/Responsive.spec.jsx

@@ -1,10 +1,21 @@
 import React from 'react'
 import { shallow } from 'enzyme'
+import ReactTestUtils from 'react-dom/test-utils'
 
 import Responsive from '../Responsive'
 
 describe('Responsive', () => {
-  const doShallow = (props = {}) => shallow(<Responsive {...props}>This is children</Responsive>)
+  const defaultProps = {
+    minWidth: 'sm',
+  }
+  const defaultChildren = 'Some content'
+
+  const doShallow = (props = defaultProps, children = defaultChildren) =>
+    shallow(<Responsive {...props}>{children}</Responsive>)
+
+  const doBrowserRender = (props = defaultProps, children = <div>Some children</div>) => {
+    ReactTestUtils.renderIntoDocument(<Responsive {...props}>{children}</Responsive>)
+  }
 
   it('renders', () => {
     const responsive = doShallow()
@@ -18,7 +29,17 @@ describe('Responsive', () => {
     expect(responsive).toBePresent()
   })
 
-  it('passes additional attributes to the element', () => {
+  it('return children', () => {
+    const responsive = doBrowserRender()
+
+    ReactTestUtils.isElementOfType(responsive, 'div')
+  })
+
+  it.skip('can have minWidth', () => {})
+
+  it.skip('can have maxWidth', () => {})
+
+  it.skip('passes additional attributes to the element', () => {
     const responsive = doShallow({ id: 'the-id', 'data-some-attr': 'some value' })
 
     expect(responsive).toHaveProp('id', 'the-id')

src/components/Responsive/__tests__/__snapshots__/Responsive.spec.jsx.snap

@@ -1,7 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Responsive renders 1`] = `
-<div>
-  This is children
-</div>
+<MediaQuery
+  query="(min-width: 576px)"
+  values={Object {}}
+>
+  Some content
+</MediaQuery>
 `;