@bloom-housing/ui-components 4.0.1-alpha.14 → 4.0.1-alpha.18

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.18](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.0.1-alpha.17...@bloom-housing/ui-components@4.0.1-alpha.18) (2022-01-08)
+
+
+### Bug Fixes
+
+* ensure dayjs parsing strings will work as expected ([eb44939](https://github.com/bloom-housing/bloom/commit/eb449395ebea3a3b4b58eb217df1e1313c722a0d))
+
+
+
+
+
+## [4.0.1-alpha.17](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.0.1-alpha.16...@bloom-housing/ui-components@4.0.1-alpha.17) (2022-01-07)
+
+
+### Bug Fixes
+
+* listings group expandable section css updates ([#2377](https://github.com/bloom-housing/bloom/issues/2377)) ([fba77ef](https://github.com/bloom-housing/bloom/commit/fba77efc25ccb213a0e18a8b58ddf8ada07fbb8c))
+
+
+
+
+
+## [4.0.1-alpha.16](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.0.1-alpha.15...@bloom-housing/ui-components@4.0.1-alpha.16) (2022-01-07)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.0.1-alpha.15](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.0.1-alpha.14...@bloom-housing/ui-components@4.0.1-alpha.15) (2022-01-07)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
 ## [4.0.1-alpha.14](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.0.1-alpha.13...@bloom-housing/ui-components@4.0.1-alpha.14) (2022-01-04)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "4.0.1-alpha.14",
+  "version": "4.0.1-alpha.18",
   "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.10",
+    "@bloom-housing/backend-core": "^3.0.2-alpha.12",
     "@mapbox/mapbox-sdk": "^0.13.0",
     "@types/body-scroll-lock": "^2.6.1",
     "@types/jwt-decode": "^2.2.1",
@@ -82,9 +82,9 @@
     "@types/react-transition-group": "^4.4.0",
     "axios": "0.21.1",
     "body-scroll-lock": "^3.1.5",
+    "dayjs": "^1.10.7",
     "jwt-decode": "^2.2.0",
     "markdown-to-jsx": "^6.11.4",
-    "moment": "^2.29.1",
     "nanoid": "^3.1.12",
     "react": "^17.0.2",
     "react-accessible-accordion": "^3.3.5",
@@ -100,5 +100,5 @@
     "tailwindcss": "2.2.10",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "6cc3b8fcf9901a2a1390d97dadd4f08cdbba876a"
+  "gitHead": "45721de57d426c46e2879f6107420d42e64195a9"
 }

package/src/forms/DOBField.tsx

@@ -1,7 +1,9 @@
 import React from "react"
 import { t } from "../helpers/translator"
 import { Field } from "./Field"
-import moment from "moment"
+import dayjs from "dayjs"
+import customParseFormat from "dayjs/plugin/customParseFormat"
+dayjs.extend(customParseFormat)
 import { UseFormMethods, FieldError, DeepMap } from "react-hook-form"
 
 export type DOBFieldValues = {
@@ -39,7 +41,7 @@ const DOBField = (props: DOBFieldProps) => {
   const validateAge = (value: string) => {
     return (
       parseInt(value) > 1900 &&
-      moment(`${birthMonth}/${birthDay}/${value}`, "MM/DD/YYYY") < moment().subtract(18, "years")
+      dayjs(`${birthMonth}/${birthDay}/${value}`, "MM/DD/YYYY") < dayjs().subtract(18, "years")
     )
   }
 
@@ -108,7 +110,7 @@ const DOBField = (props: DOBFieldProps) => {
             validate: {
               yearRange: (value: string) => {
                 if (props.required && value && parseInt(value) < 1900) return false
-                if (props.required && value && parseInt(value) > moment().year() + 10) return false
+                if (props.required && value && parseInt(value) > dayjs().year() + 10) return false
                 if (!props.required && !value?.length) return true
                 if (value?.length && validateAge18) return validateAge(value)
                 return true

package/src/forms/DateField.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { t } from "../helpers/translator"
 import { Field } from "./Field"
-import moment from "moment"
+import dayjs from "dayjs"
 import { UseFormMethods, FieldError, DeepMap } from "react-hook-form"
 
 export type DateFieldValues = {
@@ -97,7 +97,7 @@ const DateField = (props: DateFieldProps) => {
             validate: {
               yearRange: (value: string) => {
                 if (props.required && value && parseInt(value) < 1900) return false
-                if (props.required && value && parseInt(value) > moment().year() + 10) return false
+                if (props.required && value && parseInt(value) > dayjs().year() + 10) return false
                 if (!props.required && !value?.length) return true
                 return true
               },

package/src/forms/TimeField.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react"
-import moment from "moment"
+import dayjs from "dayjs"
 import { t } from "../helpers/translator"
 import { ErrorMessage } from "../notifications/ErrorMessage"
 import { Field } from "./Field"
@@ -32,7 +32,7 @@ export type TimeFieldProps = {
 }
 
 export const formatDateToTimeField = (date: Date) => {
-  const dateObj = moment(date)
+  const dateObj = dayjs(date)
 
   return {
     hours: dateObj.format("hh"),

package/src/helpers/dateToString.ts

@@ -1,8 +1,10 @@
-import moment from "moment"
+import dayjs from "dayjs"
+import utc from "dayjs/plugin/utc"
+dayjs.extend(utc)
 
 export const dateToString = (submissionDate: Date) => {
   if (!submissionDate) return null
-  const formattedSubmissionDate = moment(new Date(submissionDate)).utc()
+  const formattedSubmissionDate = dayjs(new Date(submissionDate)).utc()
   const month = formattedSubmissionDate.format("MMMM")
   const day = formattedSubmissionDate.format("DD")
   const year = formattedSubmissionDate.format("YYYY")

package/src/icons/Icon.tsx

@@ -17,6 +17,7 @@ import {
   CloseRound,
   CloseSmall,
   Cross,
+  DoubleHouse,
   Down,
   Download,
   Draggable,
@@ -75,6 +76,7 @@ const IconMap = {
   closeRound: CloseRound,
   closeSmall: CloseSmall,
   cross: Cross,
+  doubleHouse: DoubleHouse,
   down: Down,
   download: Download,
   draggable: Draggable,

package/src/icons/Icons.tsx

@@ -243,6 +243,20 @@ export const Cross = (props: IconProps) => {
   )
 }
 
+export const DoubleHouse = (props: IconProps) => {
+  return (
+    <svg viewBox="0 0 32 32" fill={props.fill ?? "currentColor"}>
+      <path d="M8.68 24.053c0.173 0 0.347-0.080 0.48-0.213 0.12-0.12 0.187-0.28 0.187-0.467 0-0.16-0.067-0.333-0.187-0.469-0.253-0.251-0.707-0.24-0.947 0-0.12 0.122-0.2 0.294-0.2 0.469 0 0.187 0.080 0.347 0.2 0.478 0.12 0.122 0.293 0.202 0.467 0.202z"></path>
+      <path d="M18.019 22.714h1.384c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-1.384c-0.368 0-0.667 0.299-0.667 0.667s0.298 0.667 0.667 0.667z"></path>
+      <path d="M18.019 18.714h1.384c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-1.384c-0.368 0-0.667 0.299-0.667 0.667s0.298 0.667 0.667 0.667z"></path>
+      <path d="M23.354 22.714h1.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-1.333c-0.368 0-0.667 0.299-0.667 0.667s0.298 0.667 0.667 0.667z"></path>
+      <path d="M23.354 26.715h1.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-1.333c-0.368 0-0.667 0.299-0.667 0.667s0.298 0.667 0.667 0.667z"></path>
+      <path d="M23.354 18.714h1.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-1.333c-0.368 0-0.667 0.299-0.667 0.667s0.298 0.667 0.667 0.667z"></path>
+      <path d="M31.51 15.406l-19.499-7.253c-0.342-0.128-0.728 0.046-0.858 0.392s0.048 0.73 0.394 0.858l1.805 0.672v6.784l-10.166 2.629c0 0 0 0-0.002 0l-2.618 0.675c-0.357 0.091-0.571 0.456-0.478 0.813 0.077 0.301 0.347 0.501 0.643 0.501 0.056 0 0.11-0.006 0.166-0.021l1.784-0.461v10.387c0 0.368 0.299 0.667 0.667 0.667h25.333c0.368 0 0.667-0.299 0.667-0.667v-15.354l1.693 0.629c0.077 0.027 0.157 0.042 0.234 0.042 0.27 0 0.525-0.166 0.626-0.435 0.128-0.344-0.045-0.728-0.39-0.856zM4.019 20.65l9.333-2.414v12.478h-1.333v-4.667c0-0.368-0.299-0.667-0.667-0.667h-5.333c-0.368 0-0.667 0.299-0.667 0.667v4.667h-1.333v-10.064zM6.685 30.715v-4h4v4h-4zM18.686 30.715v-4h1.333v4h-1.333zM28.019 30.715h-6.667v-4.667c0-0.368-0.299-0.667-0.667-0.667h-2.667c-0.368 0-0.667 0.299-0.667 0.667v4.667h-2.667v-20.144l13.333 4.962v15.182z"></path>
+    </svg>
+  )
+}
+
 export const Down = (props: IconProps) => {
   return (
     <svg viewBox={"0 0 32 32"} fill={props.fill ?? "currentColor"}>

package/src/page_components/listing/ListingsGroup.scss

@@ -6,44 +6,71 @@
 
 .listings-group__header {
   @apply flex;
-  @apply flex-row;
-  @apply flex-wrap;
+  @apply flex-col;
   @apply max-w-5xl;
   @apply m-auto;
   @apply mt-6;
   @apply mb-8;
   @apply p-3;
+  @apply justify-between;
+
+  @screen md {
+    @apply flex-row;
+  }
 }
 
 .listings-group__icon {
   @apply hidden;
-  @apply pt-2;
   @apply pr-5;
+  @apply mr-5;
+  @apply border-r-4;
+  @apply border-gray-700;
+  @apply items-center;
+  @apply hidden;
+  @screen md {
+    @apply flex;
+  }
+}
+
+.listings-group__content {
+  @apply flex;
+  @apply flex-row;
+  flex-grow: 2;
+  margin-right: 15px;
 
+  @apply max-w-full;
   @screen md {
-    @apply inline-block;
+    max-width: 70%;
   }
 }
 
 .listings-group__header-group {
-  @apply w-full;
+  max-width: inherit;
   @apply flex;
-  @apply items-center;
-  @apply mb-4;
+  @apply flex-col;
+  @apply items-start;
+  @apply justify-center;
+  @apply h-full;
+}
 
+.listings-group__info {
+  @apply text-gray-750;
+  @apply pt-1;
+  @apply pt-2;
   @screen md {
-    @apply w-7/12;
-    @apply mb-0;
+    @apply pt-0;
   }
 }
 
 .listings-group__button {
-  @apply w-full;
   @apply flex;
   @apply items-center;
-
+  flex-shrink: 0;
+  @apply ml-0;
+  @apply pt-5;
   @screen md {
-    @apply w-4/12;
+    @apply ml-6;
+    @apply pt-0;
   }
 }
 
@@ -51,15 +78,13 @@
   @apply uppercase;
   @apply font-alt-sans;
   @apply font-black;
-  @apply my-1;
   @apply tracking-widest;
   @apply border-b-4;
-  @apply border-gray-600;
+  @apply border-gray-700;
   @apply pb-1;
 
   @screen md {
-    @apply px-4;
-    @apply border-b-0;
-    @apply border-l-4;
+    @apply pb-0;
+    @apply border-0;
   }
 }

package/src/page_components/listing/ListingsGroup.tsx

@@ -1,43 +1,41 @@
 import React, { useState } from "react"
 import { Button } from "../../actions/Button"
-import { Icon } from "../../icons/Icon"
+import { Icon, IconTypes } from "../../icons/Icon"
 import "./ListingsGroup.scss"
 
 export interface ListingsGroupProps {
   children?: React.ReactNode
-  listingsCount: number
   header: string
+  hideButtonText: string
+  icon?: IconTypes
   info?: string
+  listingsCount: number
   showButtonText: string
-  hideButtonText: string
 }
 
 const ListingsGroup = (props: ListingsGroupProps) => {
   const [showListings, setShowListings] = useState(false)
   const toggleListings = () => setShowListings(!showListings)
 
-  let buttonText
-
   const listingsCount = ` (${props.listingsCount})`
-  if (showListings) {
-    buttonText = props.hideButtonText + listingsCount
-  } else {
-    buttonText = props.showButtonText + listingsCount
-  }
 
   return (
     <div className="listings-group">
       <div className="listings-group__header">
-        <div className="listings-group__icon">
-          <Icon size="xlarge" symbol="clock" />
-        </div>
-        <div className="listings-group__header-group">
-          <h2 className="listings-group__title">{props.header}</h2>
-          {props.info && <div className="px-4 my-2">{props.info}</div>}
+        <div className={"listings-group__content"}>
+          <div className="listings-group__icon">
+            <Icon size="xlarge" symbol={props.icon ?? `clock`} />
+          </div>
+          <div className="listings-group__header-group">
+            <h2 className="listings-group__title">{props.header}</h2>
+            {props.info && <div className="listings-group__info">{props.info}</div>}
+          </div>
         </div>
         <div className="listings-group__button">
           <Button className="w-full" onClick={() => toggleListings()}>
-            {buttonText}
+            {showListings
+              ? props.hideButtonText + listingsCount
+              : props.showButtonText + listingsCount}
           </Button>
         </div>
       </div>

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

@@ -1,6 +1,6 @@
 import * as React from "react"
 import { t } from "../../../helpers/translator"
-import moment from "moment"
+import dayjs from "dayjs"
 
 interface ListingUpdatedProps {
   listingUpdated: Date
@@ -11,7 +11,7 @@ const ListingUpdated = (props: ListingUpdatedProps) => {
   return (
     <section className="aside-block">
       <p className="text-tiny text-gray-800">
-        {`${t("listings.listingUpdated")}: ${moment(listingUpdated).format("MMMM DD, YYYY")}`}
+        {`${t("listings.listingUpdated")}: ${dayjs(listingUpdated).format("MMMM DD, YYYY")}`}
       </p>
     </section>
   )

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

@@ -1,7 +1,7 @@
 import * as React from "react"
 import { ListingEvent } from "@bloom-housing/backend-core/types"
 import { t } from "../../../../helpers/translator"
-import moment from "moment"
+import dayjs from "dayjs"
 
 const DownloadLotteryResults = (props: { event: ListingEvent; pdfUrl: string }) => {
   const { event, pdfUrl } = props
@@ -12,7 +12,7 @@ const DownloadLotteryResults = (props: { event: ListingEvent; pdfUrl: string })
         <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">
-            {moment(event.startTime).format("MMMM D, YYYY")}
+            {dayjs(event.startTime).format("MMMM D, YYYY")}
           </p>
           <a
             className="button is-primary w-full mb-2"

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

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

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

@@ -1,7 +1,7 @@
 import * as React from "react"
 import { ListingEvent } from "@bloom-housing/backend-core/types"
 import { t } from "../../../../helpers/translator"
-import moment from "moment"
+import dayjs from "dayjs"
 
 const LotteryResultsEvent = (props: { event: ListingEvent }) => {
   const { event } = props
@@ -9,13 +9,13 @@ const LotteryResultsEvent = (props: { event: ListingEvent }) => {
     <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">{moment(props.event.startTime).format("MMMM D, YYYY")}</span>
+        <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: moment(props.event.startTime).format("h a"),
+            hour: dayjs(props.event.startTime).format("h a"),
           })}
         </p>
       )}