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

package/src/headers/PageHeader.scss

@@ -1,6 +1,6 @@
 .page-header {
   /* Component Variables */
-  --background-color: var(--bloom-color-primary-lighter);
+  --background-color: var(--bloom-color-gray-300);
   --border-color: var(--bloom-color-gray-450);
   --text-color: inherit;
   --text-font-family: var(--bloom-font-serif);

package/src/headers/PageHeader.tsx

@@ -19,7 +19,11 @@ const PageHeader = (props: PageHeaderProps) => {
   return (
     <header className={classNames.join(" ")}>
       <hgroup className="page-header__group">
-        {props?.breadcrumbs && <nav className="page-header__breadcrumbs">{props?.breadcrumbs}</nav>}
+        {props?.breadcrumbs && (
+          <nav className="page-header__breadcrumbs" aria-label={"Page Header"}>
+            {props?.breadcrumbs}
+          </nav>
+        )}
 
         {props.title && (
           <h1 data-test-id="page-header" className="page-header__title">

package/src/headers/SiteHeader.tsx

@@ -38,6 +38,11 @@ export interface SiteHeaderProps {
   noticeMobile?: boolean
   siteHeaderWidth?: SiteHeaderWidth
   title?: string
+  strings?: {
+    close?: string
+    logoAriaLable?: string
+    menu?: string
+  }
 }
 
 const SiteHeader = (props: SiteHeaderProps) => {
@@ -147,7 +152,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
                 }
                 dropdownOptionKeyDown(event, index)
               }}
-              data-test-id={`${option.title}-${index}`}
+              data-test-id={`${option.title}`}
             >
               {dropdownOptionContent(option)}
             </button>
@@ -240,7 +245,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
                   setMobileDrawer(false)
                 }
               }}
-              aria-label={t("t.close")}
+              aria-label={props.strings?.close ?? t("t.close")}
             >
               <Icon size="small" symbol="arrowForward" fill={"#ffffff"} className={"pl-2"} />
             </button>
@@ -301,7 +306,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}`}
+                  data-test-id={`${menuLink.title}`}
                 >
                   {menuContent}
                 </LinkComponent>
@@ -340,8 +345,8 @@ const SiteHeader = (props: SiteHeaderProps) => {
                 }}
                 onMouseEnter={() => changeMenuShow(menuLink.title, activeMenus, setActiveMenus)}
                 onMouseLeave={() => changeMenuShow(menuLink.title, activeMenus, setActiveMenus)}
-                data-test-id={`${menuLink.title}-${index}`}
                 role={"button"}
+                data-test-id={`${menuLink.title}`}
               >
                 {menuContent}
               </span>
@@ -377,7 +382,9 @@ const SiteHeader = (props: SiteHeaderProps) => {
               }
             }}
           >
-            <div className={"pr-2 text-tiny text-primary uppercase"}>{t("t.menu")}</div>
+            <div className={"pr-2 text-tiny text-primary uppercase"}>
+              {props.strings?.menu ?? t("t.menu")}
+            </div>
             <Icon
               symbol={mobileMenu ? "closeSmall" : "hamburger"}
               size={"base"}
@@ -400,7 +407,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
             className={"navbar-mobile-menu-button"}
             unstyled
           >
-            {mobileMenu ? t("t.close") : t("t.menu")}
+            {mobileMenu ? props.strings?.close ?? t("t.close") : props.strings?.menu ?? t("t.menu")}
           </Button>
         )}
       </>
@@ -415,7 +422,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
             props.logoWidth && "navbar-custom-width"
           }`}
           href={props.homeURL}
-          aria-label={t("t.homePage")}
+          aria-label={props.strings?.logoAriaLable ?? t("t.homePage")}
         >
           <div className={`logo-content ${props.imageOnly && "navbar-image-only-container"}`}>
             <img

package/src/helpers/formOptions.tsx

