Grid system

.nvmrc

@@ -0,0 +1 @@
+10.15.0

.storybook/preview-head.html

@@ -0,0 +1,7 @@
+<style>
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+</style>

package.json

@@ -1,10 +1,10 @@
 {
-  "name": "isl-components",
+  "name": "@isl/isl-components",
   "version": "1.0.0",
   "description": "Reusable components for ISL",
   "author": "alexbarbato",
   "license": "MIT",
-  "repository": "alexbarbato/isl-components",
+  "repository": "https://github.com/istrategylabs/isl-components",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "jsnext:main": "dist/index.es.js",
@@ -22,6 +22,7 @@
     "deploy": "gh-pages -d example/build"
   },
   "peerDependencies": {
+    "lodash": "^4.17.11",
     "prop-types": "^15.5.4",
     "react": "^15.0.0 || ^16.0.0",
     "react-dom": "^15.0.0 || ^16.0.0",
@@ -57,7 +58,6 @@
   "files": [
     "dist"
   ],
-  "dependencies": {},
   "prettier": {
     "trailingComma": "es5",
     "tabWidth": 2,

src/components/Button.js

@@ -4,4 +4,4 @@ const Button = ({ children, disabled }) => (
   <button disabled={disabled}>{children}</button>
 )
 
-export default Button
+export { Button }

src/components/Column.js

@@ -0,0 +1,113 @@
+import React from 'react'
+import styled from 'styled-components'
+import { XL, L, M, S } from '../design-tokens/breakpoints'
+import { SMALL } from '../design-tokens/spacing'
+
+const sub = (gutter, cols) =>
+  (cols * 11 * gutter - 12 * (cols - 1) * gutter) / 12
+
+const StyledColumn = styled.div`
+  margin-bottom: ${props => (props.marginBottom ? SMALL : 0)}px;
+  margin-right: ${props => (props.XSlast ? 0 : SMALL)}px;
+  width: calc(
+    ${props => (100 * props.xSmallWidth) / 12}% -
+      ${props => sub(SMALL, props.xSmallWidth)}px
+  );
+
+  @media screen and (min-width: ${S + 1}px) {
+    margin-bottom: ${props => (props.marginBottom ? SMALL : 0)}px;
+    margin-right: ${props => (props.Slast ? 0 : SMALL)}px;
+    width: calc(
+      ${props => (100 * props.smallWidth) / 12}% -
+        ${props => sub(SMALL, props.smallWidth)}px
+    );
+  }
+
+  @media screen and (min-width: ${M + 1}px) {
+    margin-bottom: ${props => (props.marginBottom ? SMALL : 0)}px;
+    margin-right: ${props => (props.Mlast ? 0 : SMALL)}px;
+    width: calc(
+      ${props => (100 * props.medWidth) / 12}% -
+        ${props => sub(SMALL, props.medWidth)}px
+    );
+  }
+
+  @media screen and (min-width: ${L + 1}px) {
+    margin-bottom: ${props => (props.marginBottom ? SMALL : 0)}px;
+    margin-right: ${props => (props.Llast ? 0 : SMALL)}px;
+    width: calc(
+      ${props => (100 * props.largeWidth) / 12}% -
+        ${props => sub(SMALL, props.largeWidth)}px
+    );
+  }
+
+  @media screen and (min-width: ${XL + 1}px) {
+    margin-bottom: ${props => (props.marginBottom ? 2 * SMALL : 0)}px;
+    margin-right: ${props => (props.XLlast ? 0 : 2 * SMALL)}px;
+    width: calc(
+      ${props => (100 * props.width) / 12}% -
+        ${props => sub(2 * SMALL, props.width)}px
+    );
+  }
+
+  @media print {
+    display: ${props => (props.hidePrint ? 'none !important' : 'block')};
+    width: calc(
+      ${props => (100 * props.printWidth) / 12}% -
+        ${props => sub(2 * SMALL, props.printWidth)}px
+    );
+  }
+`
+
+/**
+ * Columns should always, always be direct children of Grids.
+ * They can contain whatever children you might want. The `width` prop is required,
+ * and sets the Column's width at the largest level (>1440px). At smaller screen sizes, the width
+ * is inferred from the next largest size. So:
+ *
+ * <Column width={4}> will always be 4-wide.
+ * <Column width={4} largeWidth={6}> will be 4-wide above 1440px, 6-wide at 1440px and below.
+ * <Column width={4} largeWidth={6} medWidth={12}> 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 (
+    <StyledColumn
+      style={style}
+      width={width}
+      largeWidth={largeWidth}
+      medWidth={medWidth}
+      smallWidth={smallWidth}
+      xSmallWidth={xSmallWidth}
+      marginBottom={marginBottom}
+      hidePrint={hidePrint}
+      {...props}
+    >
+      {children}
+    </StyledColumn>
+  )
+}
+
+export { Column }

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 <div>Example Component: {text}</div>
   }
 }
+
+export { ExampleComponent }