@bloom-housing/ui-components 5.1.1-alpha.29 → 5.1.1-alpha.30

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.1.1-alpha.30](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.29...@bloom-housing/ui-components@5.1.1-alpha.30) (2022-09-26)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
 ## [5.1.1-alpha.29](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.28...@bloom-housing/ui-components@5.1.1-alpha.29) (2022-09-23)
 
 **Note:** Version bump only for package @bloom-housing/ui-components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "5.1.1-alpha.29",
+  "version": "5.1.1-alpha.30",
   "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",
@@ -110,5 +110,5 @@
     "ts-jest": "^26.4.1",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "1dae8aeb6a65694cfd7c0637a7164e75a1810f87"
+  "gitHead": "af9fb2b897054ec661504b66af92b9b0b4992d1d"
 }

package/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",

package/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);
+}

package/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}

package/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);
+  }
 }

package/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>