@bloom-housing/ui-components 4.0.3 → 4.1.0

package/src/notifications/AlertBox.scss

@@ -1,10 +1,10 @@
 .alert-box {
   @apply relative;
-  @apply p-4;
+  @apply py-3;
+  @apply px-4;
   @apply leading-snug;
   @apply flex;
   @apply items-center;
-  max-height: 50px;
 
   .alert-box_inner {
     @apply m-auto;
@@ -79,8 +79,8 @@
 
 .alert-box__close {
   @apply text-3xl;
-  line-height: 1rem;
   right: 1rem;
   @apply ml-3;
   @apply p-0;
+  line-height: 1rem;
 }

package/src/notifications/AlertBox.tsx

@@ -52,6 +52,7 @@ const AlertBox = (props: AlertBoxProps) => {
               size="medium"
               symbol={icons[props.type || "alert"]}
               fill={props.inverted ? IconFillColors.white : undefined}
+              ariaHidden={true}
             />
           </span>
           <span className="alert-box__body">
@@ -63,8 +64,9 @@ const AlertBox = (props: AlertBoxProps) => {
           <button
             className={`alert-box__close ${props.inverted ? "text-white" : ""}`}
             onClick={onClose}
+            aria-label="close alert"
           >
-            &times;
+            <span aria-hidden={true}>&times;</span>
           </button>
         )}
       </div>

package/src/notifications/AlertNotice.tsx

@@ -1,4 +1,5 @@
 import React from "react"
+import Markdown from "markdown-to-jsx"
 import type { ReactNode } from "react"
 import type { AlertTypes } from "./alertTypes"
 import { colorClasses } from "./alertTypes"
@@ -30,7 +31,11 @@ const AlertNotice = (props: AlertNoticeProps) => {
       )}
 
       <div className="alert-notice__body">
-        {typeof props.children === "string" ? <p>{props.children}</p> : props.children}
+        {typeof props.children === "string" ? (
+          <Markdown>{props.children}</Markdown>
+        ) : (
+          props.children
+        )}
       </div>
     </div>
   )

package/src/notifications/ApplicationStatus.scss

@@ -1,10 +1,5 @@
 .application-status {
   @apply p-4;
-  @screen lg {
-    @apply whitespace-nowrap;
-  }
-}
-
-.application-status__sub-content {
-  padding-left: 22px;
+  @apply flex;
+  gap: 0.45rem;
 }

package/src/notifications/ApplicationStatus.tsx

