fix: allow subheader to return passed content without wrap (#147)

* fix: prevent wrap of elements with p tag * fix: contentSubheader allows return of passed element
bloom-housing · Feb 5, 2024 · 3e8db22 · 3e8db22
1 parent c09c363
commit 3e8db22
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 5 deletions.
diff --git a/src/page_components/listing/ListingCard.stories.tsx b/src/page_components/listing/ListingCard.stories.tsx
@@ -110,6 +110,22 @@ export const WithHeaders = () => {
   )
 }
 
+export const WithElementSubHeader = () => {
+  return (
+    <ListingCard
+      imageCardProps={{ ...standardImageCardProps, href: undefined }}
+      tableProps={{ ...standardTableProps }}
+      footerButtons={[{ text: "See Details", href: "see-details-link", ariaHidden: true }]}
+      contentProps={{
+        contentHeader: { content: "Header", href: "listing-link" },
+        contentSubheader: { content: "Optional content subheader" },
+        tableHeader: { content: "Table Header with list subheader" },
+        tableSubheader: { content: <ul className="text__small-normal list-disc" ><li>Test</li><li>Test 2</li></ul>, isElement: true },
+      }}
+    />
+  )
+}
+
 export const WithPillHeader = () => {
   return (
     <ListingCard

diff --git a/src/page_components/listing/ListingCard.tsx b/src/page_components/listing/ListingCard.tsx
@@ -14,6 +14,7 @@ interface ListingCardTableProps extends StandardTableProps, StackedTableProps {}
 
 export interface ListingCardHeader {
   content: string | React.ReactNode
+  isElement?: boolean
   href?: string
   customClass?: string
   styleType?: AppearanceStyleType
@@ -115,6 +116,14 @@ const ListingCard = (props: ListingCardProps) => {
     }
   }
 
+  const getTableSubHeader = (subheader: ListingCardHeader, returnElement?: boolean) => {
+    return React.isValidElement(subheader.content) && returnElement ? (
+      subheader.content
+    ) : (
+      <p className="text__small-normal">{subheader?.content}</p>
+    )
+  }
+
   const getContentHeader = () => {
     return (
       <div className="listings-row_headers">
@@ -128,7 +137,6 @@ const ListingCard = (props: ListingCardProps) => {
         {contentProps?.contentSubheader && (
           <p className="card-subheader order-2">{contentProps?.contentSubheader?.content}</p>
         )}
-
         {cardTags && cardTags?.length > 0 && (
           <div className="listings-row_tags">
             {cardTags?.map((cardTag, index) => {
@@ -171,10 +179,11 @@ const ListingCard = (props: ListingCardProps) => {
                 contentProps?.tableHeader?.priority ?? 3,
                 "smallWeighted"
               )}
-
-            {contentProps?.tableSubheader?.content && (
-              <p className="text__small-normal">{contentProps?.tableSubheader?.content}</p>
-            )}
+            {contentProps?.tableSubheader &&
+              getTableSubHeader(
+                contentProps?.tableSubheader,
+                contentProps?.tableSubheader?.isElement
+              )}
           </div>
           {children && children}
           {tableProps && (tableProps.data || tableProps.stackedData) && (