jb - Datapair: leverage FormLabelGroup

src/components/Datapair.js

@@ -1,19 +1,26 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import Col from './Col';
-import Row from './Row';
+import FormLabelGroup from './FormLabelGroup';
+import Input from './Input';
 
-const Datapair = props => (
-  <Row className="mb-1">
-    <Col xs={12} sm={4} className="text-sm-right text-secondary">{props.label}</Col>
-    <Col xs={12} sm={8}>{props.children || props.value}</Col>
-  </Row>
-);
+const Datapair = (props) => {
+  const { children, label, value, ...attributes } = props;
+  return (
+    <FormLabelGroup
+      inline
+      label={label}
+      rowClassName="mb-1"
+      {...attributes}
+    >
+      {children || <Input static>{value}</Input>}
+    </FormLabelGroup>
+  );
+};
 
 Datapair.propTypes = {
   children: PropTypes.node,
   label: PropTypes.node.isRequired,
-  value: PropTypes.string
+  value: PropTypes.node,
 };
 
 export default Datapair;

stories/Datapair.js

@@ -4,16 +4,22 @@ import { storiesOf } from '@storybook/react';
 
 import { Datapair } from '../src';
 
+const description = `
+  Datapairs are clear and concise elements for displaying labeled data. Each element is comprised
+  of two parts: the key (label) and a value. The key is an identifier for some form of data and
+  the value can be text or links.
+  `;
+
 storiesOf('Datapair', module)
-  .addWithInfo('with props', () => (
+  .addWithInfo('with props', description, () => (
     <Card className="mt-1">
       <CardBlock>
         <Datapair label="Key" value="Some simple content would go here" />
         <Datapair label="Another Key" value="More content" />
       </CardBlock>
     </Card>
   ))
-  .addWithInfo('with HTML value', () => (
+  .addWithInfo('with HTML value', description, () => (
     <Card className="mt-1">
       <CardBlock>
         <Datapair label="Label">
@@ -26,12 +32,10 @@ storiesOf('Datapair', module)
       </CardBlock>
     </Card>
   ))
-  .addWithInfo('with node in label', () => (
+  .addWithInfo('with node in label', description, () => (
     <Card className="mt-1">
       <CardBlock>
-        <Datapair label={<span>Name <Badge>awesome</Badge></span>}>
-          Stuff
-        </Datapair>
+        <Datapair label={<span>Name <Badge>awesome</Badge></span>} value="Stuff" />
       </CardBlock>
     </Card>
   ));

test/components/Datapair.spec.js

@@ -1,40 +1,36 @@
 import React from 'react';
 import assert from 'assert';
 import { shallow } from 'enzyme';
-import { Col, Datapair } from '../../src';
+import { Datapair, FormLabelGroup, Input } from '../../src';
 
 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 have a FormLabelGroup', () => {
+    const formLabelGroup = component.find(FormLabelGroup);
+    assert.equal(formLabelGroup.length, 1);
+    assert.equal(formLabelGroup.prop('label'), 'stuff');
 
-  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(labelCol.hasClass('text-sm-right'));
+    const input = formLabelGroup.find(Input);
+    assert.equal(input.children().text(), 'something');
   });
 
-  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 label', () => {
+    const fancyComponent = shallow(<Datapair label={<span>stuff</span>} value="something" />);
+    const formLabelGroup = fancyComponent.find(FormLabelGroup);
+    assert.equal(shallow(formLabelGroup.prop('label')).html(), '<span>stuff</span>');
   });
 
   it('should support html in value', () => {
-    const fancyComponent = shallow(<Datapair label="stuff"><span>Special</span></Datapair>);
-    const valCol = fancyComponent.find(Col).last();
-    assert.equal(valCol.childAt(0).html(), '<span>Special</span>');
+    const fancyComponent = shallow(<Datapair label="stuff" value={<span>Special</span>} />);
+    const formLabelGroup = fancyComponent.find(FormLabelGroup);
+    const input = formLabelGroup.find(Input);
+    assert.equal(input.children().html(), '<span>Special</span>');
   });
 
-  it('should support node in label', () => {
-    const fancyComponent = shallow(<Datapair label={<span>stuff</span>}>Special</Datapair>);
-    const valCol = fancyComponent.find(Col).first();
-    assert.equal(valCol.childAt(0).html(), '<span>stuff</span>');
+  it('should support children', () => {
+    const fancyComponent = shallow(<Datapair label="stuff"><span>Special</span></Datapair>);
+    const formLabelGroup = fancyComponent.find(FormLabelGroup);
+    assert.equal(formLabelGroup.children().html(), '<span>Special</span>');
   });
 });