@@ -27,12 +27,7 @@ const ApplicationStatus = (props: ApplicationStatusProps) => {
   let icon
 
   if (withIcon) {
-    icon = (
-      <span>
-        <Icon size="medium" symbol={iconType} fill={vivid ? IconFillColors.white : undefined} />{" "}
-        &nbsp;
-      </span>
-    )
+    icon = <Icon size="medium" symbol={iconType} fill={vivid ? IconFillColors.white : undefined} />
   }
 
   switch (status) {
@@ -57,13 +52,15 @@ const ApplicationStatus = (props: ApplicationStatusProps) => {
   return (
     <div className={`application-status ${textSize} ${textColor} ${bgColor}`}>
       {icon}
-      {content}
-      {props.subContent && (
-        <>
-          <br />
-          <span className={"application-status__sub-content"}>{props.subContent}</span>
-        </>
-      )}
+      <span>
+        {content}
+        {props.subContent && (
+          <>
+            <br />
+            {props.subContent}
+          </>
+        )}
+      </span>
     </div>
   )
 }

package/src/overlays/Modal.tsx

@@ -8,6 +8,7 @@ export interface ModalProps extends Omit<OverlayProps, "children"> {
   actions?: React.ReactNode[]
   hideCloseIcon?: boolean
   children?: React.ReactNode
+  slim?: boolean
 }
 
 const ModalHeader = (props: { title: string }) => (
@@ -34,6 +35,7 @@ export const Modal = (props: ModalProps) => {
       open={props.open}
       onClose={props.onClose}
       backdrop={props.backdrop}
+      slim={props.slim}
     >
       <div className="modal">
         <ModalHeader title={props.title} />

package/src/overlays/Overlay.scss

@@ -48,3 +48,11 @@
 
   @include transition-timing;
 }
+
+.fixed-overlay__inner-slim {
+  width: 75vw;
+
+  @screen md {
+    width: 50vw;
+  }
+}

package/src/overlays/Overlay.tsx

@@ -14,6 +14,7 @@ export type OverlayProps = {
   backdrop?: boolean
   onClose?: () => void
   children: React.ReactNode
+  slim?: boolean
 }
 
 const OverlayInner = (props: OverlayProps) => {
@@ -37,7 +38,7 @@ const OverlayInner = (props: OverlayProps) => {
         if (e.target === e.currentTarget) closeHandler()
       }}
     >
-      <div className="fixed-overlay__inner">
+      <div className={`fixed-overlay__inner ${props.slim ? "fixed-overlay__inner-slim" : ""}`}>
         <FocusLock>{props.children}</FocusLock>
       </div>
     </div>

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

@@ -0,0 +1,114 @@
+import React, { useContext } from "react"
+import {
+  AppearanceStyleType,
+  Button,
+  Field,
+  Form,
+  FormCard,
+  Icon,
+  t,
+  AlertBox,
+  SiteAlert,
+  AlertNotice,
+  ErrorMessage,
+  emailRegex,
+} from "@bloom-housing/ui-components"
+import { NavigationContext } from "../../config/NavigationContext"
+import type { UseFormMethods } from "react-hook-form"
+
+export type FormForgotPasswordProps = {
+  control: FormForgotPasswordControl
+  onSubmit: (data: FormForgotPasswordValues) => void
+  networkError: FormForgotPasswordNetworkError
+}
+
+export type NetworkErrorReset = () => void
+
+export type NetworkErrorValue = {
+  title: string
+  content: string
+} | null
+
+export type FormForgotPasswordNetworkError = {
+  error: NetworkErrorValue
+  reset: NetworkErrorReset
+}
+
+export type FormForgotPasswordControl = {
+  errors: UseFormMethods["errors"]
+  handleSubmit: UseFormMethods["handleSubmit"]
+  register: UseFormMethods["register"]
+}
+
+export type FormForgotPasswordValues = {
+  email: string
+}
+
+const FormForgotPassword = ({
+  onSubmit,
+  networkError,
+  control: { errors, register, handleSubmit },
+}: FormForgotPasswordProps) => {
+  const onError = () => {
+    window.scrollTo(0, 0)
+  }
+
+  const { router } = useContext(NavigationContext)
+
+  return (
+    <FormCard>
+      <div className="form-card__lead text-center border-b mx-0">
+        <Icon size="2xl" symbol="profile" />
+        <h2 className="form-card__title">{t("authentication.forgotPassword.sendEmail")}</h2>
+      </div>
+
+      {Object.entries(errors).length > 0 && !networkError.error && (
+        <AlertBox type="alert" inverted closeable>
+          {errors.authentication ? errors.authentication.message : t("errors.errorsToResolve")}
+        </AlertBox>
+      )}
+
+      {!!networkError.error && Object.entries(errors).length === 0 && (
+        <ErrorMessage id={"householdsize-error"} error={!!networkError.error}>
+          <AlertBox type="alert" inverted onClose={() => networkError.reset()}>
+            {networkError.error.title}
+          </AlertBox>
+
+          <AlertNotice title="" type="alert" inverted>
+            {networkError.error.content}
+          </AlertNotice>
+        </ErrorMessage>
+      )}
+
+      <SiteAlert type="notice" dismissable />
+
+      <div className="form-card__group pt-0 border-b">
+        <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}
+            register={register}
+          />
+          <section className="bg-gray-300">
+            <div className="text-center mt-6">
+              <Button styleType={AppearanceStyleType.primary}>
+                {t("authentication.forgotPassword.sendEmail")}
+              </Button>
+            </div>
+            <div className="text-center mt-6">
+              <a href="#" onClick={() => router.back()}>
+                {t("t.cancel")}
+              </a>
+            </div>
+          </section>
+        </Form>
+      </div>
+    </FormCard>
+  )
+}
+
+export { FormForgotPassword as default, FormForgotPassword }

package/src/page_components/listing/ContentAccordion.scss

@@ -0,0 +1,34 @@
+.accordion-blue-theme__bar {
+  @apply bg-primary-light;
+  @apply p-4;
+  @apply border-b;
+  @apply border-primary;
+  @apply flex;
+  @apply justify-between;
+  @apply font-sans;
+  @apply text-tiny;
+  @apply text-gray-800;
+}
+
+.accordion-gray-theme__bar {
+  @apply bg-gray-400;
+  @apply px-4;
+  @apply py-4;
+  @apply border-0;
+  @apply rounded-md;
+  border-radius: 8px;
+
+  @apply flex;
+  @apply justify-between;
+  @apply font-sans;
+  @apply text-base;
+  @apply text-gray-950;
+
+  svg {
+    fill: #1f2937; // gray-800
+  }
+}
+
+.accordion-gray-theme__bar.accordion-open {
+  border-radius: 8px 8px 0px 0px;
+}

package/src/page_components/listing/ContentAccordion.tsx

@@ -0,0 +1,77 @@
+import React, { useState, useRef } from "react"
+import { Icon, IconFillColors } from "../../icons/Icon"
+import "./ContentAccordion.scss"
+
+interface ContentAccordionProps {
+  customBarContent?: React.ReactNode
+  customExpandedContent?: React.ReactNode
+  disableAccordion?: boolean
+  accordionTheme?: AccordionTheme
+  barClass?: string
+}
+
+export type AccordionTheme = "blue" | "gray"
+
+/**
+ * An accordion that consists of header bar content and expandable content
+ * Two existing themes under our design system are available
+ */
+const ContentAccordion = (props: ContentAccordionProps) => {
+  const [accordionOpen, setAccordionOpen] = useState(false)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+
+  const toggleTable = () => {
+    if (!props.disableAccordion) {
+      setAccordionOpen(!accordionOpen)
+      buttonRef?.current?.focus()
+    }
+  }
+
+  return (
+    <div className={`mb-4`}>
+      <button
+        onClick={toggleTable}
+        className={`w-full text-left ${props.disableAccordion && "cursor-default"}`}
+        ref={buttonRef}
+        aria-expanded={accordionOpen}
+        data-test-id={"content-accordion-button"}
+      >
+        <div
+          className={`flex justify-between ${props.barClass} ${
+            props.accordionTheme === "blue" && "accordion-blue-theme__bar"
+          } ${props.accordionTheme === "gray" && "accordion-gray-theme__bar"} ${
+            accordionOpen && "accordion-open"
+          }`}
+        >
+          {props.customBarContent}
+          {!props.disableAccordion && (
+            <>
+              {accordionOpen ? (
+                <Icon
+                  symbol={"closeSmall"}
+                  size={"base"}
+                  fill={IconFillColors.primary}
+                  className={"pt-1 flex items-center"}
+                  dataTestId={"accordion-close"}
+                  key={"accordion-close"}
+                />
+              ) : (
+                <Icon
+                  symbol={"arrowDown"}
+                  size={"base"}
+                  fill={IconFillColors.primary}
+                  className={"flex items-center"}
+                  dataTestId={"accordion-open"}
+                  key={"accordion-open"}
+                />
+              )}
+            </>
+          )}
+        </div>
+      </button>
+      {accordionOpen && <div>{props.customExpandedContent}</div>}
+    </div>
+  )
+}
+
+export { ContentAccordion as default, ContentAccordion }

package/src/page_components/listing/ListingMap.scss

@@ -1,3 +1,7 @@
+.listing-map {
+  min-height: 12rem;
+}
+
 .pin {
   @apply absolute;
   width: 30px;

package/src/page_components/listing/ListingMap.tsx

@@ -1,9 +1,10 @@
-import React, { useState, useCallback, useEffect } from "react"
+import React, { useState, useCallback, useEffect, useMemo } from "react"
 import "mapbox-gl/dist/mapbox-gl.css"
 import MapGL, { Marker } from "react-map-gl"
 
 import "./ListingMap.scss"
 import { MultiLineAddress, Address } from "../../helpers/address"
+import { useIntersect } from "../../.."
 
 export interface ListingMapProps {
   address?: Address
@@ -35,6 +36,15 @@ const isValidLongitude = (longitude: number) => {
 }
 
 const ListingMap = (props: ListingMapProps) => {
+  // Lazy load the map component only when it will become visible on screen
+  const { setIntersectingElement, intersecting } = useIntersect({
+    // `window` isn't set for SSR, so we'll use `global` instead—doesn't really
+    // matter because the map won't ever get rendered in SSR anyway
+    rootMargin: `${global.innerHeight || 0}px`,
+  })
+  const [hasIntersected, setHasIntersected] = useState(false)
+  if (intersecting && !hasIntersected) setHasIntersected(true)
+
   const [marker, setMarker] = useState({
     latitude: props.address?.latitude,
     longitude: props.address?.longitude,
@@ -95,12 +105,12 @@ const ListingMap = (props: ListingMapProps) => {
     return null
 
   return (
-    <div className="listing-map">
+    <div className="listing-map" ref={setIntersectingElement}>
       <div className="addressPopup">
         {props.listingName && <h3 className="text-caps-tiny">{props.listingName}</h3>}
         <MultiLineAddress address={props.address} />
       </div>
-      {(process.env.mapBoxToken || process.env.MAPBOX_TOKEN) && (
+      {(process.env.mapBoxToken || process.env.MAPBOX_TOKEN) && hasIntersected && (
         <MapGL
           mapboxApiAccessToken={process.env.mapBoxToken || process.env.MAPBOX_TOKEN}
           mapStyle="mapbox://styles/mapbox/streets-v11"

package/src/page_components/listing/UnitTables.tsx

@@ -1,10 +1,11 @@
-import * as React from "react"
+import React from "react"
 import { nanoid } from "nanoid"
 import { MinMax, UnitSummary, Unit } from "@bloom-housing/backend-core/types"
 
 import { StandardTable } from "../../tables/StandardTable"
 import { t } from "../../helpers/translator"
 import { numberOrdinal } from "../../helpers/numberOrdinal"
+import ContentAccordion from "./ContentAccordion"
 
 const formatRange = (range: MinMax, ordinalize?: boolean) => {
   let min: string | number = range.min
@@ -43,30 +44,26 @@ const UnitTables = (props: UnitTablesProps) => {
     floor: "t.floor",
   }
 
-  const toggleTable = (event: React.MouseEvent) => {
-    if (!props.disableAccordion) {
-      event.currentTarget.parentElement?.querySelector(".unit-table")?.classList?.toggle("hidden")
-    }
-  }
-
-  const buttonClasses = ["w-full", "text-left"]
-  if (props.disableAccordion) buttonClasses.push("cursor-default")
-
   return (
     <>
-      {unitSummaries.map((unitSummary: UnitSummary) => {
-        const uniqKey = process.env.NODE_ENV === "test" ? "" : nanoid()
+      {unitSummaries.map((unitSummary: UnitSummary, index) => {
         const units = props.units.filter(
           (unit: Unit) => unit.unitType?.name == unitSummary.unitType.name
         )
         const unitsFormatted = [] as Array<Record<string, React.ReactNode>>
-        let floorSection
+        let floorSection: React.ReactNode
         units.forEach((unit: Unit) => {
           unitsFormatted.push({
             number: unit.number,
             sqFeet: (
               <>
-                <strong>{unit.sqFeet}</strong> {t("t.sqFeet")}
+                {unit.sqFeet ? (
+                  <>
+                    <strong>{parseInt(unit.sqFeet)}</strong> {t("t.sqFeet")}
+                  </>
+                ) : (
+                  <></>
+                )}
               </>
             ),
             numBathrooms: <strong>{unit.numBathrooms}</strong>,
@@ -74,7 +71,7 @@ const UnitTables = (props: UnitTablesProps) => {
           })
         })
 
-        let areaRangeSection
+        let areaRangeSection: React.ReactNode
         if (unitSummary.areaRange?.min || unitSummary.areaRange?.max) {
           areaRangeSection = `, ${formatRange(unitSummary.areaRange)} ${t("t.squareFeet")}`
         }
@@ -88,20 +85,33 @@ const UnitTables = (props: UnitTablesProps) => {
               }`
         }
 
-        return (
-          <div key={uniqKey} className="mb-4">
-            <button onClick={toggleTable} className={buttonClasses.join(" ")}>
-              <h3 className="toggle-header">
-                <strong>{t("listings.unitTypes." + unitSummary.unitType.name)}</strong>:&nbsp;
-                {unitsLabel(units)}
-                {areaRangeSection}
-                {floorSection}
-              </h3>
-            </button>
-            <div className="unit-table hidden">
+        const getBarContent = () => {
+          return (
+            <h3 className={"toggle-header-content"}>
+              <strong>{t("listings.unitTypes." + unitSummary.unitType.name)}</strong>:&nbsp;
+              {unitsLabel(units)}
+              {areaRangeSection}
+              {floorSection}
+            </h3>
+          )
+        }
+
+        const getExpandableContent = () => {
+          return (
+            <div className="unit-table">
               <StandardTable headers={unitsHeaders} data={unitsFormatted} />
             </div>
-          </div>
+          )
+        }
+
+        return (
+          <ContentAccordion
+            customBarContent={getBarContent()}
+            customExpandedContent={getExpandableContent()}
+            disableAccordion={props.disableAccordion}
+            accordionTheme={"blue"}
+            key={index}
+          />
         )
       })}
     </>

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

@@ -1,30 +1,29 @@
 import * as React from "react"
-import { ListingEvent } from "@bloom-housing/backend-core/types"
 import { t } from "../../../../helpers/translator"
-import dayjs from "dayjs"
 
-const DownloadLotteryResults = (props: { event: ListingEvent; pdfUrl: string }) => {
-  const { event, pdfUrl } = props
-  const eventUrl = event ? pdfUrl : null
+type DownloadLotteryResultsProps = {
+  resultsDate?: string
+  buttonText?: string
+  pdfURL?: string
+}
+
+const DownloadLotteryResults = (props: DownloadLotteryResultsProps) => {
+  if (!props.pdfURL) return null
   return (
-    <>
-      {eventUrl && (
-        <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">
-            {dayjs(event.startTime).format("MMMM D, YYYY")}
-          </p>
-          <a
-            className="button is-primary w-full mb-2"
-            href={eventUrl}
-            title={t("listings.lotteryResults.downloadResults")}
-            target="_blank"
-          >
-            {t("listings.lotteryResults.downloadResults")}
-          </a>
-        </section>
+    <section className="aside-block text-center">
+      <h2 className="text-caps pb-4">{t("listings.lotteryResults.header")}</h2>
+      {props.resultsDate && (
+        <p className="uppercase text-gray-800 text-tiny font-semibold pb-4">{props.resultsDate}</p>
       )}
-    </>
+      <a
+        className="button is-primary w-full mb-2"
+        href={props.pdfURL}
+        title={props.buttonText}
+        target="_blank"
+      >
+        {props.buttonText ?? t("listings.lotteryResults.downloadResults")}
+      </a>
+    </section>
   )
 }
 

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

@@ -0,0 +1,54 @@
+import * as React from "react"
+
+export type EventType = {
+  timeString?: string
+  dateString?: string
+  linkURL?: string
+  linkText?: string
+  note?: string | React.ReactNode
+}
+
+type EventSectionProps = {
+  events: EventType[]
+  headerText?: string
+  sectionHeader?: boolean
+}
+
+const EventSection = (props: EventSectionProps) => {
+  if (!props.events.length) return null
+  return (
+    <section className="aside-block">
+      {props.headerText && (
+        <h4 className={props.sectionHeader ? "text-caps-underline" : "text-caps-tiny"}>
+          {props.headerText}
+        </h4>
+      )}
+      {props.events.map((event, index) => (
+        <div key={`events-${index}`} className={`${index !== props.events.length - 1 && "pb-3"}`}>
+          {event.dateString && (
+            <p className="text text-gray-800 pb-2 flex justify-between items-center">
+              <span className="inline-block text-tiny uppercase">{event.dateString}</span>
+              {event.timeString && (
+                <span className="inline-block text-sm font-bold ml-5 font-alt-sans">
+                  {event.timeString}
+                </span>
+              )}
+            </p>
+          )}
+          {event.linkURL && event.linkText && (
+            <p className="pb-2 text-tiny">
+              <a href={event.linkURL}>{event.linkText}</a>
+            </p>
+          )}
+          {event.note && (
+            <p className={`text-tiny text-gray-700 ${index !== props.events.length - 1 && "pb-3"}`}>
+              {event.note}
+            </p>
+          )}
+        </div>
+      ))}
+    </section>
+  )
+}
+
+export { EventSection as default, EventSection }