Add <AreaUnits /> component

Component for formatting a size and it's relevant units correctly

components/AreaUnits/AreaUnits.js

@@ -0,0 +1,38 @@
+import React, { PropTypes } from 'react';
+
+import { AREA_UNITS } from '../../constants/units';
+
+const AreaUnits = ({ value, unit, className, ...rest }) => {
+  switch (unit) {
+    case AREA_UNITS.METERS_SQUARED: return (
+      <span
+        { ...rest }
+        className={ className }
+      >
+        { value }
+        m<sup>2</sup>
+      </span>
+    );
+    case AREA_UNITS.SQUARE_FOOT:
+    default: return (
+      <span
+        { ...rest }
+        className={ className }
+      >
+        { value } sq ft
+      </span>
+    );
+  }
+};
+
+AreaUnits.propTypes = {
+  value: PropTypes.number.isRequired,
+  unit: PropTypes.string.isRequired,
+  className: PropTypes.string,
+};
+
+AreaUnits.defaultProps = {
+  unit: AREA_UNITS.SQUARE_FOOT,
+};
+
+export default AreaUnits;

components/AreaUnits/AreaUnits.story.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { storiesOf } from '@kadira/storybook';
+import AreaUnits from './AreaUnits';
+
+import { AREA_UNITS } from '../../constants/units';
+
+storiesOf('AreaUnits', module)
+  .add('Square foot', () => (
+    <AreaUnits
+      value="300"
+      unit={ AREA_UNITS.SQUARE_FOOT }
+    />
+  ))
+  .add('Meters squared', () => (
+    <AreaUnits
+      value="300"
+      unit={ AREA_UNITS.METERS_SQUARED }
+    />
+  ));

components/AreaUnits/AreaUnits.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import AreaUnits from './AreaUnits';
+import { AREA_UNITS } from '../../constants/units';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  render(
+    <AreaUnits value={ 300 } unit={ AREA_UNITS.SQUARE_FOOT } />,
+    div
+  );
+});

constants/units.js

@@ -0,0 +1,4 @@
+export const AREA_UNITS = {
+  SQUARE_FOOT: 'sqft',
+  METERS_SQUARED: 'm2',
+};