From 7ef554c03431be22a32efec95ad919dee45dcbc3 Mon Sep 17 00:00:00 2001
From: Adam Stankiewicz <agstanki@gmail.com>
Date: Mon, 7 May 2018 16:47:05 -0400
Subject: [PATCH] fix(as-input): support multiple input group prepend/append
 elements

---
 .../__snapshots__/Storyshots.test.js.snap     | 148 +++++++++++++-----
 src/InputText/InputText.stories.jsx           |  21 +++
 src/asInput/README.md                         |   8 +-
 src/asInput/asInput.test.jsx                  |  42 +++++
 src/asInput/index.jsx                         |  43 ++++-
 5 files changed, 215 insertions(+), 47 deletions(-)

diff --git a/.storybook/__snapshots__/Storyshots.test.js.snap b/.storybook/__snapshots__/Storyshots.test.js.snap
index 4f403fed5e..d368fc367f 100644
--- a/.storybook/__snapshots__/Storyshots.test.js.snap
+++ b/.storybook/__snapshots__/Storyshots.test.js.snap
@@ -16050,7 +16050,7 @@ exports[`Storyshots InputText with input group addons 1`] = `
           htmlFor="asInput32"
           id="label-asInput32"
         >
-          Password
+          Username
         </label>
         <div
           className="input-group"
@@ -16065,6 +16065,84 @@ exports[`Storyshots InputText with input group addons 1`] = `
             className="form-control is-invalid-nodanger"
             disabled={false}
             id="asInput32"
+            name="username"
+            onBlur={[Function]}
+            onChange={[Function]}
+            placeholder={undefined}
+            required={false}
+            themes={Array []}
+            type="text"
+            value="foobar"
+          />
+          <div
+            className="input-group-append"
+          >
+            <div
+              className="input-group-text"
+            >
+              <div>
+                <span
+                  aria-hidden={true}
+                  className="fa fa-check"
+                  id="checkmark"
+                />
+                <span
+                  className="sr-only"
+                >
+                  Checkmark
+                </span>
+              </div>
+            </div>
+            <button
+              className="btn btn-outline-secondary"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              Go
+            </button>
+          </div>
+        </div>
+        <div
+          aria-live="polite"
+          className="invalid-feedback invalid-feedback-nodanger"
+          id="error-asInput32"
+        >
+          <span />
+        </div>
+      </div>
+      <div
+        className={
+          Array [
+            "form-group",
+          ]
+        }
+      >
+        <label
+          className={
+            Array [
+              "",
+            ]
+          }
+          htmlFor="asInput33"
+          id="label-asInput33"
+        >
+          Password
+        </label>
+        <div
+          className="input-group"
+        >
+          <div
+            className="input-group-prepend"
+          />
+          <input
+            aria-describedby="error-asInput33"
+            aria-invalid={false}
+            autoComplete="on"
+            className="form-control is-invalid-nodanger"
+            disabled={false}
+            id="asInput33"
             name="password"
             onBlur={[Function]}
             onChange={[Function]}
@@ -16098,7 +16176,7 @@ exports[`Storyshots InputText with input group addons 1`] = `
         <div
           aria-live="polite"
           className="invalid-feedback invalid-feedback-nodanger"
-          id="error-asInput32"
+          id="error-asInput33"
         >
           <span />
         </div>
@@ -25004,10 +25082,10 @@ exports[`Storyshots Tabs basic usage 1`] = `
   >
     <li
       className="nav-item"
-      id="tab-label-tabInterface33-0"
+      id="tab-label-tabInterface34-0"
     >
       <a
-        aria-controls="tab-panel-tabInterface33-0"
+        aria-controls="tab-panel-tabInterface34-0"
         aria-selected={true}
         className="nav-link active"
         onClick={[Function]}
@@ -25019,10 +25097,10 @@ exports[`Storyshots Tabs basic usage 1`] = `
     </li>
     <li
       className="nav-item"
-      id="tab-label-tabInterface33-1"
+      id="tab-label-tabInterface34-1"
     >
       <a
-        aria-controls="tab-panel-tabInterface33-1"
+        aria-controls="tab-panel-tabInterface34-1"
         aria-selected={false}
         className="nav-link"
         onClick={[Function]}
@@ -25034,10 +25112,10 @@ exports[`Storyshots Tabs basic usage 1`] = `
     </li>
     <li
       className="nav-item"
