@bloom-housing/ui-components 4.2.2-alpha.0 → 4.2.2-alpha.11

package/CHANGELOG.md

@@ -3,6 +3,117 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.2.2-alpha.11](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.10...@bloom-housing/ui-components@4.2.2-alpha.11) (2022-04-21)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.2.2-alpha.10](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.9...@bloom-housing/ui-components@4.2.2-alpha.10) (2022-04-21)
+
+
+### Features
+
+* new category table component ([#2648](https://github.com/bloom-housing/bloom/issues/2648)) ([3b3fe46](https://github.com/bloom-housing/bloom/commit/3b3fe46dda3d0e553664c10cea46849551ce064c))
+
+
+### BREAKING CHANGES
+
+* There is a new prop interface for the StandardTable component and all components that use it, which includes passing cell content within a new object, allowing us to support new cell options - all tables will need to pass data with the new format.
+
+
+
+
+
+## [4.2.2-alpha.9](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.8...@bloom-housing/ui-components@4.2.2-alpha.9) (2022-04-20)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.2.2-alpha.8](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.7...@bloom-housing/ui-components@4.2.2-alpha.8) (2022-04-20)
+
+
+### Features
+
+* application timeout screen reader accessible ([#2625](https://github.com/bloom-housing/bloom/issues/2625)) ([0771ef3](https://github.com/bloom-housing/bloom/commit/0771ef3f7e4001efb4dae8cca06743801daace05))
+
+
+
+
+
+## [4.2.2-alpha.7](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.6...@bloom-housing/ui-components@4.2.2-alpha.7) (2022-04-20)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.2.2-alpha.6](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.5...@bloom-housing/ui-components@4.2.2-alpha.6) (2022-04-20)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.2.2-alpha.5](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.4...@bloom-housing/ui-components@4.2.2-alpha.5) (2022-04-19)
+
+
+### Bug Fixes
+
+* footer nav widths ([42aef6f](https://github.com/bloom-housing/bloom/commit/42aef6f74a8a7e27c6bdb870cb6c69c7569f41c0))
+
+
+
+
+
+## [4.2.2-alpha.4](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.3...@bloom-housing/ui-components@4.2.2-alpha.4) (2022-04-18)
+
+
+### Bug Fixes
+
+* add optional prop for Language Nav aria label ([#2672](https://github.com/bloom-housing/bloom/issues/2672)) ([5f1b3f6](https://github.com/bloom-housing/bloom/commit/5f1b3f66f5269cfd9285b958f608cdb41e779c70))
+
+
+
+
+
+## [4.2.2-alpha.3](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.2...@bloom-housing/ui-components@4.2.2-alpha.3) (2022-04-18)
+
+
+### Features
+
+* refactor ada form fields ([#2612](https://github.com/bloom-housing/bloom/issues/2612)) ([f516f21](https://github.com/bloom-housing/bloom/commit/f516f2164249cea5b622b6bb5cd6efb5455003ca))
+
+
+
+
+
+## [4.2.2-alpha.2](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.1...@bloom-housing/ui-components@4.2.2-alpha.2) (2022-04-14)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.2.2-alpha.1](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.0...@bloom-housing/ui-components@4.2.2-alpha.1) (2022-04-13)
+
+
+### Features
+
+* swap h5 with h1 for screen reader compatibility ([#2653](https://github.com/bloom-housing/bloom/issues/2653)) ([09d1976](https://github.com/bloom-housing/bloom/commit/09d19762cac4ee4c700e01bc0962be737d8b1155))
+
+
+
+
+
 ## [4.2.2-alpha.0](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.1-alpha.4...@bloom-housing/ui-components@4.2.2-alpha.0) (2022-04-13)
 
 

package/index.ts

@@ -98,6 +98,7 @@ export * from "./src/overlays/Drawer"
 export * from "./src/overlays/LoadingOverlay"
 
 /* Page Components */
+export * from "./src/page_components/ApplicationTimeline"
 export * from "./src/page_components/listing/AdditionalFees"
 export * from "./src/page_components/listing/ContentAccordion"
 export * from "./src/page_components/listing/ListingCard"
@@ -119,6 +120,7 @@ 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/EventSection"
 export * from "./src/page_components/sign-in/FormTerms"
+export * from "./src/page_components/sign-in/ResendConfirmationModal"
 export * from "./src/page_components/sign-in/FormSignIn"
 export * from "./src/page_components/sign-in/FormSignInMFAType"
 export * from "./src/page_components/sign-in/FormSignInMFACode"
@@ -143,6 +145,7 @@ export * from "./src/tables/StandardTable"
 export * from "./src/tables/GroupedTable"
 export * from "./src/tables/MinimalTable"
 export * from "./src/tables/StackedTable"
+export * from "./src/tables/CategoryTable"
 
 /* Text */
 export * from "./src/text/Description"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "4.2.2-alpha.0",
+  "version": "4.2.2-alpha.11",
   "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": "^4.2.2-alpha.0",
+    "@bloom-housing/backend-core": "^4.2.2-alpha.3",
     "@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": "d375408299b5dd0293882a4499aef21bff230df2"
+  "gitHead": "540085e120d280b51b7fcd4fb96937f2aae450aa"
 }

package/src/authentication/timeout.tsx

@@ -98,6 +98,7 @@ export const IdleTimeout: FunctionComponent<IdleTimeoutProps> = ({
       ariaDescription={promptText}
       actions={modalActions}
       hideCloseIcon
+      role="alertdialog"
     >
       {promptText}
     </Modal>

package/src/blocks/FormCard.tsx

@@ -14,7 +14,7 @@ const FormCard = (props: FormCardProps) => {
       <article className={classNames}>
         <div className="form-card__header">
           <header className="form-card__header_group">
-            <h5 className="form-card__header_title">{props.header}</h5>
+            <h1 className="form-card__header_title">{props.header}</h1>
           </header>
 
           <div className="form-card__header_nav">{props.children}</div>

package/src/forms/FieldGroup.tsx

@@ -5,37 +5,38 @@ import { UseFormMethods, RegisterOptions } from "react-hook-form"
 import { Field } from "./Field"
 import { t } from "../helpers/translator"
 
-interface FieldSingle {
-  id: string
-  label: string
-  value?: string
+export interface FieldSingle {
+  additionalText?: boolean
   dataTestId?: string
   defaultChecked?: boolean
-  description?: React.ReactNode
   defaultText?: string
+  description?: React.ReactNode
   disabled?: boolean
-  note?: string
+  id: string
   inputProps?: Record<string, unknown>
+  label: string
+  uniqueName?: boolean
+  note?: string
   subFields?: FieldSingle[]
   type?: string
-  additionalText?: boolean
+  value?: string
 }
 
 interface FieldGroupProps {
+  dataTestId?: string
   error?: boolean
   errorMessage?: string
-  name: string
-  type?: string
-  groupLabel?: string
+  fieldClassName?: string
+  fieldGroupClassName?: string
+  fieldLabelClassName?: string
   fields?: FieldSingle[]
+  groupLabel?: string
   groupNote?: string
   groupSubNote?: string
+  name: string
   register: UseFormMethods["register"]
+  type?: string
   validation?: RegisterOptions
-  fieldGroupClassName?: string
-  fieldClassName?: string
-  fieldLabelClassName?: string
-  dataTestId?: string
 }
 
 const FieldGroup = ({
@@ -75,7 +76,7 @@ const FieldGroup = ({
           type={type}
           id={item.id}
           defaultValue={item.value || item.id}
-          name={subfieldsExist() ? `${name}-${item.value}` : name}
+          name={subfieldsExist() || item.uniqueName ? `${name}-${item.value}` : name}
           onClick={(e) => {
             // We cannot reliably target an individual checkbox in a field group since they have the same name, so we keep track on our own
             if (e.currentTarget.checked) {
@@ -152,7 +153,7 @@ const FieldGroup = ({
     )
   }
   return (
-    <>
+    <div>
       {groupLabel && <label className="field-label--caps">{groupLabel}</label>}
       {groupNote && <p className="field-note mb-4">{groupNote}</p>}
 
@@ -176,7 +177,7 @@ const FieldGroup = ({
           {errorMessage}
         </ErrorMessage>
       )}
-    </>
+    </div>
   )
 }
 

package/src/global/markdown.scss

@@ -30,4 +30,24 @@
     list-style: disc;
     @apply ml-6;
   }
+
+  &.markdown-informational {
+    font-size: 0.9em;
+    @apply text-gray-750;
+
+    h3 {
+      @apply font-sans;
+      @apply font-bold;
+      @apply text-base;
+      @apply text-black;
+    }
+
+    li {
+      @apply mb-4;
+    }
+
+    a {
+      @apply underline;
+    }
+  }
 }

package/src/global/tables.scss

@@ -1,3 +1,62 @@
+/* Hat tip to this CSS solution:
+https://www.cssscript.com/pure-html5-css3-responsive-table-solution/ */
+
+//@screen md
+@media screen and (max-width: 767px) {
+  table.responsive-collapse {
+    thead {
+      @apply hidden;
+    }
+
+    tr {
+      @apply block;
+      @apply mb-6;
+    }
+
+    tr:nth-of-type(even) {
+      background: inherit;
+    }
+
+    td:nth-of-type(even) {
+      @apply bg-primary-lighter;
+    }
+
+    td {
+      @apply block;
+      @apply text-right;
+      border: 0px;
+      display: flex;
+      @apply py-2;
+    }
+
+    td:before {
+      @apply font-bold;
+      @apply uppercase;
+      content: attr(data-label);
+      text-align: left;
+      width: 50%;
+    }
+
+    td:last-child {
+      @apply border-b-0;
+    }
+  }
+  table.base {
+    td:nth-of-type(even) {
+      background: transparent;
+    }
+    tbody td {
+      @apply border-0;
+    }
+  }
+
+  tr.group-reserved td {
+    @apply border-l-8;
+    @apply border-solid;
+    @apply border-accent-warm;
+  }
+}
+
 table {
   @apply text-gray-750;
 
@@ -85,6 +144,183 @@ table {
       text-align: right;
     }
   }
+
+  &.stacked-table {
+    .stacked-table-cell-container {
+      td:before {
+        @apply text-base;
+        @apply text-gray-700;
+      }
+
+      @screen md {
+        @apply flex;
+        @apply flex-col;
+        @apply px-0;
+        @apply text-left;
+        @apply w-full;
+      }
+      width: 50%;
+      @apply text-right;
+      @apply pl-2;
+
+      .stacked-table-cell {
+        @apply font-semibold;
+        @apply text-gray-750;
+        @apply text-base;
+      }
+
+      .stacked-table-subtext {
+        @apply text-sm;
+        @apply text-gray-700;
+        @apply pl-1;
+        @apply font-normal;
+        @screen md {
+          @apply pl-0;
+        }
+      }
+
+      @apply pr-0;
+      @screen md {
+        @apply pr-3;
+      }
+    }
+
+    .stacked-table-header {
+      @apply px-0;
+      @apply text-base;
+      @apply text-gray-700;
+      @screen md {
+        @apply py-3;
+      }
+      @apply py-2;
+    }
+
+    thead {
+      @apply border-b;
+    }
+
+    td:last-child,
+    th:last-child {
+      .stacked-table-cell-container {
+        @apply text-right;
+        @apply pr-0;
+        @screen md {
+          width: auto;
+        }
+        width: 100%;
+      }
+    }
+  }
+
+  &.category-table {
+    thead {
+      height: 2rem;
+      @apply border-0;
+    }
+
+    .stacked-table-header {
+      @apply align-baseline;
+      @apply text-black;
+      @apply normal-case;
+      @apply px-0;
+      @apply pb-0;
+      @apply text-sm;
+      @screen md {
+        @apply py-3;
+      }
+      @apply pt-0;
+      @apply pb-2;
+    }
+
+    td:before {
+      @apply align-baseline;
+      @apply text-black;
+      @apply normal-case;
+      @apply px-0;
+      @apply pb-0;
+      @apply text-sm;
+      @apply pl-2;
+      @apply font-normal;
+    }
+
+    tr {
+      @apply mb-1;
+      td:first-child:before {
+        @apply pl-0;
+        @apply pr-2;
+        @apply font-semibold;
+        width: 50%;
+      }
+    }
+
+    td {
+      @md {
+        @apply py-3;
+      }
+      @apply py-0;
+    }
+
+    tbody td {
+      @apply border-0;
+    }
+
+    td:last-child,
+    th:last-child {
+      text-align: inherit;
+    }
+
+    .stacked-table-cell-container {
+      width: 50%;
+      @apply flex;
+      @apply flex-col;
+      @apply items-start;
+      @apply pl-2;
+      @apply text-left;
+      @screen md {
+        @apply pl-0;
+        @apply py-0;
+      }
+      .stacked-table-cell {
+        @screen md {
+          @apply text-base;
+        }
+        @apply text-sm;
+        @apply text-black;
+        @apply font-normal;
+      }
+      .stacked-table-subtext {
+        @apply pl-0;
+        @apply text-left;
+      }
+    }
+
+    td:last-child,
+    th:last-child {
+      .stacked-table-cell-container {
+        width: 50%;
+      }
+    }
+
+    tr {
+      td:first-child {
+        .stacked-table-cell:first-child {
+          @screen md {
+            display: block;
+          }
+          display: none;
+        }
+      }
+    }
+
+    @media screen and (max-width: 767px) {
+      td {
+        @apply pb-3;
+      }
+      td:first-child:before {
+        content: attr(data-cell);
+      }
+    }
+  }
 }
 
 table tr:nth-of-type(even) {
@@ -120,64 +356,6 @@ tr.group-reserved td:first-of-type {
   @apply border-accent-warm;
 }
 
-/* Hat tip to this CSS solution:
-https://www.cssscript.com/pure-html5-css3-responsive-table-solution/ */
-
-//@screen md
-@media screen and (max-width: 767px) {
-  table.responsive-collapse {
-    thead {
-      @apply hidden;
-    }
-
-    tr {
-      @apply block;
-      @apply mb-6;
-    }
-
-    tr:nth-of-type(even) {
-      background: inherit;
-    }
-
-    td:nth-of-type(even) {
-      @apply bg-primary-lighter;
-    }
-
-    td {
-      @apply block;
-      @apply text-right;
-      border: 0px;
-      display: flex;
-    }
-
-    td:before {
-      @apply font-bold;
-      @apply uppercase;
-      content: attr(data-label);
-      text-align: left;
-      width: 50%;
-    }
-
-    td:last-child {
-      @apply border-b-0;
-    }
-  }
-  table.base {
-    td:nth-of-type(even) {
-      background: transparent;
-    }
-    tbody td {
-      @apply border-0;
-    }
-  }
-
-  tr.group-reserved td {
-    @apply border-l-8;
-    @apply border-solid;
-    @apply border-accent-warm;
-  }
-}
-
 .table__thumbnail img {
   max-height: 80px;
   max-width: 142px;

package/src/global/text.scss

@@ -169,3 +169,10 @@ h1.title {
   @apply text-sm;
   @apply mb-3;
 }
+
+.category-header {
+  @apply font-alt-sans;
+  @apply font-semibold;
+  @apply text-gray-700;
+  @apply text-sm;
+}

package/src/headers/Heading.tsx

@@ -15,6 +15,7 @@ const HeaderStyleMap = {
   tableHeader: "table-header",
   tableSubheader: "table-subheader",
   sidebarHeader: "text-caps-underline",
+  categoryHeader: "category-header",
 }
 
 const Heading = (props: HeadingProps) => {

package/src/headers/SiteHeader.tsx

@@ -24,6 +24,7 @@ export interface SiteHeaderProps {
   dropdownItemClassName?: string
   homeURL: string
   imageOnly?: boolean
+  languageNavLabel?: string
   languages?: LangItem[]
   logoClass?: string
   logoSrc: string
@@ -423,7 +424,9 @@ const SiteHeader = (props: SiteHeaderProps) => {
 
   return (
     <header className={"site-header"}>
-      {props.languages && <LanguageNav languages={props.languages} />}
+      {props.languages && (
+        <LanguageNav ariaLabel={props.languageNavLabel} languages={props.languages} />
+      )}
 
       <div className={`navbar-notice ${!props.noticeMobile && `navbar-notice-hide`}`}>
         <div className="navbar-notice__text">{props.notice ?? ""}</div>