@bloom-housing/ui-components 2.0.0-pre-tailwind

package/src/overlays/LoadingOverlay.scss

@@ -0,0 +1,25 @@
+.loading-overlay {
+  @apply relative;
+  @apply pointer-events-none;
+
+  &:before {
+    content: "";
+    @apply absolute;
+    @apply top-0;
+    @apply left-0;
+    @apply w-full;
+    @apply h-full;
+    @apply z-10;
+    background-color: rgba(215, 215, 215, 0.5);
+  }
+
+  .loading-overlay__spinner {
+    @apply absolute;
+    left: 50%;
+    top: 50%;
+    @apply text-white;
+    @apply -mt-8;
+    @apply -ml-8;
+    @apply z-10;
+  }
+}

package/src/overlays/LoadingOverlay.tsx

@@ -0,0 +1,29 @@
+import React, { useMemo } from "react"
+import { Icon } from "../icons/Icon"
+import "./LoadingOverlay.scss"
+
+type LoadingOverlayProps = {
+  isLoading: boolean
+  children: React.ReactChild
+}
+
+const LoadingOverlay = ({ isLoading, children }: LoadingOverlayProps) => {
+  const content = useMemo(() => {
+    if (!isLoading) return children
+
+    return (
+      <div className="loading-overlay">
+        <Icon size="3xl" symbol="spinner" className="loading-overlay__spinner" />
+        {children}
+      </div>
+    )
+  }, [isLoading, children])
+
+  return (
+    <div role="alert" aria-live="assertive">
+      {content}
+    </div>
+  )
+}
+
+export { LoadingOverlay as default, LoadingOverlay }

package/src/overlays/Modal.scss

@@ -0,0 +1,55 @@
+.modal {
+  @apply relative;
+  @apply max-w-5xl;
+  @apply m-auto;
+  @apply border;
+  @apply border-solid;
+  @apply border-gray-400;
+  @apply bg-white;
+  @apply rounded-md;
+  @apply shadow-md;
+  min-width: 32rem;
+}
+
+// Content containers
+.modal__header,
+.modal__inner,
+.modal__footer {
+  @apply py-4;
+  @apply px-8;
+}
+
+.modal__header {
+  @apply pt-8;
+}
+
+.modal__title {
+  @apply text-xl;
+}
+
+.modal__inner {
+  &:last-of-type {
+    @apply rounded-b;
+  }
+}
+
+.modal__footer {
+  @apply rounded-b;
+}
+
+.modal__close {
+  @apply absolute;
+  top: 1.5rem;
+  right: 2rem;
+  cursor: pointer;
+}
+
+// Loading container for modal
+.modal__loading {
+  @apply w-full;
+  @apply flex;
+  @apply text-center;
+  @apply items-center;
+  @apply justify-center;
+  min-height: 12rem;
+}

package/src/overlays/Modal.tsx

@@ -0,0 +1,61 @@
+import React from "react"
+import "./Modal.scss"
+import { Icon } from "../icons/Icon"
+import { GridCell, GridSection } from "../sections/GridSection"
+import { Overlay, OverlayProps } from "./Overlay"
+
+export interface ModalProps extends Omit<OverlayProps, "children"> {
+  title: string
+  actions?: React.ReactNode[]
+  hideCloseIcon?: boolean
+  children?: React.ReactNode
+}
+
+const ModalHeader = (props: { title: string }) => (
+  <header className="modal__inner">
+    <h1 className="modal__title">{props.title}</h1>
+  </header>
+)
+
+const ModalFooter = (props: { actions: React.ReactNode[] }) => (
+  <footer className="modal__footer bg-primary-lighter" data-testid="footer">
+    <GridSection columns={4} reverse={true} tightSpacing={true}>
+      {props.actions &&
+        props.actions.map((action: React.ReactNode, index: number) => (
+          <GridCell key={index}>{action}</GridCell>
+        ))}
+    </GridSection>
+  </footer>
+)
+
+export const Modal = (props: ModalProps) => {
+  return (
+    <Overlay
+      ariaLabel={props.ariaLabel || props.title}
+      ariaDescription={props.ariaDescription}
+      open={props.open}
+      onClose={props.onClose}
+      backdrop={props.backdrop}
+    >
+      <div className="modal">
+        <ModalHeader title={props.title} />
+
+        <section className="modal__inner">
+          {typeof props.children === "string" ? (
+            <p className="c-steel">{props.children}</p>
+          ) : (
+            props.children
+          )}
+        </section>
+
+        {props.actions && <ModalFooter actions={props.actions} />}
+
+        {!props.hideCloseIcon && (
+          <button className="modal__close" aria-label="Close" onClick={props.onClose} tabIndex={0}>
+            <Icon size="medium" symbol="close" />
+          </button>
+        )}
+      </div>
+    </Overlay>
+  )
+}

