From 3e8db228ba981592c63e349a938e1643cfbd1318 Mon Sep 17 00:00:00 2001
From: cade-exygy <131277283+cade-exygy@users.noreply.github.com>
Date: Mon, 5 Feb 2024 16:40:00 -0600
Subject: [PATCH] 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
---
 .../listing/ListingCard.stories.tsx           | 16 ++++++++++++++++
 src/page_components/listing/ListingCard.tsx   | 19 ++++++++++++++-----
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/page_components/listing/ListingCard.stories.tsx b/src/page_components/listing/ListingCard.stories.tsx
index 53b1bd9..a5fbbed 100644
--- 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
index 0bb692c..6f9aef9 100644
--- 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) && (