Merge pull request #23 from user-interviews/feature/UIDS-22-form-group-description

UIDS-22 add description prop to FormGroup

Author: rsaris

spec/__snapshots__/Storyshots.test.js.snap

@@ -180,7 +180,7 @@ exports[`Storyshots Design System/Form Default 1`] = `
         type="text"
       />
       <div
-        className="invalid-feedback"
+        className="FormGroup__invalid-feedback"
       >
         Invalid phone number
       </div>
@@ -286,6 +286,80 @@ exports[`Storyshots Design System/Form Group Required 1`] = `
 </div>
 `;
 
+exports[`Storyshots Design System/Form Group With Description 1`] = `
+<div
+  style={
+    Object {
+      "padding": "1rem",
+    }
+  }
+>
+  <div
+    className="FormGroup"
+    id="with-description"
+  >
+    <label
+      className="InputLabel"
+      htmlFor="input"
+    >
+      Form Group with description
+    </label>
+    <input
+      className="form-control"
+      id="input"
+      type="text"
+    />
+    <div
+      className="FormGroup__description"
+    >
+      test description
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Design System/Form Group With Description And Errors 1`] = `
+<div
+  style={
+    Object {
+      "padding": "1rem",
+    }
+  }
+>
+  <div
+    className="FormGroup FormGroup--is-invalid"
+    id="with-description-and-errors"
+  >
+    <label
+      className="InputLabel"
+      htmlFor=""
+    >
+      Form Group with description and errors
+    </label>
+    <input
+      className="form-control"
+      type="text"
+    />
+    <div
+      className="FormGroup__invalid-feedback"
+    >
+      <ol
+        className="FormGroup__invalid-feedback__list"
+      >
+        <li>
+          invalid input!
+        </li>
+      </ol>
+    </div>
+    <div
+      className="FormGroup__description"
+    >
+      test description
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Design System/Form Group With Errors 1`] = `
 <div
   style={
@@ -309,10 +383,10 @@ exports[`Storyshots Design System/Form Group With Errors 1`] = `
       type="text"
     />
     <div
-      className="invalid-feedback"
+      className="FormGroup__invalid-feedback"
     >
       <ol
-        className="invalid-feedback__list"
+        className="FormGroup__invalid-feedback__list"
       >
         <li>
           invalid input!

src/FormGroup/FormGroup.jsx

@@ -12,7 +12,7 @@ function renderErrors(errors) {
   }
 
   return (
-    <ol className="invalid-feedback__list">
+    <ol className="FormGroup__invalid-feedback__list">
       {
         // eslint-disable-next-line react/no-array-index-key
         errors.map((e, idx) => <li key={idx}>{e}</li>)
@@ -42,17 +42,26 @@ export default function FormGroup(props) {
       {props.children}
 
       {props.displayErrorText && hasErrors && (
-        <div className="invalid-feedback">
+        <div className="FormGroup__invalid-feedback">
           {renderErrors(errors[inputKey])}
         </div>
       )}
+
+      {
+        props.description && (
+          <div className="FormGroup__description">
+            {props.description}
+          </div>
+        )
+      }
     </div>
   );
 }
 
 FormGroup.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
+  description: PropTypes.string,
   displayErrorText: PropTypes.bool,
   errors: PropTypes.object,
   id: PropTypes.string.isRequired,
@@ -66,6 +75,7 @@ FormGroup.propTypes = {
 FormGroup.defaultProps = {
   children: undefined,
   className: '',
+  description: undefined,
   displayErrorText: true,
   errors: {},
   inputKey: null,

src/FormGroup/FormGroup.scss

@@ -9,7 +9,11 @@
     }
   }
 
-  .invalid-feedback {
+  &__description {
+    padding: .25rem 0;
+  }
+
+  &__invalid-feedback {
     color: $ux-red;
     display: block;
     font-size: 100%;

stories/FormGroup.stories.jsx

@@ -38,6 +38,17 @@ export const WithLabel = () => (
   </FormGroup>
 );
 
+export const WithDescription = () => (
+  <FormGroup
+    description="test description"
+    id="with-description"
+    label="Form Group with description"
+    labelHtmlFor="input"
+  >
+    <input className="form-control" id="input" type="text" />
+  </FormGroup>
+);
+
 export const WithErrors = () => (
   <FormGroup
     displayErrorText
@@ -49,3 +60,16 @@ export const WithErrors = () => (
     <input className="form-control" type="text" />
   </FormGroup>
 );
+
+export const WithDescriptionAndErrors = () => (
+  <FormGroup
+    description="test description"
+    displayErrorText
+    errors={{ test: ['invalid input!'] }}
+    id="with-description-and-errors"
+    inputKey="test"
+    label="Form Group with description and errors"
+  >
+    <input className="form-control" type="text" />
+  </FormGroup>
+);