@bloom-housing/ui-components 5.1.1-alpha.19 → 5.1.1-alpha.21

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.1.1-alpha.21](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.20...@bloom-housing/ui-components@5.1.1-alpha.21) (2022-08-31)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [5.1.1-alpha.20](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.19...@bloom-housing/ui-components@5.1.1-alpha.20) (2022-08-31)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
 ## [5.1.1-alpha.19](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.18...@bloom-housing/ui-components@5.1.1-alpha.19) (2022-08-31)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "5.1.1-alpha.19",
+  "version": "5.1.1-alpha.21",
   "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",
@@ -110,5 +110,5 @@
     "ts-jest": "^26.4.1",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "3d737866d980b646a54c2d06782257dd40d74846"
+  "gitHead": "f8a82a28d1aeb9658dea57517bbb7de7a2c3405f"
 }

package/src/blocks/HousingCounselor.tsx

@@ -9,6 +9,11 @@ export interface HousingCounselorProps {
   name: string
   phone?: string
   website?: string
+  strings?: {
+    callNumber?: string
+    languageServices?: string
+    website?: string
+  }
 }
 
 const LanguageLabel = (language: string) => {
@@ -24,7 +29,7 @@ const HousingCounselor = (props: HousingCounselorProps) => {
     <div className="resource-item text-base">
       <h3 className="font-sans text-lg">{props.name}</h3>
       <p className="text-sm text-gray-800 pb-2">
-        {t("housingCounselors.languageServices")}
+        {props.strings?.languageServices ?? t("housingCounselors.languageServices")}
         {props.languages.map((language) => LanguageLabel(language))}
       </p>
       {props.addressStreet && (
@@ -35,13 +40,13 @@ const HousingCounselor = (props: HousingCounselorProps) => {
       {props.phone && (
         <a className="icon-item pb-1" href={`tel:+1${props.phone}`}>
           <Icon symbol="phone" size="medium" fill={IconFillColors.primary} />
-          {` ${t("housingCounselors.call", { number: props.phone })}`}
+          {` ${props.strings?.callNumber ?? t("housingCounselors.call", { number: props.phone })}`}
         </a>
       )}
       {props.website && (
         <a className="icon-item" href={props.website}>
           <Icon symbol="globe" size="medium" fill={IconFillColors.primary} />
-          {` ${t("t.website")}`}
+          {` ${props.strings?.website ?? t("t.website")}`}
         </a>
       )}
     </div>

package/src/blocks/ImageCard.tsx

@@ -5,10 +5,10 @@ import "./ImageCard.scss"
 import { Tag } from "../text/Tag"
 import { ApplicationStatusType } from "../global/ApplicationStatusType"
 import { AppearanceStyleType } from "../global/AppearanceTypes"
-import { t } from "../helpers/translator"
 import { Icon, IconFillColors, UniversalIconType } from "../icons/Icon"
 import { Modal } from "../overlays/Modal"
 import { Button } from "../actions/Button"
+import { t } from "../helpers/translator"
 
 export interface StatusBarType {
   status?: ApplicationStatusType
@@ -53,6 +53,9 @@ export interface ImageCardProps {
   moreImagesLabel?: string
   /** The aria label of the clickable region of the images grid */
   moreImagesDescription?: string
+  strings?: {
+    defaultImageAltText?: string
+  }
 }
 
 /**
@@ -119,7 +122,11 @@ const ImageCard = (props: ImageCardProps) => {
           {props.imageUrl ? (
             <img
               src={props.imageUrl}
-              alt={props.description || t("listings.buildingImageAltText")}
+              alt={
+                props.description ??
+                props.strings?.defaultImageAltText ??
+                t("listings.buildingImageAltText")
+              }
             />
           ) : props.images && displayedImages ? (
             displayedImages.map((image, index) => (

package/src/blocks/StatusItem.tsx

@@ -10,6 +10,15 @@ interface StatusItemProps {
   confirmationNumber?: string
   listingName: string
   listingURL: string
+  strings?: {
+    applicationDeadline?: string
+    edited?: string
+    seeListing?: string
+    status?: string
+    submittedStatus?: string
+    viewApplication?: string
+    yourNumber?: string
+  }
 }
 
 const StatusItem = (props: StatusItemProps) => {
@@ -22,7 +31,8 @@ const StatusItem = (props: StatusItemProps) => {
           <h3 className="status-item__title">{props.listingName}</h3>
           {props.applicationDueDate && (
             <p className="status-item__due">
-              {t("listings.applicationDeadline")}: {props.applicationDueDate}
+              {props.strings?.applicationDeadline ?? t("listings.applicationDeadline")}:{" "}
+              {props.applicationDueDate}
             </p>
           )}
         </header>
@@ -32,7 +42,7 @@ const StatusItem = (props: StatusItemProps) => {
             {props.confirmationNumber && (
               <>
                 <span className="status-item__confirm-text">
-                  {t("application.yourLotteryNumber")}:
+                  {props.strings?.yourNumber ?? t("application.yourLotteryNumber")}:
                 </span>
                 <br />
                 <span className="status-item__confirm-number">{props.confirmationNumber}</span>
@@ -43,11 +53,12 @@ const StatusItem = (props: StatusItemProps) => {
           <div className="status-item__action">
             <p className="status-item__status">
               <span className={"status-item__label"}>
-                {t("application.status")}: {t("application.statuses.submitted")}
+                {props.strings?.status ?? t("application.status")}:{" "}
+                {props.strings?.submittedStatus ?? t("application.statuses.submitted")}
               </span>
             </p>
             <a href={props.applicationURL} className="button is-small">
-              {t("application.viewApplication")}
+              {props.strings?.viewApplication ?? t("application.viewApplication")}
             </a>
           </div>
         </section>
@@ -55,13 +66,13 @@ const StatusItem = (props: StatusItemProps) => {
         <footer className="status-item__footer">
           <div className="status-item_links">
             <LinkComponent className="status-item__link lined" href={props.listingURL}>
-              {t("t.seeListing")}
+              {props.strings?.seeListing ?? t("t.seeListing")}
             </LinkComponent>
           </div>
 
           <div className="status-item__meta">
             <p className="status-item__date">
-              {t("application.edited")}: {props.applicationUpdatedAt}
+              {props.strings?.edited ?? t("application.edited")}: {props.applicationUpdatedAt}
             </p>
           </div>
         </footer>

package/src/forms/DOBField.tsx

@@ -25,6 +25,15 @@ export interface DOBFieldProps {
   required?: boolean
   disabled?: boolean
   readerOnly?: boolean
+  strings?: {
+    dateError?: string
+    day?: string
+    dayPlaceholder?: string
+    month?: string
+    monthPlaceholder?: string
+    year?: string
+    yearPlaceholder?: string
+  }
 }
 
 const DOBField = (props: DOBFieldProps) => {
@@ -55,10 +64,10 @@ const DOBField = (props: DOBFieldProps) => {
       <div className="field-group--date">
         <Field
           name={getFieldName("birthMonth")}
-          label={t("t.month")}
+          label={props.strings?.month ?? t("t.month")}
           disabled={props.disabled}
           readerOnly={true}
-          placeholder={t("account.settings.placeholders.month")}
+          placeholder={props.strings?.monthPlaceholder ?? t("account.settings.placeholders.month")}
           defaultValue={defaultDOB?.birthMonth ? defaultDOB.birthMonth : ""}
           error={error?.birthMonth !== undefined}
           validation={{
@@ -77,10 +86,10 @@ const DOBField = (props: DOBFieldProps) => {
         />
         <Field
           name={getFieldName("birthDay")}
-          label={t("t.day")}
+          label={props.strings?.day ?? t("t.day")}
           disabled={props.disabled}
           readerOnly={true}
-          placeholder={t("account.settings.placeholders.day")}
+          placeholder={props.strings?.dayPlaceholder ?? t("account.settings.placeholders.day")}
           defaultValue={defaultDOB?.birthDay ? defaultDOB.birthDay : ""}
           error={error?.birthDay !== undefined}
           validation={{
@@ -99,10 +108,10 @@ const DOBField = (props: DOBFieldProps) => {
         />
         <Field
           name={getFieldName("birthYear")}
-          label={t("t.year")}
+          label={props.strings?.year ?? t("t.year")}
           disabled={props.disabled}
           readerOnly={true}
-          placeholder={t("account.settings.placeholders.year")}
+          placeholder={props.strings?.yearPlaceholder ?? t("account.settings.placeholders.year")}
           defaultValue={defaultDOB?.birthYear ? defaultDOB.birthYear : ""}
           error={error?.birthYear !== undefined}
           validation={{
@@ -126,7 +135,7 @@ const DOBField = (props: DOBFieldProps) => {
       {(error?.birthMonth || error?.birthDay || error?.birthYear) && (
         <div className="field error">
           <span id={`${id}-error`} className="error-message">
-            {errorMessage ? errorMessage : t("errors.dateOfBirthError")}
+            {errorMessage ? errorMessage : props.strings?.dateError ?? t("errors.dateOfBirthError")}
           </span>
         </div>
       )}

package/src/forms/DateField.tsx

@@ -25,6 +25,15 @@ export interface DateFieldProps {
   required?: boolean
   watch: UseFormMethods["watch"]
   dataTestId?: string
+  strings?: {
+    dateError?: string
+    day?: string
+    dayPlaceholder?: string
+    month?: string
+    monthPlaceholder?: string
+    year?: string
+    yearPlaceholder?: string
+  }
 }
 
 const DateField = (props: DateFieldProps) => {
@@ -44,10 +53,10 @@ const DateField = (props: DateFieldProps) => {
       <div className="field-group--date">
         <Field
           name={getFieldName("month")}
-          label={t("t.month")}
+          label={props.strings?.month ?? t("t.month")}
           disabled={props.disabled}
           readerOnly={true}
-          placeholder={t("account.settings.placeholders.month")}
+          placeholder={props.strings?.monthPlaceholder ?? t("account.settings.placeholders.month")}
           defaultValue={defaultDate?.month ?? ""}
           error={error?.month !== undefined}
           validation={{
@@ -65,10 +74,10 @@ const DateField = (props: DateFieldProps) => {
         />
         <Field
           name={getFieldName("day")}
-          label={t("t.day")}
+          label={props.strings?.day ?? t("t.day")}
           disabled={props.disabled}
           readerOnly={true}
-          placeholder={t("account.settings.placeholders.day")}
+          placeholder={props.strings?.dayPlaceholder ?? t("account.settings.placeholders.day")}
           defaultValue={defaultDate?.day ?? ""}
           error={error?.day !== undefined}
           validation={{
@@ -86,10 +95,10 @@ const DateField = (props: DateFieldProps) => {
         />
         <Field
           name={getFieldName("year")}
-          label={t("t.year")}
+          label={props.strings?.year ?? t("t.year")}
           disabled={props.disabled}
           readerOnly={true}
-          placeholder={t("account.settings.placeholders.year")}
+          placeholder={props.strings?.yearPlaceholder ?? t("account.settings.placeholders.year")}
           defaultValue={defaultDate?.year ?? ""}
           error={error?.year !== undefined}
           validation={{
@@ -113,7 +122,7 @@ const DateField = (props: DateFieldProps) => {
       {(error?.month || error?.day || error?.year) && (
         <div className="field error">
           <span id={`${id}-error`} className="error-message">
-            {errorMessage ? errorMessage : t("errors.dateError")}
+            {errorMessage ? errorMessage : props.strings?.dateError ?? t("errors.dateError")}
           </span>
         </div>
       )}

package/src/forms/Dropzone.tsx

@@ -11,6 +11,12 @@ interface DropzoneProps {
   accept?: string | string[]
   progress?: number
   className?: string
+  strings?: {
+    chooseFromFolder?: string
+    dragHere?: string
+    dropHere?: string
+    orString?: string
+  }
 }
 
 const Dropzone = (props: DropzoneProps) => {
@@ -51,11 +57,14 @@ const Dropzone = (props: DropzoneProps) => {
         <div className={dropzoneClasses.join(" ")} {...getRootProps()}>
           <input id={props.id} {...getInputProps()} data-test-id={"dropzone-input"} />
           {isDragActive ? (
-            <p>{t("t.dropFilesHere")}</p>
+            <p>{props.strings?.dropHere ?? t("t.dropFilesHere")}</p>
           ) : (
             <p>
-              {t("t.dragFilesHere")} {t("t.or")}{" "}
-              <u className="text-primary">{t("t.chooseFromFolder").toLowerCase()}</u>
+              {props.strings?.dragHere ?? t("t.dragFilesHere")}{" "}
+              {props.strings?.orString ?? t("t.or")}{" "}
+              <u className="text-primary">
+                {props.strings?.chooseFromFolder ?? t("t.chooseFromFolder").toLowerCase()}
+              </u>
             </p>
           )}
         </div>

package/src/forms/FieldGroup.tsx

@@ -37,6 +37,11 @@ interface FieldGroupProps {
   register: UseFormMethods["register"]
   type?: string
   validation?: RegisterOptions
+  strings?: {
+    description?: string
+    readLess?: string
+    readMore?: string
+  }
 }
 
 const FieldGroup = ({
@@ -54,6 +59,7 @@ const FieldGroup = ({
   fieldLabelClassName,
   groupSubNote,
   dataTestId,
+  strings,
 }: FieldGroupProps) => {
   // Always align two-option radio groups side by side
   if (fields?.length === 2) {
@@ -103,7 +109,12 @@ const FieldGroup = ({
 
         {item.description && (
           <div className="ml-8 -mt-1 mb-5">
-            <ExpandableContent strings={{ readMore: t("t.readMore"), readLess: t("t.readLess") }}>
+            <ExpandableContent
+              strings={{
+                readMore: strings?.readMore ?? t("t.readMore"),
+                readLess: strings?.readLess ?? t("t.readLess"),
+              }}
+            >
               <p className="field-note mb-2 -mt-2">{item.description}</p>
             </ExpandableContent>
           </div>
@@ -143,7 +154,7 @@ const FieldGroup = ({
             name={`${name}-${item.value}`}
             register={register}
             defaultValue={item.defaultText}
-            placeholder={t("t.description")}
+            placeholder={strings?.description ?? t("t.description")}
             className={"mb-4"}
             disabled={item.disabled}
             dataTestId={item.dataTestId}

package/src/forms/HouseholdMemberForm.tsx

@@ -10,6 +10,9 @@ export interface HouseholdMemberFormProps {
   memberId?: number
   memberLastName: string
   subtitle: string
+  strings?: {
+    edit?: string
+  }
 }
 
 const HouseholdMemberForm = (props: HouseholdMemberFormProps) => {
@@ -26,7 +29,7 @@ const HouseholdMemberForm = (props: HouseholdMemberFormProps) => {
           type={"button"}
           data-test-id={"app-household-member-edit-button"}
         >
-          {t("t.edit")}
+          {props.strings?.edit ?? t("t.edit")}
         </button>
       ) : (
         <Icon

package/src/forms/HouseholdSizeField.tsx

@@ -14,6 +14,13 @@ export interface HouseholdSizeFieldProps {
   householdSizeMin: number
   register: UseFormMethods["register"]
   validate: boolean
+  strings?: {
+    dontQualifyDescription?: string
+    dontQualifyHeader?: string
+    getAssistance?: string
+    householdTooBigError?: string
+    householdTooSmallError?: string
+  }
 }
 
 const HouseholdSizeField = (props: HouseholdSizeFieldProps) => {
@@ -26,6 +33,7 @@ const HouseholdSizeField = (props: HouseholdSizeFieldProps) => {
     clearErrors,
     error,
     assistanceUrl,
+    strings,
   } = props
   if (!householdSizeMax || !validate) {
     return <></>
@@ -44,11 +52,11 @@ const HouseholdSizeField = (props: HouseholdSizeFieldProps) => {
               ? register({
                   min: {
                     value: householdSizeMin || 0,
-                    message: t("errors.householdTooSmall"),
+                    message: strings?.householdTooSmallError ?? t("errors.householdTooSmall"),
                   },
                   max: {
                     value: householdSizeMax,
-                    message: t("errors.householdTooBig"),
+                    message: strings?.householdTooBigError ?? t("errors.householdTooBig"),
                   },
                 })
               : register
@@ -61,12 +69,14 @@ const HouseholdSizeField = (props: HouseholdSizeFieldProps) => {
         className="block mt-0 line-normal text-red-700"
       >
         <AlertBox type="alert" inverted onClose={() => clearErrors()}>
-          {t("application.household.dontQualifyHeader")}
+          {strings?.dontQualifyHeader ?? t("application.household.dontQualifyHeader")}
         </AlertBox>
         <AlertNotice title={error?.message} type="alert" inverted>
-          <p className="mb-2">{t("application.household.dontQualifyInfo")}</p>
+          <p className="mb-2">
+            {strings?.dontQualifyDescription ?? t("application.household.dontQualifyInfo")}
+          </p>
           <p>
-            <a href={assistanceUrl}>{t("pageTitle.getAssistance")}</a>
+            <a href={assistanceUrl}>{strings?.getAssistance ?? t("pageTitle.getAssistance")}</a>
           </p>
         </AlertNotice>
       </ErrorMessage>

package/src/forms/TimeField.tsx

@@ -29,6 +29,14 @@ export type TimeFieldProps = {
   watch: UseFormMethods["watch"]
   seconds?: boolean
   dataTestId?: string
+  strings?: {
+    hour?: string
+    minutes?: string
+    minutesPlaceholder?: string
+    seconds?: string
+    time?: string
+    timeError?: string
+  }
 }
 
 export const formatDateToTimeField = (date: Date) => {
@@ -56,6 +64,7 @@ const TimeField = ({
   defaultValues,
   disabled,
   dataTestId,
+  strings,
 }: TimeFieldProps) => {
   const fieldName = (baseName: string) => {
     return [name, baseName].filter((item) => item).join(".")
@@ -82,7 +91,7 @@ const TimeField = ({
       <div className="field-group--date">
         <Field
           name={fieldName("hours")}
-          label={t("t.hour")}
+          label={strings?.hour ?? t("t.hour")}
           defaultValue={defaultValues?.hours ?? ""}
           readerOnly={true}
           placeholder="HH"
@@ -106,10 +115,10 @@ const TimeField = ({
 
         <Field
           name={fieldName("minutes")}
-          label={t("t.minutes")}
+          label={strings?.minutes ?? t("t.minutes")}
           defaultValue={defaultValues?.minutes ?? ""}
           readerOnly={true}
-          placeholder={t("account.settings.placeholders.month")}
+          placeholder={strings?.minutesPlaceholder ?? t("account.settings.placeholders.month")}
           error={error}
           validation={{
             required: required || innerRequiredRule,
@@ -130,7 +139,7 @@ const TimeField = ({
 
         {seconds && (
           <Field
-            label={t("t.seconds")}
+            label={strings?.seconds ?? t("t.seconds")}
             defaultValue={defaultValues?.seconds ?? ""}
             name={fieldName("seconds")}
             readerOnly={true}
@@ -158,7 +167,7 @@ const TimeField = ({
           name={fieldName("period")}
           id={fieldName("period")}
           labelClassName="sr-only"
-          label={t("t.time")}
+          label={strings?.time ?? t("t.time")}
           register={register}
           options={["am", "pm"]}
           keyPrefix="t"
@@ -172,7 +181,7 @@ const TimeField = ({
 
       <div id={`${id}-error`} className="field error">
         <ErrorMessage id={"time-field-error"} error={error}>
-          {t("errors.timeError")}
+          {strings?.timeError ?? t("errors.timeError")}
         </ErrorMessage>
       </div>
     </fieldset>

package/src/headers/Hero.tsx

@@ -14,6 +14,9 @@ export interface HeroProps {
   secondaryButtonLink?: string
   secondaryButtonTitle?: string
   title: React.ReactNode
+  strings?: {
+    allApplicationsClosed?: string
+  }
 }
 
 const HeroButton = (props: { title: string; href: string; className?: string }) => (
@@ -26,7 +29,11 @@ const Hero = (props: HeroProps) => {
   let subHeader, styles
   let classNames = ""
   if (props.allApplicationsClosed) {
-    subHeader = <h2 className="hero__subtitle">{t("welcome.allApplicationClosed")}</h2>
+    subHeader = (
+      <h2 className="hero__subtitle">
+        {props.strings?.allApplicationsClosed ?? t("welcome.allApplicationClosed")}
+      </h2>
+    )
   } else if (props.children) {
     subHeader = <h2 className="hero__subtitle">{props.children}</h2>
   }

package/src/headers/SiteHeader.tsx

@@ -38,6 +38,11 @@ export interface SiteHeaderProps {
   noticeMobile?: boolean
   siteHeaderWidth?: SiteHeaderWidth
   title?: string
+  strings?: {
+    close?: string
+    logoAriaLable?: string
+    menu?: string
+  }
 }
 
 const SiteHeader = (props: SiteHeaderProps) => {
@@ -240,7 +245,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
                   setMobileDrawer(false)
                 }
               }}
-              aria-label={t("t.close")}
+              aria-label={props.strings?.close ?? t("t.close")}
             >
               <Icon size="small" symbol="arrowForward" fill={"#ffffff"} className={"pl-2"} />
             </button>
@@ -377,7 +382,9 @@ const SiteHeader = (props: SiteHeaderProps) => {
               }
             }}
           >
-            <div className={"pr-2 text-tiny text-primary uppercase"}>{t("t.menu")}</div>
+            <div className={"pr-2 text-tiny text-primary uppercase"}>
+              {props.strings?.menu ?? t("t.menu")}
+            </div>
             <Icon
               symbol={mobileMenu ? "closeSmall" : "hamburger"}
               size={"base"}
@@ -400,7 +407,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
             className={"navbar-mobile-menu-button"}
             unstyled
           >
-            {mobileMenu ? t("t.close") : t("t.menu")}
+            {mobileMenu ? props.strings?.close ?? t("t.close") : props.strings?.menu ?? t("t.menu")}
           </Button>
         )}
       </>
@@ -415,7 +422,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
             props.logoWidth && "navbar-custom-width"
           }`}
           href={props.homeURL}
-          aria-label={t("t.homePage")}
+          aria-label={props.strings?.logoAriaLable ?? t("t.homePage")}
         >
           <div className={`logo-content ${props.imageOnly && "navbar-image-only-container"}`}>
             <img

package/src/helpers/formOptions.tsx

@@ -5,6 +5,9 @@ import { SelectOption } from "../forms/Select"
 export interface FormOptionsProps {
   options: (string | SelectOption)[]
   keyPrefix?: string
+  strings?: {
+    selectOne?: string
+  }
 }
 
 export const numberOptions = (end: number, start = 1): SelectOption[] => {
@@ -21,7 +24,7 @@ export const FormOptions = (props: FormOptionsProps) => {
     if (option == "" || option["value"] == "") {
       return (
         <option value="" key="select-one">
-          {t("t.selectOne")}
+          {props.strings?.selectOne ?? t("t.selectOne")}
         </option>
       )
     } else {

package/src/helpers/formatYesNoLabel.ts

@@ -1,9 +1,11 @@
 import { t } from "./translator"
 
-export const formatYesNoLabel = (value: boolean | null) => {
-  if (value === null || typeof value == "undefined") return t("t.n/a")
-  if (value) return t("t.yes")
-  if (!value) return t("t.no")
-
-  return t("t.n/a")
+export const formatYesNoLabel = (
+  value: boolean | null,
+  strings?: { yesString?: string; noString?: string; notApplicableString?: string }
+) => {
+  if (value === null || typeof value == "undefined")
+    return strings?.notApplicableString ?? t("t.n/a")
+  if (value) return strings?.yesString ?? t("t.yes")
+  return strings?.noString ?? t("t.no")
 }