@bloom-housing/ui-components 10.0.16 → 12.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "10.0.16",
+  "version": "12.0.0",
   "author": "Sean Albert <sean.albert@exygy.com>",
   "description": "Shared user interface components for Bloom affordable housing system",
   "homepage": "https://github.com/bloom-housing/ui-components",
@@ -42,29 +42,29 @@
     "@babel/preset-env": "^7.15.4",
     "@commitlint/cli": "^13.1.0",
     "@commitlint/config-conventional": "^13.1.0",
-    "@emotion/core": "^10.0.35",
-    "@emotion/styled": "^10.0.27",
-    "@geometricpanda/storybook-addon-badges": "^0.2.1",
-    "@storybook/addon-a11y": "^6.3.8",
-    "@storybook/addon-actions": "^6.3.8",
-    "@storybook/addon-docs": "^6.3.8",
-    "@storybook/addon-knobs": "^6.3.1",
+    "@geometricpanda/storybook-addon-badges": "^1.1.1",
+    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-a11y": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-interactions": "^6.5.16",
+    "@storybook/addon-links": "^6.5.16",
+    "@storybook/addon-knobs": "^6.4.0",
     "@storybook/addon-storyshots": "^6.3.8",
     "@storybook/addon-storyshots-puppeteer": "^6.3.8",
-    "@storybook/addon-viewport": "^6.3.8",
-    "@storybook/addons": "^6.3.8",
-    "@storybook/api": "^6.3.8",
-    "@storybook/components": "^6.3.8",
-    "@storybook/core-events": "^6.3.8",
-    "@storybook/react": "^6.3.8",
-    "@storybook/theming": "^6.3.8",
-    "@testing-library/jest-dom": "^5.11.9",
-    "@testing-library/react": "^11.2.5",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/node-logger": "^6.5.16",
+    "@storybook/preset-create-react-app": "^4.1.2",
+    "@storybook/react": "^6.5.16",
+    "@storybook/testing-library": "^0.0.13",
+    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/react": "14.0.0",
     "@types/dompurify": "^2.3.3",
     "@types/jest": "^26.0.14",
     "@types/jwt-decode": "^2.2.1",
     "@types/mdx": "^2.0.1",
-    "@types/node": "^12.12.67",
+    "@types/node": "18.14.6",
     "@types/node-polyglot": "^2.4.1",
     "@types/pretty": "2.0.1",
     "@types/react-beautiful-dnd": "^13.1.1",
@@ -74,7 +74,7 @@
     "@types/react-test-renderer": "^16.9.3",
     "@types/react-text-mask": "^5.4.6",
     "@types/react-transition-group": "^4.4.0",
-    "@types/webpack": "^4.41.22",
+    "@types/webpack": "5.28.0",
     "@typescript-eslint/parser": "^5.12.1",
     "@typescript-eslint/eslint-plugin": "^5.12.1",
     "autoprefixer": "^10.3.4",
@@ -94,8 +94,11 @@
     "jest-environment-jsdom": "^26.5.3",
     "lint-staged": "^10.4.0",
     "mockdate": "^3.0.2",
-    "postcss": "^8.3.6",
-    "postcss-loader": "^4.3",
+    "postcss": "8.4.19",
+    "postcss-import": "^14.1.0",
+    "postcss-load-config": "^3.1.4",
+    "postcss-loader": "7.0.1",
+    "postcss-nested": "6.0.0",
     "preact": "^10.5.14",
     "prettier": "^2.1.0",
     "pretty": "2.0.0",
@@ -112,7 +115,7 @@
     "ts-jest": "^26.4.1",
     "ts-loader": "^8.0.4",
     "typescript": "^4.9.4",
-    "webpack": "^4.44.2"
+    "webpack": "5.76.0"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
@@ -122,7 +125,6 @@
     "@mapbox/mapbox-sdk": "^0.13.0",
     "@types/jwt-decode": "^2.2.1",
     "@types/mdx": "^2.0.1",
