@bloom-housing/ui-components 4.2.2 → 4.3.1-alpha.0

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,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)