Create Grid component

pages/components/docs/Grid.md

@@ -0,0 +1,24 @@
+# Grid
+
+Grid is a component that exposes grid system props. See the [CSS Tricks Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) to learn more about Grid Layout.
+
+## Default example
+
+```.jsx
+<Grid gridTemplateColumns="repeat(2, auto)" gridGap={3}>
+    <Box p={3} bg="blue.2">1</Box>
+    <Box p={3} bg="yellow.2">2</Box>
+</Grid>
+```
+
+## System props
+
+Grid components get `GRID`, `COMMON`, and `LAYOUT` system props.
+
+Read our [System Props](/components/docs/system-props) doc page for a full list of available props.
+
+## Component props
+
+`Grid` does not get any additional props other than the system props mentioned above.
+
+export const meta = {displayName: 'Grid'}

pages/components/docs/index.js

@@ -11,6 +11,7 @@ export {meta as Dropdown} from './Dropdown.md'
 export {meta as FilterList} from './FilterList.md'
 export {meta as Flash} from './Flash.md'
 export {meta as Flex} from './Flex.md'
+export {meta as Grid} from './Grid.md'
 export {meta as Heading} from './Heading.md'
 export {meta as Label} from './Label.md'
 export {meta as Link} from './Link.md'

pages/components/docs/system-props.md

@@ -1,4 +1,4 @@
-import {COMMON, LAYOUT, BORDER, TYPOGRAPHY, FLEX, POSITION} from '../../../src/constants.js'
+import {COMMON, LAYOUT, BORDER, TYPOGRAPHY, FLEX, POSITION, GRID} from '../../../src/constants.js'
 import {PropsList} from '../../doc-components'
 
 # System Props
