@bloom-housing/ui-components 5.1.1-alpha.9 → 6.0.1-alpha.0

package/src/notifications/AlertBox.docs.mdx

@@ -0,0 +1,41 @@
+import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { AlertBox } from "./AlertBox"
+
+# Alert Box
+
+The alert box component displays a themed notice with text.
+
+<Canvas>
+  <Story id="notifications-alert-box" />
+</Canvas>
+
+## Component Properties
+
+<ArgsTable of={AlertBox} />
+
+## Theming Variables
+
+<Canvas>
+  <Story id="notifications-alert-box--style-overrides" />
+</Canvas>
+
+You can apply CSS variables to the `.alert-box` selector to customize the appearance of the component.
+
+| Name                                | Type        | Description                           | Default                       |
+| ----------------------------------- | ----------- | ------------------------------------- | ----------------------------- |
+| `--vertical-padding`                | Size        | Vertical internal padding             | `--bloom-s3`                  |
+| `--horizontal-padding`              | Size        | Horizontal internal padding           | `--bloom-s4`                  |
+| `--background-color`                | Color       | Background color                      | `--bloom-color-primary-light` |
+| `--alert-background-color`          | Color       | Alert theme background color          | `--bloom-color-alert-light`   |
+| `--alert-invert-background-color`   | Color       | Alert invert theme background color   | `--bloom-color-alert`         |
+| `--notice-background-color`         | Color       | Notice theme background color         | `--bloom-color-primary-light` |
+| `--notice-invert-background-color`  | Color       | Notice invert theme background color  | `--bloom-color-primary`       |
+| `--success-background-color`        | Color       | Success theme background color        | `--bloom-color-success-light` |
+| `--success-invert-background-color` | Color       | Success invert theme background color | `--bloom-color-success`       |
+| `--warn-background-color`           | Color       | Warn theme background color           | `--bloom-color-warn-light`    |
+| `--warn-invert-background-color`    | Color       | Warn invert theme background color    | `--bloom-color-warn`          |
+| `--text-color`                      | Color       | Content text color                    | `--bloom-color-gray-900`      |
+| `--close-icon-color`                | Color       | Close icon color                      | `--bloom-color-gray-900`      |
+| `--font-weight`                     | Font weight | Content text font weight              | `600`                         |
+| `--max-width`                       | Size        | Max width                             | `--bloom-width-5xl`           |
+| `--line-height`                     | Line height | Content text line height              | `1.375`                       |

package/src/notifications/AlertBox.scss

