Skip to content

Commit

Permalink
fix: public site style updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@emilyjablonski
emilyjablonski committed Jun 23, 2023
1 parent e68b934 commit d6f4680
Show file tree
Hide file tree
Showing 5 changed files with 87 additions and 46 deletions.
9 changes: 1 addition & 8 deletions sites/partners/src/components/listings/PaperListingForm/sections/Units.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,14 +176,7 @@ const FormUnits = ({ units, setUnits, disableUnitsAccordion }: UnitProps) => {
</FieldValue>
</GridCell>
<GridCell>
<FieldValue
label={t("listings.listingAvailabilityQuestion")}
className={`mb-1 ${
fieldHasError(errors?.listingAvailability) &&
listingAvailability === null &&
"text-alert"
}`}
>
<FieldValue label={t("listings.listingAvailabilityQuestion")} className={"mb-1"}>
<FieldGroup
name="listingAvailabilityQuestion"
type="radio"
Expand Down
2 changes: 1 addition & 1 deletion sites/public/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
"@bloom-housing/backend-core": "^7.13.0",
"@bloom-housing/shared-helpers": "^7.7.1",
"@bloom-housing/ui-components": "^12.0.9",
"@bloom-housing/ui-seeds": "^1.6.0",
"@bloom-housing/ui-seeds": "^1.7.1",
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-regular-svg-icons": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
Expand Down
46 changes: 25 additions & 21 deletions sites/public/src/components/applications/HouseholdMemberForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,27 +18,31 @@ const HouseholdMemberForm = (props: HouseholdMemberFormProps) => {
const editMode = props.editMode !== false && props.editMember // undefined should default to true

return (
<FieldValue helper={props.subtitle} className="pb-4 border-b text-left">
{props.memberFirstName} {props.memberLastName}
{editMode ? (
<button
id={`edit-member-${props.memberFirstName}-${props.memberLastName}`}
className="edit-link"
onClick={() => props.editMember && props.editMember(props.memberId)}
type={"button"}
data-testid={"app-household-member-edit-button"}
>
{props.strings?.edit ?? t("t.edit")}
</button>
) : (
<Icon
className="ml-2 absolute top-0 right-0"
size="medium"
symbol="lock"
fill={IconFillColors.primary}
/>
)}
</FieldValue>
<div className="flex justify-between flex-row border-b">
<FieldValue helpText={props.subtitle} className="py-4 text-left">
{props.memberFirstName} {props.memberLastName}
</FieldValue>
<div>
{editMode ? (
<button
id={`edit-member-${props.memberFirstName}-${props.memberLastName}`}
className="edit-link pt-4"
onClick={() => props.editMember && props.editMember(props.memberId)}
type={"button"}
data-testid={"app-household-member-edit-button"}
>
{props.strings?.edit ?? t("t.edit")}
</button>
) : (
<Icon
className="ml-2 pt-4 block"
size="medium"
symbol="lock"
fill={IconFillColors.primary}
/>
)}
</div>
</div>
)
}

Expand Down
74 changes: 59 additions & 15 deletions sites/public/src/components/shared/FormSummaryDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,9 +134,10 @@ const FormSummaryDetails = ({
.map((option: ApplicationMultiselectQuestionOption, index) => (
<FieldValue
label={question.key}
helper={multiselectQuestionAddress(option?.extraData)}
helpText={multiselectQuestionAddress(option?.extraData)}
key={index}
data-testid={"app-summary-preference"}
className={"pb-4"}
>
{option.key}
</FieldValue>
Expand Down Expand Up @@ -164,7 +165,12 @@ const FormSummaryDetails = ({
</h3>

<div className="form-card__group mx-0">
<FieldValue data-testid={"app-summary-name"} id="applicantName" label={t("t.name")}>
<FieldValue
data-testid={"app-summary-name"}
id="applicantName"
label={t("t.name")}
className={"pb-4"}
>
{application.applicant.firstName} {application.applicant.middleName}{" "}
{application.applicant.lastName}
</FieldValue>
Expand All @@ -173,6 +179,7 @@ const FormSummaryDetails = ({
data-testid={"app-summary-dob"}
id="applicantbirthDay"
label={t("application.household.member.dateOfBirth")}
className={"pb-4"}
>
{application.applicant.birthMonth}/{application.applicant.birthDay}/
{application.applicant.birthYear}
Expand All @@ -183,9 +190,10 @@ const FormSummaryDetails = ({
data-testid={"app-summary-phone"}
id="applicantPhone"
label={t("t.phone")}
helper={t(
helpText={t(
`application.contact.phoneNumberTypes.${application.applicant.phoneNumberType}`
)}
className={"pb-4"}
>
{application.applicant.phoneNumber}
</FieldValue>
Expand All @@ -196,29 +204,43 @@ const FormSummaryDetails = ({
data-testid={"app-summary-additional-phone"}
id="applicantAdditionalPhone"
label={t("t.additionalPhone")}
helper={t(
helpText={t(
`application.contact.phoneNumberTypes.${application.additionalPhoneNumberType}`
)}
className={"pb-4"}
>
{application.additionalPhoneNumber}
</FieldValue>
)}

{application.applicant.emailAddress && (
<FieldValue data-testid={"app-summary-email"} id="applicantEmail" label={t("t.email")}>
<FieldValue
data-testid={"app-summary-email"}
id="applicantEmail"
label={t("t.email")}
className={"pb-4"}
>
{application.applicant.emailAddress}
</FieldValue>
)}

<FieldValue id="applicantAddress" label={t("application.contact.address")}>
<FieldValue
id="applicantAddress"
label={t("application.contact.address")}
className={"pb-4"}
>
<MultiLineAddress
data-testid={"app-summary-address"}
address={reformatAddress(application.applicant.address)}
/>
</FieldValue>

{application.sendMailToMailingAddress && (
<FieldValue id="applicantMailingAddress" label={t("application.contact.mailingAddress")}>
<FieldValue
id="applicantMailingAddress"
label={t("application.contact.mailingAddress")}
className={"pb-4"}
>
<MultiLineAddress
data-testid={"app-summary-mailing-address"}
address={reformatAddress(application.mailingAddress)}
Expand All @@ -227,7 +249,11 @@ const FormSummaryDetails = ({
)}

{application.applicant.workInRegion === "yes" && (
<FieldValue id="applicantWorkAddress" label={t("application.contact.workAddress")}>
<FieldValue
id="applicantWorkAddress"
label={t("application.contact.workAddress")}
className={"pb-4"}
>
<MultiLineAddress
data-testid={"app-summary-work-address"}
address={reformatAddress(application.applicant.workAddress)}
Expand All @@ -240,6 +266,7 @@ const FormSummaryDetails = ({
data-testid={"app-summary-contact-type"}
id="applicantPreferredContactType"
label={t("application.contact.preferredContactType")}
className={"pb-4"}
>
{application.contactPreferences?.map((item) => t(`t.${item}`)).join(", ")}
</FieldValue>
Expand All @@ -264,7 +291,8 @@ const FormSummaryDetails = ({
data-testid={"app-summary-alternate-name"}
id="alternateName"
label={t("t.name")}
helper={alternateContactName()}
helpText={alternateContactName()}
className={"pb-4"}
>
{application.alternateContact.firstName} {application.alternateContact.lastName}
</FieldValue>
Expand All @@ -274,6 +302,7 @@ const FormSummaryDetails = ({
data-testid={"app-summary-alternate-email"}
id="alternateEmail"
label={t("t.email")}
className={"pb-4"}
>
{application.alternateContact.emailAddress}
</FieldValue>
Expand All @@ -284,6 +313,7 @@ const FormSummaryDetails = ({
data-testid={"app-summary-alternate-phone"}
id="alternatePhone"
label={t("t.phone")}
className={"pb-4"}
>
{application.alternateContact.phoneNumber}
</FieldValue>
Expand All @@ -296,6 +326,7 @@ const FormSummaryDetails = ({
data-testid={"app-summary-alternate-mailing-address"}
id="alternateMailingAddress"
label={t("application.contact.address")}
className={"pb-4"}
>
<MultiLineAddress address={application.alternateContact.mailingAddress} />
</FieldValue>
Expand All @@ -319,29 +350,32 @@ const FormSummaryDetails = ({
className="info-group__item"
key={`${member.firstName} - ${member.lastName} - ${index}`}
>
<FieldValue data-testid={"app-summary-household-member-name"}>
<FieldValue data-testid={"app-summary-household-member-name"} className={"pb-4"}>
{member.firstName} {member.lastName}
</FieldValue>
<div>
<FieldValue
data-testid={"app-summary-household-member-dob"}
label={t("application.household.member.dateOfBirth")}
className={"pb-4"}
>
{member.birthMonth}/{member.birthDay}/{member.birthYear}
</FieldValue>
{member.sameAddress === "no" && (
<FieldValue label={t("application.contact.address")}>
<FieldValue label={t("application.contact.address")} className={"pb-4"}>
<MultiLineAddress
data-testid={"app-summary-household-member-address"}
address={reformatAddress(member.address)}
/>
</FieldValue>
)}
{member.sameAddress !== "no" && (
<FieldValue
<p
data-testid={"app-summary-household-member-same-address"}
label={t("application.review.sameAddressAsApplicant")}
></FieldValue>
className={"text-xs text-gray-750"}
>
{t("application.review.sameAddressAsApplicant")}
</p>
)}
</div>
</div>
Expand All @@ -364,6 +398,7 @@ const FormSummaryDetails = ({
data-testid={"app-summary-preferred-units"}
id="householdUnitType"
label={t("application.household.preferredUnit.preferredUnitType")}
className={"pb-4"}
>
{preferredUnits
?.map((item) => t(`application.household.preferredUnit.options.${item}`))
Expand All @@ -374,6 +409,7 @@ const FormSummaryDetails = ({
data-testid={"app-summary-ada"}
id="householdAda"
label={t("application.ada.label")}
className={"pb-4"}
>
{accessibilityLabels(application.accessibility).map((item) => (
<Fragment key={item}>
Expand All @@ -385,12 +421,14 @@ const FormSummaryDetails = ({
<FieldValue
id="householdChanges"
label={t("application.household.expectingChanges.title")}
className={"pb-4"}
>
{application.householdExpectingChanges ? t("t.yes") : t("t.no")}
</FieldValue>
<FieldValue
id="householdStudent"
label={t("application.household.householdStudent.title")}
className={"pb-4"}
>
{application.householdStudent ? t("t.yes") : t("t.no")}
</FieldValue>
Expand Down Expand Up @@ -418,12 +456,18 @@ const FormSummaryDetails = ({
data-testid={"app-summary-income-vouchers"}
id="incomeVouchers"
label={t("application.review.voucherOrSubsidy")}
className={"pb-4"}
>
{application.incomeVouchers ? t("t.yes") : t("t.no")}
</FieldValue>

{application.incomePeriod && (
<FieldValue data-testid={"app-summary-income"} id="incomeValue" label={t("t.income")}>
<FieldValue
data-testid={"app-summary-income"}
id="incomeValue"
label={t("t.income")}
className={"pb-4"}
>
${application.income} {t(`t.${application.incomePeriod}`)}
</FieldValue>
)}
Expand Down
2 changes: 1 addition & 1 deletion sites/public/src/pages/applications/household/add-members.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ const ApplicationAddMembers = () => {
validate={true}
/>
</div>
<div className="form-card__group my-0 mx-0 pb-4 pt-4">
<div className="form-card__group my-0 mx-0 pb-4 pt-0">
<HouseholdMemberForm
editMember={editMember}
editMode={!application.autofilled}
Expand Down

0 comments on commit d6f4680

Please sign in to comment.