@bloom-housing/ui-components 4.2.2-alpha.2 → 4.2.2-alpha.22

package/src/global/tokens/colors.scss

@@ -0,0 +1,64 @@
+:root {
+  --bloom-color-white: #ffffff;
+  --bloom-color-black: #000000;
+
+  --bloom-color-red-800: #b21d38;
+  --bloom-color-red-700: #e41d3d;
+  --bloom-color-red-300: #f9d2d8;
+
+  --bloom-color-green-800: #216e1f;
+  --bloom-color-green-700: #2e8540;
+  --bloom-color-green-300: #b4e5be;
+
+  --bloom-color-blue-800: #205493;
+  --bloom-color-blue-700: #0067be;
+  --bloom-color-blue-600: #0077da;
+  --bloom-color-blue-300: #daeeff;
+  --bloom-color-blue-200: #f5f8f9;
+
+  --bloom-color-yellow-800: #e5a000;
+  --bloom-color-yellow-700: #fdb81e;
+  --bloom-color-yellow-300: #fee8b6;
+
+  --bloom-color-gray-950: #242c2e;
+  --bloom-color-gray-900: #222222;
+  --bloom-color-gray-850: #333333;
+  --bloom-color-gray-800: #30383a;
+  --bloom-color-gray-750: #555555;
+  --bloom-color-gray-700: #767676;
+  --bloom-color-gray-600: #999999;
+  --bloom-color-gray-550: #aaaaaa;
+  --bloom-color-gray-500: #cccccc;
+  --bloom-color-gray-450: #dedee0;
+  --bloom-color-gray-400: #efefef;
+  --bloom-color-gray-300: #f6f6f6;
+  --bloom-color-gray-200: #f7f7f7;
+  --bloom-color-gray-100: #f9f9f9;
+
+  --bloom-color-primary: var(--bloom-color-blue-600);
+  --bloom-color-primary-dark: var(--bloom-color-blue-700);
+  --bloom-color-primary-darker: var(--bloom-color-blue-800);
+  --bloom-color-primary-light: var(--bloom-color-blue-300);
+  --bloom-color-primary-lighter: var(--bloom-color-blue-200);
+
+  --bloom-color-secondary: var(--bloom-color-blue-700);
+  --bloom-color-alert: var(--bloom-color-red-700);
+  --bloom-color-alert-light: var(--bloom-color-red-300);
+  --bloom-color-alert-dark: var(--bloom-color-red-800);
+  --bloom-color-success: var(--bloom-color-green-700);
+  --bloom-color-success-light: var(--bloom-color-green-300);
+  --bloom-color-success-dark: var(--bloom-color-green-800);
+  --bloom-color-warn: var(--bloom-color-yellow-700);
+  --bloom-color-warn-light: var(--bloom-color-yellow-300);
+  --bloom-color-warn-dark: var(--bloom-color-yellow-800);
+
+  --bloom-color-accent-cool: #00bed5;
+  --bloom-color-accent-cool-light: #c8f1ff;
+  --bloom-color-accent-cool-dark: #009db0;
+  --bloom-color-accent-warm: #ff6627;
+  --bloom-color-accent-warm-dark: #d54309;
+  --bloom-color-accent-warm-light: #ffd2c0;
+  --bloom-color-accent-warm-lighter: #fff7f3;
+
+  --bloom-color-lush: #99cd00;
+}

package/src/global/tokens/fonts.scss

