@bloom-housing/ui-components 4.2.2-alpha.18 → 4.2.2-alpha.20

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.2.2-alpha.20](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.19...@bloom-housing/ui-components@4.2.2-alpha.20) (2022-04-29)
+
+
+### Bug Fixes
+
+* ux updates for new listing card design ([#2687](https://github.com/bloom-housing/bloom/issues/2687)) ([c8814ae](https://github.com/bloom-housing/bloom/commit/c8814ae57b62fa6f932017bb70d47663b09fca1a))
+
+
+
+
+
+## [4.2.2-alpha.19](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.18...@bloom-housing/ui-components@4.2.2-alpha.19) (2022-04-28)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
 ## [4.2.2-alpha.18](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.17...@bloom-housing/ui-components@4.2.2-alpha.18) (2022-04-28)
 
 **Note:** Version bump only for package @bloom-housing/ui-components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "4.2.2-alpha.18",
+  "version": "4.2.2-alpha.20",
   "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",
@@ -102,5 +102,5 @@
     "tailwindcss": "2.2.10",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "666ab8967e19eb9d024ab8a8af1274100221c71f"
+  "gitHead": "f1aaac0be6d151f1971cbb19e4128976ecec1b6f"
 }

package/src/global/text.scss

@@ -145,7 +145,8 @@ h1.title {
   @apply font-semibold;
   @apply text-blue-700;
   @apply text-3xl;
-  @apply mb-1;
+  @apply mb-3;
+  @apply leading-tight;
 }
 
 .card-subheader {

package/src/page_components/listing/AdditionalFees.tsx

@@ -1,49 +1,56 @@
 import * as React from "react"
-import { t } from "../../helpers/translator"
 
 export interface AdditionalFeesProps {
-  depositMin?: string
-  depositMax?: string
+  /** The application fee for the property, rendered in the first block */
   applicationFee?: string
-  costsNotIncluded?: string
-  depositHelperText?: string
-}
-
-const AdditionalFees = (props: AdditionalFeesProps) => {
-  if (!props.depositMin && !props.depositMax && !props.applicationFee && !props.costsNotIncluded) {
-    return <></>
+  /** Costs not included in the deposit or application fee, rendered below both blocks */
+  costsNotIncluded?: string | React.ReactNode
+  /** The deposit amount for the property, rendered in the second block */
+  deposit?: string
+  strings: {
+    sectionHeader: string
+    deposit?: string
+    depositSubtext?: string[]
+    applicationFee?: string
+    applicationFeeSubtext?: string[]
   }
+}
 
-  const getDeposit = () => {
-    const min = props.depositMin
-    const max = props.depositMax
-    if (min && max && min !== max) {
-      return `$${min} – $${max}`
-    } else if (min) return `$${min}`
-    else return `$${max}`
-  }
+const AdditionalFees = ({
+  deposit,
+  applicationFee,
+  costsNotIncluded,
+  strings,
+}: AdditionalFeesProps) => {
   return (
     <div className="info-card bg-gray-100 border-0">
-      <p className="info-card__title">{t("listings.sections.additionalFees")}</p>
+      <p className="info-card__title mb-2">{strings.sectionHeader}</p>
       <div className="info-card__columns text-sm">
-        {props.applicationFee && (
-          <div className="info-card__column">
-            <div className="text-base">{t("listings.applicationFee")}</div>
-            <div className="text-xl font-bold">${props.applicationFee}</div>
-            <div>{t("listings.applicationPerApplicantAgeDescription")}</div>
-            <div>{t("listings.applicationFeeDueAt")}</div>
+        {applicationFee && (
+          <div className={`info-card__column ${deposit && "mr-2"}`}>
+            <div className="text-base">{strings.applicationFee}</div>
+            <div className="text-xl font-bold">{applicationFee}</div>
+            {strings.applicationFeeSubtext?.map((appFeeSubtext, index) => (
+              <div key={index}>{appFeeSubtext}</div>
+            ))}
           </div>
         )}
-        {(props.depositMin || props.depositMax) && (
-          <div className="info-card__column">
-            <div className="text-base">{t("t.deposit")}</div>
-            <div className="text-xl font-bold">{getDeposit()}</div>
-            {props.depositHelperText && <div>{props.depositHelperText}</div>}
+        {deposit && (
+          <div className={`info-card__column ${applicationFee && "ml-2"}`}>
+            <div className="text-base">{strings.deposit}</div>
+            <div className="text-xl font-bold">{deposit}</div>
+            {strings.depositSubtext?.map((depositSubtext, index) => (
+              <div key={index}>{depositSubtext}</div>
+            ))}
           </div>
         )}
       </div>
 
-      {props.costsNotIncluded && <p className="text-sm mt-6">{props.costsNotIncluded}</p>}
+      {costsNotIncluded && (
+        <p className={`text-sm mt-2 ${(applicationFee || deposit) && `mt-6`}`}>
+          {costsNotIncluded}
+        </p>
+      )}
     </div>
   )
 }

package/src/page_components/listing/ListingCard.scss

@@ -19,6 +19,7 @@
 .listings-row_figure {
   @apply w-full;
   @apply p-3;
+  @apply pb-0;
 
   @screen lg {
     @apply w-6/12;
@@ -32,6 +33,17 @@
   @screen lg {
     @apply w-6/12;
   }
+
+  .listings-row_headers {
+    @apply flex;
+    @apply flex-col;
+    @apply items-center;
+    @apply text-center;
+    @screen md {
+      @apply items-start;
+      @apply text-left;
+    }
+  }
 }
 
 .listings-row_table {

package/src/page_components/listing/ListingCard.tsx

@@ -122,8 +122,10 @@ const ListingCard = (props: ListingCardProps) => {
             (contentProps.contentHeader?.text || contentProps?.contentSubheader?.text) && (
               <hr className={"mb-2"} />
             )}
-          {getHeader(contentProps?.tableHeader, 4, "tableHeader")}
-          {getHeader(contentProps?.tableSubheader, 5, "tableSubheader")}
+          <div className={"listings-row_headers"}>
+            {getHeader(contentProps?.tableHeader, 4, "tableHeader")}
+            {getHeader(contentProps?.tableSubheader, 5, "tableSubheader")}
+          </div>
           {children && children}
           {tableProps && (tableProps.data || tableProps.stackedData) && (
             <>
@@ -159,7 +161,7 @@ const ListingCard = (props: ListingCardProps) => {
         <ImageCard {...imageCardProps} />
       </div>
       <div className="listings-row_content">
-        <div>{getContentHeader()}</div>
+        <div className={"listings-row_headers"}>{getContentHeader()}</div>
         {getContent()}
       </div>
     </article>