@@ -1,86 +1,123 @@
 .alert-box {
-  @apply relative;
-  @apply py-3;
-  @apply px-4;
-  @apply leading-snug;
-  @apply flex;
-  @apply items-center;
+  --vertical-padding: var(--bloom-s3);
+  --horizontal-padding: var(--bloom-s4);
+  --background-color: var(--bloom-color-primary-light);
+  --alert-background-color: var(--bloom-color-alert-light);
+  --alert-invert-background-color: var(--bloom-color-alert);
+  --notice-background-color: var(--bloom-color-primary-light);
+  --notice-invert-background-color: var(--bloom-color-primary);
+  --success-background-color: var(--bloom-color-success-light);
+  --success-invert-background-color: var(--bloom-color-success);
+  --warn-background-color: var(--bloom-color-warn-light);
+  --warn-invert-background-color: var(--bloom-color-warn);
+  --text-color: var(--bloom-color-gray-900);
+  --close-icon-color: var(--bloom-color-gray-900);
+  --font-weight: 500;
+  --max-width: var(--bloom-width-5xl);
+  --line-height: 1.375;
+
+  padding: var(--vertical-padding) var(--horizontal-padding);
+  background-color: var(--background-color);
+  color: var(--text-color);
+  font-weight: var(--font-weight);
+  position: relative;
+  display: flex;
+  align-items: center;
+  line-height: var(--line-height);
 
   .alert-box_inner {
-    @apply m-auto;
-    @apply max-w-5xl;
-    @apply px-4;
-    @apply flex-1;
-    @apply flex;
-    @apply items-center;
+    margin: auto;
+    max-width: var(--max-width);
+    padding-right: var(--horizontal-padding);
+    padding-left: var(--horizontal-padding);
+    flex: 1;
+    display: flex;
+    align-items: center;
   }
 
   &.narrow {
-    padding-top: 0.35rem;
-    padding-bottom: 0.35rem;
+    padding-top: var(--bloom-s1_5);
+    padding-bottom: var(--bloom-s1_5);
   }
 
-  // Inverts color scheme of alert
   &.invert {
-    @apply text-white;
-
-    .close {
-      @apply text-white;
+    color: var(--bloom-color-white);
+    a {
+      color: var(--bloom-color-white);
+      text-decoration: underline;
     }
   }
 
   &.alert {
-    @apply bg-alert-light;
+    background-color: var(--alert-background-color);
 
     &.invert {
-      @apply bg-alert;
+      background-color: var(--alert-invert-background-color);
     }
   }
 
   &.primary {
-    @apply bg-primary-light;
+    background-color: var(--notice-background-color);
 
     &.invert {
-      @apply bg-primary;
+      background-color: var(--notice-invert-background-color);
     }
   }
 
   &.success {
-    @apply bg-success-light;
+    background-color: var(--success-background-color);
 
     &.invert {
-      @apply bg-success;
+      background-color: var(--success-invert-background-color);
     }
   }
 
   &.warn {
-    @apply bg-warn-light;
-
-    &.invert {
-      @apply bg-warn;
-    }
+    background-color: var(--warn-background-color);
   }
 }
 
 .alert-box__head {
-  @apply flex justify-between;
-  @apply w-full;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
 }
 
 .alert-box__title {
-  @apply flex justify-between;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .alert-box__body {
-  @apply ml-2;
-  @apply font-semibold;
-  @apply text-tiny;
+  font-weight: var(--font-weight);
+  font-size: var(--bloom-font-size-tiny);
 }
 
 .alert-box__close {
-  @apply text-3xl;
-  right: 1rem;
-  @apply ml-3;
-  @apply p-0;
-  line-height: 1rem;
+  font-size: var(--bloom-font-size-3xl);
+  right: var(--horizontal-padding);
+  margin-left: var(--bloom-s3);
+  padding: 0;
+  line-height: var(--bloom-s4);
+  color: var(--close-icon-color);
+}
+
+.alert-box__icon {
+  margin-right: var(--bloom-s3);
+}
+
+.alert-box__sticky {
+  position: sticky;
+  top: var(--bloom-s3);
+  margin-top: var(--bloom-s3);
+  margin-right: var(--bloom-s3);
+  z-index: 10;
+  margin-left: auto;
+  width: fit-content;
+}
+
+.alert-box__sticky + * {
+  --alert-box-height: -3.6rem;
+  margin-top: var(--alert-box-height);
 }

package/src/notifications/AlertBox.tsx

@@ -6,20 +6,23 @@ import { colorClasses } from "./alertTypes"
 import "./AlertBox.scss"
 
 export interface AlertBoxProps {
-  type?: AlertTypes
-  closeable?: boolean
-  onClose?: () => void
+  boundToLayoutWidth?: boolean
   children: ReactNode
-  inverted?: boolean
   className?: string
-  boundToLayoutWidth?: boolean
+  closeable?: boolean
+  customIcon?: IconTypes
+  inverted?: boolean
   narrow?: boolean
+  onClose?: () => void
+  sticky?: boolean
+  type?: AlertTypes
 }
 
 const icons: { [k in AlertTypes]: IconTypes } = {
   alert: "warning",
   notice: "info",
   success: "check",
+  warn: "warning",
 }
 
 const AlertBox = (props: AlertBoxProps) => {
@@ -28,11 +31,12 @@ const AlertBox = (props: AlertBoxProps) => {
 
   const classNames = [
     "alert-box",
-    colorClasses[props.type || "alert"],
+    colorClasses[props.type || ""],
     ...(props.inverted ? ["invert"] : []),
     ...(props.className ? [props.className] : []),
     ...(props.boundToLayoutWidth ? [] : ["fullWidth"]),
     ...(props.narrow ? ["narrow"] : []),
+    ...(props.sticky ? ["alert-box__sticky"] : []),
   ].join(" ")
 
   if (onClose) closeable = true
@@ -47,14 +51,16 @@ const AlertBox = (props: AlertBoxProps) => {
     <>
       <div className="alert-box__head">
         <div className="alert-box__title">
-          <span className="alert-box__icon">
-            <Icon
-              size="medium"
-              symbol={icons[props.type || "alert"]}
-              fill={props.inverted ? IconFillColors.white : undefined}
-              ariaHidden={true}
-            />
-          </span>
+          {(props.type || props.customIcon) && (
+            <span className="alert-box__icon">
+              <Icon
+                size="medium"
+                symbol={props.type ? icons[props.type] : props.customIcon ?? "warning"}
+                fill={props.inverted ? IconFillColors.white : undefined}
+                ariaHidden={true}
+              />
+            </span>
+          )}
           <span className="alert-box__body">
             {typeof props.children === "string" ? <p>{props.children}</p> : props.children}
           </span>

package/src/notifications/SiteAlert.tsx

@@ -11,6 +11,7 @@ type SiteAlertProps = {
     type: AlertTypes
     message: string
   }
+  sticky?: boolean
 }
 
 export const setSiteAlertMessage = (message: string, type: AlertTypes) => {
@@ -30,6 +31,7 @@ export const SiteAlert = ({
   type = "alert",
   className,
   alertMessage,
+  sticky,
 }: SiteAlertProps) => {
   const [open, setOpen] = useState(false)
   const [message, setMessage] = useState("")
@@ -75,6 +77,7 @@ export const SiteAlert = ({
       onClose={dismissable ? () => setOpen(false) : undefined}
       className={className}
       type={alertMessage?.type ?? type}
+      sticky={sticky}
     >
       {message}
     </AlertBox>

package/src/notifications/StatusMessage.tsx

@@ -8,6 +8,10 @@ import "./StatusMessage.scss"
 export interface StatusMessagesProps {
   lastTimestamp?: string
   children?: React.ReactNode
+  strings?: {
+    lastUpdated?: string
+    statusHistory?: string
+  }
 }
 
 export const StatusMessages = (props: StatusMessagesProps) => {
@@ -17,7 +21,7 @@ export const StatusMessages = (props: StatusMessagesProps) => {
         {props.lastTimestamp && (
           <li className="status-message">
             <div className="status-message__note text-center">
-              {t("t.lastUpdated")}: {props.lastTimestamp}
+              {props.strings?.lastUpdated ?? t("t.lastUpdated")}: {props.lastTimestamp}
             </div>
           </li>
         )}
@@ -26,7 +30,9 @@ export const StatusMessages = (props: StatusMessagesProps) => {
   } else {
     return (
       <>
-        <h3 className="status-messages__title">{t("t.statusHistory")}</h3>
+        <h3 className="status-messages__title">
+          {props.strings?.statusHistory ?? t("t.statusHistory")}
+        </h3>
         <ul className="status-messages">{props.children}</ul>
       </>
     )

package/src/notifications/alertTypes.ts

@@ -2,6 +2,7 @@ export const colorClasses = {
   alert: "alert",
   notice: "primary",
   success: "success",
+  warn: "warn",
 }
 
 export type AlertTypes = keyof typeof colorClasses

package/src/overlays/Drawer.scss

@@ -104,3 +104,10 @@
   @apply pb-4;
   @apply overflow-y-visible;
 }
+
+.drawer__small {
+  width: 100%;
+  @screen md {
+    width: 45rem;
+  }
+}

package/src/overlays/Modal.scss

@@ -16,6 +16,7 @@
 
   position: relative;
   max-width: var(--max-width);
+  max-height: 100vh;
   margin: auto;
   border: var(--modal-border);
   background-color: var(--background-color);
@@ -33,7 +34,7 @@
 
 .modal__title {
   padding-block: var(--bloom-s6) var(--bloom-s3);
-  padding-inline: var(--bloom-s6);
+  padding-inline: var(--bloom-s6) var(--bloom-s12);
   color: var(--title-color);
   font-size: var(--title-font-size);
   font-family: var(--title-font-family);

package/src/page_components/ApplicationTimeline.scss

@@ -4,13 +4,13 @@
 }
 
 .application-timeline {
-  .progress-nav__item {
+  .progress-nav__dot-item {
     @apply pt-0;
 
     text-transform: unset;
 
     .absolute {
-      margin-top: 0.45rem;
+      margin-top: 0.25rem;
       z-index: 2;
       margin-left: -0.4rem;
     }
@@ -20,17 +20,17 @@
     }
   }
 
-  .progress-nav__item.is-active::before,
-  .progress-nav__item.is-disabled::before {
+  .progress-nav__dot-item.is-active::before,
+  .progress-nav__dot-item.is-disabled::before {
     height: 2rem;
     width: 2rem;
   }
 
-  .progress-nav__item.is-active::before {
+  .progress-nav__dot-item.is-active::before {
     @apply bg-green-700;
   }
 
-  .progress-nav__item::after {
+  .progress-nav__dot-item::after {
     top: 1rem;
   }
 }

package/src/page_components/ApplicationTimeline.tsx

@@ -4,27 +4,37 @@ import { Icon } from "../icons/Icon"
 import { t } from "../helpers/translator"
 import "./ApplicationTimeline.scss"
 
-const ApplicationTimeline = () => (
+export interface ApplicationTimelineProps {
+  strings?: {
+    applicationReceived?: string
+    applicationsClosed?: string
+    applicationsRanked?: string
+  }
+}
+const ApplicationTimeline = (props: ApplicationTimelineProps) => (
   <ul
     className="progress-nav application-timeline"
     aria-label="Steps of processing your application"
   >
-    <li className="progress-nav__item is-active" aria-current="step">
+    <li className="progress-nav__dot-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")}
+        {props.strings?.applicationReceived ??
+          t("application.review.confirmation.applicationReceived")}
       </Markdown>
     </li>
-    <li className="progress-nav__item is-disabled">
+    <li className="progress-nav__dot-item is-disabled">
       <Markdown options={{ disableParsingRawHTML: true }}>
-        {t("application.review.confirmation.applicationsClosed")}
+        {props.strings?.applicationsClosed ??
+          t("application.review.confirmation.applicationsClosed")}
       </Markdown>
     </li>
-    <li className="progress-nav__item is-disabled">
+    <li className="progress-nav__dot-item is-disabled">
       <Markdown options={{ disableParsingRawHTML: true }}>
-        {t("application.review.confirmation.applicationsRanked")}
+        {props.strings?.applicationsRanked ??
+          t("application.review.confirmation.applicationsRanked")}
       </Markdown>
     </li>
   </ul>

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

@@ -53,7 +53,7 @@ const FormForgotPassword = ({
     <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>
+        <h1 className="form-card__title">{t("authentication.forgotPassword.sendEmail")}</h1>
       </div>
 
       {Object.entries(errors).length > 0 && !networkError.error && (

package/src/page_components/listing/AdditionalFees.tsx

@@ -22,7 +22,7 @@ const AdditionalFees = ({
   footerContent,
   strings,
 }: AdditionalFeesProps) => {
-  if (!deposit && !applicationFee && !strings && footerContent?.length === 0) return <></>
+  if (!deposit && !applicationFee && (!footerContent || footerContent?.length === 0)) return <></>
   return (
     <div className="info-card bg-gray-100 border-0">
       <p className="info-card__title mb-2">{strings.sectionHeader}</p>

package/src/page_components/listing/ListingCard.scss

@@ -86,3 +86,7 @@
     margin-inline-start: var(--bloom-s1);
   }
 }
+.listings-pill_header {
+  margin-bottom: var(--bloom-s3);
+  margin-top: var(--bloom-s1);
+}

package/src/page_components/listing/ListingCard.tsx

@@ -5,7 +5,7 @@ import { StackedTable, StackedTableProps } from "../../tables/StackedTable"
 import { StandardTable, StandardTableProps } from "../../tables/StandardTable"
 import { Heading, HeaderType } from "../../headers/Heading"
 import { Tag } from "../../text/Tag"
-import { AppearanceStyleType } from "../../global/AppearanceTypes"
+import { AppearanceShadeType, AppearanceStyleType } from "../../global/AppearanceTypes"
 import { Icon, IconFillColors } from "../../icons/Icon"
 import "./ListingCard.scss"
 import { NavigationContext } from "../../config/NavigationContext"
@@ -16,6 +16,8 @@ export interface CardHeader {
   content: string | React.ReactNode
   href?: string
   customClass?: string
+  styleType?: AppearanceStyleType
+  isPillType?: boolean
 }
 
 export interface FooterButton {
@@ -74,12 +76,25 @@ const ListingCard = (props: ListingCardProps) => {
   const getHeader = (
     header: CardHeader | undefined,
     priority: number,
-    style?: HeaderType,
+    styleType?: HeaderType,
     customClass?: string
   ) => {
     if (header && header.content) {
+      if (header.isPillType) {
+        return (
+          <Tag
+            className="listings-pill_header"
+            pillStyle
+            capitalized
+            styleType={header.styleType}
+            shade={AppearanceShadeType.light}
+          >
+            {header.content}
+          </Tag>
+        )
+      }
       return (
-        <Heading priority={priority} style={style} className={customClass}>
+        <Heading priority={priority} style={styleType} className={customClass}>
           {header.href ? (
             <LinkComponent className="is-card-link" href={header.href}>
               {header.content}

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

@@ -95,12 +95,12 @@ const Contact = ({
 
       {additionalInformation?.map((info) => {
         return (
-          <React.Fragment key={info.title}>
+          <div key={info.title} className={"my-3"}>
             <Heading priority={3} style={"sidebarSubHeader"}>
               {info.title}
             </Heading>
             <div className="text-gray-800 text-tiny markdown">{info.content}</div>
-          </React.Fragment>
+          </div>
         )
       })}
     </section>

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

@@ -1,13 +1,13 @@
 import React, { useState } from "react"
-import { t } from "../../../helpers/translator"
+import Markdown from "markdown-to-jsx"
 import { Button } from "../../../actions/Button"
 import { LinkButton } from "../../../actions/LinkButton"
 import { AppearanceStyleType } from "../../../global/AppearanceTypes"
 import { Address } from "../../../helpers/MultiLineAddress"
-import { ContactAddress } from "./ContactAddress"
-import { OrDivider } from "./OrDivider"
 import { Heading } from "../../../headers/Heading"
-import Markdown from "markdown-to-jsx"
+import { t } from "../../../helpers/translator"
+import { OrDivider } from "./OrDivider"
+import { ContactAddress } from "./ContactAddress"
 
 export interface PaperApplication {
   fileURL: string
@@ -33,6 +33,16 @@ export interface ApplicationsProps {
   postmarkedApplicationsReceivedByDate?: string
   /** Whether or not to hide actionable application buttons */
   preview?: boolean
+  strings?: {
+    applicationsOpenInFuture?: string
+    applyOnline?: string
+    downloadApplication?: string
+    getAPaperApplication?: string
+    getDirections?: string
+    howToApply?: string
+    officeHoursHeading?: string
+    pickUpApplication?: string
+  }
 }
 /** Displays information regarding how to apply, including an online application link button, paper application downloads, and a paper application pickup address */
 const GetApplication = (props: ApplicationsProps) => {
@@ -46,19 +56,22 @@ const GetApplication = (props: ApplicationsProps) => {
 
   return (
     <section className="aside-block" data-test-id="get-application-section">
-      <h2 className="text-caps-underline">{t("listings.apply.howToApply")}</h2>
+      <h2 className="text-caps-underline">
+        {props.strings?.howToApply ?? t("listings.apply.howToApply")}
+      </h2>
       {!props.applicationsOpen && (
         <p className="mb-5 text-gray-700">
-          {t("listings.apply.applicationWillBeAvailableOn", {
-            openDate: props.applicationsOpenDate,
-          })}
+          {props.strings?.applicationsOpenInFuture ??
+            t("listings.apply.applicationWillBeAvailableOn", {
+              openDate: props.applicationsOpenDate,
+            })}
         </p>
       )}
       {props.applicationsOpen && props.onlineApplicationURL && (
         <>
           {props.preview ? (
             <Button disabled className="w-full mb-2" data-test-id={"listing-view-apply-button"}>
-              {t("listings.apply.applyOnline")}
+              {props.strings?.applyOnline ?? t("listings.apply.applyOnline")}
             </Button>
           ) : (
             <LinkButton
@@ -67,7 +80,7 @@ const GetApplication = (props: ApplicationsProps) => {
               href={props.onlineApplicationURL}
               dataTestId={"listing-view-apply-button"}
             >
-              {t("listings.apply.applyOnline")}
+              {props.strings?.applyOnline ?? t("listings.apply.applyOnline")}
             </LinkButton>
           )}
         </>
@@ -76,7 +89,9 @@ const GetApplication = (props: ApplicationsProps) => {
       {props.applicationsOpen && props.paperMethod && !!props.paperApplications?.length && (
         <>
           {props.onlineApplicationURL && <OrDivider bgColor="white" />}
-          <div className="text-serif-lg">{t("listings.apply.getAPaperApplication")}</div>
+          <div className="text-serif-lg">
+            {props.strings?.getAPaperApplication ?? t("listings.apply.getAPaperApplication")}
+          </div>
           <Button
             styleType={
               !props.preview && props.onlineApplicationURL ? AppearanceStyleType.primary : undefined
@@ -85,7 +100,7 @@ const GetApplication = (props: ApplicationsProps) => {
             onClick={toggleDownload}
             disabled={props.preview}
           >
-            {t("listings.apply.downloadApplication")}
+            {props.strings?.downloadApplication ?? t("listings.apply.downloadApplication")}
           </Button>
         </>
       )}
@@ -94,7 +109,7 @@ const GetApplication = (props: ApplicationsProps) => {
           <p key={index} className="text-center mt-2 mb-4 text-sm">
             <a
               href={paperApplication.fileURL}
-              title={t("listings.apply.downloadApplication")}
+              title={props.strings?.downloadApplication ?? t("listings.apply.downloadApplication")}
               target="_blank"
             >
               {paperApplication.languageString}
@@ -107,16 +122,16 @@ const GetApplication = (props: ApplicationsProps) => {
             <OrDivider bgColor="white" />
           )}
           <Heading priority={3} style={"sidebarSubHeader"}>
-            {t("listings.apply.pickUpAnApplication")}
+            {props.strings?.pickUpApplication ?? t("listings.apply.pickUpAnApplication")}
           </Heading>
           <ContactAddress
             address={props.applicationPickUpAddress}
-            mapString={t("t.getDirections")}
+            mapString={props.strings?.getDirections ?? t("t.getDirections")}
           />
           {props.applicationPickUpAddressOfficeHours && (
             <>
               <Heading priority={3} style={"sidebarSubHeader"}>
-                {t("leasingAgent.officeHours")}
+                {props.strings?.officeHoursHeading ?? t("leasingAgent.officeHours")}
               </Heading>
               <p className="text-gray-800 text-tiny markdown">
                 <Markdown