@bloom-housing/ui-components 3.0.1-alpha.40 → 3.0.1-alpha.46

package/CHANGELOG.md

@@ -3,6 +3,51 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.1-alpha.46](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.45...@bloom-housing/ui-components@3.0.1-alpha.46) (2021-12-15)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [3.0.1-alpha.45](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.44...@bloom-housing/ui-components@3.0.1-alpha.45) (2021-12-14)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [3.0.1-alpha.44](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.43...@bloom-housing/ui-components@3.0.1-alpha.44) (2021-12-14)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [3.0.1-alpha.43](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.42...@bloom-housing/ui-components@3.0.1-alpha.43) (2021-12-13)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [3.0.1-alpha.42](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.40...@bloom-housing/ui-components@3.0.1-alpha.42) (2021-12-13)
+
+
+### Bug Fixes
+
+* fix hero button width with secondary button ([#2306](https://github.com/bloom-housing/bloom/issues/2306)) ([929ac8e](https://github.com/bloom-housing/bloom/commit/929ac8e7fd30718a77a10277323abf1604a45a19))
+* mobile notice text wrap issue ([#2308](https://github.com/bloom-housing/bloom/issues/2308)) ([47fdd7e](https://github.com/bloom-housing/bloom/commit/47fdd7ea0e15ec50888cb00f1caa11df269c9e84))
+* versioning issues ([#2311](https://github.com/bloom-housing/bloom/issues/2311)) ([0b1d143](https://github.com/bloom-housing/bloom/commit/0b1d143ab8b17add9d52533560f28d7a1f6dfd3d))
+
+
+
+
+
 ## [3.0.1-alpha.40](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.39...@bloom-housing/ui-components@3.0.1-alpha.40) (2021-12-10)
 
 **Note:** Version bump only for package @bloom-housing/ui-components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "3.0.1-alpha.40",
+  "version": "3.0.1-alpha.46",
   "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.1-alpha.35",
+    "@bloom-housing/backend-core": "^3.0.1-alpha.39",
     "@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": "66128b887f8eef065184137a00d2d3ed31d31ed9"
+  "gitHead": "4f1b763f728ca4651cd973f21b30e07a69f1a2e7"
 }

package/src/blocks/ViewItem.tsx

@@ -10,6 +10,7 @@ export interface ViewItemProps {
   className?: string
   truncated?: boolean
   error?: boolean
+  dataTestId?: string
 }
 
 const ViewItem = (props: ViewItemProps) => {
@@ -22,7 +23,7 @@ const ViewItem = (props: ViewItemProps) => {
   if (props.truncated) valueClassName += " is-truncated"
 
   return (
-    <div id={props.id} className={viewItemClasses.join(" ")}>
+    <div id={props.id} className={viewItemClasses.join(" ")} data-test-id={props.dataTestId}>
       {props.label && (
         <span className={`view-item__label ${props.error ? "text-alert text-tiny" : ""}`}>
           {props.label}

package/src/forms/DateField.tsx

@@ -24,6 +24,7 @@ export interface DateFieldProps {
   register: UseFormMethods["register"]
   required?: boolean
   watch: UseFormMethods["watch"]
+  dataTestId?: string
 }
 
 const DateField = (props: DateFieldProps) => {
@@ -60,6 +61,7 @@ const DateField = (props: DateFieldProps) => {
           }}
           inputProps={{ maxLength: 2 }}
           register={register}
+          dataTestId={props.dataTestId ? `${props.dataTestId}-month` : undefined}
         />
         <Field
           name={getFieldName("day")}
@@ -80,6 +82,7 @@ const DateField = (props: DateFieldProps) => {
           }}
           inputProps={{ maxLength: 2 }}
           register={register}
+          dataTestId={props.dataTestId ? `${props.dataTestId}-day` : undefined}
         />
         <Field
           name={getFieldName("year")}
@@ -102,6 +105,7 @@ const DateField = (props: DateFieldProps) => {
           }}
           inputProps={{ maxLength: 4 }}
           register={register}
+          dataTestId={props.dataTestId ? `${props.dataTestId}-year` : undefined}
         />
       </div>
       {props.note && <p className="field-note mb-2 mt-4">{props.note}</p>}

package/src/forms/TimeField.tsx

@@ -28,6 +28,7 @@ export type TimeFieldProps = {
   required?: boolean
   watch: UseFormMethods["watch"]
   seconds?: boolean
+  dataTestId?: string
 }
 
 export const formatDateToTimeField = (date: Date) => {
@@ -54,6 +55,7 @@ const TimeField = ({
   seconds,
   defaultValues,
   disabled,
+  dataTestId,
 }: TimeFieldProps) => {
   const fieldName = (baseName: string) => {
     return [name, baseName].filter((item) => item).join(".")
@@ -99,6 +101,7 @@ const TimeField = ({
           register={register}
           describedBy={`${id}-error`}
           disabled={disabled}
+          dataTestId={dataTestId ? `${dataTestId}-hours` : undefined}
         />
 
         <Field
@@ -122,6 +125,7 @@ const TimeField = ({
           register={register}
           describedBy={`${id}-error`}
           disabled={disabled}
+          dataTestId={dataTestId ? `${dataTestId}-minutes` : undefined}
         />
 
         {seconds && (
@@ -146,6 +150,7 @@ const TimeField = ({
             register={register}
             describedBy={`${id}-error`}
             disabled={disabled}
+            dataTestId={dataTestId ? `${dataTestId}-seconds` : undefined}
           />
         )}
 
@@ -161,6 +166,7 @@ const TimeField = ({
           error={error}
           describedBy={`${id}-error`}
           disabled={disabled}
+          dataTestId={dataTestId ? `${dataTestId}-period` : undefined}
         />
       </div>
 

package/src/headers/Hero.scss

@@ -20,6 +20,13 @@
   width: 100%;
 }
 
+.hero__buttons {
+  @apply grid;
+  @apply md:grid-cols-4;
+  @apply gap-5;
+  @apply max-w-screen-md;
+  @apply m-auto;
+}
 .hero__title {
   @apply text-4xl;
   @apply mb-5;

package/src/headers/Hero.tsx

@@ -46,9 +46,9 @@ const Hero = (props: HeroProps) => {
       {props.buttonTitle && props.buttonLink && (
         <>
           {props.secondaryButtonTitle && props.secondaryButtonLink ? (
-            <div className="grid md:grid-cols-6 gap-5 max-w-screen-lg m-auto">
+            <div className="hero__buttons">
               <HeroButton
-                className={"md:col-start-3 with_secondary"}
+                className={"md:col-start-2 with_secondary"}
                 href={props.buttonLink}
                 title={props.buttonTitle}
               />

package/src/headers/SiteHeader.scss

@@ -322,7 +322,10 @@
   .navbar-notice {
     @apply w-full;
     @apply bg-primary;
-    @apply text-right;
+    @screen md {
+      @apply text-right;
+    }
+    @apply text-left;
     @apply text-white;
     @apply block;
   }
@@ -338,11 +341,9 @@
   .navbar-notice__text {
     @apply max-w-5xl;
     @apply text-sm;
-    @apply pt-2;
-    @apply pb-2;
-    @apply pr-3;
+    @apply py-2;
+    @apply px-3;
     margin: auto;
-    height: 36px;
 
     a,
     a:hover {

package/src/locales/general.json

@@ -1099,6 +1099,7 @@
     "percentAMIUnit": "%{percent}% AMI Unit",
     "pickupAddress": "Pickup Address",
     "postmarkByDate": "Postmark by Date",
+    "postmarkByTime": "Postmark by Time",
     "postmarksConsideredQuestion": "Are postmarks considered?",
     "priorityUnits": "Priority Units",
     "priorityUnitsDescription": "This building has units set aside if any of the following apply to you or someone in your household:",

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

@@ -22,14 +22,18 @@ export interface ApplicationAddressesProps {
 const SubmitApplication = (props: ApplicationAddressesProps) => {
   return (
     <>
-      {(props.applicationMailingAddress || props.applicationDropOffAddress) && (
+      {(props.applicationMailingAddress ||
+        props.applicationDropOffAddress ||
+        props.postmarkedApplicationData) && (
         <section className="aside-block is-tinted bg-gray-100">
           <NumberedHeader num={2} text={t("listings.apply.submitAPaperApplication")} />
-          {props.applicationMailingAddress && (
+          {(props.applicationMailingAddress || props.postmarkedApplicationData) && (
             <>
               <h3 className="text-caps-tiny">{t("listings.apply.sendByUsMail")}</h3>
               <p className="text-gray-700">{props.applicationOrganization}</p>
-              <SidebarAddress address={props.applicationMailingAddress} />
+              {props.applicationMailingAddress && (
+                <SidebarAddress address={props.applicationMailingAddress} />
+              )}
               <p className="mt-4 text-tiny text-gray-750">
                 {props.postmarkedApplicationData?.postmarkedApplicationsReceivedByDate
                   ? t("listings.apply.postmarkedApplicationsMustBeReceivedByDate", {