creating base elements component loop

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');

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;

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>
+  ))
+;

ui/src/components/base/index.js

@@ -96,7 +96,6 @@ module.exports = styled.div`
   }
 
   & h1 {
-    font-size: 2em;
     margin: 0.67em 0;
   }
 

ui/src/components/h1/index.js

@@ -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;
-  }
-`;

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'),
 };

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);
+});