feat: new subheader prop and custom class names on ListingCard

CHANGELOG.md

@@ -87,6 +87,8 @@ All notable changes to this project will be documented in this file. The format
     - **Breaking Change**: Removed listing prop and replaced with a set not dependent on data model
   - Removed business logic from Apply, Waitlist components ([#1819](https://github.com/bloom-housing/bloom/pull/1819)) (Emily Jablonski)
     - **Breaking Change**: Removed existing props from both components and replaced with a set not dependent on data model, split "Apply" component into two new components GetApplication and Submit Application, removed ApplicationSection components
+  - Allow for a style-able subheader to be added to ListingCard ([#1880](https://github.com/bloom-housing/bloom/pull/1880)) (Emily Jablonski)
+    - **Breaking Change**: Moved tableHeader prop into new tableHeaderProps object
 
 ### Backend
 

sites/public/pages/listings.tsx

@@ -112,7 +112,9 @@ const getListings = (listings) => {
           cellClassName: "px-5 py-3",
         }}
         seeDetailsLink={`/listing/${listing.id}/${listing.urlSlug}`}
-        tableHeader={listing.showWaitlist ? t("listings.waitlist.open") : null}
+        tableHeaderProps={{
+          tableHeader: listing.showWaitlist ? t("listings.waitlist.open") : null,
+        }}
       />
     )
   })

ui-components/__tests__/page_components/ListingCard.test.tsx

@@ -27,7 +27,10 @@ describe("<ListingCard>", () => {
           cellClassName: "px-5 py-3",
         }}
         seeDetailsLink={`see-details-link`}
-        tableHeader={"optional table header"}
+        tableHeaderProps={{
+          tableHeader: "optional table header",
+          tableSubHeader: "optional table subheader",
+        }}
       />
     )
     expect(getByText("subtitle")).toBeTruthy()
@@ -41,5 +44,6 @@ describe("<ListingCard>", () => {
     expect(getAllByText("cellB")).toBeTruthy()
     expect(getAllByText("cellC")).toBeTruthy()
     expect(getAllByText("optional table header")).toBeTruthy()
+    expect(getAllByText("optional table subheader")).toBeTruthy()
   })
 })

ui-components/src/page_components/listing/ListingCard.scss

@@ -42,6 +42,13 @@
   @apply mb-2;
 }
 
+.listings-row_subtitle {
+  @apply font-alt-sans;
+  @apply text-gray-800;
+  @apply text-sm;
+  @apply mb-3;
+}
+
 .listings-row_table {
   @apply mb-4;
 }

ui-components/src/page_components/listing/ListingCard.stories.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { ListingCard } from "./ListingCard"
+
+export default {
+  title: "Listing/ListingCard",
+}
+
+export const BasicCard = () => {
+  return (
+    <ListingCard
+      imageCardProps={{
+        imageUrl: "imageURL",
+        subtitle: "subtitle",
+        title: "title",
+        href: "listing-link",
+        tagLabel: "reserved community tag",
+        statuses: [{ content: "status content" }],
+      }}
+      tableProps={{
+        headers: {
+          unitType: "unit type",
+          minimumIncome: "minimum income",
+          rent: "rent",
+        },
+        data: [{ data: [{ unitType: "cellA", minimumIncome: "cellB", rent: "cellC" }] }],
+        responsiveCollapse: true,
+        cellClassName: "px-5 py-3",
+      }}
+      seeDetailsLink={`see-details-link`}
+      tableHeaderProps={{
+        tableHeader: "optional table header",
+        tableSubHeader: "optional table subheader",
+      }}
+    />
+  )
+}

ui-components/src/page_components/listing/ListingCard.tsx

@@ -5,30 +5,55 @@ import { GroupedTable, GroupedTableProps } from "../../tables/GroupedTable"
 import { t } from "../../helpers/translator"
 import "./ListingCard.scss"
 
+export interface ListingCardHeaderProps {
+  tableHeader?: string
+  tableHeaderClass?: string
+  tableSubHeader?: string
+  tableSubHeaderClass?: string
+}
 export interface ListingCardProps {
   imageCardProps: ImageCardProps
-  seeDetailsLink: string
-  tableHeader: string
+  seeDetailsLink?: string
+  tableHeaderProps?: ListingCardHeaderProps
   tableProps: GroupedTableProps
   detailsLinkClass?: string
 }
 
 const ListingCard = (props: ListingCardProps) => {
-  const { imageCardProps, tableProps, detailsLinkClass } = props
+  const { imageCardProps, tableProps, detailsLinkClass, tableHeaderProps } = props
 
   return (
     <article className="listings-row">
       <div className="listings-row_figure">
         <ImageCard {...imageCardProps} />
       </div>
       <div className="listings-row_content">
-        {props.tableHeader && <h4 className="listings-row_title">{props.tableHeader}</h4>}
+        {tableHeaderProps?.tableHeader && (
+          <h4
+            className={`listings-row_title ${
+              tableHeaderProps.tableHeaderClass && tableHeaderProps.tableHeaderClass
+            }`}
+          >
+            {tableHeaderProps?.tableHeader}
+          </h4>
+        )}
+        {tableHeaderProps?.tableSubHeader && (
+          <h5
+            className={`listings-row_subtitle ${
+              tableHeaderProps.tableSubHeaderClass && tableHeaderProps.tableSubHeaderClass
+            }`}
+          >
+            {tableHeaderProps?.tableSubHeader}
+          </h5>
+        )}
         <div className="listings-row_table">
           {tableProps.data && <GroupedTable {...tableProps} />}
         </div>
-        <LinkButton className={detailsLinkClass} href={props.seeDetailsLink}>
-          {t("t.seeDetails")}
-        </LinkButton>
+        {props.seeDetailsLink && (
+          <LinkButton className={detailsLinkClass} href={props.seeDetailsLink}>
+            {t("t.seeDetails")}
+          </LinkButton>
+        )}
       </div>
     </article>
   )