feat(FormInput): add label prop

a new label prop that when used wraps the input component in a
Form.Group with a label

src/components/Form/FormInput.react.js

@@ -3,6 +3,7 @@
 import * as React from "react";
 import { Icon } from "../";
 import cn from "classnames";
+import FormGroup from "./FormGroup.react";
 
 type FormStyle = {|
   +className?: string,
@@ -30,6 +31,10 @@ export type Props = {|
   +placeholder?: string,
   +type?: "checkbox" | "radio" | "text" | "email" | "password",
   +value?: string | number | boolean,
+  /**
+   * Wraps the input in Form.Group and adds a label
+   */
+  +label?: string,
 |};
 
 function FormInput(props: Props): React.Node {
@@ -50,6 +55,7 @@ function FormInput(props: Props): React.Node {
     onBlur,
     disabled,
     readOnly,
+    label,
   } = props;
   const type = props.type || "text";
 
@@ -79,7 +85,7 @@ function FormInput(props: Props): React.Node {
     onBlur,
   };
 
-  return !icon ? (
+  const contents = !icon ? (
     <React.Fragment>
       {type === "checkbox" || type === "radio" ? (
         <input {...allInputProps} checked={checked} />
@@ -106,6 +112,8 @@ function FormInput(props: Props): React.Node {
       {feedback && <span className="invalid-feedback">{feedback}</span>}
     </React.Fragment>
   );
+
+  return label ? <FormGroup label={label}>{contents}</FormGroup> : contents;
 }
 
 FormInput.displayName = "Form.Input";