feat(flexgrid): Add Row component with react-broadcast support / add …

…gutterless prop FlexGrid / fully unit-tested

package.json

@@ -111,7 +111,8 @@
     "react-dom": ">=15"
   },
   "dependencies": {
-    "prop-types": "^15.5.10"
+    "prop-types": "^15.5.10",
+    "react-broadcast": "^0.6.0"
   },
   "config": {
     "commitizen": {

src/components/FlexGrid/Col.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { Subscriber } from 'react-broadcast'
 
 import { Col as ReactFlexboxGridCol } from 'react-flexbox-grid'
 
@@ -20,9 +21,20 @@ const removeProps = ({
 }) => safeRest(rest)
 
 const Col = ({ span, offset, children, ...rest }) => (
-  <ReactFlexboxGridCol {...removeProps(rest)} xs={span || true} xsOffset={offset}>
-    {children}
-  </ReactFlexboxGridCol>
+  <Subscriber channel="gutterless">
+    {gutterless => {
+      return (
+        <ReactFlexboxGridCol
+          {...removeProps(rest)}
+          xs={span || true}
+          xsOffset={offset}
+          style={gutterless}
+        >
+          {children}
+        </ReactFlexboxGridCol>
+      )
+    }}
+  </Subscriber>
 )
 
 Col.propTypes = {

src/components/FlexGrid/FlexGrid.jsx

@@ -1,22 +1,35 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { Broadcast } from 'react-broadcast'
 
-import { Row, Grid } from 'react-flexbox-grid'
+import { Grid } from 'react-flexbox-grid'
 
 import safeRest from '../../utils/safeRest'
 
 import Col from './Col'
+import Row from './Row'
 
-const FlexGrid = ({ children, ...rest }) => (
-  <Grid {...safeRest(rest)} fluid>
-    {children}
-  </Grid>
-)
+const FlexGrid = ({ gutterless, children, ...rest }) => {
+  const css = gutterless ? { padding: 0, margin: 0 } : undefined
+
+  return (
+    <Broadcast channel="gutterless" value={css}>
+      <Grid {...safeRest(rest)} fluid style={css}>
+        {children}
+      </Grid>
+    </Broadcast>
+  )
+}
 
 FlexGrid.propTypes = {
+  gutterless: PropTypes.bool,
   children: PropTypes.node.isRequired,
 }
 
+FlexGrid.defaultProps = {
+  gutterless: false,
+}
+
 FlexGrid.Row = Row
 FlexGrid.Col = Col
 

src/components/FlexGrid/Row.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Subscriber } from 'react-broadcast'
+
+import { Row as ReactFlexboxGridRow } from 'react-flexbox-grid'
+
+import safeRest from '../../utils/safeRest'
+
+const Row = ({ children, ...rest }) => (
+  <Subscriber channel="gutterless">
+    {gutterless => {
+      return (
+        <ReactFlexboxGridRow {...safeRest(rest)} style={gutterless}>
+          {children}
+        </ReactFlexboxGridRow>
+      )
+    }}
+  </Subscriber>
+)
+
+Row.propTypes = {
+  children: PropTypes.node.isRequired,
+}
+
+export default Row

src/components/FlexGrid/__tests__/Col.spec.jsx

@@ -1,12 +1,20 @@
 import React from 'react'
-import { shallow } from 'enzyme'
-
+import { mount } from 'enzyme'
 import { Col as ReactFlexboxGridCol } from 'react-flexbox-grid'
 
+import FlexGrid from '../FlexGrid'
 import Col from '../Col'
 
 describe('Col', () => {
-  const doShallow = (props = {}) => shallow(<Col {...props}>Some content</Col>)
+  const doShallow = (props = {}) => {
+    const wrapper = mount(
+      <FlexGrid>
+        <Col {...props}>Some content</Col>)
+      </FlexGrid>
+    )
+
+    return wrapper.find(ReactFlexboxGridCol)
+  }
 
   it('renders', () => {
     const col = doShallow()
@@ -79,6 +87,6 @@ describe('Col', () => {
     })
 
     expect(col).not.toHaveProp('className', 'my-custom-class')
-    expect(col).not.toHaveProp('style')
+    expect(col).not.toHaveProp('style', { color: 'hotpink' })
   })
 })

src/components/FlexGrid/__tests__/FlexGrid.spec.jsx

@@ -1,45 +1,88 @@
 import React from 'react'
-import { shallow } from 'enzyme'
-
+import { mount } from 'enzyme'
 import { Grid } from 'react-flexbox-grid'
 
+import Responsive from '../../Responsive/Responsive'
 import FlexGrid from '../FlexGrid'
 
 describe('FlexGrid', () => {
-  const doShallow = (props = {}) => shallow(<FlexGrid {...props}>Some grid stuff</FlexGrid>)
+  const doMount = (props = {}) => {
+    const wrapper = mount(<FlexGrid {...props}>Some grid stuff</FlexGrid>)
+    return wrapper.find('Grid')
+  }
+
+  const doMountWithChildren = (props = {}) => {
+    const wrapper = mount(
+      <FlexGrid {...props}>
+        <Responsive id="responsive" minWidth="md">
+          {match => {
+            return (
+              <FlexGrid.Col>
+                <div>HALF: {match}</div>
+              </FlexGrid.Col>
+            )
+          }}
+        </Responsive>
+        <FlexGrid.Row>
+          <FlexGrid.Col>HALF</FlexGrid.Col>
+          <FlexGrid.Col>HALF</FlexGrid.Col>
+        </FlexGrid.Row>
+      </FlexGrid>
+    )
 
-  // it('renders', () => {
-  //   const flexGrid = doShallow()
+    return wrapper.find('Grid')
+  }
+  it('renders', () => {
+    const flexGrid = doMount()
 
-  //   expect(flexGrid).toMatchSnapshot()
-  // })
+    expect(flexGrid).toMatchSnapshot()
+  })
 
   it('renders a react-flexbox-grid Grid component', () => {
-    const flexGrid = doShallow()
+    const flexGrid = doMount()
 
     expect(flexGrid).toMatchSelector(Grid)
   })
 
   it('is fluid by default', () => {
-    const flexGrid = doShallow()
+    const flexGrid = doMount()
 
     expect(flexGrid).toHaveProp('fluid', true)
   })
 
-  // it('passes additional attributes to the element', () => {
-  //   const flexGrid = doShallow({ id: 'the-id', 'data-some-attr': 'some value' })
+  it('should render all children related to Grid with no gutter', () => {
+    const flexGrid = doMountWithChildren({ gutterless: true })
+
+    const gutterless = { padding: 0, margin: 0 }
+    const getElementStyleProp = (target, idx) => flexGrid.find(target).get(idx).props.style
+
+    const col1 = getElementStyleProp('Col', 1)
+    const col2 = getElementStyleProp('Col', 3)
+    const col3 = getElementStyleProp('Col', 5)
+    const row = getElementStyleProp('Row', 1)
+    const NonRelatedElement = flexGrid.find('Responsive')
+
+    expect(col1).toEqual(gutterless)
+    expect(col2).toEqual(gutterless)
+    expect(col3).toEqual(gutterless)
+    expect(row).toEqual(gutterless)
+    expect(NonRelatedElement).not.toEqual(gutterless)
+  })
+
+  it('passes additional attributes to the element', () => {
+    const flexGrid = doMount({ id: 'the-id', 'data-some-attr': 'some value' })
 
-  //   expect(flexGrid).toHaveProp('id', 'the-id')
-  //   expect(flexGrid).toHaveProp('data-some-attr', 'some value')
-  // })
+    expect(flexGrid).toHaveProp('id', 'the-id')
+    expect(flexGrid).toHaveProp('data-some-attr', 'some value')
+  })
 
-  // it('does not allow custom CSS', () => {
-  //   const flexGrid = doShallow({
-  //     className: 'my-custom-class',
-  //     style: { color: 'hotpink' },
-  //   })
+  it('does not allow custom CSS', () => {
+    const flexGrid = doMount({
+      className: 'my-custom-class',
+      style: { color: 'hotpink' },
+    })
 
-  //   expect(flexGrid).not.toHaveProp('className', 'my-custom-class')
-  //   expect(flexGrid).not.toHaveProp('style')
-  // })
+    expect(flexGrid).not.toHaveProp('className', 'my-custom-class')
+    expect(flexGrid).not.toHaveProp('style', { color: 'hotpink' })
+  })
 })

src/components/FlexGrid/__tests__/Row.spec.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import { Row as ReactFlexboxGridRow } from 'react-flexbox-grid'
+
+import FlexGrid from '../FlexGrid'
+import Row from '../Row'
+
+describe('Col', () => {
+  const doShallow = (props = {}) => {
+    const wrapper = mount(
+      <FlexGrid>
+        <Row {...props}>Some content</Row>)
+      </FlexGrid>
+    )
+    return wrapper.find(ReactFlexboxGridRow)
+  }
+
+  it('renders', () => {
+    const col = doShallow()
+    expect(col).toMatchSnapshot()
+  })
+
+  it('renders a react-flexbox-grid Col component', () => {
+    const row = doShallow()
+
+    expect(row).toMatchSelector(ReactFlexboxGridRow)
+  })
+
+  it('passes additional attributes to the react-flexbox-grid Col', () => {
+    const col = doShallow({ id: 'the-id', 'data-some-attr': 'some value' })
+
+    expect(col).toHaveProp('id', 'the-id')
+    expect(col).toHaveProp('data-some-attr', 'some value')
+  })
+
+  it('does not allow custom CSS', () => {
+    const col = doShallow({
+      className: 'my-custom-class',
+      style: { color: 'hotpink' },
+    })
+
+    expect(col).not.toHaveProp('className', 'my-custom-class')
+    expect(col).not.toHaveProp('style', { color: 'hotpink' })
+  })
+})

