@bloom-housing/ui-components 4.2.2-alpha.9 → 4.3.0

package/src/page_components/listing/UnitTables.tsx

@@ -1,11 +1,10 @@
 import React from "react"
-import { nanoid } from "nanoid"
 import { MinMax, UnitSummary, Unit } from "@bloom-housing/backend-core/types"
 
-import { StandardTable } from "../../tables/StandardTable"
+import { StandardTable, StandardTableData } from "../../tables/StandardTable"
 import { t } from "../../helpers/translator"
 import { numberOrdinal } from "../../helpers/numberOrdinal"
-import ContentAccordion from "./ContentAccordion"
+import { ContentAccordion } from "./ContentAccordion"
 
 const formatRange = (range: MinMax, ordinalize?: boolean) => {
   let min: string | number = range.min
@@ -50,24 +49,26 @@ const UnitTables = (props: UnitTablesProps) => {
         const units = props.units.filter(
           (unit: Unit) => unit.unitType?.name == unitSummary.unitType.name
         )
-        const unitsFormatted = [] as Array<Record<string, React.ReactNode>>
+        const unitsFormatted = [] as StandardTableData
         let floorSection: React.ReactNode
         units.forEach((unit: Unit) => {
           unitsFormatted.push({
-            number: unit.number,
-            sqFeet: (
-              <>
-                {unit.sqFeet ? (
-                  <>
-                    <strong>{parseInt(unit.sqFeet)}</strong> {t("t.sqFeet")}
-                  </>
-                ) : (
-                  <></>
-                )}
-              </>
-            ),
-            numBathrooms: <strong>{unit.numBathrooms}</strong>,
-            floor: <strong>{unit.floor}</strong>,
+            number: { content: unit.number },
+            sqFeet: {
+              content: (
+                <>
+                  {unit.sqFeet ? (
+                    <>
+                      <strong>{parseInt(unit.sqFeet)}</strong> {t("t.sqFeet")}
+                    </>
+                  ) : (
+                    <></>
+                  )}
+                </>
+              ),
+            },
+            numBathrooms: { content: <strong>{unit.numBathrooms}</strong> },
+            floor: { content: <strong>{unit.floor}</strong> },
           })
         })
 

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

@@ -0,0 +1,110 @@
+import * as React from "react"
+import { ContactAddress } from "./ContactAddress"
+import { Icon, IconFillColors } from "../../../icons/Icon"
+import { Address } from "../../../helpers/MultiLineAddress"
+import { Heading } from "../../../headers/Heading"
+
+export interface ContactProps {
+  /** Any number of text sections rendered after the contact information */
+  additionalInformation?: { title: string; content: string | React.ReactNode }[]
+  /** The contact's address */
+  contactAddress?: Address
+  /** The contact's company and website */
+  contactCompany?: { name: string; website: string }
+  /** The contact's email */
+  contactEmail?: string
+  /** The contact's name */
+  contactName?: string
+  /** The contact's phone number */
+  contactPhoneNumber?: string
+  /** Additional information pertaining to the contact's phone number */
+  contactPhoneNumberNote?: string
+  /** The contact's title */
+  contactTitle?: string
+  /** The text for the section's header */
+  sectionTitle: string
+  strings: { email?: string; getDirections: string; website?: string }
+}
+
+/** Displays information about a contact, including their address, contact information, and notes */
+const Contact = ({
+  additionalInformation,
+  contactAddress,
+  contactCompany,
+  contactEmail,
+  contactName,
+  contactPhoneNumber,
+  contactPhoneNumberNote,
+  contactTitle,
+  sectionTitle,
+  strings,
+}: ContactProps) => {
+  const formattedPhoneLink = contactPhoneNumber
+    ? `tel:${contactPhoneNumber.replace(/[-()]/g, "")}`
+    : undefined
+  const formattedCompanyWebsite =
+    contactCompany?.website && !contactCompany?.website.startsWith("http")
+      ? `http://${contactCompany?.website}`
+      : contactCompany?.website
+
+  return (
+    <section className="aside-block">
+      <Heading priority={4} style={"sidebarHeader"}>
+        {sectionTitle}
+      </Heading>
+
+      {contactName && <p className="text-xl">{contactName}</p>}
+      {contactTitle && <p className="text-gray-700">{contactTitle}</p>}
+      {contactCompany?.name && <p className="text-gray-700">{contactCompany.name}</p>}
+
+      {contactPhoneNumber && (
+        <>
+          <p className="mt-3">
+            <a href={formattedPhoneLink}>
+              <Icon symbol="phone" size="medium" fill={IconFillColors.primary} className={"pr-2"} />
+              {contactPhoneNumber}
+            </a>
+          </p>
+          {contactPhoneNumberNote && (
+            <p className="text-sm text-gray-700">{contactPhoneNumberNote}</p>
+          )}
+        </>
+      )}
+
+      {contactEmail && (
+        <p className="my-3">
+          <a href={`mailto:${contactEmail}`}>
+            <Icon symbol="mail" size="medium" fill={IconFillColors.primary} className={"pr-2"} />
+            {strings?.email && strings?.email}
+          </a>
+        </p>
+      )}
+
+      {formattedCompanyWebsite && (
+        <p className="my-3">
+          <a href={formattedCompanyWebsite} target="_blank" rel="noreferrer noopener">
+            <Icon symbol="globe" size="medium" fill={IconFillColors.primary} className={"pr-2"} />
+            {strings?.website && strings?.website}
+          </a>
+        </p>
+      )}
+
+      {contactAddress && (
+        <ContactAddress address={contactAddress} mapString={strings.getDirections} />
+      )}
+
+      {additionalInformation?.map((info) => {
+        return (
+          <>
+            <Heading priority={3} style={"sidebarSubHeader"}>
+              {info.title}
+            </Heading>
+            <div className="text-gray-800 text-tiny markdown">{info.content}</div>
+          </>
+        )
+      })}
+    </section>
+  )
+}
+
+export { Contact as default, Contact }

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

@@ -0,0 +1,41 @@
+import * as React from "react"
+import ReactDOMServer from "react-dom/server"
+import { Icon, IconFillColors } from "../../../icons/Icon"
+import { MultiLineAddress, Address } from "../../../helpers/MultiLineAddress"
+import { OneLineAddress } from "../../../helpers/OneLineAddress"
+
+export interface ContactAddressProps {
+  /** An address */
+  address: Address
+  /** A string for the map link */
+  mapString: string
+}
+
+/** Renders an address followed by a Google Maps link to the address */
+const ContactAddress = ({ address, mapString }: ContactAddressProps) => {
+  if (!address?.street) return null
+
+  const oneLineAddress = <OneLineAddress address={address} />
+  const mainAddress = <MultiLineAddress address={address} />
+  const googleMapsHref =
+    "https://www.google.com/maps/place/" + ReactDOMServer.renderToStaticMarkup(oneLineAddress)
+
+  return (
+    <>
+      <p className="text-gray-700 mb-1">{mainAddress}</p>
+      <p className="mb-4">
+        <a
+          href={googleMapsHref}
+          className="inline-block pt-1"
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          <Icon symbol="map" size="medium" fill={IconFillColors.primary} className={"pr-2"} />
+          {mapString}
+        </a>
+      </p>
+    </>
+  )
+}
+
+export { ContactAddress as default, ContactAddress }

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

@@ -3,10 +3,11 @@ import { t } from "../../../helpers/translator"
 import { Button } from "../../../actions/Button"
 import { LinkButton } from "../../../actions/LinkButton"
 import { AppearanceStyleType } from "../../../global/AppearanceTypes"
-import { Address } from "../../../helpers/address"
-import { SidebarAddress } from "./SidebarAddress"
+import { Address } from "../../../helpers/MultiLineAddress"
+import { ContactAddress } from "./ContactAddress"
 import { OrDivider } from "./OrDivider"
-import { ListingStatus } from "@bloom-housing/backend-core/types"
+import { Heading } from "../../../headers/Heading"
+import Markdown from "markdown-to-jsx"
 
 export interface PaperApplication {
   fileURL: string
@@ -14,26 +15,30 @@ export interface PaperApplication {
 }
 
 export interface ApplicationsProps {
-  onlineApplicationURL?: string
+  /** The pickup address for the application */
+  applicationPickUpAddress?: Address
+  /** Office hours for the agent at the pickup address */
+  applicationPickUpAddressOfficeHours?: string
+  /** Whether or not applications are currently open */
   applicationsOpen: boolean
+  /** The date applications open */
   applicationsOpenDate?: string
+  /** The URL for an online applications */
+  onlineApplicationURL?: string
+  /** Any number of paper application objects, including their URL and language */
   paperApplications?: PaperApplication[]
+  /** Whether or not there is a paper application method */
   paperMethod?: boolean
+  /** The date mailed applications must be received by */
   postmarkedApplicationsReceivedByDate?: string
-  applicationPickUpAddressOfficeHours?: string
-  applicationPickUpAddress?: Address
+  /** Whether or not to hide actionable application buttons */
   preview?: boolean
-  listingStatus?: ListingStatus
 }
-
+/** Displays information regarding how to apply, including an online application link button, paper application downloads, and a paper application pickup address */
 const GetApplication = (props: ApplicationsProps) => {
   const [showDownload, setShowDownload] = useState(false)
   const toggleDownload = () => setShowDownload(!showDownload)
 
-  if (props.listingStatus === ListingStatus.closed) {
-    return null
-  }
-
   return (
     <section className="aside-block">
       <h2 className="text-caps-underline">{t("listings.apply.howToApply")}</h2>
@@ -95,11 +100,26 @@ const GetApplication = (props: ApplicationsProps) => {
           {props.applicationsOpen && (props.onlineApplicationURL || props.paperMethod) && (
             <OrDivider bgColor="white" />
           )}
-          <h3 className="text-caps-tiny">{t("listings.apply.pickUpAnApplication")}</h3>
-          <SidebarAddress
+          <Heading priority={3} style={"sidebarSubHeader"}>
+            {t("listings.apply.pickUpAnApplication")}
+          </Heading>
+          <ContactAddress
             address={props.applicationPickUpAddress}
-            officeHours={props.applicationPickUpAddressOfficeHours}
+            mapString={t("t.getDirections")}
           />
+          {props.applicationPickUpAddressOfficeHours && (
+            <>
+              <Heading priority={3} style={"sidebarSubHeader"}>
+                {t("leasingAgent.officeHours")}
+              </Heading>
+              <p className="text-gray-800 text-tiny markdown">
+                <Markdown
+                  children={props.applicationPickUpAddressOfficeHours}
+                  options={{ disableParsingRawHTML: true }}
+                />
+              </p>
+            </>
+          )}
         </>
       )}
     </section>

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

@@ -0,0 +1,46 @@
+import * as React from "react"
+
+export interface QuantityRow {
+  amount: number | null
+  text: string
+  emphasized?: boolean
+}
+
+export interface QuantityRowSectionProps {
+  /** Any amount of number/text combinations, rendered in a list */
+  quantityRows: QuantityRow[]
+  strings: {
+    sectionTitle: string
+    description?: string | React.ReactNode
+  }
+}
+
+const QuantityRowSection = ({ quantityRows, strings }: QuantityRowSectionProps) => {
+  const getRow = (row: QuantityRow) => {
+    return (
+      <li
+        key={row.text}
+        className={`uppercase text-gray-800 ${
+          row.emphasized ? "font-bold" : "font-normal"
+        } 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>
+      </li>
+    )
+  }
+
+  return (
+    <section className="aside-block is-tinted">
+      <h4 className="text-caps-tiny">{strings.sectionTitle}</h4>
+      <div>
+        {strings.description && (
+          <p className="text-tiny text-gray-800 pb-3">{strings.description}</p>
+        )}
+        {quantityRows.length && <ul>{quantityRows.map((row) => getRow(row))}</ul>}
+      </div>
+    </section>
+  )
+}
+
+export { QuantityRowSection as default, QuantityRowSection }

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

@@ -1,78 +1,73 @@
 import * as React from "react"
-import { t } from "../../../helpers/translator"
-import { Address } from "../../../helpers/address"
-import { SidebarAddress } from "./SidebarAddress"
+import Markdown from "markdown-to-jsx"
+import { Address } from "../../../helpers/MultiLineAddress"
+import { ContactAddress } from "./ContactAddress"
 import { OrDivider } from "./OrDivider"
-import { ListingStatus } from "@bloom-housing/backend-core/types"
-
-export interface PostmarkedApplication {
-  postmarkedApplicationsReceivedByDate: string | null
-  developer: string
-  applicationsDueDate: string | null
-}
+import { Heading } from "../../../headers/Heading"
 
 export interface ApplicationAddressesProps {
-  applicationMailingAddress?: Address
+  /** The dropoff address for paper applications */
   applicationDropOffAddress?: Address
+  /** Office hours for developers at the dropoff address for paper applications */
   applicationDropOffAddressOfficeHours?: string
+  /** The mailing address for paper applications */
+  applicationMailingAddress?: Address
+  /** The application organization, often the developer */
   applicationOrganization?: string
-  postmarkedApplicationData?: PostmarkedApplication
-  listingStatus?: ListingStatus
-}
-
-const SubmitApplication = (props: ApplicationAddressesProps) => {
-  if (
-    props.listingStatus === ListingStatus.closed ||
-    !(props.applicationMailingAddress || props.applicationDropOffAddress)
-  ) {
-    return null
-  }
-
-  const getPostmarkString = () => {
-    const applicationDueDate = props.postmarkedApplicationData?.applicationsDueDate
-    const postmarkReceivedByDate =
-      props.postmarkedApplicationData?.postmarkedApplicationsReceivedByDate
-    const developer = props.postmarkedApplicationData?.developer
-    if (applicationDueDate) {
-      return postmarkReceivedByDate
-        ? t("listings.apply.submitPaperDueDatePostMark", {
-            applicationDueDate,
-            postmarkReceivedByDate,
-            developer,
-          })
-        : t("listings.apply.submitPaperDueDateNoPostMark", {
-            applicationDueDate,
-            developer,
-          })
-    } else {
-      return postmarkReceivedByDate
-        ? t("listings.apply.submitPaperNoDueDatePostMark", { postmarkReceivedByDate, developer })
-        : t("listings.apply.submitPaperNoDueDateNoPostMark", { developer })
-    }
+  strings: {
+    postmark?: string
+    mailHeader?: string
+    sectionHeader?: string
+    dropOffHeader?: string
+    officeHoursHeader?: string
+    mapString: string
   }
+}
 
+/** Displays information regarding paper applications, including two sections: (1) how to mail in applications and (2) how to drop off applications */
+const SubmitApplication = ({
+  applicationDropOffAddress,
+  applicationDropOffAddressOfficeHours,
+  applicationMailingAddress,
+  applicationOrganization,
+  strings,
+}: ApplicationAddressesProps) => {
   return (
     <>
       <section className="aside-block is-tinted bg-gray-100">
-        <div className="text-serif-lg">{t("listings.apply.submitAPaperApplication")}</div>
-        {props.applicationMailingAddress && (
+        <div className="text-serif-lg">{strings.sectionHeader}</div>
+        {applicationMailingAddress && (
           <>
-            <h3 className="text-caps-tiny">{t("listings.apply.sendByUsMail")}</h3>
+            <Heading priority={3} style={"sidebarSubHeader"}>
+              {strings.mailHeader}
+            </Heading>
             <>
-              <p className="text-gray-700">{props.applicationOrganization}</p>
-              <SidebarAddress address={props.applicationMailingAddress} />
+              <p className="text-gray-700">{applicationOrganization}</p>
+              <ContactAddress address={applicationMailingAddress} mapString={strings.mapString} />
             </>
-            <p className="mt-4 text-tiny text-gray-750">{getPostmarkString()}</p>
+            {strings.postmark && <p className="mt-4 text-tiny text-gray-750">{strings.postmark}</p>}
           </>
         )}
-        {props.applicationDropOffAddress && (
+        {applicationDropOffAddress && (
           <>
-            {props.applicationMailingAddress && <OrDivider bgColor="gray-100" />}
-            <h3 className="text-caps-tiny">{t("listings.apply.dropOffApplication")}</h3>
-            <SidebarAddress
-              address={props.applicationDropOffAddress}
-              officeHours={props.applicationDropOffAddressOfficeHours}
-            />
+            {applicationMailingAddress && <OrDivider bgColor="gray-100" />}
+            <Heading priority={3} style={"sidebarSubHeader"}>
+              {strings.dropOffHeader}
+            </Heading>
+            <ContactAddress address={applicationDropOffAddress} mapString={strings.mapString} />
+            {applicationDropOffAddressOfficeHours && (
+              <>
+                <Heading priority={3} style={"sidebarSubHeader"}>
+                  {strings.officeHoursHeader}
+                </Heading>
+                <p className="mt-4 text-tiny text-gray-750">
+                  <Markdown
+                    children={applicationDropOffAddressOfficeHours}
+                    options={{ disableParsingRawHTML: true }}
+                  />
+                </p>
+              </>
+            )}
           </>
         )}
       </section>

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

@@ -1,4 +1,5 @@
 import * as React from "react"
+import Heading from "../../../../headers/Heading"
 
 export type EventType = {
   timeString?: string
@@ -19,9 +20,9 @@ const EventSection = (props: EventSectionProps) => {
   return (
     <section className="aside-block">
       {props.headerText && (
-        <h4 className={props.sectionHeader ? "text-caps-underline" : "text-caps-tiny"}>
+        <Heading priority={4} style={props.sectionHeader ? "sidebarHeader" : "sidebarSubHeader"}>
           {props.headerText}
-        </h4>
+        </Heading>
       )}
       {props.events.map((event, index) => (
         <div key={`events-${index}`} className={`${index !== props.events.length - 1 && "pb-3"}`}>

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

@@ -112,7 +112,7 @@ const FormSignIn = ({
         </Form>
       </div>
       {showRegisterBtn && (
-        <div className="form-card__group text-center">
+        <div className="form-card__group text-center border-t">
           <h2 className="mb-6">{t("authentication.createAccount.noAccount")}</h2>
 
           <LinkButton href="/create-account">{t("account.createAccount")}</LinkButton>

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

@@ -6,9 +6,8 @@ import {
   Form,
   Field,
   emailRegex,
-  NavigationContext,
 } from "@bloom-housing/ui-components"
-import React, { useEffect, useMemo, useContext } from "react"
+import React, { useEffect, useMemo } from "react"
 import { useForm } from "react-hook-form"
 
 export type ResendConfirmationModalProps = {
@@ -30,7 +29,6 @@ const ResendConfirmationModal = ({
   onClose,
   onSubmit,
 }: ResendConfirmationModalProps) => {
-  const { router } = useContext(NavigationContext)
   // eslint-disable-next-line @typescript-eslint/unbound-method
   const { register, errors, reset, getValues, trigger } = useForm({
     defaultValues: useMemo(() => {

package/src/prototypes/Swatch.tsx

@@ -0,0 +1,10 @@
+import * as React from "react"
+
+export const Swatch = (props: { colorVar: string }) => (
+  <span
+    style={{ backgroundColor: `var(${props.colorVar})` }}
+    className="w-6 border border-gray-500 inline-block"
+  >
+    &nbsp;
+  </span>
+)

package/src/tables/CategoryTable.tsx

@@ -0,0 +1,33 @@
+import * as React from "react"
+import { StackedTable, StackedTableProps } from "./StackedTable"
+import { Heading } from "../headers/Heading"
+
+export interface CategoryTableSection {
+  /** The header text for a category */
+  header: string
+  /** The table data for a category */
+  tableData: StackedTableProps
+}
+
+export interface CategoryTableProps {
+  /** The table data passed as category section strings associated with a table data set */
+  categoryData: CategoryTableSection[]
+}
+
+const CategoryTable = (props: CategoryTableProps) => {
+  const tables = props.categoryData.map((category, index) => {
+    return (
+      <div key={index}>
+        <Heading priority={3} style={"categoryHeader"}>
+          {category.header}
+        </Heading>
+        <hr className={"my-2"} />
+        <StackedTable {...category.tableData} className={"category-table mb-2 md:mb-6"} />
+      </div>
+    )
+  })
+
+  return <>{tables}</>
+}
+
+export { CategoryTable as default, CategoryTable }

package/src/tables/GroupedTable.tsx

@@ -1,11 +1,11 @@
 import * as React from "react"
 import { nanoid } from "nanoid"
-import { Cell, StandardTableProps } from "./StandardTable"
+import { Cell, StandardTableData, StandardTableProps } from "./StandardTable"
 
 export interface GroupedTableGroup {
   header?: string | React.ReactNode
   className?: string
-  data: Record<string, React.ReactNode>[]
+  data: StandardTableData
 }
 
 export interface GroupedTableProps extends Omit<StandardTableProps, "data"> {
@@ -43,16 +43,16 @@ export const GroupedTable = (props: GroupedTableProps) => {
       )
     }
 
-    groupData.forEach((row: Record<string, React.ReactNode>, groupDataIndex) => {
+    groupData.forEach((row, groupDataIndex) => {
       const rowKey = row["id"]
-        ? `row-${row["id"] as string}`
+        ? `row-${row["id"].content as string}`
         : process.env.NODE_ENV === "test"
         ? `groupedrow-${dataIndex}-${groupDataIndex}`
         : nanoid()
       const cols = Object.keys(headers).map((colKey, colIndex) => {
         const uniqKey = process.env.NODE_ENV === "test" ? `col-${colIndex}` : nanoid()
         const header = headers[colKey]
-        const cell = row[colKey]
+        const cell = row[colKey]?.content
         return (
           <Cell key={uniqKey} headerLabel={header} className={cellClassName}>
             {cell}

package/src/tables/MinimalTable.tsx

@@ -1,16 +1,26 @@
 import * as React from "react"
-import { TableHeaders, StandardTable } from "./StandardTable"
+import { TableHeaders, StandardTable, StandardTableData } from "./StandardTable"
 
 export interface MinimalTableProps {
+  /** If the table should be sortable through dragging */
   draggable?: boolean
+  /** A set state function tied to the table's data, used if the table is draggable */
   setData?: (data: unknown[]) => void
+  /** The headers for the table passed as text content with optional settings */
   headers: TableHeaders
-  data?: Record<string, React.ReactNode>[]
+  /** The table data passed as records of column name to cell data with optional settings */
+  data?: StandardTableData
+  /** Removes cell margins on the left of every row's first cell */
   flushLeft?: boolean
+  /** Removes cell margins on the right of every row's last cell */
   flushRight?: boolean
+  /** If the table should collapse on mobile views to show repeating columns on the left for every row */
   responsiveCollapse?: boolean
+  /** A class name applied to the root of the table */
   className?: string
+  /** A class name applied to the cells of the table */
   cellClassName?: string
+  /** An id applied to the table */
   id?: string
 }