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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "9.0.0-alpha.1",
+  "version": "9.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,27 +42,29 @@
     "@babel/preset-env": "^7.15.4",
     "@commitlint/cli": "^13.1.0",
     "@commitlint/config-conventional": "^13.1.0",
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-interactions": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
+    "@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",
     "@storybook/addon-storyshots": "^6.3.8",
     "@storybook/addon-storyshots-puppeteer": "^6.3.8",
-    "@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",
+    "@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",
     "@types/dompurify": "^2.3.3",
     "@types/jest": "^26.0.14",
     "@types/jwt-decode": "^2.2.1",
     "@types/mdx": "^2.0.1",
-    "@types/node": "18.14.6",
+    "@types/node": "^12.12.67",
     "@types/node-polyglot": "^2.4.1",
     "@types/pretty": "2.0.1",
     "@types/react-beautiful-dnd": "^13.1.1",
@@ -72,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": "5.28.0",
+    "@types/webpack": "^4.41.22",
     "@typescript-eslint/parser": "^5.12.1",
     "@typescript-eslint/eslint-plugin": "^5.12.1",
     "autoprefixer": "^10.3.4",
@@ -92,11 +94,8 @@
     "jest-environment-jsdom": "^26.5.3",
     "lint-staged": "^10.4.0",
     "mockdate": "^3.0.2",
-    "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",
+    "postcss": "^8.3.6",
+    "postcss-loader": "^4.3",
     "preact": "^10.5.14",
     "prettier": "^2.1.0",
     "pretty": "2.0.0",
@@ -113,7 +112,7 @@
     "ts-jest": "^26.4.1",
     "ts-loader": "^8.0.4",
     "typescript": "^4.9.4",
-    "webpack": "5.76.0"
+    "webpack": "^4.44.2"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
@@ -123,6 +122,7 @@
     "@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,17 +137,16 @@
     "markdown-to-jsx": "7.1.8",
     "nanoid": "^3.1.12",
     "node-polyglot": "^2.4.0",
-    "react": "18.2.0",
+    "react": "^17.0.2",
     "react-accessible-accordion": "^3.3.5",
     "react-beautiful-dnd": "^13.1.0",
-    "react-dom": "18.2.0",
+    "react-dom": "^17.0.2",
     "react-dropzone": "^11.3.2",
     "react-focus-lock": "^2.5.2",
     "react-hook-form": "^6.15.5",
     "react-map-gl": "^6.1.16",
     "react-media": "^1.10.0",
     "react-remove-scroll": "2.5.4",
-    "react-scripts": "5.0.1",
     "react-tabs": "^3.2.2",
     "react-text-mask": "^5.4.3",
     "react-transition-group": "^4.4.1",

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-testid"?: string
+  "data-test-id"?: string
   ariaHidden?: boolean
   ariaLabel?: string
   children: React.ReactNode