@@ -0,0 +1,45 @@
+:root {
+  --bloom-font-sans: "Open Sans", Helvetica, Arial, Verdana, sans-serif;
+  --bloom-font-serif: "Droid Serif", Georgia, Times, serif;
+  --bloom-font-alt-sans: Lato, Helvetica, Arial, Verdana, sans-serif;
+  --bloom-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
+
+  --bloom-font-size-2xs: 0.6875rem;
+  --bloom-font-size-xs: 0.75rem;
+  --bloom-font-size-sm: 0.8125rem;
+  --bloom-font-size-tiny: 0.875rem;
+  --bloom-font-size-base: 1rem;
+  --bloom-font-size-lg: 1.25rem;
+  --bloom-font-size-xl: 1.375rem;
+  --bloom-font-size-2xl: 1.5rem;
+  --bloom-font-size-3xl: 1.625rem;
+  --bloom-font-size-4xl: 2rem;
+  --bloom-font-size-5xl: 2.5rem;
+  --bloom-font-size-6xl: 3rem;
+  --bloom-font-size-6_5xl: 4rem;
+  --bloom-font-size-7xl: 4.5rem;
+
+  --bloom-letter-spacing-tightest: -0.075em;
+  --bloom-letter-spacing-tighter: -0.05em;
+  --bloom-letter-spacing-tight: -0.025em;
+  --bloom-letter-spacing-wide: 0.025em;
+  --bloom-letter-spacing-wider: 0.05em;
+  --bloom-letter-spacing-widest: 0.12em;
+  --bloom-letter-spacing-ultrawide: 0.25em;
+
+  --bloom-line-height-3: 0.75rem;
+  --bloom-line-height-4: 1rem;
+  --bloom-line-height-5: 1.25rem;
+  --bloom-line-height-6: 1.5rem;
+  --bloom-line-height-7: 1.75rem;
+  --bloom-line-height-8: 2rem;
+  --bloom-line-height-9: 2.25rem;
+  --bloom-line-height-10: 2.5rem;
+  --bloom-line-height-none: 1;
+  --bloom-line-height-tight: 1.25;
+  --bloom-line-height-snug: 1.375;
+  --bloom-line-height-normal: 1.5;
+  --bloom-line-height-relaxed: 1.625;
+  --bloom-line-height-loose: 2;
+}

package/src/global/tokens/screens.scss

@@ -0,0 +1,6 @@
+:root {
+  --bloom-screen-sm: #{$screen-sm};
+  --bloom-screen-md: #{$screen-md};
+  --bloom-screen-lg: #{$screen-lg};
+  --bloom-screen-xl: #{$screen-xl};
+}

package/src/global/tokens/sizes.scss

@@ -0,0 +1,48 @@
+:root {
+  --bloom-s0_5: 0.125rem;
+  --bloom-s1: 0.25rem;
+  --bloom-s1_5: 0.375rem;
+  --bloom-s2: 0.5rem;
+  --bloom-s2_5: 0.625rem;
+  --bloom-s3: 0.75rem;
+  --bloom-s3_5: 0.875;
+  --bloom-s4: 1rem;
+  --bloom-s5: 1.25rem;
+  --bloom-s6: 1.5rem;
+  --bloom-s7: 1.75rem;
+  --bloom-s8: 2rem;
+  --bloom-s9: 2.25rem;
+  --bloom-s10: 2.5rem;
+  --bloom-s11: 2.75rem;
+  --bloom-s12: 3rem;
+  --bloom-s14: 3.5rem;
+  --bloom-s16: 4rem;
+  --bloom-s20: 5rem;
+  --bloom-s24: 6rem;
+  --bloom-s28: 7rem;
+  --bloom-s32: 8rem;
+  --bloom-s36: 9rem;
+  --bloom-s40: 10rem;
+  --bloom-s44: 11rem;
+  --bloom-s48: 12rem;
+  --bloom-s52: 13rem;
+  --bloom-s56: 14rem;
+  --bloom-s60: 15rem;
+  --bloom-s64: 16rem;
+  --bloom-s72: 18rem;
+  --bloom-s80: 20rem;
+  --bloom-s96: 24rem;
+
+  --bloom-width-xs: 20rem;
+  --bloom-width-sm: 24rem;
+  --bloom-width-md: 28rem;
+  --bloom-width-lg: 32rem;
+  --bloom-width-xl: 36rem;
+  --bloom-width-2xl: 42rem;
+  --bloom-width-3xl: 48rem;
+  --bloom-width-4xl: 56rem;
+  --bloom-width-5xl: 64rem;
+  --bloom-width-6xl: 72rem;
+  --bloom-width-7xl: 80rem;
+  --bloom-width-prose: 65ch;
+}

