Merge pull request #378 from appfolio/gtAddFormLabelGroup

gt - Form label group additions

src/components/FormLabelGroup.js

@@ -2,19 +2,25 @@ 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';
 
-const FormLabelGroup = props => {
+const FormLabelGroup = (props) => {
   const {
     children,
     color,
+    feedback,
     inputId,
     invalid,
+    hint,
     label,
     required,
     rowClassName,
+    size,
     stacked,
+    width
   } = props;
 
   const rowColor = color || (invalid && 'danger');
@@ -25,15 +31,19 @@ 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>
+        {hint && <FormText color="muted">{hint}</FormText>}
+        {feedback && <FormFeedback>{feedback}</FormFeedback>}
       </Col>
     </FormGroup>
   );
@@ -42,16 +52,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;

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}

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,

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>
+  ));

stories/index.js

@@ -17,6 +17,7 @@ import './FeatureBanner';
 import './FilterList';
 import './Flag';
 import './FormRow';
+import './FormLabelGroup';
 import './Forms';
 import './HasManyFields';
 import './HelpBubble';