Add employer page

src/components/form/fields/Address/Address.module.scss

@@ -0,0 +1,16 @@
+.city {
+  width: 10rem !important;
+  margin-right: 2rem !important;
+}
+
+.city_error {
+  padding-right: 2rem;
+}
+
+.state {
+  width: 8rem !important;
+}
+
+.zipcode {
+  width: 8rem !important;
+}

src/components/form/fields/Address/Address.stories.tsx

@@ -0,0 +1,68 @@
+import { yupResolver } from '@hookform/resolvers/yup'
+import { Meta, StoryFn } from '@storybook/react'
+import { noop } from 'helpers/noop/noop'
+import { FormProvider, useForm } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import * as yup from 'yup'
+
+import Address, { IAddressLabels } from './Address'
+
+export default {
+  title: 'Components/Form/Address',
+  component: Address,
+} as Meta<typeof Address>
+
+const Template: StoryFn<typeof Address> = (args) => {
+  const { t: tCommon } = useTranslation('common')
+  type Address = {
+    address: IAddressLabels
+  }
+  const initialValues = {
+    address: {
+      address1: '',
+      address2: '',
+      city: '',
+      state: '',
+      zipcode: '',
+    },
+  }
+
+  const validationSchema = yup.object().shape({
+    address: yup.object().shape({
+      address1: yup.string().required(tCommon('validation.required')),
+      address2: yup.string().optional(),
+      city: yup.string().required(tCommon('validation.required')),
+      state: yup.string().required(tCommon('validation.required')),
+
+      zipcode: yup
+        .string()
+        // eslint-disable-next-line security/detect-unsafe-regex
+        .matches(/^\d{5}(-\d{4})?$/, tCommon('validation.notZipCode'))
+        .required(tCommon('validation.required')),
+    }),
+  })
+
+  const hookFormMethods = useForm<Address>({
+    defaultValues: initialValues,
+    resolver: yupResolver(validationSchema),
+  })
+
+  return (
+    <FormProvider {...hookFormMethods}>
+      <form onSubmit={noop}>
+        <Address basename={args.basename} optAddress2={args.optAddress2} />
+      </form>
+    </FormProvider>
+  )
+}
+
+export const Default = Template.bind({})
+Default.args = {
+  basename: 'address',
+}
+
+export const WithSecondAddress = Template.bind({})
+WithSecondAddress.args = {
+  basename: 'address',
+  optAddress2: true,
+}

src/components/form/fields/Address/Address.tsx

@@ -0,0 +1,92 @@
+import { FormGroup } from '@trussworks/react-uswds'
+import { ChangeEventHandler } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { StateAbbrev, StatesDropdown } from '../StatesDropdown/StatesDropdown'
+import TextField from '../TextField/TextField'
+import styles from './Address.module.scss'
+
+export interface IAddressLabels {
+  address: string
+  address2?: string
+  city: string
+  state: string
+  zipcode: string
+}
+
+export interface IAddressProps {
+  labels?: IAddressLabels
+  basename: string
+  optAddress2?: boolean
+  stateSlice?: StateAbbrev[]
+  onChange?: ChangeEventHandler<HTMLInputElement | HTMLSelectElement>
+}
+
+export const Address = ({
+  labels,
+  basename,
+  stateSlice,
+  optAddress2,
+  onChange,
+}: IAddressProps) => {
+  const { t } = useTranslation('common')
+  const defaultLabels: IAddressLabels = {
+    address: t('address.address.label'),
+    address2: t('address.address2.label'),
+    city: t('address.city.label'),
+    state: t('address.state.label'),
+    zipcode: t('address.zipcode.label'),
+  }
+
+  return (
+    <FormGroup>
+      <TextField
+        name={`${basename}.address`}
+        label={labels ? labels.address : defaultLabels.address}
+        type="text"
+        data-testid={`${basename}.address`}
+        onChange={onChange}
+      />
+      {optAddress2 && (
+        <TextField
+          name={`${basename}.address2`}
+          label={labels ? labels.address2 : defaultLabels.address2}
+          type="text"
+          data-testid={`${basename}.address2`}
+          onChange={onChange}
+        />
+      )}
+      <div className="display-flex" data-testid={`${basename}.parent-div`}>
+        <TextField
+          name={`${basename}.city`}
+          label={labels ? labels.city : defaultLabels.city}
+          type="text"
+          data-testid={`${basename}.city`}
+          className={styles.city}
+          errorClassName={styles.city_error}
+          onChange={onChange}
+        />
+        <StatesDropdown
+          name={`${basename}.state`}
+          label={labels ? labels.state : defaultLabels.state}
+          data-testid={`${basename}.state`}
+          startEmpty
+          stateSlice={stateSlice}
+          onChange={onChange}
+          className={styles.state}
+        />
+      </div>
+      <TextField
+        name={`${basename}.zipcode`}
+        label={labels ? labels.zipcode : defaultLabels.zipcode}
+        type="text"
+        inputMode="numeric"
+        data-testid={`${basename}.zipcode`}
+        className={styles.zipcode}
+        onChange={onChange}
+      />
+    </FormGroup>
+  )
+}
+
+export default Address

