@bloom-housing/ui-components 4.2.2-alpha.22 → 4.2.2-alpha.23

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 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.23](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.22...@bloom-housing/ui-components@4.2.2-alpha.23) (2022-05-04)
+
+
+### Code Refactoring
+
+* remove business logic, strings from waitlist component ([#2689](https://github.com/bloom-housing/bloom/issues/2689)) ([a5721db](https://github.com/bloom-housing/bloom/commit/a5721db518453ddbd777e50ca92fdeac19997aa9))
+
+
+### BREAKING CHANGES
+
+* the Waitlist component was renamed to QuantityRowSection which also has a new prop set to account for a flexible number of rows and strings
+
+
+
+
+
 ## [4.2.2-alpha.22](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.21...@bloom-housing/ui-components@4.2.2-alpha.22) (2022-05-03)
 
 

package/index.ts

@@ -115,7 +115,7 @@ export * from "./src/page_components/listing/listing_sidebar/OrDivider"
 export * from "./src/page_components/listing/listing_sidebar/ReferralApplication"
 export * from "./src/page_components/listing/listing_sidebar/SidebarAddress"
 export * from "./src/page_components/listing/listing_sidebar/SubmitApplication"
-export * from "./src/page_components/listing/listing_sidebar/Waitlist"
+export * from "./src/page_components/listing/listing_sidebar/QuantityRowSection"
 export * from "./src/page_components/listing/listing_sidebar/WhatToExpect"
 export * from "./src/page_components/listing/listing_sidebar/events/DownloadLotteryResults"
 export * from "./src/page_components/listing/listing_sidebar/events/EventSection"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "4.2.2-alpha.22",
+  "version": "4.2.2-alpha.23",
   "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": "d1e92b646c2942546756f80fecbb624a3e74b1b0"
+  "gitHead": "004be94722a0b7bccd6fa7528f2a0be2a5e8529b"
 }

package/src/global/text.scss

@@ -89,7 +89,7 @@ h1.title {
 
 .text-caps-tiny {
   @apply mb-4;
-  @apply text-gray-700;
+  @apply text-gray-750;
   @apply uppercase;
   @apply font-sans;
   @apply font-bold;

package/src/page_components/listing/listing_sidebar/QuantityRowSection.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+
+export interface QuantityRow {
+  amount: number | null
+  text: string
+  emphasized?: boolean
+}
+
+export interface QuantityRowSectionProps {
+  /** Any amount of number/text combinations, rendered in a list */
+  quantityRows: QuantityRow[]
+  strings: {
+    sectionTitle: string
+    description?: string | React.ReactNode
+  }
+}
+
+const QuantityRowSection = ({ quantityRows, strings }: QuantityRowSectionProps) => {
+  const getRow = (row: QuantityRow) => {
+    return (
+      <li
+        key={row.text}
+        className={`uppercase text-gray-800 ${
+          row.emphasized ? "font-bold" : "font-normal"
+        } font-alt-sans leading-7`}
+      >
+        <span className="text-right w-12 inline-block pr-2.5 text-base">{row.amount}</span>
+        <span className={"text-sm"}>{row.text}</span>
+      </li>
+    )
+  }
+
+  return (
+    <section className="aside-block is-tinted">
+      <h4 className="text-caps-tiny">{strings.sectionTitle}</h4>
+      <div>
+        {strings.description && (
+          <p className="text-tiny text-gray-800 pb-3">{strings.description}</p>
+        )}
+        {quantityRows.length && <ul>{quantityRows.map((row) => getRow(row))}</ul>}
+      </div>
+    </section>
+  )
+}
+
+export { QuantityRowSection as default, QuantityRowSection }

package/src/page_components/listing/listing_sidebar/Waitlist.tsx

@@ -1,49 +0,0 @@
-import * as React from "react"
-import { t } from "../../../helpers/translator"
-
-export interface WaitlistProps {
-  isWaitlistOpen: boolean
-  waitlistMaxSize?: number | null
-  waitlistCurrentSize?: number | null
-  waitlistOpenSpots?: number | null
-}
-
-const WaitlistItem = (props: { className?: string; value: number; text: string }) => (
-  <li className={`uppercase text-gray-800 text-tiny ${props.className}`}>
-    <span className="text-right w-12 inline-block pr-2">{props.value}</span>
-    <span>{props.text}</span>
-  </li>
-)
-
-const Waitlist = (props: WaitlistProps) => {
-  if (!props.isWaitlistOpen) return <></>
-
-  return (
-    <section className="aside-block is-tinted">
-      <h4 className="text-caps-tiny">{t("listings.waitlist.unitsAndWaitlist")}</h4>
-      <div>
-        <p className="text-tiny text-gray-800 pb-3">{t("listings.waitlist.submitAnApplication")}</p>
-        <ul>
-          {props.waitlistCurrentSize !== null && props.waitlistCurrentSize !== undefined && (
-            <WaitlistItem
-              value={props.waitlistCurrentSize}
-              text={t("listings.waitlist.currentSize")}
-            />
-          )}
-          {props.waitlistOpenSpots !== null && props.waitlistOpenSpots !== undefined && (
-            <WaitlistItem
-              value={props.waitlistOpenSpots}
-              text={t("listings.waitlist.openSlots")}
-              className={"font-semibold"}
-            />
-          )}
-          {props.waitlistMaxSize != null && (
-            <WaitlistItem value={props.waitlistMaxSize} text={t("listings.waitlist.finalSize")} />
-          )}
-        </ul>
-      </div>
-    </section>
-  )
-}
-
-export { Waitlist as default, Waitlist }