Add AddMetric component and redux-form-proxy

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

@@ -0,0 +1,86 @@
+const React = require('react');
+const Styled = require('styled-components');
+const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
+const Button = require('../button');
+
+const {
+  boxes,
+  colors
+} = constants;
+
+const {
+  remcalc
+} = fns;
+
+const {
+  default: styled
+} = Styled;
+
+const padding = remcalc(24);
+
+const AddMetricContainer = styled.div`
+  position: relative;
+  width: ${300}px;
+  height: ${247}px;
+  padding: ${padding};
+  box-shadow: ${boxes.bottomShaddow};
+  border: 1px solid ${colors.borderSecondary};
+  background-color: ${colors.brandSecondary};
+`;
+// WHy is the font not sans?
+const Title = styled.h4`
+  margin-bottom: 0;
+  color: ${colors.semibold};
+`;
+
+const Description = styled.p`
+  margin: 0;
+  color: ${colors.regular};
+`;
+
+// I don't want to have important rules all over the place...
+const Link = styled.a`
+  text-decoration: underline !important;
+`;
+
+const ButtonContainer = styled(Button)`
+  position: absolute;
+  left: ${padding};
+  bottom: ${padding};
+`;
+
+const AddMetric = ({
+  title,
+  description,
+  link,
+  linkLabel,
+  added,
+  addLabel,
+  addedLabel,
+  onAddToggle
+}) => {
+  return (
+    <AddMetricContainer>
+      <Title>{title}</Title>
+      <Description>{description}</Description>
+      <Link href={link}>{linkLabel}</Link>
+      { added ?
+        <ButtonContainer disabled>{addedLabel}</ButtonContainer> :
+        <ButtonContainer secondary>{addLabel}</ButtonContainer> }
+    </AddMetricContainer>
+  );
+};
+
+AddMetric.propTypes = {
+  added: React.PropTypes.bool.isRequired,
+  addedLabel: React.PropTypes.string.isRequired,
+  addLabel: React.PropTypes.string.isRequired,
+  description: React.PropTypes.string.isRequired,
+  link: React.PropTypes.string.isRequired,
+  linkLabel: React.PropTypes.string.isRequired,
+  onAddToggle: React.PropTypes.func.isRequired,
+  title: React.PropTypes.string.isRequired,
+};
+
+module.exports = AddMetric;

ui/src/components/add-metric/readme.md

@@ -0,0 +1 @@
+# `<AddMetric>`

ui/src/index.js

@@ -1,6 +1,7 @@
 module.exports = {
-  Avatar: require('./components/avatar'),
   Base: require('./components/base'),
+  AddMetric: require('./components/add-metric'),
+  Avatar: require('./components/avatar'),
   Button: require('./components/button'),
   Checkbox: require('./components/checkbox'),
   Column: require('./components/column'),

ui/src/shared/redux-form-proxy.js

@@ -0,0 +1,36 @@
+const React = require('react');
+const transformPropsWith = require('transform-props-with');
+
+const {
+  default: tx
+} = transformPropsWith;
+
+const Proxy = tx(props => {
+  
+  const {
+    input,
+    meta,
+    ...rest
+  } = props;
+
+  return {
+    ...input,
+    ...meta,
+    ...rest
+  };
+});
+
+const isReduxForm = (props) =>
+  props.hasOwnProperty('input') || props.hasOwnProperty('meta');
+
+module.exports = (Component) => {
+  const ProxiedComponent = Proxy(Component);
+
+  return (props) => {
+    return isReduxForm(props) ? (
+      <ProxiedComponent {...props} />
+    ) : (
+      <Component {...props} />
+    );
+  };
+};

ui/stories/index.js

@@ -1,7 +1,7 @@
 const React = require('react');
 const {
   storiesOf,
-  // action,
+  action,
   // linkTo
 } = require('@kadira/storybook');
 
@@ -12,6 +12,7 @@ const {
   Checkbox,
   Row,
   Column,
+  AddMetric,
   Avatar,
   Input,
   List: {
@@ -105,6 +106,43 @@ const profile =
   'https://pbs.twimg.com/profile_images/' +
   '641289584580493312/VBfsPlff_400x400.jpg';
 
+storiesOf('Add Metric', module)
+  .add('Add Metric', () => (
+    <Base>
+      <Row>
+        <Column>
+          <AddMetric
+            addLabel='Add'
+            addedLabel='Added'
+            description='CPU usages accross all of the CPU cores.'
+            link='http://somelink.com'
+            linkLabel='Learn more'
+            onAddToggle={action('toggle-added')}
+            title='Aggregated CPU usage'
+          />
+        </Column>
+      </Row>
+    </Base>
+  ))
+  .add('Added Metric', () => (
+    <Base>
+      <Row>
+        <Column>
+          <AddMetric
+            addLabel='Add'
+            added
+            addedLabel='Added'
+            description='CPU usages accross all of the CPU cores.'
+            link='http://somelink.com'
+            linkLabel='Learn more'
+            onAddToggle={action('toggle-added')}
+            title='Aggregated CPU usage'
+          />
+        </Column>
+      </Row>
+    </Base>
+  ));
+
 storiesOf('Avatar', module)
   .add('Avatar Picture', () => (
     <Avatar

ui/test/index.js

@@ -12,6 +12,12 @@ test('renders <Avatar> without exploding', (t) => {
   t.deepEqual(wrapper.length, 1);
 });
 
+test('renders <AddMetric> without exploding', (t) => {
+  const AddMetric = require('../src/components/add-metric');
+  const wrapper = shallow(<AddMetric />);
+  t.deepEqual(wrapper.length, 1);
+});
+
 test('renders <Base> without exploding', (t) => {
   const Base = require('../src/components/base');
   const wrapper = shallow(<Base />);