From 5f5f9610c8feb6bfa9db7b5f7b96328b02d2f49e Mon Sep 17 00:00:00 2001
From: Gary Thomas <gary.thomas@appfolio.com>
Date: Thu, 26 Oct 2017 19:50:28 -0700
Subject: [PATCH 01/11] gt - Replace Select in AddressInput with select

---
 src/components/AddressInput.js       | 31 ++++++---------
 src/components/CountryInput.js       | 48 +++++++++++++++++++++++
 src/components/StateInput.js         | 57 ++++++++++++++++++++++++++++
 test/components/AddressInput.spec.js |  4 --
 4 files changed, 117 insertions(+), 23 deletions(-)
 create mode 100644 src/components/CountryInput.js
 create mode 100644 src/components/StateInput.js

diff --git a/src/components/AddressInput.js b/src/components/AddressInput.js
index dbeafeaa5..8d342a4c4 100644
--- a/src/components/AddressInput.js
+++ b/src/components/AddressInput.js
@@ -2,21 +2,13 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import flow from 'lodash.flow';
 
-import Select from './Select';
+import CountryInput from './CountryInput';
+import StateInput from './StateInput';
 import ValidatedFormGroup from './ValidatedFormGroup';
 import Col from './Col';
 import Input from './Input';
 import Row from './Row';
 