package/src/headers/Heading.tsx

@@ -15,6 +15,7 @@ const HeaderStyleMap = {
   tableHeader: "table-header",
   tableSubheader: "table-subheader",
   sidebarHeader: "text-caps-underline",
+  categoryHeader: "category-header",
 }
 
 const Heading = (props: HeadingProps) => {

package/src/headers/PageHeader.docs.mdx

@@ -0,0 +1,45 @@
+import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { PageHeader } from "./PageHeader"
+
+# Page Header
+
+The page header component displays a title, with an optional subtitle and/or arbitary children elements.
+
+<Canvas>
+  <Story id="headers-page-header--with-content" />
+</Canvas>
+
+<br />
+<br />
+
+## Variants
+
+### Inverse
+
+Set the `inverse` property to `true`.
+
+<Canvas>
+  <Story id="headers-page-header--inversed" />
+</Canvas>
+
+## Component Properties
+
+<ArgsTable of={PageHeader} />
+
+## Theming Variables
+
+<Canvas>
+  <Story id="headers-page-header--style-overrides" />
+</Canvas>
+
+You can apply CSS variables to the `.page-header` selector to customize the appearance of the component.
+
+| Name                         | Type  | Description                                               | Default                         |
+| ---------------------------- | ----- | --------------------------------------------------------- | ------------------------------- |
+| `--background-color`         | Color | The background of the header                              | `--bloom-color-primary-lighter` |
+| `--border-color`             | Color | The color of the top border                               | `--bloom-color-gray-450`        |
+| `--text-color`               | Color | The color of text inside the header                       | `inherit`                       |
+| `--inverse-background-color` | Color | The `inverse` variant background                          | `--bloom-color-primary-darker`  |
+| `--inverse-border-color`     | Color | The `inverse` variant color of the top border             | `--bloom-color-primary`         |
+| `--inverse-text-color`       | Color | The `inverse` variant color of text                       | `--bloom-color-white`           |
+| `--title-font-size`          | Size  | The font size of the title (only on medium+ size screens) | `--bloom-font-size-5xl`         |

package/src/headers/PageHeader.scss

@@ -1,34 +1,47 @@
 .page-header {
-  @apply py-8;
-  @apply border-t;
-  @apply border-gray-450;
+  /* Component Variables */
+  --background-color: var(--bloom-color-primary-lighter);
+  --border-color: var(--bloom-color-gray-450);
+  --text-color: inherit;
+  --inverse-background-color: var(--bloom-color-primary-darker);
+  --inverse-border-color: var(--bloom-color-primary);
+  --inverse-text-color: var(--bloom-color-white);
+  --title-font-size: var(--bloom-font-size-5xl);
 
-  @screen md {
-    @apply py-10;
+  /* Base Styles */
+  padding: var(--bloom-s8) 0;
+  background-color: var(--background-color);
+  border-top: var(--bloom-border-1) solid var(--border-color);
+  color: var(--text-color);
+
+  @media (min-width: $screen-sm) {
+    padding: var(--bloom-s10) 0;
   }
 
-  &.bg-primary-dark {
-    @apply text-white;
-    @apply border-primary;
+  /* Variants */
+  &.is-inverse {
+    --background-color: var(--inverse-background-color);
+    --border-color: var(--inverse-border-color);
+    --text-color: var(--inverse-text-color);
   }
 }
 
 .page-header__group {
-  @apply px-5;
-  @apply m-auto;
-  @apply max-w-5xl;
+  padding: 0 var(--bloom-s5);
+  margin: auto;
+  max-width: var(--bloom-width-5xl);
 }
 
 .page-header__title {
-  @apply text-center;
+  text-align: center;
 
-  @screen md {
-    @apply text-5xl;
-    @apply text-left;
+  @media (min-width: $screen-md) {
+    font-size: var(--title-font-size);
+    text-align: left;
   }
 }
 
 .page-header__lead {
-  @apply m-auto;
-  @apply max-w-5xl;
+  margin: auto;
+  max-width: var(--bloom-width-5xl);
 }

package/src/headers/PageHeader.tsx

@@ -12,16 +12,8 @@ export interface PageHeaderProps {
 
 const PageHeader = (props: PageHeaderProps) => {
   const classNames = ["page-header"]
-  if (props.className) {
-    classNames.push(...props.className.split(" "))
-  }
-
-  if (props.inverse) {
-    classNames.push("bg-primary-dark")
-    classNames.push("text-white")
-  } else {
-    classNames.push("bg-primary-lighter")
-  }
+  if (props.inverse) classNames.push("is-inverse")
+  if (props.className) classNames.push(...props.className.split(" "))
 
   return (
     <header className={classNames.join(" ")}>

package/src/headers/SiteHeader.tsx

@@ -24,6 +24,7 @@ export interface SiteHeaderProps {
   dropdownItemClassName?: string
   homeURL: string
   imageOnly?: boolean
+  languageNavLabel?: string
   languages?: LangItem[]
   logoClass?: string
   logoSrc: string
@@ -423,7 +424,9 @@ const SiteHeader = (props: SiteHeaderProps) => {
 
   return (
     <header className={"site-header"}>
-      {props.languages && <LanguageNav languages={props.languages} />}
+      {props.languages && (
+        <LanguageNav ariaLabel={props.languageNavLabel} languages={props.languages} />
+      )}
 
       <div className={`navbar-notice ${!props.noticeMobile && `navbar-notice-hide`}`}>
         <div className="navbar-notice__text">{props.notice ?? ""}</div>

package/src/helpers/address.tsx

@@ -1,5 +1,4 @@
 import * as React from "react"
-import Markdown from "markdown-to-jsx"
 
 export interface Address {
   city?: string
@@ -38,9 +37,11 @@ export const MultiLineAddress = (props: AddressProps) => {
           <br />
         </>
       )}
-      <Markdown children={props.address.street || ""} />
-      <br />
-      {props.address.city}, {props.address.state} {props.address.zipCode}
+      {props.address.street} {props.address.street2}
+      {(props.address.street || props.address.street2) && <br />}
+      {props.address.city}
+      {props.address.city && (props.address.state || props.address.zipCode) && ","}{" "}
+      {props.address.state} {props.address.zipCode}
     </>
   )
 }

package/src/helpers/tableSummaries.tsx

@@ -1,8 +1,9 @@
 import * as React from "react"
 import { t } from "./translator"
 import { UnitSummary } from "@bloom-housing/backend-core/types"
+import { StandardTableData } from "../tables/StandardTable"
 
-export const unitSummariesTable = (summaries: UnitSummary[]) => {
+export const unitSummariesTable = (summaries: UnitSummary[]): StandardTableData => {
   const unitSummaries = summaries?.map((unitSummary) => {
     const unitPluralization = unitSummary.totalAvailable == 1 ? t("t.unit") : t("t.units")
     const minIncome =
@@ -10,7 +11,8 @@ export const unitSummariesTable = (summaries: UnitSummary[]) => {
         <strong>{unitSummary.minIncomeRange.min}</strong>
       ) : (
         <>
-          <strong>{unitSummary.minIncomeRange.min}</strong> {t("t.to")}{" "}
+          <strong>{unitSummary.minIncomeRange.min}</strong>
+          {` ${t("t.to")} `}
           <strong>{unitSummary.minIncomeRange.max}</strong>
         </>
       )
@@ -24,7 +26,9 @@ export const unitSummariesTable = (summaries: UnitSummary[]) => {
         </>
       ) : (
         <>
-          <strong>{rentMin}</strong> {t("t.to")} <strong>{rentMax}</strong>
+          <strong>{rentMin}</strong>
+          {` ${t("t.to")} `}
+          <strong>{rentMax}</strong>
           {unit}
         </>
       )
@@ -40,32 +44,39 @@ export const unitSummariesTable = (summaries: UnitSummary[]) => {
       : getRent(unitSummary.rentRange.min, unitSummary.rentRange.max)
 
     return {
-      unitType: <strong>{t(`listings.unitTypes.${unitSummary.unitType?.name}`)}</strong>,
-      minimumIncome: (
-        <>
-          {minIncome} {t("t.perMonth")}
-        </>
-      ),
-      rent: <>{rent}</>,
-      availability: (
-        <>
-          {unitSummary.totalAvailable > 0 ? (
-            <>
-              <strong>{unitSummary.totalAvailable}</strong> {unitPluralization}
-            </>
-          ) : (
-            <span className="uppercase">{t("listings.waitlist.label")}</span>
-          )}
-        </>
-      ),
+      unitType: {
+        content: <strong>{t(`listings.unitTypes.${unitSummary.unitType?.name}`)}</strong>,
+      },
+      minimumIncome: {
+        content: (
+          <span>
+            {minIncome}
+            {` ${t("t.perMonth")}`}
+          </span>
+        ),
+      },
+      rent: { content: <span>{rent}</span> },
+      availability: {
+        content: (
+          <span>
+            {unitSummary.totalAvailable > 0 ? (
+              <>
+                <strong>{unitSummary.totalAvailable}</strong> {unitPluralization}
+              </>
+            ) : (
+              <span className="uppercase">{t("listings.waitlist.label")}</span>
+            )}
+          </span>
+        ),
+      },
     }
   })
 
   return unitSummaries
 }
 
-export const getSummariesTable = (summaries: UnitSummary[]) => {
-  let unitSummaries = [] as Record<string, React.ReactNode>[]
+export const getSummariesTable = (summaries: UnitSummary[]): StandardTableData => {
+  let unitSummaries: StandardTableData = []
 
   if (summaries?.length > 0) {
     unitSummaries = unitSummariesTable(summaries)

package/src/locales/general.json

@@ -98,6 +98,7 @@
   "application.contact.yourPhoneNumber": "Your Phone Number",
   "application.contact.zip": "Zip",
   "application.contact.zipCode": "Zipcode",
+  "application.details.adaPriorities": "ADA Priorities Selected",
   "application.edited": "Edited",
   "application.financial.income.instruction1": "Add up your total gross (pre-tax) household income from wages, benefits and other sources from all household members.",
   "application.financial.income.instruction2": "You only need to provide an estimated total right now. The actual total will be calculated if you are selected.",
@@ -353,22 +354,28 @@
   "application.referralApplication.furtherInformation": "For further information",
   "application.referralApplication.instructions": "The permanent supportive housing units are referred directly through <JURISDICTION> Coordinated Entry System. Households experiencing homelessness can call <PHONE_NUMBER> in order to get connected to an Access Point to learn more about the coordinated entry system and access housing-related resources and information.",
   "application.referralApplication.phoneNumber": "211",
+  "application.review.confirmation.applicationReceived": "Application  \nreceived",
+  "application.review.confirmation.applicationsClosed": "Application  \nclosed",
+  "application.review.confirmation.applicationsRanked": "Application  \nranked",
   "application.review.confirmation.browseMore": "Browse more listings",
   "application.review.confirmation.createAccountParagraph": "Creating an account will save your information for future applications, and you can check the status of this application anytime.",
+  "application.review.confirmation.createAccount": "### Would you like to create an account?\n\nCreating an account will save your information for future applications, and you can check the status of this application anytime.",
   "application.review.confirmation.createAccountTitle": "Would you like to create an account?",
   "application.review.confirmation.doNotSubmitTitle": "Do not submit another application for this listing.",
   "application.review.confirmation.imdone": "No thanks, I'm done.",
-  "application.review.confirmation.lotteryNumber": "Here's your application confirmation number",
+  "application.review.confirmation.lotteryNumber": "Your confirmation number",
   "application.review.confirmation.needToUpdate": "If you need to update information on your application, do not apply again. Contact the agent if you did not receive an email confirmation.",
-  "application.review.confirmation.pleaseWriteNumber": "Please write down your application number and keep it in a safe place. We have also emailed this number to you if you provided an email address.",
+  "application.review.confirmation.pleaseWriteNumber": "Please write down your application number and keep it in a safe place. We have also emailed this number to you if you have provided an email address.",
   "application.review.confirmation.print": "View submitted application and print a copy.",
   "application.review.confirmation.title": "Thanks. We have received your application for ",
+  "application.review.confirmation.needToMakeUpdates": "### Need to make updates?\n\nIf you need to update information on your application, do not apply again. Instead, contact the agent for this listing.\n\n**%{agentName}**  \n%{agentPhone}  \n%{agentEmail}\n\n**Office Hours**  \n%{agentOfficeHours}\n\nContact the agent if you did not receive an email confirmation.",
   "application.review.confirmation.whatExpectFirstParagraph.attend": " You do not need to attend the housing lottery. Results will be posted ",
   "application.review.confirmation.whatExpectFirstParagraph.held": "The lottery will be held on ",
   "application.review.confirmation.whatExpectFirstParagraph.listing": "on the listing. ",
   "application.review.confirmation.whatExpectFirstParagraph.refer": "Please refer to the listing for the lottery results date.",
   "application.review.confirmation.whatExpectSecondparagraph": "Applicants will be contacted in order until vacancies are filled. Should your application be chosen, be prepared to fill out a more detailed application and provide required supporting documents.",
   "application.review.confirmation.whatExpectTitle": "What to expect next",
+  "application.review.confirmation.whatHappensNext": "### What happens next?\n\n* After all applications are submitted, the property manager will begin processing applications.\n\n* Eligibile applicants will be contacted by on a **first come first serve** basis until vacancies are filled\n\n* If you are contacted for an interview, you will need to fill out a more detailed application and provide supporting documents.",
   "application.review.demographics.ethnicityLabel": "Which best describes your ethnicity?",
   "application.review.demographics.ethnicityOptions.hispanicLatino": "Hispanic / Latino",
   "application.review.demographics.ethnicityOptions.notHispanicLatino": "Not Hispanic / Latino",

package/src/navigation/FooterNav.scss

@@ -30,7 +30,8 @@
 
   .footer-copyright {
     @screen lg {
-      @apply w-full;
+      @apply w-6/12;
+      @apply text-left;
     }
   }
 

package/src/overlays/Drawer.tsx

@@ -1,4 +1,4 @@
-import * as React from "react"
+import React, { useRef } from "react"
 import "./Drawer.scss"
 import { Icon } from "../icons/Icon"
 import { Overlay, OverlayProps } from "./Overlay"
@@ -6,6 +6,7 @@ import { Tag } from "../text/Tag"
 import { AppearanceStyleType, AppearanceSizeType } from "../global/AppearanceTypes"
 import { AlertTypes } from "../notifications/alertTypes"
 import { AlertBox } from "../notifications"
+import { nanoid } from "nanoid"
 
 export enum DrawerSide {
   left = "left",
@@ -28,18 +29,25 @@ const Drawer = (props: DrawerProps) => {
   const drawerClasses = ["drawer"]
   if (props.className) drawerClasses.push(props.className)
 
+  const uniqueIdRef = useRef(nanoid())
+
   return (
     <Overlay
-      ariaLabel={props.ariaLabel || props.title}
+      ariaLabelledBy={uniqueIdRef.current}
       ariaDescription={props.ariaDescription}
       open={props.open}
       onClose={props.onClose}
       backdrop={props.backdrop}
       className={"has-drawer" + (props.direction == DrawerSide.left ? " is-direction-left" : "")}
+      role="dialog"
     >
       <div className={drawerClasses.join(" ")}>
         <header className="drawer__header">
-          {props.title && <h1 className="drawer__title">{props.title}</h1>}
+          {props.title && (
+            <h1 className="drawer__title" id={uniqueIdRef.current}>
+              {props.title}
+            </h1>
+          )}
           {props.headerTag && (
             <Tag
               pillStyle={true}

package/src/overlays/Modal.tsx

@@ -1,7 +1,8 @@
-import React from "react"
+import React, { useRef } from "react"
 import "./Modal.scss"
 import { Icon } from "../icons/Icon"
 import { Overlay, OverlayProps } from "./Overlay"
+import { nanoid } from "nanoid"
 
 export interface ModalProps extends Omit<OverlayProps, "children"> {
   title: string
@@ -9,12 +10,17 @@ export interface ModalProps extends Omit<OverlayProps, "children"> {
   hideCloseIcon?: boolean
   children?: React.ReactNode
   slim?: boolean
+  role?: string
 }
 
-const ModalHeader = (props: { title: string }) => (
-  <header className="modal__inner">
-    <h1 className="modal__title">{props.title}</h1>
-  </header>
+const ModalHeader = (props: { title: string; uniqueId?: string }) => (
+  <>
+    <header className="modal__inner">
+      <h1 className="modal__title" id={props.uniqueId}>
+        {props.title}
+      </h1>
+    </header>
+  </>
 )
 
 const ModalFooter = (props: { actions: React.ReactNode[] }) => (
@@ -28,17 +34,20 @@ const ModalFooter = (props: { actions: React.ReactNode[] }) => (
 )
 
 export const Modal = (props: ModalProps) => {
+  const uniqueIdRef = useRef(nanoid())
+
   return (
     <Overlay
-      ariaLabel={props.ariaLabel || props.title}
+      ariaLabelledBy={uniqueIdRef.current}
       ariaDescription={props.ariaDescription}
       open={props.open}
       onClose={props.onClose}
       backdrop={props.backdrop}
       slim={props.slim}
+      role={props.role ? props.role : "dialog"}
     >
       <div className="modal">
-        <ModalHeader title={props.title} />
+        <ModalHeader title={props.title} uniqueId={uniqueIdRef.current} />
 
         <section className="modal__inner">
           {typeof props.children === "string" ? (

package/src/overlays/Overlay.tsx

@@ -8,13 +8,14 @@ import { CSSTransition } from "react-transition-group"
 
 export type OverlayProps = {
   open?: boolean
-  ariaLabel?: string
+  ariaLabelledBy?: string
   ariaDescription?: string
   className?: string
   backdrop?: boolean
   onClose?: () => void
   children: React.ReactNode
   slim?: boolean
+  role?: string
 }
 
 const OverlayInner = (props: OverlayProps) => {
@@ -31,8 +32,8 @@ const OverlayInner = (props: OverlayProps) => {
   return (
     <div
       className={classNames.join(" ")}
-      role="dialog"
-      aria-labelledby={props.ariaLabel}
+      role={props.role}
+      aria-labelledby={props.ariaLabelledBy}
       aria-describedby={props.ariaDescription}
       onClick={(e) => {
         if (e.target === e.currentTarget) closeHandler()

package/src/page_components/ApplicationTimeline.scss

@@ -0,0 +1,36 @@
+.markdown ul.application-timeline {
+  @apply mb-8;
+  @apply ml-0;
+}
+
+.application-timeline {
+  .progress-nav__item {
+    @apply pt-0;
+
+    text-transform: unset;
+
+    .absolute {
+      margin-top: 0.45rem;
+      z-index: 2;
+      margin-left: -0.4rem;
+    }
+
+    p {
+      padding-top: 3.8em;
+    }
+  }
+
+  .progress-nav__item.is-active::before,
+  .progress-nav__item.is-disabled::before {
+    height: 2rem;
+    width: 2rem;
+  }
+
+  .progress-nav__item.is-active::before {
+    @apply bg-green-700;
+  }
+
+  .progress-nav__item::after {
+    top: 1rem;
+  }
+}