@bloom-housing/ui-components 4.2.2-alpha.0 → 4.2.2-alpha.11

package/src/helpers/tableSummaries.tsx

@@ -1,8 +1,9 @@
 import * as React from "react"
 import { t } from "./translator"
 import { UnitSummary } from "@bloom-housing/backend-core/types"
+import { StandardTableData } from "../tables/StandardTable"
 
-export const unitSummariesTable = (summaries: UnitSummary[]) => {
+export const unitSummariesTable = (summaries: UnitSummary[]): StandardTableData => {
   const unitSummaries = summaries?.map((unitSummary) => {
     const unitPluralization = unitSummary.totalAvailable == 1 ? t("t.unit") : t("t.units")
     const minIncome =
@@ -10,7 +11,8 @@ export const unitSummariesTable = (summaries: UnitSummary[]) => {
         <strong>{unitSummary.minIncomeRange.min}</strong>
       ) : (
         <>
-          <strong>{unitSummary.minIncomeRange.min}</strong> {t("t.to")}{" "}
+          <strong>{unitSummary.minIncomeRange.min}</strong>
+          {` ${t("t.to")} `}
           <strong>{unitSummary.minIncomeRange.max}</strong>
         </>
       )
@@ -24,7 +26,9 @@ export const unitSummariesTable = (summaries: UnitSummary[]) => {
         </>
       ) : (
         <>
-          <strong>{rentMin}</strong> {t("t.to")} <strong>{rentMax}</strong>
+          <strong>{rentMin}</strong>
+          {` ${t("t.to")} `}
+          <strong>{rentMax}</strong>
           {unit}
         </>
       )
@@ -40,32 +44,39 @@ export const unitSummariesTable = (summaries: UnitSummary[]) => {
       : getRent(unitSummary.rentRange.min, unitSummary.rentRange.max)
 
     return {
-      unitType: <strong>{t(`listings.unitTypes.${unitSummary.unitType?.name}`)}</strong>,
-      minimumIncome: (
-        <>
-          {minIncome} {t("t.perMonth")}
-        </>
-      ),
-      rent: <>{rent}</>,
-      availability: (
-        <>
-          {unitSummary.totalAvailable > 0 ? (
-            <>
-              <strong>{unitSummary.totalAvailable}</strong> {unitPluralization}
-            </>
-          ) : (
-            <span className="uppercase">{t("listings.waitlist.label")}</span>
-          )}
-        </>
-      ),
+      unitType: {
+        content: <strong>{t(`listings.unitTypes.${unitSummary.unitType?.name}`)}</strong>,
+      },
+      minimumIncome: {
+        content: (
+          <span>
+            {minIncome}
+            {` ${t("t.perMonth")}`}
+          </span>
+        ),
+      },
+      rent: { content: <span>{rent}</span> },
+      availability: {
+        content: (
+          <span>
+            {unitSummary.totalAvailable > 0 ? (
+              <>
+                <strong>{unitSummary.totalAvailable}</strong> {unitPluralization}
+              </>
+            ) : (
+              <span className="uppercase">{t("listings.waitlist.label")}</span>
+            )}
+          </span>
+        ),
+      },
     }
   })
 
   return unitSummaries
 }
 
-export const getSummariesTable = (summaries: UnitSummary[]) => {
-  let unitSummaries = [] as Record<string, React.ReactNode>[]
+export const getSummariesTable = (summaries: UnitSummary[]): StandardTableData => {
+  let unitSummaries: StandardTableData = []
 
   if (summaries?.length > 0) {
     unitSummaries = unitSummariesTable(summaries)

package/src/locales/general.json

@@ -98,6 +98,7 @@
   "application.contact.yourPhoneNumber": "Your Phone Number",
   "application.contact.zip": "Zip",
   "application.contact.zipCode": "Zipcode",
+  "application.details.adaPriorities": "ADA Priorities Selected",
   "application.edited": "Edited",
   "application.financial.income.instruction1": "Add up your total gross (pre-tax) household income from wages, benefits and other sources from all household members.",
   "application.financial.income.instruction2": "You only need to provide an estimated total right now. The actual total will be calculated if you are selected.",
@@ -353,22 +354,28 @@
   "application.referralApplication.furtherInformation": "For further information",
   "application.referralApplication.instructions": "The permanent supportive housing units are referred directly through <JURISDICTION> Coordinated Entry System. Households experiencing homelessness can call <PHONE_NUMBER> in order to get connected to an Access Point to learn more about the coordinated entry system and access housing-related resources and information.",
   "application.referralApplication.phoneNumber": "211",
+  "application.review.confirmation.applicationReceived": "Application  \nreceived",
+  "application.review.confirmation.applicationsClosed": "Application  \nclosed",
+  "application.review.confirmation.applicationsRanked": "Application  \nranked",
   "application.review.confirmation.browseMore": "Browse more listings",
   "application.review.confirmation.createAccountParagraph": "Creating an account will save your information for future applications, and you can check the status of this application anytime.",
+  "application.review.confirmation.createAccount": "### Would you like to create an account?\n\nCreating an account will save your information for future applications, and you can check the status of this application anytime.",
   "application.review.confirmation.createAccountTitle": "Would you like to create an account?",
   "application.review.confirmation.doNotSubmitTitle": "Do not submit another application for this listing.",
   "application.review.confirmation.imdone": "No thanks, I'm done.",
-  "application.review.confirmation.lotteryNumber": "Here's your application confirmation number",
+  "application.review.confirmation.lotteryNumber": "Your confirmation number",
   "application.review.confirmation.needToUpdate": "If you need to update information on your application, do not apply again. Contact the agent if you did not receive an email confirmation.",
-  "application.review.confirmation.pleaseWriteNumber": "Please write down your application number and keep it in a safe place. We have also emailed this number to you if you provided an email address.",
+  "application.review.confirmation.pleaseWriteNumber": "Please write down your application number and keep it in a safe place. We have also emailed this number to you if you have provided an email address.",
   "application.review.confirmation.print": "View submitted application and print a copy.",
   "application.review.confirmation.title": "Thanks. We have received your application for ",
+  "application.review.confirmation.needToMakeUpdates": "### Need to make updates?\n\nIf you need to update information on your application, do not apply again. Instead, contact the agent for this listing.\n\n**%{agentName}**  \n%{agentPhone}  \n%{agentEmail}\n\n**Office Hours**  \n%{agentOfficeHours}\n\nContact the agent if you did not receive an email confirmation.",
   "application.review.confirmation.whatExpectFirstParagraph.attend": " You do not need to attend the housing lottery. Results will be posted ",
   "application.review.confirmation.whatExpectFirstParagraph.held": "The lottery will be held on ",
   "application.review.confirmation.whatExpectFirstParagraph.listing": "on the listing. ",
   "application.review.confirmation.whatExpectFirstParagraph.refer": "Please refer to the listing for the lottery results date.",
   "application.review.confirmation.whatExpectSecondparagraph": "Applicants will be contacted in order until vacancies are filled. Should your application be chosen, be prepared to fill out a more detailed application and provide required supporting documents.",
   "application.review.confirmation.whatExpectTitle": "What to expect next",
+  "application.review.confirmation.whatHappensNext": "### What happens next?\n\n* After all applications are submitted, the property manager will begin processing applications.\n\n* Eligibile applicants will be contacted by on a **first come first serve** basis until vacancies are filled\n\n* If you are contacted for an interview, you will need to fill out a more detailed application and provide supporting documents.",
   "application.review.demographics.ethnicityLabel": "Which best describes your ethnicity?",
   "application.review.demographics.ethnicityOptions.hispanicLatino": "Hispanic / Latino",
   "application.review.demographics.ethnicityOptions.notHispanicLatino": "Not Hispanic / Latino",

package/src/navigation/FooterNav.scss

@@ -30,7 +30,8 @@
 
   .footer-copyright {
     @screen lg {
-      @apply w-full;
+      @apply w-6/12;
+      @apply text-left;
     }
   }
 

package/src/overlays/Drawer.tsx

@@ -1,4 +1,4 @@
-import * as React from "react"
+import React, { useRef } from "react"
 import "./Drawer.scss"
 import { Icon } from "../icons/Icon"
 import { Overlay, OverlayProps } from "./Overlay"
@@ -6,6 +6,7 @@ import { Tag } from "../text/Tag"
 import { AppearanceStyleType, AppearanceSizeType } from "../global/AppearanceTypes"
 import { AlertTypes } from "../notifications/alertTypes"
 import { AlertBox } from "../notifications"
+import { nanoid } from "nanoid"
 
 export enum DrawerSide {
   left = "left",
@@ -28,18 +29,25 @@ const Drawer = (props: DrawerProps) => {
   const drawerClasses = ["drawer"]
   if (props.className) drawerClasses.push(props.className)
 
+  const uniqueIdRef = useRef(nanoid())
+
   return (
     <Overlay
-      ariaLabel={props.ariaLabel || props.title}
+      ariaLabelledBy={uniqueIdRef.current}
       ariaDescription={props.ariaDescription}
       open={props.open}
       onClose={props.onClose}
       backdrop={props.backdrop}
       className={"has-drawer" + (props.direction == DrawerSide.left ? " is-direction-left" : "")}
+      role="dialog"
     >
       <div className={drawerClasses.join(" ")}>
         <header className="drawer__header">
-          {props.title && <h1 className="drawer__title">{props.title}</h1>}
+          {props.title && (
+            <h1 className="drawer__title" id={uniqueIdRef.current}>
+              {props.title}
+            </h1>
+          )}
           {props.headerTag && (
             <Tag
               pillStyle={true}

package/src/overlays/Modal.tsx

@@ -1,7 +1,8 @@
-import React from "react"
+import React, { useRef } from "react"
 import "./Modal.scss"
 import { Icon } from "../icons/Icon"
 import { Overlay, OverlayProps } from "./Overlay"
+import { nanoid } from "nanoid"
 
 export interface ModalProps extends Omit<OverlayProps, "children"> {
   title: string
@@ -9,12 +10,17 @@ export interface ModalProps extends Omit<OverlayProps, "children"> {
   hideCloseIcon?: boolean
   children?: React.ReactNode
   slim?: boolean
+  role?: string
 }
 
-const ModalHeader = (props: { title: string }) => (
-  <header className="modal__inner">
-    <h1 className="modal__title">{props.title}</h1>
-  </header>
+const ModalHeader = (props: { title: string; uniqueId?: string }) => (
+  <>
+    <header className="modal__inner">
+      <h1 className="modal__title" id={props.uniqueId}>
+        {props.title}
+      </h1>
+    </header>
+  </>
 )
 
 const ModalFooter = (props: { actions: React.ReactNode[] }) => (
@@ -28,17 +34,20 @@ const ModalFooter = (props: { actions: React.ReactNode[] }) => (
 )
 
 export const Modal = (props: ModalProps) => {
+  const uniqueIdRef = useRef(nanoid())
+
   return (
     <Overlay
-      ariaLabel={props.ariaLabel || props.title}
+      ariaLabelledBy={uniqueIdRef.current}
       ariaDescription={props.ariaDescription}
       open={props.open}
       onClose={props.onClose}
       backdrop={props.backdrop}
       slim={props.slim}
+      role={props.role ? props.role : "dialog"}
     >
       <div className="modal">
-        <ModalHeader title={props.title} />
+        <ModalHeader title={props.title} uniqueId={uniqueIdRef.current} />
 
         <section className="modal__inner">
           {typeof props.children === "string" ? (

package/src/overlays/Overlay.tsx

@@ -8,13 +8,14 @@ import { CSSTransition } from "react-transition-group"
 
 export type OverlayProps = {
   open?: boolean
-  ariaLabel?: string
+  ariaLabelledBy?: string
   ariaDescription?: string
   className?: string
   backdrop?: boolean
   onClose?: () => void
   children: React.ReactNode
   slim?: boolean
+  role?: string
 }
 
 const OverlayInner = (props: OverlayProps) => {
@@ -31,8 +32,8 @@ const OverlayInner = (props: OverlayProps) => {
   return (
     <div
       className={classNames.join(" ")}
-      role="dialog"
-      aria-labelledby={props.ariaLabel}
+      role={props.role}
+      aria-labelledby={props.ariaLabelledBy}
       aria-describedby={props.ariaDescription}
       onClick={(e) => {
         if (e.target === e.currentTarget) closeHandler()

package/src/page_components/ApplicationTimeline.scss

@@ -0,0 +1,36 @@
+.markdown ul.application-timeline {
+  @apply mb-8;
+  @apply ml-0;
+}
+
+.application-timeline {
+  .progress-nav__item {
+    @apply pt-0;
+
+    text-transform: unset;
+
+    .absolute {
+      margin-top: 0.45rem;
+      z-index: 2;
+      margin-left: -0.4rem;
+    }
+
+    p {
+      padding-top: 3.8em;
+    }
+  }
+
+  .progress-nav__item.is-active::before,
+  .progress-nav__item.is-disabled::before {
+    height: 2rem;
+    width: 2rem;
+  }
+
+  .progress-nav__item.is-active::before {
+    @apply bg-green-700;
+  }
+
+  .progress-nav__item::after {
+    top: 1rem;
+  }
+}

package/src/page_components/ApplicationTimeline.tsx

@@ -0,0 +1,33 @@
+import React from "react"
+import Markdown from "markdown-to-jsx"
+import { Icon } from "../icons/Icon"
+import { t } from "../helpers/translator"
+import "./ApplicationTimeline.scss"
+
+const ApplicationTimeline = () => (
+  <ul
+    className="progress-nav application-timeline"
+    aria-label="Steps of processing your application"
+  >
+    <li className="progress-nav__item is-active" aria-current="step">
+      <span className="text-white absolute">
+        <Icon symbol="check" size="base" />
+      </span>
+      <Markdown className="font-bold" options={{ disableParsingRawHTML: true }}>
+        {t("application.review.confirmation.applicationReceived")}
+      </Markdown>
+    </li>
+    <li className="progress-nav__item is-disabled">
+      <Markdown options={{ disableParsingRawHTML: true }}>
+        {t("application.review.confirmation.applicationsClosed")}
+      </Markdown>
+    </li>
+    <li className="progress-nav__item is-disabled">
+      <Markdown options={{ disableParsingRawHTML: true }}>
+        {t("application.review.confirmation.applicationsRanked")}
+      </Markdown>
+    </li>
+  </ul>
+)
+
+export { ApplicationTimeline }

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/sign-in/FormSignIn.tsx

@@ -43,6 +43,7 @@ export type FormSignInControl = {
   errors: UseFormMethods["errors"]
   handleSubmit: UseFormMethods["handleSubmit"]
   register: UseFormMethods["register"]
+  watch: UseFormMethods["watch"]
 }
 
 export type FormSignInValues = {

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

@@ -0,0 +1,108 @@
+import {
+  AppearanceStyleType,
+  Button,
+  Modal,
+  t,
+  Form,
+  Field,
+  emailRegex,
+  NavigationContext,
+} from "@bloom-housing/ui-components"
+import React, { useEffect, useMemo, useContext } from "react"
+import { useForm } from "react-hook-form"
+
+export type ResendConfirmationModalProps = {
+  isOpen: boolean
+  initialEmailValue: string
+  onClose: () => void
+  onSubmit: (email: string) => void
+  loading: boolean
+}
+
+export type ResendConfirmationModalForm = {
+  onSubmit: (email: string) => void
+}
+
+const ResendConfirmationModal = ({
+  isOpen,
+  initialEmailValue,
+  loading,
+  onClose,
+  onSubmit,
+}: ResendConfirmationModalProps) => {
+  const { router } = useContext(NavigationContext)
+  // eslint-disable-next-line @typescript-eslint/unbound-method
+  const { register, errors, reset, getValues, trigger } = useForm({
+    defaultValues: useMemo(() => {
+      return {
+        emailResend: initialEmailValue,
+      }
+    }, [initialEmailValue]),
+  })
+
+  useEffect(() => {
+    reset({
+      emailResend: initialEmailValue,
+    })
+  }, [initialEmailValue, reset])
+
+  const onFormSubmit = async () => {
+    const isValid = await trigger()
+    if (!isValid) return
+
+    const { emailResend } = getValues()
+    onSubmit(emailResend)
+  }
+
+  return (
+    <Modal
+      open={isOpen}
+      title={t("authentication.signIn.yourAccountIsNotConfirmed")}
+      ariaDescription={t("authentication.createAccount.linkExpired")}
+      onClose={() => {
+        onClose()
+        window.scrollTo(0, 0)
+      }}
+      actions={[
+        <Button
+          type="button"
+          styleType={AppearanceStyleType.primary}
+          onClick={() => onFormSubmit()}
+          loading={loading}
+        >
+          {t("authentication.createAccount.resendTheEmail")}
+        </Button>,
+        <Button
+          type="button"
+          styleType={AppearanceStyleType.alert}
+          onClick={() => {
+            onClose()
+            window.scrollTo(0, 0)
+          }}
+        >
+          {t("t.cancel")}
+        </Button>,
+      ]}
+    >
+      <>
+        <Form>
+          <Field
+            caps={true}
+            type="email"
+            name="emailResend"
+            label={t("authentication.createAccount.resendAnEmailTo")}
+            placeholder="example@web.com"
+            validation={{ required: true, pattern: emailRegex }}
+            error={!!errors.emailResend}
+            errorMessage={t("authentication.signIn.loginError")}
+            register={register}
+          />
+        </Form>
+
+        <p className="pt-4">{t("authentication.createAccount.resendEmailInfo")}</p>
+      </>
+    </Modal>
+  )
+}
+
+export { ResendConfirmationModal as default, ResendConfirmationModal }

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
 }