From a45cff4763f9d0133c4d2d2e3608c3a62565f49a Mon Sep 17 00:00:00 2001
From: Suzanne Rozier <suz@truss.works>
Date: Fri, 13 Sep 2019 16:18:50 -0400
Subject: [PATCH 1/7] Add new text input in Name

---
 src/components/Form/Name/Name.jsx             | 25 +++++++
 src/components/Inputs/FormField/FormField.jsx | 33 +++++++++
 src/components/Inputs/InputConnector.jsx      | 57 +++++++++++++++
 src/components/Inputs/TextInput/TextInput.jsx | 71 +++++++++++++++++++
 src/components/Inputs/connectedInputs.js      |  9 +++
 5 files changed, 195 insertions(+)
 create mode 100644 src/components/Inputs/FormField/FormField.jsx
 create mode 100644 src/components/Inputs/InputConnector.jsx
 create mode 100644 src/components/Inputs/TextInput/TextInput.jsx
 create mode 100644 src/components/Inputs/connectedInputs.js

diff --git a/src/components/Form/Name/Name.jsx b/src/components/Form/Name/Name.jsx
index 6de49ee58..71bb92c90 100644
--- a/src/components/Form/Name/Name.jsx
+++ b/src/components/Form/Name/Name.jsx
@@ -1,5 +1,9 @@
 import React from 'react'
 import { i18n } from 'config'
+
+import FormField from 'components/Inputs/FormField/FormField'
+import { ConnectedTextInput } from 'components/Inputs/connectedInputs'
+
 import ValidationElement from '../ValidationElement'
 import Field from '../Field'
 import Show from '../Show'
@@ -140,6 +144,27 @@ export default class Name extends ValidationElement {
     return (
       <div className={klass.join(' ')}>
         {this.props.title && <h2>{this.props.title}</h2>}
+
+        <FormField className="usa-form-control">
+          <ConnectedTextInput
+            name="first"
+            pattern="^[a-zA-Z\-\.' ]*$"
+            minlength={this.props.firstInitialOnly ? 1 : 2}
+            maxlength={maxFirst}
+            className="first"
+            value={this.props.first}
+            onChange={(values) => {
+              this.update({
+                first: values.value,
+              })
+            }}
+            onFocus={this.props.onFocus}
+            onBlur={this.props.onBlur}
+            required={this.props.required}
+            disabled={this.props.disabled}
+          />
+        </FormField>
+
         <Field
           title={i18n.t(`${prefix}.label.first`)}
           titleSize="label"
diff --git a/src/components/Inputs/FormField/FormField.jsx b/src/components/Inputs/FormField/FormField.jsx
new file mode 100644
index 000000000..dff410834
--- /dev/null
+++ b/src/components/Inputs/FormField/FormField.jsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+class FormField extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      helpActive: false,
+    }
+  }
+
+  render() {
+    const { children, optional, className, dataTestId } = this.props
+
+    const required = !optional
+
+    const classes = classnames(
+      'field',
+      { required },
+      className,
+    )
+
+    return (
+      <div className={classes}>
+        {children}
+      </div>
+    )
+  }
+}
+
+export default FormField
diff --git a/src/components/Inputs/InputConnector.jsx b/src/components/Inputs/InputConnector.jsx
new file mode 100644
index 000000000..167467982
--- /dev/null
+++ b/src/components/Inputs/InputConnector.jsx
@@ -0,0 +1,57 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const connectInput = (Component) => {
+  class ConnectedInput extends React.Component {
+    constructor(props) {
+      super(props)
+
+      this.uid = ''
+
+      this.state = {
+        focus: false,
+      }
+    }
+
+    handleChange = (event) => {
+      const { name, onChange } = this.props
+      const { value } = event.target
+      onChange({ value, name })
+    }
+
+    handleFocus = () => {
+      this.setState({ focus: true })
+    }
+
+    handleBlur = () => {
+      this.setState({ focus: false })
+    }
+
+    render() {
+      return (
+        <Component
+          uid={this.uid}
+          {...this.props}
+          {...this.state}
+          onChange={this.handleChange}
+          onFocus={this.handleFocus}
+          onBlur={this.handleBlur}
+
+        />
+      )
+    }
+  }
+
+  ConnectedInput.propTypes = {
+    name: PropTypes.string.isRequired,
+    onChange: PropTypes.func,
+  }
+
+  ConnectedInput.defaultProps = {
+    onChange: () => {},
+  }
+
+  return ConnectedInput
+}
+
+export default connectInput
diff --git a/src/components/Inputs/TextInput/TextInput.jsx b/src/components/Inputs/TextInput/TextInput.jsx
new file mode 100644
index 000000000..5155b1d76
--- /dev/null
+++ b/src/components/Inputs/TextInput/TextInput.jsx
@@ -0,0 +1,71 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+import { autotab } from 'components/Form/Generic'
+
+const TextInput = (props) => {
+  const {
+    label, uid, name, type, placeholder, ariaLabel, disabled, error, maxlength,
+    pattern, readonly, autocapitalize, autocorrect, autocomplete, spellcheck,
+    value, clipboard, className, focus, valid, onChange, onFocus, onBlur,
+    tabBack, tabNext,
+  } = props
+
+  const divClass = classnames(
+    'hide-for-print',
+    className,
+    { 'usa-input-error': !disabled && error }
+  )
+
+  const labelClass = classnames({
+    disabled,
+    'usa-input-error-label': !disabled && error,
+  })
+
+  const inputClass = classnames({
+    'usa-input-focus': !disabled && focus,
+    'usa-input-success': !disabled && valid,
+  })
+
+  const handleKeyDown = (e) => {
+    autotab(e, maxlength, tabBack, tabNext)
+  }
+
+  return (
+    <div className={divClass}>
+      {label && (
+        <label className={labelClass} htmlFor={uid}>{label}</label>
+      )}
+      <input
+        type={type}
+        className={inputClass}
+        id={uid}
+        name={name}
+        value={value}
+        placeholder={placeholder}
+        aria-describedby={`${name}-error`}
+        aria-label={ariaLabel || label}
+        disabled={disabled}
+        maxLength={maxlength}
+        pattern={pattern}
+        readOnly={readonly}
+        autoCapitalize={autocapitalize}
+        autoCorrect={autocorrect}
+        autoComplete={autocomplete}
+        spellCheck={spellcheck}
+        onChange={onChange}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        onKeyDown={handleKeyDown}
+      />
+      <div className="text-print print-only">{value}</div>
+    </div>
+  )
+}
+
+TextInput.propTypes = {
+
+}
+
+export default TextInput
diff --git a/src/components/Inputs/connectedInputs.js b/src/components/Inputs/connectedInputs.js
new file mode 100644
index 000000000..9e0faea40
--- /dev/null
+++ b/src/components/Inputs/connectedInputs.js
@@ -0,0 +1,9 @@
+import connectInput from 'components/Inputs/InputConnector'
+
+import TextInput from 'components/Inputs/TextInput/TextInput'
+
+const ConnectedTextInput = connectInput(TextInput)
+
+export {
+  ConnectedTextInput,
+}

From 5b7e047ae7deb65cf750aa2b2c9f8aa97f4bc3fb Mon Sep 17 00:00:00 2001
From: Suzanne Rozier <suz@truss.works>
Date: Tue, 17 Sep 2019 12:47:51 -0400
Subject: [PATCH 2/7] Add new input components from old spike

---
 src/components/Form/Name/Name.jsx             |  38 +++---
 .../Inputs/CheckboxInput/CheckboxInput.jsx    |  97 ++++++++++++++
 src/components/Inputs/FormField/FormField.jsx | 122 +++++++++++++++---
 .../Inputs/FormField/FormField.module.scss    |   5 +
 .../Inputs/FormField/FormField.stories.jsx    |  21 +++
 src/components/Inputs/InputConnector.jsx      |  41 +++++-
 .../Inputs/SelectInput/SelectInput.jsx        |  78 +++++++++++
 src/components/Inputs/TextInput/TextInput.jsx |  56 +++++++-
 .../Inputs/TextInput/TextInput.stories.jsx    |  55 ++++++++
 9 files changed, 471 insertions(+), 42 deletions(-)
 create mode 100644 src/components/Inputs/CheckboxInput/CheckboxInput.jsx
 create mode 100644 src/components/Inputs/FormField/FormField.module.scss
 create mode 100644 src/components/Inputs/FormField/FormField.stories.jsx
 create mode 100644 src/components/Inputs/SelectInput/SelectInput.jsx
 create mode 100644 src/components/Inputs/TextInput/TextInput.stories.jsx

