@bloom-housing/ui-components 7.3.1 → 8.0.0

package/src/page_components/NavigationHeader.tsx

@@ -1,30 +1,30 @@
-import React, { useMemo, useContext } from "react";
-import { PageHeader, TabNav, TabNavItem, AppearanceSizeType } from "../..";
-import { NavigationContext } from "../config/NavigationContext";
-import "./NavigationHeader.scss";
+import React, { useMemo, useContext } from "react"
+import { PageHeader, TabNav, TabNavItem, AppearanceSizeType } from "../.."
+import { NavigationContext } from "../config/NavigationContext"
+import "./NavigationHeader.scss"
 
 type NavigationHeaderProps = {
-  className?: string;
-  title: React.ReactNode;
-  listingId?: string;
-  tabs?: NavigationHeaderTabs;
-  breadcrumbs?: React.ReactNode;
-  children?: React.ReactChild;
-};
+  className?: string
+  title: React.ReactNode
+  listingId?: string
+  tabs?: NavigationHeaderTabs
+  breadcrumbs?: React.ReactNode
+  children?: React.ReactNode
+}
 
 type NavigationHeaderTabs = {
-  show?: boolean;
-  flagsQty?: number;
-  listingLabel: string;
-  applicationsLabel: string;
-};
+  show?: boolean
+  flagsQty?: number
+  listingLabel: string
+  applicationsLabel: string
+}
 
 type NavigationHeaderTabsElement = {
-  label: string;
-  path: string;
-  activePaths: string[];
-  content: React.ReactNode | undefined;
-};
+  label: string
+  path: string
+  activePaths: string[]
+  content: React.ReactNode | undefined
+}
 
 const NavigationHeader = ({
   className,
@@ -34,8 +34,8 @@ const NavigationHeader = ({
   children,
   breadcrumbs,
 }: NavigationHeaderProps) => {
-  const navigation = useContext(NavigationContext);
-  const currentPath = navigation.router.asPath;
+  const navigation = useContext(NavigationContext)
+  const currentPath = navigation.router.asPath
 
   const tabNavElements = useMemo(() => {
     const elements: NavigationHeaderTabsElement[] = [
@@ -57,10 +57,10 @@ const NavigationHeader = ({
         ],
         content: undefined,
       },
-    ];
+    ]
 
-    return elements;
-  }, [tabs, listingId]);
+    return elements
+  }, [tabs, listingId])
 
   const tabNavItems = useMemo(() => {
     return (
@@ -77,8 +77,8 @@ const NavigationHeader = ({
           </TabNavItem>
         ))}
       </TabNav>
-    );
-  }, [currentPath, tabNavElements]);
+    )
+  }, [currentPath, tabNavElements])
 
   return (
     <PageHeader
@@ -89,7 +89,7 @@ const NavigationHeader = ({
     >
       {children}
     </PageHeader>
-  );
-};
+  )
+}
 
-export { NavigationHeader as default, NavigationHeader };
+export { NavigationHeader as default, NavigationHeader }

