@bloom-housing/ui-components 8.2.1 → 9.0.0-alpha.1

package/src/blocks/ViewItem.tsx

@@ -23,14 +23,14 @@ const ViewItem = (props: ViewItemProps) => {
   if (props.truncated) valueClassName += " is-truncated"
 
   return (
-    <div id={props.id} className={viewItemClasses.join(" ")} data-test-id={props.dataTestId}>
+    <div id={props.id} className={viewItemClasses.join(" ")} data-testid={props.dataTestId}>
       {props.label && (
         <span className={`view-item__label ${props.error ? "text-alert text-sm" : ""}`}>
           {props.label}
         </span>
       )}
       {props.children && (
-        <span className={valueClassName} data-test-id={props.dataTestId}>
+        <span className={valueClassName} data-testid={props.dataTestId}>
           {props.children}
         </span>
       )}

package/src/forms/Dropzone.tsx

@@ -59,7 +59,7 @@ const Dropzone = (props: DropzoneProps) => {
         <progress className="dropzone__progress" max="100" value={props.progress}></progress>
       ) : (
         <div className={dropzoneClasses.join(" ")} {...getRootProps()}>
-          <input id={props.id} {...getInputProps()} data-test-id={"dropzone-input"} />
+          <input id={props.id} {...getInputProps()} data-testid={"dropzone-input"} />
           {isDragActive ? (
             <p>{props.strings?.dropHere ?? t("t.dropFilesHere")}</p>
           ) : (

package/src/forms/Field.tsx

@@ -138,7 +138,7 @@ const Field = (props: FieldProps) => {
           onPaste={props.onPaste}
           onDrop={props.onDrop}
           onChange={props.onChange}
-          data-test-id={props.dataTestId}
+          data-testid={props.dataTestId}
           {...inputProps}
           hidden={props.hidden}
         />

package/src/forms/FieldGroup.tsx

@@ -63,8 +63,8 @@ const FieldGroup = ({
 }: FieldGroupProps) => {
   // Always default align two-option radio groups side by side
   if (fields?.length === 2) {
-    fieldGroupClassName = `${fieldGroupClassName} flex`
-    fieldClassName = `${fieldClassName} flex-initial mr-4`
+    fieldGroupClassName = `${fieldGroupClassName || ""} flex`
+    fieldClassName = `${fieldClassName || ""} flex-initial mr-4`
   }
 
   const [checkedInputs, setCheckedInputs] = useState<string[]>([])
@@ -82,7 +82,7 @@ const FieldGroup = ({
           type={type}
           id={item.id}
           defaultValue={item.value || item.id}
-          name={subfieldsExist() || item.uniqueName ? `${name}-${item.value}` : name}
+          name={subfieldsExist() || item.uniqueName ? `${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) {
@@ -95,12 +95,12 @@ const FieldGroup = ({
           disabled={item.disabled}
           ref={register(validation)}
           {...item.inputProps}
-          data-test-id={item.dataTestId ?? dataTestId}
+          data-testid={item.dataTestId ?? dataTestId}
         />
         <label
           htmlFor={item.id}
-          className={`font-semibold ${fieldLabelClassName} ${
-            item.disabled && "text-gray-600 cursor-not-allowed"
+          className={`font-semibold ${fieldLabelClassName || ""} ${
+            item.disabled ? "text-gray-600 cursor-not-allowed" : ""
           }`}
         >
           {item.label}
@@ -150,8 +150,8 @@ const FieldGroup = ({
         {item.additionalText && checkedInputs.indexOf(item.label) >= 0 && (
           <Field
             id={item.id}
-            key={`${item.value}-additionalText`}
-            name={`${name}-${item.value}`}
+            key={`${item.value || ""}-additionalText`}
+            name={`${name}-${item.value || ""}`}
             register={register}
             defaultValue={item.defaultText}
             placeholder={strings?.description ?? t("t.description")}
@@ -168,12 +168,12 @@ const FieldGroup = ({
       {groupLabel && <label className="text__caps-spaced">{groupLabel}</label>}
       {groupNote && <p className="field-note mb-4">{groupNote}</p>}
 
-      <div className={`field ${error && "error"} ${fieldGroupClassName || ""} mb-0`}>
+      <div className={`field ${error ? "error" : ""} ${fieldGroupClassName || ""} mb-0`}>
         {fields?.map((item) => (
           <div className={`field ${fieldClassName || ""} mb-1`} key={item.id}>
             {getInputSet(item)}
             {item.subFields && checkedInputs.indexOf(item.label) >= 0 && (
-              <div className={"ml-8"} key={`${item.value}-subfields`}>
+              <div className={"ml-8"} key={`${item.value || ""}-subfields`}>
                 {item.subFields?.map((subItem) => {
                   return getInputSet(subItem)
                 })}

package/src/forms/HouseholdMemberForm.tsx

@@ -27,7 +27,7 @@ const HouseholdMemberForm = (props: HouseholdMemberFormProps) => {
           className="edit-link"
           onClick={() => props.editMember && props.editMember(props.memberId)}
           type={"button"}
-          data-test-id={"app-household-member-edit-button"}
+          data-testid={"app-household-member-edit-button"}
         >
           {props.strings?.edit ?? t("t.edit")}
         </button>

package/src/forms/MultiSelectField.tsx

@@ -80,7 +80,7 @@ const MultiSelectField = (props: MultiSelectFieldProps) => {
   return (
     <div className="field multi-select-field">
       {props.label && label}
-      <div className="control" data-test-id={props.dataTestId}>
+      <div className="control" data-testid={props.dataTestId}>
         <Icon symbol="search" size="medium" />
         <input
           id={props.id}

package/src/forms/PhoneField.tsx

@@ -60,7 +60,7 @@ export const PhoneField = (props: {
           {props.label}
         </label>
       )}
-      <div className={props.controlClassName} data-test-id={props.dataTestId}>
+      <div className={props.controlClassName} data-testid={props.dataTestId}>
         {props.mask ? (
           <Controller {...controllerProps} render={props.mask} />
         ) : (
@@ -68,7 +68,7 @@ export const PhoneField = (props: {
         )}
       </div>
       {props.subNote && <p className="field-sub-note">{props.subNote}</p>}
-      <ErrorMessage id={`${props.id}-error`} error={props.error}>
+      <ErrorMessage id={`${props.id || ""}-error`} error={props.error}>
         {props.errorMessage}
       </ErrorMessage>
     </div>

package/src/forms/Select.tsx

@@ -60,8 +60,8 @@ export const Select = ({
           className="input"
           id={id || name}
           name={name}
-          data-test-id={dataTestId}
-          aria-describedby={describedBy ? describedBy : `${id}-error`}
+          data-testid={dataTestId}
+          aria-describedby={describedBy ? describedBy : `${id || name}-error`}
           aria-invalid={!!error || false}
           aria-label={label}
           ref={register && register(validation)}
@@ -79,7 +79,7 @@ export const Select = ({
       </div>
       {subNote && <p className="field-sub-note">{subNote}</p>}
       {error && errorMessage && (
-        <ErrorMessage id={`${id}-error`} error={error}>
+        <ErrorMessage id={`${id || name}-error`} error={error}>
           {errorMessage}
         </ErrorMessage>
       )}

package/src/forms/Textarea.tsx

@@ -57,7 +57,7 @@ export const Textarea = (props: TextareaProps) => {
         wrap={props.wrap ?? "soft"}
         title={props.label}
         {...inputProps}
-        data-test-id={props.dataTestId}
+        data-testid={props.dataTestId}
       />
       {props.note && <p className="field-note font-normal mb-2">{props.note}</p>}
       {props.errorMessage && <span className="textarea-error-message">{props.errorMessage}</span>}

package/src/headers/Hero.tsx

@@ -20,7 +20,7 @@ export interface HeroProps {
 }
 
 const HeroButton = (props: { title: string; href: string; className?: string }) => (
-  <span className={props.className + " hero__button"}>
+  <span className={`${props.className || ""} hero__button`}>
     <LinkButton href={props.href}>{props.title}</LinkButton>
   </span>
 )
@@ -44,7 +44,7 @@ const Hero = (props: HeroProps) => {
     classNames = "centered"
   }
   return (
-    <div className={`hero ${classNames}`} style={styles} data-test-id={"hero-component"}>
+    <div className={`hero ${classNames}`} style={styles} data-testid={"hero-component"}>
       <h1 className={`hero__title ${props.extraLargeTitle ? "lg:text-6.5xl" : ""}`}>
         {props.title}
       </h1>

package/src/headers/PageHeader.tsx

@@ -31,7 +31,7 @@ const PageHeader = (props: PageHeaderProps) => {
         )}
 
         {props.title && (
-          <h1 data-test-id="page-header" className="page-header__title">
+          <h1 data-testid="page-header" className="page-header__title">
             {props.title}
           </h1>
         )}

package/src/headers/SiteHeader.tsx

@@ -157,7 +157,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
                 }
                 dropdownOptionKeyDown(event, index)
               }}
-              data-test-id={`${option.title}-${index}`}
+              data-testid={`${option.title}-${index}`}
             >
               {dropdownOptionContent(option)}
             </button>
@@ -327,7 +327,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
                   }`}
                   href={menuLink.href}
                   key={`${menuLink.title}-${index}`}
-                  data-test-id={`${menuLink.title}-${index}`}
+                  data-testid={`${menuLink.title}-${index}`}
                 >
                   {menuContent}
                 </LinkComponent>
@@ -367,7 +367,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
                 onMouseEnter={() => changeMenuShow(menuLink.title, activeMenus, setActiveMenus)}
                 onMouseLeave={() => changeMenuShow(menuLink.title, activeMenus, setActiveMenus)}
                 role={"button"}
-                data-test-id={`${menuLink.title}-${index}`}
+                data-testid={`${menuLink.title}-${index}`}
               >
                 {menuContent}
               </span>

package/src/icons/Icon.tsx

@@ -171,7 +171,7 @@ const Icon = (props: IconProps) => {
     <span
       className={wrapperClasses.join(" ")}
       aria-hidden={props.ariaHidden}
-      data-test-id={props.dataTestId ?? null}
+      data-testid={props.dataTestId ?? null}
     >
       <SpecificIcon fill={props.fill ? props.fill : undefined} />
     </span>
@@ -179,7 +179,7 @@ const Icon = (props: IconProps) => {
     <span
       className={wrapperClasses.join(" ")}
       aria-hidden={props.ariaHidden}
-      data-test-id={props.dataTestId ?? null}
+      data-testid={props.dataTestId ?? null}
       style={{ color: props.fill }}
     >
       {SpecificIcon}

package/src/notifications/AlertBox.tsx

@@ -83,7 +83,7 @@ const AlertBox = (props: AlertBoxProps) => {
   }
 
   return showing ? (
-    <div className={classNames} role="alert" data-test-id={"alert-box"}>
+    <div className={classNames} role="alert" data-testid={"alert-box"}>
       {innerSection}
     </div>
   ) : null

package/src/notifications/ErrorMessage.tsx

@@ -17,7 +17,7 @@ const ErrorMessage = (props: {
         id={props.id}
         className={classes.join(" ")}
         aria-live="assertive"
-        data-test-id={"error-message"}
+        data-testid={"error-message"}
       >
         {props.children}
       </span>

package/src/overlays/LoadingOverlay.tsx

@@ -12,7 +12,7 @@ const LoadingOverlay = ({ isLoading, children }: LoadingOverlayProps) => {
     if (!isLoading) return children
 
     return (
-      <div className="loading-overlay" data-test-id="loading-overlay">
+      <div className="loading-overlay" data-testid="loading-overlay">
         <Icon size="3xl" symbol="spinner" className="loading-overlay__spinner" />
         {children}
       </div>

package/src/page_components/listing/ContentAccordion.tsx

@@ -35,7 +35,7 @@ const ContentAccordion = (props: ContentAccordionProps) => {
         className={`w-full text-left ${props.disableAccordion ? "cursor-default" : ""}`}
         ref={buttonRef}
         aria-expanded={accordionOpen}
-        data-test-id={"content-accordion-button"}
+        data-testid={"content-accordion-button"}
       >
         <div
           className={`flex justify-between ${props.barClass ? props.barClass : ""} ${

package/src/page_components/listing/ListingCard.tsx

@@ -182,7 +182,7 @@ const ListingCard = (props: ListingCardProps) => {
   }
 
   return (
-    <article className="listings-row" data-test-id={"listing-card-component"}>
+    <article className="listings-row" data-testid={"listing-card-component"}>
       <div className="listings-row_figure">
         <ImageCard {...imageCardProps} />
       </div>

package/src/page_components/listing/listing_sidebar/GetApplication.tsx

@@ -55,7 +55,7 @@ const GetApplication = (props: ApplicationsProps) => {
   if (!showSection) return null
 
   return (
-    <section className="aside-block" data-test-id="get-application-section">
+    <section className="aside-block" data-testid="get-application-section">
       <Heading priority={2} styleType={"underlineWeighted"}>
         {props.strings?.howToApply ?? t("listings.apply.howToApply")}
       </Heading>
@@ -71,7 +71,7 @@ const GetApplication = (props: ApplicationsProps) => {
       {props.applicationsOpen && props.onlineApplicationURL && (
         <>
           {props.preview ? (
-            <Button disabled className="w-full mb-2" data-test-id={"listing-view-apply-button"}>
+            <Button disabled className="w-full mb-2" data-testid={"listing-view-apply-button"}>
               {props.strings?.applyOnline ?? t("listings.apply.applyOnline")}
             </Button>
           ) : (

package/src/page_components/sign-in/FormSignIn.tsx

@@ -105,7 +105,7 @@ const FormSignIn = ({
           />
 
           <div className="text-center mt-6">
-            <Button styleType={AppearanceStyleType.primary} data-test-id="sign-in-button">
+            <Button styleType={AppearanceStyleType.primary} data-testid="sign-in-button">
               {t("nav.signIn")}
             </Button>
           </div>

package/src/page_components/sign-in/FormSignInAddPhone.tsx

@@ -73,7 +73,7 @@ const FormSignInAddPhone = ({
           <div className="text-center mt-10">
             <Button
               styleType={AppearanceStyleType.primary}
-              data-test-id="request-mfa-code-and-add-phone"
+              data-testid="request-mfa-code-and-add-phone"
             >
               {t("nav.signInMFA.addPhoneNumber")}
             </Button>

package/src/page_components/sign-in/FormSignInMFACode.tsx

@@ -93,7 +93,7 @@ const FormSignInMFACode = ({
             note={note}
           />
           <div className="text-center mt-10">
-            <Button styleType={AppearanceStyleType.primary} data-test-id="verify-and-sign-in">
+            <Button styleType={AppearanceStyleType.primary} data-testid="verify-and-sign-in">
               {t("nav.signInMFA.signIn")}
             </Button>
           </div>

package/src/page_components/sign-in/FormSignInMFAType.tsx

@@ -74,7 +74,7 @@ const FormSignInMFAType = ({
           <div className="text-center mt-6">
             <Button
               styleType={AppearanceStyleType.accentCool}
-              data-test-id="verify-by-email"
+              data-testid="verify-by-email"
               onClick={emailOnClick}
             >
               {t("nav.signInMFA.verifyByEmail")}
@@ -83,7 +83,7 @@ const FormSignInMFAType = ({
           <div className="text-center mt-6">
             <Button
               styleType={AppearanceStyleType.accentCool}
-              data-test-id="verify-by-phone"
+              data-testid="verify-by-phone"
               onClick={smsOnClick}
             >
               {t("nav.signInMFA.verifyByPhone")}

package/src/page_components/sign-in/FormTerms.tsx

@@ -63,7 +63,7 @@ const FormTerms = (props: FormTermsProps) => {
 
         <div className="form-card__pager">
           <div className="form-card__pager-row primary">
-            <Button styleType={AppearanceStyleType.primary} data-test-id="form-submit">
+            <Button styleType={AppearanceStyleType.primary} data-testid="form-submit">
               {t("t.submit")}
             </Button>
           </div>

package/src/tables/AgPagination.tsx

@@ -67,7 +67,7 @@ const AgPagination = ({
               {t("t.show")}
             </label>
             <select
-              data-test-id="ag-page-size"
+              data-testid="ag-page-size"
               name="page-size"
               id="page-size"
               value={itemsPerPage}
@@ -86,7 +86,7 @@ const AgPagination = ({
               {t("t.jumpTo")}
             </label>
             <select
-              data-test-id="ag-page-select"
+              data-testid="ag-page-select"
               name="page-jump"
               id="page-jump"
               onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
@@ -112,7 +112,7 @@ const AgPagination = ({
       <div className="w-full md:w-auto flex justify-between mt-5 md:mt-0 ">
         <div className="md:hidden">
           <Button
-            data-test-id="ag-btn-prev"
+            data-testid="ag-btn-prev"
             className="data-pager__previous data-pager__control"
             onClick={onPrevClick}
             disabled={currentPage === 1}
@@ -122,7 +122,7 @@ const AgPagination = ({
         </div>
 
         <Button
-          data-test-id="ag-btn-next"
+          data-testid="ag-btn-next"
           className="data-pager__next data-pager__control"
           onClick={onNextClick}
           disabled={totalPages === currentPage || totalPages === 0}