Merge pull request #314 from appfolio/addAddressId

gt - Add ID prop to AddressInput
appfolio · Oct 19, 2017 · 5639167 · 5639167
2 parents f8a5297 + 12de45e
commit 5639167
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 3 deletions.
diff --git a/src/components/AddressInput.js b/src/components/AddressInput.js
@@ -24,6 +24,7 @@ class AddressInput extends React.Component {
     defaultValue: PropTypes.shape(addressPropType),
     disabled: PropTypes.bool,
     error: PropTypes.shape(addressPropType),
+    id: PropTypes.string,
     labels: PropTypes.shape(addressPropType),
     onChange: PropTypes.func,
     showLabels: PropTypes.bool,
@@ -59,15 +60,16 @@ class AddressInput extends React.Component {
   }
 
   render() {
-    const { disabled, error, labels, showLabels } = this.props;
+    const { disabled, error, id, labels, showLabels } = this.props;
 
     return (
-      <div>
+      <div id={id}>
         <ValidatedFormGroup
           label={showLabels ? labels.address1 : null}
           error={error.address1}
         >
           <Input
+            id={id ? `${id}_address1` : null}
             name="address1"
             type="text"
             placeholder={labels.address1}
@@ -82,6 +84,7 @@ class AddressInput extends React.Component {
           error={error.address2}
         >
           <Input
+            id={id ? `${id}_address2` : null}
             name="address2"
             type="text"
             placeholder={labels.address2}
@@ -99,6 +102,7 @@ class AddressInput extends React.Component {
               label={showLabels ? labels.city : null}
             >
               <Input
+                id={id ? `${id}_city` : null}
                 type="text"
                 name="city"
                 placeholder={labels.city}
@@ -117,6 +121,7 @@ class AddressInput extends React.Component {
             >
               <Select
                 className="w-100"
+                inputProps={{ id: id ? `${id}_state` : null }}
                 name="state"
                 placeholder={labels.state}
                 options={US_STATES}
@@ -132,6 +137,7 @@ class AddressInput extends React.Component {
               error={error.postal}
             >
               <Input
+                id={id ? `${id}_postal` : null}
                 type="text"
                 name="postal"
                 placeholder={labels.postal}
@@ -150,6 +156,7 @@ class AddressInput extends React.Component {
         >
           <Select
             className="w-100"
+            inputProps={{ id: id ? `${id}_countryCode` : null }}
             name="countryCode"
             options={COUNTRIES}
             placeholder={labels.countryCode}

diff --git a/stories/Address.js b/stories/Address.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { storiesOf, action } from '@storybook/react';
 import { boolean, text, select, object } from '@storybook/addon-knobs';
-import { AddressInput } from '../src';
+import { AddressInput, Label } from '../src';
 import states from '../src/components/address/USStates.js';
 
 storiesOf('AddressInput', module)
@@ -24,6 +24,22 @@ storiesOf('AddressInput', module)
       />
     </div>
   ))
+  .addWithInfo('with id', () => (
+    <div>
+      <Label for="myid_address1">Click This Label to Focus First Input:</Label>
+      <AddressInput
+        defaultValue={{
+          address1: '123 No Way',
+          address2: 'Suite 16',
+          city: 'Smallsville',
+          state: 'AL',
+          postal: '12345-1234',
+          countryCode: 'US'
+        }}
+        id="myid"
+      />
+    </div>
+  ))
   .addWithInfo('controlled', () => (
     <div>
       <AddressInput

diff --git a/test/components/Address.spec.js b/test/components/Address.spec.js
@@ -299,4 +299,29 @@ describe('<Address />', () => {
       assert.equal(component.find('label').length, 0);
     });
   });
+
+  describe('ids', () => {
+    it('should not show id by default', () => {
+      const component = mount(<AddressInput />);
+      assert.equal(component.find('div#yo').length, 0, 'div id visible');
+      assert.equal(component.find('#yo_address1').length, 0, 'address1 id visible');
+      assert.equal(component.find('#yo_address2').length, 0, 'address2 id visible');
+      assert.equal(component.find('#yo_city').length, 0, 'city id visible');
+      assert.equal(component.find('#yo_state').length, 0, 'state id visible');
+      assert.equal(component.find('#yo_postal').length, 0, 'postal id visible');
+      assert.equal(component.find('#yo_countryCode').length, 0, 'countryCode id visible');
+    });
+
+    it('should show id by when specified', () => {
+      const component = mount(<AddressInput id="yo" />);
+      assert.equal(component.find('div#yo').length, 1, 'div id missing');
+      assert.equal(component.find('#yo_address1').length, 1, 'address1 id missing');
+      assert.equal(component.find('#yo_address2').length, 1, 'address2 id missing');
+      assert.equal(component.find('#yo_city').length, 1, 'city id missing');
+      assert.equal(component.find('#yo_state').length, 1, 'state id missing');
+      assert.equal(component.find('#yo_postal').length, 1, 'postal id missing');
+      assert.equal(component.find('#yo_countryCode').length, 1, 'countryCode id missing');
+    });
+  });
 });
+