@bloom-housing/ui-components 5.0.1-alpha.5 → 5.0.1-alpha.8

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.0.1-alpha.8](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.0.1-alpha.7...@bloom-housing/ui-components@5.0.1-alpha.8) (2022-07-06)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [5.0.1-alpha.7](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.0.1-alpha.6...@bloom-housing/ui-components@5.0.1-alpha.7) (2022-07-02)
+
+
+### Bug Fixes
+
+* switch back to padding for image card leader ([#2851](https://github.com/bloom-housing/bloom/issues/2851)) ([c3fde4a](https://github.com/bloom-housing/bloom/commit/c3fde4adbff2bd116c4acaf39f609d3c0ed0638f))
+
+
+
+
+
+## [5.0.1-alpha.6](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.0.1-alpha.5...@bloom-housing/ui-components@5.0.1-alpha.6) (2022-06-29)
+
+
+### Bug Fixes
+
+* hide apply section if there is no data ([#2846](https://github.com/bloom-housing/bloom/issues/2846)) ([5fcaf58](https://github.com/bloom-housing/bloom/commit/5fcaf58acc8cc083c738f53a23beba4e567b2994))
+
+
+
+
+
 ## [5.0.1-alpha.5](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.0.1-alpha.4...@bloom-housing/ui-components@5.0.1-alpha.5) (2022-06-27)
 
 

package/index.ts

@@ -82,6 +82,7 @@ export * from "./src/navigation/LanguageNav"
 export * from "./src/navigation/ProgressNav"
 export * from "./src/navigation/TabNav"
 export * from "./src/navigation/Tabs"
+export * from "./src/navigation/Breadcrumbs"
 
 /* Notifications */
 export * from "./src/notifications/AlertBox"
@@ -128,6 +129,7 @@ export * from "./src/page_components/sign-in/FormSignInMFACode"
 export * from "./src/page_components/sign-in/FormSignInAddPhone"
 export * from "./src/page_components/sign-in/FormSignInErrorBox"
 export * from "./src/page_components/forgot-password/FormForgotPassword"
+export * from "./src/page_components/NavigationHeader"
 
 /* Responsive Wrappers */
 export * from "./src/sections/ResponsiveWrappers"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "5.0.1-alpha.5",
+  "version": "5.0.1-alpha.8",
   "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",
@@ -108,5 +108,5 @@
     "ts-jest": "^26.4.1",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "dead9ad5ace1c611522db9b0185da8121da2adf6"
+  "gitHead": "2a5238a1aa1421385d9a1473e5526f54efefe366"
 }

package/src/blocks/ImageCard.scss

@@ -61,7 +61,7 @@
 
   @media (min-width: $screen-sm) {
     width: var(--bloom-width-2-3rd);
-    margin-block-start: var(--bloom-s8);
-    margin-inline-end: var(--bloom-s8);
+    padding-block-start: var(--bloom-s8);
+    padding-inline-end: var(--bloom-s8);
   }
 }

package/src/headers/PageHeader.scss

@@ -3,6 +3,7 @@
   --background-color: var(--bloom-color-primary-lighter);
   --border-color: var(--bloom-color-gray-450);
   --text-color: inherit;
+  --text-font-family: var(--bloom-font-serif);
   --inverse-background-color: var(--bloom-color-primary-darker);
   --inverse-border-color: var(--bloom-color-primary);
   --inverse-text-color: var(--bloom-color-white);
@@ -27,13 +28,25 @@
 }
 
 .page-header__group {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   padding: 0 var(--bloom-s5);
   margin: auto;
   max-width: var(--bloom-width-5xl);
+
+  @media (min-width: $screen-sm) {
+    align-items: flex-start;
+  }
+}
+
+.page-header__breadcrumbs {
+  margin-bottom: 10px;
 }
 
 .page-header__title {
   text-align: center;
+  font-family: var(--text-font-family);
 
   @media (min-width: $screen-md) {
     font-size: var(--title-font-size);
@@ -42,6 +55,6 @@
 }
 
 .page-header__lead {
-  margin: auto;
+  font-family: var(--text-font-family);
   max-width: var(--bloom-width-5xl);
 }

package/src/headers/PageHeader.tsx

@@ -8,6 +8,7 @@ export interface PageHeaderProps {
   subtitle?: string
   children?: React.ReactNode
   tabNav?: React.ReactNode
+  breadcrumbs?: React.ReactNode
 }
 
 const PageHeader = (props: PageHeaderProps) => {
@@ -18,8 +19,10 @@ 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.title && (
-          <h1 data-test-id="page_header" className="page-header__title">
+          <h1 data-test-id="page-header" className="page-header__title">
             {props.title}
           </h1>
         )}

package/src/navigation/TabNav.scss

@@ -11,14 +11,17 @@
 .tab-nav__tab {
   a {
     @apply block;
-    @apply px-6;
-    @apply py-3;
+    @apply px-6 pb-3;
     @apply border-b-2;
     @apply text-gray-700;
     @apply items-center;
     border-color: transparent;
     line-height: 1.5rem;
 
+    @screen md {
+      @apply pb-3;
+    }
+
     &:hover {
       @apply text-gray-900;
       @apply border-gray-450;

package/src/page_components/NavigationHeader.scss

@@ -0,0 +1,3 @@
+.navigation-header {
+  --text-font-family: var(--bloom-font-alt-sans);
+}

package/src/page_components/NavigationHeader.tsx

@@ -0,0 +1,95 @@
+import React, { useMemo, useContext } from "react"
+import { PageHeader, TabNav, TabNavItem, AppearanceSizeType } from "@bloom-housing/ui-components"
+import { NavigationContext } from "../config/NavigationContext"
+import "./NavigationHeader.scss"
+
+type NavigationHeaderProps = {
+  className?: string
+  title: React.ReactNode
+  listingId?: string
+  tabs?: NavigationHeaderTabs
+  breadcrumbs?: React.ReactNode
+  children?: React.ReactChild
+}
+
+type NavigationHeaderTabs = {
+  show?: boolean
+  flagsQty?: number
+  listingLabel: string
+  applicationsLabel: string
+  flagsLabel: string
+}
+
+type NavigationHeaderTabsElement = {
+  label: string
+  path: string
+  content: React.ReactNode | undefined
+}
+
+const NavigationHeader = ({
+  className,
+  title,
+  listingId,
+  tabs,
+  children,
+  breadcrumbs,
+}: NavigationHeaderProps) => {
+  const navigation = useContext(NavigationContext)
+  const currentPath = navigation.router.asPath
+
+  const tabNavElements = useMemo(() => {
+    const elements: NavigationHeaderTabsElement[] = [
+      {
+        label: tabs?.listingLabel || "",
+        path: `/listings/${listingId}`,
+        content: undefined,
+      },
+      {
+        label: tabs?.applicationsLabel || "",
+        path: `/listings/${listingId}/applications`,
+        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])
+
+  const tabNavItems = useMemo(() => {
+    return (
+      <TabNav className="relative -bottom-8 md:-bottom-10">
+        {tabNavElements.map((tab) => (
+          <TabNavItem
+            key={tab.path}
+            tagContent={tab?.content}
+            current={tab.path === currentPath}
+            href={tab.path}
+            tagSize={AppearanceSizeType.small}
+          >
+            {tab.label}
+          </TabNavItem>
+        ))}
+      </TabNav>
+    )
+  }, [currentPath, tabNavElements])
+
+  return (
+    <PageHeader
+      className={`navigation-header ${className ?? ""}`}
+      title={title}
+      tabNav={tabs?.show ? tabNavItems : null}
+      breadcrumbs={breadcrumbs}
+    >
+      {children}
+    </PageHeader>
+  )
+}
+
+export { NavigationHeader as default, NavigationHeader }

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

@@ -36,11 +36,16 @@ export interface ApplicationsProps {
 }
 /** Displays information regarding how to apply, including an online application link button, paper application downloads, and a paper application pickup address */
 const GetApplication = (props: ApplicationsProps) => {
+  const showSection =
+    props.onlineApplicationURL ||
+    (props.applicationsOpen && props.paperMethod && !!props.paperApplications?.length)
   const [showDownload, setShowDownload] = useState(false)
   const toggleDownload = () => setShowDownload(!showDownload)
 
+  if (!showSection) return null
+
   return (
-    <section className="aside-block">
+    <section className="aside-block" data-test-id="get-application-section">
       <h2 className="text-caps-underline">{t("listings.apply.howToApply")}</h2>
       {!props.applicationsOpen && (
         <p className="mb-5 text-gray-700">
@@ -67,7 +72,8 @@ const GetApplication = (props: ApplicationsProps) => {
           )}
         </>
       )}
-      {props.applicationsOpen && props.paperMethod && (
+
+      {props.applicationsOpen && props.paperMethod && !!props.paperApplications?.length && (
         <>
           {props.onlineApplicationURL && <OrDivider bgColor="white" />}
           <div className="text-serif-lg">{t("listings.apply.getAPaperApplication")}</div>