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

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/AdditionalFees.stories.tsx

@@ -111,3 +111,7 @@ export const costsNotIncluded = () => {
     />
   )
 }
+
+export const multipleFooters = () => {
+  return <AdditionalFees strings={strings} footerContent={["Footer 1", "Footer 2", "Footer 3"]} />
+}

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>

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-testid="get-application-section">
+    <section className="aside-block" data-test-id="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-testid={"listing-view-apply-button"}>
+            <Button disabled className="w-full mb-2" data-test-id={"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-testid="sign-in-button">
+            <Button styleType={AppearanceStyleType.primary} data-test-id="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-testid="request-mfa-code-and-add-phone"
+              data-test-id="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-testid="verify-and-sign-in">
+            <Button styleType={AppearanceStyleType.primary} data-test-id="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-testid="verify-by-email"
+              data-test-id="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-testid="verify-by-phone"
+              data-test-id="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-testid="form-submit">
+            <Button styleType={AppearanceStyleType.primary} data-test-id="form-submit">
               {t("t.submit")}
             </Button>
           </div>

package/src/sections/InfoCardGrid.scss

@@ -1,5 +1,11 @@
+.info-cards {
+  --header-margin: var(--bloom-s3) 0 var(--bloom-s3) 0;
+  --title-font-size: var(--bloom-font-size-sm);
+  --info-card-font-size: var(--bloom-font-size-sm);
+}
+
 .info-cards__header {
-  @apply my-3;
+  margin: var(--header-margin);
 
   @screen md {
     margin-right: 1rem;
@@ -7,18 +13,7 @@
 }
 
 .info-cards__title {
-  @apply font-alt-sans;
-  @apply uppercase;
-  @apply text-sm;
-  @apply mb-5;
-  @apply pb-2;
-  @apply border-0;
-  @apply border-b-4;
-  @apply border-primary;
-  @apply font-semibold;
-  @apply text-gray-800;
-  @apply tracking-widest;
-  @apply inline-block;
+  font-size: var(--title-font-size);
 }
 
 .info-cards__subtitle {
@@ -30,16 +25,17 @@
   @screen md {
     @apply flex;
     @apply flex-wrap;
+    column-gap: 1rem;
   }
 
   .info-card {
     & > :not(.info-card__title) {
-      @apply text-sm;
+      font-size: var(--info-card-font-size);
     }
 
     @screen md {
-      width: calc(50% - 1rem);
-      margin-right: 1rem;
+      width: calc(50% - 0.5rem);
+      margin-right: auto;
     }
   }
 }

package/src/sections/InfoCardGrid.tsx

@@ -11,7 +11,7 @@ export interface InfoCardGridProps {
 const InfoCardGrid = (props: InfoCardGridProps) => (
   <section className="info-cards">
     <header className="info-cards__header">
-      <Heading styleType={"underlineWeighted"} priority={2} className={"text-sm"}>
+      <Heading styleType={"underlineWeighted"} priority={2} className={"info-cards__title"}>
         {props.title}
       </Heading>
       {props.subtitle && <p className="info-cards__subtitle">{props.subtitle}</p>}

package/src/tables/AgPagination.tsx

@@ -67,7 +67,7 @@ const AgPagination = ({
               {t("t.show")}
             </label>
             <select
-              data-testid="ag-page-size"
+              data-test-id="ag-page-size"
               name="page-size"
               id="page-size"
               value={itemsPerPage}
@@ -86,7 +86,7 @@ const AgPagination = ({
               {t("t.jumpTo")}
             </label>
             <select
-              data-testid="ag-page-select"
+              data-test-id="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-testid="ag-btn-prev"
+            data-test-id="ag-btn-prev"
             className="data-pager__previous data-pager__control"
             onClick={onPrevClick}
             disabled={currentPage === 1}
@@ -122,7 +122,7 @@ const AgPagination = ({
         </div>
 
         <Button
-          data-testid="ag-btn-next"
+          data-test-id="ag-btn-next"
           className="data-pager__next data-pager__control"
           onClick={onNextClick}
           disabled={totalPages === currentPage || totalPages === 0}

package/src/text/Tag.tsx

@@ -8,6 +8,7 @@ export interface TagProps extends AppearanceProps {
   capitalized?: boolean
   children: React.ReactNode
   fillContainer?: boolean
+  ariaLabel?: string
 }
 
 export const Tag = (props: TagProps) => {
@@ -18,5 +19,9 @@ export const Tag = (props: TagProps) => {
   if (props.capitalized) tagClasses.push("is-capitalized")
   if (props.className) tagClasses.push(props.className)
 
-  return <span className={tagClasses.join(" ")}>{props.children}</span>
+  return (
+    <span className={tagClasses.join(" ")} aria-label={props.ariaLabel || undefined}>
+      {props.children}
+    </span>
+  )
 }