From dbe3289bb648371adf764e3cd07f83e34b69d7fd Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Mon, 16 Jan 2017 17:38:21 +0000
Subject: [PATCH] creating base elements component loop

---
 frontend/src/components/section/index.js |  2 +-
 ui/src/components/base-elements/index.js | 68 ++++++++++++++++++++++++
 ui/src/components/base-elements/story.js | 26 +++++++++
 ui/src/components/base/index.js          |  1 -
 ui/src/components/h1/index.js            | 23 --------
 ui/src/index.js                          |  1 +
 ui/test/index.js                         | 12 +++++
 7 files changed, 108 insertions(+), 25 deletions(-)
 create mode 100644 ui/src/components/base-elements/index.js
 create mode 100644 ui/src/components/base-elements/story.js
 delete mode 100644 ui/src/components/h1/index.js

diff --git a/frontend/src/components/section/index.js b/frontend/src/components/section/index.js
index a4579555..f3f92154 100644
--- a/frontend/src/components/section/index.js
+++ b/frontend/src/components/section/index.js
@@ -3,7 +3,7 @@ const React = require('react');
 const ReactIntl = require('react-intl');
 const ReactRouter = require('react-router');
 
-const H1 = require('@ui/components/h1');
+const H1 = require('@ui/components/base-elements').H1;
 const Li = require('@ui/components/horizontal-list/li');
 const PropTypes = require('@root/prop-types');
 const Ul = require('@ui/components/horizontal-list/ul');
diff --git a/ui/src/components/base-elements/index.js b/ui/src/components/base-elements/index.js
new file mode 100644
index 00000000..cf65f744
--- /dev/null
+++ b/ui/src/components/base-elements/index.js
@@ -0,0 +1,68 @@
+/* eslint react/prop-types: 0 */
+
+const Styled = require('styled-components');
+const React = require('react');
+
+const {
+  default: styled
+} = Styled;
+
+
+// If specificity is an issue (i.e nested elements) check base/index.js first
+// before using !important
+const elements = [
+  {
+    name: 'h1',
+    properties: {
+      'line-height': '70px',
+      'font-size': '60px'
+    }
+  },
+  {
+    name: 'h2',
+    properties: {
+      'line-height': '60px',
+      'font-size': '40px'
+    }
+  }
+];
+
+/*
+ Loop over each item in element array.
+ Create styled component for each name, and
+ use properties from object as styles
+ Then export all Base Elements.
+
+ Usage:
+ const H1 = require(base-components).H1;
+ */
+
+const BaseElements = {};
+
+elements.forEach( element => {
+  const ElementNameToUpper = element.name.toUpperCase();
+
+  BaseElements[ElementNameToUpper] = ({
+    children,
+    style
+  }) => {
+
+    const StyledElement = styled[element.name.toLowerCase()]`
+      ${element.properties}
+    `;
+
+    return (
+      <StyledElement style={style}>
+        {children}
+      </StyledElement>
+    );
+  };
+
+  // TODO: Fix proptype validation and remove eslint ignore line 1
+  BaseElements[ElementNameToUpper].propTypes = {
+    children: React.PropTypes.node,
+    style: React.PropTypes.object,
+  };
+});
+
+module.exports = BaseElements;
\ No newline at end of file
diff --git a/ui/src/components/base-elements/story.js b/ui/src/components/base-elements/story.js
new file mode 100644
index 00000000..0c910dc0
--- /dev/null
+++ b/ui/src/components/base-elements/story.js
@@ -0,0 +1,26 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Base = require('../base');
+const BaseElements = require('./');
+
+const {
+  H1,
+  H2
+} = BaseElements;
+
+storiesOf('Base Elements', module)
+  .add('H1', () => (
+    <Base>
+      <H1>This is a H1</H1>
+    </Base>
+  ))
+  .add('H2', () => (
+    <Base>
+      <H2>This is a H2</H2>
+    </Base>
+  ))
+;
\ No newline at end of file
diff --git a/ui/src/components/base/index.js b/ui/src/components/base/index.js
index abd96976..fd2069f0 100644
--- a/ui/src/components/base/index.js
+++ b/ui/src/components/base/index.js
@@ -96,7 +96,6 @@ module.exports = styled.div`
   }
 
   & h1 {
-    font-size: 2em;
     margin: 0.67em 0;
   }
 
diff --git a/ui/src/components/h1/index.js b/ui/src/components/h1/index.js
deleted file mode 100644
index 9cd26797..00000000
--- a/ui/src/components/h1/index.js
+++ /dev/null
@@ -1,23 +0,0 @@
-const fns = require('../../shared/functions');
-const Styled = require('styled-components');
-
-const {
-  remcalc
-} = fns;
-
-const {
-  default: styled
-} = Styled;
-
-module.exports = styled.h1`
-  font-size: ${remcalc(36)};
-  font-weight: 600;
-  font-style: normal;
-  font-stretch: normal;
-  color: #364acd;
-  border-bottom: ${remcalc(1)} solid #d8d8d8;
-
-  & a {
-    text-decoration: none;
-  }
-`;
diff --git a/ui/src/index.js b/ui/src/index.js
index bd8efb81..b4b50039 100644
--- a/ui/src/index.js
+++ b/ui/src/index.js
@@ -27,4 +27,5 @@ module.exports = {
   Tooltip: require('./components/tooltip'),
   Textarea: require('./components/textarea'),
   Widget: require('./components/widget'),
+  BaseElements: require('./components/base-elements'),
 };
diff --git a/ui/test/index.js b/ui/test/index.js
index 8ef664a9..74f8bcd6 100644
--- a/ui/test/index.js
+++ b/ui/test/index.js
@@ -131,3 +131,15 @@ test('renders <Tooltip> without exploding', (t) => {
   const wrapper = shallow(<Tooltip />);
   t.deepEqual(wrapper.length, 1);
 });
+
+test('renders <H1> without exploding', (t) => {
+  const H1 = require('../src/components/base-elements').H1;
+  const wrapper = shallow(<H1 />);
+  t.deepEqual(wrapper.length, 1);
+});
+
+test('renders <H2> without exploding', (t) => {
+  const H2 = require('../src/components/base-elements').H2;
+  const wrapper = shallow(<H2 />);
+  t.deepEqual(wrapper.length, 1);
+});