-// TODO Dynamic states based on country:
-import states from './address/USStates.js';
-import COUNTRIES from './address/Countries.js';
-
-const US_STATES = states.map(state => ({
-  label: state.value,
-  value: state.value
-}));
-
 const readEvent = e => ({ [e.target.name]: e.target.value });
 
 class AddressInput extends React.Component {
@@ -48,11 +40,11 @@ class AddressInput extends React.Component {
     value: {},
   };
 
-  onChange = update => {
+  onChange = (update) => {
     this.props.onChange({ ...this.props.value, ...update });
   }
 
-  propsFor = field => {
+  propsFor = (field) => {
     if (this.props.value[field]) {
       return { value: this.props.value[field] };
     }
@@ -66,13 +58,14 @@ class AddressInput extends React.Component {
   }
 
   render() {
-    const { disabled, error, id, labels, showLabels } = this.props;
+    const { disabled, error, id, labels, showLabels, stacked } = this.props;
 
     return (
       <div id={id}>
         <ValidatedFormGroup
           label={showLabels ? labels.address1 : null}
           error={error.address1}
+          stacked={stacked}
         >
           <Input
             id={id ? `${id}_address1` : null}
@@ -89,6 +82,7 @@ class AddressInput extends React.Component {
         <ValidatedFormGroup
           label={showLabels ? labels.address2 : null}
           error={error.address2}
+          stacked={stacked}
         >
           <Input
             id={id ? `${id}_address2` : null}
@@ -126,12 +120,11 @@ class AddressInput extends React.Component {
               error={error.state}
               label={showLabels ? labels.state : null}
             >
-              <Select
+              <StateInput
+                id={id ? `${id}_state` : null}
                 className="w-100"
-                inputProps={{ id: id ? `${id}_state` : null }}
                 name="state"
                 placeholder={labels.state}
-                options={US_STATES}
                 {...this.propsFor('state')}
                 onChange={selection => this.onChange({ state: selection && selection.value })}
                 disabled={disabled}
@@ -160,12 +153,12 @@ class AddressInput extends React.Component {
           error={error.countryCode}
           className="mb-0"
           label={showLabels ? labels.countryCode : null}
+          stacked={stacked}
         >
-          <Select
+          <CountryInput
             className="w-100"
-            inputProps={{ id: id ? `${id}_countryCode` : null }}
+            id={id ? `${id}_countryCode` : null}
             name="countryCode"
-            options={COUNTRIES}
             placeholder={labels.countryCode}
             {...this.propsFor('countryCode')}
             onChange={selection => this.onChange({ countryCode: selection && selection.value })}
diff --git a/src/components/CountryInput.js b/src/components/CountryInput.js
new file mode 100644
index 000000000..83561b762
--- /dev/null
+++ b/src/components/CountryInput.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Input from './Input';
+import COUNTRIES from './address/Countries.js';
+
+export default class CountryInput extends React.Component {
+  static propTypes = {
+    className: PropTypes.string,
+    id: PropTypes.string,
+    locale: PropTypes.string,
+    name: PropTypes.string,
+    placeholder: PropTypes.string,
+    onChange: PropTypes.func,
+    disabled: PropTypes.bool
+  }
+
+  static defaultProps = {
+    onChange: () => {}
+  }
+
+  render() {
+    const {
+      className,
+      disabled,
+      id,
+      name,
+      onChange,
+      placeholder,
+      ...props
+    } = this.props;
+
+    return (
+      <Input
+        type="select"
+        {...props}
+        className={className}
+        disabled={disabled}
+        id={id}
+        name={name}
+        onChange={e => onChange(e.target.value)}
+        placeholder={placeholder}
+      >
+        {COUNTRIES.map(country =>
+          <option value={country.value} key={country.value}>{country.label}</option>)}
+      </Input>
+    );
+  }
+}
diff --git a/src/components/StateInput.js b/src/components/StateInput.js
new file mode 100644
index 000000000..fbf8572a2
--- /dev/null
+++ b/src/components/StateInput.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Input from './Input';
+
+// TODO Dynamic states based on country:
+import states from './address/USStates.js';
+
+const US_STATES = states.map(state => ({
+  label: state.value,
+  value: state.value
+}));
+
+export default class StateInput extends React.Component {
+  static propTypes = {
+    className: PropTypes.string,
+    country: PropTypes.string,
+    id: PropTypes.string,
+    name: PropTypes.string,
+    placeholder: PropTypes.string,
+    onChange: PropTypes.func,
+    disabled: PropTypes.bool
+  }
+
+  static defaultProps = {
+    country: 'US',
+    onChange: () => {}
+  }
+
+  render() {
+    const {
+      className,
+      country,
+      disabled,
+      id,
+      name,
+      onChange,
+      placeholder,
+      ...props
+    } = this.props;
+
+    return (
+      <Input
+        type="select"
+        {...props}
+        className={className}
+        disabled={disabled}
+        id={id}
+        name={name}
+        onChange={e => onChange(e.target.value)}
+        placeholder={placeholder}
+      >
+        {US_STATES.map(state =>
+          <option value={state.value} key={state.value}>{state.label}</option>)}
+      </Input>
+    );
+  }
+}
\ No newline at end of file
diff --git a/test/components/AddressInput.spec.js b/test/components/AddressInput.spec.js
index ca6c271b3..afc769e9e 100644
--- a/test/components/AddressInput.spec.js
+++ b/test/components/AddressInput.spec.js
@@ -55,12 +55,9 @@ describe('<AddressInput />', () => {
 
     it('should have state', () => {
       const input = component.find('[name="state"]');
-      assert.equal(input.type(), Select);
       assert.equal(input.prop('placeholder'), 'State');
       assert.equal(input.prop('defaultValue'), 'NJ');
       assert.equal(input.prop('value'), undefined);
-      assert.deepEqual(input.prop('options').map(s => s.value), states.map(s => s.value));
-
       input.simulate('change', { label: 'New York', value: 'NY' });
       assert(callback.calledWith({ state: 'NY' }));
 
@@ -80,7 +77,6 @@ describe('<AddressInput />', () => {
 
     it('should have country', () => {
       const input = component.find('[name="countryCode"]');
-      assert.equal(input.type(), Select);
       assert.equal(input.prop('placeholder'), 'Country');
       assert.equal(input.prop('defaultValue'), 'US');
       assert.equal(input.prop('value'), undefined);

From 7e04b21bb855fc7839b13863ea453a13d659d82b Mon Sep 17 00:00:00 2001
From: Gary Thomas <gary.thomas@appfolio.com>
Date: Thu, 26 Oct 2017 19:51:32 -0700
Subject: [PATCH 02/11] Correct state name typo

---
 src/components/address/USStates.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/address/USStates.js b/src/components/address/USStates.js
index e632884ee..b31c4d25f 100644
--- a/src/components/address/USStates.js
+++ b/src/components/address/USStates.js
@@ -6,7 +6,7 @@ export default [
   { label: 'California', value: 'CA' },
   { label: 'Colorado', value: 'CO' },
   { label: 'Connecticut', value: 'CT' },
-  { label: 'Deleware', value: 'DE' },
+  { label: 'Delaware', value: 'DE' },
   { label: 'Washington, D.C.', value: 'DC' },
   { label: 'Florida', value: 'FL' },
   { label: 'Georgia', value: 'GA' },

From 2439584a3dcb46abcf85c0005f90dfdc55b4e57f Mon Sep 17 00:00:00 2001
From: Gary Thomas <gary.thomas@appfolio.com>
Date: Thu, 26 Oct 2017 23:04:30 -0700
Subject: [PATCH 03/11] Revert stacked prop

---
 src/components/AddressInput.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/AddressInput.js b/src/components/AddressInput.js
index 8d342a4c4..b216e3efd 100644
--- a/src/components/AddressInput.js
+++ b/src/components/AddressInput.js
@@ -58,14 +58,13 @@ class AddressInput extends React.Component {
   }
 
   render() {
-    const { disabled, error, id, labels, showLabels, stacked } = this.props;
+    const { disabled, error, id, labels, showLabels } = this.props;
 
     return (
       <div id={id}>
         <ValidatedFormGroup
           label={showLabels ? labels.address1 : null}
           error={error.address1}
-          stacked={stacked}
         >
           <Input
             id={id ? `${id}_address1` : null}
@@ -82,7 +81,6 @@ class AddressInput extends React.Component {
         <ValidatedFormGroup
           label={showLabels ? labels.address2 : null}
           error={error.address2}
-          stacked={stacked}
         >
           <Input
             id={id ? `${id}_address2` : null}
@@ -153,7 +151,6 @@ class AddressInput extends React.Component {
           error={error.countryCode}
           className="mb-0"
           label={showLabels ? labels.countryCode : null}
-          stacked={stacked}
         >
           <CountryInput
             className="w-100"

From 551ce7a192d2b17b950e33b893a1bc550ff8c893 Mon Sep 17 00:00:00 2001
From: Gary Thomas <gary.thomas@appfolio.com>
Date: Thu, 26 Oct 2017 23:04:53 -0700
Subject: [PATCH 04/11] Export CountryInput & StateInput

---
 src/index.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/index.js b/src/index.js
index b44b8c8d6..7c0766c62 100755
--- a/src/index.js
+++ b/src/index.js
@@ -70,6 +70,7 @@ import Close from './components/Close.js';
 import CheckboxInput from './components/CheckboxInput.js';
 import CheckboxBooleanInput from './components/CheckboxBooleanInput.js';
 import CheckboxListInput from './components/CheckboxListInput.js';
+import CountryInput from './components/CountryInput.js';
 import CreditCardNumber from './components/CreditCardNumber.js';
 import CurrencyInput from './components/CurrencyInput.js';
 import Datapair from './components/Datapair.js';
@@ -102,6 +103,7 @@ import RadioInput from './components/RadioInput.js';
 import Select from './components/Select.js';
 import SortableTable from './components/SortableTable.js';
 import Spinner from './components/Spinner.js';
+import StateInput from './components/StateInput.js';
 import StaticInput from './components/StaticInput.js';
 import Steps from './components/Steps.js';
 import SummaryBox from './components/SummaryBox.js';
@@ -193,6 +195,7 @@ export {
   CheckboxInput,
   CheckboxBooleanInput,
   CheckboxListInput,
+  CountryInput,
   CreditCardNumber,
   CurrencyInput,
   Datapair,
@@ -218,6 +221,7 @@ export {
   Progress,
   RadioInput,
   Spinner,
+  StateInput,
   StaticInput,
   SortableTable,
   Steps,

From 92449c11c1ad0f3313faf66dc3068a95888348d9 Mon Sep 17 00:00:00 2001
From: Gary Thomas <gary.thomas@appfolio.com>
Date: Thu, 26 Oct 2017 23:15:31 -0700
Subject: [PATCH 05/11] gt - Update stories

---
 stories/Forms.js | 163 ++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 139 insertions(+), 24 deletions(-)

diff --git a/stories/Forms.js b/stories/Forms.js
index c558a805f..3ebfba71c 100644
--- a/stories/Forms.js
+++ b/stories/Forms.js
@@ -1,25 +1,43 @@
 import React from 'react';
-import { Input } from 'reactstrap';
 import { storiesOf, action } from '@storybook/react';
-
-import { BoundForm, BoundFormRow, FormRow, FormChoice, CurrencyInput, AddressInput } from '../src';
 import { text, boolean, number, object, select } from '@storybook/addon-knobs';
 
+import {
+  AddressInput,
+  BoundForm,
+  BoundFormRow,
+  CheckboxInput,
+  Col,
+  CountryInput,
+  CreditCardNumber,
+  CurrencyInput,
+  DateInput,
+  FileInput,
+  FormChoice,
+  FormGroup,
+  FormRow,
+  Input,
+  Label,
+  MonthInput,
+  StateInput,
+  StaticInput,
+} from '../src';
+
 const formData = {
   firstName: 'Obi-Wan',
   movie: 'The Force Awakens',
   ship: 'Millennium Falcon',
   characters: ['Luke Skywalker', 'awesome'],
   address: {
-    address1: '123 Best Avenue'
+    address1: '123 Best Avenue',
   },
-  mindTricks: true
+  mindTricks: true,
 };
 
 const colKnobOptions = {
   range: true,
   min: 1,
-  max: 12
+  max: 12,
 };
 
 storiesOf('Forms', module)
@@ -36,7 +54,7 @@ storiesOf('Forms', module)
           sm: number('sm width', 12, colKnobOptions),
           md: number('md width', 12, colKnobOptions),
           lg: number('lg width', 12, colKnobOptions),
-          xl: number('xl width', 12, colKnobOptions)
+          xl: number('xl width', 12, colKnobOptions),
         }}
         name="live-input"
       >
@@ -48,15 +66,75 @@ storiesOf('Forms', module)
   ))
   .addWithInfo('Inputs', () => (
     <div>
-      <h2 className="my-3">Default (Text) Input</h2>
-      <Input placeholder="I'm a placeholder!" />
-
-      <h2 className="my-3">Custom Inputs</h2>
+      <FormGroup row>
+        <Label sm={3}>Input</Label>
+        <Col sm={9}>
+          <Input placeholder="Hello World" />
+        </Col>
+      </FormGroup>
+      <p>
+        See all supported Input types here:{' '}
+        <a href="https://reactstrap.github.io/components/form/">
+          Reactstrap Form
+        </a>.<br />
+        In addition, we add these input components below:
+      </p>
+      <hr />
 
-      <section className="py-3">
-        <p><code>&lt;CurrencyInput/&gt;</code></p>
-        <CurrencyInput value={123456.7890} />
-      </section>
+      <FormGroup row>
+        <Label sm={3}>CheckboxInput</Label>
+        <Col sm={9}>
+          <CheckboxInput placeholder="Hello World" />
+        </Col>
+      </FormGroup>
+      <FormGroup row>
+        <Label sm={3}>CountryInput</Label>
+        <Col sm={9}>
+          <CountryInput />
+        </Col>
+      </FormGroup>
+      <FormGroup row>
+        <Label sm={3}>CreditCardNumber</Label>
+        <Col sm={9}>
+          <CreditCardNumber value="4111111111111111" />
+        </Col>
+      </FormGroup>
+      <FormGroup row>
+        <Label sm={3}>CurrencyInput</Label>
+        <Col sm={9}>
+          <CurrencyInput value={123456.789} />
+        </Col>
+      </FormGroup>
+      <FormGroup row>
+        <Label sm={3}>DateInput</Label>
+        <Col sm={9}>
+          <DateInput />
+        </Col>
+      </FormGroup>
+      <FormGroup row>
+        <Label sm={3}>FileInput</Label>
+        <Col sm={9}>
+          <FileInput />
+        </Col>
+      </FormGroup>
+      <FormGroup row>
+        <Label sm={3}>MonthInput</Label>
+        <Col sm={9}>
+          <MonthInput />
+        </Col>
+      </FormGroup>
+      <FormGroup row>
+        <Label sm={3}>StateInput</Label>
+        <Col sm={9}>
+          <StateInput />
+        </Col>
+      </FormGroup>
+      <FormGroup row>
+        <Label sm={3}>StaticInput</Label>
+        <Col sm={9}>
+          <StaticInput value="No Change" />
+        </Col>
+      </FormGroup>
     </div>
   ))
   .addWithInfo('Form Rows', () => (
@@ -66,15 +144,32 @@ storiesOf('Forms', module)
       <FormRow label="Nickname" hint="A fun name to describe yourself!" />
       <FormRow label="DOB" required />
       <FormRow label="Disabled Field" disabled />
-      <FormRow label="Who is Luke's Father?" value="Darth Vader" type="static" />
-      <FormRow state="warning" placeholder="Labels can be omitted but that may be bad" />
+      <FormRow
+        label="Who is Luke's Father?"
+        value="Darth Vader"
+        type="static"
+      />
+      <FormRow
+        state="warning"
+        placeholder="Labels can be omitted but that may be bad"
+      />
       <FormRow type="textarea" label="Notes" />
-      <FormRow type="select" label="Select Movie" color="success" feedback="Awesome!">
+      <FormRow
+        type="select"
+        label="Select Movie"
+        color="success"
+        feedback="Awesome!"
+      >
         <FormChoice value="override">A New Hope</FormChoice>
         <FormChoice>The Empire Strikes Back</FormChoice>
         <FormChoice>The Force Awakens</FormChoice>
       </FormRow>
-      <FormRow type="radio" label="Select Ship" hint="Some ships are unreliable..." name="ship">
+      <FormRow
+        type="radio"
+        label="Select Ship"
+        hint="Some ships are unreliable..."
+        name="ship"
+      >
         <FormChoice color="danger">Death Star</FormChoice>
         <FormChoice color="warning">Millennium Falcon</FormChoice>
         <FormChoice color="success">Imperial Shuttle</FormChoice>
@@ -91,7 +186,10 @@ storiesOf('Forms', module)
         <FormChoice>Yes</FormChoice>
         <FormChoice disabled>No</FormChoice>
       </FormRow>
-      <FormRow type={CurrencyInput} label="How much would you pay to meet the cast?" />
+      <FormRow
+        type={CurrencyInput}
+        label="How much would you pay to meet the cast?"
+      />
     </form>
   ))
   .addWithInfo('Forms with Objects', () => (
@@ -102,27 +200,44 @@ storiesOf('Forms', module)
     >
       <BoundFormRow label="First Name" name="firstName" />
       <BoundFormRow label="Last Name" name="lastName" required />
-      <BoundFormRow type={CurrencyInput} label="How much would you pay to meet the cast?" name="amount" />
+      <BoundFormRow
+        type={CurrencyInput}
+        label="How much would you pay to meet the cast?"
+        name="amount"
+      />
       <BoundFormRow type="select" label="Select Movie" name="movie">
         <FormChoice>A New Hope</FormChoice>
         <FormChoice value="episode6">The Empire Strikes Back</FormChoice>
         <FormChoice>The Force Awakens</FormChoice>
       </BoundFormRow>
-      <BoundFormRow type="checkbox" label="Select the character(s) you like" name="characters">
+      <BoundFormRow
+        type="checkbox"
+        label="Select the character(s) you like"
+        name="characters"
+      >
         <FormChoice>Darth Vader</FormChoice>
         <FormChoice>Luke Skywalker</FormChoice>
         <FormChoice disabled>Emperor Palpatine</FormChoice>
         <FormChoice value="awesome">Rey</FormChoice>
         <FormChoice>TK-421</FormChoice>
       </BoundFormRow>
-      <BoundFormRow type="checkbox" label="Use Jedi mind tricks?" name="mindTricks" />
+      <BoundFormRow
+        type="checkbox"
+        label="Use Jedi mind tricks?"
+        name="mindTricks"
+      />
       <BoundFormRow type="radio" label="Select Ship" name="ship">
         <FormChoice>Death Star</FormChoice>
         <FormChoice>Millennium Falcon</FormChoice>
         <FormChoice value="shuttle">Imperial Shuttle</FormChoice>
       </BoundFormRow>
       <BoundFormRow type={AddressInput} name="address" label="Address" />
-      <BoundFormRow type="file" label="Death Star Schematics" name="deathStarPlans" multiple />
+      <BoundFormRow
+        type="file"
+        label="Death Star Schematics"
+        name="deathStarPlans"
+        multiple
+      />
       <button className="btn btn-primary">Submit</button>
     </BoundForm>
   ));

From cf2ec6d45b3b784f3fc3d3f04b0457e35158f20a Mon Sep 17 00:00:00 2001
From: Gary Thomas <gary.thomas@appfolio.com>
Date: Fri, 27 Oct 2017 12:02:11 -0700
Subject: [PATCH 06/11] gt - Update countries and states

- Reorder countries for common usage
- Correct State typo
- Add other US state codes
---
 src/components/address/Countries.js |  4 ++--
 src/components/address/USStates.js  | 14 ++++++++++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/address/Countries.js b/src/components/address/Countries.js
index f83d347a6..9c612f106 100644
--- a/src/components/address/Countries.js
+++ b/src/components/address/Countries.js
@@ -1,4 +1,6 @@
 export default [
+  { label: 'United States of America', value: 'US' },
+  { label: 'Canada', value: 'CA' },
   { label: 'Afghanistan', value: 'AF' },
   { label: 'Åland Islands', value: 'AX' },
   { label: 'Albania', value: 'AL' },
@@ -39,7 +41,6 @@ export default [
   { label: 'Cabo Verde', value: 'CV' },
   { label: 'Cambodia', value: 'KH' },
   { label: 'Cameroon', value: 'CM' },
-  { label: 'Canada', value: 'CA' },
   { label: 'Cayman Islands', value: 'KY' },
   { label: 'Central African Republic', value: 'CF' },
   { label: 'Chad', value: 'TD' },
@@ -234,7 +235,6 @@ export default [
   { label: 'Ukraine', value: 'UA' },
   { label: 'United Arab Emirates', value: 'AE' },
   { label: 'United Kingdom of Great Britain and Northern Ireland', value: 'GB' },
-  { label: 'United States of America', value: 'US' },
   { label: 'United States Minor Outlying Islands', value: 'UM' },
   { label: 'Uruguay', value: 'UY' },
   { label: 'Uzbekistan', value: 'UZ' },
diff --git a/src/components/address/USStates.js b/src/components/address/USStates.js
index b31c4d25f..5a6ad9b3b 100644
--- a/src/components/address/USStates.js
+++ b/src/components/address/USStates.js
@@ -16,7 +16,7 @@ export default [
   { label: 'Indiana', value: 'IN' },
   { label: 'Iowa', value: 'IA' },
   { label: 'Kansas', value: 'KS' },
-  { label: 'Kentuky', value: 'KY' },
+  { label: 'Kentucky', value: 'KY' },
   { label: 'Louisiana', value: 'LA' },
   { label: 'Maine', value: 'ME' },
   { label: 'Maryland', value: 'MD' },
@@ -49,5 +49,15 @@ export default [
   { label: 'Washington', value: 'WA' },
   { label: 'West Virginia', value: 'WV' },
   { label: 'Wisconsin', value: 'WI' },
-  { label: 'Wyoming', value: 'WY' }
+  { label: 'Wyoming', value: 'WY' },
+  { label: 'U.S. Armed Forces Americas', value: 'AA' },
+  { label: 'U.S. Armed Forces Europe', value: 'AE' },
+  { label: 'U.S. Armed Forces Pacific', value: 'AP' },
+  { label: 'American Samoa', value: 'AS' },
+  { label: 'Micronesia', value: 'FM' },
+  { label: 'Guam', value: 'GU' },
+  { label: 'Marshall Islands', value: 'MH' },
+  { label: 'Northern Mariana Islands', value: 'MP' },
+  { label: 'Puerto Rico', value: 'PR' },
+  { label: 'Virgin Islands', value: 'VI' }
 ];

From 38638374875d0cc278773c35858578032a11e04b Mon Sep 17 00:00:00 2001
From: Gary Thomas <gary.thomas@appfolio.com>
Date: Fri, 27 Oct 2017 12:49:48 -0700
Subject: [PATCH 07/11] gt - Correct onChange in AddressInput

---
 src/components/AddressInput.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/AddressInput.js b/src/components/AddressInput.js
index b216e3efd..2a1edfc2c 100644
--- a/src/components/AddressInput.js
+++ b/src/components/AddressInput.js
@@ -124,7 +124,7 @@ class AddressInput extends React.Component {
                 name="state"
                 placeholder={labels.state}
                 {...this.propsFor('state')}
-                onChange={selection => this.onChange({ state: selection && selection.value })}
+                onChange={state => this.onChange({ state })}
                 disabled={disabled}
               />
             </ValidatedFormGroup>
@@ -158,7 +158,7 @@ class AddressInput extends React.Component {
             name="countryCode"
             placeholder={labels.countryCode}
             {...this.propsFor('countryCode')}
-            onChange={selection => this.onChange({ countryCode: selection && selection.value })}
+            onChange={countryCode => this.onChange({ countryCode })}
             disabled={disabled}
           />
         </ValidatedFormGroup>

From beedc40edf85476c8f0506e2cc399475d4b69364 Mon Sep 17 00:00:00 2001
From: Gary Thomas <gary.thomas@appfolio.com>
Date: Sat, 28 Oct 2017 09:45:21 -0700
Subject: [PATCH 08/11] gt - Update props and onChange values

---
 src/components/AddressInput.js |  2 +-
 src/components/CountryInput.js | 10 +++++-----
 src/components/StateInput.js   | 27 +++++++++------------------
 3 files changed, 15 insertions(+), 24 deletions(-)

diff --git a/src/components/AddressInput.js b/src/components/AddressInput.js
index 2a1edfc2c..26b8b7ca5 100644
--- a/src/components/AddressInput.js
+++ b/src/components/AddressInput.js
@@ -119,8 +119,8 @@ class AddressInput extends React.Component {
               label={showLabels ? labels.state : null}
             >
               <StateInput
-                id={id ? `${id}_state` : null}
                 className="w-100"
+                id={id ? `${id}_state` : null}
                 name="state"
                 placeholder={labels.state}
                 {...this.propsFor('state')}
diff --git a/src/components/CountryInput.js b/src/components/CountryInput.js
index 83561b762..c35fa03d9 100644
--- a/src/components/CountryInput.js
+++ b/src/components/CountryInput.js
@@ -6,12 +6,12 @@ import COUNTRIES from './address/Countries.js';
 export default class CountryInput extends React.Component {
   static propTypes = {
     className: PropTypes.string,
+    disabled: PropTypes.bool,
     id: PropTypes.string,
-    locale: PropTypes.string,
     name: PropTypes.string,
-    placeholder: PropTypes.string,
     onChange: PropTypes.func,
-    disabled: PropTypes.bool
+    placeholder: PropTypes.string,
+    value: PropTypes.string
   }
 
   static defaultProps = {
@@ -37,9 +37,9 @@ export default class CountryInput extends React.Component {
         disabled={disabled}
         id={id}
         name={name}
-        onChange={e => onChange(e.target.value)}
-        placeholder={placeholder}
+        onChange={e => onChange(e.target.value === '' ? null : e.target.value)}
       >
+        <option value="">{placeholder}</option>
         {COUNTRIES.map(country =>
           <option value={country.value} key={country.value}>{country.label}</option>)}
       </Input>
diff --git a/src/components/StateInput.js b/src/components/StateInput.js
index fbf8572a2..40631d5b5 100644
--- a/src/components/StateInput.js
+++ b/src/components/StateInput.js
@@ -1,35 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Input from './Input';
-
-// TODO Dynamic states based on country:
-import states from './address/USStates.js';
-
-const US_STATES = states.map(state => ({
-  label: state.value,
-  value: state.value
-}));
+import STATES from './address/USStates.js'; // TODO Dynamic states based on country
 
 export default class StateInput extends React.Component {
   static propTypes = {
     className: PropTypes.string,
-    country: PropTypes.string,
+    disabled: PropTypes.bool,
     id: PropTypes.string,
     name: PropTypes.string,
-    placeholder: PropTypes.string,
     onChange: PropTypes.func,
-    disabled: PropTypes.bool
+    placeholder: PropTypes.string,
+    value: PropTypes.string
   }
 
   static defaultProps = {
-    country: 'US',
     onChange: () => {}
   }
 
   render() {
     const {
       className,
-      country,
       disabled,
       id,
       name,
@@ -46,12 +37,12 @@ export default class StateInput extends React.Component {
         disabled={disabled}
         id={id}
         name={name}
-        onChange={e => onChange(e.target.value)}
-        placeholder={placeholder}
+        onChange={e => onChange(e.target.value === '' ? null : e.target.value)}
       >
-        {US_STATES.map(state =>
-          <option value={state.value} key={state.value}>{state.label}</option>)}
+        <option value="">{placeholder}</option>
+        {STATES.map(state =>
+          <option title={state.label} value={state.value} key={state.value}>{state.value}</option>)}
       </Input>
     );
   }
-}
\ No newline at end of file
+}

From a6055f6a90d8236f38a512e47246b276253ba969 Mon Sep 17 00:00:00 2001
From: Gary Thomas <gary.thomas@appfolio.com>
Date: Sat, 28 Oct 2017 10:36:43 -0700
Subject: [PATCH 09/11] gt - Add and update tests

---
 test/components/AddressInput.spec.js | 27 ++++++++-------
 test/components/CountryInput.spec.js | 50 ++++++++++++++++++++++++++++
 test/components/StateInput.spec.js   | 50 ++++++++++++++++++++++++++++
 3 files changed, 113 insertions(+), 14 deletions(-)
 create mode 100644 test/components/CountryInput.spec.js
 create mode 100644 test/components/StateInput.spec.js

diff --git a/test/components/AddressInput.spec.js b/test/components/AddressInput.spec.js
index afc769e9e..24daf7dba 100644
--- a/test/components/AddressInput.spec.js
+++ b/test/components/AddressInput.spec.js
@@ -4,12 +4,11 @@ import { mount, shallow } from 'enzyme';
 import sinon from 'sinon';
 
 import { AddressInput, Select, FormFeedback, FormGroup, Input, Label } from '../../src';
-import states from '../../src/components/address/USStates';
 
 describe('<AddressInput />', () => {
   describe('uncontrolled', () => {
     const callback = sinon.spy();
-    const component = shallow(
+    const component = mount(
       <AddressInput
         defaultValue={{
           address1: 'Wayne Enterprises',
@@ -54,14 +53,14 @@ describe('<AddressInput />', () => {
     });
 
     it('should have state', () => {
-      const input = component.find('[name="state"]');
-      assert.equal(input.prop('placeholder'), 'State');
+      const input = component.find('select[name="state"]');
+      // assert.equal(input.prop('placeholder'), 'State');  TODO selects don't have placeholders
       assert.equal(input.prop('defaultValue'), 'NJ');
       assert.equal(input.prop('value'), undefined);
-      input.simulate('change', { label: 'New York', value: 'NY' });
+      input.simulate('change', { target: { value: 'NY' } });
       assert(callback.calledWith({ state: 'NY' }));
 
-      input.simulate('change', null);
+      input.simulate('change', { target: { value: null } });
       assert(callback.calledWith({ state: null }));
     });
 
@@ -77,14 +76,14 @@ describe('<AddressInput />', () => {
 
     it('should have country', () => {
       const input = component.find('[name="countryCode"]');
-      assert.equal(input.prop('placeholder'), 'Country');
+      // assert.equal(input.prop('placeholder'), 'Country'); TODO selects don't have placeholders
       assert.equal(input.prop('defaultValue'), 'US');
       assert.equal(input.prop('value'), undefined);
 
-      input.simulate('change', { label: 'USA', value: 'US' });
+      input.simulate('change', { target: { value: 'US' } });
       assert(callback.calledWith({ countryCode: 'US' }));
 
-      input.simulate('change', null);
+      input.simulate('change', { target: { value: null } });
       assert(callback.calledWith({ countryCode: null }));
     });
 
@@ -114,7 +113,7 @@ describe('<AddressInput />', () => {
       postal: '07001',
       countryCode: 'US'
     };
-    const component = shallow(
+    const component = mount(
       <AddressInput
         value={addressData}
         onChange={callback}
@@ -153,10 +152,10 @@ describe('<AddressInput />', () => {
       assert.equal(input.prop('value'), 'NJ');
       assert.equal(input.prop('defaultValue'), null);
 
-      input.simulate('change', { label: 'New York', value: 'NY' });
+      input.simulate('change', { target: { value: 'NY' } });
       assert(callback.calledWith(Object.assign({}, addressData, { state: 'NY' })));
 
-      input.simulate('change', null);
+      input.simulate('change', { target: { value: null } });
       assert(callback.calledWith(Object.assign({}, addressData, { state: null })));
     });
 
@@ -174,10 +173,10 @@ describe('<AddressInput />', () => {
       assert.equal(input.prop('value'), 'US');
       assert.equal(input.prop('defaultValue'), null);
 
-      input.simulate('change', { label: 'USA', value: 'US' });
+      input.simulate('change', { target: { value: 'US' } });
       assert(callback.calledWith(Object.assign({}, addressData, { countryCode: 'US' })));
 
-      input.simulate('change', null);
+      input.simulate('change', { target: { value: null } });
       assert(callback.calledWith(Object.assign({}, addressData, { countryCode: null })));
     });
   });
diff --git a/test/components/CountryInput.spec.js b/test/components/CountryInput.spec.js
new file mode 100644
index 000000000..aada869ab
--- /dev/null
+++ b/test/components/CountryInput.spec.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import assert from 'assert';
+import { mount } from 'enzyme';
+import sinon from 'sinon';
+
+import { CountryInput } from '../../src';
+
+describe('<CountryInput />', () => {
+  it('should default to blank', () => {
+    const component = mount(<CountryInput />);
+    assert.equal(component.find('select').node.selectedIndex, 0);
+  });
+
+  it('should default to specified countryCode', () => {
+    const component = mount(<CountryInput defaultValue="US" />);
+    assert.equal(component.find('select').node.selectedIndex, 1);
+  });
+
+  it('should call onChange when new selection picked', () => {
+    const callback = sinon.spy();
+    const component = mount(<CountryInput onChange={callback} />);
+    component.find('select').simulate('change', { target: { value: 'VN' } });
+    sinon.assert.calledWith(callback, 'VN');
+  });
+
+  it('should be disabled when specified', () => {
+    const component = mount(<CountryInput disabled />);
+    assert.equal(component.find('select').props().disabled, true);
+  });
+
+  it('should render specified id', () => {
+    const component = mount(<CountryInput id="yowza" />);
+    assert.equal(component.find('#yowza').exists(), true);
+  });
+
+  it('should render specified classNames', () => {
+    const component = mount(<CountryInput className="boogie" />);
+    assert.equal(component.find('.boogie').exists(), true);
+  });
+
+  it('should render specified name', () => {
+    const component = mount(<CountryInput name="fred" />);
+    assert.equal(component.find('[name="fred"]').exists(), true);
+  });
+
+  it('should render specified placeholder', () => {
+    const component = mount(<CountryInput placeholder="Pick a Country..." />);
+    assert.equal(component.find('option').first().text(), 'Pick a Country...');
+  });
+});
diff --git a/test/components/StateInput.spec.js b/test/components/StateInput.spec.js
new file mode 100644
index 000000000..e740f202f
--- /dev/null
+++ b/test/components/StateInput.spec.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import assert from 'assert';
+import { mount } from 'enzyme';
+import sinon from 'sinon';
+
+import { StateInput } from '../../src';
+
+describe('<StateInput />', () => {
+  it('should default to blank', () => {
+    const component = mount(<StateInput />);
+    assert.equal(component.find('select').node.selectedIndex, 0);
+  });
+
+  it('should default to specified countryCode', () => {
+    const component = mount(<StateInput defaultValue="AL" />);
+    assert.equal(component.find('select').node.selectedIndex, 1);
+  });
+
+  it('should call onChange when new selection picked', () => {
+    const callback = sinon.spy();
+    const component = mount(<StateInput onChange={callback} />);
+    component.find('select').simulate('change', { target: { value: 'VI' } });
+    sinon.assert.calledWith(callback, 'VI');
+  });
+
+  it('should be disabled when specified', () => {
+    const component = mount(<StateInput disabled />);
+    assert.equal(component.find('select').props().disabled, true);
+  });
+
+  it('should render specified id', () => {
+    const component = mount(<StateInput id="yowza" />);
+    assert.equal(component.find('#yowza').exists(), true);
+  });
+
+  it('should render specified classNames', () => {
+    const component = mount(<StateInput className="boogie" />);
+    assert.equal(component.find('.boogie').exists(), true);
+  });
+
+  it('should render specified name', () => {
+    const component = mount(<StateInput name="fred" />);
+    assert.equal(component.find('[name="fred"]').exists(), true);
+  });
+
+  it('should render specified placeholder', () => {
+    const component = mount(<StateInput placeholder="Pick a State..." />);
+    assert.equal(component.find('option').first().text(), 'Pick a State...');
+  });
+});

From 802fe5a50a53ba9ad188e3cc9e8564533920eed2 Mon Sep 17 00:00:00 2001
From: Gary Thomas <gary.thomas@appfolio.com>
Date: Sat, 28 Oct 2017 10:36:59 -0700
Subject: [PATCH 10/11] gt - Update story

---
 stories/Address.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/stories/Address.js b/stories/Address.js
index 7c7a270ae..b917513c4 100644
--- a/stories/Address.js
+++ b/stories/Address.js
@@ -49,7 +49,7 @@ storiesOf('AddressInput', module)
           city: text('city', 'Smallsville'),
           state: select('state', states.map(s => s.value), 'AL'),
           postal: text('postal', '12345-1234'),
-          countryCode: 'US'
+          countryCode: text('countryCode', 'US'),
         }}
         error={object('error', { address1: 'bad stuff', state: 'no' })}
         onChange={action('address onChange')}

From 9f1d1a45612a1b4e506a91f9bd0f93044c931b3b Mon Sep 17 00:00:00 2001
From: Gary Thomas <gary.thomas@appfolio.com>
Date: Sat, 28 Oct 2017 12:21:32 -0700
Subject: [PATCH 11/11] gt - Add TODO

---
 src/components/CountryInput.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/CountryInput.js b/src/components/CountryInput.js
index c35fa03d9..2a2cc5a2a 100644
--- a/src/components/CountryInput.js
+++ b/src/components/CountryInput.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Input from './Input';
-import COUNTRIES from './address/Countries.js';
+import COUNTRIES from './address/Countries.js'; // TODO i18n country names based on locale
 
 export default class CountryInput extends React.Component {
   static propTypes = {