UI Refactor Demo

src/components/Fieldsets/NameFieldset/NameFieldset.jsx

@@ -0,0 +1,201 @@
+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, getValidationPropsFromModel } 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) => {
+    onUpdate({
+      ...value,
+      [`${name}`]: newValue,
+    })
+  }
+
+  const {
+    first, middle, last, firstInitialOnly, middleInitialOnly, noMiddleName,
+    suffix, suffixOther,
+  } = value
+
+  const inputProps = {
+    disabled,
+    required,
+    onChange,
+  }
+
+  const errorPrefix = 'Name.model'
+  const effectiveNameModel = getEffectiveModel(nameModel, value)
+
+  const validationProps = {}
+
+  Object.keys(effectiveNameModel).forEach((field) => {
+    const fieldModel = getEffectiveModel(effectiveNameModel[field], value)
+    const fieldErrors = errors.filter(e => e.indexOf(`${errorPrefix}.${field}`) === 0)
+
+    validationProps[field] = {
+      ...getValidationPropsFromModel(fieldModel, required),
+      errors: fieldErrors,
+    }
+  })
+
+  const firstInitialOnlyCheckbox = (
+    <div className="modifier">
+      <ConnectedCheckboxInput
+        label={i18n.t(`${prefix}.label.initialOnly`)}
+        value={firstInitialOnly}
+        inputId="firstInitialOnly"
+        name="firstInitialOnly"
+        {...inputProps}
+        {...validationProps.firstInitialOnly}
+      />
+    </div>
+  )
+
+  const middleInitialOnlyCheckbox = (
+    <div className="modifier">
+      <ConnectedCheckboxInput
+        label={i18n.t(`${prefix}.label.initialOnly`)}
+        value={middleInitialOnly}
+        inputId="middleInitialOnly"
+        name="middleInitialOnly"
+        {...inputProps}
+        {...validationProps.middleInitialOnly}
+      />
+    </div>
+  )
+
+  const noMiddleNameCheckbox = (
+    <div className="modifier">
+      <ConnectedCheckboxInput
+        label={i18n.t(`${prefix}.label.noMiddle`)}
+        value={noMiddleName}
+        inputId="noMiddleName"
+        name="noMiddleName"
+        {...inputProps}
+        {...validationProps.noMiddleName}
+      />
+    </div>
+  )
+
+  return (
+    <fieldset className={classes}>
+      {title && <h2>{title}</h2>}
+
+      <ConnectedTextFormField
+        name="first"
+        label={i18n.t(`${prefix}.label.first`)}
+        help="identification.name.first.help"
+        value={first}
+        {...inputProps}
+        {...validationProps.first}
+        modifiers={firstInitialOnlyCheckbox}
+      />
+
+      {!hideMiddleName && (
+        <ConnectedTextFormField
+          name="middle"
+          label={i18n.t(`${prefix}.label.middle`)}
+          help="identification.name.middle.help"
+          value={middle}
+          {...inputProps}
+          {...validationProps.middle}
+          disabled={noMiddleName}
+          modifiers={(
+            <span>
+              {noMiddleNameCheckbox}
+              {middleInitialOnlyCheckbox}
+            </span>
+          )}
+        />
+      )}
+
+      <ConnectedTextFormField
+        name="last"
+        label={i18n.t(`${prefix}.label.last`)}
+        value={last}
+        {...inputProps}
+        {...validationProps.last}
+      />
+
+      <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"
+        {...inputProps}
+        {...validationProps.suffix}
+        options={suffixOptions}
+      />
+
+      {suffix === 'Other' && (
+        <ConnectedTextFormField
+          name="suffixOther"
+          label={i18n.t(`${prefix}.label.other`)}
+          value={suffixOther}
+          {...inputProps}
+          {...validationProps.suffixOther}
+        />
+      )}
+
+    </fieldset>
+  )
+}
+
+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

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',
+      }}
+    />
+  ))

src/components/Inputs/CheckboxInput/CheckboxInput.jsx

@@ -0,0 +1,101 @@
+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': valid,
+  })
+
+  const handleChange = (e) => {
+    onChange(e.target.checked)
+  }
+
+  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={handleChange}
+        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