@@ -5,6 +5,9 @@ import { SelectOption } from "../forms/Select"
 export interface FormOptionsProps {
   options: (string | SelectOption)[]
   keyPrefix?: string
+  strings?: {
+    selectOne?: string
+  }
 }
 
 export const numberOptions = (end: number, start = 1): SelectOption[] => {
@@ -21,7 +24,7 @@ export const FormOptions = (props: FormOptionsProps) => {
     if (option == "" || option["value"] == "") {
       return (
         <option value="" key="select-one">
-          {t("t.selectOne")}
+          {props.strings?.selectOne ?? t("t.selectOne")}
         </option>
       )
     } else {

package/src/helpers/formatYesNoLabel.ts

@@ -1,9 +1,11 @@
 import { t } from "./translator"
 
-export const formatYesNoLabel = (value: boolean | null) => {
-  if (value === null || typeof value == "undefined") return t("t.n/a")
-  if (value) return t("t.yes")
-  if (!value) return t("t.no")
-
-  return t("t.n/a")
+export const formatYesNoLabel = (
+  value: boolean | null,
+  strings?: { yesString?: string; noString?: string; notApplicableString?: string }
+) => {
+  if (value === null || typeof value == "undefined")
+    return strings?.notApplicableString ?? t("t.n/a")
+  if (value) return strings?.yesString ?? t("t.yes")
+  return strings?.noString ?? t("t.no")
 }

package/src/locales/es.json

@@ -371,7 +371,7 @@
   "authentication.forgotPassword.sendEmail": "Enviar correo electrónico",
   "authentication.forgotPassword.success": "Le hemos enviado un correo electrónico con un enlace para restablecer tu contraseña.",
   "authentication.signIn.accountHasBeenLocked": "Por razones de seguridad_ esta cuenta ha sido bloqueada.",
-  "authentication.signIn.afterFailedAttempts": "Por razones de seguridad_ después de 5 intentos fallidos_ deberá esperar 30 minutos antes de volver a intentarlo.",
+  "authentication.signIn.afterFailedAttempts": "Por razones de seguridad_ después de %{count} intentos fallidos_ deberá esperar 30 minutos antes de volver a intentarlo.",
   "authentication.signIn.changeYourPassword": "Puede cambiar su contraseña",
   "authentication.signIn.enterLoginEmail": "Por favor_ escriba su correo electrónico de inicio de sesión",
   "authentication.signIn.enterLoginPassword": "Por favor_ escriba su contraseña de inicio de sesión",

package/src/locales/general.json

@@ -345,6 +345,7 @@
   "application.programs.rentBasedOnIncome.flatRent.description": "I would like to apply for an affordable flat rent apartment, which has a set monthly rent amount that is below market rate. Note - applicants with Section 8 Mobile Housing Choice Vouchers (HCV) are welcome to apply.",
   "application.programs.rentBasedOnIncome.flatRent.label": "Affordable apartment with flat rent",
   "application.programs.rentBasedOnIncome.summary": "Flat Rent & Rent Based on Income",
+  "application.programs.selectBelow": "Please select all that apply:",
   "application.programs.servedInMilitary.doNotConsider.label": "No",
   "application.programs.servedInMilitary.servedInMilitary.label": "Yes",
   "application.programs.servedInMilitary.summary": "Veteran of the US Military",
@@ -362,7 +363,7 @@
   "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.createAccountTitle": "Would you like to create an account?",
   "application.review.confirmation.doNotSubmitTitle": "Do not submit another application for this listing.",
-  "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.FCFS": "Eligible applicants will be contacted by on a **first come first serve** basis until vacancies are filled.",
   "application.review.confirmation.eligibleApplicants.lottery": "Eligible applicants will be contacted by the agent in lottery rank order until vacancies are filled.",
   "application.review.confirmation.eligibleApplicants.lotteryDate": "The lottery will be held on **%{lotteryDate}**.",
   "application.review.confirmation.imdone": "No thanks, I'm done.",
@@ -494,7 +495,7 @@
   "authentication.forgotPassword.sendEmail": "Send email",
   "authentication.forgotPassword.success": "We've sent you an email. You'll receive an email with a link to reset your password.",
   "authentication.signIn.accountHasBeenLocked": "For security reasons, this account has been locked.",
-  "authentication.signIn.afterFailedAttempts": "For security reasons, after 5 failed attempts, you’ll have to wait 30 minutes before trying again.",
+  "authentication.signIn.afterFailedAttempts": "For security reasons, after %{count} failed attempts, you’ll have to wait 30 minutes before trying again.",
   "authentication.signIn.changeYourPassword": "You can change your password",
   "authentication.signIn.enterLoginEmail": "Please enter your login email",
   "authentication.signIn.enterLoginPassword": "Please enter your login password",
@@ -613,9 +614,12 @@
   "listings.apply.submitPaperNoDueDateNoPostMark": "%{developer} is not responsible for lost or delayed mail.",
   "listings.apply.submitPaperNoDueDatePostMark": "Applications must be received by the deadline. If sending by U.S. Mail, the application must be received by mail no later than %{postmarkReceivedByDate}. Applications received after %{postmarkReceivedByDate} via mail will not be accepted. %{developer} is not responsible for lost or delayed mail.",
   "listings.availableAndWaitlist": "Available Units & Open Waitlist",
-  "listings.availableUnitsDescription": "Applicants will be reviewed in order until all vacancies are filled.",
+  "listings.availableUnitsDescription": "Applicants will be reviewed in lottery rank order until all vacancies are filled.",
   "listings.availableUnitsAndWaitlist": "Available units and waitlist",
   "listings.availableUnitsAndWaitlistDesc": "Once applicants fill all available units, additional applicants will be placed on the waitlist for <span class='t-italic'>%{number} units</span>",
+  "listings.vacantUnit": "Vacant Unit",
+  "listings.vacantUnits": "Vacant Units",
+  "listings.vacantUnitsAvailable": "Vacant Units Available",
   "listings.availableUnit": "Available Unit",
   "listings.availableUnits": "Available Units",
   "listings.bath": "bath",
@@ -788,7 +792,8 @@
   "pageTitle.welcomeEnglish": "Welcome",
   "pageTitle.welcomeSpanish": "Bienvenido",
   "pageTitle.welcomeVietnamese": "Tiếng Việt",
-  "progressNav.current": "Current step: ",
+  "progressNav.completed": "completed",
+  "progressNav.notCompleted": "not completed",
   "progressNav.srHeading": "Progress",
   "region.name": "Local Region",
   "states.AK": "Alaska",
@@ -866,6 +871,7 @@
   "t.edit": "Edit",
   "t.email": "Email",
   "t.emailAddressPlaceholder": "you@myemail.com",
+  "t.filter": "Filter",
   "t.floor": "floor",
   "t.floors": "floors",
   "t.getDirections": "Get Directions",
@@ -909,6 +915,7 @@
   "t.preferNotToSay": "Prefer not to say",
   "t.preferences": "Preferences",
   "t.previous": "Previous",
+  "t.programs": "Programs",
   "t.propertyAmenities": "Property Amenities",
   "t.range": "%{from} to %{to}",
   "t.readLess": "read less",

package/src/locales/tl.json

@@ -324,7 +324,7 @@
   "authentication.forgotPassword.sendEmail": "Magpadala ng email",
   "authentication.forgotPassword.success": "Nagpadala kami sa iyo ng email. Makakatanggap ka ng email na may link para i-reset ang iyong password.",
   "authentication.signIn.accountHasBeenLocked": "Para sa mga kadahilanang pangseguridad_ ang account na ito isinara na.",
-  "authentication.signIn.afterFailedAttempts": "Para sa mga kadahilanang pangseguridad_ pagkatapos ng 5 nabigong pagtatangka_ kailangan mong maghintay ng 30 minuto bago subukang muli.",
+  "authentication.signIn.afterFailedAttempts": "Para sa mga kadahilanang pangseguridad_ pagkatapos ng %{count} nabigong pagtatangka_ kailangan mong maghintay ng 30 minuto bago subukang muli.",
   "authentication.signIn.changeYourPassword": "Maaari mong palitan ang iyong password",
   "authentication.signIn.enterLoginEmail": "Pakilagay ang iyong email sa pag-login",
   "authentication.signIn.enterLoginPassword": "Pakilagay ang iyong password sa pag-log in",

package/src/locales/vi.json

@@ -371,7 +371,7 @@
   "authentication.forgotPassword.sendEmail": "Gửi email",
   "authentication.forgotPassword.success": "Chúng tôi đã gửi email cho quý vị. Quý vị sẽ nhận được email có liên kết để đặt lại mật khẩu.",
   "authentication.signIn.accountHasBeenLocked": "Vì lý do bảo mật_ tài khoản này đã bị khóa.",
-  "authentication.signIn.afterFailedAttempts": "Vì lý do bảo mật_ quý vị sẽ phải chờ 30 phút trước khi thử lại sau 5 lần thử không thành công.",
+  "authentication.signIn.afterFailedAttempts": "Vì lý do bảo mật_ quý vị sẽ phải chờ 30 phút trước khi thử lại sau %{count} lần thử không thành công.",
   "authentication.signIn.changeYourPassword": "Quý vị có thể đổi mật khẩu",
   "authentication.signIn.enterLoginEmail": "Vui lòng nhập email đăng nhập của quý vị",
   "authentication.signIn.enterLoginPassword": "Vui lòng nhập mật khẩu đăng nhập của quý vị",

package/src/locales/zh.json

@@ -371,7 +371,7 @@
   "authentication.forgotPassword.sendEmail": "傳送電子郵件",
   "authentication.forgotPassword.success": "我們已向您傳送電子郵件。您會收到具有重設密碼連結的電子郵件。",
   "authentication.signIn.accountHasBeenLocked": "基於安全原因，此帳戶已遭到鎖定。",
-  "authentication.signIn.afterFailedAttempts": "基於安全原因，只要失敗嘗試達 5 次，您就必須等待 30 分鐘才能再試一次。",
+  "authentication.signIn.afterFailedAttempts": "基於安全原因，只要失敗嘗試達 %{count} 次，您就必須等待 30 分鐘才能再試一次。",
   "authentication.signIn.changeYourPassword": "您可以變更密碼",
   "authentication.signIn.enterLoginEmail": "請輸入您的登入電子郵件",
   "authentication.signIn.enterLoginPassword": "請輸入您的登入密碼",

package/src/navigation/Breadcrumbs.tsx

@@ -9,7 +9,7 @@ export interface BreadcrumbsProps {
 const BreadcrumbLink = (props: { href: string; children: React.ReactNode; current?: boolean }) => (
   <li>
     <LocalizedLink
-      className={props.current ? "is-active" : undefined}
+      className={props.current ? "is-active text-gray-850" : "text-blue-700"}
       aria-current={props.current ? "page" : undefined}
       href={props.href}
     >

package/src/navigation/FooterNav.tsx

@@ -10,7 +10,11 @@ const FooterNav = (props: FooterNavProps) => (
   <section className="footer-sock">
     <div className="footer-sock__inner">
       <p className="footer-copyright">{props.copyright}</p>
-      {props.children && <nav className="footer-nav">{props.children}</nav>}
+      {props.children && (
+        <nav className="footer-nav" aria-label={"Footer"}>
+          {props.children}
+        </nav>
+      )}
     </div>
   </section>
 )

package/src/navigation/LanguageNav.tsx

@@ -16,7 +16,7 @@ const LanguageNav = ({ ariaLabel, languages }: LanguageNavProps) => {
   return (
     <div className="language-bar">
       <div className="language-bar__inner">
-        <nav {...(ariaLabel ? { "aria-label": ariaLabel } : {})} className="language-nav">
+        <nav {...{ "aria-label": ariaLabel ?? "Language" }} className="language-nav">
           <ul className="language-nav__list">
             {languages.map((item) => (
               <li key={item.label}>

package/src/navigation/ProgressNav.docs.mdx

@@ -0,0 +1,47 @@
+import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { ProgressNav } from "./ProgressNav"
+
+# Progress Nav
+
+The progress nav component is used to illustrate progress in a multi-step process. It displays the step labels, and uses color and layout to indicate which steps are completed, in-progress, and unstarted.
+
+## Dot Style
+
+<Canvas>
+  <Story id="navigation-progress-nav--default" />
+</Canvas>
+
+## Bar Style
+
+<Canvas>
+  <Story id="navigation-progress-nav--bar-style" />
+</Canvas>
+
+You can apply CSS variables to the `.progrss-nav` selector to customize the appearance of the component.
+
+| Name                          | Type  | Description                                 | Default                        |
+| ----------------------------- | ----- | ------------------------------------------- | ------------------------------ |
+| `--completed-step-color`      | Color | The color of completed step                 | `--bloom-color-primary-darker` |
+| `--completed-step-font-color` | Color | The color of completed step label           | `--bloom-color-primary-darker` |
+| `--active-step-color`         | Color | The color of active step                    | `--bloom-color-primary`        |
+| `--active-step-font-color`    | Color | The color of active step label              | `--bloom-color-primary-darker` |
+| `--future-step-color`         | Color | The color of future step                    | `--bloom-color-gray-450`       |
+| `--future-step-font-color`    | Color | The color of future step label              | `--bloom-color-gray-750`       |
+|                               |       |                                             |                                |
+| `--dot-size`                  | Size  | The diameter of each dot step               | `--bloom-s3`                   |
+| `--dot-padding-left-mobile`   | Size  | The padding-left of each dot step on mobile | `--bloom-s2`                   |
+| `--dot-label-padding-top`     | Size  | The padding-top of each dot step label      | `--bloom-s4`                   |
+| `--dot-label-padding-left`    | Size  | The padding-left of each dot step label     | `--bloom-s1`                   |
+| `--dot-font-size-desktop`     | Size  | The font size of dot step labels on desktop | `--bloom-font-size-base`       |
+| `--dot-font-size-mobile`      | Size  | The font size of dot step labels on mobile  | `--bloom-font-size-2xs`        |
+| `--dot-line-color`            | Color | The color of the dot connecting line        | `--bloom-color-gray-450`       |
+| `--dot-active-font-weight`    | Size  | The font weight of active dot step label    | `600`                          |
+| `--dot-text-transform`        | Size  | The capitalization of dot step label        | `capitalize`                   |
+|                               |       |                                             |                                |
+| `--bar-height`                | Size  | The height of bar step                      | `--bloom-s4`                   |
+| `--bar-spacing`               | Size  | The spacing between each bar step           | `--bloom-s0_5`                 |
+| `--bar-label-padding-top`     | Size  | The padding-top of each bar step label      | `--bloom-s2`                   |
+| `--bar-label-padding-left`    | Size  | The padding-left of each bar step label     | `--bloom-s0_5`                 |
+| `--bar-font-size`             | Size  | The font size of bar step labels on desktop | `--bloom-font-size-base`       |
+| `--bar-active-font-weight`    | Size  | The font weight of active bar step label    | `600`                          |
+| `--bar-text-transform`        | Size  | The capitalization of dot step label        | `capitalize`                   |

package/src/navigation/ProgressNav.scss

@@ -1,39 +1,54 @@
 .progress-nav {
-  // @include clearfix;
-  @apply list-none;
-  @apply table;
-  @apply m-0;
-  @apply p-0;
-  @apply w-full;
-}
+  --completed-step-color: var(--bloom-color-gray-850);
+  --completed-step-font-color: var(--bloom-color-gray-850);
+  --active-step-color: var(--bloom-color-primary);
+  --active-step-font-color: var(--bloom-color-gray-900);
+  --future-step-color: var(--bloom-color-gray-450);
+  --future-step-font-color: var(--bloom-color-gray-750);
 
-.progress-nav__item {
-  @apply text-2xs;
-  @apply px-2;
-  @apply py-3;
-  @apply relative;
-  @apply text-center;
-  @apply uppercase;
-  @apply table-cell;
-  @apply whitespace-nowrap;
-  @apply float-none;
-  max-width: 20%;
+  --dot-size: var(--bloom-s3);
+  --dot-padding-left-mobile: var(--bloom-s2);
+  --dot-label-padding-top: var(--bloom-s4);
+  --dot-label-padding-left: var(--bloom-s1);
+  --dot-font-size-desktop: var(--bloom-font-size-base);
+  --dot-font-size-mobile: var(--bloom-font-size-2xs);
+  --dot-line-color: var(--bloom-color-gray-450);
+  --dot-active-font-weight: bold;
+  --dot-text-transform: capitalize;
+
+  --bar-height: var(--bloom-s4);
+  --bar-spacing: var(--bloom-s0_5);
+  --bar-label-padding-top: var(--bloom-s2);
+  --bar-label-padding-left: var(--bloom-s0_5);
+  --bar-font-size: var(--bloom-font-size-base);
+  --bar-active-font-weight: bold;
+  --bar-text-transform: capitalize;
 
-  @screen md {
-    @apply text-sm;
-    @apply p-0;
+  display: table;
+  width: 100%;
+}
+
+.progress-nav__dot-item {
+  font-size: var(--dot-font-size-mobile);
+  padding: var(--dot-size) var(--dot-padding-left-mobile);
+  position: relative;
+  text-align: center;
+  text-transform: var(--dot-text-transform);
+  display: table-cell;
+  white-space: nowrap;
+  float: none;
+  @media (min-width: $screen-md) {
+    font-size: var(--dot-font-size-desktop);
+    padding: 0rem;
   }
 
   &:before {
-    @apply absolute;
-    @apply h-3;
-    @apply w-3;
-    @apply bg-lush;
-    @apply border-solid;
-    @apply border;
-    @apply border-white;
-    @apply rounded-full;
-    @apply top-0;
+    position: absolute;
+    height: var(--dot-size);
+    width: var(--dot-size);
+    background-color: var(--completed-step-color);
+    border-radius: 50%;
+    top: 0;
     left: 50%;
     content: "";
     transform: translateX(-50%);
@@ -41,10 +56,10 @@
   }
 
   &:after {
-    @apply absolute;
-    @apply bg-gray-450;
-    @apply w-full;
-    @apply left-0;
+    position: absolute;
+    background-color: var(--dot-line-color);
+    width: 100%;
+    left: 0;
     top: 0.4rem;
     content: "";
     height: 1px;
@@ -58,45 +73,76 @@
 
   &:last-of-type {
     &:after {
-      @apply left-auto;
+      left: auto;
       right: 50%;
     }
   }
+  .progress-nav__item-container {
+    padding-top: var(--dot-label-padding-top);
+    padding-left: var(--dot-label-padding-left);
+    color: var(--completed-step-font-color);
+    display: block;
+    position: relative;
+    pointer-events: none;
+    cursor: default;
+    z-index: 3;
+  }
 
   &.is-active {
     &:before {
-      @apply h-3;
-      @apply w-3;
-      @apply bg-primary;
-      @apply top-0;
+      background-color: var(--active-step-color);
     }
-
     .progress-nav__item-container {
-      @apply text-black;
-      @apply font-bold;
+      color: var(--active-step-font-color);
+      font-weight: var(--dot-active-font-weight);
     }
   }
 
   &.is-disabled {
     &:before {
-      @apply h-3;
-      @apply w-3;
-      @apply bg-gray-450;
-      @apply top-0;
+      background-color: var(--future-step-color);
     }
-
     .progress-nav__item-container {
-      @apply pointer-events-none;
-      @apply cursor-default;
+      color: var(--future-step-font-color);
     }
   }
+}
+
+.progress-nav__bar {
+  border-spacing: var(--bar-spacing);
+  table-layout: fixed;
+}
 
+.progress-nav__bar-item {
+  // drop the labels on mobile view
+  font-size: 0;
+  padding-top: var(--bar-label-padding-top);
+  padding-left: var(--bar-label-padding-left);
+  position: relative;
+  display: table-cell;
+  white-space: nowrap;
+  float: none;
+  max-width: 20%;
+  border-top-width: var(--bar-height);
+  border-top-color: var(--completed-step-color);
+  text-transform: var(--bar-text-transform);
+  @media (min-width: $screen-md) {
+    font-size: var(--bar-font-size);
+  }
+  &.is-active {
+    border-top-color: var(--active-step-color);
+    .progress-nav__item-container {
+      font-weight: var(--bar-active-font-weight);
+      color: var(--active-step-font-color);
+    }
+  }
+  &.is-disabled {
+    border-top-color: var(--future-step-color);
+    .progress-nav__item-container {
+      color: var(--future-step-font-color);
+    }
+  }
   .progress-nav__item-container {
-    @apply pt-4;
-    @apply pl-1;
-    @apply text-gray-700;
-    @apply block;
-    @apply relative;
-    z-index: 3;
+    color: var(--completed-step-font-color);
   }
 }

package/src/navigation/ProgressNav.tsx

@@ -2,12 +2,20 @@ import React from "react"
 import "./ProgressNav.scss"
 import { t } from "../helpers/translator"
 
+type ProgressNavStyle = "bar" | "dot"
+
 const ProgressNavItem = (props: {
   section: number
   currentPageSection: number
   completedSections: number
   label: string
   mounted: boolean
+  style: ProgressNavStyle
+  strings?: {
+    screenReaderCompleted?: string
+    screenReaderNotCompleted?: string
+    screenReaderTitle?: string
+  }
 }) => {
   let bgColor = "is-disabled"
   if (props.mounted) {
@@ -18,18 +26,32 @@ const ProgressNavItem = (props: {
     }
   }
 
-  const srText =
-    props.section === props.currentPageSection ? (
-      <span className="sr-only">{t("progressNav.current")}</span>
-    ) : (
-      ""
-    )
+  const srTextBuilder = (): string | React.ReactFragment => {
+    if (props.section < props.currentPageSection) {
+      return (
+        <span className="sr-only">
+          {props.strings?.screenReaderCompleted ?? t("progressNav.completed")}
+        </span>
+      )
+    } else if (props.section > props.currentPageSection) {
+      return (
+        <span className="sr-only">
+          {props.strings?.screenReaderNotCompleted ?? t("progressNav.notCompleted")}
+        </span>
+      )
+    } else {
+      return ""
+    }
+  }
 
   return (
-    <li className={`progress-nav__item ${bgColor}`}>
-      <span aria-disabled={bgColor === "is-disabled"} className={"progress-nav__item-container"}>
-        {srText}
-        {props.label}
+    <li className={`progress-nav__${props.style}-item ${bgColor}`}>
+      <span
+        aria-disabled={bgColor === "is-disabled"}
+        aria-current={bgColor === "is-active"}
+        className={"progress-nav__item-container"}
+      >
+        {props.label} {srTextBuilder()}
       </span>
     </li>
   )
@@ -40,23 +62,31 @@ const ProgressNav = (props: {
   completedSections: number
   labels: string[]
   mounted: boolean
+  style?: ProgressNavStyle
+  strings?: {
+    screenReaderHeading?: string
+  }
 }) => {
+  let navClasses = "progress-nav"
+  if (props.style === "bar") navClasses += " progress-nav__bar"
   return (
-    <div>
-      <h2 className="sr-only">{t("progressNav.srHeading")}</h2>
-      <ul className={!props.mounted ? "invisible" : "progress-nav"}>
+    <div aria-label="progress">
+      <h2 className="sr-only">
+        {props.strings?.screenReaderHeading ?? t("progressNav.srHeading")}
+      </h2>
+      <ol className={!props.mounted ? "invisible" : navClasses}>
         {props.labels.map((label, i) => (
           <ProgressNavItem
             key={label}
-            // Sections are 1-indexed
             section={i + 1}
             currentPageSection={props.currentPageSection}
             completedSections={props.completedSections}
             label={label}
             mounted={props.mounted}
+            style={props.style ?? "dot"}
           />
         ))}
-      </ul>
+      </ol>
     </div>
   )
 }

package/src/navigation/TabNav.scss

@@ -13,7 +13,7 @@
     @apply block;
     @apply px-6 pb-3;
     @apply border-b-2;
-    @apply text-gray-700;
+    @apply text-gray-750;
     @apply items-center;
     border-color: transparent;
     line-height: 1.5rem;

package/src/navigation/TabNav.tsx

@@ -58,7 +58,7 @@ const TabNav = (props: { children: React.ReactNode; className?: string }) => {
   }
 
   return (
-    <nav className={classes.join(" ")}>
+    <nav className={classes.join(" ")} aria-label={"Secondary navigation"}>
       <ul role="tablist" aria-label="Secondary navigation">
         {props.children}
       </ul>