Update datapair

src/components/Datapair.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Col, Row } from 'reactstrap';
+
+const Datapair = (props) => (
+  <Row className="m-b-1">
+    <Col sm="4" className="text-sm-right text-muted">{props.label}</Col>
+    <Col sm="8">{props.children || props.value}</Col>
+  </Row>
+);
+
+Datapair.PropTypes = {
+  label: React.PropTypes.string.isRequired,
+  value: React.PropTypes.string
+}
+
+export default Datapair;

stories/Datapair.js

@@ -1,12 +1,27 @@
 import React from 'react';
+import { Button, Card, CardBlock, Container } from 'reactstrap';
 import { storiesOf } from '@kadira/storybook';
 
 import Datapair from '../src/components/datapair/Datapair';
 
 storiesOf('Datapair', module)
   .add('with props', () => (
-    <Datapair label="Key" value="stuff" />
+    <Container>
+      <Card className="m-t-1">
+        <CardBlock>
+          <Datapair label="Key" value="Some simple content would go here" />
+          <Datapair label="Another Key" value="More content" />
+        </CardBlock>
+      </Card>
+    </Container>
   ))
   .add('with HTML value', () => (
-    <Datapair label="Label"><h1>Custom markup</h1></Datapair>
+    <Container>
+      <Card className="m-t-1">
+        <CardBlock>
+          <Datapair label="Label">Custom markup <Button color="primary">can go here</Button></Datapair>
+          <Datapair label="This is a really long label that probably shouldn't be this long" value="Stuff"/>
+        </CardBlock>
+      </Card>
+    </Container>
   ))

test/components/Datapair.spec.js

@@ -0,0 +1,37 @@
+/* eslint-env mocha */
+import React from 'react';
+import assert from 'assert';
+import { shallow } from 'enzyme';
+import { Col } from 'reactstrap';
+
+import Datapair from '../../src/components/Datapair';
+
+describe('<Datapair />', () => {
+  const component = shallow(<Datapair label="stuff" value="something" />);
+
+  it('should have a label and value', () => {
+    const cols = component.find(Col);
+    assert.equal(cols.length, 2);
+    assert.equal(cols.first().childAt(0).text(), 'stuff');
+    assert.equal(cols.last().childAt(0).text(), 'something');
+  });
+
+  it('should align and correctly size label column', () => {
+    const labelCol = component.find(Col).first();
+    assert.equal(labelCol.prop('sm'), '4');
+    assert.equal(labelCol.prop('xs'), '12');
+    assert.equal(labelCol.prop('className'), 'text-sm-right text-muted');
+  });
+
+  it('should correctly size value column', () => {
+    const valCol = component.find(Col).last();
+    assert.equal(valCol.prop('sm'), '8');
+    assert.equal(valCol.prop('xs'), '12');
+  });
+
+  it('should support html in value', () => {
+    const fancyComponent = shallow(<Datapair label="stuff"><span>Special</span></Datapair>)
+        , valCol = fancyComponent.find(Col).last();
+    assert.equal(valCol.childAt(0).html(), '<span>Special</span>');
+  });
+});