@bloom-housing/ui-components 5.1.1-alpha.19 → 5.1.1-alpha.21

package/src/navigation/ProgressNav.tsx

@@ -11,6 +11,11 @@ const ProgressNavItem = (props: {
   label: string
   mounted: boolean
   style: ProgressNavStyle
+  strings?: {
+    screenReaderCompleted?: string
+    screenReaderNotCompleted?: string
+    screenReaderTitle?: string
+  }
 }) => {
   let bgColor = "is-disabled"
   if (props.mounted) {
@@ -23,9 +28,17 @@ const ProgressNavItem = (props: {
 
   const srTextBuilder = (): string | React.ReactFragment => {
     if (props.section < props.currentPageSection) {
-      return <span className="sr-only">{t("progressNav.completed")}</span>
+      return (
+        <span className="sr-only">
+          {props.strings?.screenReaderCompleted ?? t("progressNav.completed")}
+        </span>
+      )
     } else if (props.section > props.currentPageSection) {
-      return <span className="sr-only">{t("progressNav.notCompleted")}</span>
+      return (
+        <span className="sr-only">
+          {props.strings?.screenReaderNotCompleted ?? t("progressNav.notCompleted")}
+        </span>
+      )
     } else {
       return ""
     }
@@ -50,12 +63,17 @@ const ProgressNav = (props: {
   labels: string[]
   mounted: boolean
   style?: ProgressNavStyle
+  strings?: {
+    screenReaderHeading?: string
+  }
 }) => {
   let navClasses = "progress-nav"
   if (props.style === "bar") navClasses += " progress-nav__bar"
   return (
     <div aria-label="progress">
-      <h2 className="sr-only">{t("progressNav.srHeading")}</h2>
+      <h2 className="sr-only">
+        {props.strings?.screenReaderHeading ?? t("progressNav.srHeading")}
+      </h2>
       <ol className={!props.mounted ? "invisible" : navClasses}>
         {props.labels.map((label, i) => (
           <ProgressNavItem

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,108 @@
 .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: 600;
+  --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(--blom-s3);
+  padding: 0;
+  line-height: var(--bloom-s4);
+  color: var(--close-icon-color);
+}
+
+.alert-box__icon {
+  margin-right: var(--bloom-s3);
 }

package/src/notifications/AlertBox.tsx

@@ -7,6 +7,7 @@ import "./AlertBox.scss"
 
 export interface AlertBoxProps {
   type?: AlertTypes
+  customIcon?: IconTypes
   closeable?: boolean
   onClose?: () => void
   children: ReactNode
@@ -20,6 +21,7 @@ const icons: { [k in AlertTypes]: IconTypes } = {
   alert: "warning",
   notice: "info",
   success: "check",
+  warn: "warning",
 }
 
 const AlertBox = (props: AlertBoxProps) => {
@@ -28,7 +30,7 @@ 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"]),
@@ -47,14 +49,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/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/page_components/ApplicationTimeline.tsx

@@ -4,7 +4,14 @@ 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"
@@ -14,17 +21,20 @@ const ApplicationTimeline = () => (
         <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">
       <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">
       <Markdown options={{ disableParsingRawHTML: true }}>
-        {t("application.review.confirmation.applicationsRanked")}
+        {props.strings?.applicationsRanked ??
+          t("application.review.confirmation.applicationsRanked")}
       </Markdown>
     </li>
   </ul>

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

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

@@ -4,6 +4,9 @@ import dayjs from "dayjs"
 
 interface ListingUpdatedProps {
   listingUpdated: Date
+  strings?: {
+    listingUpdated?: string
+  }
 }
 
 const ListingUpdated = (props: ListingUpdatedProps) => {
@@ -11,7 +14,8 @@ const ListingUpdated = (props: ListingUpdatedProps) => {
   return (
     <section className="aside-block">
       <p className="text-tiny text-gray-800">
-        {`${t("listings.listingUpdated")}: ${dayjs(listingUpdated).format("MMMM DD, YYYY")}`}
+        {props?.strings?.listingUpdated ??
+          `${t("listings.listingUpdated")}: ${dayjs(listingUpdated).format("MMMM DD, YYYY")}`}
       </p>
     </section>
   )

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

@@ -1,9 +1,11 @@
 import * as React from "react"
 import { t } from "../../../helpers/translator"
 
-const OrDivider = (props: { bgColor: string }) => (
+const OrDivider = (props: { bgColor: string; strings?: { orString?: string } }) => (
   <div className="aside-block__divider">
-    <span className={`bg-${props.bgColor} aside-block__conjunction`}>{t("t.or")}</span>
+    <span className={`bg-${props.bgColor} aside-block__conjunction`}>
+      {props.strings?.orString ?? t("t.or")}
+    </span>
   </div>
 )
 

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

@@ -5,7 +5,10 @@ import { Icon, IconFillColors } from "../../../icons/Icon"
 interface ReferralApplicationProps {
   description: string
   phoneNumber: string
-  title: string
+  strings: {
+    call?: string
+    title: string
+  }
 }
 
 const ReferralApplication = (props: ReferralApplicationProps) => {
@@ -13,11 +16,11 @@ const ReferralApplication = (props: ReferralApplicationProps) => {
 
   return (
     <section className="aside-block">
-      <h2 className="text-caps-underline">{props.title}</h2>
+      <h2 className="text-caps-underline">{props.strings.title}</h2>
       <p>
         <a href={linkedPhoneNumber}>
-          <Icon symbol="phone" size="medium" fill={IconFillColors.primary} /> {t("t.call")}{" "}
-          {props.phoneNumber}
+          <Icon symbol="phone" size="medium" fill={IconFillColors.primary} />{" "}
+          {props.strings.call ?? t("t.call")} {props.phoneNumber}
         </a>
       </p>
       <p className="text-tiny mt-4 text-gray-800">{props.description}</p>

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

@@ -5,13 +5,18 @@ type DownloadLotteryResultsProps = {
   resultsDate?: string
   buttonText?: string
   pdfURL?: string
+  strings?: {
+    sectionHeader?: string
+  }
 }
 
 const DownloadLotteryResults = (props: DownloadLotteryResultsProps) => {
   if (!props.pdfURL) return null
   return (
     <section className="aside-block text-center">
-      <h2 className="text-caps pb-4">{t("listings.lotteryResults.header")}</h2>
+      <h2 className="text-caps pb-4">
+        {props.strings?.sectionHeader ?? t("listings.lotteryResults.header")}
+      </h2>
       {props.resultsDate && (
         <p className="uppercase text-gray-800 text-tiny font-semibold pb-4">{props.resultsDate}</p>
       )}

package/src/tables/AgTable.tsx

@@ -23,6 +23,10 @@ export interface AgTableProps {
   sort?: AgTableSort
   headerContent?: React.ReactNode
   className?: string
+  strings?: {
+    filter?: string
+    searchError?: string
+  }
 }
 
 export interface AgTablePagination {
@@ -89,6 +93,7 @@ const AgTable = ({
   headerContent,
   data,
   config: { gridComponents, columns, totalItemsLabel },
+  strings,
 }: AgTableProps) => {
   // local storage key with column state
   const columnStateLsKey = `column-state_${id}`
@@ -189,15 +194,17 @@ const AgTable = ({
             <Field
               dataTestId="ag-search-input"
               name="filter-input"
-              label={t("t.filter")}
+              label={strings?.filter ?? t("t.filter")}
               readerOnly={true}
               register={register}
-              placeholder={t("t.filter")}
+              placeholder={strings?.filter ?? t("t.filter")}
             />
           </div>
           <div className="w-full md:w-auto mt-2 mb-2 md:mb-0">
             {!validSearch && (
-              <AlertBox type="notice">{t("applications.table.searchError")}</AlertBox>
+              <AlertBox type="notice">
+                {strings?.searchError ?? t("applications.table.searchError")}
+              </AlertBox>
             )}
           </div>
         </div>