@@ -81,7 +81,7 @@ const Button = (props: ButtonProps) => {
       aria-hidden={props.ariaHidden}
       tabIndex={props.ariaHidden ? -1 : 0}
       aria-label={props.ariaLabel}
-      data-testid={props.dataTestId || props["data-testid"]}
+      data-test-id={props.dataTestId || props["data-test-id"]}
     >
       {buttonInner(props)}
     </button>

package/src/actions/LinkButton.tsx

@@ -22,7 +22,7 @@ const LinkButton = (props: LinkButtonProps) => {
       <a
         href={props.href}
         className={buttonClasses.join(" ")}
-        data-testid={props.dataTestId}
+        data-test-id={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-testid={props.dataTestId}
+        data-test-id={props.dataTestId}
       >
         {buttonInner(props)}
       </LinkComponent>

package/src/blocks/DashBlock.tsx

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

package/src/blocks/ImageCard.tsx

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

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-testid={props.dataTestId}>
+    <div id={props.id} className={viewItemClasses.join(" ")} data-test-id={props.dataTestId}>
       {props.label && (
         <span className={`view-item__label ${props.error ? "text-alert text-sm" : ""}`}>
           {props.label}
         </span>
       )}
       {props.children && (
-        <span className={valueClassName} data-testid={props.dataTestId}>
+        <span className={valueClassName} data-test-id={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-testid={"dropzone-input"} />
+          <input id={props.id} {...getInputProps()} data-test-id={"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-testid={props.dataTestId}
+          data-test-id={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-testid={item.dataTestId ?? dataTestId}
+          data-test-id={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-testid={"app-household-member-edit-button"}
+          data-test-id={"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-testid={props.dataTestId}>
+      <div className="control" data-test-id={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-testid={props.dataTestId}>
+      <div className={props.controlClassName} data-test-id={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-testid={dataTestId}
-          aria-describedby={describedBy ? describedBy : `${id || name}-error`}
+          data-test-id={dataTestId}
+          aria-describedby={describedBy ? describedBy : `${id}-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 || name}-error`} error={error}>
+        <ErrorMessage id={`${id}-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-testid={props.dataTestId}
+        data-test-id={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/tokens/sizes.scss

@@ -5,7 +5,7 @@
   --bloom-s2: 0.5rem;
   --bloom-s2_5: 0.625rem;
   --bloom-s3: 0.75rem;
-  --bloom-s3_5: 0.875;
+  --bloom-s3_5: 0.875rem;
   --bloom-s4: 1rem;
   --bloom-s5: 1.25rem;
   --bloom-s6: 1.5rem;

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-testid={"hero-component"}>
+    <div className={`hero ${classNames}`} style={styles} data-test-id={"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-testid="page-header" className="page-header__title">
+          <h1 data-test-id="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-testid={`${option.title}-${index}`}
+              data-test-id={`${option.title}-${index}`}
             >
               {dropdownOptionContent(option)}
             </button>
@@ -327,7 +327,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
                   }`}
                   href={menuLink.href}
                   key={`${menuLink.title}-${index}`}
-                  data-testid={`${menuLink.title}-${index}`}
+                  data-test-id={`${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-testid={`${menuLink.title}-${index}`}
+                data-test-id={`${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-testid={props.dataTestId ?? null}
+      data-test-id={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-testid={props.dataTestId ?? null}
+      data-test-id={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-testid={"alert-box"}>
+    <div className={classNames} role="alert" data-test-id={"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-testid={"error-message"}
+        data-test-id={"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-testid="loading-overlay">
+      <div className="loading-overlay" data-test-id="loading-overlay">
         <Icon size="3xl" symbol="spinner" className="loading-overlay__spinner" />
         {children}
       </div>

package/src/overlays/Modal.scss

@@ -4,9 +4,16 @@
   --title-font-size: var(--bloom-font-size-lg);
   --title-font-family: var(--bloom-font-sans);
   --content-font-color: var(--bloom-color-gray-700);
-  --content-padding: var(--bloom-s6);
+  --content-padding-block: 0 var(--bloom-s6);
+  --content-padding-inline: var(--bloom-s6);
+  --content-margin-top: var(--bloom-s6);
+  --title-padding-block: var(--bloom-s6) 0px;
+  --title-padding-inline: var(--bloom-s6) var(--bloom-s12);
+  --footer-padding-block: var(--bloom-s6);
+  --footer-padding-inline: var(--bloom-s6);
   --max-width: var(--bloom-width-5xl);
   --desktop-min-width: var(--bloom-width-xl);
+  --scroll-max-height: 100vh;
   --footer-background-color: var(--bloom-color-primary-lighter);
   --border-radius: var(--bloom-rounded);
   --mobile-border-radius: 0;
@@ -14,7 +21,12 @@
   --modal-shadow: var(--bloom-shadow-md);
   --modal-border: var(--bloom-border-1) solid var(--bloom-color-gray-400);
   --footer-justify: normal;
-  overflow: auto;
+  --max-height: 100vh;
+  --overflow: auto;
+  --width: 100vw;
+  --modal-header-min-height: auto;
+
+  overflow: var(--overflow);
   -webkit-overflow-scrolling: touch;
 
   display: flex;
@@ -22,12 +34,12 @@
 
   position: relative;
   max-width: var(--max-width);
-  max-height: 100vh;
+  max-height: var(--max-height);
   margin: auto;
   border: var(--modal-border);
   background-color: var(--background-color);
   box-shadow: var(--modal-shadow);
-  width: 100vw;
+  width: var(--width);
   border-radius: var(--mobile-border-radius);
 
   @media (min-width: $screen-sm) {
@@ -44,18 +56,22 @@
   }
 }
 
+.modal__header {
+  min-height: var(--modal-header-min-height);
+}
+
 .modal__title {
-  padding-block: var(--content-padding) 0px;
-  padding-inline: var(--content-padding) var(--bloom-s12);
+  padding-block: var(--title-padding-block);
+  padding-inline: var(--title-padding-inline);
   color: var(--title-color);
   font-size: var(--title-font-size);
   font-family: var(--title-font-family);
 }
 
 .modal__inner {
-  padding: var(--content-padding);
-  padding-top: 0px;
-  margin-top: var(--content-padding);
+  padding-block: var(--content-padding-block);
+  padding-inline: var(--content-padding-inline);
+  margin-top: var(--content-margin-top);
 
   &:last-of-type {
     border-bottom-right-radius: var(--border-radius);
@@ -63,7 +79,7 @@
   }
 
   &.is-scrollable {
-    max-height: 100vh;
+    max-height: var(--scroll-max-height);
     max-width: 100vw;
     @media (min-width: $screen-md) {
       max-height: calc(100vh - var(--bloom-s6));
@@ -79,7 +95,8 @@
 }
 
 .modal__footer {
-  padding: var(--content-padding);
+  padding-block: var(--footer-padding-block);
+  padding-inline: var(--footer-padding-inline);
   border-bottom-right-radius: var(--border-radius);
   border-bottom-left-radius: var(--border-radius);
   background-color: var(--footer-background-color);

package/src/overlays/Modal.stories.tsx

@@ -134,7 +134,7 @@ export const ScrollableModal = () => {
           {text("Action 1 Label", "Cancel")}
         </Button>,
       ]}
-      scrollable
+      scrollableModal
     >
       {text(
         "Content",
@@ -156,7 +156,7 @@ export const ScrollableModalNoFooter = () => {
       title={text("Title", "Modal Title")}
       ariaDescription="Modal description"
       onClose={() => setOpenModal(!openModal)}
-      scrollable
+      scrollableModal
     >
       {text(
         "Content",
@@ -175,7 +175,7 @@ export const ScrollableModalManyButtons = () => {
       title={text("Title", "Modal Title")}
       ariaDescription="Modal description"
       onClose={() => setOpenModal(!openModal)}
-      scrollable
+      scrollableModal
       actions={[
         <Button
           onClick={() => setOpenModal(!openModal)}
@@ -241,7 +241,7 @@ export const ScrollableModalMinimalContent = () => {
           {text("Action 1 Label", "Cancel")}
         </Button>,
       ]}
-      scrollable
+      scrollableModal
     >
       {text(
         "Content",

package/src/overlays/Modal.tsx

@@ -14,7 +14,8 @@ export interface ModalProps extends Omit<OverlayProps, "children"> {
   modalClassNames?: string
   headerClassNames?: string
   role?: string
-  scrollable?: boolean
+  scrollableModal?: boolean
+  scrollableOverlay?: boolean
   slim?: boolean
   title: string
 }
@@ -46,7 +47,7 @@ export const Modal = (props: ModalProps) => {
   const modalClassNames = ["modal"]
   const innerClassNames = ["modal__inner"]
   const closeClassNames = ["modal__close"]
-  if (props.scrollable) innerClassNames.push("is-scrollable")
+  if (props.scrollableModal) 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(" "))
@@ -59,9 +60,9 @@ export const Modal = (props: ModalProps) => {
       onClose={props.onClose}
       className={props.className}
       backdrop={props.backdrop}
-      scrollable={props.scrollable}
       slim={props.slim}
       role={props.role ? props.role : "dialog"}
+      scrollable={props.scrollableOverlay}
     >
       <div className={modalClassNames.join(" ")}>
         {!props.hideCloseIcon && (

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-testid={"content-accordion-button"}
+        data-test-id={"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-testid={"listing-card-component"}>
+    <article className="listings-row" data-test-id={"listing-card-component"}>
       <div className="listings-row_figure">
         <ImageCard {...imageCardProps} />
       </div>