-      id="tab-label-tabInterface33-2"
+      id="tab-label-tabInterface34-2"
     >
       <a
-        aria-controls="tab-panel-tabInterface33-2"
+        aria-controls="tab-panel-tabInterface34-2"
         aria-selected={false}
         className="nav-link"
         onClick={[Function]}
@@ -25053,9 +25131,9 @@ exports[`Storyshots Tabs basic usage 1`] = `
   >
     <div
       aria-hidden={false}
-      aria-labelledby="tab-label-tabInterface33-0"
+      aria-labelledby="tab-label-tabInterface34-0"
       className="tab-pane active"
-      id="tab-panel-tabInterface33-0"
+      id="tab-panel-tabInterface34-0"
       role="tabpanel"
     >
       <div>
@@ -25064,9 +25142,9 @@ exports[`Storyshots Tabs basic usage 1`] = `
     </div>
     <div
       aria-hidden={true}
-      aria-labelledby="tab-label-tabInterface33-1"
+      aria-labelledby="tab-label-tabInterface34-1"
       className="tab-pane"
-      id="tab-panel-tabInterface33-1"
+      id="tab-panel-tabInterface34-1"
       role="tabpanel"
     >
       <div>
@@ -25075,9 +25153,9 @@ exports[`Storyshots Tabs basic usage 1`] = `
     </div>
     <div
       aria-hidden={true}
-      aria-labelledby="tab-label-tabInterface33-2"
+      aria-labelledby="tab-label-tabInterface34-2"
       className="tab-pane"
-      id="tab-panel-tabInterface33-2"
+      id="tab-panel-tabInterface34-2"
       role="tabpanel"
     >
       <div>
@@ -25102,8 +25180,8 @@ exports[`Storyshots Textarea label as element 1`] = `
         "",
       ]
     }
-    htmlFor="asInput37"
-    id="label-asInput37"
+    htmlFor="asInput38"
+    id="label-asInput38"
   >
     <span
       lang="en"
@@ -25112,11 +25190,11 @@ exports[`Storyshots Textarea label as element 1`] = `
     </span>
   </label>
   <textarea
-    aria-describedby="error-asInput37"
+    aria-describedby="error-asInput38"
     aria-invalid={false}
     className="form-control is-invalid-nodanger"
     disabled={false}
-    id="asInput37"
+    id="asInput38"
     name="username"
     onBlur={[Function]}
     onChange={[Function]}
@@ -25132,7 +25210,7 @@ exports[`Storyshots Textarea label as element 1`] = `
   <div
     aria-live="polite"
     className="invalid-feedback invalid-feedback-nodanger"
-    id="error-asInput37"
+    id="error-asInput38"
   >
     <span />
   </div>
@@ -25153,17 +25231,17 @@ exports[`Storyshots Textarea minimal usage 1`] = `
         "",
       ]
     }
-    htmlFor="asInput34"
-    id="label-asInput34"
+    htmlFor="asInput35"
+    id="label-asInput35"
   >
     First Name
   </label>
   <textarea
-    aria-describedby="error-asInput34"
+    aria-describedby="error-asInput35"
     aria-invalid={false}
     className="form-control is-invalid-nodanger"
     disabled={false}
-    id="asInput34"
+    id="asInput35"
     name="name"
     onBlur={[Function]}
     onChange={[Function]}
@@ -25179,7 +25257,7 @@ exports[`Storyshots Textarea minimal usage 1`] = `
   <div
     aria-live="polite"
     className="invalid-feedback invalid-feedback-nodanger"
-    id="error-asInput34"
+    id="error-asInput35"
   >
     <span />
   </div>
@@ -25200,17 +25278,17 @@ exports[`Storyshots Textarea scrollable 1`] = `
         "",
       ]
     }
-    htmlFor="asInput35"
-    id="label-asInput35"
+    htmlFor="asInput36"
+    id="label-asInput36"
   >
     Information
   </label>
   <textarea
-    aria-describedby="error-asInput35"
+    aria-describedby="error-asInput36"
     aria-invalid={false}
     className="form-control is-invalid-nodanger"
     disabled={false}
-    id="asInput35"
+    id="asInput36"
     name="name"
     onBlur={[Function]}
     onChange={[Function]}
@@ -25226,7 +25304,7 @@ exports[`Storyshots Textarea scrollable 1`] = `
   <div
     aria-live="polite"
     className="invalid-feedback invalid-feedback-nodanger"
