etc. etc.
+ *
+ * Valid props are:
+ * - width
+ * - largeWidth
+ * - medWidth
+ * - smallWidth
+ * - xSmallWidth
+ * - printWidth
+ */
+const Column = props => {
+ const {
+ width,
+ largeWidth = width,
+ medWidth = largeWidth,
+ smallWidth = medWidth,
+ xSmallWidth = smallWidth,
+ printWidth = xSmallWidth,
+
+ children,
+ style = {},
+ className = '',
+ marginBottom = false,
+ hidePrint = false,
+ } = props
+
+ return (
+
+ {children}
+
+ )
+}
+
+export { Column }
diff --git a/src/components/ExampleComponent.js b/src/components/ExampleComponent.js
index d8d42f1..03bdf05 100644
--- a/src/components/ExampleComponent.js
+++ b/src/components/ExampleComponent.js
@@ -1,7 +1,7 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
-export default class ExampleComponent extends Component {
+class ExampleComponent extends Component {
static propTypes = {
text: PropTypes.string,
}
@@ -12,3 +12,5 @@ export default class ExampleComponent extends Component {
return Example Component: {text}
}
}
+
+export { ExampleComponent }
diff --git a/src/components/Grid.js b/src/components/Grid.js
new file mode 100644
index 0000000..a93af0f
--- /dev/null
+++ b/src/components/Grid.js
@@ -0,0 +1,121 @@
+import React, { Children, cloneElement } from 'react'
+import styled from 'styled-components'
+import { isEmpty } from 'lodash'
+
+import { XXXLARGE, XLARGE, SMALL } from '../design-tokens/spacing'
+import { XL, L, M, S } from '../design-tokens/breakpoints'
+
+const StyledGrid = styled.div`
+ display: flex;
+ flex-wrap: wrap;
+ padding-left: ${props => (props.nested ? 0 : 2 * XXXLARGE)}px;
+ padding-right: ${props => (props.nested ? 0 : 2 * XXXLARGE)}px;
+ width: 100%;
+
+ @media screen and (max-width: ${XL}px) {
+ padding-left: ${props => (props.nested ? 0 : XXXLARGE)}px;
+ padding-right: ${props => (props.nested ? 0 : XXXLARGE)}px;
+ }
+
+ @media screen and (max-width: ${L}px) {
+ padding-left: ${props => (props.nested ? 0 : XLARGE)}px;
+ padding-right: ${props => (props.nested ? 0 : XLARGE)}px;
+ }
+
+ @media screen and (max-width: ${M}px) {
+ padding-left: ${props => (props.nested ? 0 : 2 * SMALL)}px;
+ padding-right: ${props => (props.nested ? 0 : 2 * SMALL)}px;
+ }
+
+ @media print {
+ display: ${props => (props.hidePrint ? 'none !important' : 'flex')};
+ padding-left: ${props => (props.nested ? 0 : SMALL)}px;
+ padding-right: ${props => (props.nested ? 0 : SMALL)}px;
+ }
+`
+
+/**
+ * Direct children of a Grid should *only* be Columns.
+ * Without any configuration, will automatically set left and right padding to take
+ * up (nearly) the entire screen. If the `nested` boolean prop is set, then
+ * there won't be any left or right padding (for nested Grids).
+ */
+const Grid = ({
+ children,
+ style = {},
+ nested = false,
+ hidePrint = false,
+ className = '',
+}) => {
+ let XLcols = 0
+ let Lcols = 0
+ let Mcols = 0
+ let Scols = 0
+ let XScols = 0
+
+ return (
+
+ {Children.toArray(children).map(child => {
+ const XLwidth = child.props.width
+ const Lwidth =
+ child.props.largeWidth !== undefined
+ ? child.props.largeWidth
+ : XLwidth
+ const Mwidth =
+ child.props.medWidth !== undefined ? child.props.medWidth : Lwidth
+ const Swidth =
+ child.props.smallWidth !== undefined ? child.props.smallWidth : Mwidth
+ const XSwidth =
+ child.props.xSmallWidth !== undefined
+ ? child.props.xSmallWidth
+ : Swidth
+
+ XLcols += XLwidth
+ Lcols += Lwidth
+ Mcols += Mwidth
+ Scols += Swidth
+ XScols += XSwidth
+
+ const addlProps = {}
+
+ if (XLcols === 12) {
+ addlProps.XLlast = true
+ XLcols = 0
+ }
+
+ if (Lcols === 12) {
+ addlProps.Llast = true
+ Lcols = 0
+ }
+
+ if (Mcols === 12) {
+ addlProps.Mlast = true
+ Mcols = 0
+ }
+
+ if (Scols === 12) {
+ addlProps.Slast = true
+ Scols = 0
+ }
+
+ if (XScols === 12) {
+ addlProps.XSlast = true
+ XScols = 0
+ }
+
+ if (!isEmpty(addlProps)) {
+ child = cloneElement(child, Object.assign({}, child.props, addlProps))
+ }
+
+ return child
+ })}
+
+ )
+}
+
+export { Grid }
diff --git a/src/components/StyledExample.js b/src/components/StyledExample.js
index dace2c0..9f26943 100644
--- a/src/components/StyledExample.js
+++ b/src/components/StyledExample.js
@@ -5,4 +5,4 @@ const StyledExample = styled.div`
background-color: green;
`
-export default StyledExample
+export { StyledExample }
diff --git a/src/design-tokens/breakpoints.js b/src/design-tokens/breakpoints.js
new file mode 100644
index 0000000..f932f63
--- /dev/null
+++ b/src/design-tokens/breakpoints.js
@@ -0,0 +1,4 @@
+export const XL = 1720
+export const L = 1024
+export const M = 768
+export const S = 420
diff --git a/src/design-tokens/spacing.js b/src/design-tokens/spacing.js
index e69de29..ca3737c 100644
--- a/src/design-tokens/spacing.js
+++ b/src/design-tokens/spacing.js
@@ -0,0 +1,8 @@
+export const TINY = 8
+export const SMALL = 16
+export const NORMAL = 24
+export const MEDIUM = 40
+export const LARGE = 64
+export const XLARGE = 80
+export const XXLARGE = 96
+export const XXXLARGE = 112
diff --git a/src/index.js b/src/index.js
index 5e2a7bd..c06de74 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,28 +1,9 @@
-import Button from './components/Button'
-import ExampleComponent from './components/ExampleComponent'
-import StyledExample from './components/StyledExample'
-import { JUMBO, XXL, XL, L, M, S, XS, XXS } from './design-tokens/font-sizes'
-import {
- DAWN,
- LIGHT_PURPLE,
- PURPLE,
- DARK_PURPLE,
- LIGHT_PINK,
- PINK,
- DARK_PINK,
- WHITE,
- LIGHT_CHARCOAL,
- CHARCOAL,
- DARK_CHARCOAL,
- NEUTRAL,
- POSITIVE,
- NEGATIVE,
- WARNING,
-} from './design-tokens/colors'
-
/***** COMPONENTS *****/
-export { Button }
-export { ExampleComponent, StyledExample }
+export { Button } from './components/Button'
+export { ExampleComponent } from './components/ExampleComponent'
+export { StyledExample } from './components/StyledExample'
+export { Grid } from './components/Grid'
+export { Column } from './components/Column'
/***** DESIGN TOKENS *****/
// Colors
@@ -42,7 +23,7 @@ export {
POSITIVE,
NEGATIVE,
WARNING,
-}
+} from './design-tokens/colors'
// Font Sizes
export {
@@ -54,4 +35,4 @@ export {
S as FONT_S,
XS as FONT_XS,
XXS as FONT_XXS,
-}
+} from './design-tokens/font-sizes'
diff --git a/stories/components/Grid.stories.js b/stories/components/Grid.stories.js
new file mode 100644
index 0000000..0180346
--- /dev/null
+++ b/stories/components/Grid.stories.js
@@ -0,0 +1,39 @@
+import React from 'react'
+import styled from 'styled-components'
+import { storiesOf } from '@storybook/react'
+import { number } from '@storybook/addon-knobs'
+
+import { Grid, Column } from '../../src'
+
+const GrayCol = styled(Column)`
+ background: #eee;
+ padding: 4px;
+`
+
+storiesOf('Components', module).add('Grid', () => {
+ const columnWidth = number('Column width', 3, {
+ range: true,
+ min: 1,
+ max: 12,
+ step: 1,
+ })
+ const numColumns = Math.floor(12 / columnWidth)
+ let columns = []
+
+ for (let i = 0; i < numColumns; i++) {
+ columns.push(
+
+ Dynamic: {columnWidth}
+
+ )
+ }
+
+ return (
+
+
+ Column: Width 12
+
+ {columns}
+
+ )
+})