From d54a696de802437f701934005ecb011535101b1f Mon Sep 17 00:00:00 2001
From: Gary Thomas <gary.thomas@appfolio.com>
Date: Wed, 4 Apr 2018 15:10:09 -0700
Subject: [PATCH 1/2] gt - Add props to match FormRow

WIP
---
 src/components/FormLabelGroup.js | 22 +++++++++++++++++++---
 src/components/FormRow.js        |  4 ++--
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/components/FormLabelGroup.js b/src/components/FormLabelGroup.js
index a677bf351..2080f32f0 100644
--- a/src/components/FormLabelGroup.js
+++ b/src/components/FormLabelGroup.js
@@ -5,7 +5,7 @@ import FormGroup from './FormGroup';
 import Label from './Label';
 import Row from './Row';
 
-const FormLabelGroup = props => {
+const FormLabelGroup = (props) => {
   const {
     children,
     color,
@@ -14,7 +14,9 @@ const FormLabelGroup = props => {
     label,
     required,
     rowClassName,
+    size,
     stacked,
+    width
   } = props;
 
   const rowColor = color || (invalid && 'danger');
@@ -25,14 +27,16 @@ const FormLabelGroup = props => {
   return (
     <FormGroup row className={rowClassName} color={rowColor}>
       {label && (
-        <Label for={inputId} sm={labelWidth} className={labelAlignment}>
+        <Label for={inputId} sm={labelWidth} size={size} className={labelAlignment}>
           {label}
           {required && label ? <span className="text-danger">&nbsp;*</span> : null}
         </Label>
       )}
       <Col sm={inputContainerWidth}>
         <Row>
-          {children}
+          <Col {...width}>
+            {children}
+          </Col>
         </Row>
       </Col>
     </FormGroup>
@@ -42,16 +46,28 @@ const FormLabelGroup = props => {
 FormLabelGroup.propTypes = {
   children: PropTypes.node.isRequired,
   color: PropTypes.string,
+  feedback: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object
+  ]),
+  inline: PropTypes.bool,
   inputId: PropTypes.string,
   invalid: PropTypes.bool,
+  hint: PropTypes.string,
   label: PropTypes.node,
   required: PropTypes.bool,
   rowClassName: PropTypes.string,
+  size: PropTypes.string,
   stacked: PropTypes.bool,
+  width: PropTypes.object
 };
 
 FormLabelGroup.defaultProps = {
+  inline: false,
   invalid: false,
+  required: false,
+  stacked: false,
+  width: { xs: 12 }
 };
 
 export default FormLabelGroup;
diff --git a/src/components/FormRow.js b/src/components/FormRow.js
index ef933ea5f..7ecf6f07a 100644
--- a/src/components/FormRow.js
+++ b/src/components/FormRow.js
@@ -31,7 +31,7 @@ function parseFeedback(feedback) {
     [feedback, {}];
 }
 
-const FormRow = props => {
+const FormRow = (props) => {
   const {
     children,
     color,
@@ -74,7 +74,7 @@ const FormRow = props => {
       )}
       <Col sm={inputContainerWidth}>
         <Row>
-          <Col {...width} >
+          <Col {...width}>
             <InputElement
               id={id}
               size={size}

From 0482e35af8fc789b139dab45af48b0d76a7ceb21 Mon Sep 17 00:00:00 2001
From: Gary Thomas <gary.thomas@appfolio.com>
Date: Wed, 4 Apr 2018 15:18:52 -0700
Subject: [PATCH 2/2] gt - Add story, exports

---
 src/components/FormLabelGroup.js |  6 ++++++
 src/index.js                     |  2 ++
 stories/FormLabelGroup.js        | 21 +++++++++++++++++++++
 stories/index.js                 |  1 +
 4 files changed, 30 insertions(+)
 create mode 100644 stories/FormLabelGroup.js

diff --git a/src/components/FormLabelGroup.js b/src/components/FormLabelGroup.js
index 2080f32f0..ce7b11584 100644
--- a/src/components/FormLabelGroup.js
+++ b/src/components/FormLabelGroup.js
@@ -2,6 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Col from './Col';
 import FormGroup from './FormGroup';
+import FormText from './FormText';
+import FormFeedback from './FormFeedback';
 import Label from './Label';
 import Row from './Row';
 
@@ -9,8 +11,10 @@ const FormLabelGroup = (props) => {
   const {
     children,
     color,
+    feedback,
     inputId,
     invalid,
+    hint,
     label,
     required,
     rowClassName,
@@ -38,6 +42,8 @@ const FormLabelGroup = (props) => {
             {children}
           </Col>
         </Row>
+        {hint && <FormText color="muted">{hint}</FormText>}
+        {feedback && <FormFeedback>{feedback}</FormFeedback>}
       </Col>
     </FormGroup>
   );
diff --git a/src/index.js b/src/index.js
index 43de8490e..3c169600a 100755
--- a/src/index.js
+++ b/src/index.js
@@ -29,6 +29,7 @@ import Fade from './components/Fade';
 import Form from './components/Form';
 import FormFeedback from './components/FormFeedback';
 import FormGroup from './components/FormGroup';
+import FormLabelGroup from './components/FormLabelGroup';
 import FormText from './components/FormText';
 import Input from './components/Input';
 import InputGroup from './components/InputGroup';
@@ -154,6 +155,7 @@ export {
   Form,
   FormFeedback,
   FormGroup,
+  FormLabelGroup,
   FormText,
   Input,
   InputGroup,
diff --git a/stories/FormLabelGroup.js b/stories/FormLabelGroup.js
new file mode 100644
index 000000000..376dd156c
--- /dev/null
+++ b/stories/FormLabelGroup.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { boolean, text, select } from '@storybook/addon-knobs';
+import { AddressInput, FormLabelGroup } from '../src';
+
+storiesOf('FormLabelGroup', module)
+  .addWithInfo('Live example', () => (
+    <div>
+      <FormLabelGroup
+        label={text('label', 'Some Input')}
+        feedback={text('feedback', 'You must give a first name')}
+        color={select('color', ['', 'success', 'warning', 'danger'], 'danger')}
+        hint={text('hint', '')}
+        required={boolean('required', false)}
+        inline={boolean('inline', false)}
+        stacked={boolean('stacked', false)}
+      >
+        <img alt="Sample" src="https://placeimg.com/320/240/tech" width="320" height="240" />
+      </FormLabelGroup>
+    </div>
+  ));
diff --git a/stories/index.js b/stories/index.js
index bd127a64b..bab42e92a 100644
--- a/stories/index.js
+++ b/stories/index.js
@@ -17,6 +17,7 @@ import './FeatureBanner';
 import './FilterList';
 import './Flag';
 import './FormRow';
+import './FormLabelGroup';
 import './Forms';
 import './HasManyFields';
 import './HelpBubble';