refactoring base components to use styled-component string

ui/src/components/base-elements/index.js

@@ -4,17 +4,13 @@ const Styled = require('styled-components');
 const React = require('react');
 
 const fns = require('../../shared/functions');
-const constants = require('../../shared/constants');
 const composers = require('../../shared/composers');
+const typography = require('../../shared/composers/typography');
 
 const {
   default: styled
 } = Styled;
 
-const {
-  colors,
-} = constants;
-
 const {
   Baseline
 } = composers;
@@ -27,36 +23,40 @@ const {
 // before using !important
 const elements = [{
   name: 'H1',
-  properties: {
+  properties: `
-    'font-size': remcalc(36),
+    font-size: ${remcalc(36)};
-    'font-weight': 600,
+    font-style: normal;
-    'font-style': 'normal',
+    font-stretch: normal;
-    'font-stretch': 'normal',
+    margin: 0;
-    'color': colors.base.primaryLight,
+    
-    'margin': 0
+    ${typography.bold}
-  }
+  `
 }, {
   name: 'H2',
-  properties: {
+  properties: `
-    'font-size': remcalc(24),
+    font-size: ${remcalc(24)};
-  }
+    
+    ${typography.bold}
+  `
 }, {
   name: 'H3',
-  properties: {
+  properties: `
-    'font-size': remcalc(16),
+    font-size: ${remcalc(16)};
-  }
+    
+    ${typography.bold}
+  `
 }, {
   name: 'P',
-  properties: {
+  properties: `
-    'line-height': remcalc(24),
+    line-height: ${remcalc(24)};
-    'font-size': remcalc(16),
+    font-size: ${remcalc(16)};
-  }
+  `
 }, {
   name: 'Small',
-  properties: {
+  properties: `
-    'line-height': remcalc(18),
+    line-height: ${remcalc(18)};
-    'font-size': remcalc(14),
+    font-size: ${remcalc(14)};
-  },
+  `
 }];
 
 /*
@@ -70,7 +70,7 @@ const elements = [{
  */
 const BaseElements = elements.reduce((acc, {
   name = '',
-  properties = {}
+  properties = ''
 }) => {
   const StyledElement = styled[name.toLowerCase()]`
     ${properties}