feat(flexgrid): add css styles

- centred for horizontal centring
- limitedWidth for fixed widths at various breakpoints
- gutterless for children that have no gutter

src/components/FlexGrid/Col.jsx

@@ -27,7 +27,7 @@ const Col = ({ span, offset, children, ...rest }) => (
         {...removeProps(rest)}
         xs={span || true}
         xsOffset={offset}
-        style={gutterStyle}
+        className={gutterStyle}
       >
         {children}
       </ReactFlexboxGridCol>

src/components/FlexGrid/FlexGrid.jsx

@@ -1,27 +1,43 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Broadcast } from 'react-broadcast'
-
 import { Grid } from 'react-flexbox-grid'
 
 import safeRest from '../../utils/safeRest'
+import joinClassNames from '../../utils/joinClassNames'
+import styles from './FlexGrid.modules.scss'
 
 import Col from './Col'
 import Row from './Row'
 
-const FlexGrid = ({ gutter, children, ...rest }) => {
-  const gutterStyle = gutter ? undefined : { padding: 0, margin: 0 }
+const getClasses = (centre, limitedWidth, gutterless) =>
+  joinClassNames(
+    centre && styles.centre,
+    limitedWidth && styles.limitedWidth,
+    gutterless && styles.gutterless
+  )
+
+const FlexGrid = ({ centre, limitedWidth, gutter, children, ...rest }) => {
+  const gutterStyle = gutter ? undefined : styles.gutterless
 
   return (
     <Broadcast channel="flex-grid" value={gutterStyle}>
-      <Grid {...safeRest(rest)} fluid style={gutterStyle}>
+      <Grid {...safeRest(rest)} fluid className={getClasses(centre, limitedWidth, !gutter)}>
         {children}
       </Grid>
     </Broadcast>
   )
 }
 
 FlexGrid.propTypes = {
+  /**
+   * Centres the grid horizontally. This is useful when using `limitedWidth`.
+   */
+  centre: PropTypes.bool,
+  /**
+   * Whether or not to give the grid a fixed width.
+   */
+  limitedWidth: PropTypes.bool,
   /**
    * Whether or not to include gutters in between columns.
    */
@@ -34,6 +50,8 @@ FlexGrid.propTypes = {
 }
 
 FlexGrid.defaultProps = {
+  centre: undefined,
+  limitedWidth: undefined,
   gutter: true,
 }
 

src/components/FlexGrid/FlexGrid.modules.scss

@@ -0,0 +1,20 @@
+@import '../../scss/settings/responsive-grid';
+@import '../../scss/utility/responsive';
+
+$max-widths: (xs: auto, small: 544px, medium: 736px, large: 960px, xl: 1168px);
+
+.limitedWidth {
+  @each $viewport, $max-width in $max-widths {
+    @include from-breakpoint($viewport) {
+      max-width: $max-width;
+    }
+  }
+}
+
+.gutterless {
+  padding: 0;
+}
+
+.centre {
+  margin: 0 auto;
+}

src/components/FlexGrid/Row.jsx

@@ -9,7 +9,7 @@ import safeRest from '../../utils/safeRest'
 const Row = ({ children, ...rest }) => (
   <Subscriber channel="flex-grid">
     {gutterStyle => (
-      <ReactFlexboxGridRow {...safeRest(rest)} style={gutterStyle}>
+      <ReactFlexboxGridRow {...safeRest(rest)} className={gutterStyle}>
         {children}
       </ReactFlexboxGridRow>
     )}

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

@@ -1,10 +1,11 @@
 import React from 'react'
 import { mount, render } from 'enzyme'
-
 import { Grid } from 'react-flexbox-grid'
 
 import FlexGrid from '../FlexGrid'
 
+import mockMatchMedia from '../../../__mocks__/matchMedia'
+
 describe('FlexGrid', () => {
   const doMount = (props = {}) => {
     const flexGrid = mount(
@@ -23,11 +24,6 @@ describe('FlexGrid', () => {
     }
   }
 
-  const expectToHaveNoGutter = element => {
-    expect(element).toHaveStyle('padding', 0)
-    expect(element).toHaveStyle('margin', 0)
-  }
-
   it('renders', () => {
     const flexGrid = render(
       <FlexGrid>
@@ -60,9 +56,9 @@ describe('FlexGrid', () => {
     const col2 = findColumn(2)
     const row = findRow(1)
 
-    expectToHaveNoGutter(col1)
-    expectToHaveNoGutter(col2)
-    expectToHaveNoGutter(row)
+    expect(col1).toHaveClassName('gutterless')
+    expect(col2).toHaveClassName('gutterless')
+    expect(row).toHaveClassName('gutterless')
   })
 
   it('passes additional attributes to the element', () => {
@@ -72,6 +68,19 @@ describe('FlexGrid', () => {
     expect(flexGrid).toHaveProp('data-some-attr', 'some value')
   })
 
+  it('can have limited width at various viewport sizes', () => {
+    mockMatchMedia(360)
+    const { flexGrid } = doMount({ limitedWidth: true })
+
+    expect(flexGrid).toHaveClassName('limitedWidth')
+  })
+
+  it('can be horizontally centred', () => {
+    const { flexGrid } = doMount({ limitedWidth: true, centre: true })
+
+    expect(flexGrid).toHaveClassName('centre')
+  })
+
   it('does not allow custom CSS', () => {
     const { flexGrid } = doMount({
       className: 'my-custom-class',