From 744ec4e9a82c479a33e971dc739aac057ae6861c Mon Sep 17 00:00:00 2001 From: krzysztof ziecina Date: Wed, 14 Sep 2022 12:11:08 +0200 Subject: [PATCH 1/6] feat: change available units to vacant units --- ui-components/src/locales/general.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui-components/src/locales/general.json b/ui-components/src/locales/general.json index 12a1c1e639..2438ced1e4 100644 --- a/ui-components/src/locales/general.json +++ b/ui-components/src/locales/general.json @@ -617,8 +617,8 @@ "listings.availableUnitsDescription": "Applicants will be reviewed in 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 %{number} units", - "listings.availableUnit": "Available Unit", - "listings.availableUnits": "Available Units", + "listings.availableUnit": "Vacant Unit", + "listings.availableUnits": "Vacant Units", "listings.bath": "bath", "listings.browseListings": "Browse Listings", "listings.buildingImageAltText": "A picture of the building", From 0fac3a315c18081f272b0db9ce5e9723b71eb3b6 Mon Sep 17 00:00:00 2001 From: krzysztof ziecina Date: Wed, 14 Sep 2022 15:34:03 +0200 Subject: [PATCH 2/6] feat: show vacant units, open waitlist as pill tags in listings --- sites/public/lib/helpers.tsx | 12 ++++++++--- .../page_components/listing/ListingCard.scss | 4 ++++ .../page_components/listing/ListingCard.tsx | 21 ++++++++++++++++--- ui-components/src/text/Tag.scss | 7 +++++++ ui-components/src/text/Tag.tsx | 2 ++ 5 files changed, 40 insertions(+), 6 deletions(-) diff --git a/sites/public/lib/helpers.tsx b/sites/public/lib/helpers.tsx index d5549c20ea..12c16b83b4 100644 --- a/sites/public/lib/helpers.tsx +++ b/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"), style: AppearanceStyleType.success } } else if (listing.listingAvailability === ListingAvailability.openWaitlist) { - return { content: t("listings.waitlist.open") } + return { content: t("listings.waitlist.open"), style: AppearanceStyleType.primary } } return null } diff --git a/ui-components/src/page_components/listing/ListingCard.scss b/ui-components/src/page_components/listing/ListingCard.scss index 72b75c4bcb..d6a65c0d6c 100644 --- a/ui-components/src/page_components/listing/ListingCard.scss +++ b/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); +} diff --git a/ui-components/src/page_components/listing/ListingCard.tsx b/ui-components/src/page_components/listing/ListingCard.tsx index 140cc7b937..a0f06485d0 100644 --- a/ui-components/src/page_components/listing/ListingCard.tsx +++ b/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 + style?: AppearanceStyleType } export interface FooterButton { @@ -75,9 +76,23 @@ const ListingCard = (props: ListingCardProps) => { header: CardHeader | undefined, priority: number, style?: HeaderType, - customClass?: string + customClass?: string, + pillStyle?: boolean ) => { if (header && header.content) { + if (pillStyle) { + return ( + + {header.content} + + ) + } return ( {header.href ? ( @@ -130,7 +145,7 @@ const ListingCard = (props: ListingCardProps) => {
)}
- {getHeader(contentProps?.tableHeader, 4, "tableHeader")} + {getHeader(contentProps?.tableHeader, 4, "tableHeader", "", true)} {getHeader(contentProps?.tableSubheader, 5, "tableSubheader")}
{children && children} diff --git a/ui-components/src/text/Tag.scss b/ui-components/src/text/Tag.scss index 3b8788d82e..795c00d0dc 100644 --- a/ui-components/src/text/Tag.scss +++ b/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); + } } diff --git a/ui-components/src/text/Tag.tsx b/ui-components/src/text/Tag.tsx index f094d4af4b..e441f6f243 100644 --- a/ui-components/src/text/Tag.tsx +++ b/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 {props.children} From 1573310d462ad5224cc445a1c72795ff0da48082 Mon Sep 17 00:00:00 2001 From: krzysztof ziecina Date: Wed, 14 Sep 2022 15:47:00 +0200 Subject: [PATCH 3/6] feat: change units to vacant units in summary table --- shared-helpers/src/summaryTables.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/shared-helpers/src/summaryTables.tsx b/shared-helpers/src/summaryTables.tsx index 68cb8afaf3..af70f717d4 100644 --- a/shared-helpers/src/summaryTables.tsx +++ b/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.availableUnit") : t("listings.availableUnits") const minIncome = unitSummary.minIncomeRange.min == unitSummary.minIncomeRange.max ? ( {unitSummary.minIncomeRange.min} From 274132fbddaa1de37b733667975a570630bc69ad Mon Sep 17 00:00:00 2001 From: krzysztof ziecina Date: Thu, 15 Sep 2022 14:26:51 +0200 Subject: [PATCH 4/6] feat: update translations to use new key that refers to vacant units --- shared-helpers/src/summaryTables.tsx | 2 +- sites/public/src/ListingView.tsx | 5 ++--- ui-components/src/locales/general.json | 9 ++++++--- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/shared-helpers/src/summaryTables.tsx b/shared-helpers/src/summaryTables.tsx index af70f717d4..e6f8a7d22b 100644 --- a/shared-helpers/src/summaryTables.tsx +++ b/shared-helpers/src/summaryTables.tsx @@ -14,7 +14,7 @@ export const unitSummariesTable = ( ): StandardTableData => { const unitSummaries = summaries?.map((unitSummary) => { const unitPluralization = - unitSummary.totalAvailable == 1 ? t("listings.availableUnit") : t("listings.availableUnits") + unitSummary.totalAvailable == 1 ? t("listings.vacantUnit") : t("listings.vacantUnits") const minIncome = unitSummary.minIncomeRange.min == unitSummary.minIncomeRange.max ? ( {unitSummary.minIncomeRange.min} diff --git a/sites/public/src/ListingView.tsx b/sites/public/src/ListingView.tsx index 8ea96901cf..84ba8b2de8 100644 --- a/sites/public/src/ListingView.tsx +++ b/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") diff --git a/ui-components/src/locales/general.json b/ui-components/src/locales/general.json index 2438ced1e4..e0c23390bd 100644 --- a/ui-components/src/locales/general.json +++ b/ui-components/src/locales/general.json @@ -614,11 +614,14 @@ "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 %{number} units", - "listings.availableUnit": "Vacant Unit", - "listings.availableUnits": "Vacant Units", + "listings.vacantUnit": "Vacant Unit", + "listings.vacantUnits": "Vacant Units", + "listings.vacantUnitsAvailable": "Vacant Units Available", + "listings.availableUnit": "Available Unit", + "listings.availableUnits": "Available Units", "listings.bath": "bath", "listings.browseListings": "Browse Listings", "listings.buildingImageAltText": "A picture of the building", From 7635e56ade5529e4251f75197817459e4b3076a9 Mon Sep 17 00:00:00 2001 From: krzysztof ziecina Date: Thu, 15 Sep 2022 14:33:11 +0200 Subject: [PATCH 5/6] feat: use customClass as last prop in getHeader function --- .../src/page_components/listing/ListingCard.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/ui-components/src/page_components/listing/ListingCard.tsx b/ui-components/src/page_components/listing/ListingCard.tsx index a0f06485d0..19a459d44b 100644 --- a/ui-components/src/page_components/listing/ListingCard.tsx +++ b/ui-components/src/page_components/listing/ListingCard.tsx @@ -76,8 +76,8 @@ const ListingCard = (props: ListingCardProps) => { header: CardHeader | undefined, priority: number, style?: HeaderType, - customClass?: string, - pillStyle?: boolean + pillStyle?: boolean, + customClass?: string ) => { if (header && header.content) { if (pillStyle) { @@ -112,8 +112,8 @@ const ListingCard = (props: ListingCardProps) => { const getContentHeader = () => { return (
- {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 && (
{cardTags?.map((cardTag, index) => { @@ -145,7 +145,7 @@ const ListingCard = (props: ListingCardProps) => {
)}
- {getHeader(contentProps?.tableHeader, 4, "tableHeader", "", true)} + {getHeader(contentProps?.tableHeader, 4, "tableHeader", true)} {getHeader(contentProps?.tableSubheader, 5, "tableSubheader")}
{children && children} From 5eb78176e622251404f5c282a950a4f4351c0da6 Mon Sep 17 00:00:00 2001 From: krzysztof ziecina Date: Fri, 23 Sep 2022 18:24:38 +0200 Subject: [PATCH 6/6] refactor: change style to styleType --- sites/public/lib/helpers.tsx | 4 ++-- ui-components/src/page_components/listing/ListingCard.tsx | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/sites/public/lib/helpers.tsx b/sites/public/lib/helpers.tsx index 12c16b83b4..3ad43e299c 100644 --- a/sites/public/lib/helpers.tsx +++ b/sites/public/lib/helpers.tsx @@ -114,9 +114,9 @@ export const getListings = (listings) => { const generateTableSubHeader = (listing) => { if (listing.listingAvailability === ListingAvailability.availableUnits) { - return { content: t("listings.availableUnits"), style: AppearanceStyleType.success } + return { content: t("listings.availableUnits"), styleType: AppearanceStyleType.success } } else if (listing.listingAvailability === ListingAvailability.openWaitlist) { - return { content: t("listings.waitlist.open"), style: AppearanceStyleType.primary } + return { content: t("listings.waitlist.open"), styleType: AppearanceStyleType.primary } } return null } diff --git a/ui-components/src/page_components/listing/ListingCard.tsx b/ui-components/src/page_components/listing/ListingCard.tsx index 19a459d44b..52578847d4 100644 --- a/ui-components/src/page_components/listing/ListingCard.tsx +++ b/ui-components/src/page_components/listing/ListingCard.tsx @@ -16,7 +16,7 @@ export interface CardHeader { content: string | React.ReactNode href?: string customClass?: string - style?: AppearanceStyleType + styleType?: AppearanceStyleType } export interface FooterButton { @@ -75,7 +75,7 @@ const ListingCard = (props: ListingCardProps) => { const getHeader = ( header: CardHeader | undefined, priority: number, - style?: HeaderType, + styleType?: HeaderType, pillStyle?: boolean, customClass?: string ) => { @@ -86,7 +86,7 @@ const ListingCard = (props: ListingCardProps) => { className="listings-pill_header" pillStyle capitalized - styleType={header.style} + styleType={header.styleType} shade={AppearanceShadeType.light} > {header.content} @@ -94,7 +94,7 @@ const ListingCard = (props: ListingCardProps) => { ) } return ( - + {header.href ? ( {header.content}