@@ -20,3 +20,5 @@ To check which system props each component includes, check the documentation for
 | `LAYOUT` | <PropsList systemProps={LAYOUT}/>| [styled-system layout docs](https://github.com/jxnblk/styled-system/blob/master/docs/table.md#layout) <br/> [styled-system misc docs](https://github.com/jxnblk/styled-system/blob/master/docs/table.md#misc) |
 | `POSITION` | <PropsList systemProps={POSITION}/>| [styled-system position docs](https://github.com/jxnblk/styled-system/blob/master/docs/table.md#position)
 | `FLEX` | <PropsList systemProps={FLEX}/> | [styled-system flexbox docs](https://github.com/jxnblk/styled-system/blob/master/docs/table.md#flexbox) |
+| `GRID` | <PropsList systemProps={GRID}/> | [styled-system grid docs](https://github.com/styled-system/styled-system/blob/master/docs/table.md#grid-layout) |
+

src/Grid.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components'
+import {GRID} from './constants'
+import theme from './theme'
+import Box from './Box'
+
+const Grid = styled(Box)`
+  ${GRID};
+`
+
+Grid.defaultProps = {
+  theme,
+  display: 'grid'
+}
+
+Grid.propTypes = {
+  ...Box.propTypes,
+  ...GRID.propTypes
+}
+
+export default Grid

src/__tests__/Grid.js

@@ -0,0 +1,78 @@
+import React from 'react'
+import Grid from '../Grid'
+import {GRID} from '../constants'
+import {render} from '../utils/testing'
+
+describe('Grid', () => {
+  it('implements system props', () => {
+    expect(Grid).toImplementSystemProps(GRID)
+  })
+
+  it('has default theme', () => {
+    expect(Grid).toSetDefaultTheme()
+  })
+
+  it('gets display: grid by default', () => {
+    expect(render(<Grid />)).toHaveStyleRule('display', 'grid')
+  })
+
+  it('respects gridGap', () => {
+    expect(render(<Grid gridGap={1} />)).toMatchSnapshot()
+  })
+
+  it('respects gridColumnGap', () => {
+    expect(render(<Grid gridColumnGap={2} />)).toMatchSnapshot()
+  })
+
+  it('respects gridRowGap', () => {
+    expect(render(<Grid gridRowGap={2} />)).toMatchSnapshot()
+  })
+
+  it('respects gridColumn', () => {
+    expect(render(<Grid gridColumn="1 / 2" />)).toMatchSnapshot()
+  })
+
+  it('respects gridRow', () => {
+    expect(render(<Grid gridRow="1 / 2" />)).toMatchSnapshot()
+  })
+
+  it('respects gridArea', () => {
+    expect(render(<Grid gridArea="sidebar" />)).toMatchSnapshot()
+  })
+
+  it('respects gridAutoFlow', () => {
+    expect(render(<Grid gridAutoFlow="row" />)).toMatchSnapshot()
+  })
+
+  it('respects gridAutoRows', () => {
+    expect(render(<Grid gridAutoRows="1fr" />)).toMatchSnapshot()
+  })
+
+  it('respects gridAutoColumns', () => {
+    expect(render(<Grid gridAutoColumns="1fr" />)).toMatchSnapshot()
+  })
+
+  it('respects gridTemplateColumns', () => {
+    expect(render(<Grid gridTemplateColumns="200px 1fr" />)).toMatchSnapshot()
+  })
+
+  it('respects gridTemplateRows', () => {
+    expect(render(<Grid gridTemplateRows=" 200px 1fr" />)).toMatchSnapshot()
+  })
+
+  it('respects gridTemplateAreas', () => {
+    expect(render(<Grid gridTemplateAreas="sidebar  main" />)).toMatchSnapshot()
+  })
+
+  it('respects responsive display', () => {
+    expect(render(<Grid display={['grid', 'inline-grid']} />)).toMatchSnapshot()
+  })
+
+  it('respects the "as" prop', () => {
+    expect(render(<Grid as="span" />).type).toEqual('span')
+  })
+
+  it('renders a div by default', () => {
+    expect(render(<Grid />).type).toEqual('div')
+  })
+})

src/__tests__/__snapshots__/Grid.js.snap

@@ -0,0 +1,167 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Grid respects gridArea 1`] = `
+.c0 {
+  display: grid;
+  grid-area: sidebar;
+}
+
+<div
+  className="c0"
+  display="grid"
+/>
+`;
+
+exports[`Grid respects gridAutoColumns 1`] = `
+.c0 {
+  display: grid;
+  grid-auto-columns: 1fr;
+}
+
+<div
+  className="c0"
+  display="grid"
+/>
+`;
+
+exports[`Grid respects gridAutoFlow 1`] = `
+.c0 {
+  display: grid;
+  grid-auto-flow: row;
+}
+
+<div
+  className="c0"
+  display="grid"
+/>
+`;
+
+exports[`Grid respects gridAutoRows 1`] = `
+.c0 {
+  display: grid;
+  grid-auto-rows: 1fr;
+}
+
+<div
+  className="c0"
+  display="grid"
+/>
+`;
+
+exports[`Grid respects gridColumn 1`] = `
+.c0 {
+  display: grid;
+  grid-column: 1 / 2;
+}
+
+<div
+  className="c0"
+  display="grid"
+/>
+`;
+
+exports[`Grid respects gridColumnGap 1`] = `
+.c0 {
+  display: grid;
+  grid-column-gap: 8px;
+}
+
+<div
+  className="c0"
+  display="grid"
+/>
+`;
+
+exports[`Grid respects gridGap 1`] = `
+.c0 {
+  display: grid;
+  grid-gap: 4px;
+}
+
+<div
+  className="c0"
+  display="grid"
+/>
+`;
+
+exports[`Grid respects gridRow 1`] = `
+.c0 {
+  display: grid;
+  grid-row: 1 / 2;
+}
+
+<div
+  className="c0"
+  display="grid"
+/>
+`;
+
+exports[`Grid respects gridRowGap 1`] = `
+.c0 {
+  display: grid;
+  grid-row-gap: 8px;
+}
+
+<div
+  className="c0"
+  display="grid"
+/>
+`;
+
+exports[`Grid respects gridTemplateAreas 1`] = `
+.c0 {
+  display: grid;
+  grid-template-areas: sidebar main;
+}
+
+<div
+  className="c0"
+  display="grid"
+/>
+`;
+
+exports[`Grid respects gridTemplateColumns 1`] = `
+.c0 {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+}
+
+<div
+  className="c0"
+  display="grid"
+/>
+`;
+
+exports[`Grid respects gridTemplateRows 1`] = `
+.c0 {
+  display: grid;
+  grid-template-rows: 200px 1fr;
+}
+
+<div
+  className="c0"
+  display="grid"
+/>
+`;
+
+exports[`Grid respects responsive display 1`] = `
+.c0 {
+  display: grid;
+}
+
+@media screen and (min-width:544px) {
+  .c0 {
+    display: inline-grid;
+  }
+}
+
+<div
+  className="c0"
+  display={
+    Array [
+      "grid",
+      "inline-grid",
+    ]
+  }
+/>
+`;

src/constants.js

@@ -31,8 +31,10 @@ export const TYPOGRAPHY = styledSystem.typography
 export const LAYOUT = styledSystem.layout
 export const POSITION = styledSystem.position
 export const FLEX = styledSystem.flexbox
+export const GRID = styledSystem.grid
 
 TYPOGRAPHY.propTypes = systemPropTypes.typography
 LAYOUT.propTypes = systemPropTypes.layout
 POSITION.propTypes = systemPropTypes.position
 FLEX.propTypes = systemPropTypes.flexbox
+GRID.propTypes = systemPropTypes.grid

src/index.js

@@ -5,6 +5,7 @@ export {default as BaseStyles} from './BaseStyles'
 export {default as BorderBox} from './BorderBox'
 export {default as Box} from './Box'
 export {default as Flex} from './Flex'
+export {default as Grid} from './Grid'
 export {Position, Absolute, Fixed, Relative, Sticky} from './Position'
 
 // Components