@bloom-housing/ui-components 4.0.1-alpha.9 → 4.0.3

package/src/page_components/listing/ListingCard.tsx

@@ -18,14 +18,39 @@ export interface ListingCardHeaderProps {
 }
 export interface ListingCardProps {
   imageCardProps: ImageCardProps
+  children?: React.ReactElement
   seeDetailsLink?: string
   tableHeaderProps?: ListingCardHeaderProps
-  tableProps: ListingCardTableProps
+  tableProps?: ListingCardTableProps
   detailsLinkClass?: string
 }
 
 const ListingCard = (props: ListingCardProps) => {
-  const { imageCardProps, tableProps, detailsLinkClass, tableHeaderProps } = props
+  const { imageCardProps, tableProps, detailsLinkClass, tableHeaderProps, children } = props
+
+  const tableHeader = () => {
+    return (
+      <h3
+        className={`listings-row_title ${
+          tableHeaderProps?.tableHeaderClass && tableHeaderProps?.tableHeaderClass
+        }`}
+      >
+        {tableHeaderProps?.tableHeader}
+      </h3>
+    )
+  }
+
+  const tableSubHeader = () => {
+    return (
+      <h4
+        className={`listings-row_subtitle ${
+          tableHeaderProps?.tableSubHeaderClass && tableHeaderProps?.tableSubHeaderClass
+        }`}
+      >
+        {tableHeaderProps?.tableSubHeader}
+      </h4>
+    )
+  }
 
   return (
     <article className="listings-row" data-test-id={"listing-card-component"}>
@@ -33,26 +58,11 @@ const ListingCard = (props: ListingCardProps) => {
         <ImageCard {...imageCardProps} />
       </div>
       <div className="listings-row_content">
-        {tableHeaderProps?.tableHeader && (
-          <h3
-            className={`listings-row_title ${
-              tableHeaderProps.tableHeaderClass && tableHeaderProps.tableHeaderClass
-            }`}
-          >
-            {tableHeaderProps?.tableHeader}
-          </h3>
-        )}
-        {tableHeaderProps?.tableSubHeader && (
-          <h4
-            className={`listings-row_subtitle ${
-              tableHeaderProps.tableSubHeaderClass && tableHeaderProps.tableSubHeaderClass
-            }`}
-          >
-            {tableHeaderProps?.tableSubHeader}
-          </h4>
-        )}
+        {tableHeaderProps?.tableHeader && tableHeader()}
+        {tableHeaderProps?.tableSubHeader && tableSubHeader()}
         <div className="listings-row_table">
-          {(tableProps.data || tableProps.stackedData) && (
+          {children && children}
+          {tableProps && (tableProps.data || tableProps.stackedData) && (
             <>
               {tableHeaderProps?.stackedTable ? (
                 <StackedTable {...(tableProps as StackedTableProps)} />

package/src/page_components/listing/ListingsGroup.scss

@@ -6,44 +6,71 @@
 
 .listings-group__header {
   @apply flex;
-  @apply flex-row;
-  @apply flex-wrap;
+  @apply flex-col;
   @apply max-w-5xl;
   @apply m-auto;
   @apply mt-6;
   @apply mb-8;
   @apply p-3;
+  @apply justify-between;
+
+  @screen md {
+    @apply flex-row;
+  }
 }
 
 .listings-group__icon {
   @apply hidden;
-  @apply pt-2;
   @apply pr-5;
+  @apply mr-5;
+  @apply border-r-4;
+  @apply border-gray-700;
+  @apply items-center;
+  @apply hidden;
+  @screen md {
+    @apply flex;
+  }
+}
+
+.listings-group__content {
+  @apply flex;
+  @apply flex-row;
+  flex-grow: 2;
+  margin-right: 15px;
 
+  @apply max-w-full;
   @screen md {
-    @apply inline-block;
+    max-width: 70%;
   }
 }
 
 .listings-group__header-group {
-  @apply w-full;
+  max-width: inherit;
   @apply flex;
-  @apply items-center;
-  @apply mb-4;
+  @apply flex-col;
+  @apply items-start;
+  @apply justify-center;
+  @apply h-full;
+}
 
+.listings-group__info {
+  @apply text-gray-750;
+  @apply pt-1;
+  @apply pt-2;
   @screen md {
-    @apply w-7/12;
-    @apply mb-0;
+    @apply pt-0;
   }
 }
 
 .listings-group__button {
-  @apply w-full;
   @apply flex;
   @apply items-center;
-
+  flex-shrink: 0;
+  @apply ml-0;
+  @apply pt-5;
   @screen md {
-    @apply w-4/12;
+    @apply ml-6;
+    @apply pt-0;
   }
 }
 
@@ -51,15 +78,13 @@
   @apply uppercase;
   @apply font-alt-sans;
   @apply font-black;
-  @apply my-1;
   @apply tracking-widest;
   @apply border-b-4;
-  @apply border-gray-600;
+  @apply border-gray-700;
   @apply pb-1;
 
   @screen md {
-    @apply px-4;
-    @apply border-b-0;
-    @apply border-l-4;
+    @apply pb-0;
+    @apply border-0;
   }
 }

package/src/page_components/listing/ListingsGroup.tsx

@@ -1,43 +1,41 @@
 import React, { useState } from "react"
 import { Button } from "../../actions/Button"
-import { Icon } from "../../icons/Icon"
+import { Icon, IconTypes } from "../../icons/Icon"
 import "./ListingsGroup.scss"
 
 export interface ListingsGroupProps {
   children?: React.ReactNode
-  listingsCount: number
   header: string
+  hideButtonText: string
+  icon?: IconTypes
   info?: string
+  listingsCount: number
   showButtonText: string
-  hideButtonText: string
 }
 
 const ListingsGroup = (props: ListingsGroupProps) => {
   const [showListings, setShowListings] = useState(false)
   const toggleListings = () => setShowListings(!showListings)
 
-  let buttonText
-
   const listingsCount = ` (${props.listingsCount})`
-  if (showListings) {
-    buttonText = props.hideButtonText + listingsCount
-  } else {
-    buttonText = props.showButtonText + listingsCount
-  }
 
   return (
     <div className="listings-group">
       <div className="listings-group__header">
-        <div className="listings-group__icon">
-          <Icon size="xlarge" symbol="clock" />
-        </div>
-        <div className="listings-group__header-group">
-          <h2 className="listings-group__title">{props.header}</h2>
-          {props.info && <div className="px-4 my-2">{props.info}</div>}
+        <div className={"listings-group__content"}>
+          <div className="listings-group__icon">
+            <Icon size="xlarge" symbol={props.icon ?? `clock`} />
+          </div>
+          <div className="listings-group__header-group">
+            <h2 className="listings-group__title">{props.header}</h2>
+            {props.info && <div className="listings-group__info">{props.info}</div>}
+          </div>
         </div>
         <div className="listings-group__button">
           <Button className="w-full" onClick={() => toggleListings()}>
-            {buttonText}
+            {showListings
+              ? props.hideButtonText + listingsCount
+              : props.showButtonText + listingsCount}
           </Button>
         </div>
       </div>

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

@@ -5,7 +5,6 @@ import { LinkButton } from "../../../actions/LinkButton"
 import { AppearanceStyleType } from "../../../global/AppearanceTypes"
 import { Address } from "../../../helpers/address"
 import { SidebarAddress } from "./SidebarAddress"
-import { NumberedHeader } from "./NumberedHeader"
 import { OrDivider } from "./OrDivider"
 import { ListingStatus } from "@bloom-housing/backend-core/types"
 
@@ -16,7 +15,6 @@ export interface PaperApplication {
 
 export interface ApplicationsProps {
   onlineApplicationURL?: string
-  applicationsDueDate?: string
   applicationsOpen: boolean
   applicationsOpenDate?: string
   paperApplications?: PaperApplication[]
@@ -67,7 +65,7 @@ const GetApplication = (props: ApplicationsProps) => {
       {props.applicationsOpen && props.paperMethod && (
         <>
           {props.onlineApplicationURL && <OrDivider bgColor="white" />}
-          <NumberedHeader num={1} text={t("listings.apply.getAPaperApplication")} />
+          <div className="text-serif-lg">{t("listings.apply.getAPaperApplication")}</div>
           <Button
             styleType={
               !props.preview && props.onlineApplicationURL ? AppearanceStyleType.primary : undefined

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

@@ -1,6 +1,6 @@
 import * as React from "react"
 import { t } from "../../../helpers/translator"
-import moment from "moment"
+import dayjs from "dayjs"
 
 interface ListingUpdatedProps {
   listingUpdated: Date
@@ -11,7 +11,7 @@ const ListingUpdated = (props: ListingUpdatedProps) => {
   return (
     <section className="aside-block">
       <p className="text-tiny text-gray-800">
-        {`${t("listings.listingUpdated")}: ${moment(listingUpdated).format("MMMM DD, YYYY")}`}
+        {`${t("listings.listingUpdated")}: ${dayjs(listingUpdated).format("MMMM DD, YYYY")}`}
       </p>
     </section>
   )

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

@@ -2,14 +2,13 @@ import * as React from "react"
 import { t } from "../../../helpers/translator"
 import { Address } from "../../../helpers/address"
 import { SidebarAddress } from "./SidebarAddress"
-import { NumberedHeader } from "./NumberedHeader"
 import { OrDivider } from "./OrDivider"
 import { ListingStatus } from "@bloom-housing/backend-core/types"
 
 export interface PostmarkedApplication {
-  postmarkedApplicationsReceivedByDate: string
+  postmarkedApplicationsReceivedByDate: string | null
   developer: string
-  applicationsDueDate: string
+  applicationsDueDate: string | null
 }
 
 export interface ApplicationAddressesProps {
@@ -22,50 +21,61 @@ export interface ApplicationAddressesProps {
 }
 
 const SubmitApplication = (props: ApplicationAddressesProps) => {
-  if (props.listingStatus === ListingStatus.closed) {
+  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 })
+    }
+  }
+
   return (
     <>
-      {(props.applicationMailingAddress ||
-        props.applicationDropOffAddress ||
-        props.postmarkedApplicationData) && (
-        <section className="aside-block is-tinted bg-gray-100">
-          <NumberedHeader num={2} text={t("listings.apply.submitAPaperApplication")} />
-          {(props.applicationMailingAddress || props.postmarkedApplicationData) && (
+      <section className="aside-block is-tinted bg-gray-100">
+        <div className="text-serif-lg">{t("listings.apply.submitAPaperApplication")}</div>
+        {props.applicationMailingAddress && (
+          <>
+            <h3 className="text-caps-tiny">{t("listings.apply.sendByUsMail")}</h3>
             <>
-              <h3 className="text-caps-tiny">{t("listings.apply.sendByUsMail")}</h3>
               <p className="text-gray-700">{props.applicationOrganization}</p>
-              {props.applicationMailingAddress && (
-                <SidebarAddress address={props.applicationMailingAddress} />
-              )}
-              <p className="mt-4 text-tiny text-gray-750">
-                {props.postmarkedApplicationData?.postmarkedApplicationsReceivedByDate
-                  ? t("listings.apply.postmarkedApplicationsMustBeReceivedByDate", {
-                      applicationDueDate: props.postmarkedApplicationData?.applicationsDueDate,
-                      postmarkReceivedByDate:
-                        props.postmarkedApplicationData?.postmarkedApplicationsReceivedByDate,
-                      developer: props.postmarkedApplicationData?.developer,
-                    })
-                  : t("listings.apply.applicationsMustBeReceivedByDeadline")}
-              </p>
-            </>
-          )}
-          {props.applicationMailingAddress && props.applicationDropOffAddress && (
-            <OrDivider bgColor="gray-100" />
-          )}
-          {props.applicationDropOffAddress && (
-            <>
-              <h3 className="text-caps-tiny">{t("listings.apply.dropOffApplication")}</h3>
-              <SidebarAddress
-                address={props.applicationDropOffAddress}
-                officeHours={props.applicationDropOffAddressOfficeHours}
-              />
+              <SidebarAddress address={props.applicationMailingAddress} />
             </>
-          )}
-        </section>
-      )}
+            <p className="mt-4 text-tiny text-gray-750">{getPostmarkString()}</p>
+          </>
+        )}
+        {props.applicationDropOffAddress && (
+          <>
+            {props.applicationMailingAddress && <OrDivider bgColor="gray-100" />}
+            <h3 className="text-caps-tiny">{t("listings.apply.dropOffApplication")}</h3>
+            <SidebarAddress
+              address={props.applicationDropOffAddress}
+              officeHours={props.applicationDropOffAddressOfficeHours}
+            />
+          </>
+        )}
+      </section>
     </>
   )
 }

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

@@ -1,7 +1,7 @@
 import * as React from "react"
 import { ListingEvent } from "@bloom-housing/backend-core/types"
 import { t } from "../../../../helpers/translator"
-import moment from "moment"
+import dayjs from "dayjs"
 
 const DownloadLotteryResults = (props: { event: ListingEvent; pdfUrl: string }) => {
   const { event, pdfUrl } = props
@@ -12,7 +12,7 @@ const DownloadLotteryResults = (props: { event: ListingEvent; pdfUrl: string })
         <section className="aside-block text-center">
           <h2 className="text-caps pb-4">{t("listings.lotteryResults.header")}</h2>
           <p className="uppercase text-gray-800 text-tiny font-semibold pb-4">
-            {moment(event.startTime).format("MMMM D, YYYY")}
+            {dayjs(event.startTime).format("MMMM D, YYYY")}
           </p>
           <a
             className="button is-primary w-full mb-2"

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

@@ -1,20 +1,21 @@
 import * as React from "react"
 import { ListingEvent } from "@bloom-housing/backend-core/types"
-import moment from "moment"
+import dayjs from "dayjs"
 
 const EventDateSection = (props: { event: ListingEvent }) => {
+  const getRangeString = () => {
+    const startTime = dayjs(props.event.startTime).format("hh:mma")
+    const endTime = dayjs(props.event.endTime).format("hh:mma")
+    return startTime === endTime ? startTime : `${startTime} - ${endTime}`
+  }
   return (
     <>
       {props.event.startTime && (
         <p className="text text-gray-800 pb-3 flex justify-between items-center">
           <span className="inline-block text-tiny uppercase">
-            {moment(props.event.startTime).format("MMMM D, YYYY")}
-          </span>
-          <span className="inline-block text-sm font-bold">
-            {moment(props.event.startTime).format("hh:mma") +
-              "-" +
-              moment(props.event.endTime).format("hh:mma")}
+            {dayjs(props.event.startTime).format("MMMM D, YYYY")}
           </span>
+          <span className="inline-block text-sm font-bold">{getRangeString()}</span>
         </p>
       )}
     </>

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

@@ -1,7 +1,7 @@
 import * as React from "react"
 import { ListingEvent } from "@bloom-housing/backend-core/types"
 import { t } from "../../../../helpers/translator"
-import moment from "moment"
+import dayjs from "dayjs"
 
 const LotteryResultsEvent = (props: { event: ListingEvent }) => {
   const { event } = props
@@ -9,13 +9,13 @@ const LotteryResultsEvent = (props: { event: ListingEvent }) => {
     <section className="aside-block">
       <h4 className="text-caps-underline">{t("listings.lotteryResults.header")}</h4>
       <p className="text text-gray-800 pb-3 flex justify-between items-center">
-        <span className="inline-block">{moment(props.event.startTime).format("MMMM D, YYYY")}</span>
+        <span className="inline-block">{dayjs(props.event.startTime).format("MMMM D, YYYY")}</span>
       </p>
       {event.note && <p className="text text-gray-600">{event.note}</p>}
       {!event.note && (
         <p className="text-tiny text-gray-600">
           {t("listings.lotteryResults.completeResultsWillBePosted", {
-            hour: moment(props.event.startTime).format("h a"),
+            hour: dayjs(props.event.startTime).format("h a"),
           })}
         </p>
       )}

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

@@ -1,5 +1,4 @@
-import React from "react"
-import Link from "next/link"
+import React, { useContext } from "react"
 import {
   AppearanceStyleType,
   Button,
@@ -15,7 +14,16 @@ import {
   ErrorMessage,
 } from "@bloom-housing/ui-components"
 import type { UseFormMethods } from "react-hook-form"
-import type { NetworkErrorValue, NetworkErrorReset } from "@bloom-housing/shared-helpers"
+import { NavigationContext } from "../../config/NavigationContext"
+
+export type NetworkErrorValue = {
+  title: string
+  content: string
+} | null
+
+export type NetworkErrorDetermineError = (status: number, error: Error) => void
+
+export type NetworkErrorReset = () => void
 
 export type FormSignInProps = {
   control: FormSignInControl
@@ -49,6 +57,7 @@ const FormSignIn = ({
   const onError = () => {
     window.scrollTo(0, 0)
   }
+  const { LinkComponent } = useContext(NavigationContext)
 
   return (
     <FormCard>
@@ -90,9 +99,9 @@ const FormSignIn = ({
           />
 
           <aside className="float-right text-tiny font-semibold">
-            <Link href="/forgot-password">
+            <LinkComponent href="/forgot-password">
               <a>{t("authentication.signIn.forgotPassword")}</a>
-            </Link>
+            </LinkComponent>
           </aside>
 
           <Field