-    id="error-asInput35"
+    id="error-asInput36"
   >
     <span />
   </div>
@@ -25247,17 +25325,17 @@ exports[`Storyshots Textarea validation 1`] = `
         "",
       ]
     }
-    htmlFor="asInput36"
-    id="label-asInput36"
+    htmlFor="asInput37"
+    id="label-asInput37"
   >
     Username
   </label>
   <textarea
-    aria-describedby="error-asInput36 description-asInput36"
+    aria-describedby="error-asInput37 description-asInput37"
     aria-invalid={false}
     className="form-control is-invalid-nodanger"
     disabled={false}
-    id="asInput36"
+    id="asInput37"
     name="username"
     onBlur={[Function]}
     onChange={[Function]}
@@ -25273,13 +25351,13 @@ exports[`Storyshots Textarea validation 1`] = `
   <div
     aria-live="polite"
     className="invalid-feedback invalid-feedback-nodanger"
-    id="error-asInput36"
+    id="error-asInput37"
   >
     <span />
   </div>
   <small
     className="form-text"
-    id="description-asInput36"
+    id="description-asInput37"
   >
     The unique name that identifies you throughout the site.
   </small>
diff --git a/src/InputText/InputText.stories.jsx b/src/InputText/InputText.stories.jsx
index de29fa6656..0dfb8a84be 100644
--- a/src/InputText/InputText.stories.jsx
+++ b/src/InputText/InputText.stories.jsx
@@ -244,6 +244,27 @@ storiesOf('InputText', module)
           />
         )}
       />
+      <InputText
+        name="username"
+        label="Username"
+        value="foobar"
+        inputGroupAppend={[
+          <div className="input-group-text">
+            <Icon
+              id="checkmark"
+              className={[
+                FontAwesomeStyles.fa,
+                FontAwesomeStyles['fa-check'],
+              ]}
+              screenReaderText="Checkmark"
+            />
+          </div>,
+          <Button
+            label="Go"
+            buttonType="outline-secondary"
+          />,
+        ]}
+      />
       <InputText
         name="password"
         label="Password"
diff --git a/src/asInput/README.md b/src/asInput/README.md
index 253d3d354a..9f168f77cd 100644
--- a/src/asInput/README.md
+++ b/src/asInput/README.md
@@ -25,11 +25,11 @@ Handles all necessary props that are related to Input typed components.
 ### `inline` (boolean; optional)
 `inline` specifies if the form-group will be displayed inline (label and input elements on the same line). The default is false.
 
-### `inputGroupAppend` (element, optional)
-`inputGroupAppend` specifies the element to display inline to the right of the input. See [the Bootstrap docs](https://getbootstrap.com/docs/4.0/components/input-group/) for more info on input groups. The default is `undefined`.
+### `inputGroupAppend` (element, element array, optional)
+`inputGroupAppend` specifies the element(s) to display inline to the right of the input. See [the Bootstrap docs](https://getbootstrap.com/docs/4.0/components/input-group/) for more info on input groups. The default is `undefined`.
 
-### `inputGroupPrepend` (element, optional)
-`inputGroupPrepend` specifies the element to display inline to the left of the input. See [the Bootstrap docs](https://getbootstrap.com/docs/4.0/components/input-group/) for more info on input groups. The default is `undefined`.
+### `inputGroupPrepend` (element, element array, optional)
+`inputGroupPrepend` specifies the element(s) to display inline to the left of the input. See [the Bootstrap docs](https://getbootstrap.com/docs/4.0/components/input-group/) for more info on input groups. The default is `undefined`.
 
 ### `name` (string; required)
 `name` specifies the value for the name property within the component.
diff --git a/src/asInput/asInput.test.jsx b/src/asInput/asInput.test.jsx
index 0a47bc7cc1..4fb033d451 100644
--- a/src/asInput/asInput.test.jsx
+++ b/src/asInput/asInput.test.jsx
@@ -399,6 +399,48 @@ describe('asInput()', () => {
         expect(input.find('.input-group-append').exists()).toEqual(true);
         expect(input.find('.input-group-append').text()).toEqual('.00');
       });
+
+      it('displays multiple inputGroupAppend elements', () => {
+        const props = {
+          ...baseProps,
+          inputGroupAppend: [
+            <div className="input-group-text">
+              {'.00'}
+            </div>,
+            <div className="input-group-text">
+              <button className="btn">Go</button>
+            </div>,
+          ],
+        };
+        const wrapper = mount(<InputTestComponent {...props} />);
+        const input = wrapper.find('.form-group');
+        expect(input.find('.input-group').exists()).toEqual(true);
+        expect(input.find('.input-group-append').exists()).toEqual(true);
+        expect(input.find('.input-group-append').children()).toHaveLength(2);
+        expect(input.find('.input-group-append').childAt(0).text()).toEqual('.00');
+        expect(input.find('.input-group-append').childAt(1).text()).toEqual('Go');
+      });
+
+      it('displays multiple inputGroupPrepend elements', () => {
+        const props = {
+          ...baseProps,
+          inputGroupPrepend: [
+            <div className="input-group-text">
+              {'$'}
+            </div>,
+            <div className="input-group-text">
+              {'0.'}
+            </div>,
+          ],
+        };
+        const wrapper = mount(<InputTestComponent {...props} />);
+        const input = wrapper.find('.form-group');
+        expect(input.find('.input-group').exists()).toEqual(true);
+        expect(input.find('.input-group-prepend').exists()).toEqual(true);
+        expect(input.find('.input-group-prepend').children()).toHaveLength(2);
+        expect(input.find('.input-group-prepend').childAt(0).text()).toEqual('$');
+        expect(input.find('.input-group-prepend').childAt(1).text()).toEqual('0.');
+      });
     });
   });
 });
