Skip to content

Commit

Permalink
fix: incorporate latest design feedback (#134)
Browse files Browse the repository at this point in the history
  • Loading branch information
@emilyjablonski
emilyjablonski authored Nov 6, 2023
1 parent 27f57db commit f94a391
Showing 1 changed file with 102 additions and 101 deletions.
203 changes: 102 additions & 101 deletions src/helpers/preferences.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { UseFormMethods } from "react-hook-form"
import { t, GridSection, ViewItem, GridCell, Field, Select, resolveObject } from "../../"

type FormAddressProps = {
subtitle: string
subtitle?: string
dataKey: string
enableMailCheckbox?: boolean
register: UseFormMethods["register"]
Expand All @@ -23,110 +23,111 @@ export const FormAddress = ({
}: FormAddressProps) => {
return (
<>
<GridSection subtitle={subtitle}>
<GridCell span={2}>
<ViewItem label={t("application.contact.streetAddress")}>
<Field
id={`${dataKey}.street`}
name={`${dataKey}.street`}
label={t("application.contact.streetAddress")}
placeholder={t("application.contact.streetAddress")}
register={register}
validation={{ required, maxLength: 64 }}
error={!!resolveObject(`${dataKey}.street`, errors)}
errorMessage={
resolveObject(`${dataKey}.street`, errors)?.type === "maxLength"
? t("errors.maxLength")
: t("errors.streetError")
}
readerOnly
/>
</ViewItem>
</GridCell>
<GridCell>
<ViewItem label={t("application.contact.apt")}>
<Field
id={`${dataKey}.street2`}
name={`${dataKey}.street2`}
label={t("application.contact.apt")}
placeholder={t("application.contact.apt")}
register={register}
readerOnly
error={!!resolveObject(`${dataKey}.street2`, errors)}
validation={{ maxLength: 64 }}
errorMessage={t("errors.maxLength")}
/>
</ViewItem>
</GridCell>

<GridCell>
<ViewItem label={t("application.contact.city")}>
<Field
id={`${dataKey}.city`}
name={`${dataKey}.city`}
label={t("application.contact.cityName")}
placeholder={t("application.contact.cityName")}
register={register}
validation={{ required, maxLength: 64 }}
error={!!resolveObject(`${dataKey}.city`, errors)}
errorMessage={
resolveObject(`${dataKey}.city`, errors)?.type === "maxLength"
? t("errors.maxLength")
: t("errors.cityError")
}
readerOnly
/>
</ViewItem>
</GridCell>
<fieldset>
<legend className={`text__caps-spaced ${!subtitle ? "sr-only" : ""}`}>
{!subtitle ? t("application.preferences.options.address") : subtitle}
</legend>
<GridSection>
<GridCell span={2}>
<ViewItem label={t("application.contact.streetAddress")}>
<Field
id={`${dataKey}.street`}
name={`${dataKey}.street`}
label={t("application.contact.streetAddress")}
register={register}
validation={{ required, maxLength: 64 }}
error={!!resolveObject(`${dataKey}.street`, errors)}
errorMessage={
resolveObject(`${dataKey}.street`, errors)?.type === "maxLength"
? t("errors.maxLength")
: t("errors.streetError")
}
readerOnly
/>
</ViewItem>
</GridCell>
<GridCell>
<ViewItem label={t("application.contact.apt")}>
<Field
id={`${dataKey}.street2`}
name={`${dataKey}.street2`}
label={t("application.contact.apt")}
register={register}
readerOnly
error={!!resolveObject(`${dataKey}.street2`, errors)}
validation={{ maxLength: 64 }}
errorMessage={t("errors.maxLength")}
/>
</ViewItem>
</GridCell>

<GridCell className="md:grid md:grid-cols-2 md:gap-8" span={2}>
<ViewItem label={t("application.contact.state")} className="mb-0">
<Select
id={`${dataKey}.state`}
name={`${dataKey}.state`}
label={t("application.contact.state")}
labelClassName="sr-only"
register={register}
controlClassName="control"
options={stateKeys}
keyPrefix="states"
validation={{ required }}
error={!!resolveObject(`${dataKey}.state`, errors)}
errorMessage={t("errors.stateError")}
/>
</ViewItem>
<GridCell>
<ViewItem label={t("application.contact.city")}>
<Field
id={`${dataKey}.city`}
name={`${dataKey}.city`}
label={t("application.contact.city")}
register={register}
validation={{ required, maxLength: 64 }}
error={!!resolveObject(`${dataKey}.city`, errors)}
errorMessage={
resolveObject(`${dataKey}.city`, errors)?.type === "maxLength"
? t("errors.maxLength")
: t("errors.cityError")
}
readerOnly
/>
</ViewItem>
</GridCell>

<ViewItem label={t("application.contact.zip")}>
<Field
id={`${dataKey}.zipCode`}
name={`${dataKey}.zipCode`}
label={t("application.contact.zip")}
placeholder={t("application.contact.zipCode")}
register={register}
validation={{ required, maxLength: 64 }}
error={!!resolveObject(`${dataKey}.zipCode`, errors)}
errorMessage={
resolveObject(`${dataKey}.zipCode`, errors)?.type === "maxLength"
? t("errors.maxLength")
: t("errors.zipCodeError")
}
readerOnly
/>
</ViewItem>
</GridCell>
<GridCell className="md:grid md:grid-cols-2 md:gap-8" span={2}>
<ViewItem label={t("application.contact.state")} className="mb-0">
<Select
id={`${dataKey}.state`}
name={`${dataKey}.state`}
label={t("application.contact.state")}
labelClassName="sr-only"
register={register}
controlClassName="control"
options={stateKeys}
keyPrefix="states"
validation={{ required }}
error={!!resolveObject(`${dataKey}.state`, errors)}
errorMessage={t("errors.stateError")}
/>
</ViewItem>

{enableMailCheckbox && (
<GridCell span={2}>
<Field
id="application.sendMailToMailingAddress"
name="application.sendMailToMailingAddress"
type="checkbox"
label={t("application.contact.sendMailToMailingAddress")}
register={register}
/>
<ViewItem label={t("application.contact.zip")}>
<Field
id={`${dataKey}.zipCode`}
name={`${dataKey}.zipCode`}
label={t("application.contact.zip")}
register={register}
validation={{ required, maxLength: 64 }}
error={!!resolveObject(`${dataKey}.zipCode`, errors)}
errorMessage={
resolveObject(`${dataKey}.zipCode`, errors)?.type === "maxLength"
? t("errors.maxLength")
: t("errors.zipCodeError")
}
readerOnly
/>
</ViewItem>
</GridCell>
)}
</GridSection>

{enableMailCheckbox && (
<GridCell span={2}>
<Field
id="application.sendMailToMailingAddress"
name="application.sendMailToMailingAddress"
type="checkbox"
label={t("application.contact.sendMailToMailingAddress")}
register={register}
/>
</GridCell>
)}
</GridSection>
</fieldset>
</>
)
}

0 comments on commit f94a391

Please sign in to comment.