feat: uptake field value v2

sites/partners/package.json

@@ -29,7 +29,7 @@
     "@bloom-housing/backend-core": "^7.13.0",
     "@bloom-housing/shared-helpers": "^7.7.1",
     "@bloom-housing/ui-components": "12.0.15",
-    "@bloom-housing/ui-seeds": "^1.2.1",
+    "@bloom-housing/ui-seeds": "^1.7.4",
     "@mapbox/mapbox-sdk": "^0.13.0",
     "ag-grid-community": "^26.0.0",
     "ag-grid-react": "^26.0.0",

sites/partners/src/components/applications/PaperApplicationDetails/DetailsAddressColumns.tsx

@@ -1,9 +1,10 @@
-import { t, GridCell, ViewItem } from "@bloom-housing/ui-components"
+import { t, GridCell } from "@bloom-housing/ui-components"
 import {
   Application,
   HouseholdMemberUpdate,
   AddressCreate,
 } from "@bloom-housing/backend-core/types"
+import { FieldValue } from "@bloom-housing/ui-seeds"
 import { YesNoAnswer } from "../../../lib/helpers"
 
 type DetailsAddressColumnsProps = {
@@ -90,36 +91,36 @@ const DetailsAddressColumns = ({
   return (
     <>
       <GridCell>
-        <ViewItem
+        <FieldValue
           label={t("application.contact.streetAddress")}
-          dataTestId={`${dataTestId}.streetAddress`}
+          testId={`${dataTestId}.streetAddress`}
         >
           {address.street}
-        </ViewItem>
+        </FieldValue>
       </GridCell>
 
       <GridCell span={2}>
-        <ViewItem label={t("application.contact.apt")} dataTestId={`${dataTestId}.street2`}>
+        <FieldValue label={t("application.contact.apt")} testId={`${dataTestId}.street2`}>
           {address.street2}
-        </ViewItem>
+        </FieldValue>
       </GridCell>
 
       <GridCell>
-        <ViewItem label={t("application.contact.city")} dataTestId={`${dataTestId}.city`}>
+        <FieldValue label={t("application.contact.city")} testId={`${dataTestId}.city`}>
           {address.city}
-        </ViewItem>
+        </FieldValue>
       </GridCell>
 
       <GridCell>
-        <ViewItem label={t("application.contact.state")} dataTestId={`${dataTestId}.state`}>
+        <FieldValue label={t("application.contact.state")} testId={`${dataTestId}.state`}>
           {address.state}
-        </ViewItem>
+        </FieldValue>
       </GridCell>
 
       <GridCell>
-        <ViewItem label={t("application.contact.zip")} dataTestId={`${dataTestId}.zipCode`}>
+        <FieldValue label={t("application.contact.zip")} testId={`${dataTestId}.zipCode`}>
           {address.zipCode}
-        </ViewItem>
+        </FieldValue>
       </GridCell>
     </>
   )

sites/partners/src/components/applications/PaperApplicationDetails/DetailsMemberDrawer.tsx

@@ -1,12 +1,6 @@
 import React from "react"
-import {
-  AppearanceStyleType,
-  t,
-  GridSection,
-  ViewItem,
-  Button,
-  Drawer,
-} from "@bloom-housing/ui-components"
+import { AppearanceStyleType, t, GridSection, Button, Drawer } from "@bloom-housing/ui-components"
+import { FieldValue } from "@bloom-housing/ui-seeds"
 import { AddressColsType, DetailsAddressColumns } from "./DetailsAddressColumns"
 import { Application, HouseholdMemberUpdate } from "@bloom-housing/backend-core/types"
 import { YesNoAnswer } from "../../../lib/helpers"
@@ -39,22 +33,22 @@ const DetailsMemberDrawer = ({
           grid={false}
         >
           <GridSection grid columns={4}>
-            <ViewItem
+            <FieldValue
               label={t("application.name.firstName")}
               children={membersDrawer?.firstName || t("t.n/a")}
             />
 
-            <ViewItem
+            <FieldValue
               label={t("application.name.middleName")}
               children={membersDrawer?.middleName || t("t.n/a")}
             />
 
-            <ViewItem
+            <FieldValue
               label={t("application.name.lastName")}
               children={membersDrawer?.lastName || t("t.n/a")}
             />
 
-            <ViewItem
+            <FieldValue
               label={t("application.household.member.dateOfBirth")}
               children={
                 membersDrawer?.birthMonth && membersDrawer?.birthDay && membersDrawer?.birthYear
@@ -63,7 +57,7 @@ const DetailsMemberDrawer = ({
               }
             />
 
-            <ViewItem
+            <FieldValue
               label={t("application.add.sameAddressAsPrimary")}
               children={
                 membersDrawer?.sameAddress === YesNoAnswer.Yes
@@ -74,7 +68,7 @@ const DetailsMemberDrawer = ({
               }
             />
 
-            <ViewItem
+            <FieldValue
               label={t("application.add.workInRegion")}
               children={
                 membersDrawer?.workInRegion === YesNoAnswer.Yes
@@ -85,7 +79,7 @@ const DetailsMemberDrawer = ({
               }
             />
 
-            <ViewItem
+            <FieldValue
               label={t("t.relationship")}
               children={
                 membersDrawer?.relationship

sites/partners/src/components/applications/PaperApplicationDetails/sections/DetailsAlternateContact.tsx

@@ -1,5 +1,6 @@
 import React, { useContext } from "react"
-import { t, GridSection, ViewItem, GridCell } from "@bloom-housing/ui-components"
+import { t, GridSection, GridCell } from "@bloom-housing/ui-components"
+import { FieldValue } from "@bloom-housing/ui-seeds"
 import { ApplicationContext } from "../../ApplicationContext"
 import { DetailsAddressColumns, AddressColsType } from "../DetailsAddressColumns"
 
@@ -15,19 +16,19 @@ const DetailsAlternateContact = () => {
     >
       <GridSection columns={3}>
         <GridCell>
-          <ViewItem label={t("application.name.firstName")} dataTestId="alternateContact.firstName">
+          <FieldValue label={t("application.name.firstName")} testId="alternateContact.firstName">
             {application.alternateContact.firstName || t("t.n/a")}
-          </ViewItem>
+          </FieldValue>
         </GridCell>
 
         <GridCell>
-          <ViewItem label={t("application.name.lastName")} dataTestId="alternateContact.lastName">
+          <FieldValue label={t("application.name.lastName")} testId="alternateContact.lastName">
             {application.alternateContact.lastName || t("t.n/a")}
-          </ViewItem>
+          </FieldValue>
         </GridCell>
 
         <GridCell>
-          <ViewItem label={t("t.relationship")} dataTestId="relationship">
+          <FieldValue label={t("t.relationship")} testId="relationship">
             {(() => {
               if (!application.alternateContact.type) return t("t.n/a")
 
@@ -38,27 +39,27 @@ const DetailsAlternateContact = () => {
                 `application.alternateContact.type.options.${application.alternateContact.type}`
               )
             })()}
-          </ViewItem>
+          </FieldValue>
         </GridCell>
 
         {
           <GridCell>
-            <ViewItem label={t("application.details.agency")} dataTestId="alternateContact.agency">
+            <FieldValue label={t("application.details.agency")} testId="alternateContact.agency">
               {application.alternateContact.agency || t("t.n/a")}
-            </ViewItem>
+            </FieldValue>
           </GridCell>
         }
 
         <GridCell>
-          <ViewItem label={t("t.email")} dataTestId="alternateContact.emailAddress">
+          <FieldValue label={t("t.email")} testId="alternateContact.emailAddress">
             {application.alternateContact.emailAddress || t("t.n/a")}
-          </ViewItem>
+          </FieldValue>
         </GridCell>
 
         <GridCell>
-          <ViewItem label={t("t.phone")} dataTestId="alternateContact.phoneNumber">
+          <FieldValue label={t("t.phone")} testId="alternateContact.phoneNumber">
             {application.alternateContact.phoneNumber || t("t.n/a")}
-          </ViewItem>
+          </FieldValue>
         </GridCell>
       </GridSection>
 

sites/partners/src/components/applications/PaperApplicationDetails/sections/DetailsApplicationData.tsx

@@ -1,5 +1,6 @@
 import React, { useContext, useMemo } from "react"
-import { t, GridSection, ViewItem, GridCell } from "@bloom-housing/ui-components"
+import { t, GridSection, GridCell } from "@bloom-housing/ui-components"
+import { FieldValue } from "@bloom-housing/ui-seeds"
 import { ApplicationContext } from "../../ApplicationContext"
 import { convertDataToLocal } from "../../../../lib/helpers"
 import { ApplicationSubmissionType } from "@bloom-housing/backend-core/types"
@@ -23,49 +24,49 @@ const DetailsApplicationData = () => {
       inset
     >
       <GridCell>
-        <ViewItem label={t("application.details.number")} dataTestId="number">
+        <FieldValue label={t("application.details.number")} testId="number">
           {application.confirmationCode || application.id}
-        </ViewItem>
+        </FieldValue>
       </GridCell>
 
       {application.submissionType && (
         <GridCell>
-          <ViewItem label={t("application.details.type")} dataTestId="type">
+          <FieldValue label={t("application.details.type")} testId="type">
             {t(`application.details.submissionType.${application.submissionType}`)}
-          </ViewItem>
+          </FieldValue>
         </GridCell>
       )}
 
       <GridCell>
-        <ViewItem label={t("application.details.submittedDate")} dataTestId="submittedDate">
+        <FieldValue label={t("application.details.submittedDate")} testId="submittedDate">
           {applicationDate.date}
-        </ViewItem>
+        </FieldValue>
       </GridCell>
 
       <GridCell>
-        <ViewItem label={t("application.details.timeDate")} dataTestId="timeDate">
+        <FieldValue label={t("application.details.timeDate")} testId="timeDate">
           {applicationDate.time}
-        </ViewItem>
+        </FieldValue>
       </GridCell>
 
       <GridCell>
-        <ViewItem label={t("application.details.language")} dataTestId="language">
+        <FieldValue label={t("application.details.language")} testId="language">
           {application.language ? t(`languages.${application.language}`) : t("t.n/a")}
-        </ViewItem>
+        </FieldValue>
       </GridCell>
 
       <GridCell>
-        <ViewItem label={t("application.details.totalSize")} dataTestId="totalSize">
+        <FieldValue label={t("application.details.totalSize")} testId="totalSize">
           {!application.householdSize ? 1 : application.householdSize}
-        </ViewItem>
+        </FieldValue>
       </GridCell>
 
       <GridCell>
-        <ViewItem label={t("application.details.submittedBy")} dataTestId="submittedBy">
+        <FieldValue label={t("application.details.submittedBy")} testId="submittedBy">
           {application.applicant.firstName && application.applicant.lastName
             ? `${application.applicant.firstName} ${application.applicant.lastName}`
             : t("t.n/a")}
-        </ViewItem>
+        </FieldValue>
       </GridCell>
     </GridSection>
   )

sites/partners/src/components/applications/PaperApplicationDetails/sections/DetailsHouseholdDetails.tsx

@@ -1,5 +1,6 @@
 import React, { useContext, Fragment } from "react"
-import { t, GridSection, ViewItem, GridCell } from "@bloom-housing/ui-components"
+import { t, GridSection, GridCell } from "@bloom-housing/ui-components"
+import { FieldValue } from "@bloom-housing/ui-seeds"
 import { sortUnitTypes } from "@bloom-housing/shared-helpers"
 import { ApplicationContext } from "../../ApplicationContext"
 
@@ -25,10 +26,7 @@ const DetailsHouseholdDetails = () => {
       inset
     >
       <GridCell>
-        <ViewItem
-          label={t("application.details.preferredUnitSizes")}
-          dataTestId="preferredUnitSizes"
-        >
+        <FieldValue label={t("application.details.preferredUnitSizes")} testId="preferredUnitSizes">
           {(() => {
             if (!preferredUnits.length) return t("t.n/a")
 
@@ -39,37 +37,37 @@ const DetailsHouseholdDetails = () => {
               </Fragment>
             ))
           })()}
-        </ViewItem>
+        </FieldValue>
       </GridCell>
 
       <GridCell>
-        <ViewItem label={t("application.details.adaPriorities")} dataTestId="adaPriorities">
+        <FieldValue label={t("application.details.adaPriorities")} testId="adaPriorities">
           {accessibilityLabels(application.accessibility).map((item) => (
             <Fragment key={item}>
               {item}
               <br />
             </Fragment>
           ))}
-        </ViewItem>
+        </FieldValue>
       </GridCell>
       <GridCell>
-        <ViewItem
+        <FieldValue
           id="householdChanges"
           label={t("application.household.expectingChanges.title")}
-          dataTestId="expectingChanges"
+          testId="expectingChanges"
         >
           {application.householdExpectingChanges ? t("t.yes") : t("t.no")}
-        </ViewItem>
+        </FieldValue>
       </GridCell>
 
       <GridCell>
-        <ViewItem
+        <FieldValue
           id="householdStudent"
           label={t("application.household.householdStudent.title")}
-          dataTestId="householdStudent"
+          testId="householdStudent"
         >
           {application.householdStudent ? t("t.yes") : t("t.no")}
-        </ViewItem>
+        </FieldValue>
       </GridCell>
     </GridSection>
   )

sites/partners/src/components/applications/PaperApplicationDetails/sections/DetailsHouseholdIncome.tsx

@@ -1,5 +1,6 @@
 import React, { useContext } from "react"
-import { t, GridSection, ViewItem, GridCell } from "@bloom-housing/ui-components"
+import { t, GridSection, GridCell } from "@bloom-housing/ui-components"
+import { FieldValue } from "@bloom-housing/ui-seeds"
 import { ApplicationContext } from "../../ApplicationContext"
 import { IncomePeriod } from "@bloom-housing/backend-core/types"
 import { formatIncome } from "../../../../lib/helpers"
@@ -14,31 +15,31 @@ const DetailsHouseholdIncome = () => {
       inset
     >
       <GridCell>
-        <ViewItem label={t("application.details.annualIncome")} dataTestId="annualIncome">
+        <FieldValue label={t("application.details.annualIncome")} testId="annualIncome">
           {application.incomePeriod === IncomePeriod.perYear
             ? formatIncome(
                 parseFloat(application.income),
                 application.incomePeriod,
                 IncomePeriod.perYear
               )
             : t("t.n/a")}
-        </ViewItem>
+        </FieldValue>
       </GridCell>
 
       <GridCell>
-        <ViewItem label={t("application.details.monthlyIncome")} dataTestId="monthlyIncome">
+        <FieldValue label={t("application.details.monthlyIncome")} testId="monthlyIncome">
           {application.incomePeriod === IncomePeriod.perMonth
             ? formatIncome(
                 parseFloat(application.income),
                 application.incomePeriod,
                 IncomePeriod.perMonth
               )
             : t("t.n/a")}
-        </ViewItem>
+        </FieldValue>
       </GridCell>
 
       <GridCell>
-        <ViewItem label={t("application.details.vouchers")} dataTestId="vouchers">
+        <FieldValue label={t("application.details.vouchers")} testId="vouchers">
           {(() => {
             if (application.incomeVouchers === null) return t("t.n/a")
 
@@ -48,7 +49,7 @@ const DetailsHouseholdIncome = () => {
 
             return t("t.no")
           })()}
-        </ViewItem>
+        </FieldValue>
       </GridCell>
     </GridSection>
   )