From 05bd281eede419db25d9f8c85d7eb71e463eecbf Mon Sep 17 00:00:00 2001
From: Farhanah Sheets <fsheets@edx.org>
Date: Mon, 29 Jan 2018 12:11:04 -0500
Subject: [PATCH] fix(input-label): extend asInput to allow label prop as
 element

---
 .../__snapshots__/Storyshots.test.js.snap     | 101 +++++++++++++++++-
 src/InputText/InputText.stories.jsx           |   7 ++
 src/Modal/Modal.stories.jsx                   |   2 +-
 src/TextArea/TextArea.stories.jsx             |   7 ++
 src/asInput/asInput.test.jsx                  |  12 +++
 src/asInput/index.jsx                         |   2 +-
 6 files changed, 128 insertions(+), 3 deletions(-)

diff --git a/.storybook/__snapshots__/Storyshots.test.js.snap b/.storybook/__snapshots__/Storyshots.test.js.snap
index 053659088f..c6b9056f48 100644
--- a/.storybook/__snapshots__/Storyshots.test.js.snap
+++ b/.storybook/__snapshots__/Storyshots.test.js.snap
@@ -881,6 +881,54 @@ exports[`Storyshots InputText focus test 1`] = `
 </div>
 `;
 
+exports[`Storyshots InputText label as element 1`] = `
+<div
+  className={
+    Array [
+      "form-group",
+    ]
+  }
+>
+  <label
+    className={
+      Array [
+        "",
+      ]
+    }
+    htmlFor="asInput1"
+    id="label-asInput1"
+  >
+    <span
+      lang="en"
+    >
+      Element
+    </span>
+  </label>
+  <input
+    aria-describedby="error-asInput1"
+    aria-invalid={false}
+    className="form-control"
+    disabled={false}
+    id="asInput1"
+    name="username"
+    onBlur={[Function]}
+    onChange={[Function]}
+    placeholder={undefined}
+    required={false}
+    themes={Array []}
+    type="text"
+    value="Label is wrapped in language span"
+  />
+  <div
+    aria-live="polite"
+    className="form-control-feedback"
+    id="error-asInput1"
+  >
+    <span />
+  </div>
+</div>
+`;
+
 exports[`Storyshots InputText minimal usage 1`] = `
 <div
   className={
@@ -1571,7 +1619,7 @@ exports[`Storyshots Modal modal with element body 1`] = `
 </div>
 `;
 
-exports[`Storyshots Modal modal with warning theme 1`] = `
+exports[`Storyshots Modal modal with warning variant 1`] = `
 <div
   aria-labelledby="id10"
   aria-modal={true}
@@ -2599,6 +2647,57 @@ exports[`Storyshots Tabs basic usage 1`] = `
 </div>
 `;
 
+exports[`Storyshots Textarea label as element 1`] = `
+<div
+  className={
+    Array [
+      "form-group",
+    ]
+  }
+>
+  <label
+    className={
+      Array [
+        "",
+      ]
+    }
+    htmlFor="asInput1"
+    id="label-asInput1"
+  >
+    <span
+      lang="en"
+    >
+      Element
+    </span>
+  </label>
+  <textarea
+    aria-describedby="error-asInput1"
+    aria-invalid={false}
+    className="form-control"
+    disabled={false}
+    id="asInput1"
+    name="username"
+    onBlur={[Function]}
+    onChange={[Function]}
+    placeholder={undefined}
+    required={false}
+    themes={
+      Array [
+        "danger",
+      ]
+    }
+    value="Label is wrapped in language span"
+  />
+  <div
+    aria-live="polite"
+    className="form-control-feedback"
+    id="error-asInput1"
+  >
+    <span />
+  </div>
+</div>
+`;
+
 exports[`Storyshots Textarea minimal usage 1`] = `
 <div
   className={
diff --git a/src/InputText/InputText.stories.jsx b/src/InputText/InputText.stories.jsx
index ca680b6abe..ab1761e3f8 100644
--- a/src/InputText/InputText.stories.jsx
+++ b/src/InputText/InputText.stories.jsx
@@ -84,6 +84,13 @@ storiesOf('InputText', module)
       themes={['danger']}
     />
   ))
+  .add('label as element', () => (
+    <InputText
+      name="username"
+      label={<span lang="en">Element</span>}
+      value="Label is wrapped in language span"
+    />
+  ))
   .add('focus test', () => (
     <FocusInputWrapper />
   ));
diff --git a/src/Modal/Modal.stories.jsx b/src/Modal/Modal.stories.jsx
index c3c0727657..d81116a996 100644
--- a/src/Modal/Modal.stories.jsx
+++ b/src/Modal/Modal.stories.jsx
@@ -146,7 +146,7 @@ storiesOf('Modal', module)
       onClose={() => {}}
     />
   ))
-  .add('modal with warning theme', () => (
+  .add('modal with warning variant', () => (
     <Modal
       open
       title="Warning Modal"
diff --git a/src/TextArea/TextArea.stories.jsx b/src/TextArea/TextArea.stories.jsx
index 828a1aa23d..00e7bb4ccd 100644
--- a/src/TextArea/TextArea.stories.jsx
+++ b/src/TextArea/TextArea.stories.jsx
@@ -45,4 +45,11 @@ storiesOf('Textarea', module)
         return feedback;
       }}
     />
+  ))
+  .add('label as element', () => (
+    <TextArea
+      name="username"
+      label={<span lang="en">Element</span>}
+      value="Label is wrapped in language span"
+    />
   ));
diff --git a/src/asInput/asInput.test.jsx b/src/asInput/asInput.test.jsx
index 600d3c6fc8..710279a1f6 100644
--- a/src/asInput/asInput.test.jsx
+++ b/src/asInput/asInput.test.jsx
@@ -81,6 +81,18 @@ describe('asInput()', () => {
     expect(wrapper.find('small').prop('id')).toEqual(`description-${testId}`);
   });
 
+  it('uses label as element type', () => {
+    const testLabel = (<span lang="en">Label</span>);
+    const props = {
+      ...baseProps,
+      label: testLabel,
+    };
+    const wrapper = mount(<InputTestComponent {...props} />);
+    expect(wrapper.find('label').children()).toHaveLength(1);
+    expect(wrapper.find('label').children().at(0).text()).toEqual('Label');
+    expect(wrapper.find('label').children().at(0).prop('lang')).toEqual('en');
+  });
+
   it('overrides state value when props value changes', () => {
     const initValue = 'foofoo';
     const newValue = 'barbar';
diff --git a/src/asInput/index.jsx b/src/asInput/index.jsx
index 08aae9f740..264aad5e16 100644
--- a/src/asInput/index.jsx
+++ b/src/asInput/index.jsx
@@ -11,7 +11,7 @@ export const getDisplayName = WrappedComponent =>
   WrappedComponent.displayName || WrappedComponent.name || 'Component';
 
 export const inputProps = {
-  label: PropTypes.string.isRequired,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
   name: PropTypes.string.isRequired,
   id: PropTypes.string,
   value: PropTypes.string,