package/src/overlays/Overlay.scss

@@ -0,0 +1,50 @@
+@import "../global/mixins.scss";
+
+.fixed-overlay {
+  @apply top-0;
+  @apply left-0;
+  @apply fixed;
+  @apply w-screen;
+  @apply h-screen;
+  @apply z-50;
+  @apply flex;
+
+  &.is-backdrop:before {
+    content: "";
+    @apply absolute;
+    @apply w-full;
+    @apply h-full;
+    @apply bg-gray-900;
+    @apply bg-opacity-50;
+    transition-property: background-color;
+
+    @include transition-timing;
+  }
+
+  &.overlay-effect-enter,
+  &.overlay-effect-exit-active {
+    .fixed-overlay__inner {
+      opacity: 0;
+      transform: translate(0px, 14px);
+    }
+    &.is-backdrop:before {
+      @apply bg-opacity-0;
+    }
+  }
+  &.overlay-effect-enter-active {
+    .fixed-overlay__inner {
+      opacity: 1;
+      transform: translate(0px, 0px);
+    }
+    &.is-backdrop:before {
+      @apply bg-opacity-50;
+    }
+  }
+}
+
+.fixed-overlay__inner {
+  transition-property: transform, opacity;
+  margin: auto;
+
+  @include transition-timing;
+}

package/src/overlays/Overlay.tsx

@@ -0,0 +1,100 @@
+import React, { useState, useEffect, createRef } from "react"
+import "./Overlay.scss"
+import useKeyPress from "../helpers/useKeyPress"
+import { useOutsideClick } from "../helpers/useOutsideClick"
+import { createPortal } from "react-dom"
+import FocusLock from "react-focus-lock"
+import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock"
+import { CSSTransition } from "react-transition-group"
+
+export type OverlayProps = {
+  open?: boolean
+  ariaLabel?: string
+  ariaDescription?: string
+  className?: string
+  backdrop?: boolean
+  onClose?: () => void
+  children: React.ReactNode
+}
+
+const OverlayInner = (props: OverlayProps) => {
+  // close overlay on click outside overlay content
+  const overlayInnerRef = createRef<HTMLDivElement>()
+  useOutsideClick({
+    ref: overlayInnerRef,
+    callback: () => {
+      if (props.onClose) props.onClose()
+    },
+  })
+
+  useKeyPress("Escape", () => {
+    if (props.onClose) props.onClose()
+  })
+
+  const classNames = ["fixed-overlay"]
+  if (typeof props.backdrop === "undefined" || props.backdrop) classNames.push("is-backdrop")
+  if (props.className) classNames.push(props.className)
+
+  return (
+    <div
+      className={classNames.join(" ")}
+      role="dialog"
+      aria-labelledby={props.ariaLabel}
+      aria-describedby={props.ariaDescription}
+    >
+      <div className="fixed-overlay__inner" ref={overlayInnerRef}>
+        <FocusLock>{props.children}</FocusLock>
+      </div>
+    </div>
+  )
+}
+
+export const Overlay = (props: OverlayProps) => {
+  const documentAvailable = typeof document !== "undefined"
+  const overlayRoot = useState<Element | null>(
+    documentAvailable ? document.querySelector("#__next") : null
+  )[0]
+  const elForPortal = useState<Element | null>(
+    documentAvailable ? document.createElement("div") : null
+  )[0]
+
+  // append overlay to the root of app
+  useEffect(() => {
+    if (!(overlayRoot && elForPortal)) return
+
+    overlayRoot.appendChild(elForPortal)
+
+    return () => {
+      overlayRoot.removeChild(elForPortal)
+    }
+  }, [elForPortal, overlayRoot])
+
+  // disable body scrolling when the overlay is open
+  useEffect(() => {
+    if (!(overlayRoot && elForPortal)) return
+
+    props.open ? disableBodyScroll(elForPortal) : enableBodyScroll(elForPortal)
+
+    return () => {
+      if (!props.open) enableBodyScroll(elForPortal)
+    }
+  }, [elForPortal, overlayRoot, props.open])
+
+  return (
+    elForPortal &&
+    createPortal(
+      <CSSTransition
+        in={props.open}
+        timeout={250}
+        classNames="overlay-effect"
+        mountOnEnter
+        unmountOnExit
+      >
+        <OverlayInner {...props}>{props.children}</OverlayInner>
+      </CSSTransition>,
+      elForPortal
+    )
+  )
+}
+
+export default Overlay

