@bloom-housing/ui-components 7.3.2 → 8.0.0

package/src/page_components/listing/ListingCard.stories.tsx

@@ -74,11 +74,7 @@ export const withStackedTable = () => {
         },
         stackedData: [
           {
-            units: {
-              cellText: "Studio",
-              cellSubText: "23 available",
-              hideSubTextMobile: true,
-            },
+            units: { cellText: "Studio", cellSubText: "23 available", hideSubTextMobile: true },
             availability: { cellText: "23", cellSubText: "available" },
             income: { cellText: "$0 to $6,854", cellSubText: "per month" },
             rent: { cellText: "30%", cellSubText: "income" },
@@ -105,10 +101,7 @@ export const WithHeaders = () => {
       tableProps={{ ...standardTableProps }}
       footerButtons={[{ text: "See Details", href: "see-details-link", ariaHidden: true }]}
       contentProps={{
-        contentHeader: {
-          content: "Optional content header",
-          href: "listing-link",
-        },
+        contentHeader: { content: "Optional content header", href: "listing-link" },
         contentSubheader: { content: "Optional content subheader" },
         tableHeader: { content: "Optional table header" },
         tableSubheader: { content: "Optional table subheader" },
@@ -124,10 +117,7 @@ export const WithPillHeader = () => {
       tableProps={{ ...standardTableProps }}
       footerButtons={[{ text: "See Details", href: "see-details-link", ariaHidden: true }]}
       contentProps={{
-        contentHeader: {
-          content: "Optional content header",
-          href: "listing-link",
-        },
+        contentHeader: { content: "Optional content header", href: "listing-link" },
         contentSubheader: { content: "Optional content subheader" },
         tableHeader: { content: "Optional table header", isPillType: true },
       }}
@@ -184,9 +174,7 @@ export const WithHeadersContent = () => {
         contentHeader: { content: "Property Listing" },
         contentSubheader: { content: "Street Address, Local City ST 12345" },
         tableHeader: { content: "Open Waitlist & Available Units" },
-        tableSubheader: {
-          content: "Includes priority units for mobility impairments",
-        },
+        tableSubheader: { content: "Includes priority units for mobility impairments" },
       }}
     />
   )
@@ -224,7 +212,7 @@ const exampleCustomContent = () => {
   }
   return (
     <div className={"text-gray-750"}>
-      <div className={"font-alt-sans font-semibold text-base mb-2 text-gray-900"}>
+      <div className={"font-alt-sans font-semibold text-base mb-2 text-gray-950"}>
         Available units
       </div>
       {getHeader("Units")}

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

@@ -66,7 +66,7 @@ const Contact = ({
             </a>
           </p>
           {contactPhoneNumberNote && (
-            <p className="text-sm text-gray-700">{contactPhoneNumberNote}</p>
+            <p className="text-xs text-gray-700">{contactPhoneNumberNote}</p>
           )}
         </>
       )}
@@ -99,7 +99,7 @@ const Contact = ({
             <Heading priority={3} styleType={"capsWeighted"}>
               {info.title}
             </Heading>
-            <div className="text-gray-800 text-tiny markdown">{info.content}</div>
+            <div className="text-gray-800 text-sm markdown">{info.content}</div>
           </div>
         )
       })}

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

@@ -32,7 +32,7 @@ const ExpandableSection = ({ content, expandableContent, strings }: ExpandableSe
       <Heading priority={4} styleType={"underlineWeighted"}>
         {strings.title}
       </Heading>
-      <div className="text-tiny text-gray-750">
+      <div className="text-sm text-gray-750">
         {getTextContent(content)}
         {expandableContent && (
           <div className={"mt-2"}>

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

@@ -90,7 +90,7 @@ const GetApplication = (props: ApplicationsProps) => {
       {props.applicationsOpen && props.paperMethod && !!props.paperApplications?.length && (
         <>
           {props.onlineApplicationURL && <OrDivider bgColor="white" />}
-          <div className="text-serif-lg">
+          <div className="text-serif-xl">
             {props.strings?.getAPaperApplication ?? t("listings.apply.getAPaperApplication")}
           </div>
           <Button
@@ -107,7 +107,7 @@ const GetApplication = (props: ApplicationsProps) => {
       )}
       {showDownload &&
         props.paperApplications?.map((paperApplication: PaperApplication, index: number) => (
-          <p key={index} className="text-center mt-2 mb-4 text-sm">
+          <p key={index} className="text-center mt-2 mb-4 text-xs">
             <a
               href={paperApplication.fileURL}
               title={props.strings?.downloadApplication ?? t("listings.apply.downloadApplication")}
@@ -134,7 +134,7 @@ const GetApplication = (props: ApplicationsProps) => {
               <Heading priority={3} styleType={"capsWeighted"}>
                 {props.strings?.officeHoursHeading ?? t("leasingAgent.officeHours")}
               </Heading>
-              <p className="text-gray-800 text-tiny markdown">
+              <p className="text-gray-800 text-sm markdown">
                 <Markdown
                   children={props.applicationPickUpAddressOfficeHours}
                   options={{ disableParsingRawHTML: true }}

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

@@ -13,7 +13,7 @@ const ListingUpdated = (props: ListingUpdatedProps) => {
   const listingUpdated = props.listingUpdated
   return (
     <section className="aside-block">
-      <p className="text-tiny text-gray-800">
+      <p className="text-sm text-gray-800">
         {props?.strings?.listingUpdated ??
           `${t("listings.listingUpdated")}: ${dayjs(listingUpdated).format("MMMM DD, YYYY")}`}
       </p>

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

@@ -1,7 +1,7 @@
 import * as React from "react"
 
 const NumberedHeader = (props: { num: number; text: string }) => (
-  <div className="text-serif-lg">
+  <div className="text-serif-xl">
     <span className="text-primary pr-1">{props.num}</span>
     {props.text}
   </div>

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

@@ -27,7 +27,7 @@ const QuantityRowSection = ({ quantityRows, strings }: QuantityRowSectionProps)
         } font-alt-sans leading-7`}
       >
         <span className="text-right w-12 inline-block pr-2.5 text-base">{row.amount}</span>
-        <span className={"text-sm"}>{row.text}</span>
+        <span className={"text-xs"}>{row.text}</span>
       </li>
     )
   }
@@ -39,7 +39,7 @@ const QuantityRowSection = ({ quantityRows, strings }: QuantityRowSectionProps)
       </Heading>
       <div>
         {strings.description && (
-          <div className="text-tiny text-gray-800 pb-3">
+          <div className="text-sm text-gray-800 pb-3">
             {typeof strings.description === "string" ? (
               <p>{strings.description}</p>
             ) : (

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

@@ -26,7 +26,7 @@ const ReferralApplication = (props: ReferralApplicationProps) => {
           {props.strings.call ?? t("t.call")} {props.phoneNumber}
         </a>
       </p>
-      <p className="text-tiny mt-4 text-gray-800">{props.description}</p>
+      <p className="text-sm mt-4 text-gray-800">{props.description}</p>
     </section>
   )
 }

package/src/page_components/listing/listing_sidebar/SidebarBlock.stories.tsx

@@ -22,7 +22,7 @@ export const Default = () => {
 
 export const Styled = () => {
   return (
-    <SidebarBlock title={"Title"} styleType={"capsWeighted"} className={"bg-blue-200"}>
+    <SidebarBlock title={"Title"} styleType={"capsWeighted"} className={"bg-blue-100"}>
       Content
     </SidebarBlock>
   )

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

@@ -15,7 +15,7 @@ const SidebarBlock = ({ children, className, title, priority, styleType }: Sideb
           {title}
         </Heading>
       )}
-      <div className="text-tiny text-gray-750">{children}</div>
+      <div className="text-sm text-gray-750">{children}</div>
     </section>
   )
 }

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

@@ -35,7 +35,7 @@ const SubmitApplication = ({
   return (
     <>
       <section className="aside-block is-tinted bg-gray-100">
-        <div className="text-serif-lg">{strings.sectionHeader}</div>
+        <div className="text-serif-xl">{strings.sectionHeader}</div>
         {applicationMailingAddress && (
           <>
             <Heading priority={3} styleType={"capsWeighted"}>
@@ -45,7 +45,7 @@ const SubmitApplication = ({
               <p className="text-gray-700">{applicationOrganization}</p>
               <ContactAddress address={applicationMailingAddress} mapString={strings.mapString} />
             </>
-            {strings.postmark && <p className="mt-4 text-tiny text-gray-750">{strings.postmark}</p>}
+            {strings.postmark && <p className="mt-4 text-sm text-gray-750">{strings.postmark}</p>}
           </>
         )}
         {applicationDropOffAddress && (
@@ -60,7 +60,7 @@ const SubmitApplication = ({
                 <Heading priority={3} styleType={"capsWeighted"}>
                   {strings.officeHoursHeader}
                 </Heading>
-                <p className="mt-4 text-tiny text-gray-750">
+                <p className="mt-4 text-sm text-gray-750">
                   <Markdown
                     children={applicationDropOffAddressOfficeHours}
                     options={{ disableParsingRawHTML: true }}

package/src/page_components/listing/listing_sidebar/events/DownloadLotteryResults.tsx

@@ -18,7 +18,7 @@ const DownloadLotteryResults = (props: DownloadLotteryResultsProps) => {
         {props.strings?.sectionHeader ?? t("listings.lotteryResults.header")}
       </h2>
       {props.resultsDate && (
-        <p className="uppercase text-gray-800 text-tiny font-semibold pb-4">{props.resultsDate}</p>
+        <p className="uppercase text-gray-800 text-sm font-semibold pb-4">{props.resultsDate}</p>
       )}
       <a
         className="button is-primary w-full mb-2"

package/src/page_components/listing/listing_sidebar/events/EventSection.tsx

@@ -19,7 +19,7 @@ type EventSectionProps = {
 const EventSection = (props: EventSectionProps) => {
   if (!props.events.length) return null
 
-  const dateClasses = ["inline-block text-tiny uppercase"]
+  const dateClasses = ["inline-block text-sm uppercase"]
 
   if (props.dateClassName) {
     dateClasses.push(props.dateClassName)
@@ -41,21 +41,19 @@ const EventSection = (props: EventSectionProps) => {
             <p className="text text-gray-800 pb-2 flex justify-between items-center">
               <span className={dateClasses.join(" ")}>{event.dateString}</span>
               {event.timeString && (
-                <span className="inline-block text-sm font-bold ml-5 font-alt-sans">
+                <span className="inline-block text-xs font-bold ml-5 font-alt-sans">
                   {event.timeString}
                 </span>
               )}
             </p>
           )}
           {event.linkURL && event.linkText && (
-            <p className="pb-2 text-tiny">
+            <p className="pb-2 text-sm">
               <a href={event.linkURL}>{event.linkText}</a>
             </p>
           )}
           {event.note && (
-            <div
-              className={`text-tiny text-gray-700 ${index !== props.events.length - 1 && "pb-3"}`}
-            >
+            <div className={`text-sm text-gray-700 ${index !== props.events.length - 1 && "pb-3"}`}>
               {typeof event.note === "string" ? <p>{event.note}</p> : event.note}
             </div>
           )}

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

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext } from "react"
 import {
   AppearanceStyleType,
   Button,
@@ -9,47 +9,47 @@ import {
   LinkButton,
   t,
   FormSignInErrorBox,
-} from "../../..";
-import type { UseFormMethods } from "react-hook-form";
-import { NavigationContext } from "../../config/NavigationContext";
-import { AlertTypes } from "../../notifications/alertTypes";
+} from "../../.."
+import type { UseFormMethods } from "react-hook-form"
+import { NavigationContext } from "../../config/NavigationContext"
+import { AlertTypes } from "../../notifications/alertTypes"
 
-export type NetworkErrorDetermineError = (status: number, error: Error) => void;
+export type NetworkErrorDetermineError = (status: number, error: Error) => void
 
-export type NetworkStatusType = AlertTypes;
+export type NetworkStatusType = AlertTypes
 
-export type NetworkErrorReset = () => void;
+export type NetworkErrorReset = () => void
 
 export type NetworkStatusContent = {
-  title: string;
-  description: string;
-  error?: boolean;
-} | null;
+  title: string
+  description: string
+  error?: boolean
+} | null
 
 export type NetworkStatus = {
-  content: NetworkStatusContent;
-  type?: NetworkStatusType;
-  reset: NetworkErrorReset;
-};
+  content: NetworkStatusContent
+  type?: NetworkStatusType
+  reset: NetworkErrorReset
+}
 
 export type FormSignInProps = {
-  control: FormSignInControl;
-  onSubmit: (data: FormSignInValues) => void;
-  networkStatus: NetworkStatus;
-  showRegisterBtn?: boolean;
-};
+  control: FormSignInControl
+  onSubmit: (data: FormSignInValues) => void
+  networkStatus: NetworkStatus
+  showRegisterBtn?: boolean
+}
 
 export type FormSignInControl = {
-  errors: UseFormMethods["errors"];
-  handleSubmit: UseFormMethods["handleSubmit"];
-  register: UseFormMethods["register"];
-  watch: UseFormMethods["watch"];
-};
+  errors: UseFormMethods["errors"]
+  handleSubmit: UseFormMethods["handleSubmit"]
+  register: UseFormMethods["register"]
+  watch: UseFormMethods["watch"]
+}
 
 export type FormSignInValues = {
-  email: string;
-  password: string;
-};
+  email: string
+  password: string
+}
 
 const FormSignIn = ({
   onSubmit,
@@ -58,9 +58,9 @@ const FormSignIn = ({
   control: { errors, register, handleSubmit },
 }: FormSignInProps) => {
   const onError = () => {
-    window.scrollTo(0, 0);
-  };
-  const { LinkComponent } = useContext(NavigationContext);
+    window.scrollTo(0, 0)
+  }
+  const { LinkComponent } = useContext(NavigationContext)
 
   return (
     <FormCard>
@@ -74,11 +74,7 @@ const FormSignIn = ({
         errorMessageId={"main-sign-in"}
       />
       <div className="form-card__group pt-0">
-        <Form
-          id="sign-in"
-          className="mt-10"
-          onSubmit={handleSubmit(onSubmit, onError)}
-        >
+        <Form id="sign-in" className="mt-10" onSubmit={handleSubmit(onSubmit, onError)}>
           <Field
             caps={true}
             name="email"
@@ -90,7 +86,7 @@ const FormSignIn = ({
             dataTestId="sign-in-email-field"
           />
 
-          <aside className="float-right text-tiny font-semibold">
+          <aside className="float-right text-sm font-semibold">
             <LinkComponent href="/forgot-password">
               {t("authentication.signIn.forgotPassword")}
             </LinkComponent>
@@ -109,10 +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-test-id="sign-in-button">
               {t("nav.signIn")}
             </Button>
           </div>
@@ -120,17 +113,13 @@ const FormSignIn = ({
       </div>
       {showRegisterBtn && (
         <div className="form-card__group text-center border-t">
-          <h2 className="mb-6">
-            {t("authentication.createAccount.noAccount")}
-          </h2>
+          <h2 className="mb-6">{t("authentication.createAccount.noAccount")}</h2>
 
-          <LinkButton href="/create-account">
-            {t("account.createAccount")}
-          </LinkButton>
+          <LinkButton href="/create-account">{t("account.createAccount")}</LinkButton>
         </div>
       )}
     </FormCard>
-  );
-};
+  )
+}
 
-export { FormSignIn as default, FormSignIn };
+export { FormSignIn as default, FormSignIn }

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React from "react"
 import {
   AppearanceStyleType,
   Button,
@@ -9,26 +9,26 @@ import {
   SiteAlert,
   PhoneField,
   FormSignInErrorBox,
-} from "../../..";
-import type { UseFormMethods } from "react-hook-form";
-import { NetworkStatus } from "./FormSignIn";
+} from "../../.."
+import type { UseFormMethods } from "react-hook-form"
+import { NetworkStatus } from "./FormSignIn"
 
 export type FormSignInAddPhoneProps = {
-  control: FormSignInAddPhoneControl;
-  onSubmit: (data: FormSignInAddPhoneValues) => void;
-  networkError: NetworkStatus;
-  phoneNumber: string;
-};
+  control: FormSignInAddPhoneControl
+  onSubmit: (data: FormSignInAddPhoneValues) => void
+  networkError: NetworkStatus
+  phoneNumber: string
+}
 
 export type FormSignInAddPhoneControl = {
-  errors: UseFormMethods["errors"];
-  handleSubmit: UseFormMethods["handleSubmit"];
-  control: UseFormMethods["control"];
-};
+  errors: UseFormMethods["errors"]
+  handleSubmit: UseFormMethods["handleSubmit"]
+  control: UseFormMethods["control"]
+}
 
 export type FormSignInAddPhoneValues = {
-  phoneNumber: string;
-};
+  phoneNumber: string
+}
 
 const FormSignInAddPhone = ({
   onSubmit,
@@ -37,19 +37,15 @@ const FormSignInAddPhone = ({
   phoneNumber,
 }: FormSignInAddPhoneProps) => {
   const onError = () => {
-    window.scrollTo(0, 0);
-  };
-  const { errors, handleSubmit } = control;
+    window.scrollTo(0, 0)
+  }
+  const { errors, handleSubmit } = control
   return (
     <FormCard>
       <div className="form-card__lead text-center">
         <Icon size="2xl" symbol="profile" className="form-card__header-icon" />
-        <h2 className="form-card__title is-borderless">
-          {t("nav.signInMFA.addNumber")}
-        </h2>
-        <p className="form-card__sub-title">
-          {t("nav.signInMFA.addNumberSecondaryTitle")}
-        </p>
+        <h2 className="form-card__title is-borderless">{t("nav.signInMFA.addNumber")}</h2>
+        <p className="form-card__sub-title">{t("nav.signInMFA.addNumberSecondaryTitle")}</p>
       </div>
       <FormSignInErrorBox
         errors={errors}
@@ -59,11 +55,7 @@ const FormSignInAddPhone = ({
 
       <SiteAlert type="notice" dismissable />
       <div className="form-card__group pt-0">
-        <Form
-          id="sign-in-mfa"
-          className="mt-10"
-          onSubmit={handleSubmit(onSubmit, onError)}
-        >
+        <Form id="sign-in-mfa" className="mt-10" onSubmit={handleSubmit(onSubmit, onError)}>
           <PhoneField
             label={t("nav.signInMFA.phoneNumber")}
             caps={true}
@@ -89,7 +81,7 @@ const FormSignInAddPhone = ({
         </Form>
       </div>
     </FormCard>
-  );
-};
+  )
+}
 
-export { FormSignInAddPhone as default, FormSignInAddPhone };
+export { FormSignInAddPhone as default, FormSignInAddPhone }

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

@@ -1,31 +1,25 @@
-import React from "react";
-import { t, AlertBox, SiteAlert, AlertNotice, ErrorMessage } from "../../..";
-import type { UseFormMethods } from "react-hook-form";
-import { NetworkStatus } from "./FormSignIn";
+import React from "react"
+import { t, AlertBox, SiteAlert, AlertNotice, ErrorMessage } from "../../.."
+import type { UseFormMethods } from "react-hook-form"
+import { NetworkStatus } from "./FormSignIn"
 
 export type FormSignInErrorBoxProps = {
-  errors: FormSignInErrorBoxControl["errors"];
-  networkStatus: NetworkStatus;
-  errorMessageId: string;
-};
+  errors: FormSignInErrorBoxControl["errors"]
+  networkStatus: NetworkStatus
+  errorMessageId: string
+}
 
 export type FormSignInErrorBoxControl = {
-  errors: UseFormMethods["errors"];
-  control: UseFormMethods["control"];
-};
+  errors: UseFormMethods["errors"]
+  control: UseFormMethods["control"]
+}
 
-const FormSignInErrorBox = ({
-  networkStatus,
-  errors,
-  errorMessageId,
-}: FormSignInErrorBoxProps) => {
+const FormSignInErrorBox = ({ networkStatus, errors, errorMessageId }: FormSignInErrorBoxProps) => {
   return (
     <div className="border-b">
       {Object.entries(errors).length > 0 && !networkStatus.content && (
         <AlertBox type="alert" inverted closeable>
-          {errors.authentication
-            ? errors.authentication.message
-            : t("errors.errorsToResolve")}
+          {errors.authentication ? errors.authentication.message : t("errors.errorsToResolve")}
         </AlertBox>
       )}
 
@@ -35,11 +29,7 @@ const FormSignInErrorBox = ({
           error={!!networkStatus.content}
           className="block mt-0 leading-normal text-alert"
         >
-          <AlertBox
-            type={"alert"}
-            inverted
-            onClose={() => networkStatus.reset()}
-          >
+          <AlertBox type={"alert"} inverted onClose={() => networkStatus.reset()}>
             {networkStatus.content.title}
           </AlertBox>
 
@@ -51,11 +41,7 @@ const FormSignInErrorBox = ({
 
       {networkStatus.type === "success" && (
         <>
-          <AlertBox
-            type="success"
-            inverted
-            onClose={() => networkStatus.reset()}
-          >
+          <AlertBox type="success" inverted onClose={() => networkStatus.reset()}>
             {networkStatus.content?.title}
           </AlertBox>
 
@@ -67,7 +53,7 @@ const FormSignInErrorBox = ({
 
       <SiteAlert type="notice" dismissable />
     </div>
-  );
-};
+  )
+}
 
-export { FormSignInErrorBox as default, FormSignInErrorBox };
+export { FormSignInErrorBox as default, FormSignInErrorBox }