package/src/page_components/forgot-password/FormForgotPassword.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext } from "react"
 import {
   AppearanceStyleType,
   Button,
@@ -12,31 +12,31 @@ import {
   AlertNotice,
   ErrorMessage,
   emailRegex,
-} from "../../..";
-import { NetworkErrorReset, NetworkStatusContent } from "../sign-in/FormSignIn";
-import { NavigationContext } from "../../config/NavigationContext";
-import type { UseFormMethods } from "react-hook-form";
+} from "../../.."
+import { NetworkErrorReset, NetworkStatusContent } from "../sign-in/FormSignIn"
+import { NavigationContext } from "../../config/NavigationContext"
+import type { UseFormMethods } from "react-hook-form"
 
 export type FormForgotPasswordProps = {
-  control: FormForgotPasswordControl;
-  onSubmit: (data: FormForgotPasswordValues) => void;
-  networkError: FormForgotPasswordNetworkError;
-};
+  control: FormForgotPasswordControl
+  onSubmit: (data: FormForgotPasswordValues) => void
+  networkError: FormForgotPasswordNetworkError
+}
 
 export type FormForgotPasswordNetworkError = {
-  error: NetworkStatusContent;
-  reset: NetworkErrorReset;
-};
+  error: NetworkStatusContent
+  reset: NetworkErrorReset
+}
 
 export type FormForgotPasswordControl = {
-  errors: UseFormMethods["errors"];
-  handleSubmit: UseFormMethods["handleSubmit"];
-  register: UseFormMethods["register"];
-};
+  errors: UseFormMethods["errors"]
+  handleSubmit: UseFormMethods["handleSubmit"]
+  register: UseFormMethods["register"]
+}
 
 export type FormForgotPasswordValues = {
-  email: string;
-};
+  email: string
+}
 
 const FormForgotPassword = ({
   onSubmit,
@@ -44,33 +44,26 @@ const FormForgotPassword = ({
   control: { errors, register, handleSubmit },
 }: FormForgotPasswordProps) => {
   const onError = () => {
-    window.scrollTo(0, 0);
-  };
+    window.scrollTo(0, 0)
+  }
 
-  const { router } = useContext(NavigationContext);
+  const { router } = useContext(NavigationContext)
 
   return (
     <FormCard>
       <div className="form-card__lead text-center border-b mx-0">
         <Icon size="2xl" symbol="profile" />
-        <h1 className="form-card__title">
-          {t("authentication.forgotPassword.sendEmail")}
-        </h1>
+        <h1 className="form-card__title">{t("authentication.forgotPassword.sendEmail")}</h1>
       </div>
 
       {Object.entries(errors).length > 0 && !networkError.error && (
         <AlertBox type="alert" inverted closeable>
-          {errors.authentication
-            ? errors.authentication.message
-            : t("errors.errorsToResolve")}
+          {errors.authentication ? errors.authentication.message : t("errors.errorsToResolve")}
         </AlertBox>
       )}
 
       {!!networkError.error?.error && Object.entries(errors).length === 0 && (
-        <ErrorMessage
-          id={"forgotpasswordemail-error"}
-          error={!!networkError.error}
-        >
+        <ErrorMessage id={"forgotpasswordemail-error"} error={!!networkError.error}>
           <AlertBox type="alert" inverted onClose={() => networkError.reset()}>
             {networkError.error.title}
           </AlertBox>
@@ -84,20 +77,14 @@ const FormForgotPassword = ({
       <SiteAlert type="notice" dismissable />
 
       <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"
             label={t("t.email")}
             validation={{ required: true, pattern: emailRegex }}
             error={errors.email}
-            errorMessage={
-              errors.email ? t("authentication.signIn.loginError") : undefined
-            }
+            errorMessage={errors.email ? t("authentication.signIn.loginError") : undefined}
             register={register}
             onChange={() => networkError.reset()}
           />
@@ -116,7 +103,7 @@ const FormForgotPassword = ({
         </Form>
       </div>
     </FormCard>
-  );
-};
+  )
+}
 
-export { FormForgotPassword as default, FormForgotPassword };
+export { FormForgotPassword as default, FormForgotPassword }

package/src/page_components/listing/AdditionalFees.tsx

@@ -1,4 +1,6 @@
 import * as React from "react"
+import { GridSection, GridCell } from "../../sections/GridSection"
+import { InfoCard } from "../../blocks/InfoCard"
 
 export interface AdditionalFeesProps {
   /** The application fee for the property, rendered in the first block */
@@ -22,32 +24,32 @@ const AdditionalFees = ({
   footerContent,
   strings,
 }: AdditionalFeesProps) => {
-  if (!deposit && !applicationFee && (!footerContent || footerContent?.length === 0)) return <></>
+  const hasFooter = footerContent && footerContent?.length > 0
+  if (!deposit && !applicationFee && !hasFooter) return <></>
   return (
-    <div className="info-card bg-gray-100 border-0">
-      <p className="info-card__title mb-2">{strings.sectionHeader}</p>
-      <div className="info-card__columns text-sm">
+    <InfoCard title={strings.sectionHeader} className="bg-gray-100 border-0">
+      <GridSection columns={2} className={`${hasFooter && "mb-5"}`}>
         {applicationFee && (
-          <div className={`info-card__column-2 ${deposit && "mr-2"}`}>
+          <GridCell>
             <div className="text-base">{strings.applicationFee}</div>
             <div className="text-xl font-bold">{applicationFee}</div>
             {strings.applicationFeeSubtext?.map((appFeeSubtext, index) => (
-              <div key={index}>{appFeeSubtext}</div>
+              <div key={index} className="text-sm">{appFeeSubtext}</div>
             ))}
-          </div>
+          </GridCell>
         )}
         {deposit && (
-          <div className={`info-card__column-2 ${applicationFee && "ml-2"}`}>
+          <GridCell>
             <div className="text-base">{strings.deposit}</div>
             <div className="text-xl font-bold">{deposit}</div>
             {strings.depositSubtext?.map((depositSubtext, index) => (
-              <div key={index}>{depositSubtext}</div>
+              <div className="text-sm" key={index}>{depositSubtext}</div>
             ))}
-          </div>
+          </GridCell>
         )}
-      </div>
-      {footerContent && footerContent?.length > 0 && (
-        <div className="info-card__columns text-sm">
+      </GridSection>
+      {hasFooter && (
+        <div className="info-card__columns text-xs">
           {footerContent?.map((elem, idx) => (
             <div key={`footer_info_${idx}`} className="info-card__column-2">
               {elem}
@@ -55,7 +57,7 @@ const AdditionalFees = ({
           ))}
         </div>
       )}
-    </div>
+    </InfoCard>
   )
 }
 

package/src/page_components/listing/ContentAccordion.scss

@@ -6,7 +6,7 @@
   @apply flex;
   @apply justify-between;
   @apply font-sans;
-  @apply text-tiny;
+  @apply text-sm;
   @apply text-gray-800;
 }
 
@@ -22,7 +22,7 @@
   @apply justify-between;
   @apply font-sans;
   @apply text-base;
-  @apply text-gray-950;
+  @apply text-gray-900;
 
   svg {
     fill: #1f2937; // gray-800

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

@@ -76,7 +76,7 @@ export const grayThemeFilled = () => {
     return (
       <span className={"flex w-full justify-between items-center"}>
         <span className={"flex items-center"}>
-          <span className={"font-serif text-3xl font-medium leading-4 pr-2"}>1</span> person in
+          <span className={"font-serif text-2xl font-medium leading-4 pr-2"}>1</span> person in
           household
         </span>
         <span className={"flex pr-4 items-center"}>

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>
           )}