Merge pull request #20 from JSBros/fixes

v0.2.0 Release

CHANGELOG.md

@@ -12,6 +12,20 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ### Changed
 
+## [v0.2.0] - 2016-11-12
+
+### Added
+
+- New `Page` component! Use this as a top-level wrapper.
+- Added a new debug mode! Add the `debug` property to any `Row` component to try it out.
+- Added `xs` property to `Column`
+- Added `xsShift` property to `Column`
+
+### Changed
+
+- Switched the `children` property of the `Row` component to be a `node` instead of an `element`.
+- Refactored media utility.
+
 ## [v0.1.3] - 2016-11-11
 
 ### Added
@@ -44,7 +58,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 - Made progress on code comments
 - Various linting
 
-[Unreleased]: https://github.com/JSBros/hedron/compare/v0.1.3...master
+[Unreleased]: https://github.com/JSBros/hedron/compare/v0.2.0...master
+[v0.2.0]: https://github.com/JSBros/hedron/compare/v0.1.3...v0.2.0
 [v0.1.3]: https://github.com/JSBros/hedron/compare/v0.1.2...v0.1.3
 [v0.1.2]: https://github.com/JSBros/hedron/compare/v0.1.1...v0.1.2
 [v0.1.1]: https://github.com/JSBros/hedron/compare/v0.1.0...v0.1.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hedron",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "A no-frills flexbox grid system for React.",
   "main": "dist/hedron.js",
   "author": {

src/components/Column.js

@@ -5,8 +5,9 @@ import { divvy, media } from '../utils';
 
 
 function ColumnContainer(props) {
-  const { divisions, fluid, xs, sm, md, lg,
-          smShift, mdShift, lgShift, ...rest } = props;
+  const { debug, divisions, fluid, xs, sm, md, lg,
+    xsShift, smShift, mdShift, lgShift,
+    ...rest } = props;
   return <div {...rest} />;
 }
 
@@ -19,6 +20,7 @@ ColumnContainer.propTypes = {
   sm: React.PropTypes.number,
   md: React.PropTypes.number,
   lg: React.PropTypes.number,
+  xsShift: React.PropTypes.number,
   smShift: React.PropTypes.number,
   mdShift: React.PropTypes.number,
   lgShift: React.PropTypes.number
@@ -30,39 +32,59 @@ ColumnContainer.defaultProps = {
 
 const Column = styled(ColumnContainer)`
   display: block;
+  ${props => props.debug ? `background-color: rgba(50, 50, 255, .1);
+  border: 1px solid #fff;` : ''}
   box-sizing: border-box;
-  ${props => props.fluid ? 'padding: 0;' : 'padding: 20px;'}
+  ${props =>
+    props.fluid ? 'padding: 0;' : 'padding: 20px;'
+  }
   width: 100%;
-  ${props => props.xsShift ? `
-    margin-left: ${divvy(props.divisions) * props.xsShift}%;
-  ` : ''}
-
+  ${props =>
+    props.xs
+      ? `width: ${divvy(props.divisions) * props.xs}%;`
+      : null
+  }
+  ${props =>
+    props.xsShift
+      ? `margin-left: ${divvy(props.divisions) * props.xsShift}%;`
+      : null
+  }
   ${media.sm`
-    ${props => props.sm ? `
-      width: ${divvy(props.divisions) * props.sm}%;
-    ` : ''}
-    ${props => props.smShift ? `
-      margin-left: ${divvy(props.divisions) * props.smShift}%;
-    ` : ''}
+    ${props =>
+      props.sm
+        ? `width: ${divvy(props.divisions) * props.sm}%;`
+        : null
+    }
+    ${props => props.smShift
+        ? `margin-left: ${divvy(props.divisions) * props.smShift}%;`
+        : null
+    }
   `}
   ${media.md`
-    ${props => props.md ? `
-      width: ${divvy(props.divisions) * props.md}%;
-    ` : ''}
-    ${props => props.mdShift ? `
-      margin-left: ${divvy(props.divisions) * props.mdShift}%;
-    ` : ''}
+    ${props =>
+      props.md
+        ? `width: ${divvy(props.divisions) * props.md}%;`
+        : null
+    }
+    ${props =>
+      props.mdShift
+        ? `margin-left: ${divvy(props.divisions) * props.mdShift}%;`
+        : null
+    }
   `}
   ${media.lg`
-    ${props => props.lg ? `
-      width: ${divvy(props.divisions) * props.lg}%;
-    ` : ''}
-    ${props => props.lgShift ? `
-      margin-left: ${divvy(props.divisions) * props.lgShift}%;
-    ` : ''}
+    ${props =>
+      props.lg
+        ? `width: ${divvy(props.divisions) * props.lg}%;`
+        : null
+    }
+    ${props =>
+      props.lgShift
+        ? `margin-left: ${divvy(props.divisions) * props.lgShift}%;`
+        : null
+    }
   `}
 `;
 
-
 export default Column;
 

src/components/Page.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Page = styled.div`
+  ${props =>
+    props.fluid
+    ? 'width: 100%;'
+      : `
+      margin: 0 auto;
+      max-width: 100%;
+      ${props.width
+        ? `
+          width: ${props.width};
+        `
+        : 'width: 960px;'
+      }
+    `
+  }
+`;
+
+Page.propTypes = {
+  fluid: React.PropTypes.bool,
+  width: React.PropTypes.string
+};
+
+export default Page;
+

src/components/Row.js

@@ -5,18 +5,20 @@ import { divvy } from '../utils';
 
 
 function RowContainer(props) {
-  const { children, divisions, ...rest } = props;
+  const { children, debug, divisions, ...rest } = props;
   const scaledChildren = React.Children.map(children,
     child => React.cloneElement(child, {
+      debug,
       divisions
     })
   );
   return <section {...rest}>{scaledChildren}</section>;
 }
 
 RowContainer.propTypes = {
-  children: React.PropTypes.element,
+  children: React.PropTypes.node,
   className: React.PropTypes.string,
+  debug: React.PropTypes.bool,
   divisions: React.PropTypes.number
 };
 

src/index.js

@@ -1,11 +1,12 @@
 import Column from './components/Column';
 import Row from './components/Row';
+import Page from './components/Page';
 import { divvy, media } from './utils';
 
 const utils = {
   divvy,
   media
 };
 
-export { Column, Row, utils };
+export { Column, Page, Row, utils };
 

src/utils/media.js

@@ -1,20 +1,18 @@
 import { css } from 'styled-components';
 
-export default {
-  sm: (...args) => css`
-    @media (min-width: 500px) {
-      ${css(...args)}
-    }
-  `,
-  md: (...args) => css`
-    @media (min-width: 768px) {
-      ${css(...args)}
-    }
-  `,
-  lg: (...args) => css`
-    @media (min-width: 1100px) {
+const sizes = {
+  sm: 500,
+  md: 768,
+  lg: 1100
+};
+
+export default Object.keys(sizes).reduce((acc, label) => {
+  const accumulator = acc;
+  accumulator[label] = (...args) => css`
+    @media (min-width: ${sizes[label]}px) {
       ${css(...args)}
     }
-  `,
-};
+  `;
+  return accumulator;
+}, {});