fix: make pill style on listing card optional (bloom-housing#3088)

housingbayarea · Oct 6, 2022 · a5a14d7 · a5a14d7
1 parent 50ff75b
commit a5a14d7
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 9 deletions.
diff --git a/sites/public/lib/helpers.tsx b/sites/public/lib/helpers.tsx
@@ -114,9 +114,17 @@ export const getListings = (listings) => {
 
   const generateTableSubHeader = (listing) => {
     if (listing.listingAvailability === ListingAvailability.availableUnits) {
-      return { content: t("listings.availableUnits"), styleType: AppearanceStyleType.success }
+      return {
+        content: t("listings.availableUnits"),
+        styleType: AppearanceStyleType.success,
+        isPillType: true,
+      }
     } else if (listing.listingAvailability === ListingAvailability.openWaitlist) {
-      return { content: t("listings.waitlist.open"), styleType: AppearanceStyleType.primary }
+      return {
+        content: t("listings.waitlist.open"),
+        styleType: AppearanceStyleType.primary,
+        isPillType: true,
+      }
     }
     return null
   }

diff --git a/ui-components/src/page_components/listing/ListingCard.stories.tsx b/ui-components/src/page_components/listing/ListingCard.stories.tsx
@@ -110,6 +110,22 @@ export const WithHeaders = () => {
   )
 }
 
+export const WithPillHeader = () => {
+  return (
+    <ListingCard
+      imageCardProps={{ ...standardImageCardProps, href: undefined }}
+      tableProps={{ ...standardTableProps }}
+      footerButtons={[{ text: "See Details", href: "see-details-link", ariaHidden: true }]}
+      contentProps={{
+        contentHeader: { content: "Optional content header", href: "listing-link" },
+        contentSubheader: { content: "Optional content subheader" },
+        tableHeader: { content: "Optional table header", isPillType: true },
+        tableSubheader: { content: "Optional table subheader" },
+      }}
+    />
+  )
+}
+
 export const WithTags = () => {
   return (
     <ListingCard
@@ -361,8 +377,8 @@ export const detroitStyle = () => {
           tableProps={{ ...standardTableProps }}
           footerButtons={[{ text: "See Details", href: "see-details-link" }]}
           contentProps={{
-            contentHeader: { text: "Optional content header" },
-            contentSubheader: { text: "Optional content subheader" },
+            contentHeader: { content: "Optional content header" },
+            contentSubheader: { content: "Optional content subheader" },
           }}
           cardTags={[
             { text: "Tag 1 text" },

diff --git a/ui-components/src/page_components/listing/ListingCard.tsx b/ui-components/src/page_components/listing/ListingCard.tsx
@@ -17,6 +17,7 @@ export interface ListingCardHeader {
   href?: string
   customClass?: string
   styleType?: AppearanceStyleType
+  isPillType?: boolean
 }
 
 export interface ListingFooterButton {
@@ -76,11 +77,10 @@ const ListingCard = (props: ListingCardProps) => {
     header: ListingCardHeader | undefined,
     priority: number,
     styleType?: HeaderType,
-    pillStyle?: boolean,
     customClass?: string
   ) => {
     if (header && header.content) {
-      if (pillStyle) {
+      if (header.isPillType) {
         return (
           <Tag
             className="listings-pill_header"
@@ -112,8 +112,8 @@ const ListingCard = (props: ListingCardProps) => {
   const getContentHeader = () => {
     return (
       <div className="listings-row_headers">
-        {getHeader(contentProps?.contentHeader, 2, "cardHeader", false, "order-1")}
-        {getHeader(contentProps?.contentSubheader, 3, "cardSubheader", false, "order-2")}
+        {getHeader(contentProps?.contentHeader, 2, "cardHeader", "order-1")}
+        {getHeader(contentProps?.contentSubheader, 3, "cardSubheader", "order-2")}
         {cardTags && cardTags?.length > 0 && (
           <div className="listings-row_tags">
             {cardTags?.map((cardTag, index) => {
@@ -145,7 +145,7 @@ const ListingCard = (props: ListingCardProps) => {
               <hr className={"mb-2"} />
             )}
           <div className={"listings-row_headers"}>
-            {getHeader(contentProps?.tableHeader, 4, "tableHeader", true)}
+            {getHeader(contentProps?.tableHeader, 4, "tableHeader")}
             {getHeader(contentProps?.tableSubheader, 5, "tableSubheader")}
           </div>
           {children && children}