@bloom-housing/ui-components 6.0.0 → 6.0.1-alpha.1

package/src/navigation/SideNav.scss

@@ -8,9 +8,11 @@
   --selection-parent-accent: var(--bloom-color-gray-450);
   --hover-link-color: var(--bloom-color-primary);
   --hover-background-color: var(--bloom-color-primary-lighter);
+  --background-color: var(--bloom-color-white);
 
   border: var(--border);
   border-radius: var(--border-radius);
+  background-color: var(--background-color);
 
   & > ul {
     & > li:first-child > a {
@@ -70,3 +72,57 @@
     padding-inline-start: calc(var(--current-padding-inline) + var(--current-padding-block));
   }
 }
+
+.side-nav__horizontal {
+  display: flex;
+
+  ul {
+    width: 100%;
+  }
+
+  @media (min-width: $screen-sm) {
+    a {
+      &[aria-current]:not(:focus) {
+        box-shadow: inset 0px -3px 0px 0px var(--hover-link-color);
+      }
+
+      &.has-current-child:not(:focus) {
+        box-shadow: inset 0px 0px -3px 0px var(--selection-parent-accent);
+      }
+    }
+
+    ul {
+      width: auto;
+      display: flex;
+      flex-direction: row;
+      @media (min-width: $screen-md) {
+        flex-direction: row;
+      }
+      @media (max-width: $screen-sm) {
+        flex-direction: column;
+        width: 100%;
+      }
+    }
+
+    li:not(:last-child) {
+      border-right: var(--border);
+      border-bottom: 0px;
+    }
+
+    & > ul {
+      & > li:first-child > a {
+        border-bottom-left-radius: var(--border-radius);
+        border-bottom-right-radius: 0px;
+      }
+
+      & > li:last-child > a {
+        border-bottom-right-radius: var(--border-radius);
+        border-bottom-left-radius: 0px;
+      }
+    }
+  }
+}
+
+.side-nav__count {
+  margin-left: var(--bloom-s4);
+}

package/src/navigation/SideNav.tsx

@@ -11,8 +11,8 @@ export interface SideNavItemProps {
 }
 
 export interface SideNavProps {
-  navItems?: SideNavItemProps[]
   className?: string
+  navItems?: SideNavItemProps[]
 }
 
 const ItemLabel = ({ item }: { item: SideNavItemProps }) => {
@@ -20,7 +20,7 @@ const ItemLabel = ({ item }: { item: SideNavItemProps }) => {
     return (
       <>
         <span>{item.label}</span>
-        <span>{item.count}</span>
+        <span className={"side-nav__count"}>{item.count}</span>
       </>
     )
   } else {

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>

package/src/navigation/Tabs.scss

@@ -10,6 +10,29 @@
   }
 }
 
+.tabs__horizontal {
+  ul {
+    @apply flex;
+    @apply flex-row;
+  }
+
+  .tabs__tab {
+    &:first-of-type {
+      @apply border-l;
+      @apply rounded-tl-lg;
+      @apply rounded-tr-lg;
+      @apply rounded-tr-none;
+      @apply rounded-bl-lg;
+    }
+    &:last-of-type {
+      @apply rounded-tr-lg;
+      @apply rounded-br-lg;
+    }
+
+    border-bottom-color: var(--bloom-color-gray-450);
+  }
+}
+
 .tabs__tab {
   @apply bg-white;
   @apply text-gray-800;
@@ -30,14 +53,10 @@
     @apply border-l;
     @apply rounded-tl-lg;
     @apply rounded-tr-lg;
-    @screen md {
-      @apply rounded-tr-none;
-    }
+    @apply rounded-tr-none;
   }
   &:last-of-type {
-    @screen md {
-      @apply rounded-tr-lg;
-    }
+    @apply rounded-tr-lg;
   }
   &:hover {
     border-bottom-color: map-get($tailwind-gray, 400);

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,123 @@
 .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: 500;
+  --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(--bloom-s3);
+  padding: 0;
+  line-height: var(--bloom-s4);
+  color: var(--close-icon-color);
+}
+
+.alert-box__icon {
+  margin-right: var(--bloom-s3);
+}
+
+.alert-box__sticky {
+  position: sticky;
+  top: var(--bloom-s3);
+  margin-top: var(--bloom-s3);
+  margin-right: var(--bloom-s3);
+  z-index: 10;
+  margin-left: auto;
+  width: fit-content;
+}
+
+.alert-box__sticky + * {
+  --alert-box-height: -3.6rem;
+  margin-top: var(--alert-box-height);
 }

package/src/notifications/AlertBox.tsx

@@ -6,20 +6,23 @@ import { colorClasses } from "./alertTypes"
 import "./AlertBox.scss"
 
 export interface AlertBoxProps {
-  type?: AlertTypes
-  closeable?: boolean
-  onClose?: () => void
+  boundToLayoutWidth?: boolean
   children: ReactNode
-  inverted?: boolean
   className?: string
-  boundToLayoutWidth?: boolean
+  closeable?: boolean
+  customIcon?: IconTypes
+  inverted?: boolean
   narrow?: boolean
+  onClose?: () => void
+  sticky?: boolean
+  type?: AlertTypes
 }
 
 const icons: { [k in AlertTypes]: IconTypes } = {
   alert: "warning",
   notice: "info",
   success: "check",
+  warn: "warning",
 }
 
 const AlertBox = (props: AlertBoxProps) => {
@@ -28,11 +31,12 @@ 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"]),
     ...(props.narrow ? ["narrow"] : []),
+    ...(props.sticky ? ["alert-box__sticky"] : []),
   ].join(" ")
 
   if (onClose) closeable = true
@@ -47,14 +51,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/SiteAlert.tsx

