@bloom-housing/ui-components 5.1.1-alpha.11 → 5.1.1-alpha.14

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.1.1-alpha.14](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.13...@bloom-housing/ui-components@5.1.1-alpha.14) (2022-08-29)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [5.1.1-alpha.13](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.12...@bloom-housing/ui-components@5.1.1-alpha.13) (2022-08-26)
+
+
+### Bug Fixes
+
+* add margin in contact section ([#2999](https://github.com/bloom-housing/bloom/issues/2999)) ([4acb49a](https://github.com/bloom-housing/bloom/commit/4acb49acf17ebabb7a0a34160d992cb5f63eeb02))
+
+
+
+
+
+## [5.1.1-alpha.12](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.11...@bloom-housing/ui-components@5.1.1-alpha.12) (2022-08-24)
+
+
+### Features
+
+* show preference details on listing form ([#2989](https://github.com/bloom-housing/bloom/issues/2989)) ([b4b2b9e](https://github.com/bloom-housing/bloom/commit/b4b2b9ee75c4895ea5b0694dddbf0c8979c0e251))
+
+
+
+
+
 ## [5.1.1-alpha.11](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.10...@bloom-housing/ui-components@5.1.1-alpha.11) (2022-08-23)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "5.1.1-alpha.11",
+  "version": "5.1.1-alpha.14",
   "author": "Sean Albert <sean.albert@exygy.com>",
   "description": "Shared user interface components for Bloom affordable housing system",
   "homepage": "https://github.com/bloom-housing/bloom/tree/master/shared/ui-components",
@@ -110,5 +110,5 @@
     "ts-jest": "^26.4.1",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "63897b5d80ce0f6e1a6fafa7132b36883b425ad1"
+  "gitHead": "ae3987fcd05afc3c4dfcab83f148a63840ad7ff7"
 }

package/src/locales/general.json

@@ -789,7 +789,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",

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,40 +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-1;
-  @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;
-    @apply px-2;
+  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%);
@@ -42,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;
@@ -59,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,15 @@ 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
 }) => {
   let bgColor = "is-disabled"
   if (props.mounted) {
@@ -18,18 +21,24 @@ 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">{t("progressNav.completed")}</span>
+    } else if (props.section > props.currentPageSection) {
+      return <span className="sr-only">{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 +49,26 @@ const ProgressNav = (props: {
   completedSections: number
   labels: string[]
   mounted: boolean
+  style?: ProgressNavStyle
 }) => {
+  let navClasses = "progress-nav"
+  if (props.style === "bar") navClasses += " progress-nav__bar"
   return (
-    <div>
+    <div aria-label="progress">
       <h2 className="sr-only">{t("progressNav.srHeading")}</h2>
-      <ul className={!props.mounted ? "invisible" : "progress-nav"}>
+      <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/overlays/Drawer.scss

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

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

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