feat(asinput): add "inline" prop (#146)

.storybook/__snapshots__/Storyshots.test.js.snap

@@ -3242,6 +3242,50 @@ exports[`Storyshots InputText different textual input types 1`] = `
 </form>
 `;
 
+exports[`Storyshots InputText displayed inline 1`] = `
+<div
+  className={
+    Array [
+      "form-group form-inline",
+    ]
+  }
+>
+  <label
+    className={
+      Array [
+        "",
+      ]
+    }
+    htmlFor="asInput1"
+    id="label-asInput1"
+  >
+    Username
+  </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="foobar"
+  />
+  <div
+    aria-live="polite"
+    className="form-control-feedback"
+    id="error-asInput1"
+  >
+    <span />
+  </div>
+</div>
+`;
+
 exports[`Storyshots InputText focus test 1`] = `
 <div>
   <div

src/InputText/InputText.stories.jsx

@@ -169,4 +169,12 @@ storiesOf('InputText', module)
         type="color"
       />
     </form>
+  ))
+  .add('displayed inline', () => (
+    <InputText
+      name="username"
+      label="Username"
+      value="foobar"
+      inline
+    />
   ));

src/asInput/README.md

@@ -16,6 +16,9 @@ Handles all necessary props that are related to Input typed components.
 ### `label` (string or element; required)
 `label` specifies the label to be used for the overarching form-group. This can be a string or element type. It appears above the input component by default.
 
+### `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.
+
 ### `name` (string; required)
 `name` specifies the value for the name property within the component.
 

src/asInput/asInput.scss

@@ -5,3 +5,7 @@
 .fa-icon-spacing {
     padding: 0px 5px 0px 0px;
 }
+
+.form-inline label {
+    margin-right: 5px;
+}

src/asInput/asInput.test.jsx

@@ -201,5 +201,15 @@ describe('asInput()', () => {
         });
       });
     });
+
+    it('displayed inline', () => {
+      const props = {
+        ...baseProps,
+        inline: true,
+      };
+      const wrapper = mount(<InputTestComponent {...props} />);
+      const input = wrapper.find('.form-group');
+      expect(input.hasClass('form-inline')).toEqual(true);
+    });
   });
 });

src/asInput/index.jsx

@@ -26,6 +26,7 @@ export const inputProps = {
   validator: PropTypes.func,
   className: PropTypes.arrayOf(PropTypes.string),
   themes: PropTypes.arrayOf(PropTypes.string),
+  inline: PropTypes.bool,
 };
 
 export const defaultProps = {
@@ -39,6 +40,7 @@ export const defaultProps = {
   validator: undefined,
   className: [],
   themes: [],
+  inline: false,
 };
 
 const asInput = (WrappedComponent, inputType = undefined, labelFirst = true) => {
@@ -174,6 +176,7 @@ const asInput = (WrappedComponent, inputType = undefined, labelFirst = true) =>
       return (
         <div className={[classNames({
             [styles['form-group']]: !this.isGroupedInput(),
+            [styles['form-inline']]: !this.isGroupedInput() && this.props.inline,
             [styles['form-check']]: this.isGroupedInput(),
           })]}
         >