src/components/FlexGrid/__tests__/__snapshots__/Col.spec.jsx.snap

@@ -4,6 +4,10 @@ exports[`Col renders 1`] = `
 <Col
   xs={true}
 >
-  Some content
+  <div
+    className="col-xs col-xs-offset"
+  >
+    Some content
+  </div>
 </Col>
 `;

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

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FlexGrid renders 1`] = `
+<Grid
+  fluid={true}
+>
+  <div
+    className="container-fluid"
+  >
+    Some grid stuff
+  </div>
+</Grid>
+`;

src/components/FlexGrid/__tests__/__snapshots__/Row.spec.jsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Col renders 1`] = `
+<Row>
+  <div
+    className="row"
+  >
+    Some content
+  </div>
+</Row>
+`;

yarn.lock

@@ -3951,7 +3951,7 @@ interpret@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.3.tgz#cbc35c62eeee73f19ab7b10a801511401afc0f90"
 
-invariant@^2.0.0, invariant@^2.2.0, invariant@^2.2.2:
+invariant@^2.0.0, invariant@^2.2.0, invariant@^2.2.1, invariant@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
   dependencies:
@@ -6432,7 +6432,7 @@ prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8:
     fbjs "^0.8.9"
     loose-envify "^1.3.1"
 
-prop-types@^15.6.0:
+prop-types@^15.5.6, prop-types@^15.6.0:
   version "15.6.0"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
   dependencies:
@@ -6580,6 +6580,13 @@ rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-broadcast@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/react-broadcast/-/react-broadcast-0.6.0.tgz#8c0b8d704fa50234c8dd3b071da996c04ca211b2"
+  dependencies:
+    invariant "^2.2.1"
+    prop-types "^15.5.6"
+
 react-codemirror2@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/react-codemirror2/-/react-codemirror2-2.0.2.tgz#68b2ae8923174a2b3d8b6fe905d0fd3c91d97d97"