-    "@types/node": "^12.12.67",
     "@types/node-polyglot": "^2.4.1",
     "@types/react-beautiful-dnd": "^13.1.1",
     "@types/react-dom": "^16.9.5",
@@ -137,10 +139,10 @@
     "markdown-to-jsx": "7.1.8",
     "nanoid": "^3.1.12",
     "node-polyglot": "^2.4.0",
-    "react": "^17.0.2",
-    "react-accessible-accordion": "^3.3.5",
+    "react": "18.2.0",
+    "react-accessible-accordion": "5.0.0",
     "react-beautiful-dnd": "^13.1.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "18.2.0",
     "react-dropzone": "^11.3.2",
     "react-focus-lock": "^2.5.2",
     "react-hook-form": "^6.15.5",

package/src/actions/Button.tsx

@@ -4,7 +4,7 @@ import { AppearanceProps, classNamesForAppearanceTypes } from "../global/Appeara
 import { Icon, IconSize, UniversalIconType } from "../icons/Icon"
 
 export interface ButtonProps extends AppearanceProps {
-  "data-test-id"?: string
+  "data-testid"?: string
   ariaHidden?: boolean
   ariaLabel?: string
   children: React.ReactNode
@@ -96,7 +96,7 @@ const Button = (props: ButtonProps) => {
       aria-hidden={props.ariaHidden}
       tabIndex={props.ariaHidden ? -1 : 0}
       aria-label={props.ariaLabel}
-      data-test-id={props.dataTestId || props["data-test-id"]}
+      data-testid={props.dataTestId || props["data-testid"]}
     >
       {buttonInner(props)}
     </button>

package/src/actions/LinkButton.tsx

@@ -22,7 +22,7 @@ const LinkButton = (props: LinkButtonProps) => {
       <a
         href={props.href}
         className={buttonClasses.join(" ")}
-        data-test-id={props.dataTestId}
+        data-testid={props.dataTestId}
         target={props.newTab ? "_blank" : "_self"}
       >
         {buttonInner(props)}
@@ -41,7 +41,7 @@ const LinkButton = (props: LinkButtonProps) => {
         aria-hidden={props.ariaHidden}
         tabIndex={props.ariaHidden ? -1 : 0}
         className={buttonClasses.join(" ")}
-        data-test-id={props.dataTestId}
+        data-testid={props.dataTestId}
       >
         {buttonInner(props)}
       </LinkComponent>

package/src/blocks/DashBlock.tsx

@@ -41,7 +41,7 @@ const DashBlock = (props: DashBlockProps) => {
     )
   }
   return (
-    <div className="dash-block" data-test-id={props.dataTestId}>
+    <div className="dash-block" data-testid={props.dataTestId}>
       {wrapper}
     </div>
   )

package/src/blocks/FormCard.scss

@@ -1,3 +1,5 @@
+@import "../global/mixins.scss";
+
 .form-card {
   @apply bg-white;
 
@@ -70,6 +72,7 @@
 
   @screen print {
     @apply py-2;
+    @apply px-0;
   }
 }
 
@@ -87,11 +90,16 @@
 }
 
 .form-card__group {
-  @apply px-8;
+  @screen md {
+    @apply px-8;
+  }
+
+  @screen print {
+    @apply px-0;
+  }
 }
 
 .form-card__header {
-  @apply text-white;
   @apply text-center;
 
   @screen md {
@@ -100,7 +108,10 @@
 }
 
 .form-card__header_group {
-  @apply flex justify-center items-center;
+  @apply text-white;
+  @apply flex;
+  @apply justify-center;
+  @apply items-center;
   @apply bg-primary;
   @apply p-4;
   @apply h-16;
@@ -112,14 +123,14 @@
   @screen print {
     @apply py-0;
   }
-}
 
-.form-card__header_title {
-  @apply text-xl;
-  @apply font-alt-sans;
-  @apply font-bold;
-  @apply uppercase;
-  @apply mb-0;
+  @include headings {
+    @apply text-xl;
+    @apply font-alt-sans;
+    @apply font-bold;
+    @apply uppercase;
+    @apply mb-0;
+  }
 }
 
 .form-card__header_nav {

package/src/blocks/FormCard.stories.tsx

@@ -0,0 +1,12 @@
+import React from "react"
+import FormCard from "./FormCard"
+import Heading from "../text/Heading"
+export default {
+  title: "Blocks/Form Card",
+}
+
+export const defaultCard = () => (
+  <FormCard header={<Heading priority={1}>Header</Heading>}>Children</FormCard>
+)
+
+export const noHeader = () => <FormCard>Children</FormCard>

package/src/blocks/FormCard.tsx

@@ -2,26 +2,19 @@ import * as React from "react"
 import "./FormCard.scss"
 
 export interface FormCardProps {
-  header?: FormCardHeader
+  header?: React.ReactNode
   children: React.ReactNode
   className?: string
 }
 
-export interface FormCardHeader {
-  isVisible: boolean
-  title: string
-}
-
 const FormCard = (props: FormCardProps) => {
-  const classNames = props.className ? `${props.className} form-card` : "form-card"
-  if (props.header?.isVisible) {
+  const classNames = `form-card ${props.className || ""}`
+  if (props.header) {
     return (
       <article className={classNames}>
         <div className="form-card__header">
-          <header className="form-card__header_group">
-            {props.header.title && (
-              <h1 className="form-card__header_title">{props.header.title}</h1>
-            )}
+          <header className="form-card__header_group form-card__header_title">
+            {props.header}
           </header>
 
           <div className="form-card__header_nav">{props.children}</div>

package/src/blocks/ImageCard.tsx

@@ -147,7 +147,7 @@ const ImageCard = (props: ImageCardProps) => {
                     ? `${props.images.length - 2} ${props.moreImagesDescription}`
                     : "More Images"
                 }
-                data-test-id="open-modal-button"
+                data-testid="open-modal-button"
                 onClick={() => {
                   setShowModal(true)
                 }}

package/src/blocks/Tooltip.tsx

@@ -50,12 +50,12 @@ const Tooltip = ({ className, id, text, children }: React.PropsWithChildren<Tool
         style={position || {}}
         role="tooltip"
         id={id}
-        data-test-id="tooltip-element"
+        data-testid="tooltip-element"
       >
         {text}
       </div>
 
-      <div className="tooltip__children" data-test-id="tooltip-children" ref={childrenWrapperRef}>
+      <div className="tooltip__children" data-testid="tooltip-children" ref={childrenWrapperRef}>
         {children}
       </div>
     </div>

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 ? "view-item__label-error" : ""}`}>
           {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

@@ -150,7 +150,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/global/mixins.scss

@@ -199,3 +199,14 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+@mixin headings {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @content;
+  }
+}

package/src/headers/Hero.tsx

@@ -52,7 +52,7 @@ const Hero = (props: HeroProps) => {
   }
 
   return (
-    <div className={heroClasses.join(" ")} style={styles} data-test-id="hero-component">
+    <div className={heroClasses.join(" ")} style={styles} data-testid="hero-component">
       <div className={innerClasses.join(" ")}>
         <h1
           className={`hero__title 

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

@@ -182,8 +182,8 @@ const Icon = (props: IconProps) => {
     <span
       className={wrapperClasses.join(" ")}
       aria-hidden={props.ariaHidden}
-      data-test-id={props.dataTestId ?? null}
       tabIndex={props.tabIndex}
+      data-testid={props.dataTestId ?? null}
     >
       <SpecificIcon
         fill={props.fill ? props.fill : undefined}
@@ -194,7 +194,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 ${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

@@ -210,7 +210,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>