@bloom-housing/ui-components 4.0.1-alpha.61 → 4.0.1-alpha.65

package/CHANGELOG.md

@@ -3,6 +3,49 @@
 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.65](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.0.1-alpha.64...@bloom-housing/ui-components@4.0.1-alpha.65) (2022-02-16)
+
+
+### Bug Fixes
+
+* add icons to unit accordions if enabled ([#2372](https://github.com/bloom-housing/bloom/issues/2372)) ([#2489](https://github.com/bloom-housing/bloom/issues/2489)) ([55e4dc9](https://github.com/bloom-housing/bloom/commit/55e4dc9a95b9fe9125153b43556fd64d06506f24))
+
+
+
+
+
+## [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

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.61",
+  "version": "4.0.1-alpha.65",
   "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.37",
+    "@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": "fa057e56d890534716334baf788d631c17ae6605"
+  "gitHead": "f8e16ec7ae0b02796b1c83f0cc19e1953ec4d284"
 }

package/src/global/headers.scss

@@ -79,11 +79,15 @@
 }
 
 .toggle-header {
-  @apply font-sans;
-  @apply text-tiny;
   @apply bg-primary-light;
   @apply p-4;
-  @apply text-gray-800;
   @apply border-b;
   @apply border-primary;
+  display: flex;
+  justify-content: space-between;
+  .toggle-header-content {
+    @apply font-sans;
+    @apply text-tiny;
+    @apply text-gray-800;
+  }
 }

package/src/helpers/tableSummaries.tsx

@@ -3,7 +3,7 @@ import { t } from "./translator"
 import { UnitSummary } from "@bloom-housing/backend-core/types"
 
 export const unitSummariesTable = (summaries: UnitSummary[]) => {
-  const unitSummaries = summaries.map((unitSummary) => {
+  const unitSummaries = summaries?.map((unitSummary) => {
     const unitPluralization = unitSummary.totalAvailable == 1 ? t("t.unit") : t("t.units")
     const minIncome =
       unitSummary.minIncomeRange.min == unitSummary.minIncomeRange.max ? (

package/src/icons/Icon.tsx

@@ -136,6 +136,7 @@ export interface IconProps {
   className?: string
   fill?: string
   ariaHidden?: boolean
+  dataTestId?: string
 }
 
 const Icon = (props: IconProps) => {
@@ -147,7 +148,11 @@ const Icon = (props: IconProps) => {
   const SpecificIcon = IconMap[props.symbol]
 
   return (
-    <span className={wrapperClasses.join(" ")} aria-hidden={props.ariaHidden}>
+    <span
+      className={wrapperClasses.join(" ")}
+      aria-hidden={props.ariaHidden}
+      data-test-id={props.dataTestId ?? null}
+    >
       <SpecificIcon fill={props.fill ? props.fill : undefined} />
     </span>
   )

package/src/page_components/listing/UnitTables.tsx

@@ -1,10 +1,11 @@
-import * as React from "react"
+import React, { useState } from "react"
 import { nanoid } from "nanoid"
 import { MinMax, UnitSummary, Unit } from "@bloom-housing/backend-core/types"
 
 import { StandardTable } from "../../tables/StandardTable"
 import { t } from "../../helpers/translator"
 import { numberOrdinal } from "../../helpers/numberOrdinal"
+import { Icon, IconFillColors } from "../../icons/Icon"
 
 const formatRange = (range: MinMax, ordinalize?: boolean) => {
   let min: string | number = range.min
@@ -34,6 +35,7 @@ interface UnitTablesProps {
 }
 
 const UnitTables = (props: UnitTablesProps) => {
+  const [accordionOpen, setAccordionOpen] = useState(false)
   const unitSummaries = props.unitSummaries || []
 
   const unitsHeaders = {
@@ -43,9 +45,9 @@ const UnitTables = (props: UnitTablesProps) => {
     floor: "t.floor",
   }
 
-  const toggleTable = (event: React.MouseEvent) => {
+  const toggleTable = () => {
     if (!props.disableAccordion) {
-      event.currentTarget.parentElement?.querySelector(".unit-table")?.classList?.toggle("hidden")
+      setAccordionOpen(!accordionOpen)
     }
   }
 
@@ -97,16 +99,39 @@ const UnitTables = (props: UnitTablesProps) => {
         return (
           <div key={uniqKey} className="mb-4">
             <button onClick={toggleTable} className={buttonClasses.join(" ")}>
-              <h3 className="toggle-header">
-                <strong>{t("listings.unitTypes." + unitSummary.unitType.name)}</strong>:&nbsp;
-                {unitsLabel(units)}
-                {areaRangeSection}
-                {floorSection}
-              </h3>
+              <div className={`toggle-header ${!props.disableAccordion && "pb-3"}`}>
+                <h3 className={"toggle-header-content"}>
+                  <strong>{t("listings.unitTypes." + unitSummary.unitType.name)}</strong>:&nbsp;
+                  {unitsLabel(units)}
+                  {areaRangeSection}
+                  {floorSection}
+                </h3>
+                {!props.disableAccordion && (
+                  <>
+                    {accordionOpen ? (
+                      <Icon
+                        symbol={"closeSmall"}
+                        size={"base"}
+                        fill={IconFillColors.primary}
+                        dataTestId={"unit-table-accordion-close"}
+                      />
+                    ) : (
+                      <Icon
+                        symbol={"arrowDown"}
+                        size={"base"}
+                        fill={IconFillColors.primary}
+                        dataTestId={"unit-table-accordion-open"}
+                      />
+                    )}
+                  </>
+                )}
+              </div>
             </button>
-            <div className="unit-table hidden">
-              <StandardTable headers={unitsHeaders} data={unitsFormatted} />
-            </div>
+            {accordionOpen && (
+              <div className="unit-table">
+                <StandardTable headers={unitsHeaders} data={unitsFormatted} />
+              </div>
+            )}
           </div>
         )
       })}

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 }