@bloom-housing/ui-components 4.0.1-alpha.60 → 4.0.1-alpha.64

package/CHANGELOG.md

@@ -3,6 +3,46 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.0.1-alpha.64](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.0.1-alpha.63...@bloom-housing/ui-components@4.0.1-alpha.64) (2022-02-16)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.0.1-alpha.63](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.0.1-alpha.62...@bloom-housing/ui-components@4.0.1-alpha.63) (2022-02-15)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.0.1-alpha.62](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.0.1-alpha.61...@bloom-housing/ui-components@4.0.1-alpha.62) (2022-02-15)
+
+
+### Code Refactoring
+
+* remove backend dependencies from events components, consolidate ([#2495](https://github.com/bloom-housing/bloom/issues/2495)) ([d884689](https://github.com/bloom-housing/bloom/commit/d88468965bc67c74b8b3eaced20c77472e90331f))
+
+
+### BREAKING CHANGES
+
+* consolidated all event section components in one new component, uptake will require removing the deprecated components and uptaking EventSection
+
+
+
+
+
+## [4.0.1-alpha.61](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.0.1-alpha.60...@bloom-housing/ui-components@4.0.1-alpha.61) (2022-02-15)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
 ## [4.0.1-alpha.60](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.0.1-alpha.59...@bloom-housing/ui-components@4.0.1-alpha.60) (2022-02-15)
 
 **Note:** Version bump only for package @bloom-housing/ui-components

package/index.ts

@@ -116,10 +116,7 @@ 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/WhatToExpect"
 export * from "./src/page_components/listing/listing_sidebar/events/DownloadLotteryResults"
-export * from "./src/page_components/listing/listing_sidebar/events/OpenHouseEvent"
-export * from "./src/page_components/listing/listing_sidebar/events/LotteryResultsEvent"
-export * from "./src/page_components/listing/listing_sidebar/events/PublicLotteryEvent"
-export * from "./src/page_components/listing/listing_sidebar/events/EventDateSection"
+export * from "./src/page_components/listing/listing_sidebar/events/EventSection"
 export * from "./src/page_components/sign-in/FormSignIn"
 export * from "./src/page_components/sign-in/FormSignInMFAType"
 export * from "./src/page_components/sign-in/FormSignInMFACode"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "4.0.1-alpha.60",
+  "version": "4.0.1-alpha.64",
   "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",
@@ -69,7 +69,7 @@
     "webpack": "^4.44.2"
   },
   "dependencies": {
-    "@bloom-housing/backend-core": "^3.0.2-alpha.36",
+    "@bloom-housing/backend-core": "^3.0.2-alpha.40",
     "@mapbox/mapbox-sdk": "^0.13.0",
     "@types/body-scroll-lock": "^2.6.1",
     "@types/jwt-decode": "^2.2.1",
@@ -100,5 +100,5 @@
     "tailwindcss": "2.2.10",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "00873ac2f24b78827a5cc1a2e93b152fb5ee53f0"
+  "gitHead": "261a2bb1de4728243df9e3be57471769662be4a6"
 }

package/src/page_components/listing/listing_sidebar/events/DownloadLotteryResults.tsx

@@ -1,30 +1,29 @@
 import * as React from "react"
-import { ListingEvent } from "@bloom-housing/backend-core/types"
 import { t } from "../../../../helpers/translator"
-import dayjs from "dayjs"
 
-const DownloadLotteryResults = (props: { event: ListingEvent; pdfUrl: string }) => {
-  const { event, pdfUrl } = props
-  const eventUrl = event ? pdfUrl : null
+type DownloadLotteryResultsProps = {
+  resultsDate?: string
+  buttonText?: string
+  pdfURL?: string
+}
+
+const DownloadLotteryResults = (props: DownloadLotteryResultsProps) => {
+  if (!props.pdfURL) return null
   return (
-    <>
-      {eventUrl && (
-        <section className="aside-block text-center">
-          <h2 className="text-caps pb-4">{t("listings.lotteryResults.header")}</h2>
-          <p className="uppercase text-gray-800 text-tiny font-semibold pb-4">
-            {dayjs(event.startTime).format("MMMM D, YYYY")}
-          </p>
-          <a
-            className="button is-primary w-full mb-2"
-            href={eventUrl}
-            title={t("listings.lotteryResults.downloadResults")}
-            target="_blank"
-          >
-            {t("listings.lotteryResults.downloadResults")}
-          </a>
-        </section>
+    <section className="aside-block text-center">
+      <h2 className="text-caps pb-4">{t("listings.lotteryResults.header")}</h2>
+      {props.resultsDate && (
+        <p className="uppercase text-gray-800 text-tiny font-semibold pb-4">{props.resultsDate}</p>
       )}
-    </>
+      <a
+        className="button is-primary w-full mb-2"
+        href={props.pdfURL}
+        title={props.buttonText}
+        target="_blank"
+      >
+        {props.buttonText ?? t("listings.lotteryResults.downloadResults")}
+      </a>
+    </section>
   )
 }
 

package/src/page_components/listing/listing_sidebar/events/EventSection.tsx

@@ -0,0 +1,54 @@
+import * as React from "react"
+
+export type EventType = {
+  timeString?: string
+  dateString?: string
+  linkURL?: string
+  linkText?: string
+  note?: string | React.ReactNode
+}
+
+type EventSectionProps = {
+  events: EventType[]
+  headerText?: string
+  sectionHeader?: boolean
+}
+
+const EventSection = (props: EventSectionProps) => {
+  if (!props.events.length) return null
+  return (
+    <section className="aside-block">
+      {props.headerText && (
+        <h4 className={props.sectionHeader ? "text-caps-underline" : "text-caps-tiny"}>
+          {props.headerText}
+        </h4>
+      )}
+      {props.events.map((event, index) => (
+        <div key={`events-${index}`} className={`${index !== props.events.length - 1 && "pb-3"}`}>
+          {event.dateString && (
+            <p className="text text-gray-800 pb-2 flex justify-between items-center">
+              <span className="inline-block text-tiny uppercase">{event.dateString}</span>
+              {event.timeString && (
+                <span className="inline-block text-sm font-bold ml-5 font-alt-sans">
+                  {event.timeString}
+                </span>
+              )}
+            </p>
+          )}
+          {event.linkURL && event.linkText && (
+            <p className="pb-2 text-tiny">
+              <a href={event.linkURL}>{event.linkText}</a>
+            </p>
+          )}
+          {event.note && (
+            <p className={`text-tiny text-gray-700 ${index !== props.events.length - 1 && "pb-3"}`}>
+              {event.note}
+            </p>
+          )}
+        </div>
+      ))}
+    </section>
+  )
+}
+
+export { EventSection as default, EventSection }

package/src/page_components/listing/listing_sidebar/events/EventDateSection.tsx

@@ -1,25 +0,0 @@
-import * as React from "react"
-import { ListingEvent } from "@bloom-housing/backend-core/types"
-import dayjs from "dayjs"
-
-const EventDateSection = (props: { event: ListingEvent }) => {
-  const getRangeString = () => {
-    const startTime = dayjs(props.event.startTime).format("hh:mma")
-    const endTime = dayjs(props.event.endTime).format("hh:mma")
-    return startTime === endTime ? startTime : `${startTime} - ${endTime}`
-  }
-  return (
-    <>
-      {props.event.startTime && (
-        <p className="text text-gray-800 pb-3 flex justify-between items-center">
-          <span className="inline-block text-tiny uppercase">
-            {dayjs(props.event.startTime).format("MMMM D, YYYY")}
-          </span>
-          <span className="inline-block text-sm font-bold">{getRangeString()}</span>
-        </p>
-      )}
-    </>
-  )
-}
-
-export { EventDateSection as default, EventDateSection }

package/src/page_components/listing/listing_sidebar/events/LotteryResultsEvent.tsx

@@ -1,26 +0,0 @@
-import * as React from "react"
-import { ListingEvent } from "@bloom-housing/backend-core/types"
-import { t } from "../../../../helpers/translator"
-import dayjs from "dayjs"
-
-const LotteryResultsEvent = (props: { event: ListingEvent }) => {
-  const { event } = props
-  return (
-    <section className="aside-block">
-      <h4 className="text-caps-underline">{t("listings.lotteryResults.header")}</h4>
-      <p className="text text-gray-800 pb-3 flex justify-between items-center">
-        <span className="inline-block">{dayjs(props.event.startTime).format("MMMM D, YYYY")}</span>
-      </p>
-      {event.note && <p className="text text-gray-600">{event.note}</p>}
-      {!event.note && (
-        <p className="text-tiny text-gray-600">
-          {t("listings.lotteryResults.completeResultsWillBePosted", {
-            hour: dayjs(props.event.startTime).format("h a"),
-          })}
-        </p>
-      )}
-    </section>
-  )
-}
-
-export { LotteryResultsEvent as default, LotteryResultsEvent }

package/src/page_components/listing/listing_sidebar/events/OpenHouseEvent.tsx

@@ -1,27 +0,0 @@
-import * as React from "react"
-import { ListingEvent } from "@bloom-housing/backend-core/types"
-import { EventDateSection } from "./EventDateSection"
-import { t } from "../../../../helpers/translator"
-
-const OpenHouseEvent = (props: { events: ListingEvent[] }) => {
-  return (
-    <section className="aside-block">
-      <h4 className="text-caps-tiny">{t("listings.openHouseEvent.header")}</h4>
-      {props.events.map((openHouseEvent, index) => (
-        <div key={`openHouses-${index}`}>
-          <EventDateSection event={openHouseEvent} />
-          {openHouseEvent.url && (
-            <p className="text text-gray-800 pb-3">
-              <a href={openHouseEvent.url}>
-                {openHouseEvent.label || t("listings.openHouseEvent.seeVideo")}
-              </a>
-            </p>
-          )}
-          {openHouseEvent.note && <p className="text-tiny text-gray-600">{openHouseEvent.note}</p>}
-        </div>
-      ))}
-    </section>
-  )
-}
-
-export { OpenHouseEvent as default, OpenHouseEvent }

package/src/page_components/listing/listing_sidebar/events/PublicLotteryEvent.tsx

@@ -1,22 +0,0 @@
-import * as React from "react"
-import { ListingEvent } from "@bloom-housing/backend-core/types"
-import { t } from "../../../../helpers/translator"
-import { EventDateSection } from "./EventDateSection"
-
-const PublicLotteryEvent = (props: { event: ListingEvent }) => {
-  const { event } = props
-  return (
-    <section className="aside-block">
-      <h4 className="text-caps-underline">{t("listings.publicLottery.header")}</h4>
-      <EventDateSection event={props.event} />
-      {event.url && (
-        <p className="text text-gray-800 pb-3">
-          <a href={event.url}>{t("listings.publicLottery.seeVideo")}</a>
-        </p>
-      )}
-      {event.note && <p className="text-tiny text-gray-600">{event.note}</p>}
-    </section>
-  )
-}
-
-export { PublicLotteryEvent as default, PublicLotteryEvent }