@bloom-housing/ui-components 4.0.1-alpha.62 → 4.0.1-alpha.66

package/CHANGELOG.md

@@ -3,6 +3,44 @@
 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.66](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.0.1-alpha.65...@bloom-housing/ui-components@4.0.1-alpha.66) (2022-02-16)
+
+
+### Bug Fixes
+
+* use the correct AlertBox component for preview listing notice ([#2497](https://github.com/bloom-housing/bloom/issues/2497)) ([f985c44](https://github.com/bloom-housing/bloom/commit/f985c444aaed31504a1e1ce7173c6e15194e2af6))
+
+
+
+
+
+## [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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "4.0.1-alpha.62",
+  "version": "4.0.1-alpha.66",
   "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.38",
+    "@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": "d1ce250a3db83007034b09cd1dfd449e4d1575d6"
+  "gitHead": "23e64f920ddd9dc8adba6ce4472e7c960d9c1278"
 }

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/notifications/AlertBox.scss

@@ -13,6 +13,7 @@
     @apply flex-1;
     @apply flex;
     @apply items-center;
+    line-height: 1rem;
   }
 
   &.narrow {
@@ -79,7 +80,6 @@
 
 .alert-box__close {
   @apply text-3xl;
-  line-height: 1rem;
   right: 1rem;
   @apply ml-3;
   @apply p-0;

package/src/notifications/AlertBox.tsx

@@ -52,6 +52,7 @@ const AlertBox = (props: AlertBoxProps) => {
               size="medium"
               symbol={icons[props.type || "alert"]}
               fill={props.inverted ? IconFillColors.white : undefined}
+              ariaHidden={true}
             />
           </span>
           <span className="alert-box__body">
@@ -63,8 +64,9 @@ const AlertBox = (props: AlertBoxProps) => {
           <button
             className={`alert-box__close ${props.inverted ? "text-white" : ""}`}
             onClick={onClose}
+            aria-label="close alert"
           >
-            &times;
+            <span aria-hidden={true}>&times;</span>
           </button>
         )}
       </div>

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>
         )
       })}