From 06a93881c07df2b880279fa0de26476f30e865ee Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Wed, 1 Feb 2017 12:35:25 +0000
Subject: [PATCH] adding dev baseline grid - toggled on / off with env varibale
 in npm script

---
 frontend/package.json                     |  2 +-
 frontend/src/containers/app.js            | 17 ++++++--
 frontend/src/index.js                     |  1 -
 ui/src/components/baseline-grid/index.js  | 49 +++++++++++++++++++++++
 ui/src/components/baseline-grid/readme.md | 37 +++++++++++++++++
 ui/src/components/baseline-grid/style.css |  3 ++
 6 files changed, 104 insertions(+), 5 deletions(-)
 create mode 100644 ui/src/components/baseline-grid/index.js
 create mode 100644 ui/src/components/baseline-grid/readme.md
 create mode 100644 ui/src/components/baseline-grid/style.css

diff --git a/frontend/package.json b/frontend/package.json
index 8baf1065..377bfdb1 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,7 +9,7 @@
     "lib": "src"
   },
   "scripts": {
-    "start": "webpack-dev-server --open --config webpack/index.js",
+    "start": "webpack-dev-server --define process.env.BASELINE_GRID=true --open --config webpack/index.js ",
     "production": "node server",
     "lint": "make lint",
     "test": "make test",
diff --git a/frontend/src/containers/app.js b/frontend/src/containers/app.js
index 87ccdbc0..aa46b8bc 100644
--- a/frontend/src/containers/app.js
+++ b/frontend/src/containers/app.js
@@ -6,6 +6,7 @@ const Styled = require('styled-components');
 const actions = require('@state/actions');
 const Article = require('@components/article');
 const Base = require('@ui/components/base');
+const BaselineGrid = require('@ui/components/baseline-grid');
 const Footer = require('@components/footer');
 const Header = require('@containers/header');
 const Home = require('@containers/home');
@@ -57,13 +58,23 @@ const App = connect()(React.createClass({
       children
     } = this.props;
 
-    if (!Array.isArray(children)) {
-      return children;
+    let _children = children;
+
+    if (!Array.isArray(_children)) {
+      return _children;
+    }
+
+    if (process.env.NODE_ENV !== 'production' && process.env.BASELINE_GRID) {
+      _children = (
+        <BaselineGrid>
+          {_children}
+        </BaselineGrid>
+      );
     }
 
     return (
       <Base>
-        {children}
+        {_children}
       </Base>
     );
   }
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 25517994..0ae61dbd 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -10,7 +10,6 @@ if (process.env.NODE_ENV !== 'production') {
 
 const render = () => {
   const Root = require('./root');
-
   ReactDOM.render(
     <Root />,
     document.getElementById('root')
diff --git a/ui/src/components/baseline-grid/index.js b/ui/src/components/baseline-grid/index.js
new file mode 100644
index 00000000..4a3b1781
--- /dev/null
+++ b/ui/src/components/baseline-grid/index.js
@@ -0,0 +1,49 @@
+const React = require('react');
+const Styled = require('styled-components');
+
+const {
+  default: styled
+} = Styled;
+
+const StyledBaselineBackground = styled.div`
+  position: relative;
+  
+  &:after {
+    position: absolute;
+    width: auto;
+    height: auto;
+    z-index: 9999;
+    content: '';
+    display: block;
+    pointer-events: none;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: linear-gradient(
+      to bottom,
+      rgba(93, 150, 52, 0.50),
+      rgba(93, 150, 52, 0.50) 50%,
+      transparent 50%,
+      transparent
+    );
+    background-size: 100% 6px;
+  }
+`;
+
+const Baseline = ({
+  children
+}) => {
+
+  return (
+    <StyledBaselineBackground data-baseline>
+      {children}
+    </StyledBaselineBackground>
+  );
+};
+
+Baseline.propTypes = {
+  children: React.PropTypes.node,
+};
+
+module.exports = Baseline;
diff --git a/ui/src/components/baseline-grid/readme.md b/ui/src/components/baseline-grid/readme.md
new file mode 100644
index 00000000..e7d5b6a3
--- /dev/null
+++ b/ui/src/components/baseline-grid/readme.md
@@ -0,0 +1,37 @@
+# `<Icon>`
+
+## demo
+
+```embed
+const React = require('react');
+const ReactDOM = require('react-dom/server');
+const Base = require('../base');
+const Container = require('../container');
+const Row = require('../row');
+const Column = require('../column');
+const Icon = require('./index.js');
+const styles = require('./style.css');
+
+nmodule.exports = ReactDOM.renderToString(
+  <Base>
+    <Row>
+      <Column>
+        <Icon iconSet='fa' name='beer' />
+      </Column>
+    </Row>
+  </Base>
+);
+```
+
+## usage
+
+```js
+const React = require('react');
+const Icon = require('ui/icon');
+
+module.exports = () => {
+  return (
+    <Icon iconSet='fa' name='beer' />
+  );
+}
+```
diff --git a/ui/src/components/baseline-grid/style.css b/ui/src/components/baseline-grid/style.css
new file mode 100644
index 00000000..86e66eb4
--- /dev/null
+++ b/ui/src/components/baseline-grid/style.css
@@ -0,0 +1,3 @@
+.icon {
+  font-size: inherit;
+}