@@ -11,6 +11,7 @@ type SiteAlertProps = {
     type: AlertTypes
     message: string
   }
+  sticky?: boolean
 }
 
 export const setSiteAlertMessage = (message: string, type: AlertTypes) => {
@@ -30,6 +31,7 @@ export const SiteAlert = ({
   type = "alert",
   className,
   alertMessage,
+  sticky,
 }: SiteAlertProps) => {
   const [open, setOpen] = useState(false)
   const [message, setMessage] = useState("")
@@ -75,6 +77,7 @@ export const SiteAlert = ({
       onClose={dismissable ? () => setOpen(false) : undefined}
       className={className}
       type={alertMessage?.type ?? type}
+      sticky={sticky}
     >
       {message}
     </AlertBox>

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/overlays/Modal.scss

@@ -16,6 +16,7 @@
 
   position: relative;
   max-width: var(--max-width);
+  max-height: 100vh;
   margin: auto;
   border: var(--modal-border);
   background-color: var(--background-color);
@@ -33,7 +34,7 @@
 
 .modal__title {
   padding-block: var(--bloom-s6) var(--bloom-s3);
-  padding-inline: var(--bloom-s6);
+  padding-inline: var(--bloom-s6) var(--bloom-s12);
   color: var(--title-color);
   font-size: var(--title-font-size);
   font-family: var(--title-font-family);
@@ -52,6 +53,7 @@
     max-height: calc(100vh - 200px);
     overflow-y: auto;
   }
+
   p {
     color: var(--content-font-color);
   }

package/src/page_components/ApplicationTimeline.scss

@@ -4,13 +4,13 @@
 }
 
 .application-timeline {
-  .progress-nav__item {
+  .progress-nav__dot-item {
     @apply pt-0;
 
     text-transform: unset;
 
     .absolute {
-      margin-top: 0.45rem;
+      margin-top: 0.25rem;
       z-index: 2;
       margin-left: -0.4rem;
     }
@@ -20,17 +20,17 @@
     }
   }
 
-  .progress-nav__item.is-active::before,
-  .progress-nav__item.is-disabled::before {
+  .progress-nav__dot-item.is-active::before,
+  .progress-nav__dot-item.is-disabled::before {
     height: 2rem;
     width: 2rem;
   }
 
-  .progress-nav__item.is-active::before {
+  .progress-nav__dot-item.is-active::before {
     @apply bg-green-700;
   }
 
-  .progress-nav__item::after {
+  .progress-nav__dot-item::after {
     top: 1rem;
   }
 }

package/src/page_components/ApplicationTimeline.tsx

@@ -4,27 +4,37 @@ 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"
   >
-    <li className="progress-nav__item is-active" aria-current="step">
+    <li className="progress-nav__dot-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")}
+        {props.strings?.applicationReceived ??
+          t("application.review.confirmation.applicationReceived")}
       </Markdown>
     </li>
-    <li className="progress-nav__item is-disabled">
+    <li className="progress-nav__dot-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">
+    <li className="progress-nav__dot-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/NavigationHeader.tsx

@@ -17,12 +17,12 @@ type NavigationHeaderTabs = {
   flagsQty?: number
   listingLabel: string
   applicationsLabel: string
-  flagsLabel: string
 }
 
 type NavigationHeaderTabsElement = {
   label: string
   path: string
+  activePaths: string[]
   content: React.ReactNode | undefined
 }
 
@@ -42,23 +42,23 @@ const NavigationHeader = ({
       {
         label: tabs?.listingLabel || "",
         path: `/listings/${listingId}`,
+        activePaths: [`/listings/${listingId}`],
         content: undefined,
       },
       {
         label: tabs?.applicationsLabel || "",
         path: `/listings/${listingId}/applications`,
+        activePaths: [
+          `/listings/${listingId}/applications`,
+          `/listings/${listingId}/applications/pending`,
+          `/listings/${listingId}/applications/pending?type=name_dob`,
+          `/listings/${listingId}/applications/pending?type=email`,
+          `/listings/${listingId}/applications/resolved`,
+        ],
         content: undefined,
       },
     ]
 
-    if (process.env.showDuplicates && typeof tabs?.flagsQty === "number") {
-      elements.push({
-        label: tabs.flagsLabel,
-        path: `/listings/${listingId}/flags`,
-        content: <>{tabs.flagsQty}</>,
-      })
-    }
-
     return elements
   }, [tabs, listingId])
 
@@ -69,7 +69,7 @@ const NavigationHeader = ({
           <TabNavItem
             key={tab.path}
             tagContent={tab?.content}
-            current={tab.path === currentPath}
+            current={tab.activePaths.includes(currentPath)}
             href={tab.path}
             tagSize={AppearanceSizeType.small}
           >

package/src/page_components/forgot-password/FormForgotPassword.tsx

@@ -53,7 +53,7 @@ const FormForgotPassword = ({
     <FormCard>
       <div className="form-card__lead text-center border-b mx-0">
         <Icon size="2xl" symbol="profile" />
-        <h2 className="form-card__title">{t("authentication.forgotPassword.sendEmail")}</h2>
+        <h1 className="form-card__title">{t("authentication.forgotPassword.sendEmail")}</h1>
       </div>
 
       {Object.entries(errors).length > 0 && !networkError.error && (

package/src/page_components/listing/AdditionalFees.tsx

@@ -22,7 +22,7 @@ const AdditionalFees = ({
   footerContent,
   strings,
 }: AdditionalFeesProps) => {
-  if (!deposit && !applicationFee && !strings && footerContent?.length === 0) return <></>
+  if (!deposit && !applicationFee && (!footerContent || footerContent?.length === 0)) return <></>
   return (
     <div className="info-card bg-gray-100 border-0">
       <p className="info-card__title mb-2">{strings.sectionHeader}</p>