3030/what to expect visual updates

shared-helpers/src/summaryTables.tsx

@@ -13,7 +13,8 @@ export const unitSummariesTable = (
   listingAvailability: ListingAvailability
 ): StandardTableData => {
   const unitSummaries = summaries?.map((unitSummary) => {
-    const unitPluralization = unitSummary.totalAvailable == 1 ? t("t.unit") : t("t.units")
+    const unitPluralization =
+      unitSummary.totalAvailable == 1 ? t("listings.vacantUnit") : t("listings.vacantUnits")
     const minIncome =
       unitSummary.minIncomeRange.min == unitSummary.minIncomeRange.max ? (
         <strong>{unitSummary.minIncomeRange.min}</strong>

sites/public/lib/helpers.tsx

@@ -7,7 +7,13 @@ import {
   ListingStatus,
   ListingAvailability,
 } from "@bloom-housing/backend-core/types"
-import { t, ListingCard, ApplicationStatusType, StatusBarType } from "@bloom-housing/ui-components"
+import {
+  t,
+  ListingCard,
+  ApplicationStatusType,
+  StatusBarType,
+  AppearanceStyleType,
+} from "@bloom-housing/ui-components"
 import { imageUrlFromListing, getSummariesTable } from "@bloom-housing/shared-helpers"
 
 export const emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
@@ -108,9 +114,9 @@ export const getListings = (listings) => {
 
   const generateTableSubHeader = (listing) => {
     if (listing.listingAvailability === ListingAvailability.availableUnits) {
-      return { content: t("listings.availableUnits") }
+      return { content: t("listings.availableUnits"), styleType: AppearanceStyleType.success }
     } else if (listing.listingAvailability === ListingAvailability.openWaitlist) {
-      return { content: t("listings.waitlist.open") }
+      return { content: t("listings.waitlist.open"), styleType: AppearanceStyleType.primary }
     }
     return null
   }

sites/public/src/ListingView.tsx

@@ -403,8 +403,7 @@ export const ListingView = (props: ListingProps) => {
     ]
     const unitRow = [
       {
-        text:
-          listing.unitsAvailable === 1 ? t("listings.availableUnit") : t("listings.availableUnits"),
+        text: listing.unitsAvailable === 1 ? t("listings.vacantUnit") : t("listings.vacantUnits"),
         amount: listing.unitsAvailable,
         emphasized: true,
       },
@@ -418,7 +417,7 @@ export const ListingView = (props: ListingProps) => {
           sectionTitle:
             listing.listingAvailability === ListingAvailability.openWaitlist
               ? t("listings.waitlist.isOpen")
-              : t("listings.availableUnits"),
+              : t("listings.vacantUnitsAvailable"),
           description:
             listing.listingAvailability === ListingAvailability.openWaitlist
               ? t("listings.waitlist.submitForWaitlist")

ui-components/src/locales/general.json

@@ -614,9 +614,12 @@
   "listings.apply.submitPaperNoDueDateNoPostMark": "%{developer} is not responsible for lost or delayed mail.",
   "listings.apply.submitPaperNoDueDatePostMark": "Applications must be received by the deadline. If sending by U.S. Mail, the application must be received by mail no later than %{postmarkReceivedByDate}. Applications received after %{postmarkReceivedByDate} via mail will not be accepted. %{developer} is not responsible for lost or delayed mail.",
   "listings.availableAndWaitlist": "Available Units & Open Waitlist",
-  "listings.availableUnitsDescription": "Applicants will be reviewed in order until all vacancies are filled.",
+  "listings.availableUnitsDescription": "Applicants will be reviewed in lottery rank order until all vacancies are filled.",
   "listings.availableUnitsAndWaitlist": "Available units and waitlist",
   "listings.availableUnitsAndWaitlistDesc": "Once applicants fill all available units, additional applicants will be placed on the waitlist for <span class='t-italic'>%{number} units</span>",
+  "listings.vacantUnit": "Vacant Unit",
+  "listings.vacantUnits": "Vacant Units",
+  "listings.vacantUnitsAvailable": "Vacant Units Available",
   "listings.availableUnit": "Available Unit",
   "listings.availableUnits": "Available Units",
   "listings.bath": "bath",

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

@@ -86,3 +86,7 @@
     margin-inline-start: var(--bloom-s1);
   }
 }
+.listings-pill_header {
+  margin-bottom: var(--bloom-s3);
+  margin-top: var(--bloom-s1);
+}

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

@@ -5,7 +5,7 @@ import { StackedTable, StackedTableProps } from "../../tables/StackedTable"
 import { StandardTable, StandardTableProps } from "../../tables/StandardTable"
 import { Heading, HeaderType } from "../../headers/Heading"
 import { Tag } from "../../text/Tag"
-import { AppearanceStyleType } from "../../global/AppearanceTypes"
+import { AppearanceShadeType, AppearanceStyleType } from "../../global/AppearanceTypes"
 import { Icon, IconFillColors } from "../../icons/Icon"
 import "./ListingCard.scss"
 import { NavigationContext } from "../../config/NavigationContext"
@@ -16,6 +16,7 @@ export interface CardHeader {
   content: string | React.ReactNode
   href?: string
   customClass?: string
+  styleType?: AppearanceStyleType
 }
 
 export interface FooterButton {
@@ -74,12 +75,26 @@ const ListingCard = (props: ListingCardProps) => {
   const getHeader = (
     header: CardHeader | undefined,
     priority: number,
-    style?: HeaderType,
+    styleType?: HeaderType,
+    pillStyle?: boolean,
     customClass?: string
   ) => {
     if (header && header.content) {
+      if (pillStyle) {
+        return (
+          <Tag
+            className="listings-pill_header"
+            pillStyle
+            capitalized
+            styleType={header.styleType}
+            shade={AppearanceShadeType.light}
+          >
+            {header.content}
+          </Tag>
+        )
+      }
       return (
-        <Heading priority={priority} style={style} className={customClass}>
+        <Heading priority={priority} style={styleType} className={customClass}>
           {header.href ? (
             <LinkComponent className="is-card-link" href={header.href}>
               {header.content}
@@ -97,8 +112,8 @@ const ListingCard = (props: ListingCardProps) => {
   const getContentHeader = () => {
     return (
       <div className="listings-row_headers">
-        {getHeader(contentProps?.contentHeader, 2, "cardHeader", "order-1")}
-        {getHeader(contentProps?.contentSubheader, 3, "cardSubheader", "order-2")}
+        {getHeader(contentProps?.contentHeader, 2, "cardHeader", false, "order-1")}
+        {getHeader(contentProps?.contentSubheader, 3, "cardSubheader", false, "order-2")}
         {cardTags && cardTags?.length > 0 && (
           <div className="listings-row_tags">
             {cardTags?.map((cardTag, index) => {
@@ -130,7 +145,7 @@ const ListingCard = (props: ListingCardProps) => {
               <hr className={"mb-2"} />
             )}
           <div className={"listings-row_headers"}>
-            {getHeader(contentProps?.tableHeader, 4, "tableHeader")}
+            {getHeader(contentProps?.tableHeader, 4, "tableHeader", true)}
             {getHeader(contentProps?.tableSubheader, 5, "tableSubheader")}
           </div>
           {children && children}

ui-components/src/text/Tag.scss

@@ -11,6 +11,8 @@
   --pill-font-weight: 600;
   --pill-text-transform: uppercase;
   --pill-letter-spacing: var(--bloom-letter-spacing-ultrawide);
+  --pill-capitalized-text-transform: capitalized;
+  --pill-capitalized-letter-spacing: var(--bloom-letter-spacing-wide);
 
   --small-pill-padding: var(--bloom-s1) var(--bloom-s3);
   --small-pill-font-size: var(--bloom-font-size-2xs);
@@ -129,4 +131,9 @@
     padding-block: var(--bloom-s2);
     padding-inline: var(--bloom-s4);
   }
+
+  &.is-capitalized {
+    text-transform: var(--pill-capitalized-text-transform);
+    letter-spacing: var(--pill-capitalized-letter-spacing);
+  }
 }

ui-components/src/text/Tag.tsx

@@ -5,6 +5,7 @@ import "./Tag.scss"
 export interface TagProps extends AppearanceProps {
   className?: string
   pillStyle?: boolean
+  capitalized?: boolean
   children: React.ReactNode
   fillContainer?: boolean
 }
@@ -14,6 +15,7 @@ export const Tag = (props: TagProps) => {
 
   if (props.pillStyle) tagClasses.push("is-pill")
   if (props.fillContainer) tagClasses.push("fill-container")
+  if (props.capitalized) tagClasses.push("is-capitalized")
   if (props.className) tagClasses.push(props.className)
 
   return <span className={tagClasses.join(" ")}>{props.children}</span>