src/components/form/fields/DropdownField/DropdownField.tsx

@@ -4,12 +4,11 @@ import {
   FormGroup,
   Label,
 } from '@trussworks/react-uswds'
+import { EMPTY_DROPDOWN_OPTION } from 'constants/formOptions'
 import React, { ChangeEventHandler, FocusEventHandler } from 'react'
 import { useController } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 
-export const EMPTY_DROPDOWN_OPTION = ''
-
 const mapOptions = (options: DropdownOption[]) => {
   return options.map(({ label, value }, index) => (
     <option key={`${index}_${label}_${value}`} value={value}>

src/components/form/fields/PhoneNumberField/PhoneNumberField.stories.tsx

@@ -0,0 +1,45 @@
+import { yupResolver } from '@hookform/resolvers/yup'
+import { Meta, StoryFn } from '@storybook/react'
+import { noop } from 'helpers/noop/noop'
+import { FormProvider, useForm } from 'react-hook-form'
+import { PhoneInput } from 'types/input'
+import { yupPhone } from 'validations/phone'
+import * as yup from 'yup'
+
+import { PhoneNumberField } from './PhoneNumberField'
+
+export default {
+  title: 'Components/Form/PhoneNumberField',
+  component: PhoneNumberField,
+} as Meta<typeof PhoneNumberField>
+
+const Template: StoryFn<typeof PhoneNumberField> = (args) => {
+  const initialValues = {
+    [args.name]: {
+      number: '',
+      sms: true,
+    },
+  }
+
+  const validationSchema = yup
+    .object()
+    .shape({ [args.name]: yupPhone(true, true) })
+  const hookFormMethods = useForm<PhoneInput>({
+    defaultValues: initialValues,
+    resolver: yupResolver(validationSchema),
+  })
+
+  return (
+    <FormProvider {...hookFormMethods}>
+      <form onSubmit={noop}>
+        <PhoneNumberField {...args} />
+      </form>
+    </FormProvider>
+  )
+}
+
+export const Default = Template.bind({})
+Default.args = {
+  name: 'sample_phone',
+  label: 'Enter your phone number:',
+}

src/components/form/fields/PhoneNumberField/PhoneNumberField.tsx

@@ -0,0 +1,46 @@
+import { ChangeEventHandler, ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import TextField from '../TextField/TextField'
+import { YesNoQuestion } from '../YesNoQuestion/YesNoQuestion'
+
+type PhoneNumberFieldProps = {
+  id?: string
+  name: string
+  label: ReactNode
+  showSMS?: boolean
+  onChange?: ChangeEventHandler<HTMLInputElement>
+}
+
+export const PhoneNumberField = ({
+  id: idProp,
+  name,
+  label,
+  showSMS = true,
+  onChange,
+}: PhoneNumberFieldProps) => {
+  const { t } = useTranslation('components', {
+    keyPrefix: 'phoneNumberField',
+  })
+
+  const id = idProp || name
+
+  return (
+    <>
+      <TextField
+        id={`${id}.number`}
+        name={`${name}.number`}
+        label={label}
+        type="tel"
+        onChange={onChange}
+      />
+      {showSMS && (
+        <YesNoQuestion
+          question={t('sms.label')}
+          hint={t('sms.help_text')}
+          name={`${name}.sms`}
+        />
+      )}
+    </>
+  )
+}

src/components/form/fields/StatesDropdown/StatesDropdown.tsx

@@ -0,0 +1,42 @@
+import DropdownField from 'components/form/fields/DropdownField/DropdownField'
+import { statesAndTerritories } from 'fixtures/states_and_territories'
+import { ComponentProps } from 'react'
+
+export type StateAbbrev = keyof typeof statesAndTerritories
+
+type DropdownProps = ComponentProps<typeof DropdownField>
+
+type StatesDropdownProps = {
+  stateSlice?: StateAbbrev[]
+} & Omit<DropdownProps, 'options'>
+
+const allStates = Object.entries(statesAndTerritories).map(([key, value]) => ({
+  label: value,
+  value: key,
+}))
+
+export const StatesDropdown = ({
+  label,
+  id,
+  name,
+  startEmpty,
+  stateSlice,
+  className,
+  ...remainingProps
+}: StatesDropdownProps) => (
+  <DropdownField
+    label={label}
+    id={id}
+    name={name}
+    startEmpty={startEmpty}
+    options={
+      stateSlice
+        ? allStates.filter((opt) =>
+            stateSlice.includes(opt.value as StateAbbrev)
+          )
+        : allStates
+    }
+    className={className}
+    {...remainingProps}
+  />
+)

src/constants/formOptions.ts

@@ -0,0 +1,5 @@
+export const UNTOUCHED_RADIO_VALUE = undefined
+export type UntouchedRadioValue = typeof UNTOUCHED_RADIO_VALUE
+
+export const EMPTY_DROPDOWN_OPTION = '' as const
+export type EmptyOption = typeof EMPTY_DROPDOWN_OPTION

src/dev/example-form.stories.tsx

@@ -1,23 +1,23 @@
 import { yupResolver } from '@hookform/resolvers/yup'
 import { Meta, StoryObj } from '@storybook/react'
-import { DateInputField } from 'components/form/fields/DateInputField/DateInputField'
 import CheckboxField from 'components/form/fields/CheckboxField/CheckboxField'
 import { CheckboxGroupField } from 'components/form/fields/CheckboxGroupField/CheckboxGroupField'
-import DropdownField, {
-  EMPTY_DROPDOWN_OPTION,
-} from 'components/form/fields/DropdownField/DropdownField'
+import { DateInputField } from 'components/form/fields/DateInputField/DateInputField'
+import DropdownField from 'components/form/fields/DropdownField/DropdownField'
 import { RadioField } from 'components/form/fields/RadioField/RadioField'
 import TextField from 'components/form/fields/TextField/TextField'
 import { YesNoQuestion } from 'components/form/fields/YesNoQuestion/YesNoQuestion'
 import { ImportedField } from 'components/ImportedInputBox/ImportedField/ImportedField'
 import { ImportedInputBox } from 'components/ImportedInputBox/ImportedInputBox'
+import { EMPTY_DROPDOWN_OPTION } from 'constants/formOptions'
 import { ChangeEventHandler } from 'react'
 import {
   FormProvider,
   SubmitErrorHandler,
   SubmitHandler,
   useForm,
 } from 'react-hook-form'
+import { YesNoInput } from 'types/input'
 import { yupDate } from 'utils/validations/date'
 import * as yup from 'yup'
 import { mixed } from 'yup'
@@ -53,7 +53,7 @@ const schema = yup
   .required()
 
 type ExampleFieldValues = {
-  doYouLikeForms?: boolean
+  doYouLikeForms?: YesNoInput
   formLibraryPreference?: FormLibraryPreferenceOption
   whyIsFormikBad?: string
   subscribe?: boolean

src/fixtures/provinces.json

@@ -0,0 +1,12 @@
+{
+  "AB": "Alberta",
+  "BC": "British Columbia",
+  "MB": "Manitoba",
+  "NB": "New Brunswick",
+  "NL": "Newfoundland and Labrador",
+  "NS": "Nova Scotia",
+  "ON": "Ontario",
+  "PE": "Prince Edward Island",
+  "QC": "Quebec",
+  "SK": "Saskatchewan"
+}