@bloom-housing/ui-components 4.4.1-alpha.9 → 5.0.0

package/src/helpers/preferences.tsx

@@ -1,11 +1,4 @@
 import React from "react"
-import {
-  InputType,
-  ApplicationPreference,
-  FormMetadataOptions,
-  Preference,
-  ListingPreference,
-} from "@bloom-housing/backend-core/types"
 import { UseFormMethods } from "react-hook-form"
 import {
   t,
@@ -14,133 +7,23 @@ import {
   GridCell,
   Field,
   Select,
-  SelectOption,
   resolveObject,
 } from "@bloom-housing/ui-components"
 
-type ExtraFieldProps = {
-  metaKey: string
-  optionKey: string
-  extraKey: string
-  type: InputType
-  register: UseFormMethods["register"]
-  errors?: UseFormMethods["errors"]
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  hhMembersOptions?: SelectOption[]
-  stateKeys: string[]
-}
-
 type FormAddressProps = {
   subtitle: string
   dataKey: string
-  type: AddressType
+  enableMailCheckbox?: boolean
   register: UseFormMethods["register"]
   errors?: UseFormMethods["errors"]
   required?: boolean
   stateKeys: string[]
 }
 
-type AddressType =
-  | "residence"
-  | "residence-member"
-  | "work"
-  | "mailing"
-  | "alternate"
-  | "preference"
-
-/*
-  Path to the preferences from listing object
-*/
-export const PREFERENCES_FORM_PATH = "application.preferences.options"
-export const PREFERENCES_NONE_FORM_PATH = "application.preferences.none"
-/*
-  It generates inner fields for preferences form
-*/
-export const ExtraField = ({
-  metaKey,
-  optionKey,
-  extraKey,
-  type,
-  register,
-  errors,
-  hhMembersOptions,
-  stateKeys,
-}: ExtraFieldProps) => {
-  const FIELD_NAME = `${PREFERENCES_FORM_PATH}.${metaKey}.${optionKey}.${extraKey}`
-
-  return (
-    <div className="my-4" key={FIELD_NAME}>
-      {(() => {
-        if (type === InputType.text) {
-          return (
-            <Field
-              id={FIELD_NAME}
-              name={FIELD_NAME}
-              type="text"
-              label={t(`application.preferences.options.${extraKey}`)}
-              register={register}
-              validation={{ required: true }}
-              error={!!resolveObject(FIELD_NAME, errors)}
-              errorMessage={t("errors.requiredFieldError")}
-            />
-          )
-        } else if (type === InputType.address) {
-          return (
-            <div className="pb-4">
-              <FormAddress
-                subtitle={t("application.preferences.options.address")}
-                dataKey={FIELD_NAME}
-                type="preference"
-                register={register}
-                errors={errors}
-                required={true}
-                stateKeys={stateKeys}
-              />
-            </div>
-          )
-        } else if (type === InputType.hhMemberSelect) {
-          if (!hhMembersOptions)
-            return (
-              <Field
-                id={FIELD_NAME}
-                name={FIELD_NAME}
-                type="text"
-                label={t(`application.preferences.options.${extraKey}`)}
-                register={register}
-                validation={{ required: true }}
-                error={!!resolveObject(FIELD_NAME, errors)}
-                errorMessage={t("errors.requiredFieldError")}
-              />
-            )
-
-          return (
-            <>
-              <Select
-                id={FIELD_NAME}
-                name={FIELD_NAME}
-                label={t(`application.preferences.options.${extraKey}`)}
-                register={register}
-                controlClassName="control"
-                placeholder={t("t.selectOne")}
-                options={hhMembersOptions}
-                validation={{ required: true }}
-                error={!!resolveObject(FIELD_NAME, errors)}
-                errorMessage={t("errors.requiredFieldError")}
-              />
-            </>
-          )
-        }
-
-        return <></>
-      })()}
-    </div>
-  )
-}
-
 export const FormAddress = ({
   subtitle,
   dataKey,
-  type,
+  enableMailCheckbox = false,
   register,
   errors,
   required,
@@ -225,7 +108,7 @@ export const FormAddress = ({
           </ViewItem>
         </GridCell>
 
-        {type === "residence" && (
+        {enableMailCheckbox && (
           <GridCell span={2}>
             <Field
               id="application.sendMailToMailingAddress"
@@ -240,197 +123,3 @@ export const FormAddress = ({
     </>
   )
 }
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const mapPreferencesToApi = (data: Record<string, any>) => {
-  if (!data.application?.preferences) return []
-
-  const CLAIMED_KEY = "claimed"
-
-  const preferencesFormData = data.application.preferences.options
-
-  const keys = Object.keys(preferencesFormData)
-
-  return keys.map((key) => {
-    const currentPreference = preferencesFormData[key]
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const currentPreferenceValues = Object.values(currentPreference) as Record<string, any>
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const claimed = currentPreferenceValues.map((c: { claimed: any }) => c.claimed).includes(true)
-
-    const options = Object.keys(currentPreference).map((option) => {
-      const currentOption = currentPreference[option]
-
-      // count keys except claimed
-      const extraKeys = Object.keys(currentOption).filter((item) => item !== CLAIMED_KEY)
-
-      const response = {
-        key: option,
-        checked: currentOption[CLAIMED_KEY],
-      }
-
-      // assign extra data and detect data type
-      if (extraKeys.length) {
-        const extraData = extraKeys.map((extraKey) => {
-          const type = (() => {
-            if (typeof currentOption[extraKey] === "boolean") return InputType.boolean
-            // if object includes "city" property, it should be an address
-            if (Object.keys(currentOption[extraKey]).includes("city")) return InputType.address
-
-            return InputType.text
-          })()
-
-          return {
-            key: extraKey,
-            type,
-            value: currentOption[extraKey],
-          }
-        })
-
-        Object.assign(response, { extraData })
-      } else {
-        Object.assign(response, { extraData: [] })
-      }
-
-      return response
-    })
-
-    return {
-      key,
-      claimed,
-      options,
-    }
-  })
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const mapApiToPreferencesForm = (preferences: ApplicationPreference[]) => {
-  const preferencesFormData = {}
-
-  preferences.forEach((item) => {
-    const options = item.options.reduce((acc, curr) => {
-      // extraData which comes from the API is an array, in the form we expect an object
-      const extraData =
-        curr?.extraData?.reduce((extraAcc, extraCurr) => {
-          // value - it can be string or nested address object
-          const value = extraCurr.value
-          Object.assign(extraAcc, {
-            [extraCurr.key]: value,
-          })
-
-          return extraAcc
-        }, {}) || {}
-
-      // each form option has "claimed" property - it's "checked" property in the API
-      const claimed = curr.checked
-
-      Object.assign(acc, {
-        [curr.key]: {
-          claimed,
-          ...extraData,
-        },
-      })
-      return acc
-    }, {})
-
-    Object.assign(preferencesFormData, {
-      [item.key]: options,
-    })
-  })
-
-  const noneValues = preferences.reduce((acc, item) => {
-    const isClaimed = item.claimed
-
-    Object.assign(acc, {
-      [`${item.key}-none`]: !isClaimed,
-    })
-
-    return acc
-  }, {})
-
-  return { options: preferencesFormData, none: noneValues }
-}
-
-/*
-  It generates checkbox name in proper prefrences structure
-*/
-export const getPreferenceOptionName = (key: string, metaKey: string, noneOption?: boolean) => {
-  if (noneOption) return getExclusivePreferenceOptionName(key)
-  else return getNormalPreferenceOptionName(metaKey, key)
-}
-
-export const getNormalPreferenceOptionName = (metaKey: string, key: string) => {
-  return `${PREFERENCES_FORM_PATH}.${metaKey}.${key}.claimed`
-}
-
-export const getExclusivePreferenceOptionName = (key: string | undefined) => {
-  return `${PREFERENCES_NONE_FORM_PATH}.${key}-none`
-}
-
-export type ExclusiveKey = {
-  optionKey: string
-  preferenceKey: string | undefined
-}
-/*
-  Create an array of all exclusive keys from a preference set
-*/
-export const getExclusiveKeys = (preferences: ListingPreference[]) => {
-  const exclusive: ExclusiveKey[] = []
-  preferences?.forEach((listingPreference) => {
-    listingPreference.preference?.formMetadata?.options.forEach((option: FormMetadataOptions) => {
-      if (option.exclusive)
-        exclusive.push({
-          optionKey: getPreferenceOptionName(
-            option.key,
-            listingPreference.preference?.formMetadata?.key ?? ""
-          ),
-          preferenceKey: listingPreference.preference?.formMetadata?.key,
-        })
-    })
-    if (!listingPreference.preference?.formMetadata?.hideGenericDecline)
-      exclusive.push({
-        optionKey: getExclusivePreferenceOptionName(
-          listingPreference.preference?.formMetadata?.key
-        ),
-        preferenceKey: listingPreference.preference?.formMetadata?.key,
-      })
-  })
-  return exclusive
-}
-
-const uncheckPreference = (
-  metaKey: string,
-  options: FormMetadataOptions[] | undefined,
-  setValue: (key: string, value: boolean) => void
-) => {
-  options?.forEach((option) => {
-    setValue(getPreferenceOptionName(option.key, metaKey), false)
-  })
-}
-
-/*
-  Set the value of an exclusive checkbox, unchecking all the appropriate boxes in response to the value
-*/
-export const setExclusive = (
-  value: boolean,
-  setValue: (key: string, value: boolean) => void,
-  exclusiveKeys: ExclusiveKey[],
-  key: string,
-  preference: Preference
-) => {
-  if (value) {
-    // Uncheck all other keys if setting an exclusive key to true
-    uncheckPreference(
-      preference?.formMetadata?.key ?? "",
-      preference?.formMetadata?.options,
-      setValue
-    )
-    setValue(key ?? "", true)
-  } else {
-    // Uncheck all exclusive keys if setting a normal key to true
-    exclusiveKeys.forEach((thisKey) => {
-      if (thisKey.preferenceKey === preference?.formMetadata?.key)
-        setValue(thisKey.optionKey, false)
-    })
-  }
-}

package/src/icons/Icon.tsx

@@ -1,4 +1,6 @@
 import * as React from "react"
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import "./Icon.scss"
 import {
   Application,
@@ -130,19 +132,22 @@ const IconMap = {
 
 export type IconTypes = keyof typeof IconMap
 
+export type UniversalIconType = IconTypes | IconDefinition
+
 export type IconFill = "white" | "primary"
 
 export const IconFillColors = {
   white: "#ffffff",
   black: "#000000",
   primary: "#0077DA",
+  alert: "#b91c1c",
 }
 
 export type IconSize = "tiny" | "small" | "base" | "medium" | "large" | "xlarge" | "2xl" | "3xl"
 
 export interface IconProps {
   size: IconSize
-  symbol: IconTypes
+  symbol: UniversalIconType
   className?: string
   fill?: string
   ariaHidden?: boolean
@@ -155,9 +160,14 @@ const Icon = (props: IconProps) => {
   if (props.className) wrapperClasses.push(props.className)
   if (props.symbol == "spinner") wrapperClasses.push("spinner-animation")
 
-  const SpecificIcon = IconMap[props.symbol]
+  const SpecificIcon =
+    typeof props.symbol === "string" ? (
+      IconMap[props.symbol as string]
+    ) : (
+      <FontAwesomeIcon icon={props.symbol} />
+    )
 
-  return (
+  return typeof props.symbol === "string" ? (
     <span
       className={wrapperClasses.join(" ")}
       aria-hidden={props.ariaHidden}
@@ -165,6 +175,15 @@ const Icon = (props: IconProps) => {
     >
       <SpecificIcon fill={props.fill ? props.fill : undefined} />
     </span>
+  ) : (
+    <span
+      className={wrapperClasses.join(" ")}
+      aria-hidden={props.ariaHidden}
+      data-test-id={props.dataTestId ?? null}
+      style={{ color: props.fill }}
+    >
+      {SpecificIcon}
+    </span>
   )
 }
 

package/src/locales/es.json

@@ -394,6 +394,24 @@
   "authentication.timeout.signOutMessage": "Su seguridad es importante para nosotros. Concluimos su sesión debido a inactividad. Sírvase iniciar sesión para continuar.",
   "authentication.timeout.text": "Para proteger su identidad, su sesión concluirá en un minuto debido a inactividad. Si decide no responder, perderá toda la información que no haya guardado y concluirá su sesión.",
   "config.routePrefix": "es",
+  "eligibility.accessibility.acInUnit": "CA en la unidad",
+  "eligibility.accessibility.accessibleParking": "Estacionamiento Accesible",
+  "eligibility.accessibility.barrierFreeEntrance": "Entrada sin barreras",
+  "eligibility.accessibility.description": "Algunas propiedades tienen características de accesibilidad que otras pueden no tener.",
+  "eligibility.accessibility.elevator": "Ascensor",
+  "eligibility.accessibility.grabBars": "Barras de apoyo",
+  "eligibility.accessibility.hearing": "Audiencia",
+  "eligibility.accessibility.heatingInUnit": "Calefacción en Unidad",
+  "eligibility.accessibility.inUnitWasherDryer": "Lavadora y secadora en el apartamento",
+  "eligibility.accessibility.laundryInBuilding": "Lavandería en el edificio",
+  "eligibility.accessibility.mobility": "Movilidad",
+  "eligibility.accessibility.parkingOnSite": "Estacionamiento en el lugar",
+  "eligibility.accessibility.prompt": "¿Necesita funciones de accesibilidad adicionales?",
+  "eligibility.accessibility.rollInShower": "Rollo en la ducha",
+  "eligibility.accessibility.serviceAnimalsAllowed": "Se admiten animales de servicio",
+  "eligibility.accessibility.title": "Funciones de accesibilidad",
+  "eligibility.accessibility.visual": "Visual",
+  "eligibility.accessibility.wheelchairRamp": "Rampa para silla de ruedas",
   "errors.agreeError": "Debe estar de acuerdo con los términos para poder continuar",
   "errors.alert.badRequest": "¡Oops! Parece que algo salió mal. Por favor, inténtelo de nuevo. Comuníquese con su departamento de vivienda si sigue teniendo problemas.",
   "errors.alert.timeoutPleaseTryAgain": "¡Oops! Parece que algo salió mal. Por favor, inténtelo de nuevo.",

package/src/locales/general.json

@@ -515,6 +515,24 @@
   "authentication.timeout.signOutMessage": "We care about your security. We logged you out due to inactivity. Please sign in to continue.",
   "authentication.timeout.text": "To protect your identity, your session will expire in one minute due to inactivity. You will lose any unsaved information and be logged out if you choose not to respond.",
   "config.routePrefix": "",
+  "eligibility.accessibility.acInUnit": "AC in Unit",
+  "eligibility.accessibility.accessibleParking": "Accessible Parking",
+  "eligibility.accessibility.barrierFreeEntrance": "Barrier Free Entrance",
+  "eligibility.accessibility.description": "Some properties have accessibility features that others may not have.",
+  "eligibility.accessibility.elevator": "Elevator",
+  "eligibility.accessibility.grabBars": "Grab Bars",
+  "eligibility.accessibility.hearing": "Hearing",
+  "eligibility.accessibility.heatingInUnit": "Heating in Unit",
+  "eligibility.accessibility.inUnitWasherDryer": "In Unit Washer Dryer",
+  "eligibility.accessibility.laundryInBuilding": "Laundry in Building",
+  "eligibility.accessibility.mobility": "Mobility",
+  "eligibility.accessibility.parkingOnSite": "Parking On Site",
+  "eligibility.accessibility.prompt": "Do you require additional accessibility features?",
+  "eligibility.accessibility.rollInShower": "Roll in Shower",
+  "eligibility.accessibility.serviceAnimalsAllowed": "Service Animals Allowed",
+  "eligibility.accessibility.title": "Accessibility Features",
+  "eligibility.accessibility.visual": "Visual",
+  "eligibility.accessibility.wheelchairRamp": "Wheelchair Ramp",
   "errors.agreeError": "You must agree to the terms in order to continue",
   "errors.alert.badRequest": "Looks like something went wrong. Please try again. \n\nContact your housing department if you're still experiencing issues.",
   "errors.alert.timeoutPleaseTryAgain": "Oops! Looks like something went wrong. Please try again.",
@@ -592,8 +610,10 @@
   "listings.apply.submitPaperNoDueDateNoPostMark": "%{developer} is not responsible for lost or delayed mail.",
   "listings.apply.submitPaperNoDueDatePostMark": "Applications must be received by the deadline. If sending by U.S. Mail, the application must be received by mail no later than %{postmarkReceivedByDate}. Applications received after %{postmarkReceivedByDate} via mail will not be accepted. %{developer} is not responsible for lost or delayed mail.",
   "listings.availableAndWaitlist": "Available Units & Open Waitlist",
+  "listings.availableUnitsDescription": "Applicants will be reviewed in order until all vacancies are filled.",
   "listings.availableUnitsAndWaitlist": "Available units and waitlist",
   "listings.availableUnitsAndWaitlistDesc": "Once applicants fill all available units, additional applicants will be placed on the waitlist for <span class='t-italic'>%{number} units</span>",
+  "listings.availableUnit": "Available Unit",
   "listings.availableUnits": "Available Units",
   "listings.bath": "bath",
   "listings.browseListings": "Browse Listings",
@@ -681,6 +701,7 @@
   "listings.sections.eligibilityTitle": "Eligibility",
   "listings.sections.featuresSubtitle": "Amenities, unit details and additional fees",
   "listings.sections.featuresTitle": "Features",
+  "listings.sections.accessibilityFeatures": "Accessibility Features",
   "listings.sections.housingPreferencesSubtitle": "Preference holders will be given highest ranking.",
   "listings.sections.housingPreferencesTitle": "Housing Preferences",
   "listings.sections.neighborhoodSubtitle": "Location and transportation",
@@ -810,6 +831,7 @@
   "states.WV": "West Virginia",
   "states.WY": "Wyoming",
   "t.accessibility": "Accessibility",
+  "t.additionalAccessibility": "Additional Accessibility",
   "t.additionalPhone": "Additional Phone",
   "t.am": "AM",
   "t.areYouStillWorking": "Are you still working?",
@@ -861,6 +883,7 @@
   "t.occupancy": "Occupancy",
   "t.ok": "Ok",
   "t.or": "or",
+  "t.order": "Order",
   "t.people": "people",
   "t.perMonth": "per month",
   "t.perYear": "per year",

package/src/{prototypes → navigation}/SideNav.scss

@@ -3,13 +3,26 @@
   @apply rounded-lg;
 
   li {
-    &:first-of-type a {
+    &:first-of-type {
       @apply rounded-t-lg;
     }
 
-    &:last-of-type a {
+    &:last-of-type {
       @apply rounded-b-lg;
     }
+
+    &.is-current {
+      cursor: pointer;
+      @apply text-gray-900;
+      box-shadow: inset 3px 0px 0px 0px $tailwind-primary;
+      @apply block;
+      @apply px-4;
+      @apply py-2;
+    }
+
+    &:not(:last-child) {
+      @apply border-b;
+    }
   }
 
   a {
@@ -17,16 +30,9 @@
     @apply block;
     @apply px-4;
     @apply py-2;
-    @apply border-b;
-
     &:hover {
       @apply bg-primary-lighter;
       @apply text-primary;
     }
-
-    &.is-current {
-      @apply text-gray-900;
-      box-shadow: inset 3px 0px 0px 0px $tailwind-primary;
-    }
   }
 }

package/src/navigation/SideNav.tsx

@@ -0,0 +1,39 @@
+import * as React from "react"
+import { NavigationContext } from "../config/NavigationContext"
+import "./SideNav.scss"
+
+export interface SideNavItemProps {
+  current?: boolean
+  url: string
+  label: string
+}
+
+export interface SideNavProps {
+  navItems?: SideNavItemProps[]
+}
+
+const SideNav = (props: SideNavProps) => {
+  const { LinkComponent } = React.useContext(NavigationContext)
+
+  return (
+    <nav className="side-nav" aria-label="Secondary navigation">
+      <ul>
+        {props.navItems?.map((navItem: SideNavItemProps, index: number) => {
+          if (navItem.current) {
+            return (
+              <li className="is-current" key={index} aria-current="page">
+                {navItem.label}
+              </li>
+            )
+          }
+          return (
+            <li key={index}>
+              <LinkComponent href={navItem.url}>{navItem.label}</LinkComponent>
+            </li>
+          )
+        })}
+      </ul>
+    </nav>
+  )
+}
+export { SideNav as default, SideNav }

package/src/notifications/ApplicationStatus.tsx

@@ -1,12 +1,12 @@
 import * as React from "react"
-import { Icon, IconFillColors, IconTypes } from "../icons/Icon"
+import { Icon, IconFillColors, UniversalIconType } from "../icons/Icon"
 import { ApplicationStatusType } from "../global/ApplicationStatusType"
 import "./ApplicationStatus.scss"
 
 export interface ApplicationStatusProps {
   content: string
   iconColor?: string
-  iconType?: IconTypes
+  iconType?: UniversalIconType
   status?: ApplicationStatusType
   subContent?: string
   vivid?: boolean

package/src/overlays/Drawer.tsx

@@ -5,7 +5,7 @@ import { Overlay, OverlayProps } from "./Overlay"
 import { Tag } from "../text/Tag"
 import { AppearanceStyleType, AppearanceSizeType } from "../global/AppearanceTypes"
 import { AlertTypes } from "../notifications/alertTypes"
-import { AlertBox } from "../notifications"
+import { AlertBox } from "../notifications/AlertBox"
 import { nanoid } from "nanoid"
 
 export enum DrawerSide {

package/src/overlays/Modal.scss

@@ -34,6 +34,11 @@
   &:last-of-type {
     @apply rounded-b;
   }
+
+  &.is-scrollable {
+    max-height: calc(100vh - 200px);
+    @apply overflow-y-auto;
+  }
 }
 
 .modal__footer {

package/src/overlays/Modal.tsx

@@ -11,6 +11,10 @@ export interface ModalProps extends Omit<OverlayProps, "children"> {
   children?: React.ReactNode
   slim?: boolean
   role?: string
+  modalClassNames?: string
+  innerClassNames?: string
+  closeClassNames?: string
+  scrollable?: boolean
 }
 
 const ModalHeader = (props: { title: string; uniqueId?: string }) => (
@@ -35,6 +39,13 @@ const ModalFooter = (props: { actions: React.ReactNode[] }) => (
 
 export const Modal = (props: ModalProps) => {
   const uniqueIdRef = useRef(nanoid())
+  const modalClassNames = ["modal"]
+  const innerClassNames = ["modal__inner"]
+  const closeClassNames = ["modal__close"]
+  if (props.scrollable) innerClassNames.push("is-scrollable")
+  if (props.modalClassNames) modalClassNames.push(...props.modalClassNames.split(" "))
+  if (props.innerClassNames) innerClassNames.push(...props.innerClassNames.split(" "))
+  if (props.closeClassNames) closeClassNames.push(...props.closeClassNames.split(" "))
 
   return (
     <Overlay
@@ -46,10 +57,10 @@ export const Modal = (props: ModalProps) => {
       slim={props.slim}
       role={props.role ? props.role : "dialog"}
     >
-      <div className="modal">
+      <div className={modalClassNames.join(" ")}>
         <ModalHeader title={props.title} uniqueId={uniqueIdRef.current} />
 
-        <section className="modal__inner">
+        <section className={innerClassNames.join(" ")}>
           {typeof props.children === "string" ? (
             <p className="c-steel">{props.children}</p>
           ) : (
@@ -60,7 +71,12 @@ export const Modal = (props: ModalProps) => {
         {props.actions && <ModalFooter actions={props.actions} />}
 
         {!props.hideCloseIcon && (
-          <button className="modal__close" aria-label="Close" onClick={props.onClose} tabIndex={0}>
+          <button
+            className={closeClassNames.join(" ")}
+            aria-label="Close"
+            onClick={props.onClose}
+            tabIndex={0}
+          >
             <Icon size="medium" symbol="close" />
           </button>
         )}