diff --git a/src/components/Form/Name/Name.jsx b/src/components/Form/Name/Name.jsx
index 71bb92c90..5bceaa634 100644
--- a/src/components/Form/Name/Name.jsx
+++ b/src/components/Form/Name/Name.jsx
@@ -145,25 +145,25 @@ export default class Name extends ValidationElement {
       <div className={klass.join(' ')}>
         {this.props.title && <h2>{this.props.title}</h2>}
 
-        <FormField className="usa-form-control">
-          <ConnectedTextInput
-            name="first"
-            pattern="^[a-zA-Z\-\.' ]*$"
-            minlength={this.props.firstInitialOnly ? 1 : 2}
-            maxlength={maxFirst}
-            className="first"
-            value={this.props.first}
-            onChange={(values) => {
-              this.update({
-                first: values.value,
-              })
-            }}
-            onFocus={this.props.onFocus}
-            onBlur={this.props.onBlur}
-            required={this.props.required}
-            disabled={this.props.disabled}
-          />
-        </FormField>
+        <ConnectedTextInput
+          name="first"
+          label={i18n.t(`${prefix}.label.first`)}
+          helptext={i18n.m('identification.name.first.help.message')}
+          pattern="^[a-zA-Z\-\.' ]*$"
+          minlength={this.props.firstInitialOnly ? 1 : 2}
+          maxlength={maxFirst}
+          className="first"
+          value={this.props.first}
+          onChange={(values) => {
+            this.update({
+              first: values.value,
+            })
+          }}
+          onFocus={this.props.onFocus}
+          onBlur={this.props.onBlur}
+          required={this.props.required}
+          disabled={this.props.disabled}
+        />
 
         <Field
           title={i18n.t(`${prefix}.label.first`)}
diff --git a/src/components/Inputs/CheckboxInput/CheckboxInput.jsx b/src/components/Inputs/CheckboxInput/CheckboxInput.jsx
new file mode 100644
index 000000000..029852cb3
--- /dev/null
+++ b/src/components/Inputs/CheckboxInput/CheckboxInput.jsx
@@ -0,0 +1,97 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+const CheckboxInput = (props) => {
+  const {
+    label, uid, name, ariaLabel, disabled, error, readonly, value, className,
+    valid, onChange, onFocus, onBlur, children,
+  } = props
+
+  // eslint-disable-next-line eqeqeq
+  const checked = value == true
+
+  const showError = !disabled && error
+
+  const divClass = classnames(
+    className,
+    'block',
+    {
+      disabled,
+      'usa-input-error': showError,
+    }
+  )
+
+  const labelClass = classnames(
+    'checkbox',
+    {
+      disabled,
+      'usa-input-error-label': showError,
+      checked,
+    }
+  )
+
+  const inputClass = classnames({
+    'usa-input-success': !disabled && valid,
+  })
+
+  return (
+    <div className={divClass}>
+      <input
+        type="checkbox"
+        className={inputClass}
+        id={uid}
+        name={name}
+        value={value}
+        checked={checked}
+        aria-describedby={`${name}-error`}
+        aria-label={ariaLabel || label}
+        disabled={disabled}
+        readOnly={readonly}
+        onChange={onChange}
+        onFocus={onFocus}
+        onBlur={onBlur}
+      />
+      <label
+        htmlFor={uid}
+        className={labelClass}
+      >
+        {children}
+        <span>{label}</span>
+      </label>
+    </div>
+  )
+}
+
+CheckboxInput.propTypes = {
+  name: PropTypes.string.isRequired,
+  uid: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  ariaLabel: PropTypes.string,
+  children: PropTypes.node,
+  value: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  error: PropTypes.bool,
+  valid: PropTypes.bool,
+  disabled: PropTypes.bool,
+  className: PropTypes.string,
+  readonly: PropTypes.bool,
+  onChange: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+}
+
+CheckboxInput.defaultProps = {
+  ariaLabel: null,
+  children: null,
+  value: '',
+  error: false,
+  valid: false,
+  disabled: false,
+  className: '',
+  readonly: false,
+  onChange: () => {},
+  onFocus: () => {},
+  onBlur: () => {},
+}
+
+export default CheckboxInput
diff --git a/src/components/Inputs/FormField/FormField.jsx b/src/components/Inputs/FormField/FormField.jsx
index dff410834..0c3ac9187 100644
--- a/src/components/Inputs/FormField/FormField.jsx
+++ b/src/components/Inputs/FormField/FormField.jsx
@@ -1,33 +1,117 @@
+/**
+ * Field component requirements:
+ * - Wraps a form input
+ * - Renders inside of .usa-form-control
+ * - Renders an anchor ID so it can be linked to
+ * - renders a label
+ * - renders help text - displayed as internal state, icon toggle
+ * - renders an error message
+ * - renders the form input (children?)
+ * - render modifiers
+ *
+ * TODO:
+ * - data test ID
+ */
+
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
-class FormField extends React.Component {
-  constructor(props) {
-    super(props)
+import i18n from 'util/i18n'
+
+const FormField = ({
+  title, required, inputId, children, errors, helptext, toggleHelp, showHelp,
+  className,
+}) => {
+  const classes = classnames(
+    'field',
+    'usa-form-control',
+    { required },
+    className,
+  )
 
-    this.state = {
-      helpActive: false,
-    }
-  }
+  const iconClasses = classnames(
+    'toggle',
+    { active: showHelp },
+  )
 
-  render() {
-    const { children, optional, className, dataTestId } = this.props
+  return (
+    <div
+      className={classes}
+      name={inputId}
+      data-uuid={inputId}
+    >
+      {title && (
+        <h1 className="title">
+          {title}
+          {!required && <span className="optional">(Optional)</span>}
+        </h1>
+      )}
 
-    const required = !optional
+      {helptext && toggleHelp && (
+        <button
+          type="button"
+          title="Show help"
+          aria-label="Show help"
+          className={iconClasses}
+          onClick={toggleHelp}
+        >
+          Show help
+        </button>
+      )}
 
-    const classes = classnames(
-      'field',
-      { required },
-      className,
-    )
+      {helptext && showHelp && (
+        <div className="messages help-messages">
+          <div className="usa-alert usa-alert-info" role="alert">
+            <div className="usa-alert-body">
+              {helptext}
+              {toggleHelp && (
+                <button
+                  type="button"
+                  className="close"
+                  onClick={toggleHelp}
+                  title={i18n.t('help.close')}
+                >
+                  {i18n.t('help.close')}
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
 
-    return (
-      <div className={classes}>
+      {errors && errors.length > 0 && (
+        <div className="messages error-messages" role="alert">
+          {errors.map((e, i) => (
+            <div
+              className="message error usa-alert usa-alert-error"
+              // eslint-disable-next-line react/no-array-index-key
+              key={`${inputId}_errors_${i}`}
+              role="alert"
+            >
+              <div className="usa-alert-body">{e}</div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <div>
         {children}
       </div>
-    )
-  }
+    </div>
+  )
+}
+
+FormField.propTypes = {
+  name: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+  errors: PropTypes.array,
+  helptext: PropTypes.node,
+}
+
+FormField.defaultProps = {
+  errors: [],
+  helptext: null,
 }
 
 export default FormField
diff --git a/src/components/Inputs/FormField/FormField.module.scss b/src/components/Inputs/FormField/FormField.module.scss
new file mode 100644
index 000000000..6b531dc9c
--- /dev/null
+++ b/src/components/Inputs/FormField/FormField.module.scss
@@ -0,0 +1,5 @@
+.modifiers {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
\ No newline at end of file
diff --git a/src/components/Inputs/FormField/FormField.stories.jsx b/src/components/Inputs/FormField/FormField.stories.jsx
new file mode 100644
index 000000000..a3800f844
--- /dev/null
+++ b/src/components/Inputs/FormField/FormField.stories.jsx
@@ -0,0 +1,21 @@
+/* eslint import/no-extraneous-dependencies: 0 */
+
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+
+import FormField from './FormField'
+
+storiesOf('FormField', module)
+  .add('default', () => (
+    <FormField
+      label="My Form Field"
+      name="formField"
+    />
+  ))
+  .add('with a value', () => (
+    <FormField
+      label="My Form Field"
+      name="formField"
+      value="Test value"
+    />
+  ))
diff --git a/src/components/Inputs/InputConnector.jsx b/src/components/Inputs/InputConnector.jsx
index 167467982..d14f7059b 100644
--- a/src/components/Inputs/InputConnector.jsx
+++ b/src/components/Inputs/InputConnector.jsx
@@ -1,7 +1,14 @@
+/**
+ * HOC that connects input event handlers and optionally renders inside of a
+ * FormField component
+ */
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const connectInput = (Component) => {
+import FormField from './FormField/FormField'
+import styles from './FormField/FormField.module.scss'
+
+const connectInput = (Component, renderFormField = true) => {
   class ConnectedInput extends React.Component {
     constructor(props) {
       super(props)
@@ -10,9 +17,15 @@ const connectInput = (Component) => {
 
       this.state = {
         focus: false,
+        showHelp: false,
       }
     }
 
+    toggleHelp = () => {
+      const { showHelp } = this.state
+      this.setState({ showHelp: !showHelp })
+    }
+
     handleChange = (event) => {
       const { name, onChange } = this.props
       const { value } = event.target
@@ -28,7 +41,7 @@ const connectInput = (Component) => {
     }
 
     render() {
-      return (
+      const inputComponent = (
         <Component
           uid={this.uid}
           {...this.props}
@@ -36,18 +49,40 @@ const connectInput = (Component) => {
           onChange={this.handleChange}
           onFocus={this.handleFocus}
           onBlur={this.handleBlur}
-
         />
       )
+
+      if (renderFormField) {
+        const { modifiers } = this.props
+        const { showHelp } = this.state
+        return (
+          <FormField
+            {...this.props}
+            {...this.state}
+            inputId={this.uid}
+            showHelp={showHelp}
+            toggleHelp={this.toggleHelp}
+          >
+            {inputComponent}
+            {modifiers && (
+              <div className={styles.modifiers}>{modifiers}</div>
+            )}
+          </FormField>
+        )
+      }
+
+      return inputComponent
     }
   }
 
   ConnectedInput.propTypes = {
     name: PropTypes.string.isRequired,
     onChange: PropTypes.func,
+    modifiers: PropTypes.array,
   }
 
   ConnectedInput.defaultProps = {
+    modifiers: [],
     onChange: () => {},
   }
 
diff --git a/src/components/Inputs/SelectInput/SelectInput.jsx b/src/components/Inputs/SelectInput/SelectInput.jsx
new file mode 100644
index 000000000..91c47d3d4
--- /dev/null
+++ b/src/components/Inputs/SelectInput/SelectInput.jsx
@@ -0,0 +1,78 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+const SelectInput = (props) => {
+  const {
+    uid, name, value, error, valid, disabled, className,
+    label, options, optional, onChange,
+  } = props
+
+  const wrapperClasses = classnames(
+    className,
+    { 'usa-input-error': error }
+  )
+
+  const selectClasses = classnames(
+    { 'usa-input-success': valid }
+  )
+
+  return (
+    <div className={wrapperClasses}>
+      <label
+        htmlFor={uid}
+        className="title label"
+      >
+        {label}
+        {optional && (
+          <span className="optional">(optional)</span>
+        )}
+      </label>
+
+      <select
+        id={uid}
+        name={name}
+        onChange={onChange}
+        value={value}
+        disabled={disabled}
+        className={selectClasses}
+      >
+        {options.map(o => (
+          <option
+            key={`${name}-option-${o.value}`}
+            label={o.label}
+            value={o.value}
+          >
+            {o.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+}
+
+SelectInput.propTypes = {
+  name: PropTypes.string.isRequired,
+  uid: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  options: PropTypes.array.isRequired,
+  value: PropTypes.string,
+  error: PropTypes.bool,
+  valid: PropTypes.bool,
+  disabled: PropTypes.bool,
+  className: PropTypes.string,
+  optional: PropTypes.bool,
+  onChange: PropTypes.func,
+}
+
+SelectInput.defaultProps = {
+  value: '',
+  error: false,
+  valid: false,
+  disabled: false,
+  className: '',
+  optional: false,
+  onChange: () => {},
+}
+
+export default SelectInput
diff --git a/src/components/Inputs/TextInput/TextInput.jsx b/src/components/Inputs/TextInput/TextInput.jsx
index 5155b1d76..0548406bb 100644
--- a/src/components/Inputs/TextInput/TextInput.jsx
+++ b/src/components/Inputs/TextInput/TextInput.jsx
@@ -1,9 +1,16 @@
+/**
+ * Input requirements
+ * Generic text input (text, email, number, password)
+*/
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
 import { autotab } from 'components/Form/Generic'
 
+// TODO
+// import { getValidationPropsFromModel } from './modelValidations'
+
 const TextInput = (props) => {
   const {
     label, uid, name, type, placeholder, ariaLabel, disabled, error, maxlength,
@@ -26,12 +33,16 @@ const TextInput = (props) => {
   const inputClass = classnames({
     'usa-input-focus': !disabled && focus,
     'usa-input-success': !disabled && valid,
-  })
+  }, className)
 
   const handleKeyDown = (e) => {
     autotab(e, maxlength, tabBack, tabNext)
   }
 
+  const allowClipboard = (e) => {
+    if (!clipboard) e.preventDefault()
+  }
+
   return (
     <div className={divClass}>
       {label && (
@@ -58,14 +69,57 @@ const TextInput = (props) => {
         onFocus={onFocus}
         onBlur={onBlur}
         onKeyDown={handleKeyDown}
+        onCopy={allowClipboard}
+        onCut={allowClipboard}
+        onPaste={allowClipboard}
       />
+      {/* for print CSS */}
       <div className="text-print print-only">{value}</div>
     </div>
   )
 }
 
 TextInput.propTypes = {
+  name: PropTypes.string.isRequired,
+  uid: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  ariaLabel: PropTypes.string,
+  type: PropTypes.oneOf(['text', 'email', 'number', 'password']),
+  value: PropTypes.string,
+  placeholder: PropTypes.string,
+  error: PropTypes.bool,
+  valid: PropTypes.bool,
+  disabled: PropTypes.bool,
+  className: PropTypes.string,
+  clipboard: PropTypes.bool,
+  spellcheck: PropTypes.bool,
+  autocapitalize: PropTypes.bool,
+  autocorrect: PropTypes.bool,
+  autocomplete: PropTypes.bool,
+  readonly: PropTypes.bool,
+  onChange: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+}
 
+TextInput.defaultProps = {
+  ariaLabel: null,
+  type: 'text',
+  value: '',
+  placeholder: '',
+  error: false,
+  valid: false,
+  disabled: false,
+  className: '',
+  clipboard: true,
+  spellcheck: true,
+  autocapitalize: true,
+  autocorrect: true,
+  autocomplete: true,
+  readonly: false,
+  onChange: () => {},
+  onFocus: () => {},
+  onBlur: () => {},
 }
 
 export default TextInput
diff --git a/src/components/Inputs/TextInput/TextInput.stories.jsx b/src/components/Inputs/TextInput/TextInput.stories.jsx
new file mode 100644
index 000000000..c3293b5d8
--- /dev/null
+++ b/src/components/Inputs/TextInput/TextInput.stories.jsx
@@ -0,0 +1,55 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+
+import TextInput from './TextInput'
+import { ConnectedTextInput } from '../connectedInputs'
+
+storiesOf('Input', module)
+  .add('default', () => (
+    <TextInput
+      label="My Form Field"
+      name="formField"
+    />
+  ))
+  .add('with a value', () => (
+    <TextInput
+      label="My Form Field"
+      name="formField"
+      value="Test value"
+    />
+  ))
+  .add('with FormField', () => (
+    <ConnectedTextInput
+      label="My Form Field"
+      name="formField"
+      value="Test value"
+    />
+  ))
+  .add('with FormField and errors', () => (
+    <ConnectedTextInput
+      label="My Form Field"
+      name="formField"
+      value="Test value"
+      error={true}
+      errors={['This field is required', 'Invalid value']}
+    />
+  ))
+  .add('with FormField and help text', () => (
+    <ConnectedTextInput
+      label="My Form Field"
+      name="formField"
+      value="Test value"
+      helptext="Help text"
+    />
+  ))
+  .add('with FormField and errors and help text', () => (
+    <ConnectedTextInput
+      label="My Form Field"
+      name="formField"
+      value="Test value"
+      helptext="Help text"
+      error={true}
+      errors={['This field is required', 'Invalid value']}
+    />
+  ))

From 267be84d81122748bc3a34cc0e7f7e8eea1107dd Mon Sep 17 00:00:00 2001
From: Suzanne Rozier <suz@truss.works>
Date: Tue, 17 Sep 2019 13:20:04 -0400
Subject: [PATCH 3/7] Hook up NameFieldset to ApplicantName

---
 .../Fieldsets/NameFieldset/NameFieldset.jsx   | 175 ++++++++++++++++++
 .../NameFieldset/NameFieldset.stories.jsx     |  34 ++++
 src/components/Form/Name/Name.jsx             |  23 ---
 .../Inputs/CheckboxInput/CheckboxInput.jsx    |   9 +-
 src/components/Inputs/InputConnector.jsx      |   5 +-
 .../Inputs/SelectInput/SelectInput.jsx        |   6 +-
 src/components/Inputs/TextInput/TextInput.jsx |   6 +-
 src/components/Inputs/connectedInputs.js      |  15 +-
 .../ApplicantName/ApplicantName.jsx           |  13 ++
 src/helpers/validation.js                     |  61 ++++++
 10 files changed, 316 insertions(+), 31 deletions(-)
 create mode 100644 src/components/Fieldsets/NameFieldset/NameFieldset.jsx
 create mode 100644 src/components/Fieldsets/NameFieldset/NameFieldset.stories.jsx

diff --git a/src/components/Fieldsets/NameFieldset/NameFieldset.jsx b/src/components/Fieldsets/NameFieldset/NameFieldset.jsx
new file mode 100644
index 000000000..184016eb3
--- /dev/null
+++ b/src/components/Fieldsets/NameFieldset/NameFieldset.jsx
@@ -0,0 +1,175 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+import i18n from 'util/i18n'
+
+import {
+  ConnectedTextFormField, ConnectedSelectFormField, ConnectedCheckboxInput,
+} from 'components/Inputs/connectedInputs'
+
+import nameModel from 'models/shared/name'
+import { getEffectiveModel } from 'helpers/validation'
+
+const NameFieldset = (props) => {
+  const {
+    value, title, className, disabled, required, prefix, onUpdate,
+    hideMiddleName, errors,
+  } = props
+
+  const classes = classnames('name', className, { disabled })
+
+  const suffixOptions = [
+    { label: '', value: '' },
+    { label: i18n.t(`${prefix}.label.jr`), value: 'Jr' },
+    { label: i18n.t(`${prefix}.label.sr`), value: 'Sr' },
+    { label: i18n.t(`${prefix}.label.i`), value: 'I' },
+    { label: i18n.t(`${prefix}.label.ii`), value: 'II' },
+    { label: i18n.t(`${prefix}.label.iii`), value: 'III' },
+    { label: i18n.t(`${prefix}.label.iv`), value: 'IV' },
+    { label: i18n.t(`${prefix}.label.v`), value: 'V' },
+    { label: i18n.t(`${prefix}.label.vi`), value: 'VI' },
+    { label: i18n.t(`${prefix}.label.vii`), value: 'VII' },
+    { label: i18n.t(`${prefix}.label.viii`), value: 'VIII' },
+    { label: i18n.t(`${prefix}.label.ix`), value: 'IX' },
+    { label: i18n.t(`${prefix}.label.x`), value: 'X' },
+    { label: i18n.t(`${prefix}.label.other`), value: 'Other' },
+  ]
+
+  const onChange = (name, newValue) => {
+    console.log('on change', name, newValue)
+    onUpdate({
+      ...value,
+      [`${name}`]: newValue,
+    })
+  }
+
+  const {
+    first, middle, last, firstInitialOnly, middleInitialOnly, noMiddleName,
+    suffix, suffixOther,
+  } = value
+
+  const inputProps = {
+    disabled,
+    required,
+    onChange,
+  }
+
+  const effectiveNameModel = getEffectiveModel(nameModel, value)
+
+  const firstInitialOnlyCheckbox = (
+    <div className="modifier">
+      <ConnectedCheckboxInput
+        label={i18n.t(`${prefix}.label.initialOnly`)}
+        value={firstInitialOnly}
+        inputId="firstInitialOnly"
+        name="firstInitialOnly"
+        {...inputProps}
+      />
+    </div>
+  )
+
+  const middleInitialOnlyCheckbox = (
+    <div className="modifier">
+      <ConnectedCheckboxInput
+        label={i18n.t(`${prefix}.label.initialOnly`)}
+        value={middleInitialOnly}
+        inputId="middleInitialOnly"
+        name="middleInitialOnly"
+        {...inputProps}
+      />
+    </div>
+  )
+
+  const noMiddleNameCheckbox = (
+    <div className="modifier">
+      <ConnectedCheckboxInput
+        label={i18n.t(`${prefix}.label.noMiddle`)}
+        value={noMiddleName}
+        inputId="noMiddleName"
+        name="noMiddleName"
+        {...inputProps}
+      />
+    </div>
+  )
+
+  return (
+    <fieldset className={classes}>
+      {title && <legend>{title}</legend>}
+
+      <ConnectedTextFormField
+        name="first"
+        label={i18n.t(`${prefix}.label.first`)}
+        helptext={i18n.m('identification.name.first.help.message')}
+        value={first}
+        {...inputProps}
+        modifiers={firstInitialOnlyCheckbox}
+        model={getEffectiveModel(effectiveNameModel.first, value)}
+        errors={errors.filter(e => e.indexOf('first') > -1)}
+      />
+
+      {!hideMiddleName && (
+        <ConnectedTextFormField
+          name="middle"
+          label={i18n.t(`${prefix}.label.middle`)}
+          value={middle}
+          {...inputProps}
+          model={getEffectiveModel(effectiveNameModel.middle, value)}
+          errors={errors.filter(e => e.indexOf('middle') > -1)}
+          disabled={noMiddleName}
+          modifiers={(
+            <span>
+              {noMiddleNameCheckbox}
+              {middleInitialOnlyCheckbox}
+            </span>
+          )}
+        />
+      )}
+
+      <ConnectedTextFormField
+        name="last"
+        label={i18n.t(`${prefix}.label.last`)}
+        value={last}
+        {...inputProps}
+        model={getEffectiveModel(effectiveNameModel.last, value)}
+        errors={errors.filter(e => e.indexOf('last') > -1)}
+      />
+
+      <ConnectedSelectFormField
+        name="suffix"
+        label={i18n.t(`${prefix}.label.suffix`)}
+        value={suffix}
+        optional
+        className="option-list suffix usa-small-input"
+        {...inputProps}
+        options={suffixOptions}
+      />
+
+      {suffix === 'Other' && (
+        <ConnectedTextFormField
+          name="suffixOther"
+          label={i18n.t(`${prefix}.label.other`)}
+          value={suffixOther}
+          {...inputProps}
+        />
+      )}
+
+    </fieldset>
+  )
+}
+
+NameFieldset.propTypes = {
+  value: PropTypes.object,
+  prefix: PropTypes.string,
+  onUpdate: PropTypes.func,
+  errors: PropTypes.array,
+}
+
+NameFieldset.defaultProps = {
+  value: {},
+  prefix: 'name',
+  onUpdate: () => {},
+  errors: [],
+}
+
+export default NameFieldset
diff --git a/src/components/Fieldsets/NameFieldset/NameFieldset.stories.jsx b/src/components/Fieldsets/NameFieldset/NameFieldset.stories.jsx
new file mode 100644
index 000000000..745720dda
--- /dev/null
+++ b/src/components/Fieldsets/NameFieldset/NameFieldset.stories.jsx
@@ -0,0 +1,34 @@
+/* eslint import/no-extraneous-dependencies: 0 */
+
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+
+import NameFieldset from './NameFieldset'
+
+storiesOf('NameFieldset', module)
+  .add('default', () => (
+    <NameFieldset
+      name="formField"
+    />
+  ))
+  .add('with a value', () => (
+    <NameFieldset
+      name="formField"
+      value={{
+        first: 'Suzanne',
+        middle: 'Rebecca',
+        last: 'Rozier',
+      }}
+    />
+  ))
+  .add('with a title', () => (
+    <NameFieldset
+      title="Your name"
+      name="formField"
+      value={{
+        first: 'Suzanne',
+        middle: 'Rebecca',
+        last: 'Rozier',
+      }}
+    />
+  ))
diff --git a/src/components/Form/Name/Name.jsx b/src/components/Form/Name/Name.jsx
index 5bceaa634..b43bb8f4f 100644
--- a/src/components/Form/Name/Name.jsx
+++ b/src/components/Form/Name/Name.jsx
@@ -1,9 +1,6 @@
 import React from 'react'
 import { i18n } from 'config'
 
-import FormField from 'components/Inputs/FormField/FormField'
-import { ConnectedTextInput } from 'components/Inputs/connectedInputs'
-
 import ValidationElement from '../ValidationElement'
 import Field from '../Field'
 import Show from '../Show'
@@ -145,26 +142,6 @@ export default class Name extends ValidationElement {
       <div className={klass.join(' ')}>
         {this.props.title && <h2>{this.props.title}</h2>}
 
-        <ConnectedTextInput
-          name="first"
-          label={i18n.t(`${prefix}.label.first`)}
-          helptext={i18n.m('identification.name.first.help.message')}
-          pattern="^[a-zA-Z\-\.' ]*$"
-          minlength={this.props.firstInitialOnly ? 1 : 2}
-          maxlength={maxFirst}
-          className="first"
-          value={this.props.first}
-          onChange={(values) => {
-            this.update({
-              first: values.value,
-            })
-          }}
-          onFocus={this.props.onFocus}
-          onBlur={this.props.onBlur}
-          required={this.props.required}
-          disabled={this.props.disabled}
-        />
-
         <Field
           title={i18n.t(`${prefix}.label.first`)}
           titleSize="label"
diff --git a/src/components/Inputs/CheckboxInput/CheckboxInput.jsx b/src/components/Inputs/CheckboxInput/CheckboxInput.jsx
index 029852cb3..9c3d1dfb7 100644
--- a/src/components/Inputs/CheckboxInput/CheckboxInput.jsx
+++ b/src/components/Inputs/CheckboxInput/CheckboxInput.jsx
@@ -32,9 +32,14 @@ const CheckboxInput = (props) => {
   )
 
   const inputClass = classnames({
-    'usa-input-success': !disabled && valid,
+    'usa-input-success': valid,
   })
 
+  const handleChange = (e) => {
+    console.log('checkbox handle change', e)
+    onChange(e.target.checked)
+  }
+
   return (
     <div className={divClass}>
       <input
@@ -48,7 +53,7 @@ const CheckboxInput = (props) => {
         aria-label={ariaLabel || label}
         disabled={disabled}
         readOnly={readonly}
-        onChange={onChange}
+        onChange={handleChange}
         onFocus={onFocus}
         onBlur={onBlur}
       />
diff --git a/src/components/Inputs/InputConnector.jsx b/src/components/Inputs/InputConnector.jsx
index d14f7059b..4e42eedb7 100644
--- a/src/components/Inputs/InputConnector.jsx
+++ b/src/components/Inputs/InputConnector.jsx
@@ -26,10 +26,9 @@ const connectInput = (Component, renderFormField = true) => {
       this.setState({ showHelp: !showHelp })
     }
 
-    handleChange = (event) => {
+    handleChange = (value) => {
       const { name, onChange } = this.props
-      const { value } = event.target
-      onChange({ value, name })
+      onChange(name, value)
     }
 
     handleFocus = () => {
diff --git a/src/components/Inputs/SelectInput/SelectInput.jsx b/src/components/Inputs/SelectInput/SelectInput.jsx
index 91c47d3d4..6b9a08500 100644
--- a/src/components/Inputs/SelectInput/SelectInput.jsx
+++ b/src/components/Inputs/SelectInput/SelectInput.jsx
@@ -17,6 +17,10 @@ const SelectInput = (props) => {
     { 'usa-input-success': valid }
   )
 
+  const handleChange = (e) => {
+    onChange(e.target.value)
+  }
+
   return (
     <div className={wrapperClasses}>
       <label
@@ -32,7 +36,7 @@ const SelectInput = (props) => {
       <select
         id={uid}
         name={name}
-        onChange={onChange}
+        onChange={handleChange}
         value={value}
         disabled={disabled}
         className={selectClasses}
diff --git a/src/components/Inputs/TextInput/TextInput.jsx b/src/components/Inputs/TextInput/TextInput.jsx
index 0548406bb..e421733b4 100644
--- a/src/components/Inputs/TextInput/TextInput.jsx
+++ b/src/components/Inputs/TextInput/TextInput.jsx
@@ -43,6 +43,10 @@ const TextInput = (props) => {
     if (!clipboard) e.preventDefault()
   }
 
+  const handleChange = (e) => {
+    onChange(e.target.value)
+  }
+
   return (
     <div className={divClass}>
       {label && (
@@ -65,7 +69,7 @@ const TextInput = (props) => {
         autoCorrect={autocorrect}
         autoComplete={autocomplete}
         spellCheck={spellcheck}
-        onChange={onChange}
+        onChange={handleChange}
         onFocus={onFocus}
         onBlur={onBlur}
         onKeyDown={handleKeyDown}
diff --git a/src/components/Inputs/connectedInputs.js b/src/components/Inputs/connectedInputs.js
index 9e0faea40..5bf0ae6b2 100644
--- a/src/components/Inputs/connectedInputs.js
+++ b/src/components/Inputs/connectedInputs.js
@@ -1,9 +1,22 @@
 import connectInput from 'components/Inputs/InputConnector'
 
 import TextInput from 'components/Inputs/TextInput/TextInput'
+import CheckboxInput from 'components/Inputs/CheckboxInput/CheckboxInput'
+import SelectInput from 'components/Inputs/SelectInput/SelectInput'
 
-const ConnectedTextInput = connectInput(TextInput)
+const ConnectedTextInput = connectInput(TextInput, false)
+const ConnectedCheckboxInput = connectInput(CheckboxInput, false)
+const ConnectedSelectInput = connectInput(SelectInput, false)
+
+const ConnectedTextFormField = connectInput(TextInput)
+const ConnectedCheckboxFormField = connectInput(CheckboxInput)
+const ConnectedSelectFormField = connectInput(SelectInput)
 
 export {
   ConnectedTextInput,
+  ConnectedCheckboxInput,
+  ConnectedSelectInput,
+  ConnectedTextFormField,
+  ConnectedCheckboxFormField,
+  ConnectedSelectFormField,
 }
diff --git a/src/components/Section/Identification/ApplicantName/ApplicantName.jsx b/src/components/Section/Identification/ApplicantName/ApplicantName.jsx
index 238167104..0990f2255 100644
--- a/src/components/Section/Identification/ApplicantName/ApplicantName.jsx
+++ b/src/components/Section/Identification/ApplicantName/ApplicantName.jsx
@@ -2,6 +2,7 @@ import React from 'react'
 import { i18n } from 'config'
 
 import { Name, Field } from 'components/Form'
+import NameFieldset from 'components/Fieldsets/NameFieldset/NameFieldset'
 
 import {
   IDENTIFICATION,
@@ -44,12 +45,15 @@ export class ApplicantName extends Subsection {
   }
 
   updateName(values) {
+    console.log('Update name', values)
     this.update({
       Name: values,
     })
   }
 
   render() {
+    const { errors } = this.props
+
     const klass = `section-content applicant-name ${this.props.className
       || ''}`.trim()
 
@@ -60,6 +64,15 @@ export class ApplicantName extends Subsection {
         data-subsection={IDENTIFICATION_NAME.key}
       >
         <h1 className="section-header">{i18n.t('identification.destination.name')}</h1>
+
+        <NameFieldset
+          title={i18n.t('identification.name.title')}
+          value={this.props.Name}
+          required={this.props.required}
+          onUpdate={this.updateName}
+          errors={errors}
+        />
+
         <Field
           title={i18n.t('identification.name.title')}
           titleSize="h4"
diff --git a/src/helpers/validation.js b/src/helpers/validation.js
index a72c20e9e..9e89d46f8 100644
--- a/src/helpers/validation.js
+++ b/src/helpers/validation.js
@@ -1,4 +1,5 @@
 /* eslint import/no-cycle: 0 */
+import { validate } from 'validate.js'
 
 import { SF86 } from 'constants/formTypes'
 import * as sections from 'constants/sections'
@@ -371,3 +372,63 @@ export const sectionIsInvalid = (formSections = []) => (
     return s.isValid === false
   })
 )
+
+/** Helper for using model object in UI components */
+// Gets model as a static object with given value and options
+export const getEffectiveModel = (model, attributes, options = {}) => {
+  const effectiveModel = {}
+
+  const constraints = Object.keys(model)
+  for (let i = 0; i < constraints.length; i += 1) {
+    const constraint = constraints[i] // attributeName
+    const constraintValue = model[constraint] // validation function
+    if (validate.isFunction(constraintValue)) {
+      console.log('constraint function', constraint)
+      const value = attributes[constraint] // attribute value
+      effectiveModel[constraint] = constraintValue(value, attributes, constraint, options)
+      console.log('result', effectiveModel[constraint])
+      break
+    }
+
+    effectiveModel[constraint] = constraintValue
+  }
+
+  return effectiveModel
+}
+
+// Input is a validate.js constraints object
+// Return object representing props that handle native validation
+export const getValidationPropsFromModel = (model = {}) => {
+  const props = {}
+
+  const constraints = Object.keys(model)
+  for (let i = 0; i < constraints.length; i += 1) {
+    const constraint = constraints[i]
+    switch (constraint) {
+      case 'presence':
+        props.required = model[constraint]
+        break
+
+      case 'format':
+        props.pattern = model[constraint]
+        break
+
+      case 'length': {
+        const length = model[constraint]
+        if (length.is) {
+          props.maxLength = length.is
+          props.minLength = length.is
+        }
+
+        if (length.maximum) props.maxLength = length.maximum
+        if (length.minimum) props.minLength = length.minimum
+        break
+      }
+
+      default:
+        // no op
+    }
+  }
+
+  return props
+}

From 758705db7f3dc003b5b0f7ce10f9b9a842d80b5d Mon Sep 17 00:00:00 2001
From: Suzanne Rozier <suz@truss.works>
Date: Tue, 17 Sep 2019 16:53:18 -0400
Subject: [PATCH 4/7] Pass errors into inputs

---
 .../Fieldsets/NameFieldset/NameFieldset.jsx   | 41 +++++++++++++++----
 src/components/Inputs/InputConnector.jsx      |  5 ++-
 src/components/Inputs/TextInput/TextInput.jsx |  3 --
 3 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/src/components/Fieldsets/NameFieldset/NameFieldset.jsx b/src/components/Fieldsets/NameFieldset/NameFieldset.jsx
index 184016eb3..7e8fe55dc 100644
--- a/src/components/Fieldsets/NameFieldset/NameFieldset.jsx
+++ b/src/components/Fieldsets/NameFieldset/NameFieldset.jsx
@@ -9,7 +9,8 @@ import {
 } from 'components/Inputs/connectedInputs'
 
 import nameModel from 'models/shared/name'
-import { getEffectiveModel } from 'helpers/validation'
+import { getEffectiveModel, getValidationPropsFromModel } from 'helpers/validation'
+import { REQUIRED } from 'constants/errors'
 
 const NameFieldset = (props) => {
   const {
@@ -37,7 +38,6 @@ const NameFieldset = (props) => {
   ]
 
   const onChange = (name, newValue) => {
-    console.log('on change', name, newValue)
     onUpdate({
       ...value,
       [`${name}`]: newValue,
@@ -55,8 +55,29 @@ const NameFieldset = (props) => {
     onChange,
   }
 
+  const errorPrefix = 'Name.model'
   const effectiveNameModel = getEffectiveModel(nameModel, value)
 
+  const validationProps = {}
+
+  // Filter out "required" errors unless fieldset is required (on review page)
+  const filteredErrors = required
+    ? errors
+    : errors.filter(e => e.indexOf(`presence.${REQUIRED}`) < 0)
+
+  Object.keys(effectiveNameModel).forEach((field) => {
+    const fieldModel = getEffectiveModel(effectiveNameModel[field], value)
+    const fieldErrors = errors.filter(e => e.indexOf(`${errorPrefix}.${field}`) === 0)
+    const filteredFieldErrors = filteredErrors.filter(e => e.indexOf(`${errorPrefix}.${field}`) === 0)
+
+    validationProps[field] = {
+      ...getValidationPropsFromModel(fieldModel),
+      errors: filteredFieldErrors,
+      error: filteredFieldErrors && filteredFieldErrors.length > 0,
+      valid: !fieldErrors || fieldErrors.length < 1,
+    }
+  })
+
   const firstInitialOnlyCheckbox = (
     <div className="modifier">
       <ConnectedCheckboxInput
@@ -65,6 +86,7 @@ const NameFieldset = (props) => {
         inputId="firstInitialOnly"
         name="firstInitialOnly"
         {...inputProps}
+        {...validationProps.firstInitialOnly}
       />
     </div>
   )
@@ -77,6 +99,7 @@ const NameFieldset = (props) => {
         inputId="middleInitialOnly"
         name="middleInitialOnly"
         {...inputProps}
+        {...validationProps.middleInitialOnly}
       />
     </div>
   )
@@ -89,6 +112,7 @@ const NameFieldset = (props) => {
         inputId="noMiddleName"
         name="noMiddleName"
         {...inputProps}
+        {...validationProps.noMiddleName}
       />
     </div>
   )
@@ -103,9 +127,8 @@ const NameFieldset = (props) => {
         helptext={i18n.m('identification.name.first.help.message')}
         value={first}
         {...inputProps}
+        {...validationProps.first}
         modifiers={firstInitialOnlyCheckbox}
-        model={getEffectiveModel(effectiveNameModel.first, value)}
-        errors={errors.filter(e => e.indexOf('first') > -1)}
       />
 
       {!hideMiddleName && (
@@ -114,8 +137,7 @@ const NameFieldset = (props) => {
           label={i18n.t(`${prefix}.label.middle`)}
           value={middle}
           {...inputProps}
-          model={getEffectiveModel(effectiveNameModel.middle, value)}
-          errors={errors.filter(e => e.indexOf('middle') > -1)}
+          {...validationProps.middle}
           disabled={noMiddleName}
           modifiers={(
             <span>
@@ -131,17 +153,17 @@ const NameFieldset = (props) => {
         label={i18n.t(`${prefix}.label.last`)}
         value={last}
         {...inputProps}
-        model={getEffectiveModel(effectiveNameModel.last, value)}
-        errors={errors.filter(e => e.indexOf('last') > -1)}
+        {...validationProps.last}
       />
 
       <ConnectedSelectFormField
         name="suffix"
         label={i18n.t(`${prefix}.label.suffix`)}
         value={suffix}
-        optional
+        optional={true}
         className="option-list suffix usa-small-input"
         {...inputProps}
+        {...validationProps.suffix}
         options={suffixOptions}
       />
 
@@ -151,6 +173,7 @@ const NameFieldset = (props) => {
           label={i18n.t(`${prefix}.label.other`)}
           value={suffixOther}
           {...inputProps}
+          {...validationProps.suffixOther}
         />
       )}
 
diff --git a/src/components/Inputs/InputConnector.jsx b/src/components/Inputs/InputConnector.jsx
index 4e42eedb7..25e59763a 100644
--- a/src/components/Inputs/InputConnector.jsx
+++ b/src/components/Inputs/InputConnector.jsx
@@ -5,6 +5,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
+import { newGuid } from 'components/Form/ValidationElement/helpers'
+
 import FormField from './FormField/FormField'
 import styles from './FormField/FormField.module.scss'
 
@@ -13,7 +15,8 @@ const connectInput = (Component, renderFormField = true) => {
     constructor(props) {
       super(props)
 
-      this.uid = ''
+      // TODO - newGuid should be replaced with a library for generating uuids
+      this.uid = newGuid()
 
       this.state = {
         focus: false,
diff --git a/src/components/Inputs/TextInput/TextInput.jsx b/src/components/Inputs/TextInput/TextInput.jsx
index e421733b4..748c5615e 100644
--- a/src/components/Inputs/TextInput/TextInput.jsx
+++ b/src/components/Inputs/TextInput/TextInput.jsx
@@ -8,9 +8,6 @@ import classnames from 'classnames'
 
 import { autotab } from 'components/Form/Generic'
 
-// TODO
-// import { getValidationPropsFromModel } from './modelValidations'
-
 const TextInput = (props) => {
   const {
     label, uid, name, type, placeholder, ariaLabel, disabled, error, maxlength,

From f389418f050572b287f0b52b0714d7a2188a680b Mon Sep 17 00:00:00 2001
From: Suzanne Rozier <suz@truss.works>
Date: Tue, 17 Sep 2019 17:43:47 -0400
Subject: [PATCH 5/7] Finesse error UI

---
 .../Fieldsets/NameFieldset/NameFieldset.jsx   | 13 ++-----
 src/components/Inputs/InputConnector.jsx      | 34 +++++++++++++++++++
 src/helpers/validation.js                     |  6 ++--
 3 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/src/components/Fieldsets/NameFieldset/NameFieldset.jsx b/src/components/Fieldsets/NameFieldset/NameFieldset.jsx
index 7e8fe55dc..b37eb19b3 100644
--- a/src/components/Fieldsets/NameFieldset/NameFieldset.jsx
+++ b/src/components/Fieldsets/NameFieldset/NameFieldset.jsx
@@ -10,7 +10,6 @@ import {
 
 import nameModel from 'models/shared/name'
 import { getEffectiveModel, getValidationPropsFromModel } from 'helpers/validation'
-import { REQUIRED } from 'constants/errors'
 
 const NameFieldset = (props) => {
   const {
@@ -60,21 +59,13 @@ const NameFieldset = (props) => {
 
   const validationProps = {}
 
-  // Filter out "required" errors unless fieldset is required (on review page)
-  const filteredErrors = required
-    ? errors
-    : errors.filter(e => e.indexOf(`presence.${REQUIRED}`) < 0)
-
   Object.keys(effectiveNameModel).forEach((field) => {
     const fieldModel = getEffectiveModel(effectiveNameModel[field], value)
     const fieldErrors = errors.filter(e => e.indexOf(`${errorPrefix}.${field}`) === 0)
-    const filteredFieldErrors = filteredErrors.filter(e => e.indexOf(`${errorPrefix}.${field}`) === 0)
 
     validationProps[field] = {
-      ...getValidationPropsFromModel(fieldModel),
-      errors: filteredFieldErrors,
-      error: filteredFieldErrors && filteredFieldErrors.length > 0,
-      valid: !fieldErrors || fieldErrors.length < 1,
+      ...getValidationPropsFromModel(fieldModel, required),
+      errors: fieldErrors,
     }
   })
 
diff --git a/src/components/Inputs/InputConnector.jsx b/src/components/Inputs/InputConnector.jsx
index 25e59763a..73eaf9fb7 100644
--- a/src/components/Inputs/InputConnector.jsx
+++ b/src/components/Inputs/InputConnector.jsx
@@ -6,6 +6,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import { newGuid } from 'components/Form/ValidationElement/helpers'
+import { REQUIRED } from 'constants/errors'
 
 import FormField from './FormField/FormField'
 import styles from './FormField/FormField.module.scss'
@@ -42,12 +43,40 @@ const connectInput = (Component, renderFormField = true) => {
       this.setState({ focus: false })
     }
 
+    showErrors = () => {
+      // Only show required error if required prop is true
+      // Otherwise only show other errors if there is no required error (invalid value)
+      const { errors, required } = this.props
+      if (required) return true
+      return errors.filter(e => e.indexOf(`presence.${REQUIRED}`) > -1).length < 1
+    }
+
+    filterErrors = () => {
+      // If there's a required error, show only that
+      // Otherwise show the rest of the errors
+      const { errors } = this.props
+      const requiredError = errors.filter(e => e.indexOf(`presence.${REQUIRED}`) > -1)
+      if (requiredError.length) return requiredError
+      return errors
+    }
+
     render() {
+      const { errors } = this.props
+
+      const showErrors = this.showErrors()
+
+      const errorProps = {
+        errors: showErrors && this.filterErrors(),
+        valid: !errors || errors.length < 1,
+        error: showErrors && errors.length > 0,
+      }
+
       const inputComponent = (
         <Component
           uid={this.uid}
           {...this.props}
           {...this.state}
+          {...errorProps}
           onChange={this.handleChange}
           onFocus={this.handleFocus}
           onBlur={this.handleBlur}
@@ -61,6 +90,7 @@ const connectInput = (Component, renderFormField = true) => {
           <FormField
             {...this.props}
             {...this.state}
+            {...errorProps}
             inputId={this.uid}
             showHelp={showHelp}
             toggleHelp={this.toggleHelp}
@@ -81,11 +111,15 @@ const connectInput = (Component, renderFormField = true) => {
     name: PropTypes.string.isRequired,
     onChange: PropTypes.func,
     modifiers: PropTypes.array,
+    errors: PropTypes.array,
+    required: PropTypes.bool,
   }
 
   ConnectedInput.defaultProps = {
     modifiers: [],
     onChange: () => {},
+    errors: [],
+    required: false,
   }
 
   return ConnectedInput
diff --git a/src/helpers/validation.js b/src/helpers/validation.js
index 9e89d46f8..a847c268b 100644
--- a/src/helpers/validation.js
+++ b/src/helpers/validation.js
@@ -383,10 +383,8 @@ export const getEffectiveModel = (model, attributes, options = {}) => {
     const constraint = constraints[i] // attributeName
     const constraintValue = model[constraint] // validation function
     if (validate.isFunction(constraintValue)) {
-      console.log('constraint function', constraint)
       const value = attributes[constraint] // attribute value
       effectiveModel[constraint] = constraintValue(value, attributes, constraint, options)
-      console.log('result', effectiveModel[constraint])
       break
     }
 
@@ -398,7 +396,7 @@ export const getEffectiveModel = (model, attributes, options = {}) => {
 
 // Input is a validate.js constraints object
 // Return object representing props that handle native validation
-export const getValidationPropsFromModel = (model = {}) => {
+export const getValidationPropsFromModel = (model = {}, required = true) => {
   const props = {}
 
   const constraints = Object.keys(model)
@@ -406,7 +404,7 @@ export const getValidationPropsFromModel = (model = {}) => {
     const constraint = constraints[i]
     switch (constraint) {
       case 'presence':
-        props.required = model[constraint]
+        if (required) props.required = model[constraint]
         break
 
       case 'format':

From 28a4b5b14ca470b6814993cdbfd677f062fed5a0 Mon Sep 17 00:00:00 2001
From: Suzanne Rozier <suz@truss.works>
Date: Wed, 18 Sep 2019 10:33:21 -0400
Subject: [PATCH 6/7] Cleanup

---
 src/components/Fieldsets/NameFieldset/NameFieldset.jsx | 2 +-
 src/components/Form/Name/Name.jsx                      | 2 --
 src/components/Inputs/InputConnector.jsx               | 2 +-
 src/helpers/validation.js                              | 2 +-
 4 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/Fieldsets/NameFieldset/NameFieldset.jsx b/src/components/Fieldsets/NameFieldset/NameFieldset.jsx
index b37eb19b3..97bfa9110 100644
--- a/src/components/Fieldsets/NameFieldset/NameFieldset.jsx
+++ b/src/components/Fieldsets/NameFieldset/NameFieldset.jsx
@@ -110,7 +110,7 @@ const NameFieldset = (props) => {
 
   return (
     <fieldset className={classes}>
-      {title && <legend>{title}</legend>}
+      {title && <h2>{title}</h2>}
 
       <ConnectedTextFormField
         name="first"
diff --git a/src/components/Form/Name/Name.jsx b/src/components/Form/Name/Name.jsx
index b43bb8f4f..6de49ee58 100644
--- a/src/components/Form/Name/Name.jsx
+++ b/src/components/Form/Name/Name.jsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import { i18n } from 'config'
-
 import ValidationElement from '../ValidationElement'
 import Field from '../Field'
 import Show from '../Show'
@@ -141,7 +140,6 @@ export default class Name extends ValidationElement {
     return (
       <div className={klass.join(' ')}>
         {this.props.title && <h2>{this.props.title}</h2>}
-
         <Field
           title={i18n.t(`${prefix}.label.first`)}
           titleSize="label"
diff --git a/src/components/Inputs/InputConnector.jsx b/src/components/Inputs/InputConnector.jsx
index 73eaf9fb7..3dc587688 100644
--- a/src/components/Inputs/InputConnector.jsx
+++ b/src/components/Inputs/InputConnector.jsx
@@ -116,7 +116,7 @@ const connectInput = (Component, renderFormField = true) => {
   }
 
   ConnectedInput.defaultProps = {
-    modifiers: [],
+    modifiers: null,
     onChange: () => {},
     errors: [],
     required: false,
diff --git a/src/helpers/validation.js b/src/helpers/validation.js
index a847c268b..bb7339c88 100644
--- a/src/helpers/validation.js
+++ b/src/helpers/validation.js
@@ -395,7 +395,7 @@ export const getEffectiveModel = (model, attributes, options = {}) => {
 }
 
 // Input is a validate.js constraints object
-// Return object representing props that handle native validation
+// Return object representing input attributes that handle native HTML5 validation
 export const getValidationPropsFromModel = (model = {}, required = true) => {
   const props = {}
 

From 706eeeba301e0a1cadeb10706ffe943843ae293e Mon Sep 17 00:00:00 2001
From: Suzanne Rozier <suz@truss.works>
Date: Wed, 18 Sep 2019 17:01:45 -0400
Subject: [PATCH 7/7] A nicer formfield help component, clean up

---
 .../Fieldsets/NameFieldset/NameFieldset.jsx   | 14 ++++-
 .../Inputs/CheckboxInput/CheckboxInput.jsx    |  1 -
 src/components/Inputs/FormField/FormField.jsx | 58 +++++++------------
 .../Inputs/FormField/FormFieldHelp.jsx        | 52 +++++++++++++++++
 .../Inputs/FormField/FormFieldMessage.jsx     | 28 +++++++++
 src/components/Inputs/InputConnector.jsx      |  4 +-
 src/components/Inputs/TextInput/TextInput.jsx | 10 ++++
 .../ApplicantName/ApplicantName.jsx           |  1 -
 8 files changed, 126 insertions(+), 42 deletions(-)
 create mode 100644 src/components/Inputs/FormField/FormFieldHelp.jsx
 create mode 100644 src/components/Inputs/FormField/FormFieldMessage.jsx

diff --git a/src/components/Fieldsets/NameFieldset/NameFieldset.jsx b/src/components/Fieldsets/NameFieldset/NameFieldset.jsx
index 97bfa9110..99eeae771 100644
--- a/src/components/Fieldsets/NameFieldset/NameFieldset.jsx
+++ b/src/components/Fieldsets/NameFieldset/NameFieldset.jsx
@@ -115,7 +115,7 @@ const NameFieldset = (props) => {
       <ConnectedTextFormField
         name="first"
         label={i18n.t(`${prefix}.label.first`)}
-        helptext={i18n.m('identification.name.first.help.message')}
+        help="identification.name.first.help"
         value={first}
         {...inputProps}
         {...validationProps.first}
@@ -126,6 +126,7 @@ const NameFieldset = (props) => {
         <ConnectedTextFormField
           name="middle"
           label={i18n.t(`${prefix}.label.middle`)}
+          help="identification.name.middle.help"
           value={middle}
           {...inputProps}
           {...validationProps.middle}
@@ -150,6 +151,7 @@ const NameFieldset = (props) => {
       <ConnectedSelectFormField
         name="suffix"
         label={i18n.t(`${prefix}.label.suffix`)}
+        help="identification.name.suffix.help"
         value={suffix}
         optional={true}
         className="option-list suffix usa-small-input"
@@ -174,16 +176,26 @@ const NameFieldset = (props) => {
 
 NameFieldset.propTypes = {
   value: PropTypes.object,
+  title: PropTypes.node,
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  required: PropTypes.bool,
   prefix: PropTypes.string,
   onUpdate: PropTypes.func,
   errors: PropTypes.array,
+  hideMiddleName: PropTypes.bool,
 }
 
 NameFieldset.defaultProps = {
   value: {},
+  title: null,
+  className: null,
+  disabled: false,
+  required: false,
   prefix: 'name',
   onUpdate: () => {},
   errors: [],
+  hideMiddleName: false,
 }
 
 export default NameFieldset
diff --git a/src/components/Inputs/CheckboxInput/CheckboxInput.jsx b/src/components/Inputs/CheckboxInput/CheckboxInput.jsx
index 9c3d1dfb7..25ffae7c5 100644
--- a/src/components/Inputs/CheckboxInput/CheckboxInput.jsx
+++ b/src/components/Inputs/CheckboxInput/CheckboxInput.jsx
@@ -36,7 +36,6 @@ const CheckboxInput = (props) => {
   })
 
   const handleChange = (e) => {
-    console.log('checkbox handle change', e)
     onChange(e.target.checked)
   }
 
diff --git a/src/components/Inputs/FormField/FormField.jsx b/src/components/Inputs/FormField/FormField.jsx
index 0c3ac9187..463640e76 100644
--- a/src/components/Inputs/FormField/FormField.jsx
+++ b/src/components/Inputs/FormField/FormField.jsx
@@ -1,26 +1,11 @@
-/**
- * Field component requirements:
- * - Wraps a form input
- * - Renders inside of .usa-form-control
- * - Renders an anchor ID so it can be linked to
- * - renders a label
- * - renders help text - displayed as internal state, icon toggle
- * - renders an error message
- * - renders the form input (children?)
- * - render modifiers
- *
- * TODO:
- * - data test ID
- */
-
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
-import i18n from 'util/i18n'
+import FormFieldHelp from './FormFieldHelp'
 
 const FormField = ({
-  title, required, inputId, children, errors, helptext, toggleHelp, showHelp,
+  title, required, inputId, children, errors, help, toggleHelp, showHelp,
   className,
 }) => {
   const classes = classnames(
@@ -48,7 +33,7 @@ const FormField = ({
         </h1>
       )}
 
-      {helptext && toggleHelp && (
+      {help && toggleHelp && (
         <button
           type="button"
           title="Show help"
@@ -60,23 +45,12 @@ const FormField = ({
         </button>
       )}
 
-      {helptext && showHelp && (
+      {help && showHelp && (
         <div className="messages help-messages">
-          <div className="usa-alert usa-alert-info" role="alert">
-            <div className="usa-alert-body">
-              {helptext}
-              {toggleHelp && (
-                <button
-                  type="button"
-                  className="close"
-                  onClick={toggleHelp}
-                  title={i18n.t('help.close')}
-                >
-                  {i18n.t('help.close')}
-                </button>
-              )}
-            </div>
-          </div>
+          <FormFieldHelp
+            id={help}
+            toggle={toggleHelp}
+          />
         </div>
       )}
 
@@ -103,15 +77,25 @@ const FormField = ({
 }
 
 FormField.propTypes = {
-  name: PropTypes.string.isRequired,
+  title: PropTypes.node,
+  required: PropTypes.bool,
+  inputId: PropTypes.string.isRequired,
   children: PropTypes.node.isRequired,
   errors: PropTypes.array,
-  helptext: PropTypes.node,
+  help: PropTypes.string,
+  toggleHelp: PropTypes.func,
+  showHelp: PropTypes.bool,
+  className: PropTypes.string,
 }
 
 FormField.defaultProps = {
+  title: null,
+  required: false,
   errors: [],
-  helptext: null,
+  help: null,
+  toggleHelp: null,
+  showHelp: false,
+  className: null,
 }
 
 export default FormField
diff --git a/src/components/Inputs/FormField/FormFieldHelp.jsx b/src/components/Inputs/FormField/FormFieldHelp.jsx
new file mode 100644
index 000000000..91ce512c5
--- /dev/null
+++ b/src/components/Inputs/FormField/FormFieldHelp.jsx
@@ -0,0 +1,52 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import i18n from 'util/i18n'
+import FormFieldMessage from './FormFieldMessage'
+
+const FormFieldHelp = ({
+  id, message, title, toggle,
+}) => {
+  const helpMessage = message || i18n.m(`${id}.message`)
+  const helpTitle = title || i18n.t(`${id}.title`)
+  const helpNote = i18n.m(`${id}.note`)
+
+  return (
+    <div className="usa-alert usa-alert-info" role="alert">
+      <div className="usa-alert-body">
+        <FormFieldMessage
+          id={id}
+          title={helpTitle}
+          message={helpMessage}
+          note={helpNote}
+        />
+
+        {toggle && (
+          <button
+            type="button"
+            className="close"
+            onClick={toggle}
+            title={i18n.t('help.close')}
+          >
+            {i18n.t('help.close')}
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}
+
+FormFieldHelp.propTypes = {
+  id: PropTypes.string.isRequired,
+  message: PropTypes.node,
+  title: PropTypes.node,
+  toggle: PropTypes.func,
+}
+
+FormFieldHelp.defaultProps = {
+  message: null,
+  title: null,
+  toggle: null,
+}
+
+export default FormFieldHelp
diff --git a/src/components/Inputs/FormField/FormFieldMessage.jsx b/src/components/Inputs/FormField/FormFieldMessage.jsx
new file mode 100644
index 000000000..0eb655f3e
--- /dev/null
+++ b/src/components/Inputs/FormField/FormFieldMessage.jsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+// Used by help text & errors to render a group of text
+const FormFieldMessage = ({
+  id, title, message, note,
+}) => (
+  <div data-i18n={id}>
+    {title && (<h5 className="usa-alert-heading">{title}</h5>)}
+    {message && <span>{message}</span>}
+    {note && <em>{note}</em>}
+  </div>
+)
+
+FormFieldMessage.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.node,
+  message: PropTypes.node,
+  note: PropTypes.node,
+}
+
+FormFieldMessage.defaultProps = {
+  title: null,
+  message: null,
+  note: null,
+}
+
+export default FormFieldMessage
diff --git a/src/components/Inputs/InputConnector.jsx b/src/components/Inputs/InputConnector.jsx
index 3dc587688..d646e1a28 100644
--- a/src/components/Inputs/InputConnector.jsx
+++ b/src/components/Inputs/InputConnector.jsx
@@ -45,14 +45,14 @@ const connectInput = (Component, renderFormField = true) => {
 
     showErrors = () => {
       // Only show required error if required prop is true
-      // Otherwise only show other errors if there is no required error (invalid value)
+      // Otherwise only show other errors if there is no required error (there's an invalid value)
       const { errors, required } = this.props
       if (required) return true
       return errors.filter(e => e.indexOf(`presence.${REQUIRED}`) > -1).length < 1
     }
 
     filterErrors = () => {
-      // If there's a required error, show only that
+      // If there's a required error, only only that
       // Otherwise show the rest of the errors
       const { errors } = this.props
       const requiredError = errors.filter(e => e.indexOf(`presence.${REQUIRED}`) > -1)
diff --git a/src/components/Inputs/TextInput/TextInput.jsx b/src/components/Inputs/TextInput/TextInput.jsx
index 748c5615e..d5bed61f6 100644
--- a/src/components/Inputs/TextInput/TextInput.jsx
+++ b/src/components/Inputs/TextInput/TextInput.jsx
@@ -90,6 +90,7 @@ TextInput.propTypes = {
   placeholder: PropTypes.string,
   error: PropTypes.bool,
   valid: PropTypes.bool,
+  focus: PropTypes.bool,
   disabled: PropTypes.bool,
   className: PropTypes.string,
   clipboard: PropTypes.bool,
@@ -98,6 +99,10 @@ TextInput.propTypes = {
   autocorrect: PropTypes.bool,
   autocomplete: PropTypes.bool,
   readonly: PropTypes.bool,
+  maxlength: PropTypes.number,
+  pattern: PropTypes.string,
+  tabBack: PropTypes.func,
+  tabNext: PropTypes.func,
   onChange: PropTypes.func,
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
@@ -110,6 +115,7 @@ TextInput.defaultProps = {
   placeholder: '',
   error: false,
   valid: false,
+  focus: false,
   disabled: false,
   className: '',
   clipboard: true,
@@ -118,6 +124,10 @@ TextInput.defaultProps = {
   autocorrect: true,
   autocomplete: true,
   readonly: false,
+  maxlength: 255,
+  pattern: '.*',
+  tabBack: () => {},
+  tabNext: () => {},
   onChange: () => {},
   onFocus: () => {},
   onBlur: () => {},
diff --git a/src/components/Section/Identification/ApplicantName/ApplicantName.jsx b/src/components/Section/Identification/ApplicantName/ApplicantName.jsx
index 0990f2255..621fb841c 100644
--- a/src/components/Section/Identification/ApplicantName/ApplicantName.jsx
+++ b/src/components/Section/Identification/ApplicantName/ApplicantName.jsx
@@ -45,7 +45,6 @@ export class ApplicantName extends Subsection {
   }
 
   updateName(values) {
-    console.log('Update name', values)
     this.update({
       Name: values,
     })