@bloom-housing/ui-components 8.0.3 → 8.1.0

package/src/headers/SiteHeader.stories.tsx

@@ -9,14 +9,22 @@ export default {
 export const basic = () => (
   <SiteHeader
     homeURL={"/"}
-    // languages={[{ label: "English", onClick: () => console.log("Clicked English"), active: true }]}
     logoSrc="/images/logo_glyph.svg"
-    // notice="This is a preview of our new website. We're just getting started. We'd love to get your feedback."
     title="Alameda County Housing Portal"
     menuLinks={[]}
   />
 )
 
+export const withSubtitle = () => (
+  <SiteHeader
+    homeURL={"/"}
+    logoSrc="/images/logo_glyph.svg"
+    title="Alameda County Housing Portal"
+    subtitle="Subtitle"
+    menuLinks={[]}
+  />
+)
+
 export const withLanguage = () => (
   <SiteHeader
     homeURL={"/"}

package/src/headers/SiteHeader.tsx

@@ -12,6 +12,7 @@ type LogoWidth = "slim" | "base" | "medium" | "wide"
 type SiteHeaderWidth = "base" | "wide"
 
 export interface MenuLink {
+  className?: string
   href?: string
   iconClassName?: string
   iconSrc?: string
@@ -21,7 +22,9 @@ export interface MenuLink {
 }
 
 export interface SiteHeaderProps {
+  desktopMinWidth?: number
   dropdownItemClassName?: string
+  flattenSubMenus?: boolean
   homeURL: string
   imageOnly?: boolean
   languageNavLabel?: string
@@ -34,10 +37,10 @@ export interface SiteHeaderProps {
   menuLinks: MenuLink[]
   mobileDrawer?: boolean
   mobileText?: boolean
-  flattenSubMenus?: boolean
   notice?: string | React.ReactNode
   noticeMobile?: boolean
   siteHeaderWidth?: SiteHeaderWidth
+  subtitle?: string
   title?: string
   strings?: {
     close?: string
@@ -56,7 +59,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
 
   const { LinkComponent } = useContext(NavigationContext)
 
-  const DESKTOP_MIN_WIDTH = 767 // @screen md
+  const DESKTOP_MIN_WIDTH = props.desktopMinWidth || 767 // @screen md
   // Enables toggling off navbar links when entering mobile
   useEffect(() => {
     if (window.innerWidth > DESKTOP_MIN_WIDTH) {
@@ -74,13 +77,13 @@ const SiteHeader = (props: SiteHeaderProps) => {
     }
     window.addEventListener("resize", updateMedia)
     return () => window.removeEventListener("resize", updateMedia)
-  }, [])
+  }, [DESKTOP_MIN_WIDTH])
 
   const getLogoWidthClass = () => {
-    if (props.logoWidth === "slim") return "navbar-logo-width-slim"
-    if (!props.logoWidth || props.logoWidth === "base") return "navbar-logo-width-base"
-    if (props.logoWidth === "medium") return "navbar-logo-width-med"
-    if (props.logoWidth === "wide") return "navbar-logo-width-wide"
+    if (props.logoWidth === "slim") return "site-header__logo-width-slim"
+    if (!props.logoWidth || props.logoWidth === "base") return "site-header__logo-width-base"
+    if (props.logoWidth === "medium") return "site-header__logo-width-med"
+    if (props.logoWidth === "wide") return "site-header__logo-width-wide"
     return ""
   }
 
@@ -154,7 +157,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
                 }
                 dropdownOptionKeyDown(event, index)
               }}
-              data-test-id={`${option.title}`}
+              data-test-id={`${option.title}-${index}`}
             >
               {dropdownOptionContent(option)}
             </button>
@@ -171,9 +174,9 @@ const SiteHeader = (props: SiteHeaderProps) => {
         {menuTitle}
         <Icon size="small" symbol="arrowDown" fill={"#555555"} className={"pl-2"} />
         {activeMenus.indexOf(menuTitle) >= 0 && (
-          <span className={"navbar-dropdown-container"}>
-            <div className={"navbar-dropdown"}>
-              {getDropdownOptions(subMenus, "navbar-dropdown-item", menuTitle)}
+          <span className={"site-header__dropdown-container"}>
+            <div className={"site-header__dropdown"}>
+              {getDropdownOptions(subMenus, "site-header__dropdown-item", menuTitle)}
             </div>
           </span>
         )}
@@ -207,7 +210,12 @@ const SiteHeader = (props: SiteHeaderProps) => {
                   }}
                 >
                   {menuLink.title}
-                  <Icon size="small" symbol="arrowDown" fill={"#555555"} className={"pl-2"} />
+                  <Icon
+                    size="small"
+                    symbol="arrowDown"
+                    fill={"#555555"}
+                    className={"site-header__icon-spacing"}
+                  />
                 </button>
                 {activeMobileMenus.indexOf(menuLink.title) >= 0 && (
                   <div className={dropdownContainerClassName}>
@@ -236,11 +244,16 @@ const SiteHeader = (props: SiteHeaderProps) => {
   // Render the mobile drawer that opens on menu press when prop mobileDrawer is set
   const getMobileDrawer = () => {
     return (
-      <CSSTransition in={mobileDrawer} timeout={400} classNames={"drawer-transition"} unmountOnExit>
-        <span className={`navbar-mobile-drawer-dropdown-container`}>
-          <div className={"navbar-mobile-drawer-dropdown"}>
+      <CSSTransition
+        in={mobileDrawer}
+        timeout={400}
+        classNames={"site-header__drawer-transition"}
+        unmountOnExit
+      >
+        <span className={"site-header__mobile-drawer-dropdown-container"}>
+          <div className={"site-header__mobile-drawer-dropdown"}>
             <button
-              className={"navbar-mobile-drawer-close-row"}
+              className={"site-header__mobile-drawer-close-row"}
               onClick={() => setMobileDrawer(false)}
               onKeyPress={(event) => {
                 if (event.key === "Enter") {
@@ -249,12 +262,17 @@ const SiteHeader = (props: SiteHeaderProps) => {
               }}
               aria-label={props.strings?.close ?? t("t.close")}
             >
-              <Icon size="small" symbol="arrowForward" fill={"#ffffff"} className={"pl-2"} />
+              <Icon
+                size="small"
+                symbol="arrowForward"
+                fill={"#ffffff"}
+                className={"site-header__icon-spacing"}
+              />
             </button>
             {buildMobileMenuOptions(
               props.menuLinks,
-              "navbar-mobile-drawer-dropdown-item navbar-mobile-drawer-dropdown-item-sublink",
-              "navbar-mobile-drawer-dropdown-item"
+              "site-header__mobile-drawer-dropdown-item site-header__mobile-drawer-dropdown-item-sublink",
+              "site-header__mobile-drawer-dropdown-item"
             )}
           </div>
         </span>
@@ -267,13 +285,12 @@ const SiteHeader = (props: SiteHeaderProps) => {
     return (
       <>
         {!props.mobileDrawer && (
-          <span className={"navbar-mobile-dropdown-container"}>
-            <div className={"navbar-mobile-dropdown"}>
+          <span className={"site-header__mobile-dropdown-container"}>
+            <div className={"site-header__mobile-dropdown"}>
               {buildMobileMenuOptions(
                 props.menuLinks,
-                "navbar-mobile-dropdown-item navbar-mobile-dropdown-item-sublink",
-                "navbar-mobile-dropdown-item",
-                "navbar-mobile-dropdown-links"
+                "site-header__mobile-dropdown-item site-header__mobile-dropdown-item-sublink",
+                "site-header__mobile-dropdown-item"
               )}
             </div>
           </span>
@@ -305,10 +322,12 @@ const SiteHeader = (props: SiteHeaderProps) => {
             if (menuLink.href) {
               return (
                 <LinkComponent
-                  className={`navbar-link ${props.menuItemClassName ?? ""}`}
+                  className={`site-header__link ${props.menuItemClassName ?? ""} ${
+                    menuLink.className ?? ""
+                  }`}
                   href={menuLink.href}
                   key={`${menuLink.title}-${index}`}
-                  data-test-id={`${menuLink.title}`}
+                  data-test-id={`${menuLink.title}-${index}`}
                 >
                   {menuContent}
                 </LinkComponent>
@@ -316,7 +335,9 @@ const SiteHeader = (props: SiteHeaderProps) => {
             } else {
               return (
                 <button
-                  className={`navbar-link ${props.menuItemClassName ?? ""} desktop-header-button`}
+                  className={`site-header__link ${
+                    props.menuItemClassName ?? ""
+                  } site-header__desktop-header-button`}
                   tabIndex={0}
                   onClick={() => {
                     menuAction(menuLink.onClick)
@@ -335,7 +356,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
           } else {
             return (
               <span
-                className={`navbar-link navbar-dropdown-title`}
+                className={`site-header__link site-header__dropdown-title`}
                 tabIndex={0}
                 key={`${menuLink.title}-${index}`}
                 onKeyPress={(event) => {
@@ -346,7 +367,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
                 onMouseEnter={() => changeMenuShow(menuLink.title, activeMenus, setActiveMenus)}
                 onMouseLeave={() => changeMenuShow(menuLink.title, activeMenus, setActiveMenus)}
                 role={"button"}
-                data-test-id={`${menuLink.title}`}
+                data-test-id={`${menuLink.title}-${index}`}
               >
                 {menuContent}
               </span>
@@ -371,7 +392,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
       <>
         {props.mobileText ? (
           <button
-            className={"flex flex-row items-center justify-center"}
+            className={"site-header__mobile-menu-text-button"}
             onClick={() => {
               mobileHeaderAction()
             }}
@@ -382,13 +403,13 @@ const SiteHeader = (props: SiteHeaderProps) => {
               }
             }}
           >
-            <div className={"pr-2 text-sm text-primary uppercase"}>
+            <div className={"site-header__mobile-menu-text-button-content"}>
               {props.strings?.menu ?? t("t.menu")}
             </div>
             <Icon
               symbol={mobileMenu ? "closeSmall" : "hamburger"}
               size={"base"}
-              className={"pr-3"}
+              className={"site-header__mobile-menu-icon"}
             />
           </button>
         ) : (
@@ -404,10 +425,14 @@ const SiteHeader = (props: SiteHeaderProps) => {
             }}
             icon={mobileMenu ? "closeSmall" : "hamburger"}
             iconSize="base"
-            className={"navbar-mobile-menu-button"}
+            className={"site-header__mobile-menu-button"}
             unstyled
           >
-            {mobileMenu ? props.strings?.close ?? t("t.close") : props.strings?.menu ?? t("t.menu")}
+            <span className={"site-header__mobile-menu-button-text"}>
+              {mobileMenu
+                ? props.strings?.close ?? t("t.close")
+                : props.strings?.menu ?? t("t.menu")}
+            </span>
           </Button>
         )}
       </>
@@ -416,21 +441,34 @@ const SiteHeader = (props: SiteHeaderProps) => {
 
   const getLogo = () => {
     return (
-      <div className={`navbar-logo ${getLogoWidthClass()}`}>
+      <div className={`site-header__logo-container ${getLogoWidthClass()}`}>
         <LinkComponent
-          className={`logo ${props.logoClass ?? ""} ${
-            (props.logoWidth && "navbar-custom-width") ?? ""
+          className={`site-header__logo ${props.logoClass ?? ""} ${
+            (props.logoWidth && "site-header__custom-width") ?? ""
           }`}
           href={props.homeURL}
           aria-label={props.strings?.logoAriaLable ?? t("t.homePage")}
         >
-          <div className={`logo-content ${props.imageOnly ? "navbar-image-only-container" : ""}`}>
+          <div
+            className={`site-header__logo-content ${
+              props.imageOnly ? "site-header__image-only-container" : ""
+            }`}
+          >
             <img
-              className={`logo__image ${props.imageOnly ? "navbar-image-only" : ""}`}
+              className={`site-header__logo-image ${
+                props.imageOnly ? "site-header__image-only" : ""
+              }`}
               src={props.logoSrc}
               alt={"Site logo"}
             />
-            {props.title && <div className="logo__title">{props.title}</div>}
+            {props.title && (
+              <div className="site-header__logo-title">
+                {props.title}
+                {props.subtitle && (
+                  <div className="site-header__logo__subtitle">{props.subtitle}</div>
+                )}
+              </div>
+            )}
           </div>
         </LinkComponent>
       </div>
@@ -440,7 +478,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
   return (
     <header className={"site-header"}>
       {props.mainContentId && (
-        <a className="skip-link" href={`#${props.mainContentId}`}>
+        <a className="site-header__skip-link" href={`#${props.mainContentId}`}>
           {props.strings?.skipToMainContent}
         </a>
       )}
@@ -448,18 +486,22 @@ const SiteHeader = (props: SiteHeaderProps) => {
         <LanguageNav ariaLabel={props.languageNavLabel} languages={props.languages} />
       )}
 
-      <div className={`navbar-notice ${!props.noticeMobile ? `navbar-notice-hide` : ""}`}>
-        <div className="navbar-notice__text">{props.notice ?? ""}</div>
+      <div
+        className={`site-header__notice ${!props.noticeMobile ? `site-header__notice-hide` : ""}`}
+      >
+        <div className="site-header__notice-text">{props.notice ?? ""}</div>
       </div>
 
-      <nav className="navbar-container" role="navigation" aria-label="main navigation">
+      <nav className="site-header__container" role="navigation" aria-label="main navigation">
         <div
-          className={`navbar ${
-            props.siteHeaderWidth === "wide" ? "navbar-width-wide" : "navbar-width-base"
+          className={`site-header__base ${
+            props.siteHeaderWidth === "wide" ? "site-header__width-wide" : "side-header__width-base"
           }`}
         >
           {getLogo()}
-          <div className="navbar-menu">{isDesktop ? getDesktopHeader() : getMobileHeader()}</div>
+          <div className="site-header__navbar-menu">
+            {isDesktop ? getDesktopHeader() : getMobileHeader()}
+          </div>
         </div>
       </nav>
       {!isDesktop && mobileMenu && getMobileDropdown()}

package/src/lists/PreferencesList.stories.tsx

@@ -29,6 +29,11 @@ const listingPreferences = [
         url: "http://www.google.com",
         title: "Link Title 2",
       },
+      {
+        url: "http://www.apple.com",
+        ariaLabel: "Link to Apple",
+        title: "Link Title with Aria Label",
+      },
     ],
     title: "Title 2",
     subtitle: "Subtitle 2",

package/src/lists/PreferencesList.tsx

@@ -5,6 +5,7 @@ import { locale } from "../helpers/translator"
 export interface ListPreferenceLink {
   title: string
   url: string
+  ariaLabel?: string
 }
 
 export interface ListPreference {
@@ -54,7 +55,7 @@ const PreferencesList = (props: PreferencesListProps) => {
           <div className="preferences-list__links">
             {preference.links.map((link: ListPreferenceLink, linkIndex: number) => (
               <span key={linkIndex}>
-                <a href={link.url} target="_blank">
+                <a href={link.url} target="_blank" aria-label={link.ariaLabel}>
                   {link.title}
                 </a>
               </span>

package/src/page_components/listing/ContentAccordion.stories.tsx

@@ -25,6 +25,17 @@ export const blueThemeBasic = () => {
   )
 }
 
+export const blueThemeBasicWithInitialExpanded = () => {
+  return (
+    <ContentAccordion
+      customBarContent={barContent()}
+      customExpandedContent={expandedContent()}
+      accordionTheme={"blue"}
+      initialExpanded={true}
+    />
+  )
+}
+
 export const blueThemeBasicDisabled = () => {
   return (
     <ContentAccordion

package/src/page_components/listing/ContentAccordion.tsx

@@ -8,6 +8,7 @@ interface ContentAccordionProps {
   disableAccordion?: boolean
   accordionTheme?: AccordionTheme
   barClass?: string
+  initialExpanded?: boolean
 }
 
 export type AccordionTheme = "blue" | "gray"
@@ -17,7 +18,7 @@ export type AccordionTheme = "blue" | "gray"
  * Two existing themes under our design system are available
  */
 const ContentAccordion = (props: ContentAccordionProps) => {
-  const [accordionOpen, setAccordionOpen] = useState(false)
+  const [accordionOpen, setAccordionOpen] = useState(props.initialExpanded || false)
   const buttonRef = useRef<HTMLButtonElement>(null)
 
   const toggleTable = () => {
@@ -31,16 +32,16 @@ const ContentAccordion = (props: ContentAccordionProps) => {
     <div className={`mb-4`}>
       <button
         onClick={toggleTable}
-        className={`w-full text-left ${props.disableAccordion && "cursor-default"}`}
+        className={`w-full text-left ${props.disableAccordion ? "cursor-default" : ""}`}
         ref={buttonRef}
         aria-expanded={accordionOpen}
         data-test-id={"content-accordion-button"}
       >
         <div
-          className={`flex justify-between ${props.barClass} ${
-            props.accordionTheme === "blue" && "accordion-blue-theme__bar"
-          } ${props.accordionTheme === "gray" && "accordion-gray-theme__bar"} ${
-            accordionOpen && "accordion-open"
+          className={`flex justify-between ${props.barClass ? props.barClass : ""} ${
+            props.accordionTheme === "blue" ? "accordion-blue-theme__bar" : ""
+          } ${props.accordionTheme === "gray" ? "accordion-gray-theme__bar" : ""} ${
+            accordionOpen ? "accordion-open" : ""
           }`}
         >
           {props.customBarContent}