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

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

@@ -55,8 +55,12 @@ export const PhoneField = (props: {
 
   return (
     <div className={"field " + (props.error ? "error" : "")}>
-      {props.label && <label className={labelClasses.join(" ")}>{props.label}</label>}
-      <div className={props.controlClassName} data-test-id={props.dataTestId}>
+      {props.label && (
+        <label id={"phone-label"} className={labelClasses.join(" ")}>
+          {props.label}
+        </label>
+      )}
+      <div className={props.controlClassName} data-testid={props.dataTestId}>
         {props.mask ? (
           <Controller {...controllerProps} render={props.mask} />
         ) : (
@@ -64,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/PhoneMask.tsx

@@ -20,6 +20,7 @@ export const PhoneMask = React.forwardRef((props: any, ref: any) => {
         onChange(e)
       }}
       ref={ref}
+      aria-labelledby={"phone-label"}
     />
   )
 })

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}