adding in new typography styles and creating composers where appropriate

frontend/src/components/breadcrumb/index.js

@@ -20,7 +20,7 @@ const {
 } = constants;
 
 const {
-  H1,
+  H2,
 } = BaseElements;
 
 const {
@@ -66,6 +66,10 @@ function getNameLink(name) {
   }));
 }
 
+const StyledH2 = styled(H2)`
+  color: ${colors.base.primary};
+`;
+
 const Breadcrumb = ({
   children,
   links = [],
@@ -76,9 +80,9 @@ const Breadcrumb = ({
       <Row>
         <Column xs={12}>
           <StyledDiv>
-            <H1>
+            <StyledH2>
               {getNameLink(name)}
-            </H1>
+            </StyledH2>
           </StyledDiv>
         </Column>
       </Row>

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

@@ -4,9 +4,17 @@ const {
   storiesOf
 } = require('@kadira/storybook');
 
+const constants = require('../../shared/constants');
+
+const Column = require('../column');
+const Row = require('../row');
 const Base = require('../base');
 const BaseElements = require('./');
 
+const {
+  colors
+} = constants;
+
 const {
   H1,
   H2,
@@ -41,4 +49,60 @@ storiesOf('Base Elements', module)
       <Small>This is a Small</Small>
     </Base>
   ))
+  .add('Style Guide', () => (
+    <Base>
+      <div>
+        <Row>
+          <Column>
+            <H1>Special Heading - H1</H1>
+            <ul>
+              <li>Size - 36px</li>
+              <li>Line Height - 42px</li>
+              <li>Color - <code>{colors.base.secondary}</code></li>
+            </ul>
+          </Column>
+        </Row>
+        <Row>
+          <Column>
+            <H2>Standard Heading - H2</H2>
+            <ul>
+              <li>Size - 24px</li>
+              <li>Line Height - 36px</li>
+              <li>Color - <code>{colors.base.secondary}</code></li>
+            </ul>
+          </Column>
+        </Row>
+        <Row>
+          <Column>
+            <H3>Sub Heading - H3</H3>
+            <ul>
+              <li>Size - 16px</li>
+              <li>Line Height - 24px</li>
+              <li>Color - <code>{colors.base.secondary}</code></li>
+            </ul>
+          </Column>
+        </Row>
+        <Row>
+          <Column>
+            <P>Body Copy</P>
+            <ul>
+              <li>Size - 16px</li>
+              <li>Line Height - 24px</li>
+              <li>Color - <code>{colors.base.text}</code></li>
+            </ul>
+          </Column>
+        </Row>
+        <Row>
+          <Column>
+            <Small>Small Body Copy</Small>
+            <ul>
+              <li>Size - 14px</li>
+              <li>Line Height - 18px</li>
+              <li>Color - <code>{colors.base.text}</code></li>
+            </ul>
+          </Column>
+        </Row>
+      </div>
+    </Base>
+  ))
 ;

ui/src/components/colors/story.js

@@ -43,7 +43,9 @@ const convertCase = (val) => {
 
 storiesOf('Colors', module)
   .add('default', () => {
-    const renderColors = Object.keys(colors.base).sort().map( (color, index) => {
+    const renderColors = Object.keys(colors.base)
+        .sort()
+        .map( (color, index) => {
 
           const StyledSquare = styled(Square)`
             background: ${colors.base[color]}

ui/src/components/typography/story.js

@@ -1,54 +0,0 @@
-const React = require('react');
-const Styled = require('styled-components');
-
-const constants = require('../../shared/constants');
-const Column = require('../column');
-const Row = require('../row');
-const BaseElements = require('../base-elements');
-
-const {
-  default: styled
-} = Styled;
-
-const {
-  storiesOf
-} = require('@kadira/storybook');
-
-const {
-  colors
-} = constants;
-
-const {
-  H1,
-  H2,
-  H3,
-  P,
-} = BaseElements;
-
-const StyledWrapper = styled.div`
-  display: inline-block;
-  float: left;
-  margin-left: 20px;
-`;
-
-const Square = styled.div`
-  display: inline-block;
-  width: 100px;
-  height: 100px
-`;
-
-storiesOf('Typography', module)
-  .add('default', () => {
-    return (
-      <Row>
-        <Column>
-          <H2>Special Heading - H1</H2>
-          <ul>
-            <li>Size - 36px</li>
-            <li>Line Height - 42px</li>
-            <li>Color- <pre>Some Hex</pre></li>
-          </ul>
-        </Column>
-      </Row>
-    );
-  });

ui/src/shared/composers/typography.js

@@ -0,0 +1,28 @@
+const Styled = require('styled-components');
+const constants = require('../../shared/constants');
+
+const {
+  colors
+} = constants;
+
+const {
+  css
+} = Styled;
+
+module.export = {
+  libreFranklin: css`
+    font-family: 'LibreFranklin', Helvetica, sans-serif;
+  `,
+  bold: css`
+    font-weight: 600;
+  `,
+  regular: css`
+    font-weight: normal;
+  `,
+  titleColor: css`
+    color: ${colors.base.secondary};
+  `,
+  bodyColor: css`
+    color: ${colors.base.text};
+  `,
+};

ui/src/shared/constants/colors.js

@@ -46,8 +46,8 @@ const base = {
   ...white,
   text: '#646464',
   grey: '#D8D8D8',
-  disabled: "#FAFAFA",
+  disabled: '#FAFAFA',
-  background: "#FAFAFA",
+  background: '#FAFAFA',
   green: '#00AF66',
   greenDark: '#009858',
   orange: '#E38200',