From 253d6fb9ecd42ac44c54a0867df3fdf54daa1c4b Mon Sep 17 00:00:00 2001
From: Gary Thomas <gary.thomas@appfolio.com>
Date: Thu, 6 Apr 2017 14:05:16 -0700
Subject: [PATCH 1/2] gt - Remove custom SCSS

- Remove custom SCSS in  lieu of BS4 components and util classes
- Add unit tests
---
 src/components/SummaryBox.js           |  8 ++--
 src/components/SummaryBox.scss         | 23 ------------
 src/components/SummaryBoxItem.js       | 13 ++++---
 src/components/SummaryBoxItem.scss     | 52 --------------------------
 stories/SummaryBox.js                  |  6 +--
 test/components/SummaryBox.spec.js     | 51 +++++++++++++++++++++++++
 test/components/SummaryBoxItem.spec.js | 24 ++++++++++++
 7 files changed, 89 insertions(+), 88 deletions(-)
 delete mode 100644 src/components/SummaryBox.scss
 delete mode 100644 src/components/SummaryBoxItem.scss
 create mode 100644 test/components/SummaryBox.spec.js
 create mode 100644 test/components/SummaryBoxItem.spec.js

diff --git a/src/components/SummaryBox.js b/src/components/SummaryBox.js
index 5de9cb14a..6fd26eac4 100644
--- a/src/components/SummaryBox.js
+++ b/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 = {
diff --git a/src/components/SummaryBox.scss b/src/components/SummaryBox.scss
deleted file mode 100644
index ae0797ebb..000000000
--- a/src/components/SummaryBox.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.summary-box {
-  background: #fff;
-  border: 2px solid #e0e0e0;
-  border-radius: 2px;
-  box-sizing: border-box;
-  display: flex;
-  margin-bottom: 0.5em;
-  overflow: hidden;
-  white-space: nowrap
-}
-
-@media (max-width: 500px) {
-  .summary-box.summary-box--stack-on-small {
-      flex-direction: column
-  }
-}
-
-@media print {
-  .summary-box {
-      display: table;
-      width: 100%
-  }
-}
\ No newline at end of file
diff --git a/src/components/SummaryBoxItem.js b/src/components/SummaryBoxItem.js
index 788a5b7af..270778c8b 100644
--- a/src/components/SummaryBoxItem.js
+++ b/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 = {
diff --git a/src/components/SummaryBoxItem.scss b/src/components/SummaryBoxItem.scss
deleted file mode 100644
index 1411c83fa..000000000
--- a/src/components/SummaryBoxItem.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-.summary-box__item {
-  flex: 1;
-  margin: 0;
-  padding: 10px 5px;
-  text-align: center
-}
-
-.summary-box__item + .summary-box__item {
-  border-left: 2px solid #e0e0e0
-}
-
-@media (max-width: 500px) {
-  .summary-box--stack-on-small .summary-box__item + .summary-box__item {
-      border-top: 2px solid #e0e0e0;
-      border-left: none
-  }
-}
-
-.summary-box__item--quarter {
-  width: 25%
-}
-
-.summary-box__item__value {
-  color: #303030;
-  display: block;
-  font-size: 1.3em;
-  font-weight: bold;
-  margin: 0;
-  overflow: hidden;
-  white-space: nowrap
-}
-
-.summary-box__item__label {
-  color: #888;
-  display: block;
-  font-size: 0.8em;
-  text-transform: uppercase
-}
-
-.summary-box__item__value__suffix {
-  font-size: 0.7em
-}
-
-@media print {
-  .summary-box__item {
-      display: table-cell
-  }
-
-  .summary-box__item__value {
-      font-size: 1.1em
-  }
-}
\ No newline at end of file
diff --git a/stories/SummaryBox.js b/stories/SummaryBox.js
index 961b0d723..b6cac9e2c 100644
--- a/stories/SummaryBox.js
+++ b/stories/SummaryBox.js
@@ -7,9 +7,9 @@ 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)
diff --git a/test/components/SummaryBox.spec.js b/test/components/SummaryBox.spec.js
new file mode 100644
index 000000000..1ead598c6
--- /dev/null
+++ b/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);
+    });
+  });
+});
diff --git a/test/components/SummaryBoxItem.spec.js b/test/components/SummaryBoxItem.spec.js
new file mode 100644
index 000000000..cf155a390
--- /dev/null
+++ b/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(), '--');
+  });
+});

From a10d3d32791620b4a4e1fd845ede668e9520fee0 Mon Sep 17 00:00:00 2001
From: Gary Thomas <gary.thomas@appfolio.com>
Date: Thu, 6 Apr 2017 18:59:34 -0700
Subject: [PATCH 2/2] gt - Update SummaryBox story

Add SummaryBoxItem substory with knobs
---
 stories/SummaryBox.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/stories/SummaryBox.js b/stories/SummaryBox.js
index b6cac9e2c..41a63f23f 100644
--- a/stories/SummaryBox.js
+++ b/stories/SummaryBox.js
@@ -3,6 +3,8 @@ 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 = [
@@ -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')}
+    />
   ));