@bloom-housing/ui-components 3.0.1-alpha.6 → 4.0.0

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 {
@@ -25,6 +33,7 @@ interface FieldGroupProps {
   fieldGroupClassName?: string
   fieldClassName?: string
   fieldLabelClassName?: string
+  dataTestId?: string
 }
 
 const FieldGroup = ({
@@ -41,12 +50,94 @@ const FieldGroup = ({
   fieldClassName,
   fieldLabelClassName,
   groupSubNote,
+  dataTestId,
 }: FieldGroupProps) => {
   // Always align two-option radio groups side by side
   if (fields?.length === 2) {
     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>}
@@ -55,21 +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}
-            />
-            <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/HouseholdMemberForm.tsx

@@ -20,10 +20,11 @@ const HouseholdMemberForm = (props: HouseholdMemberFormProps) => {
       {props.memberFirstName} {props.memberLastName}
       {editMode ? (
         <button
-          id="edit-member"
+          id={`edit-member-${props.memberFirstName}-${props.memberLastName}`}
           className="edit-link"
           onClick={() => props.editMember && props.editMember(props.memberId)}
           type={"button"}
+          data-test-id={"app-household-member-edit-button"}
         >
           {t("t.edit")}
         </button>

package/src/forms/PhoneField.tsx

@@ -19,6 +19,7 @@ export const PhoneField = (props: {
   disabled?: boolean
   required?: boolean
   mask?: (args: any) => JSX.Element
+  dataTestId?: string
 }) => {
   const labelClasses = ["label"]
   if (props.caps) labelClasses.push("field-label--caps")
@@ -55,7 +56,7 @@ export const PhoneField = (props: {
   return (
     <div className={"field " + (props.error ? "error" : "")}>
       {props.label && <label className={labelClasses.join(" ")}>{props.label}</label>}
-      <div className={props.controlClassName}>
+      <div className={props.controlClassName} data-test-id={props.dataTestId}>
         {props.mask ? (
           <Controller {...controllerProps} render={props.mask} />
         ) : (

package/src/forms/Select.tsx

@@ -27,6 +27,7 @@ interface SelectProps {
   keyPrefix?: string
   describedBy?: string
   inputProps?: Record<string, unknown>
+  dataTestId?: string
 }
 
 export const Select = ({
@@ -47,6 +48,7 @@ export const Select = ({
   inputProps,
   defaultValue,
   subNote,
+  dataTestId,
 }: SelectProps) => {
   return (
     <div className={`field ${error ? "error" : ""}`}>
@@ -58,8 +60,10 @@ export const Select = ({
           className="input"
           id={id || name}
           name={name}
+          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/forms/TimeField.tsx

@@ -28,6 +28,7 @@ export type TimeFieldProps = {
   required?: boolean
   watch: UseFormMethods["watch"]
   seconds?: boolean
+  dataTestId?: string
 }
 
 export const formatDateToTimeField = (date: Date) => {
@@ -54,6 +55,7 @@ const TimeField = ({
   seconds,
   defaultValues,
   disabled,
+  dataTestId,
 }: TimeFieldProps) => {
   const fieldName = (baseName: string) => {
     return [name, baseName].filter((item) => item).join(".")
@@ -99,6 +101,7 @@ const TimeField = ({
           register={register}
           describedBy={`${id}-error`}
           disabled={disabled}
+          dataTestId={dataTestId ? `${dataTestId}-hours` : undefined}
         />
 
         <Field
@@ -122,6 +125,7 @@ const TimeField = ({
           register={register}
           describedBy={`${id}-error`}
           disabled={disabled}
+          dataTestId={dataTestId ? `${dataTestId}-minutes` : undefined}
         />
 
         {seconds && (
@@ -146,6 +150,7 @@ const TimeField = ({
             register={register}
             describedBy={`${id}-error`}
             disabled={disabled}
+            dataTestId={dataTestId ? `${dataTestId}-seconds` : undefined}
           />
         )}
 
@@ -161,6 +166,7 @@ const TimeField = ({
           error={error}
           describedBy={`${id}-error`}
           disabled={disabled}
+          dataTestId={dataTestId ? `${dataTestId}-period` : undefined}
         />
       </div>
 

package/src/global/forms.scss

@@ -323,6 +323,7 @@ input[type="number"] {
   @apply text-tiny;
   @apply text-gray-700;
   @apply font-semibold;
+  white-space: pre-line;
 }
 
 .error-message {

package/src/headers/Hero.scss

@@ -20,6 +20,13 @@
   width: 100%;
 }
 
+.hero__buttons {
+  @apply grid;
+  @apply md:grid-cols-4;
+  @apply gap-5;
+  @apply max-w-screen-md;
+  @apply m-auto;
+}
 .hero__title {
   @apply text-4xl;
   @apply mb-5;

package/src/headers/Hero.tsx

@@ -37,7 +37,7 @@ const Hero = (props: HeroProps) => {
     classNames = "centered"
   }
   return (
-    <div className={`hero ${classNames}`} style={styles}>
+    <div className={`hero ${classNames}`} style={styles} data-test-id={"hero-component"}>
       <h1 className={`hero__title ${props.extraLargeTitle ? "lg:text-6.5xl" : ""}`}>
         {props.title}
       </h1>
@@ -46,9 +46,9 @@ const Hero = (props: HeroProps) => {
       {props.buttonTitle && props.buttonLink && (
         <>
           {props.secondaryButtonTitle && props.secondaryButtonLink ? (
-            <div className="grid md:grid-cols-6 gap-5 max-w-screen-lg m-auto">
+            <div className="hero__buttons">
               <HeroButton
-                className={"md:col-start-3 with_secondary"}
+                className={"md:col-start-2 with_secondary"}
                 href={props.buttonLink}
                 title={props.buttonTitle}
               />

package/src/headers/PageHeader.tsx

@@ -4,7 +4,7 @@ import "./PageHeader.scss"
 export interface PageHeaderProps {
   className?: string
   inverse?: boolean
-  title: React.ReactNode
+  title?: React.ReactNode
   subtitle?: string
   children?: React.ReactNode
   tabNav?: React.ReactNode
@@ -26,7 +26,7 @@ const PageHeader = (props: PageHeaderProps) => {
   return (
     <header className={classNames.join(" ")}>
       <hgroup className="page-header__group">
-        <h1 className="page-header__title">{props.title}</h1>
+        {props.title && <h1 className="page-header__title">{props.title}</h1>}
         {props.subtitle && <p className="page-header__lead"> {props.subtitle}</p>}
         {props.children}
 

package/src/headers/SiteHeader.scss

@@ -322,7 +322,10 @@
   .navbar-notice {
     @apply w-full;
     @apply bg-primary;
-    @apply text-right;
+    @screen md {
+      @apply text-right;
+    }
+    @apply text-left;
     @apply text-white;
     @apply block;
   }
@@ -338,11 +341,9 @@
   .navbar-notice__text {
     @apply max-w-5xl;
     @apply text-sm;
-    @apply pt-2;
-    @apply pb-2;
-    @apply pr-3;
+    @apply py-2;
+    @apply px-3;
     margin: auto;
-    height: 36px;
 
     a,
     a:hover {

package/src/icons/Icon.tsx

@@ -133,6 +133,7 @@ export interface IconProps {
   symbol: IconTypes
   className?: string
   fill?: string
+  ariaHidden?: boolean
 }
 
 const Icon = (props: IconProps) => {
@@ -144,7 +145,7 @@ const Icon = (props: IconProps) => {
   const SpecificIcon = IconMap[props.symbol]
 
   return (
-    <span className={wrapperClasses.join(" ")}>
+    <span className={wrapperClasses.join(" ")} aria-hidden={props.ariaHidden}>
       <SpecificIcon fill={props.fill ? props.fill : undefined} />
     </span>
   )

package/src/icons/Icons.tsx

@@ -474,9 +474,14 @@ export const MailThin = (props: IconProps) => {
       fill={props.fill ?? "none"}
       xmlns="http://www.w3.org/2000/svg"
     >
-      <rect width="80" height="75" fill="#E5E5E5" />
+      <rect width="80" height="75" fill={props.fill ?? "none"} />
       <g clipPath="url(#clip0)">
-        <rect width="1280" height="1390" transform="translate(-284 -530)" fill="white" />
+        <rect
+          width="1280"
+          height="1390"
+          transform="translate(-284 -530)"
+          fill={props.fill ?? "none"}
+        />
         <path
           d="M61.3749 24.2402L43.2061 39.7424C41.8262 40.8341 39.7563 40.8341 38.3764 39.7424L19.9775 24.2402"
           stroke="black"

package/src/locales/es.json

@@ -130,10 +130,12 @@
       "assistanceUrl": "https://exygy.com/",
       "dontQualifyHeader": "Desafortunadamente, parece que usted no reúne los requisitos de este listado.",
       "dontQualifyInfo": "Por favor haga cambios si usted cree haber cometido algún error. Tenga presente que si usted falsifica cualquier tipo de información en su solicitud será descalificado(a). Si la información que usted ingresó es correcta, lo invitamos a visitarnos en el futuro a medida que otras propiedades están disponibles.",
+      "genericSubtitle": "Si se eligiera su solicitud, esté preparado para proporcionar documentación respaldatoria.",
       "addMembers": {
         "addHouseholdMember": "+ Añadir a un miembro del hogar",
         "done": "Ya terminó de añadir personas",
-        "title": "Háblenos un poco acerca de su hogar."
+        "title": "Háblenos un poco acerca de su hogar.",
+        "doubleCheck": "Por favor revise la información de cada miembro del hogar."
       },
       "householdMember": "Miembro del hogar",
       "householdMembers": "Miembros del hogar",
@@ -145,6 +147,7 @@
       "preferredUnit": {
         "preferredUnitType": "Tipo de vivienda preferida",
         "title": "¿Cuáles son los tamaños de vivienda que le interesan?",
+        "subTitle": "Aunque los tamaños de las unidades en general se basen en la ocupación, indique el tamaño de unidad que desee para determinar su preferencia en esta oportunidad o establecer una lista de espera (solo por esta oportunidad).",
         "optionsLabel": "Marque todas las opciones que correspondan:",
         "options": {
           "studio": "Estudio",
@@ -154,6 +157,14 @@
           "fourBdrm": "+ de 3 dormitorios"
         }
       },
+      "expectingChanges": {
+        "title": "Espera cambios en su grupo familiar",
+        "question": "¿Espera que haya cambios en su grupo familiar en los próximos 12 meses?"
+      },
+      "householdStudent": {
+        "title":  "El grupo familiar incluye un estudiante o miembro que está por cumplir 18 años",
+        "question": "¿Alguien de su grupo familiar es estudiante a tiempo completo o cumplirá 18 años en los próximos 60 días?"
+      },
       "member": {
         "cancelAddingThisPerson": "Cancelar añadir a esta persona",
         "deleteThisPerson": "Borrar a esta persona",
@@ -277,7 +288,21 @@
           "americanIndianAlaskanNativeAndWhite": "Indígena norteamericano o nativo de Alaska y blanco",
           "asianAndWhite": "Asiático y blanco",
           "blackAfricanAmericanAndWhite": "Negro o afroamericano y blanco",
-          "otherMutliracial": "Otro / Multirracial"
+          "otherMutliracial": "Otro / Multirracial",
+          "asian-otherAsian": "De otro país asiático",
+          "asian-chinese": "Chino",
+          "asian-asianIndian": "Indio asiático",
+          "declineToRespond": "No desea responder",
+          "asian-filipino": "Filipino",
+          "nativeHawaiianOtherPacificIslander-guamanianOrChamorro": "Guameño o chamorro",
+          "asian-japanese": "Japonés",
+          "asian-korean": "Coreano",
+          "nativeHawaiianOtherPacificIslander-nativeHawaiian": "Nativo hawaiano",
+          "otherMultiracial": "Otro/multirracial",
+          "nativeHawaiianOtherPacificIslander-otherPacificIslander": "Otro habitante de una isla del Pacífico",
+          "nativeHawaiianOtherPacificIslander-samoan": "Samoano",
+          "asian-vietnamese": "Vietnamita"
+
         },
         "genderOptions": {
           "female": "Mujer",
@@ -295,7 +320,7 @@
           "notListed": "No aparece en la lista"
         },
         "howDidYouHearOptions": {
-          "alamedaCountyHCDWebsite": "Sitio web del HCD del Condado de Alameda",
+          "jurisdictionWebsite": "Sitio web del HCD del Condado de Alameda",
           "developerWebsite": "Sitio web del constructor",
           "flyer": "Folleto",
           "emailAlert": "Aviso por email",
@@ -364,7 +389,22 @@
     "signIn": {
       "error": "Hubo un error cuando usted inició sesión",
       "errorGenericMessage": "Por favor inténtelo de nuevo, o comuníquese con servicio al cliente para recibir asistencia.",
+      "forgotPassword": "Olvidé la contraseña",
       "success": "¡Bienvenido de nuevo, %{name}!"
+    },
+    "createAccount": {
+      "accountConfirmed": "Su cuenta ha sido confirmada correctamente.",
+      "password": "Contraseña",
+      "noAccount": "No tienes una cuenta?",
+      "anEmailHasBeenSent": "Se ha enviado un email a %{email}",
+      "confirmationInstruction": "Por favor haga clic en el enlace del email que le hemos enviado para completar la creación de su cuenta.",
+      "confirmationNeeded": "Se necesita confirmación",
+      "resendTheEmail": "Volver a enviar el email",
+      "reEnterEmail": "Vuelva a introducir la dirección de correo electrónico",
+      "passwordInfo": "Debe tener al menos 8 caracteres e incluir al menos 1 letra y al menos un número",
+      "reEnterPassword": "Reingresa tu contraseña",
+      "mustBe8Chars": "debe tener 8 caracteres",
+      "yourName": "Su nombre"
     }
   },
   "errors": {
@@ -402,7 +442,7 @@
     "forGeneralQuestions": "Si requiere información general sobre el programa, nos puede llamar al 000-000-0000.",
     "giveFeedback": "Proporcione sus comentarios",
     "privacyPolicy": "Política de privacidad",
-    "copyright": "Demonstration County © 2020 • Todos los derechos reservados."
+    "copyright": "Demonstration Jurisdiction © 2021 • Todos los derechos reservados."
   },
   "housingCounselors": {
     "subtitle": "Hable con un asesor de vivienda local en forma específica a sus necesidades.",
@@ -567,7 +607,8 @@
   },
   "nav": {
     "accountSettings": "Configuraciones de la cuenta",
-    "browseProperties": "Ver Propiedades",
+    "browseProperties": "Buscar Propiedades",
+    "getFeedback": "Nos encantaría recibir sus comentarios",
     "getAssistance": "Obtener asistencia",
     "listings": "Listados",
     "properties": "Propiedades",
@@ -674,6 +715,7 @@
     "edit": "Editar",
     "email": "Email",
     "emailAddressPlaceholder": "you@myemail.com",
+    "description": "Ingrese descripción",
     "floor": "piso",
     "floors": "pisos",
     "getDirections": "Obtener instrucciones para llegar",
@@ -702,6 +744,7 @@
     "phone": "Teléfono",
     "phoneNumberPlaceholder": "(555) 555-5555",
     "pleaseSelectOne": "Por favor seleccione una opción.",
+    "pleaseSelectYesNo": "Elija “sí” o “no”.",
     "preferences": "Preferencias",
     "propertyAmenities": "Servicios en la propiedad",
     "range": "%{from} a %{to}",
@@ -737,7 +780,11 @@
     "seeRentalListings": "Ver viviendas en alquiler",
     "title": "Haga su solicitud de vivienda de precio accesible en",
     "seeMoreOpportunities": "Ver más oportunidades de alquiler y propiedad de vivienda",
-    "viewAdditionalHousing": "Vea Oportunidades y recursos adicionales de vivienda"
+    "viewAdditionalHousing": "Vea Oportunidades y recursos adicionales de vivienda",
+    "seeMoreOpportunitiesTruncated": "Ver más oportunidades y recursos de vivienda",
+    "viewAdditionalHousingTruncated": "Ver oportunidades y recursos",
+    "signUp": "Reciba correos electrónicos cuando se publique un anuncio nuevo",
+    "signUpToday": "Regístrese hoy"
   },
   "whatToExpect": {
     "label": "Lo que puede esperar",