@bloom-housing/ui-components 4.2.3 → 4.3.0

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,8 @@ const HeaderStyleMap = {
   tableHeader: "table-header",
   tableSubheader: "table-subheader",
   sidebarHeader: "text-caps-underline",
+  categoryHeader: "category-header",
+  sidebarSubHeader: "text-caps-tiny",
 }
 
 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
@@ -142,6 +143,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
                 }
                 dropdownOptionKeyDown(event, index)
               }}
+              data-test-id={`${option.title}-${index}`}
             >
               {dropdownOptionContent(option)}
             </button>
@@ -295,6 +297,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
                   className={`navbar-link ${props.menuItemClassName && props.menuItemClassName}`}
                   href={menuLink.href}
                   key={`${menuLink.title}-${index}`}
+                  data-test-id={`${menuLink.title}-${index}`}
                 >
                   {menuContent}
                 </LinkComponent>
@@ -333,6 +336,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
                 }}
                 onMouseEnter={() => changeMenuShow(menuLink.title, activeMenus, setActiveMenus)}
                 onMouseLeave={() => changeMenuShow(menuLink.title, activeMenus, setActiveMenus)}
+                data-test-id={`${menuLink.title}-${index}`}
               >
                 {menuContent}
               </span>
@@ -423,7 +427,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/MultiLineAddress.tsx

@@ -0,0 +1,37 @@
+import * as React from "react"
+
+export interface Address {
+  city?: string
+  latitude?: number
+  longitude?: number
+  placeName?: string
+  state?: string
+  street2?: string
+  street?: string
+  zipCode?: string
+}
+
+export interface MultiLineAddressProps {
+  address: Address
+}
+
+const MultiLineAddress = ({ address }: MultiLineAddressProps) => {
+  if (!address) return null
+
+  return (
+    <>
+      {address.placeName && (
+        <>
+          {address.placeName}
+          <br />
+        </>
+      )}
+      {address.street} {address.street2}
+      {(address.street || address.street2) && <br />}
+      {address.city}
+      {address.city && (address.state || address.zipCode) && ","} {address.state} {address.zipCode}
+    </>
+  )
+}
+
+export { MultiLineAddress as default, MultiLineAddress }

package/src/helpers/OneLineAddress.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+import { Address } from "./MultiLineAddress"
+
+export interface OneLineAddressProps {
+  address: Address
+}
+
+const OneLineAddress = ({ address }: OneLineAddressProps) => {
+  if (!address) return null
+
+  return (
+    <>
+      {address.street} {address.street2}
+      {address.street && `, `}
+      {address.city}
+      {address.city && (address.state || address.zipCode) && ","} {address.state} {address.zipCode}
+    </>
+  )
+}
+
+export { OneLineAddress as default, OneLineAddress }

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,31 @@
   "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* %{reviewOrder}\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.confirmation.eligibleApplicants.FCFS": "Eligibile applicants will be contacted by on a **first come first serve** basis until vacancies are filled",
+  "application.review.confirmation.eligibleApplicants.lotteryDate": "The lottery will be held on **%{lotteryDate}**.",
+  "application.review.confirmation.eligibleApplicants.lottery": "Eligible applicants will be contacted by the agent in lottery rank order until vacancies are filled",
   "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

@@ -22,26 +22,31 @@
   .footer-sock__inner {
     @apply max-w-5xl;
     @apply m-auto;
-
+    justify-content: space-between;
     @screen lg {
       @apply flex;
     }
   }
 
   .footer-copyright {
+    width: auto;
+    flex-shrink: 0;
     @screen lg {
-      @apply w-6/12;
       @apply text-left;
     }
   }
 
   .footer-nav {
     @apply mt-5;
+    width: auto;
 
     @screen lg {
       @apply mt-0;
-      @apply w-6/12;
       @apply text-right;
+      display: flex;
+      align-items: flex-start;
+      flex-wrap: wrap;
+      justify-content: end;
     }
   }
 }

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;
+  }
+}

package/src/page_components/ApplicationTimeline.tsx

@@ -0,0 +1,33 @@
+import React from "react"
+import Markdown from "markdown-to-jsx"
+import { Icon } from "../icons/Icon"
+import { t } from "../helpers/translator"
+import "./ApplicationTimeline.scss"
+
+const ApplicationTimeline = () => (
+  <ul
+    className="progress-nav application-timeline"
+    aria-label="Steps of processing your application"
+  >
+    <li className="progress-nav__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")}
+      </Markdown>
+    </li>
+    <li className="progress-nav__item is-disabled">
+      <Markdown options={{ disableParsingRawHTML: true }}>
+        {t("application.review.confirmation.applicationsClosed")}
+      </Markdown>
+    </li>
+    <li className="progress-nav__item is-disabled">
+      <Markdown options={{ disableParsingRawHTML: true }}>
+        {t("application.review.confirmation.applicationsRanked")}
+      </Markdown>
+    </li>
+  </ul>
+)
+
+export { ApplicationTimeline }