diff --git a/src/asInput/index.jsx b/src/asInput/index.jsx
index 549386a8b5..2242929499 100644
--- a/src/asInput/index.jsx
+++ b/src/asInput/index.jsx
@@ -31,8 +31,8 @@ export const inputProps = {
   className: PropTypes.arrayOf(PropTypes.string),
   themes: PropTypes.arrayOf(PropTypes.string),
   inline: PropTypes.bool,
-  inputGroupPrepend: PropTypes.element,
-  inputGroupAppend: PropTypes.element,
+  inputGroupPrepend: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element]),
+  inputGroupAppend: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element]),
 };
 
 export const defaultProps = {
@@ -136,6 +136,17 @@ const asInput = (WrappedComponent, inputType = undefined, labelFirst = true) =>
       return desc;
     }
 
+    getAddons({ addonElements, type }) {
+      if (Array.isArray(addonElements)) {
+        return addonElements.map((addon, index) =>
+          React.cloneElement(
+            addon,
+            { key: this.generateInputGroupAddonKey({ prefix: type, index }) },
+          ));
+      }
+      return addonElements;
+    }
+
     getLabel() {
       return (
         // eslint-disable-next-line jsx-a11y/label-has-for
@@ -181,6 +192,10 @@ const asInput = (WrappedComponent, inputType = undefined, labelFirst = true) =>
       );
     }
 
+    generateInputGroupAddonKey({ prefix, index }) {
+      return `${this.state.id}-${prefix}-${index}`;
+    }
+
     renderInput(describedBy) {
       const { className } = this.props;
 
@@ -204,6 +219,22 @@ const asInput = (WrappedComponent, inputType = undefined, labelFirst = true) =>
       );
     }
 
+    renderInputGroupAppend() {
+      return (
+        <div className={styles['input-group-append']}>
+          {this.getAddons({ type: 'append', addonElements: this.props.inputGroupAppend })}
+        </div>
+      );
+    }
+
+    renderInputGroupPrepend() {
+      return (
+        <div className={styles['input-group-prepend']}>
+          {this.getAddons({ type: 'prepend', addonElements: this.props.inputGroupPrepend })}
+        </div>
+      );
+    }
+
     render() {
       const { description, error, describedBy } = this.getDescriptions();
       return (
@@ -216,13 +247,9 @@ const asInput = (WrappedComponent, inputType = undefined, labelFirst = true) =>
           {labelFirst && this.getLabel()}
           {this.props.inputGroupPrepend || this.props.inputGroupAppend ? (
             <div className={styles['input-group']}>
-              <div className={styles['input-group-prepend']}>
-                {this.props.inputGroupPrepend}
-              </div>
+              {this.renderInputGroupPrepend()}
               {this.renderInput(describedBy)}
-              <div className={styles['input-group-append']}>
-                {this.props.inputGroupAppend}
-              </div>
+              {this.renderInputGroupAppend()}
             </div>
           ) : this.renderInput(describedBy)}
           {!labelFirst && this.getLabel()}