Merge pull request #182 from appfolio/simplifySummaryBlock

gt - Remove custom SCSS

src/components/SummaryBox.js

@@ -1,13 +1,13 @@
 import React from 'react';
+import { CardGroup } from '../';
 import SummaryBoxItem from './SummaryBoxItem.js';
-import styles from './SummaryBox.scss';
 
 const SummaryBox = (props) => (
-  <div className={styles.summaryBox}>
+  <CardGroup>
     {props.items ?
-      props.items.map(item => <SummaryBoxItem value={item.value} label={item.label} />) :
+      props.items.map((item, i) => <SummaryBoxItem key={i} value={item.value} label={item.label} />) :
       props.children}
-  </div>
+  </CardGroup>
 );
 
 SummaryBox.propTypes = {

src/components/SummaryBoxItem.js

@@ -1,12 +1,13 @@
 import React from 'react';
-
-import styles from './SummaryBoxItem.scss';
+import { Card, CardBlock } from '../';
 
 const SummaryBoxItem = (props) => (
-  <div className={styles.summaryBoxItem}>
-    <span className={styles.summaryBoxItemValue}>{props.value}</span>
-    <label className={styles.summaryBoxItemLabel}>{props.label}</label>
-  </div>
+  <Card>
+    <CardBlock className="text-center">
+      <h3 className="mb-0 mt-1">{props.value}</h3>
+      <small className="text-muted text-uppercase">{props.label}</small>
+    </CardBlock>
+  </Card>
 );
 
 SummaryBoxItem.propTypes = {

stories/SummaryBox.js

@@ -3,13 +3,15 @@ import { storiesOf } from '@kadira/storybook';
 
 import SummaryBox from '../src/components/SummaryBox';
 import SummaryBoxItem from '../src/components/SummaryBoxItem';
+import { text } from '@kadira/storybook-addon-knobs';
+
 const link = <a href="#">Link</a>;
 
 const items = [
   { value: 'Alpha', label: 'Bravo' },
-  { value: 'Charlie', label: 'Delta' },
-  { value: 'Echo', label: 'Foxtrot' },
-  { value: 'Golf', label: 'Hotel' }
+  { value: 'Charlie Brown', label: 'Delta' },
+  { value: 'Echo' },
+  { label: 'Hotel' }
 ];
 
 storiesOf('SummaryBox', module)
@@ -29,4 +31,10 @@ storiesOf('SummaryBox', module)
       <SummaryBoxItem value="Golf" label="Hotel" />
       <SummaryBoxItem label="Hotel" />
     </SummaryBox>
+  ))
+  .addWithInfo('SummaryBoxItem', () => (
+    <SummaryBoxItem
+      value={text('Live from New York', 'It\'s Saturday Night')}
+      label={text('label', 'World')}
+    />
   ));

test/components/SummaryBox.spec.js

@@ -0,0 +1,51 @@
+import 'jsdom-global/register';
+
+/* eslint-env mocha */
+import React from 'react';
+import assert from 'assert';
+import { mount } from 'enzyme';
+
+import { SummaryBox, SummaryBoxItem } from '../../src';
+
+describe.only('<SummaryBox />', () => {
+  it('should render correctly', () => {
+    const component = mount(<SummaryBox />);
+    assert(component);
+  });
+
+  it('should render items as SummaryBoxItems', () => {
+    const items = [
+      { value: 'Alpha', label: 'Team' },
+      { value: 'Bravo', label: 'Johnny' },
+      { value: 'Charlie', label: 'Brown' }
+    ];
+    const component = mount(<SummaryBox items={items} />);
+    const children = component.find(SummaryBoxItem);
+    assert(children.length, items.length);
+
+    children.forEach((child, i) => {
+      assert.equal(child.prop('value'), items[i].value);
+      assert.equal(child.prop('label'), items[i].label);
+    });
+  });
+
+  it('should render children', () => {
+    const items = [
+      { value: 'Oogah', label: 'Chaka' },
+      { value: 'Milli', label: 'Vanilli' },
+      { value: 'Ray', label: 'Charles' }
+    ];
+    const component = mount(
+      <SummaryBox items={items}>
+        {items.map(({ value, label }) => <SummaryBoxItem value={value} label={label} />)}
+      </SummaryBox>
+    );
+    const children = component.find(SummaryBoxItem);
+    assert(children.length, items.length);
+
+    children.forEach((child, i) => {
+      assert.equal(child.prop('value'), items[i].value);
+      assert.equal(child.prop('label'), items[i].label);
+    });
+  });
+});

test/components/SummaryBoxItem.spec.js

@@ -0,0 +1,24 @@
+import 'jsdom-global/register';
+
+/* eslint-env mocha */
+import React from 'react';
+import assert from 'assert';
+import { mount } from 'enzyme';
+
+import { SummaryBoxItem } from '../../src';
+
+describe('<SummaryBoxItem />', () => {
+  it('should render correctly', () => {
+    const component = mount(<SummaryBoxItem label="Hello" value="World" />);
+    assert(component);
+    assert(component.find('h3').text(), 'Hello');
+    assert(component.find('small').text(), 'World');
+  });
+
+  it('should show the default label and value if none specified', () => {
+    const component = mount(<SummaryBoxItem />);
+    assert(component);
+    assert(component.find('h3').text(), '--');
+    assert(component.find('small').text(), '--');
+  });
+});