package/src/page_components/listing/AdditionalFees.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Listing } from "@bloom-housing/backend-core/types"
+import { t } from "../../helpers/translator"
+
+export interface AdditionalFeesProps {
+  listing: Listing
+}
+
+const AdditionalFees = (props: AdditionalFeesProps) => {
+  // If none of the relevant fields are provided, return an empty div.
+  if (
+    !props.listing.depositMin &&
+    !props.listing.depositMax &&
+    !props.listing.applicationFee &&
+    !props.listing.costsNotIncluded
+  ) {
+    return <></>
+  }
+
+  const getDeposit = () => {
+    const min = props.listing.depositMin
+    const max = props.listing.depositMax
+    if (min && max && min !== max) {
+      return `$${min} – $${max}`
+    } else if (min) return `$${min}`
+    else return `$${max}`
+  }
+  return (
+    <div className="info-card bg-gray-100 border-0">
+      <p className="info-card__title">{t("listings.sections.additionalFees")}</p>
+      <div className="info-card__columns text-sm">
+        {props.listing.applicationFee && (
+          <div className="info-card__column">
+            <div className="text-base">{t("listings.applicationFee")}</div>
+            <div className="text-xl font-bold">${props.listing.applicationFee}</div>
+            <div>{t("listings.applicationPerApplicantAgeDescription")}</div>
+            <div>{t("listings.applicationFeeDueAt")}</div>
+          </div>
+        )}
+        {(props.listing.depositMin || props.listing.depositMax) && (
+          <div className="info-card__column">
+            <div className="text-base">{t("t.deposit")}</div>
+            <div className="text-xl font-bold">{getDeposit()}</div>
+            <div>{t("listings.depositOrMonthsRent")}</div>
+          </div>
+        )}
+      </div>
+
+      {props.listing.costsNotIncluded && (
+        <p className="text-sm mt-6">{props.listing.costsNotIncluded}</p>
+      )}
+    </div>
+  )
+}
+
+export { AdditionalFees as default, AdditionalFees }

package/src/page_components/listing/ListingCard.scss

@@ -0,0 +1,47 @@
+.listings-row {
+  @apply flex;
+  @apply flex-row;
+  @apply flex-wrap;
+  @apply max-w-5xl;
+  @apply m-auto;
+  @apply mb-12;
+  max-width: 48rem;
+
+  &:first-of-type {
+    @apply mt-12;
+  }
+
+  @screen lg {
+    @apply max-w-5xl;
+  }
+}
+
+.listings-row_figure {
+  @apply w-full;
+  @apply p-3;
+
+  @screen lg {
+    @apply w-6/12;
+  }
+}
+
+.listings-row_content {
+  @apply w-full;
+  @apply p-3;
+
+  @screen lg {
+    @apply w-6/12;
+  }
+}
+
+.listings-row_title {
+  @apply font-alt-sans;
+  @apply font-semibold;
+  @apply text-gray-900;
+  @apply text-base;
+  @apply mb-2;
+}
+
+.listings-row_table {
+  @apply mb-4;
+}

package/src/page_components/listing/ListingCard.tsx

@@ -0,0 +1,34 @@
+import * as React from "react"
+import { ImageCard, ImageCardProps } from "../../blocks/ImageCard"
+import { LinkButton } from "../../actions/LinkButton"
+import { GroupedTable, GroupedTableProps } from "../../tables/GroupedTable"
+import { t } from "../../helpers/translator"
+import "./ListingCard.scss"
+
+export interface ListingCardProps {
+  imageCardProps: ImageCardProps
+  seeDetailsLink: string
+  tableHeader: string
+  tableProps: GroupedTableProps
+}
+
+const ListingCard = (props: ListingCardProps) => {
+  const { imageCardProps, tableProps } = props
+
+  return (
+    <article className="listings-row">
+      <div className="listings-row_figure">
+        <ImageCard {...imageCardProps} />
+      </div>
+      <div className="listings-row_content">
+        {props.tableHeader && <h4 className="listings-row_title">{props.tableHeader}</h4>}
+        <div className="listings-row_table">
+          {tableProps.data && <GroupedTable {...tableProps} />}
+        </div>
+        <LinkButton href={props.seeDetailsLink}>{t("t.seeDetails")}</LinkButton>
+      </div>
+    </article>
+  )
+}
+
+export { ListingCard as default, ListingCard }