@bloom-housing/ui-components 4.2.2-alpha.2 → 4.2.2-alpha.20

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/forgot-password/FormForgotPassword.tsx

@@ -62,8 +62,8 @@ const FormForgotPassword = ({
         </AlertBox>
       )}
 
-      {!!networkError.error && Object.entries(errors).length === 0 && (
-        <ErrorMessage id={"householdsize-error"} error={!!networkError.error}>
+      {!!networkError.error?.error && Object.entries(errors).length === 0 && (
+        <ErrorMessage id={"forgotpasswordemail-error"} error={!!networkError.error}>
           <AlertBox type="alert" inverted onClose={() => networkError.reset()}>
             {networkError.error.title}
           </AlertBox>
@@ -76,7 +76,7 @@ const FormForgotPassword = ({
 
       <SiteAlert type="notice" dismissable />
 
-      <div className="form-card__group pt-0 border-b">
+      <div className="form-card__group pt-0">
         <Form id="sign-in" className="mt-10" onSubmit={handleSubmit(onSubmit, onError)}>
           <Field
             caps={true}
@@ -86,8 +86,9 @@ const FormForgotPassword = ({
             error={errors.email}
             errorMessage={errors.email ? t("authentication.signIn.loginError") : undefined}
             register={register}
+            onChange={() => networkError.reset()}
           />
-          <section className="bg-gray-300">
+          <section>
             <div className="text-center mt-6">
               <Button styleType={AppearanceStyleType.primary}>
                 {t("authentication.forgotPassword.sendEmail")}

package/src/page_components/listing/AdditionalFees.tsx

@@ -1,49 +1,56 @@
 import * as React from "react"
-import { t } from "../../helpers/translator"
 
 export interface AdditionalFeesProps {
-  depositMin?: string
-  depositMax?: string
+  /** The application fee for the property, rendered in the first block */
   applicationFee?: string
-  costsNotIncluded?: string
-  depositHelperText?: string
-}
-
-const AdditionalFees = (props: AdditionalFeesProps) => {
-  if (!props.depositMin && !props.depositMax && !props.applicationFee && !props.costsNotIncluded) {
-    return <></>
+  /** Costs not included in the deposit or application fee, rendered below both blocks */
+  costsNotIncluded?: string | React.ReactNode
+  /** The deposit amount for the property, rendered in the second block */
+  deposit?: string
+  strings: {
+    sectionHeader: string
+    deposit?: string
+    depositSubtext?: string[]
+    applicationFee?: string
+    applicationFeeSubtext?: string[]
   }
+}
 
-  const getDeposit = () => {
-    const min = props.depositMin
-    const max = props.depositMax
-    if (min && max && min !== max) {
-      return `$${min} – $${max}`
-    } else if (min) return `$${min}`
-    else return `$${max}`
-  }
+const AdditionalFees = ({
+  deposit,
+  applicationFee,
+  costsNotIncluded,
+  strings,
+}: AdditionalFeesProps) => {
   return (
     <div className="info-card bg-gray-100 border-0">
-      <p className="info-card__title">{t("listings.sections.additionalFees")}</p>
+      <p className="info-card__title mb-2">{strings.sectionHeader}</p>
       <div className="info-card__columns text-sm">
-        {props.applicationFee && (
-          <div className="info-card__column">
-            <div className="text-base">{t("listings.applicationFee")}</div>
-            <div className="text-xl font-bold">${props.applicationFee}</div>
-            <div>{t("listings.applicationPerApplicantAgeDescription")}</div>
-            <div>{t("listings.applicationFeeDueAt")}</div>
+        {applicationFee && (
+          <div className={`info-card__column ${deposit && "mr-2"}`}>
+            <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>
         )}
-        {(props.depositMin || props.depositMax) && (
-          <div className="info-card__column">
-            <div className="text-base">{t("t.deposit")}</div>
-            <div className="text-xl font-bold">{getDeposit()}</div>
-            {props.depositHelperText && <div>{props.depositHelperText}</div>}
+        {deposit && (
+          <div className={`info-card__column ${applicationFee && "ml-2"}`}>
+            <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>
         )}
       </div>
 
-      {props.costsNotIncluded && <p className="text-sm mt-6">{props.costsNotIncluded}</p>}
+      {costsNotIncluded && (
+        <p className={`text-sm mt-2 ${(applicationFee || deposit) && `mt-6`}`}>
+          {costsNotIncluded}
+        </p>
+      )}
     </div>
   )
 }

package/src/page_components/listing/ListingCard.scss

@@ -19,6 +19,7 @@
 .listings-row_figure {
   @apply w-full;
   @apply p-3;
+  @apply pb-0;
 
   @screen lg {
     @apply w-6/12;
@@ -32,6 +33,17 @@
   @screen lg {
     @apply w-6/12;
   }
+
+  .listings-row_headers {
+    @apply flex;
+    @apply flex-col;
+    @apply items-center;
+    @apply text-center;
+    @screen md {
+      @apply items-start;
+      @apply text-left;
+    }
+  }
 }
 
 .listings-row_table {

package/src/page_components/listing/ListingCard.tsx

@@ -122,8 +122,10 @@ const ListingCard = (props: ListingCardProps) => {
             (contentProps.contentHeader?.text || contentProps?.contentSubheader?.text) && (
               <hr className={"mb-2"} />
             )}
-          {getHeader(contentProps?.tableHeader, 4, "tableHeader")}
-          {getHeader(contentProps?.tableSubheader, 5, "tableSubheader")}
+          <div className={"listings-row_headers"}>
+            {getHeader(contentProps?.tableHeader, 4, "tableHeader")}
+            {getHeader(contentProps?.tableSubheader, 5, "tableSubheader")}
+          </div>
           {children && children}
           {tableProps && (tableProps.data || tableProps.stackedData) && (
             <>
@@ -159,7 +161,7 @@ const ListingCard = (props: ListingCardProps) => {
         <ImageCard {...imageCardProps} />
       </div>
       <div className="listings-row_content">
-        <div>{getContentHeader()}</div>
+        <div className={"listings-row_headers"}>{getContentHeader()}</div>
         {getContent()}
       </div>
     </article>

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 = {
@@ -111,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

@@ -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/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
 }
 

package/src/tables/StackedTable.tsx

@@ -1,43 +1,54 @@
 import * as React from "react"
-import { TableHeaders } from "./StandardTable"
+import { StandardTableData, TableHeaders } from "./StandardTable"
 import { MinimalTable } from "./MinimalTable"
 
 export interface StackedTableRow {
+  /** The main text content of the cell */
   cellText: string
+  /** The subtext of the cell, displayed beneath the main text */
   cellSubText?: string
-  hideMobile?: boolean
+  /** Hides this cell's subtext on mobile views */
+  hideSubTextMobile?: boolean
+  /** Text content that will replace this cell's header on mobile views */
+  mobileReplacement?: string
 }
 
 export interface StackedTableProps {
+  /** The headers for the table passed as text content with optional settings */
   headers: TableHeaders
+  /** Headers hidden on desktop views */
   headersHiddenDesktop?: string[]
+  /** The table data passed as records of column name to cell data */
   stackedData?: Record<string, StackedTableRow>[]
+  /** A class name applied to the root of the table */
   className?: string
 }
 
 const StackedTable = (props: StackedTableProps) => {
-  const tableClasses = ["base", props.className]
-  const modifiedData: Record<string, React.ReactNode>[] = []
-  const cellTextClass = "font-semibold text-gray-750"
-  const cellSubtextClass = "text-sm text-gray-700"
+  const tableClasses = ["base", "stacked-table", props.className]
+  const modifiedData: StandardTableData = []
+
   props.stackedData?.forEach((dataRow) => {
     const dataCell = Object.keys(dataRow).reduce((acc, item) => {
-      acc[item] = (
-        <div
-          className={`md:flex md:flex-col w-1/2 md:w-full ${
-            props.headersHiddenDesktop?.includes(item) && "md:hidden"
-          }`}
-        >
-          <span className={`${cellTextClass}`}>{dataRow[item].cellText}</span>
-          <span
-            className={`pl-1 md:pl-0 ${
-              dataRow[item].hideMobile && "hidden md:block"
-            } ${cellSubtextClass}`}
+      acc[item] = {
+        content: (
+          <div
+            className={`stacked-table-cell-container ${
+              props.headersHiddenDesktop?.includes(item) && "md:hidden"
+            }`}
           >
-            {dataRow[item].cellSubText}
-          </span>
-        </div>
-      )
+            <span className={"stacked-table-cell"}>{dataRow[item].cellText}</span>
+            <span
+              className={`stacked-table-subtext  ${
+                dataRow[item].hideSubTextMobile && "hidden md:block"
+              } `}
+            >
+              {dataRow[item].cellSubText}
+            </span>
+          </div>
+        ),
+        mobileReplacement: dataRow[item].cellText,
+      }
       return acc
     }, {})
     modifiedData.push(dataCell)
@@ -48,14 +59,15 @@ const StackedTable = (props: StackedTableProps) => {
     if (props.headersHiddenDesktop?.includes(headerKey)) {
       let headerClasses = "md:hidden"
       headerClasses = `${tempHeader["className"] && tempHeader["className"]} ${headerClasses}`
-      tempHeader = { name: tempHeader["name"] ?? tempHeader, className: headerClasses }
+      tempHeader = {
+        name: tempHeader["name"] ?? tempHeader,
+        className: `stacked-table-header ${headerClasses}`,
+      }
     } else {
       acc[headerKey] = props.headers[headerKey]
       tempHeader = {
         name: tempHeader["name"] ?? tempHeader,
-        className: `${
-          tempHeader["className"] && tempHeader["className"]
-        } px-0 text-base text-gray-700 border-b`,
+        className: `${tempHeader["className"] && tempHeader["className"]} stacked-table-header`,
       }
     }
     acc[headerKey] = tempHeader
@@ -68,7 +80,7 @@ const StackedTable = (props: StackedTableProps) => {
       data={modifiedData}
       className={tableClasses.join(" ")}
       responsiveCollapse={true}
-      cellClassName={"py-3 px-0"}
+      cellClassName={"b-0"}
     />
   )
 }