baseline composer

ui/package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "build-array": "^1.0.0",
+    "camel-case": "^3.0.0",
     "chart.js": "^2.5.0",
     "chartjs-chart-box-plot": "prerelease",
     "color": "^1.0.3",

ui/src/components/add-metric/button.js

@@ -1,5 +1,6 @@
 const React = require('react');
 const Styled = require('styled-components');
+const composers = require('../../shared/composers');
 const fns = require('../../shared/functions');
 const Button = require('../button');
 
@@ -11,10 +12,20 @@ const {
   remcalc
 } = fns;
 
+const {
+  Baseline
+} = composers;
+
+const {
+  baseline
+} = composers;
+
 const StyledButton = styled(Button)`
   position: absolute;
   left: ${remcalc(24)};
   bottom: ${remcalc(24)};
+
+  ${baseline};
 `;
 
 const AddMetricButton = ({
@@ -24,23 +35,23 @@ const AddMetricButton = ({
   onClick
 }) => {
   const onButtonClick = (e) => onClick(metric);
-  return disabled ?
+
-     (
+  return disabled ? (
-       <StyledButton
+    <StyledButton
-         disabled
+      disabled
-         name='add-metric-button'
+      name='add-metric-button'
-       >
+    >
-         {children}
+      {children}
-       </StyledButton>
+    </StyledButton>
-     ) : (
+  ) : (
-       <StyledButton
+    <StyledButton
-         name='add-metric-button'
+      name='add-metric-button'
-         onClick={onButtonClick}
+      onClick={onButtonClick}
-         secondary
+      secondary
-       >
+    >
-         {children}
+      {children}
-       </StyledButton>
+    </StyledButton>
-    );
+  );
 };
 
 AddMetricButton.propTypes = {
@@ -50,4 +61,6 @@ AddMetricButton.propTypes = {
   onClick: React.PropTypes.func,
 };
 
-module.exports = AddMetricButton;
+module.exports = Baseline(
+  AddMetricButton
+);

ui/src/components/add-metric/description.js

@@ -1,11 +1,16 @@
 const React = require('react');
 const Styled = require('styled-components');
 const constants = require('../../shared/constants');
+const composers = require('../../shared/composers');
 
 const {
   colors
 } = constants;
 
+const {
+  Baseline
+} = composers;
+
 const {
   default: styled
 } = Styled;
@@ -25,4 +30,6 @@ Description.propTypes = {
   children: React.PropTypes.node
 };
 
-module.exports = Description;
+module.exports = Baseline(
+  Description
+);

ui/src/components/add-metric/link.js

@@ -1,10 +1,15 @@
 const React = require('react');
+const composers = require('../../shared/composers');
 const Styled = require('styled-components');
 
 const {
   default: styled
 } = Styled;
 
+const {
+  Baseline
+} = composers;
+
 const StyledLink = styled.a`
   text-decoration: underline;
 `;
@@ -23,4 +28,6 @@ Link.propTypes = {
   href: React.PropTypes.string.isRequired
 };
 
-module.exports = Link;
+module.exports = Baseline(
+  Link
+);

ui/src/components/add-metric/tile.js

@@ -1,6 +1,7 @@
 const React = require('react');
 const Styled = require('styled-components');
 const constants = require('../../shared/constants');
+const composers = require('../../shared/composers');
 const fns = require('../../shared/functions');
 
 const {
@@ -9,6 +10,10 @@ const {
   colors
 } = constants;
 
+const {
+  Baseline
+} = composers;
+
 const {
   remcalc
 } = fns;
@@ -49,16 +54,16 @@ const StyledTile = styled.div`
 
 const Tile = ({
   children
-}) => {
+}) => (
-  return (
+  <StyledTile name='add-metric-tile'>
-    <StyledTile name='add-metric-tile'>
+    {children}
-      {children}
+  </StyledTile>
-    </StyledTile>
+);
-  );
-};
 
 Tile.propTypes = {
   children: React.PropTypes.node
 };
 
-module.exports = Tile;
+module.exports = Baseline(
+  Tile
+);

ui/src/components/add-metric/title.js

@@ -1,11 +1,16 @@
 const React = require('react');
 const Styled = require('styled-components');
 const constants = require('../../shared/constants');
+const composers = require('../../shared/composers');
 
 const {
   colors
 } = constants;
 
+const {
+  Baseline
+} = composers;
+
 const {
   default: styled
 } = Styled;
@@ -27,4 +32,6 @@ Title.propTypes = {
   children: React.PropTypes.node
 };
 
-module.exports = Title;
+module.exports = Baseline(
+  Title
+);

ui/src/components/anchor/index.js

@@ -1,23 +1,32 @@
-const constants = require('../../shared/constants');
 const React = require('react');
+const constants = require('../../shared/constants');
+const composers = require('../../shared/composers');
 const Styled = require('styled-components');
 
 const {
-  base,
+  colors
-} = constants.colors;
+} = constants;
+
+const {
+  Baseline
+} = composers;
 
 const {
   default: styled
 } = Styled;
 
 const color = (props) => props.secondary
-  ? base.secondary
+  ? colors.base.secondary
-  : base.primary;
+  : colors.base.primary;
 
-const Anchor = styled.a`
+const StyledAnchor = styled.a`
   color: ${color} !important;
 `;
 
+const Anchor = Baseline(
+  StyledAnchor
+);
+
 module.exports = Anchor;
 
 module.exports.fn = (element) => (props) => React.cloneElement(element, {

ui/src/components/avatar/index.js

@@ -13,6 +13,10 @@ const {
   remcalc
 } = fns;
 
+const {
+  Baseline
+} = composers;
+
 const {
   default: styled
 } = Styled;
@@ -31,7 +35,7 @@ const Letter = styled.p`
   font-weight: 600;
 `;
 
-const Avatar = styled.div`
+const Container = styled.div`
   border-radius: 100%;
   display: inline-block;
   overflow: hidden;
@@ -39,7 +43,7 @@ const Avatar = styled.div`
   text-align: center;
 `;
 
-module.exports = ({
+const Avatar = ({
   alt,
   className,
   color = '#ACC014',
@@ -77,13 +81,13 @@ module.exports = ({
   );
 
   return (
-    <Avatar className={className} style={_style}>
+    <Container className={className} style={_style}>
       {av}
-    </Avatar>
+    </Container>
   );
 };
 
-module.exports.propTypes = {
+Avatar.propTypes = {
   alt: React.PropTypes.string,
   className: React.PropTypes.string,
   color: React.PropTypes.string,
@@ -97,3 +101,7 @@ module.exports.propTypes = {
   style: React.PropTypes.object,
   width: React.PropTypes.string,
 };
+
+module.exports = Baseline(
+  Avatar
+);

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

@@ -5,6 +5,7 @@ const React = require('react');
 
 const fns = require('../../shared/functions');
 const constants = require('../../shared/constants');
+const composers = require('../../shared/composers');
 
 const {
   default: styled
@@ -14,51 +15,49 @@ const {
   colors,
 } = constants;
 
+const {
+  Baseline
+} = composers;
+
 const {
   remcalc
 } = fns;
 
 // If specificity is an issue (i.e nested elements) check base/index.js first
 // before using !important
-const elements = [
+const elements = [{
-  {
+  name: 'H1',
-    name: 'H1',
+  properties: {
-    properties: {
+    'font-size': remcalc(36),
-      'font-size': remcalc(36),
+    'font-weight': 600,
-      'font-weight': 600,
+    'font-style': 'normal',
-      'font-style': 'normal',
+    'font-stretch': 'normal',
-      'font-stretch': 'normal',
+    'color': colors.base.primaryLight,
-      'color': colors.base.primaryLight,
+    'margin': 0
-      'margin' : 0
-    }
-  },
-  {
-    name: 'H2',
-    properties: {
-      'font-size': remcalc(24),
-    }
-  },
-  {
-    name: 'H3',
-    properties: {
-      'font-size': remcalc(16),
-    }
-  },
-  {
-    name: 'P',
-    properties: {
-      'line-height': remcalc(24),
-      'font-size': remcalc(16),
-    }
-  },
-  {
-    name: 'Small',
-    properties: {
-      'line-height': remcalc(18),
-      'font-size': remcalc(14),
-    },
   }
-];
+}, {
+  name: 'H2',
+  properties: {
+    'font-size': remcalc(24),
+  }
+}, {
+  name: 'H3',
+  properties: {
+    'font-size': remcalc(16),
+  }
+}, {
+  name: 'P',
+  properties: {
+    'line-height': remcalc(24),
+    'font-size': remcalc(16),
+  }
+}, {
+  name: 'Small',
+  properties: {
+    'line-height': remcalc(18),
+    'font-size': remcalc(14),
+  },
+}];
 
 /*
  Loop over each item in element array.
@@ -69,33 +68,34 @@ const elements = [
  Usage:
  const H1 = require(base-components).H1;
  */
+const BaseElements = elements.reduce((acc, {
+  name = '',
+  properties = {}
+}) => {
+  const StyledElement = styled[name.toLowerCase()]`
+    ${properties}
+  `;
 
-const BaseElements = {};
+  const Component = ({
-
+    className = '',
-elements.forEach( element => {
+    children = null,
-  const ElementName = element.name;
+    style = {}
-
+  }) => (
-  BaseElements[ElementName] = ({
+    <StyledElement className={className} style={style}>
-    children,
+      {children}
-    style
+    </StyledElement>
-  }) => {
+  );
-
-    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[ElementName].propTypes = {
+  Component.propTypes = {
     children: React.PropTypes.node,
     style: React.PropTypes.object,
   };
-});
 
-module.exports = BaseElements;
+  return {
+    ...acc,
+    [name]: Baseline(Component)
+  };
+}, {});
+
+module.exports = BaseElements;

ui/src/components/baseline-grid/index.js

@@ -1,13 +1,18 @@
 const React = require('react');
+const composers = require('../../shared/composers');
 const Styled = require('styled-components');
 
 const {
   default: styled
 } = Styled;
 
+const {
+  Baseline
+} = composers;
+
 const StyledBaselineBackground = styled.div`
   position: relative;
-  
+
   &:after {
     position: absolute;
     width: auto;
@@ -31,7 +36,7 @@ const StyledBaselineBackground = styled.div`
   }
 `;
 
-const Baseline = ({
+const BaselineGrid = ({
   children
 }) => (
   <StyledBaselineBackground>
@@ -39,8 +44,10 @@ const Baseline = ({
   </StyledBaselineBackground>
 );
 
-Baseline.propTypes = {
+BaselineGrid.propTypes = {
-  children: React.PropTypes.node,
+  children: React.PropTypes.node
 };
 
-module.exports = Baseline;
+module.exports = Baseline(
+  BaselineGrid
+);

ui/src/components/baseline-grid/readme.md

@@ -1,37 +0,0 @@
-# `<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' />
-  );
-}
-```

ui/src/components/baseline-grid/story.js

@@ -0,0 +1,25 @@
+const React = require('react');
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const Base = require('../base');
+const BaseElements = require('../base-elements');
+const Input = require('../input');
+
+const {
+  H1
+} = BaseElements;
+
+storiesOf('Baseline', module)
+  .add('margin-left', () => (
+    <Base>
+      <H1 marginLeft='2'>Heyo</H1>
+    </Base>
+  ))
+  .add('padding', () => (
+    <Base>
+      <Input padding='3' />
+    </Base>
+  ));

ui/src/components/baseline-grid/style.css

@@ -1,3 +0,0 @@
-.icon {
-  font-size: inherit;
-}

ui/src/components/button/index.js

@@ -1,3 +1,4 @@
+const composers = require('../../shared/composers');
 const constants = require('../../shared/constants');
 const fns = require('../../shared/functions');
 const isString = require('lodash.isstring');
@@ -15,6 +16,10 @@ const {
   boxes
 } = constants;
 
+const {
+  Baseline
+} = composers;
+
 const {
   remcalc
 } = fns;
@@ -184,4 +189,6 @@ Button.propTypes = {
   rr: React.PropTypes.bool
 };
 
-module.exports = Button;
+module.exports = Baseline(
+  Button
+);

ui/src/components/checkbox/index.js

@@ -1,3 +1,4 @@
+const composers = require('../../shared/composers');
 const constants = require('../../shared/constants');
 const fns = require('../../shared/functions');
 const React = require('react');
@@ -7,6 +8,10 @@ const {
   boxes
 } = constants;
 
+const {
+  Baseline
+} = composers;
+
 const {
   remcalc
 } = fns;
@@ -81,27 +86,25 @@ const Checkbox = ({
   selectionDirection,
   style,
   tabIndex
-}) => {
+}) => (
-  return (
+  <StyledDiv>
-    <StyledDiv>
+    <StyledInput
-      <StyledInput
+      checked={checked}
-        checked={checked}
+      disabled={disabled}
-        disabled={disabled}
+      form={form}
-        form={form}
+      name={name}
-        name={name}
+      onChange={onChange}
-        onChange={onChange}
+      readOnly={readOnly}
-        readOnly={readOnly}
+      required={required}
-        required={required}
+      style={style}
-        style={style}
+      tabIndex={tabIndex}
-        tabIndex={tabIndex}
+      type='checkbox'
-        type='checkbox'
+    />
-      />
+    <StyledLabel>
-      <StyledLabel>
+      <span>{children}</span>
-        <span>{children}</span>
+    </StyledLabel>
-      </StyledLabel>
+  </StyledDiv>
-    </StyledDiv>
+);
-  );
-};
 
 Checkbox.propTypes = {
   checked: React.PropTypes.bool,
@@ -119,4 +122,6 @@ Checkbox.propTypes = {
   tabIndex: React.PropTypes.string
 };
 
-module.exports = Checkbox;
+module.exports = Baseline(
+  Checkbox
+);

ui/src/components/close/index.js

@@ -1,6 +1,7 @@
 const React = require('react');
 const Styled = require('styled-components');
 
+const composers = require('../../shared/composers');
 const fns = require('../../shared/functions');
 
 const {
@@ -11,6 +12,10 @@ const {
   remcalc
 } = fns;
 
+const {
+  Baseline
+} = composers;
+
 const StyledButton = styled.button`
   background: none;
   border: none;
@@ -21,24 +26,24 @@ const StyledButton = styled.button`
 
 const Close = ({
   style,
-  onClick,
+  onClick
-}) => {
+}) => (
-  return (
+  <StyledButton
-    <StyledButton
+    onClick={onClick}
-      onClick={onClick}
+    style={style}
-      style={style}
+  >
-    >
+    <img
-      <img
+      alt="Close"
-        alt="Close"
+      src="./close.svg"
-        src="./close.svg"
+    />
-      />
+  </StyledButton>
-    </StyledButton>
+);
-  );
-};
 
 Close.propTypes = {
   onClick: React.PropTypes.func,
   style: React.PropTypes.object
 };
 
-module.exports = Close;
+module.exports = Baseline(
+  Close
+);

ui/src/components/column/index.js

@@ -4,6 +4,7 @@
  */
 
 const constants = require('../../shared/constants');
+const composers = require('../../shared/composers');
 const isUndefined = require('lodash.isundefined');
 const fns = require('../../shared/functions');
 const Styled = require('styled-components');
@@ -13,6 +14,10 @@ const {
   sizes
 } = constants;
 
+const {
+  Baseline
+} = composers;
+
 const {
   calc
 } = fns;
@@ -60,11 +65,11 @@ const mdOffset = breakpoint('mdOffset', 'medium');
 const lg = breakpoint('lg', 'large');
 const lgOffset = breakpoint('lgOffset', 'large');
 
-module.exports = styled.div`
+const Column = styled.div`
   box-sizing: border-box;
   padding-left: ${padding};
   padding-right: ${padding};
-  
+
   // If no column size is passed, make it full width
   width: 100%;
 
@@ -108,3 +113,7 @@ module.exports = styled.div`
     margin-left: ${marginLeft('lgOffset')};
   `}
 `;
+
+module.exports = Baseline(
+  Column
+);

ui/src/components/container/index.js

@@ -3,6 +3,7 @@
  * github.com/roylee0704/react-flexbox-grid/blob/master/src/components/Grid.js
  */
 
+const composers = require('../../shared/composers');
 const constants = require('../../shared/constants');
 const Styled = require('styled-components');
 
@@ -11,6 +12,10 @@ const {
   sizes
 } = constants;
 
+const {
+  Baseline
+} = composers;
+
 const {
   default: styled,
   css
@@ -21,7 +26,7 @@ const fluid = (props) => props.fluid && css`
   padding-right: ${sizes.outerMargin};
 `;
 
-module.exports = styled.div`
+const Container = styled.div`
   margin-left: auto;
   margin-right: auto;
 
@@ -39,3 +44,7 @@ module.exports = styled.div`
     max-width: ${sizes.containerLg || '71rem'};
   `}
 `;
+
+module.exports = Baseline(
+  Container
+);

ui/src/components/form/label-row.js

@@ -1,7 +1,12 @@
+const composers = require('../../shared/composers');
 const Column = require('../column');
 const React = require('react');
 const Row = require('../row');
 
+const {
+  Baseline
+} = composers;
+
 const LabelRow = (props) => {
   const labels = React.Children.map(props.children, (children) => (
     <Column xs={12}>
@@ -20,4 +25,6 @@ LabelRow.propTypes = {
   children: React.PropTypes.node
 };
 
-module.exports = LabelRow;
+module.exports = Baseline(
+  LabelRow
+);

ui/src/components/form/label.js

@@ -1,3 +1,4 @@
+const composers = require('../../shared/composers');
 const constants = require('../../shared/constants');
 const fns = require('../../shared/functions');
 const Styled = require('styled-components');
@@ -10,11 +11,15 @@ const {
   remcalc
 } = fns;
 
+const {
+  Baseline
+} = composers;
+
 const {
   default: styled
 } = Styled;
 
-module.exports = styled.label`
+const Label = styled.label`
   width: 100%;
   font-size: ${remcalc(16)};
   font-weight: 600;
@@ -22,3 +27,7 @@ module.exports = styled.label`
   font-stretch: normal;
   color: ${colors.base.secondary};
 `;
+
+module.exports = Baseline(
+  Label
+);

ui/src/components/form/msg.js

@@ -1,3 +1,4 @@
+const composers = require('../../shared/composers');
 const constants = require('../../shared/constants');
 const Label = require('./label');
 const match = require('../../shared/match');
@@ -8,6 +9,10 @@ const {
   colors
 } = constants;
 
+const {
+  Baseline
+} = composers;
+
 const {
   default: styled
 } = Styled;
@@ -19,7 +24,7 @@ const color = match.prop({
 })('type');
 
 
-module.exports = styled(Label)`
+const Msg = styled(Label)`
   color: ${color};
 
   ${breakpoints.medium`
@@ -27,3 +32,7 @@ module.exports = styled(Label)`
     text-align: right;
   `}
 `;
+
+module.exports = Baseline(
+  Msg
+);

ui/src/components/form/outlet.js

@@ -35,7 +35,7 @@ const paddingTop = (props) => props.multiple
   ? remcalc(20)
   : remcalc(13);
 
-module.exports = css`
+const Outlet = css`
   box-sizing: border-box;
 
   width: 100%;
@@ -65,3 +65,5 @@ module.exports = css`
     outline: 0;
   }
 `;
+
+module.exports = Outlet;

ui/src/components/form/view.js

@@ -1,7 +1,16 @@
+const composers = require('../../shared/composers');
 const Styled = require('styled-components');
 
+const {
+  Baseline
+} = composers;
+
 const {
   default: styled
 } = Styled;
 
-module.exports = styled.div``;
+const View = styled.div``;
+
+module.exports = Baseline(
+  View
+);

ui/src/components/horizontal-list/li.js

@@ -1,3 +1,4 @@
+const composers = require('../../shared/composers');
 const fns = require('../../shared/functions');
 const constants = require('../../shared/constants');
 const Styled = require('styled-components');
@@ -10,13 +11,17 @@ const {
   colors
 } = constants;
 
+const {
+  Baseline
+} = composers;
+
 const {
   default: styled
 } = Styled;
 
-module.exports = styled.li`
+const Li = styled.li`
   display: inline-block;
-  
+
   & + & {
     margin-left: ${remcalc(24)};
   }
@@ -25,7 +30,7 @@ module.exports = styled.li`
     color: ${colors.base.secondaryDark};
     text-decoration: none;
     padding-bottom: ${remcalc(6)};
-    
+
     &.active {
       cursor: default;
       color: ${colors.base.primary};
@@ -33,3 +38,7 @@ module.exports = styled.li`
     }
   }
 `;
+
+module.exports = Baseline(
+  Li
+);

ui/src/components/horizontal-list/ul.js

@@ -1,15 +1,24 @@
 const Styled = require('styled-components');
+const composers = require('../../shared/composers');
 const fns = require('../../shared/functions');
 
 const {
   remcalc
 } = fns;
 
+const {
+  Baseline
+} = composers;
+
 const {
   default: styled
 } = Styled;
 
-module.exports = styled.ul`
+const Ul = styled.ul`
   list-style-type: none;
   margin-bottom: ${remcalc(33)};
 `;
+
+module.exports = Baseline(
+  Ul
+);

ui/src/components/input/index.js

@@ -1,5 +1,7 @@
 const fns = require('../../shared/functions');
 const reduxFormProxy = require('../../shared/redux-form-proxy');
+const composers = require('../../shared/composers');
+
 const React = require('react');
 const Styled = require('styled-components');
 
@@ -13,6 +15,10 @@ const {
   rndId
 } = fns;
 
+const {
+  Baseline
+} = composers;
+
 const {
   default: styled
 } = Styled;
@@ -78,4 +84,6 @@ Input.propTypes = {
   warning: React.PropTypes.string
 };
 
-module.exports = reduxFormProxy(Input);
+module.exports = reduxFormProxy(
+  Baseline(Input)
+);

ui/src/components/list/description.js

@@ -1,3 +1,4 @@
+const composers = require('../../shared/composers');
 const fns = require('../../shared/functions');
 const React = require('react');
 const Styled = require('styled-components');
@@ -7,6 +8,10 @@ const {
   remcalc
 } = fns;
 
+const {
+  Baseline
+} = composers;
+
 const {
   default: styled,
   css
@@ -62,4 +67,6 @@ Description.propTypes = {
   collapsed: React.PropTypes.bool
 };
 
-module.exports = Description;
+module.exports = Baseline(
+  Description
+);

ui/src/components/list/group-view.js

@@ -1,3 +1,4 @@
+const composers = require('../../shared/composers');
 const constants = require('../../shared/constants');
 const fns = require('../../shared/functions');
 const View = require('./view').raw;
@@ -7,6 +8,10 @@ const {
   colors
 } = constants;
 
+const {
+  Baseline
+} = composers;
+
 const {
   remcalc
 } = fns;
@@ -15,7 +20,7 @@ const {
   default: styled
 } = Styled;
 
-module.exports = styled(View)`
+const GroupView = styled(View)`
   display: block;
   padding-top: ${remcalc(62)};
   padding-left: ${remcalc(23)};
@@ -23,3 +28,7 @@ module.exports = styled(View)`
   padding-bottom: ${remcalc(5)};
   background-color: ${colors.inactive.default};
 `;
+
+module.exports = Baseline(
+  GroupView
+);

ui/src/components/list/header.js

@@ -1,4 +1,5 @@
 const fns = require('../../shared/functions');
+const composers = require('../../shared/composers');
 const constants = require('../../shared/constants');
 const Item = require('./item');
 const React = require('react');
@@ -12,6 +13,10 @@ const {
   colors
 } = constants;
 
+const {
+  Baseline
+} = composers;
+
 const {
   default: styled
 } = Styled;
@@ -30,7 +35,7 @@ const StyledItem = styled(Item)`
   top: ${remcalc(-1)};
   left: ${remcalc(-1)};
   right: ${remcalc(-1)};
-  
+
   & [name="list-item-subtitle"],
   & [name="list-item-title"] {
     color: ${colors.base.white};
@@ -58,4 +63,6 @@ Header.propTypes = {
   children: React.PropTypes.node
 };
 
-module.exports = Header;
+module.exports = Baseline(
+  Header
+);

ui/src/components/list/item.js

@@ -1,3 +1,4 @@
+const composers = require('../../shared/composers');
 const constants = require('../../shared/constants');
 const fns = require('../../shared/functions');
 const React = require('react');
@@ -14,6 +15,10 @@ const {
   remcalc
 } = fns;
 
+const {
+  Baseline
+} = composers;
+
 const {
   default: styled
 } = Styled;
@@ -56,11 +61,14 @@ const Item = styled(Row)`
   margin-bottom: ${marginBottom};
 `;
 
-module.exports = transferProps([
+module.exports = Baseline(
-  'collapsed',
+  transferProps([
-  'headed'
+    'collapsed',
-], (props) => (
+    'headed'
-  <Item name='list-item' {...props}>
+  ], (props) => (
-    {props.children}
+    <Item name='list-item' {...props}>
-  </Item>
+      {props.children}
-));
+    </Item>
+  ))
+);
+

ui/src/components/list/meta.js

@@ -3,12 +3,17 @@ const React = require('react');
 const Row = require('../row');
 const Styled = require('styled-components');
 const transferProps = require('../../shared/transfer-props');
+const composers = require('../../shared/composers');
 const View = require('./view');
 
 const {
   default: styled
 } = Styled;
 
+const {
+  Baseline
+} = composers;
+
 const md = (props) => props.collapsed
   ? 12
   : 6;
@@ -22,12 +27,11 @@ const InnerRow = styled(Row)`
   height: 100%;
 `;
 
-module.exports = transferProps([
+const Meta = transferProps([
   'collapsed',
   'headed',
   'fromHeader'
 ], (props) => {
-
   const meta = (
     <Column
       md={md(props)}
@@ -47,3 +51,7 @@ module.exports = transferProps([
     </View>
   );
 });
+
+module.exports = Baseline(
+  Meta
+);

ui/src/components/list/options.js

@@ -1,4 +1,5 @@
 const Button = require('../button');
+const composers = require('../../shared/composers');
 const constants = require('../../shared/constants');
 const fns = require('../../shared/functions');
 const React = require('react');
@@ -13,6 +14,10 @@ const {
   remcalc
 } = fns;
 
+const {
+  Baseline
+} = composers;
+
 const {
   default: styled
 } = Styled;
@@ -74,4 +79,6 @@ Options.propTypes = {
   children: React.PropTypes.node
 };
 
-module.exports = Options;
+module.exports = Baseline(
+  Options
+);

ui/src/components/list/outlet.js

@@ -1,3 +1,4 @@
+const composers = require('../../shared/composers');
 const Column = require('../column');
 const Styled = require('styled-components');
 const React = require('react');
@@ -6,6 +7,10 @@ const {
   default: styled
 } = Styled;
 
+const {
+  Baseline
+} = composers;
+
 const display = (props) => props.collapsed
   ? 'none'
   : 'block';
@@ -29,4 +34,6 @@ Outlet.propTypes = {
   children: React.PropTypes.node
 };
 
-module.exports = Outlet;
+module.exports = Baseline(
+  Outlet
+);

ui/src/components/list/subtitle.js

@@ -1,3 +1,4 @@
+const composers = require('../../shared/composers');
 const fns = require('../../shared/functions');
 const Title = require('./title');
 const React = require('react');
@@ -7,6 +8,10 @@ const {
   remcalc
 } = fns;
 
+const {
+  Baseline
+} = composers;
+
 const {
   default: styled
 } = Styled;
@@ -51,4 +56,6 @@ Subtitle.propTypes = {
   fromHeader: React.PropTypes.bool
 };
 
-module.exports = Subtitle;
+module.exports = Baseline(
+  Subtitle
+);

ui/src/components/list/title.js

@@ -1,3 +1,4 @@
+const composers = require('../../shared/composers');
 const constants = require('../../shared/constants');
 const fns = require('../../shared/functions');
 const isString = require('lodash.isstring');
@@ -12,6 +13,10 @@ const {
   remcalc
 } = fns;
 
+const {
+  Baseline
+} = composers;
+
 const {
   default: styled
 } = Styled;
@@ -92,4 +97,6 @@ Title.propTypes = {
   collapsed: React.PropTypes.bool
 };
 
-module.exports = Title;
+module.exports = Baseline(
+  Title
+);

ui/src/components/list/view.js

@@ -1,13 +1,18 @@
+const composers = require('../../shared/composers');
+const transferProps = require('../../shared/transfer-props');
 const fns = require('../../shared/functions');
 const React = require('react');
 const Row = require('../row');
 const Styled = require('styled-components');
-const transferProps = require('../../shared/transfer-props');
 
 const {
   remcalc
 } = fns;
 
+const {
+  Baseline
+} = composers;
+
 const {
   default: styled
 } = Styled;
@@ -44,10 +49,14 @@ View.propTypes = {
   headed: React.PropTypes.bool
 };
 
+const BaselineView = Baseline(
+  View
+);
+
 module.exports = transferProps([
   'collapsed',
   'headed',
   'fromHeader'
-], View);
+], BaselineView);
 
-module.exports.raw = View;
+module.exports.raw = BaselineView;

ui/src/components/metric/close-button.js

@@ -2,10 +2,11 @@ const React = require('react');
 const Styled = require('styled-components');
 const fns = require('../../shared/functions');
 const constants = require('../../shared/constants');
-const CloseIcon =
+const composers = require('../../shared/composers');
-  require(
+
-    '!babel-loader!svg-react-loader!./close.svg?name=CloseIcon'
+const CloseIcon = require(
-  );
+  '!babel-loader!svg-react-loader!./close.svg?name=CloseIcon'
+);
 
 const {
   default: styled
@@ -15,6 +16,10 @@ const {
   remcalc
 } = fns;
 
+const {
+  Baseline
+} = composers;
+
 const {
   colors
 } = constants;
@@ -39,8 +44,8 @@ const StyledIcon = styled(CloseIcon)`
 const AddMetricButton = ({
   onClick
 }) => {
-
   const onButtonClick = (e) => onClick();
+
   return (
     <StyledButton
       name='close-button'
@@ -55,4 +60,6 @@ AddMetricButton.propTypes = {
   onClick: React.PropTypes.func,
 };
 
-module.exports = AddMetricButton;
+module.exports = Baseline(
+  AddMetricButton
+);

ui/src/components/metric/graph.js

@@ -4,6 +4,7 @@ const moment = require('moment');
 const Chart = require('chart.js');
 const whisker = require('chartjs-chart-box-plot');
 const constants = require('../../shared/constants');
+const composers = require('../../shared/composers');
 
 whisker(Chart);
 
@@ -11,6 +12,10 @@ const {
   colors
 } = constants;
 
+const {
+  Baseline
+} = composers;
+
 const {
   default: styled
 } = Styled;
@@ -22,12 +27,9 @@ const Container = styled.div`
   background-color: ${colors.base.white};
 `;
 
-const Canvas = styled.canvas`
+const Canvas = styled.canvas``;
-
-`;
 
 class Graph extends React.Component {
-
   componentDidMount() {
     const {
       yMax = 100,
@@ -168,7 +170,6 @@ class Graph extends React.Component {
   }
 
   render() {
-
     return (
       <Container name='metric-body'>
         <Canvas
@@ -189,4 +190,6 @@ Graph.propTypes = {
   yMin: React.PropTypes.number
 };
 
-module.exports = Graph;
+module.exports = Baseline(
+  Graph
+);

ui/src/components/metric/header.js

@@ -1,3 +1,4 @@
+const composers = require('../../shared/composers');
 const constants = require('../../shared/constants');
 const fns = require('../../shared/functions');
 const React = require('react');
@@ -11,6 +12,10 @@ const {
   remcalc
 } = fns;
 
+const {
+  Baseline
+} = composers;
+
 const {
   default: styled
 } = Styled;
@@ -36,4 +41,6 @@ Header.propTypes = {
   children: React.PropTypes.node
 };
 
-module.exports = Header;
+module.exports = Baseline(
+  Header
+);

ui/src/components/metric/select.js

@@ -10,7 +10,8 @@ const {
 } = fns;
 
 const {
-  pseudoEl
+  pseudoEl,
+  Baseline
 } = composers;
 
 const {
@@ -63,25 +64,23 @@ const Select = ({
   required,
   selected,
   value
-}) => {
+}) => (
-  return (
+  <SelectWrapper>
-    <SelectWrapper>
+    <StyledSelect
-      <StyledSelect
+      autoFocus={autoFocus}
-        autoFocus={autoFocus}
+      disabled={disabled}
-        disabled={disabled}
+      form={form}
-        form={form}
+      id={id}
-        id={id}
+      name={name}
-        name={name}
+      onChange={onChange}
-        onChange={onChange}
+      required={required}
-        required={required}
+      selected={selected}
-        selected={selected}
+      value={value}
-        value={value}
+    >
-      >
+      {children}
-        {children}
+    </StyledSelect>
-      </StyledSelect>
+  </SelectWrapper>
-    </SelectWrapper>
+);
-  );
-};
 
 Select.propTypes = {
   autoFocus: React.PropTypes.bool,
@@ -96,4 +95,6 @@ Select.propTypes = {
   value: React.PropTypes.string
 };
 
-module.exports = Select;
+module.exports = Baseline(
+  Select
+);

ui/src/components/metric/settings-button.js

@@ -2,11 +2,12 @@ const React = require('react');
 const Styled = require('styled-components');
 const fns = require('../../shared/functions');
 const constants = require('../../shared/constants');
+const composers = require('../../shared/composers');
 const Button = require('../button');
-const SettingsIcon =
+
-  require(
+const SettingsIcon = require(
-    '!babel-loader!svg-react-loader!./icon-settings.svg?name=SettingsIcon'
+  '!babel-loader!svg-react-loader!./icon-settings.svg?name=SettingsIcon'
-  );
+);
 
 const {
   default: styled
@@ -20,6 +21,10 @@ const {
   colors
 } = constants;
 
+const {
+  Baseline
+} = composers;
+
 const StyledButton = styled(Button)`
   position: relative;
   display: flex;
@@ -54,6 +59,7 @@ const AddMetricButton = ({
   onClick
 }) => {
   const onButtonClick = (e) => onClick(metric);
+
   return (
     <StyledButton
       name='add-metric-button'
@@ -71,4 +77,6 @@ AddMetricButton.propTypes = {
   onClick: React.PropTypes.func,
 };
 
-module.exports = AddMetricButton;
+module.exports = Baseline(
+  AddMetricButton
+);

ui/src/components/metric/title.js

@@ -1,3 +1,4 @@
+const composers = require('../../shared/composers');
 const constants = require('../../shared/constants');
 const fns = require('../../shared/functions');
 const Styled = require('styled-components');
@@ -10,12 +11,16 @@ const {
   remcalc
 } = fns;
 
+const {
+  Baseline
+} = composers;
+
 const {
   default: styled
 } = Styled;
 
 //margin: ${remcalc(18)} ${remcalc(24)} !important;
-module.exports = styled.h3`
+const Title = styled.h3`
   display: flex;
   align-self: flex-start;
   margin: ${remcalc(18)} auto ${remcalc(18)} ${remcalc(24)} !important;
@@ -25,3 +30,7 @@ module.exports = styled.h3`
   line-height: 1.5;
   color: ${colors.base.white};
 `;
+
+module.exports = Baseline(
+  Title
+);

ui/src/components/metric/view.js

@@ -1,5 +1,7 @@
+const composers = require('../../shared/composers');
 const constants = require('../../shared/constants');
 const fns = require('../../shared/functions');
+
 const React = require('react');
 const Styled = require('styled-components');
 
@@ -12,6 +14,10 @@ const {
   remcalc
 } = fns;
 
+const {
+  Baseline
+} = composers;
+
 const {
   default: styled
 } = Styled;
@@ -36,4 +42,6 @@ View.propTypes = {
   children: React.PropTypes.node
 };
 
-module.exports = View;
+module.exports = Baseline(
+  View
+);

ui/src/components/mini-metric/graph.js

@@ -4,6 +4,7 @@ const fns = require('../../shared/functions');
 const React = require('react');
 const Styled = require('styled-components');
 const whisker = require('chartjs-chart-box-plot');
+const composers = require('../../shared/composers');
 
 whisker(Chart);
 
@@ -11,6 +12,10 @@ const {
   remcalc
 } = fns;
 
+const {
+  Baseline
+} = composers;
+
 const {
   default: styled
 } = Styled;
@@ -112,4 +117,6 @@ Graph.propTypes = {
   min: React.PropTypes.number
 };
 
-module.exports = Graph;
+module.exports = Baseline(
+  Graph
+);

ui/src/components/mini-metric/meta.js

@@ -1,3 +1,4 @@
+const composers = require('../../shared/composers');
 const constants = require('../../shared/constants');
 const fns = require('../../shared/functions');
 const React = require('react');
@@ -11,6 +12,10 @@ const {
   remcalc
 } = fns;
 
+const {
+  Baseline
+} = composers;
+
 const {
   default: styled
 } = Styled;
@@ -38,4 +43,6 @@ Meta.propTypes = {
   children: React.PropTypes.node
 };
 
-module.exports = Meta;
+module.exports = Baseline(
+  Meta
+);

ui/src/components/mini-metric/subtitle.js

@@ -1,3 +1,4 @@
+const composers = require('../../shared/composers');
 const constants = require('../../shared/constants');
 const fns = require('../../shared/functions');
 const Styled = require('styled-components');
@@ -10,11 +11,15 @@ const {
   colors
 } = constants;
 
+const {
+  Baseline
+} = composers;
+
 const {
   default: styled
 } = Styled;
 
-module.exports = styled.p`
+const Subtitle = styled.p`
   margin: 0;
   text-align: right;
   font-size: ${remcalc(12)};
@@ -24,3 +29,7 @@ module.exports = styled.p`
   font-stretch: normal;
   color: ${colors.regular};
 `;
+
+module.exports = Baseline(
+  Subtitle
+);

ui/src/components/mini-metric/title.js

@@ -1,3 +1,4 @@
+const composers = require('../../shared/composers');
 const constants = require('../../shared/constants');
 const fns = require('../../shared/functions');
 const Styled = require('styled-components');
@@ -10,11 +11,15 @@ const {
   remcalc
 } = fns;
 
+const {
+  Baseline
+} = composers;
+
 const {
   default: styled
 } = Styled;
 
-module.exports = styled.h3`
+const Title = styled.h3`
   margin: 0;
   text-align: right;
   font-size: ${remcalc(14)};
@@ -24,3 +29,7 @@ module.exports = styled.h3`
   color: ${colors.semibold};
   margin-bottom: ${remcalc(3)} !important;
 `;
+
+module.exports = Baseline(
+  Title
+);

ui/src/components/mini-metric/view.js

@@ -1,3 +1,4 @@
+const composers = require('../../shared/composers');
 const constants = require('../../shared/constants');
 const fns = require('../../shared/functions');
 const React = require('react');
@@ -11,6 +12,10 @@ const {
   remcalc
 } = fns;
 
+const {
+  Baseline
+} = composers;
+
 const {
   default: styled
 } = Styled;
@@ -49,4 +54,6 @@ View.propTypes = {
   children: React.PropTypes.node
 };
 
-module.exports = View;
+module.exports = Baseline(
+  View
+);

ui/src/components/modal/index.js

@@ -1,6 +1,6 @@
-const fns = require('../../shared/functions');
+const composers = require('../../shared/composers');
-
 const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
 const React = require('react');
 const Styled = require('styled-components');
 
@@ -12,6 +12,10 @@ const {
   remcalc
 } = fns;
 
+const {
+  Baseline
+} = composers;
+
 const {
   default: styled
 } = Styled;
@@ -42,25 +46,19 @@ const StyledOverlay = styled.div`
   z-index: 1;
 `;
 
-const Modal = (props) => {
+const Modal = (props) => !props.active ? null : (
-  if (!props.active) {
+  <div>
-    return null;
+    <StyledOverlay
-  }
+      aria-label='overlay'
-
+      onClick={props.handleDismiss}
-  return (
+      role='link'
-    <div>
+      tabIndex={-2}
-      <StyledOverlay
+    />
-        aria-label='overlay'
+    <StyledModal {...props}>
-        onClick={props.handleDismiss}
+      {props.children}
-        role='link'
+    </StyledModal>
-        tabIndex={-2}
+  </div>
-      />
+);
-      <StyledModal {...props}>
-        {props.children}
-      </StyledModal>
-    </div>
-  );
-};
 
 Modal.propTypes = {
   active: React.PropTypes.bool,
@@ -68,4 +66,6 @@ Modal.propTypes = {
   handleDismiss: React.PropTypes.func
 };
 
-module.exports = Modal;
+module.exports = Baseline(
+  Modal
+);

ui/src/components/notification/index.js

@@ -1,6 +1,6 @@
 const constants = require('../../shared/constants');
-const fns = require('../../shared/functions');
 const composers = require('../../shared/composers');
+const fns = require('../../shared/functions');
 const React = require('react');
 const Styled = require('styled-components');
 const Close = require('../close');
@@ -19,7 +19,8 @@ const {
 
 const {
   baseBox,
-  pseudoEl
+  pseudoEl,
+  Baseline
 } = composers;
 
 const decorationWidth = remcalc(108);
@@ -31,12 +32,12 @@ const StyledNotification = styled.div`
   width: 100%;
 
   ${baseBox(0)}
-  
+
   &::before {
     background-color: ${props => colors[props.type] || colors.brandPrimary}
     width: ${decorationWidth};
     height: 100%;
-    
+
     ${pseudoEl()}
   }
 `;
@@ -55,7 +56,9 @@ const Notificaton = ({
   type,
   close
 }) => {
-  const renderClose = close ? (<Close onClick={close} />) : null;
+  const renderClose = !close ? null : (
+    <Close onClick={close} />
+  );
 
   return (
     <StyledNotification
@@ -63,8 +66,7 @@ const Notificaton = ({
       style={style}
       type={type}
     >
-      { renderClose  }
+      {renderClose}
-
       <StyledContent>
         {children}
       </StyledContent>
@@ -80,4 +82,6 @@ Notificaton.propTypes = {
   type: React.PropTypes.string
 };
 
-module.exports = Notificaton;
+module.exports = Baseline(
+  Notificaton
+);

ui/src/components/pagination/index.js

@@ -5,7 +5,8 @@ const React = require('react');
 const Styled = require('styled-components');
 
 const {
-  baseBox
+  baseBox,
+  Baseline
 } = composers;
 
 const {
@@ -64,7 +65,6 @@ const StyledLi = styled.li`
   }
 `;
 
-
 const Pagination = ({
   children,
   className,
@@ -104,4 +104,6 @@ Pagination.propTypes = {
   style: React.PropTypes.object
 };
 
-module.exports = Pagination;
+module.exports = Baseline(
+  Pagination
+);

ui/src/components/payment-card/detail.js

@@ -1,3 +1,4 @@
+const composers = require('../../shared/composers');
 const React = require('react');
 const Styled = require('styled-components');
 
@@ -5,6 +6,10 @@ const {
   default: styled
 } = Styled;
 
+const {
+  Baseline
+} = composers;
+
 const Container = styled.p`
   margin: 0;
   line-height: 1.2;
@@ -20,4 +25,6 @@ Detail.propTypes = {
   children: React.PropTypes.node
 };
 
-module.exports = Detail;
+module.exports = Baseline(
+  Detail
+);

ui/src/components/payment-card/details.js

@@ -1,11 +1,16 @@
+const composers = require('../../shared/composers');
+const fns = require('../../shared/functions');
 const React = require('react');
 const Styled = require('styled-components');
-const fns = require('../../shared/functions');
 
 const {
   remcalc
 } = fns;
 
+const {
+  Baseline
+} = composers;
+
 const {
   default: styled
 } = Styled;
@@ -25,4 +30,6 @@ Details.propTypes = {
   children: React.PropTypes.node
 };
 
-module.exports = Details;
+module.exports = Baseline(
+  Details
+);

ui/src/components/payment-card/payment-card.js

@@ -2,13 +2,13 @@
 
 const React = require('react');
 const Styled = require('styled-components');
+const composers = require('../../shared/composers');
 const constants = require('../../shared/constants');
 const fns = require('../../shared/functions');
 
-const MastercardIcon =
+const MastercardIcon = require(
-  require(
+  '!babel-loader!svg-react-loader!./mastercard.svg?name=MastercardIcon'
-    '!babel-loader!svg-react-loader!./mastercard.svg?name=MastercardIcon'
+);
-  );
 
 const {
   default: styled
@@ -23,6 +23,10 @@ const {
   remcalc
 } = fns;
 
+const {
+  Baseline
+} = composers;
+
 const icons = {
   mastercard: MastercardIcon
 };
@@ -57,18 +61,19 @@ const LargeCard = styled(Card)`
 `;
 
 const PaymentCard = ({
-  type='mastercard',
+  type = 'mastercard',
-  size='small'
+  size = 'small'
 }) => {
-
   const icon = React.createElement(
     icons[type],
     sizes[size]
   );
 
-  return size === 'small' ?
+  return size === 'small' ? (
-    <SmallCard>{icon}</SmallCard> :
+    <SmallCard>{icon}</SmallCard>
-    <LargeCard>{icon}</LargeCard>;
+  ) : (
+    <LargeCard>{icon}</LargeCard>
+  );
 };
 
 PaymentCard.propTypes = {
@@ -81,4 +86,6 @@ PaymentCard.propTypes = {
   ]).isRequired
 };
 
-module.exports = PaymentCard;
+module.exports = Baseline(
+  PaymentCard
+);

ui/src/components/payment-card/view.js

@@ -1,11 +1,16 @@
 const React = require('react');
 const Styled = require('styled-components');
+const composers = require('../../shared/composers');
 const fns = require('../../shared/functions');
 
 const {
   remcalc
 } = fns;
 
+const {
+  Baseline
+} = composers;
+
 const {
   default: styled
 } = Styled;
@@ -26,4 +31,6 @@ View.propTypes = {
   children: React.PropTypes.node
 };
 
-module.exports = View;
+module.exports = Baseline(
+  View
+);

ui/src/components/radio-group/index.js

@@ -5,6 +5,7 @@
  * if they have any
  */
 
+const composers = require('../../shared/composers');
 const first = require('lodash.first');
 const isUndefined = require('lodash.isundefined');
 const get = require('lodash.get');
@@ -14,6 +15,10 @@ const classNames = require('classnames');
 const React = require('react');
 // const styles = require('./style.css');
 
+const {
+  Baseline
+} = composers;
+
 const RadioGroup = React.createClass({
   propTypes: {
     children: React.PropTypes.node,
@@ -150,4 +155,6 @@ const RadioGroup = React.createClass({
   }
 });
 
-module.exports = RadioGroup;
+module.exports = Baseline(
+  RadioGroup
+);

ui/src/components/radio-group/item.js

@@ -1,7 +1,12 @@
 const React = require('react');
 const fns = require('../../shared/functions');
-const Styled = require('styled-components');
 const constants = require('../../shared/constants');
+const composers = require('../../shared/composers');
+const Styled = require('styled-components');
+
+const {
+  Baseline
+} = composers;
 
 const {
   remcalc
@@ -47,19 +52,17 @@ const Item = ({
   disabled = false,
   onClick,
   tabIndex
-}) => {
+}) => (
-  return (
+  <RadioItem
-    <RadioItem
+    aria-checked={checked}
-      aria-checked={checked}
+    aria-disabled={disabled}
-      aria-disabled={disabled}
+    onClick={onClick}
-      onClick={onClick}
+    role='radio'
-      role='radio'
+    tabIndex={tabIndex}
-      tabIndex={tabIndex}
+  >
-    >
+    {children}
-      {children}
+  </RadioItem>
-    </RadioItem>
+);
-  );
-};
 
 Item.propTypes = {
   checked: React.PropTypes.bool,
@@ -70,4 +73,6 @@ Item.propTypes = {
   tabIndex: React.PropTypes.number
 };
 
-module.exports = Item;
+module.exports = Baseline(
+  Item
+);

ui/src/components/radio/index.js

@@ -1,7 +1,8 @@
-const React = require('react');
 const constants = require('../../shared/constants');
-const Styled = require('styled-components');
+const composers = require('../../shared/composers');
 const fns = require('../../shared/functions');
+const React = require('react');
+const Styled = require('styled-components');
 
 const {
   colors
@@ -11,6 +12,10 @@ const {
   remcalc
 } = fns;
 
+const {
+  Baseline
+} = composers;
+
 const {
   default: styled
 } = Styled;
@@ -78,33 +83,30 @@ const Radio = ({
   style,
   tabIndex,
   value
-}) => {
+}) => (
-
+  <StyledLabel style={style}>
-  return (
+    <StyledInput
-    <StyledLabel style={style}>
+      checked={checked}
-      <StyledInput
+      defaultChecked={defaultChecked}
-        checked={checked}
+      disabled={disabled}
-        defaultChecked={defaultChecked}
+      form={form}
-        disabled={disabled}
+      id={id}
-        form={form}
+      name={name}
-        id={id}
+      onChange={onChange}
-        name={name}
+      readOnly={readOnly}
-        onChange={onChange}
+      required={required}
-        readOnly={readOnly}
+      selectionDirection={selectionDirection}
-        required={required}
+      tabIndex={tabIndex}
-        selectionDirection={selectionDirection}
+      type='radio'
-        tabIndex={tabIndex}
+      value={value}
-        type='radio'
+    />
-        value={value}
+    <StyledSpan>
-      />
+      <StyledContent>
-      <StyledSpan>
+        {children}
-        <StyledContent>
+      </StyledContent>
-          {children}
+    </StyledSpan>
-        </StyledContent>
+  </StyledLabel>
-      </StyledSpan>
+);
-    </StyledLabel>
-  );
-};
 
 Radio.propTypes = {
   checked: React.PropTypes.bool,
@@ -125,4 +127,6 @@ Radio.propTypes = {
   value: React.PropTypes.string.isRequired
 };
 
-module.exports = Radio;
+module.exports = Baseline(
+  Radio
+);

ui/src/components/range-slider/index.js

@@ -5,7 +5,8 @@ const React = require('react');
 const Styled = require('styled-components');
 
 const {
-  baseBox
+  baseBox,
+  Baseline
 } = composers;
 
 const {
@@ -133,16 +134,14 @@ const RangeSlider = ({
   className,
   onChange,
   style
-}) => {
+}) => (
-  return (
+  <StyledRange
-    <StyledRange
+    className={className}
-      className={className}
+    onChange={onChange}
-      onChange={onChange}
+    style={style}
-      style={style}
+    type='range'
-      type='range'
+  />
-    />
+);
-  );
-};
 
 RangeSlider.propTypes = {
   className: React.PropTypes.string,
@@ -150,4 +149,6 @@ RangeSlider.propTypes = {
   style: React.PropTypes.object
 };
 
-module.exports = RangeSlider;
+module.exports = Baseline(
+  RangeSlider
+);

ui/src/components/row/index.js

@@ -3,6 +3,7 @@
  * github.com/roylee0704/react-flexbox-grid/blob/master/src/components/Row.js
  */
 
+const composers = require('../../shared/composers');
 const constants = require('../../shared/constants');
 const match = require('../../shared/match');
 const sizeMatch = require('./size-match');
@@ -13,6 +14,10 @@ const {
   sizes
 } = constants;
 
+const {
+  Baseline
+} = composers;
+
 const {
   default: styled
 } = Styled;
@@ -51,7 +56,7 @@ const alignItems = (size) => match(sizeMatch(size, {
  * <row center top={['xs', 'sm']} first='lg' />
  * ```
  **/
-module.exports = styled.div`
+const Row = styled.div`
   box-sizing: border-box;
   display: flex;
   flex: 0 1 auto;
@@ -88,3 +93,7 @@ module.exports = styled.div`
     align-items: ${alignItems('lg')};
   `}
 `;
+
+module.exports = Baseline(
+  Row
+);

ui/src/components/select-custom/index.js

@@ -1,4 +1,5 @@
 const fns = require('../../shared/functions');
+const composers = require('../../shared/composers');
 const constants = require('../../shared/constants');
 const React = require('react');
 const Styled = require('styled-components');
@@ -15,6 +16,10 @@ const {
   colors
 } = constants;
 
+const {
+  Baseline
+} = composers;
+
 const {
   default: styled
 } = Styled;
@@ -29,38 +34,35 @@ const SelectCustom = ({
   children,
   className,
   disabled,
-	form,
+  form,
-	id = rndId(),
+  id = rndId(),
   isLoading,
-	label,
+  label,
   multi = false,
   name,
-	onChange,
+  onChange,
-	options,
+  options,
   required = false,
   style,
   value = ''
-}) => {
+}) => (
-
+  <div style={style}>
-  return (
+    <StyledLabel>
-    <div style={style}>
+      {label}
-      <StyledLabel>
+    </StyledLabel>
-        {label}
+    <Select
-      </StyledLabel>
+      autofocus
-      <Select
+      className={className}
-        autofocus
+      disabled={disabled}
-        className={className}
+      loadOptions={async ? options : ''}
-        disabled={disabled}
+      multi={multi}
-        loadOptions={async ? options : ''}
+      name={name}
-        multi={multi}
+      onChange={onChange}
-        name={name}
+      options={!async ? options : ''}
-        onChange={onChange}
+      value={value}
-        options={!async ? options : ''}
+    />
-        value={value}
+  </div>
-      />
+);
-    </div>
-  );
-};
 
 SelectCustom.propTypes = {
   async: React.PropTypes.bool,
@@ -81,4 +83,6 @@ SelectCustom.propTypes = {
   value: React.PropTypes.string
 };
 
-module.exports = SelectCustom;
+module.exports = Baseline(
+  SelectCustom
+);

ui/src/components/select/index.js

@@ -1,5 +1,6 @@
-const fns = require('../../shared/functions');
+const composers = require('../../shared/composers');
 const reduxFormProxy = require('../../shared/redux-form-proxy');
+const fns = require('../../shared/functions');
 const React = require('react');
 const Styled = require('styled-components');
 
@@ -13,6 +14,10 @@ const {
   rndId
 } = fns;
 
+const {
+  Baseline
+} = composers;
+
 const {
   default: styled
 } = Styled;
@@ -92,4 +97,6 @@ Select.propTypes = {
   warning: React.PropTypes.string
 };
 
-module.exports = reduxFormProxy(Select);
+module.exports = reduxFormProxy(
+  Baseline(Select)
+);

ui/src/components/table-data-table/index.js

@@ -1,3 +1,4 @@
+const composers = require('../../shared/composers');
 const React = require('react');
 const Styled = require('styled-components');
 
@@ -7,13 +8,17 @@ const {
   default: styled
 } = Styled;
 
+const {
+  Baseline
+} = composers;
+
 const StyledTitle = styled.h3`
   text-align: center
 `;
 
 const StyledTableWrapper = styled.section`
   font-family: 'LibreFranklin', sans-serif;
-	font-style: normal;
+  font-style: normal;
 `;
 
 const Table = ({
@@ -21,21 +26,16 @@ const Table = ({
   columns = [],
   data = [],
   style,
-  title,
+  title
-}) => {
+}) => (
-
+  <StyledTableWrapper style={style}>
-  return (
+    <StyledTitle>{title}</StyledTitle>
-
+    <TableContent
-    <StyledTableWrapper style={style}>
+      columns={columns}
-      <StyledTitle>{title}</StyledTitle>
+      data={data}
-
+    />
-      <TableContent
+  </StyledTableWrapper>
-        columns={columns}
+);
-        data={data}
-      />
-    </StyledTableWrapper>
-  );
-};
 
 Table.propTypes = {
   children: React.PropTypes.node,
@@ -45,4 +45,6 @@ Table.propTypes = {
   title: React.PropTypes.string,
 };
 
-module.exports = Table;
+module.exports = Baseline(
+  Table
+);

ui/src/components/table-data-table/story.js

@@ -7,14 +7,12 @@ const {
 
 const Table = require('./');
 
-const memberDetail = (name) => {
+const memberDetail = (name) => (
-  return (
+  <div>
-    <div>
+    <h4>{name}</h4>
-      <h4>{name}</h4>
+    <small>{name}@biztech.com</small>
-      <small>{name}@biztech.com</small>
+  </div>
-    </div>
+);
-  );
-};
 
 const columns = [{
   title: 'Memeber',

ui/src/components/table-data-table/table-body.js

@@ -1,14 +1,19 @@
+const composers = require('../../shared/composers');
 const React = require('react');
 
 const Row = require('./table-row');
 
+const {
+  Baseline
+} = composers;
+
 const TableBody = ({
   columns,
   data
 }) => {
-  const rows = columns.map( (column, index) => {
+  const rows = columns.map((column, index) => (
-    return <Row dataItem={data[index]} key={index} />;
+    <Row dataItem={data[index]} key={index} />
-  });
+  ));
 
   return (
     <tbody>
@@ -22,4 +27,6 @@ TableBody.propTypes = {
   data: React.PropTypes.array
 };
 
-module.exports = TableBody;
+module.exports = Baseline(
+  TableBody
+);

ui/src/components/table-data-table/table-content.js

@@ -1,3 +1,4 @@
+const composers = require('../../shared/composers');
 const React = require('react');
 const Styled = require('styled-components');
 
@@ -8,6 +9,10 @@ const {
   default: styled
 } = Styled;
 
+const {
+  Baseline
+} = composers;
+
 const StyledTable = styled.table`
   width: 100%;
 `;
@@ -18,15 +23,12 @@ const TableContent = ({
   hasHeader = columns.length >= 1,
   hasBody = data.length >= 1,
   width = '100%'
-}) => {
+}) => (
-
+  <StyledTable>
-  return (
+    {hasHeader ? <TableHeader columns={columns} /> : null}
-    <StyledTable>
+    {hasBody ? <TableBody columns={columns} data={data} /> : null}
-      {hasHeader ? <TableHeader columns={columns} /> : null}
+  </StyledTable>
-      {hasBody ? <TableBody columns={columns} data={data} /> : null}
+);
-    </StyledTable>
-  );
-};
 
 TableContent.propTypes = {
   columns: React.PropTypes.array,
@@ -36,4 +38,6 @@ TableContent.propTypes = {
   width: React.PropTypes.string,
 };
 
-module.exports = TableContent;
+module.exports = Baseline(
+  TableContent
+);

ui/src/components/table-data-table/table-head.js

@@ -3,6 +3,7 @@ const Styled = require('styled-components');
 
 const fns = require('../../shared/functions');
 const constants = require('../../shared/constants');
+const composers = require('../../shared/composers');
 
 const {
   remcalc
@@ -13,6 +14,10 @@ const {
   colors
 } = constants;
 
+const {
+  Baseline
+} = composers;
+
 const {
   default: styled
 } = Styled;
@@ -42,17 +47,14 @@ const TableHeader = ({
 
   const fallBackWidth = `${100 / parseInt(columns.length)}%`;
 
-  const titles = columns.map( (column, i) => {
+  const titles = columns.map((column, i) => (
-
+    <StyledTableHeadItem
-    return (
+      key={i}
-      <StyledTableHeadItem
+      mdWidth={column.width || fallBackWidth}
-        key={i}
+    >
-        mdWidth={column.width || fallBackWidth}
+      {column.title}
-      >
+    </StyledTableHeadItem>
-        {column.title}
+  ));
-      </StyledTableHeadItem>
-    );
-  });
 
   return (
     <StyledTableHead>
@@ -67,4 +69,6 @@ TableHeader.propTypes = {
   columns: React.PropTypes.array
 };
 
-module.exports = TableHeader;
+module.exports = Baseline(
+  TableHeader
+);

ui/src/components/table-data-table/table-row.js

@@ -3,6 +3,7 @@ const Styled = require('styled-components');
 
 const fns = require('../../shared/functions');
 const constants = require('../../shared/constants');
+const composers = require('../../shared/composers');
 
 const {
   remcalc
@@ -17,6 +18,10 @@ const {
   colors
 } = constants;
 
+const {
+  Baseline
+} = composers;
+
 const StyledRow = styled.tr`
   border: solid ${remcalc(1)} ${colors.base.greyDark};
 
@@ -36,13 +41,9 @@ const StyledTableItem = styled.td`
 const Row = ({
   dataItem = {}
 }) => {
-  const _dataItem = dataItem;
+  const rowItems = Object.keys(dataItem).map((item, i) => (
-
+    <StyledTableItem key={i}>{dataItem[item]}</StyledTableItem>
-  const rowItems = Object.keys(_dataItem).map( (item, i) => {
+  ));
-    const value = _dataItem[item];
-
-    return <StyledTableItem key={i}>{value}</StyledTableItem>;
-  });
 
   return (
     <StyledRow>
@@ -55,4 +56,6 @@ Row.propTypes = {
   dataItem: React.PropTypes.object
 };
 
-module.exports = Row;
+module.exports = Baseline(
+  Row
+);

ui/src/components/table-simple-table/table-body.js

@@ -8,22 +8,24 @@ const {
 } = Styled;
 
 const {
-  clearfix
+  clearfix,
+  Baseline
 } = composers;
 
 const StyledTableBody = styled.article`
   box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
-  
+
   ${clearfix}
 `;
 
 const TableBody = ({
   children
 }) => {
-
   const itemCount = children.length;
 
-  if (itemCount <= 1) return;
+  if (itemCount <= 1) {
+    return null;
+  }
 
   return (
     <StyledTableBody itemCount={itemCount}>
@@ -36,4 +38,6 @@ TableBody.propTypes = {
   children: React.PropTypes.node
 };
 
-module.exports = StyledTableBody;
+module.exports = Baseline(
+  StyledTableBody
+);

ui/src/components/table-simple-table/table-head.js

@@ -14,23 +14,24 @@ const {
 } = Styled;
 
 const {
-  clearfix
+  clearfix,
+  Baseline
 } = composers;
 
 const StyledTableHead = styled.header`
   background: #fafafa;
   box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
   padding: ${remcalc(24)} 0;
-  
+
   ${clearfix}
-  
+
   & > .table-item {
     text-align: center;
-    
+
     ${props => {
       const width = 100 / props.itemCount;
       return css`
-        width: ${width}%;  
+        width: ${width}%;
       `;
     }}
   }
@@ -39,10 +40,11 @@ const StyledTableHead = styled.header`
 const TableHead = ({
   children
 }) => {
-
   const itemCount = children.length;
 
-  if (itemCount <= 1) return;
+  if (itemCount <= 1) {
+    return null;
+  }
 
   return (
     <StyledTableHead itemCount={itemCount}>
@@ -55,4 +57,6 @@ TableHead.propTypes = {
   children: React.PropTypes.node
 };
 
-module.exports = TableHead;
+module.exports = Baseline(
+  TableHead
+);

ui/src/components/table-simple-table/table-item.js

@@ -1,10 +1,16 @@
 const React = require('react');
 const Styled = require('styled-components');
 
+const composers = require('../../shared/composers');
+
 const {
   default: styled
 } = Styled;
 
+const {
+  Baseline
+} = composers;
+
 const Item = styled.div`
   display: inline-block;
   float: left;
@@ -12,17 +18,16 @@ const Item = styled.div`
 
 const TableItem = ({
   children
-}) => {
+}) => (
-
+  <Item className="table-item">
-  return (
+    {children}
-    <Item className="table-item">
+  </Item>
-      {children}
+);
-    </Item>
-  );
-};
 
 TableItem.propTypes = {
   children: React.PropTypes.node
 };
 
-module.exports = TableItem;
+module.exports = Baseline(
+  TableItem
+);

ui/src/components/table-simple-table/table-row.js

@@ -11,7 +11,8 @@ const {
 } = Styled;
 
 const {
-  clearfix
+  clearfix,
+  Baseline
 } = composers;
 
 const {
@@ -42,18 +43,16 @@ const StyledTableRow = styled.div`
 
 const TableRow = ({
   children
-}) => {
+}) => (
-  const itemCount = children.length;
+  <StyledTableRow itemCount={children.length}>
-
+    {children}
-  return (
+  </StyledTableRow>
-    <StyledTableRow itemCount={itemCount}>
+);
-      {children}
-    </StyledTableRow>
-  );
-};
 
 TableRow.propTypes = {
   children: React.PropTypes.node
 };
 
-module.exports = TableRow;
+module.exports = Baseline(
+  TableRow
+);

ui/src/components/table-simple-table/table.js

@@ -2,6 +2,7 @@ const React = require('react');
 const Styled = require('styled-components');
 
 const constants = require('../../shared/constants');
+const composers = require('../../shared/composers');
 
 const {
   default: styled
@@ -11,6 +12,10 @@ const {
   colors
 } = constants;
 
+const {
+  Baseline
+} = composers;
+
 const StyledTableWrapper = styled.section`
   border: solid 1px ${colors.base.greyDark}
   font-family: 'LibreFranklin', sans-serif;
@@ -20,7 +25,7 @@ const StyledTableWrapper = styled.section`
 const Table = ({
   children,
   style,
-  title,
+  title
 }) => (
   <StyledTableWrapper style={style}>
     {children}
@@ -33,4 +38,6 @@ Table.propTypes = {
   title: React.PropTypes.string,
 };
 
-module.exports = Table;
+module.exports = Baseline(
+  Table
+);

ui/src/components/tabs/index.js

@@ -1,5 +1,6 @@
 const React = require('react');
 const fns = require('../../shared/functions');
+const composers = require('../../shared/composers');
 const Styled = require('styled-components');
 
 const {
@@ -10,6 +11,10 @@ const {
   default: styled
 } = Styled;
 
+const {
+  Baseline
+} = composers;
+
 const StyledTabs = styled.div`
   font-size: 0;
 
@@ -54,4 +59,6 @@ Tabs.propTypes = {
   style: React.PropTypes.object
 };
 
-module.exports = Tabs;
+module.exports = Baseline(
+  Tabs
+);

ui/src/components/tabs/tab/index.js

@@ -6,7 +6,8 @@ const React = require('react');
 const Styled = require('styled-components');
 
 const {
-  moveZ
+  moveZ,
+  Baseline
 } = composers;
 
 const {
@@ -137,4 +138,6 @@ Tab.propTypes = {
   title: React.PropTypes.string
 };
 
-module.exports = Tab;
+module.exports = Baseline(
+  Tab
+);

ui/src/components/textarea/index.js

@@ -15,7 +15,8 @@ const {
 } = fns;
 
 const {
-  baseBox
+  baseBox,
+  Baseline
 } = composers;
 
 const {
@@ -143,4 +144,6 @@ Textarea.propTypes = {
   value: React.PropTypes.string
 };
 
-module.exports = Textarea;
+module.exports = Baseline(
+  Textarea
+);

ui/src/components/toggle/index.js

@@ -9,7 +9,8 @@ const {
 } = constants;
 
 const {
-  baseBox
+  baseBox,
+  Baseline
 } = composers;
 
 const {
@@ -149,4 +150,6 @@ Toggle.propTypes = {
   style: React.PropTypes.object
 };
 
-module.exports = Toggle;
+module.exports = Baseline(
+  Toggle
+);

ui/src/components/tooltip/index.js

@@ -2,13 +2,14 @@
 
 const React = require('react');
 const composers = require('../../shared/composers');
-const fns = require('../../shared/functions');
 const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
 const Styled = require('styled-components');
 
 const {
   baseBox,
   pseudoEl,
+  Baseline
 } = composers;
 
 const {
@@ -73,7 +74,8 @@ const StyledList = styled.ul`
     margin-left: ${remcalc(-12)};
   }
 `;
-module.exports = ({
+
+const Tooltip = ({
   children,
   className,
   style,
@@ -81,21 +83,23 @@ module.exports = ({
     bottom: '100%',
     left: '10%'
   }
-}) => {
+}) => (
-  return (
+  <StyledList
-    <StyledList
+    arrowPosition={arrowPosition}
-      arrowPosition={arrowPosition}
+    className={className}
-      className={className}
+    style={style}
-      styles={style}
+  >
-    >
+    {children}
-      {children}
+  </StyledList>
-    </StyledList>
+);
-  );
-};
 
-module.exports.propTypes = {
+Tooltip.propTypes = {
   arrowPosition: React.PropTypes.object,
   children: React.PropTypes.node,
   className: React.PropTypes.string,
   style: React.PropTypes.object
 };
+
+module.exports = Baseline(
+  Tooltip
+);

ui/src/components/topology-old/index.js

@@ -1,3 +1,4 @@
+const composers = require('../../shared/composers');
 const constants = require('../../shared/constants');
 const d3 = require('d3');
 const fns = require('../../shared/functions');
@@ -8,6 +9,10 @@ const {
   colors
 } = constants;
 
+const {
+  Baseline
+} = composers;
+
 const {
   remcalc
 } = fns;
@@ -413,7 +418,6 @@ class TopologyGraph extends React.Component {
       />
     );
   }
-
 }
 
 TopologyGraph.propTypes = {
@@ -422,4 +426,6 @@ TopologyGraph.propTypes = {
   width: React.PropTypes.number,
 };
 
-module.exports = TopologyGraph;
+module.exports = Baseline(
+  TopologyGraph
+);

ui/src/components/topology-old/view.js

@@ -1,3 +1,4 @@
+const composers = require('../../shared/composers');
 const constants = require('../../shared/constants');
 const fns = require('../../shared/functions');
 const React = require('react');
@@ -7,6 +8,10 @@ const {
   colors
 } = constants;
 
+const {
+  Baseline
+} = composers;
+
 const {
   remcalc
 } = fns;
@@ -30,4 +35,6 @@ Topology.propTypes = {
   children: React.PropTypes.node,
 };
 
-module.exports = Topology;
+module.exports = Baseline(
+  Topology
+);

ui/src/components/topology/graph-link.js

@@ -1,11 +1,16 @@
 const React = require('react');
 const Styled = require('styled-components');
+const composers = require('../../shared/composers');
 const PropTypes = require('./prop-types');
 
 const {
   default: styled
 } = Styled;
 
+const {
+  Baseline
+} = composers;
+
 const StyledLine = styled.line`
   stroke: #343434;
   stroke-width: 1.5;
@@ -151,4 +156,6 @@ GraphLink.propTypes = {
   nodeSize: PropTypes.Size
 };
 
-module.exports = GraphLink;
+module.exports = Baseline(
+  GraphLink
+);

ui/src/components/topology/graph-node-button.js

@@ -1,10 +1,15 @@
 const React = require('react');
+const composers = require('../../shared/composers');
 const Styled = require('styled-components');
 
 const {
   default: styled
 } = Styled;
 
+const {
+  Baseline
+} = composers;
+
 const StyledButton = styled.rect`
   opacity: 0;
   cursor: pointer;
@@ -54,4 +59,6 @@ GraphNodeButton.propTypes = {
   onButtonClick: React.PropTypes.func.isRequired
 };
 
-module.exports = GraphNodeButton;
+module.exports = Baseline(
+  GraphNodeButton
+);

ui/src/components/topology/graph-node-info.js

@@ -1,19 +1,24 @@
 const React = require('react');
+const composers = require('../../shared/composers');
 const Styled = require('styled-components');
-const DataCentresIcon =
+
-  require(
+const DataCentresIcon = require(
-    // eslint-disable-next-line max-len
+  // eslint-disable-next-line max-len
-    '!babel-loader!svg-react-loader!./icon-data-centers.svg?name=DataCentresIcon'
+  '!babel-loader!svg-react-loader!./icon-data-centers.svg?name=DataCentresIcon'
-  );
+);
-const InstancesIcon =
+
-  require(
+const InstancesIcon = require(
-    '!babel-loader!svg-react-loader!./icon-instances.svg?name=InstancesIcon'
+  '!babel-loader!svg-react-loader!./icon-instances.svg?name=InstancesIcon'
-  );
+);
 
 const {
   default: styled
 } = Styled;
 
+const {
+  Baseline
+} = composers;
+
 const StyledText = styled.text`
   fill: white;
   font-size: 12px;
@@ -56,4 +61,6 @@ GraphNodeInfo.propTypes = {
   })
 };
 
-module.exports = GraphNodeInfo;
+module.exports = Baseline(
+  GraphNodeInfo
+);

ui/src/components/topology/graph-node-metrics.js

@@ -1,10 +1,15 @@
 const React = require('react');
+const composers = require('../../shared/composers');
 const Styled = require('styled-components');
 
 const {
   default: styled
 } = Styled;
 
+const {
+  Baseline
+} = composers;
+
 const StyledText = styled.text`
   fill: white;
   font-size: 12px;
@@ -45,4 +50,6 @@ GraphNodeMetrics.propTypes = {
   })
 };
 
-module.exports = GraphNodeMetrics;
+module.exports = Baseline(
+  GraphNodeMetrics
+);

ui/src/components/topology/graph-node.js

@@ -1,18 +1,23 @@
 const React = require('react');
+const composers = require('../../shared/composers');
 const Styled = require('styled-components');
 const PropTypes = require('./prop-types');
 const GraphNodeButton = require('./graph-node-button');
 const GraphNodeInfo = require('./graph-node-info');
 const GraphNodeMetrics = require('./graph-node-metrics');
-const HeartIcon =
+
-  require(
+const HeartIcon = require(
-    '!babel-loader!svg-react-loader!./icon-heart.svg?name=HeartIcon'
+  '!babel-loader!svg-react-loader!./icon-heart.svg?name=HeartIcon'
-  );
+);
 
 const {
   default: styled
 } = Styled;
 
+const {
+  Baseline
+} = composers;
+
 const StyledRect = styled.rect`
   stroke: #343434;
   fill: #464646;
@@ -144,4 +149,6 @@ GraphNode.propTypes = {
   size: PropTypes.Size
 };
 
-module.exports = GraphNode;
+module.exports = Baseline(
+  GraphNode
+);

ui/src/components/topology/story-helper.js

@@ -1,5 +1,6 @@
 const React = require('react');
 const Styled = require('styled-components');
+const composers = require('../../shared/composers');
 const Input = require('../input');
 const Select = require('../select');
 const Topology = require('./');
@@ -9,6 +10,10 @@ const {
   default: styled
 } = Styled;
 
+const {
+  Baseline
+} = composers;
+
 const {
   TopologyGraph
 } = Topology;
@@ -101,4 +106,6 @@ class StoryHelper extends React.Component {
   }
 }
 
-module.exports = StoryHelper;
+module.exports = Baseline(
+  StoryHelper
+);

ui/src/components/topology/topology-graph.js

@@ -1,5 +1,6 @@
 const React = require('react');
 const Styled = require('styled-components');
+const composers = require('../../shared/composers');
 const GraphSimulation = require('./graph-simulation');
 const GraphNode = require('./graph-node');
 const GraphLink = require('./graph-link');
@@ -13,6 +14,10 @@ const {
   updateSimulation
 } = GraphSimulation;
 
+const {
+  Baseline
+} = composers;
+
 const StyledSvg = styled.svg`
   width: 1024px;
   height: 860px;
@@ -36,9 +41,7 @@ let dragInfo = {
 };
 
 class TopologyGraph extends React.Component {
-
   componentWillMount() {
-
     const {
       nodes,
       links
@@ -265,4 +268,6 @@ TopologyGraph.propTypes = {
   })
 };
 
-module.exports = TopologyGraph;
+module.exports = Baseline(
+  TopologyGraph
+);

ui/src/components/widget/index.js

@@ -1,4 +1,5 @@
 const React = require('react');
+const composers = require('../../shared/composers');
 const constants = require('../../shared/constants');
 const fns = require('../../shared/functions');
 const Styled = require('styled-components');
@@ -7,6 +8,10 @@ const {
   boxes
 } = constants;
 
+const {
+  Baseline
+} = composers;
+
 const {
   rndId,
   remcalc
@@ -96,4 +101,6 @@ Widget.propTypes = {
   value: React.PropTypes.string
 };
 
-module.exports = Widget;
+module.exports = Baseline(
+  Widget
+);

ui/src/shared/composers.js

@@ -1,15 +1,62 @@
-const constants = require('./constants');
 const Styled = require('styled-components');
+const camelCase = require('camel-case');
+
+const constants = require('./constants');
+const fns = require('./functions');
 
 const {
   boxes
 } = constants;
 
 const {
+  unitcalc
+} = fns;
+
+const {
+  default: styled,
   css
 } = Styled;
 
+const sides = [
+  'top',
+  'right',
+  'bottom',
+  'left'
+];
+
+const unitProps = (() => {
+  const sided = (rule) =>
+    sides.map((side) => `${rule}-${side}`);
+
+  const measures = [
+    'margin',
+    'padding'
+  ].reduce((props, rule) => [
+    ...props,
+    rule,
+    ...sided(rule)
+  ], []);
+
+  return sides.reduce((acc, side) => [
+    ...acc,
+    `border-${side}-width`
+  ], [
+    'border',
+    ...measures
+  ]);
+})();
+
+const unitsFromProps = (props) => unitProps
+  .filter((measure) => props[camelCase(measure)])
+  .map((measure) => `
+    ${measure}: ${unitcalc(props[camelCase(measure)])};
+  `)
+  .join(';\n');
+
 module.exports = {
+  Baseline: (Component) => styled(Component)`
+    ${unitsFromProps}
+  `,
   verticallyAlignCenter: css`
     /* Need to place position:relative on parent */
     left: 50%;
@@ -48,15 +95,15 @@ module.exports = {
     bottom: ${positions.bottom || 'auto'};
     left: ${positions.left || 'auto'};
   `,
-  clearfix: css` 
+  clearfix: css`
     &:before,
     &:after {
       content:"";
       display:table;
     }
-    
+
     &:after {
       clear:both;
     }
-  `,
+  `
 };

ui/src/shared/fake-data/index.js

@@ -1,29 +1,22 @@
-const selectData = [
+const selectData = [{
-  {
+  value: 'one',
-    value: 'one',
+  label: 'One'
-    label: 'One'
+}, {
-  },
+  value: 'two',
-  {
+  label: 'Two'
-    value: 'two',
+}, {
-    label: 'Two'
+  value: 'three',
-  },
+  label: 'Three'
-  {
+}, {
-    value: 'three',
+  value: 'four',
-    label: 'Three'
+  label: 'Four'
-  },
+}, {
-  {
+  value: 'five',
-    value: 'four',
+  label: 'Five'
-    label: 'Four'
+}, {
-  },
+  value: 'six',
-  {
+  label: 'Six'
-    value: 'five',
+}];
-    label: 'Five'
-  },
-  {
-    value: 'six',
-    label: 'Six'
-  }
-];
 
 // eslint-disable-next-line max-len
 const profile = 'https://pbs.twimg.com/profile_images/641289584580493312/VBfsPlff_400x400.jpg';
@@ -31,4 +24,4 @@ const profile = 'https://pbs.twimg.com/profile_images/641289584580493312/VBfsPlf
 module.exports = {
   profile,
   selectData
-};
+};

ui/src/shared/functions.js

@@ -1,6 +1,10 @@
 const calc = require('reduce-css-calc');
 const randomNatural = require('random-natural');
 
+const pathToFont = './fonts/';
+const remBase = 16;
+const unitBase = 6;
+
 // from https://github.com/styled-components/styled-components/blob/065001c725744629c7870240e4a955b924ef5337/src/utils/generateAlphabeticName.js
 const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
 const rndId = (_code) => {
@@ -14,52 +18,51 @@ const rndId = (_code) => {
     : lastDigit;
 };
 
-const generateFonts = (fonts) => {
+const remcalc = (...values) => values.map((value) => (
-  const pathToFont = './fonts/';
+  `${String(value).replace('px', '') / remBase}rem`
-  let fontCSS = '';
+)).join(' ');
 
-  fonts.forEach((obj) => {
+const unitcalc = (...values) => values.map(
-    const eot = require(`${pathToFont + obj.filename}.eot`);
+  (value) => remcalc(value * unitBase)
-    const woff = require(`${pathToFont + obj.filename}.woff`);
+);
-    const woff2 = require(`${pathToFont + obj.filename}.woff2`);
+
-    const ttf = require(`${pathToFont + obj.filename}.ttf`);
+const generateFonts = (fonts) => fonts.reduce((sum, {
-    const svg = require(`${pathToFont + obj.filename}.svg`);
+  filename,
-    fontCSS += `
+  family,
-      @font-face {
+  style,
-        font-family: '${obj.family}';
+  weight
-        src: url('${eot}'),
+}) => {
-          url('${eot}?#iefix')
+  const eot = require(`${pathToFont + filename}.eot`);
-               format('embedded-opentype'),
+  const woff = require(`${pathToFont + filename}.woff`);
-          url('${woff}')
+  const woff2 = require(`${pathToFont + filename}.woff2`);
-               format('woff'),
+  const ttf = require(`${pathToFont + filename}.ttf`);
-          url('${woff2}')
+  const svg = require(`${pathToFont + filename}.svg`);
-               format('woff2'),
+
-          url('${ttf}')
+  sum += `
-               format('truetype'),
+    @font-face {
-          url('${svg}#${obj.family}')
+      font-family: '${family}';
-               format('svg');
+      src: url('${eot}'),
-        font-weight: ${obj.weight};
+        url('${eot}?#iefix')
-        font-style: ${obj.style};
+             format('embedded-opentype'),
-      }
+        url('${woff}')
-    `;
+             format('woff'),
-  });
+        url('${woff2}')
-  return fontCSS;
+             format('woff2'),
-};
+        url('${ttf}')
+             format('truetype'),
+        url('${svg}#${family}')
+             format('svg');
+      font-weight: ${weight};
+      font-style: ${style};
+    }
+  `;
+
+  return sum;
+});
 
 module.exports = {
-  remcalc: (values) => {
+  unitcalc: unitcalc,
-    values = values.toString().replace('px', '').split(' ');
+  remcalc: remcalc,
-
-    let outputRems = '';
-    const base = 16;
-
-    values.forEach( (value, i) => {
-      const remValue = value / base;
-      outputRems += i === 0 ? `${remValue}rem` : ` ${remValue}rem`;
-    });
-
-    return outputRems;
-  },
   calc: (str) => calc(`calc(${str})`),
   rndId,
   generateFonts

ui/yarn.lock

@@ -1496,6 +1496,13 @@ callsites@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-0.2.0.tgz#afab96262910a7f33c19a5775825c69f34e350ca"
 
+camel-case:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73"
+  dependencies:
+    no-case "^2.2.0"
+    upper-case "^1.1.1"
+
 camelcase-keys@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7"
@@ -6803,6 +6810,10 @@ update-notifier@^1.0.0:
     semver-diff "^2.0.0"
     xdg-basedir "^2.0.0"
 
+upper-case@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
+
 url-loader@^0.5.7:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.5.7.tgz#67e8779759f8000da74994906680c943a9b0925d"