@bloom-housing/ui-components 3.0.1-alpha.14 → 3.0.1-alpha.18

package/.jest/setup-tests.js

@@ -1,4 +1,5 @@
 import "@testing-library/jest-dom/extend-expect"
+import { configure } from "@testing-library/dom"
 
 import { addTranslation } from "../src/helpers/translator"
 import general from "../src/locales/general.json"
@@ -18,3 +19,5 @@ window.matchMedia = jest.fn().mockImplementation((query) => {
 })
 
 addTranslation(general)
+
+configure({ testIdAttribute: "data-test-id" })

package/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.1-alpha.18](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.17...@bloom-housing/ui-components@3.0.1-alpha.18) (2021-11-23)
+
+
+### Features
+
+* new demographics sub-race questions ([#2109](https://github.com/bloom-housing/bloom/issues/2109)) ([9ab8926](https://github.com/bloom-housing/bloom/commit/9ab892694c1ad2fa8890b411b3b32af68ade1fc3))
+
+
+
+
+
+## [3.0.1-alpha.17](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.16...@bloom-housing/ui-components@3.0.1-alpha.17) (2021-11-22)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [3.0.1-alpha.16](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.15...@bloom-housing/ui-components@3.0.1-alpha.16) (2021-11-22)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [3.0.1-alpha.15](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.14...@bloom-housing/ui-components@3.0.1-alpha.15) (2021-11-16)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
 ## [3.0.1-alpha.14](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.13...@bloom-housing/ui-components@3.0.1-alpha.14) (2021-11-16)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "3.0.1-alpha.14",
+  "version": "3.0.1-alpha.18",
   "author": "Sean Albert <sean.albert@exygy.com>",
   "description": "Shared user interface components for Bloom affordable housing system",
   "homepage": "https://github.com/bloom-housing/bloom/tree/master/shared/ui-components",
@@ -102,5 +102,5 @@
   "peerDependencies": {
     "@bloom-housing/backend-core": ">= 2.0.0-pre-tailwind"
   },
-  "gitHead": "410184fa2d0a748f9b84015502a37ba60d4c3e02"
+  "gitHead": "dfc1e8d88a9a0fe4e247b3355b4175a6d3b68a5a"
 }

package/src/forms/FieldGroup.tsx

@@ -1,14 +1,22 @@
-import React from "react"
+import React, { useState, useEffect } from "react"
+import { ExpandableContent } from "../actions/ExpandableContent"
 import { ErrorMessage } from "../notifications/ErrorMessage"
 import { UseFormMethods } from "react-hook-form"
+import { Field } from "./Field"
+import { t } from "../helpers/translator"
 
 interface FieldSingle {
   id: string
   label: string
   value?: string
   defaultChecked?: boolean
+  description?: React.ReactNode
+  defaultText?: string
   note?: string
   inputProps?: Record<string, unknown>
+  subFields?: FieldSingle[]
+  type?: string
+  additionalText?: boolean
 }
 
 interface FieldGroupProps {
@@ -49,6 +57,87 @@ const FieldGroup = ({
     fieldGroupClassName = `${fieldGroupClassName} flex`
     fieldClassName = `${fieldClassName} flex-initial mr-4`
   }
+
+  const [checkedInputs, setCheckedInputs] = useState<string[]>([])
+
+  const subfieldsExist = () => {
+    return fields?.filter((field) => field.subFields).length
+  }
+
+  const getIndividualInput = (item: FieldSingle): React.ReactNode => {
+    return (
+      <div key={item.value}>
+        <input
+          aria-describedby={`${name}-error`}
+          aria-invalid={!!error || false}
+          type={type}
+          id={item.id}
+          defaultValue={item.value || item.id}
+          name={subfieldsExist() ? `${name}-${item.value}` : name}
+          onClick={(e) => {
+            // We cannot reliably target an individual checkbox in a field group since they have the same name, so we keep track on our own
+            if (e.currentTarget.checked) {
+              setCheckedInputs([...checkedInputs, item.label])
+            } else {
+              setCheckedInputs(checkedInputs.filter((subset) => item.label !== subset))
+            }
+          }}
+          defaultChecked={item.defaultChecked || false}
+          ref={register(validation)}
+          {...item.inputProps}
+          data-test-id={dataTestId}
+        />
+        <label htmlFor={item.id} className={`font-semibold ${fieldLabelClassName}`}>
+          {item.label}
+        </label>
+        {item.note && <span className={"field-note font-normal"}>{item.note}</span>}
+
+        {item.description && (
+          <div className="ml-8 -mt-1 mb-5">
+            <ExpandableContent>
+              <p className="field-note mb-2 -mt-2">{item.description}</p>
+            </ExpandableContent>
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  const checkSelected = (formFields: FieldSingle[] | undefined, checkedValues: string[]) => {
+    formFields?.forEach((field) => {
+      if (field.defaultChecked) {
+        checkedValues.push(field.label)
+      }
+      if (field.subFields) {
+        checkSelected(field.subFields, checkedValues)
+      }
+    })
+  }
+
+  useEffect(() => {
+    const initialValues: string[] = []
+    checkSelected(fields, initialValues)
+    setCheckedInputs([...initialValues])
+  }, [])
+
+  const getInputSet = (item: FieldSingle): React.ReactNode => {
+    return (
+      <div key={item.value}>
+        {getIndividualInput(item)}
+        {item.additionalText && checkedInputs.indexOf(item.label) >= 0 && (
+          <Field
+            id={item.id}
+            key={`${item.value}-additionalText`}
+            name={`${name}-${item.value}`}
+            register={register}
+            defaultValue={item.defaultText}
+            placeholder={t("t.description")}
+            className={"mb-4"}
+          />
+        )}
+      </div>
+    )
+  }
   return (
     <>
       {groupLabel && <label className="field-label--caps">{groupLabel}</label>}
@@ -57,22 +146,14 @@ const FieldGroup = ({
       <div className={`field ${error && "error"} ${fieldGroupClassName || ""} mb-0`}>
         {fields?.map((item) => (
           <div className={`field ${fieldClassName || ""} mb-1`} key={item.id}>
-            <input
-              aria-describedby={`${name}-error`}
-              aria-invalid={!!error || false}
-              type={type}
-              id={item.id}
-              defaultValue={item.value || item.id}
-              name={name}
-              defaultChecked={item.defaultChecked || false}
-              ref={register(validation)}
-              {...item.inputProps}
-              data-test-id={dataTestId}
-            />
-            <label htmlFor={item.id} className={`font-semibold ${fieldLabelClassName}`}>
-              {item.label}
-            </label>
-            {item.note && <span className={"field-note font-normal"}>{item.note}</span>}
+            {getInputSet(item)}
+            {item.subFields && checkedInputs.indexOf(item.label) >= 0 && (
+              <div className={"ml-8"} key={`${item.value}-subfields`}>
+                {item.subFields?.map((subItem) => {
+                  return getInputSet(subItem)
+                })}
+              </div>
+            )}
           </div>
         ))}
       </div>

package/src/forms/Select.tsx

@@ -63,6 +63,7 @@ export const Select = ({
           data-test-id={dataTestId}
           aria-describedby={describedBy ? describedBy : `${id}-error`}
           aria-invalid={!!error || false}
+          aria-label={label}
           ref={register && register(validation)}
           disabled={disabled}
           defaultValue={defaultValue ?? ""}

package/src/helpers/blankApplication.ts

@@ -3,6 +3,7 @@ import {
   ApplicationSubmissionType,
   Language,
   ApplicationPreference,
+  ApplicationProgram,
 } from "@bloom-housing/backend-core/types"
 
 export const blankApplication = () => {
@@ -99,12 +100,13 @@ export const blankApplication = () => {
     preferredUnit: [],
     demographics: {
       ethnicity: "",
-      race: "",
+      race: [],
       gender: "",
       sexualOrientation: "",
       howDidYouHear: [],
     },
     preferences: [] as ApplicationPreference[],
+    programs: [] as ApplicationProgram[],
     confirmationCode: "",
     id: "",
   }

package/src/locales/general.json

@@ -144,6 +144,7 @@
       "agency": "Agency if Applicable",
       "adaPriorities": "ADA Priorities Selected",
       "preferences": "Application Preferences",
+      "programs": "Application Programs",
       "liveOrWorkIn": "Live or Work in",
       "householdIncome": "Declared Household Income",
       "annualIncome": "Annual Income",
@@ -378,6 +379,49 @@
         "legend": "Housing vouchers, nontaxable income or rental subsidies"
       }
     },
+    "programs": {
+      "servedInMilitary": {
+        "summary": "Veteran of the US Military",
+        "servedInMilitary": {
+          "label": "Yes"
+        },
+        "doNotConsider": {
+          "label": "No"
+        }
+      },
+      "tay": {
+        "summary": "Transition Age Youth (TAY)",
+        "tay": {
+          "label": "Yes"
+        },
+        "doNotConsider": {
+          "label": "No"
+        }
+      },
+      "disabilityOrMentalIllness": {
+        "summary": "People with Developmental Disabilities or Mental Illness",
+        "disabilityOrMentalIllness": {
+          "label": "Yes"
+        },
+        "doNotConsider": {
+          "label": "No"
+        }
+      },
+      "housingSituation": {
+        "summary": "Temporarily Housed or Homeless",
+        "notPermanent": {
+          "label": "I have somewhere to stay, but it isn't permanent",
+          "description": "Includes staying with friends or family, living in a motel / hotel, or living in a medical or other facility and those who have received an eviction notice or will imminently lose their current residence"
+        },
+        "homeless": {
+          "label": "I'm homeless",
+          "description": "Includes living outside, or in your car, or staying at a shelter, or in a motel / hotel paid for with an emergency voucher"
+        },
+        "doNotConsider": {
+          "label": "No"
+        }
+      }
+    },
     "preferences": {
       "title": "Your household may qualify for the following housing preferences.",
       "preamble": "If you qualify for this preference, you'll get a higher ranking.",
@@ -623,15 +667,28 @@
         },
         "raceOptions": {
           "americanIndianAlaskanNative": "American Indian / Alaskan Native",
-          "asian": "Asian",
-          "blackAfricanAmerican": "Black / African American",
-          "nativeHawaiianOtherPacificIslander": "Native Hawaiian / Other Pacific Islander",
-          "white": "White",
           "americanIndianAlaskanNativeAndBlackAfricanAmerican": "American Indian / Alaskan Native and Black/African American",
           "americanIndianAlaskanNativeAndWhite": "American Indian / Alaskan Native and White",
+          "asian": "Asian",
           "asianAndWhite": "Asian and White",
+          "asian-asianIndian": "Asian Indian",
+          "asian-otherAsian": "Other Asian",
+          "blackAfricanAmerican": "Black / African American",
           "blackAfricanAmericanAndWhite": "Black / African American and White",
-          "otherMutliracial": "Other / Mutliracial"
+          "asian-chinese": "Chinese",
+          "declineToRespond": "Decline to Respond",
+          "asian-filipino": "Filipino",
+          "nativeHawaiianOtherPacificIslander-guamanianOrChamorro": "Guamanian or Chamorro",
+          "asian-japanese": "Japanese",
+          "asian-korean": "Korean",
+          "nativeHawaiianOtherPacificIslander-nativeHawaiian": "Native Hawaiian",
+          "nativeHawaiianOtherPacificIslander": "Native Hawaiian / Other Pacific Islander",
+          "otherMultiracial": "Other / Multiracial",
+          "otherMutliracial": "Other / Mutliracial",
+          "nativeHawaiianOtherPacificIslander-otherPacificIslander": "Other Pacific Islander",
+          "nativeHawaiianOtherPacificIslander-samoan": "Samoan",
+          "asian-vietnamese": "Vietnamese",
+          "white": "White"
         },
         "genderOptions": {
           "female": "Female",
@@ -1110,6 +1167,7 @@
       "communityType": "Community Type",
       "communityTypeSubtitle": "Are there any requirements that applicants need to meet?",
       "costsNotIncluded": "Costs Not Included",
+      "depositHelperText": "Deposit Helper Text",
       "eligibilitySubtitle": "Income, occupancy, preferences, and subsidies",
       "eligibilityTitle": "Eligibility",
       "featuresSubtitle": "Amenities, unit details and additional fees",
@@ -1442,6 +1500,7 @@
     "phone": "Phone",
     "phoneNumberPlaceholder": "(555) 555-5555",
     "pleaseSelectOne": "Please select one.",
+    "preferNotToSay": "Prefer not to say",
     "pm": "PM",
     "post": "Post",
     "preferences": "Preferences",

package/src/page_components/listing/AdditionalFees.tsx

@@ -6,6 +6,7 @@ export interface AdditionalFeesProps {
   depositMax?: string
   applicationFee?: string
   costsNotIncluded?: string
+  depositHelperText?: string
 }
 
 const AdditionalFees = (props: AdditionalFeesProps) => {
@@ -37,7 +38,7 @@ const AdditionalFees = (props: AdditionalFeesProps) => {
           <div className="info-card__column">
             <div className="text-base">{t("t.deposit")}</div>
             <div className="text-xl font-bold">{getDeposit()}</div>
-            <div>{t("listings.depositOrMonthsRent")}</div>
+            {props.depositHelperText && <div>{props.depositHelperText}</div>}
           </div>
         )}
       </div>