@bloom-housing/ui-components 5.1.1-alpha.7 → 6.0.0

package/CHANGELOG.md

@@ -3,6 +3,82 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.0.0](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.0...@bloom-housing/ui-components@6.0.0) (2022-08-25)
+
+
+* 2022-08-24 release (#2993) ([6f1deac](https://github.com/bloom-housing/bloom/commit/6f1deac5370fa8286b051b09431d153d22901b3a)), closes [#2993](https://github.com/bloom-housing/bloom/issues/2993) [#2821](https://github.com/bloom-housing/bloom/issues/2821) [#2764](https://github.com/bloom-housing/bloom/issues/2764) [#2767](https://github.com/bloom-housing/bloom/issues/2767) [#2787](https://github.com/bloom-housing/bloom/issues/2787) [#2769](https://github.com/bloom-housing/bloom/issues/2769) [#2781](https://github.com/bloom-housing/bloom/issues/2781) [#2827](https://github.com/bloom-housing/bloom/issues/2827) [Issue#2827](https://github.com/Issue/issues/2827) [#2788](https://github.com/bloom-housing/bloom/issues/2788) [#2842](https://github.com/bloom-housing/bloom/issues/2842) [#2822](https://github.com/bloom-housing/bloom/issues/2822) [#2847](https://github.com/bloom-housing/bloom/issues/2847) [#2830](https://github.com/bloom-housing/bloom/issues/2830) [#2788](https://github.com/bloom-housing/bloom/issues/2788) [#2842](https://github.com/bloom-housing/bloom/issues/2842) [#2827](https://github.com/bloom-housing/bloom/issues/2827) [Issue#2827](https://github.com/Issue/issues/2827) [#2822](https://github.com/bloom-housing/bloom/issues/2822) [#2846](https://github.com/bloom-housing/bloom/issues/2846) [#2851](https://github.com/bloom-housing/bloom/issues/2851) [#2594](https://github.com/bloom-housing/bloom/issues/2594) [#2812](https://github.com/bloom-housing/bloom/issues/2812) [#2799](https://github.com/bloom-housing/bloom/issues/2799) [#2828](https://github.com/bloom-housing/bloom/issues/2828) [#2843](https://github.com/bloom-housing/bloom/issues/2843) [#2827](https://github.com/bloom-housing/bloom/issues/2827) [#2875](https://github.com/bloom-housing/bloom/issues/2875) [#2859](https://github.com/bloom-housing/bloom/issues/2859) [#2848](https://github.com/bloom-housing/bloom/issues/2848) [#2785](https://github.com/bloom-housing/bloom/issues/2785)
+
+
+### BREAKING CHANGES
+
+* prop name change for header from "text" to "content"
+
+* chore(release): version
+
+ - @bloom-housing/shared-helpers@5.0.1-alpha.2
+ - @bloom-housing/partners@5.0.1-alpha.2
+ - @bloom-housing/public@5.0.1-alpha.2
+ - @bloom-housing/ui-components@5.0.1-alpha.1
+
+
+
+
+
+## [5.1.1-alpha.12](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.11...@bloom-housing/ui-components@5.1.1-alpha.12) (2022-08-24)
+
+
+### Features
+
+* show preference details on listing form ([#2989](https://github.com/bloom-housing/bloom/issues/2989)) ([b4b2b9e](https://github.com/bloom-housing/bloom/commit/b4b2b9ee75c4895ea5b0694dddbf0c8979c0e251))
+
+
+
+
+
+## [5.1.1-alpha.11](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.10...@bloom-housing/ui-components@5.1.1-alpha.11) (2022-08-23)
+
+
+* refactor!: preferences & programs data model merged (#2904) ([8e027ff](https://github.com/bloom-housing/bloom/commit/8e027ff905118f36c61bc0f974231d9bb8911131)), closes [#2904](https://github.com/bloom-housing/bloom/issues/2904)
+
+
+### BREAKING CHANGES
+
+* The preference and program entities have been merged into a single entity called MultiselectQuestion
+
+
+
+
+
+## [5.1.1-alpha.10](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.9...@bloom-housing/ui-components@5.1.1-alpha.10) (2022-08-23)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [5.1.1-alpha.9](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.8...@bloom-housing/ui-components@5.1.1-alpha.9) (2022-08-22)
+
+
+### Bug Fixes
+
+* add a11y linting tools and fix errors ([#2974](https://github.com/bloom-housing/bloom/issues/2974)) ([e583d12](https://github.com/bloom-housing/bloom/commit/e583d1283511c83dd48f48f934be9a7794a67e74))
+
+
+
+
+
+## [5.1.1-alpha.8](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.7...@bloom-housing/ui-components@5.1.1-alpha.8) (2022-08-18)
+
+
+### Features
+
+* **expandabletext:** add classname to expandable text button ([#2965](https://github.com/bloom-housing/bloom/issues/2965)) ([6d4b8a7](https://github.com/bloom-housing/bloom/commit/6d4b8a7132825c1aa3abcc0368529557cb3d2647))
+
+
+
+
+
 ## [5.1.1-alpha.7](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.6...@bloom-housing/ui-components@5.1.1-alpha.7) (2022-08-18)
 
 

package/index.ts

@@ -1,5 +1,6 @@
 /* Actions */
 export * from "./src/actions/Button"
+export * from "./src/actions/ButtonGroup"
 export * from "./src/actions/ExpandableText"
 export * from "./src/actions/LinkButton"
 export * from "./src/actions/LocalizedLink"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "5.1.1-alpha.7",
+  "version": "6.0.0",
   "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",
@@ -85,6 +85,7 @@
     "@types/react-dom": "^16.9.5",
     "@types/react-text-mask": "^5.4.6",
     "@types/react-transition-group": "^4.4.0",
+    "@types/sanitize-html": "^2.6.2",
     "ag-grid-community": "^26.0.0",
     "ag-grid-react": "^26.0.0",
     "aria-autocomplete": "^1.4.0",
@@ -106,9 +107,10 @@
     "react-tabs": "^3.2.2",
     "react-text-mask": "^5.4.3",
     "react-transition-group": "^4.4.1",
+    "sanitize-html": "^2.7.1",
     "tailwindcss": "2.2.10",
     "ts-jest": "^26.4.1",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "fd80654f0c4e2b3449734cb6ac7927a078304f47"
+  "gitHead": "4144d01ef184f31f6fd2c943ee2487025170126c"
 }

package/src/actions/ButtonGroup.docs.mdx

@@ -0,0 +1,30 @@
+import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { Swatch } from "../prototypes/Swatch"
+import { ButtonGroup } from "./ButtonGroup"
+
+# ButtonGroup
+
+The button group component lets you place multiple buttons along a horizontal or vertical (mobile primarily) axis and group/space buttons according to some simple flex rules.
+
+<Canvas>
+  <Story id="actions-button-group--two-columns" />
+</Canvas>
+
+<br />
+<br />
+
+## Component Properties
+
+<ArgsTable of={ButtonGroup} />
+
+## Theming Variables
+
+You can apply CSS variables to the `.button-group` selector to customize the appearance of the component.
+
+| Name                       | Type  | Description                                                                         | Default                                             |
+| -------------------------- | ----- | ----------------------------------------------------------------------------------- | --------------------------------------------------- |
+| `--background-color`       | Color | Background behind the buttons                                                       | <Swatch colorVar="--bloom-color-primary-lighter" /> |
+| `--padding-block`          | Size  | The space around the buttons in the block (vertical) direction                      | `--bloom-s8`                                        |
+| `--padding-inline-desktop` | Size  | The space around the buttons in the inline (horizontal) direction on larger screens | `--bloom-s16`                                       |
+| `--padding-inline-mobile`  | Size  | The space around the buttons in the inline (horizontal) direction on small screens  | `--bloom-s4`                                        |
+| `--inner-button-gap`       | Size  | The gap between buttons whether in separate columns or within the same column       | `--bloom-s3`                                        |

package/src/actions/ButtonGroup.scss

@@ -0,0 +1,61 @@
+.button-group {
+  --background-color: var(--bloom-color-primary-lighter);
+  --padding-block: var(--bloom-s8);
+  --padding-inline-desktop: var(--bloom-s16);
+  --padding-inline-mobile: var(--bloom-s4);
+  --inner-button-gap: var(--bloom-s3);
+
+  --padding-inline: var(--padding-inline-desktop);
+
+  @media (max-width: $screen-sm) {
+    --padding-inline: var(--padding-inline-mobile);
+  }
+
+  background-color: var(--background-color);
+  padding-block: var(--padding-block);
+  padding-inline: var(--padding-inline);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--inner-button-gap);
+
+  & > .button-group__column {
+    display: flex;
+    gap: var(--inner-button-gap);
+
+    .button {
+      @media (max-width: $screen-sm) {
+        --normal-rounded: var(--small-rounded);
+        --normal-padding: var(--small-padding);
+        --normal-font-size: var(--small-font-size);
+      }
+    }
+  }
+
+  &.has-between-spacing {
+    justify-content: space-between;
+  }
+
+  &.has-even-spacing {
+    justify-content: space-evenly;
+  }
+
+  &.has-fullwidth-mobile-buttons {
+    &,
+    & > .button-group__column {
+      @media (max-width: $screen-sm) {
+        flex-direction: column;
+
+        .button {
+          width: 100%;
+        }
+      }
+    }
+  }
+
+  &.is-reversed {
+    &,
+    & > .button-group__column {
+      flex-direction: row-reverse;
+    }
+  }
+}

package/src/actions/ButtonGroup.tsx

@@ -0,0 +1,42 @@
+import React from "react"
+import "./ButtonGroup.scss"
+
+export enum ButtonGroupSpacing {
+  between = "between",
+  even = "even",
+}
+
+export interface ButtonGroupProps {
+  /** Pass either Button components in, or fragments which can contain one or more buttons */
+  columns: React.ReactNodeArray
+  /** Between spacing pushes the columns far apart, even spacing keeps them closer together */
+  spacing?: ButtonGroupSpacing
+  /** When true, buttons will collapse to a single column on small screens and go full-width */
+  fullwidthMobile?: boolean
+  /** When true, the flex ordering of columns will reverse (aka RTL) */
+  reversed?: boolean
+}
+
+const ButtonGroup = ({
+  spacing = ButtonGroupSpacing.between,
+  columns,
+  fullwidthMobile,
+  reversed,
+}: ButtonGroupProps) => {
+  const spacingClassName = `has-${spacing}-spacing`
+  const classNames = ["button-group", spacingClassName]
+  if (fullwidthMobile) classNames.push("has-fullwidth-mobile-buttons")
+  if (reversed) classNames.push("is-reversed")
+
+  return (
+    <div className={classNames.join(" ")}>
+      {columns.map((column, index) => (
+        <div key={index} className="button-group__column">
+          {column}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export { ButtonGroup as default, ButtonGroup }

package/src/actions/ExpandableText.tsx

@@ -12,6 +12,7 @@ export interface ExpandableTextProps {
     readLess: string
   }
   markdownProps?: MarkdownOptions
+  buttonClassName?: string
 }
 
 const getText = (text: string, expanded: boolean, maxLength: number) => {
@@ -29,12 +30,18 @@ const getText = (text: string, expanded: boolean, maxLength: number) => {
 const moreLessButton = (
   expanded: boolean,
   setExpanded: (newValue: boolean) => void,
-  strings: ExpandableTextProps["strings"]
+  strings: ExpandableTextProps["strings"],
+  buttonClassName: ExpandableTextProps["buttonClassName"]
 ) => {
+  const classes = ["button-toggle ml-4"]
+  if (buttonClassName) {
+    classes.push(buttonClassName)
+  }
+
   return (
-    <span className="button-toggle" onClick={() => setExpanded(!expanded)}>
+    <button className={classes.join(" ")} onClick={() => setExpanded(!expanded)}>
       {expanded ? strings?.readLess : strings?.readMore}
-    </span>
+    </button>
   )
 }
 
@@ -46,7 +53,7 @@ const ExpandableText = (props: ExpandableTextProps) => {
   if (!props.children) return null
 
   if (props.children.length > maxLength) {
-    button = moreLessButton(expanded, setExpanded, props.strings)
+    button = moreLessButton(expanded, setExpanded, props.strings, props.buttonClassName)
   }
   return (
     <div className={`expandable-text ${props?.className}`}>

package/src/blocks/FormCard.scss

@@ -69,7 +69,6 @@
 
   @screen print {
     @apply py-2;
-    @apply px-0;
   }
 }
 
@@ -87,13 +86,7 @@
 }
 
 .form-card__group {
-  @screen md {
-    @apply px-8;
-  }
-
-  @screen print {
-    @apply px-0;
-  }
+  @apply px-8;
 }
 
 .form-card__header {

package/src/blocks/MediaCard.scss

@@ -26,6 +26,10 @@
   cursor: pointer;
 }
 
+.media-card__header-container {
+  width: 100%;
+}
+
 .media-card__icon-container {
   display: flex;
   justify-content: center;

package/src/blocks/MediaCard.tsx

@@ -16,13 +16,17 @@ const MediaCard = (props: MediaCardProps) => {
   if (props.className) wrapperClasses.push(props.className)
   return (
     <div className={wrapperClasses.join(" ")}>
-      <span onClick={props.handleClick}>
+      <button
+        onClick={props.handleClick}
+        className={"media-card__header-container"}
+        aria-label={"Launch video"}
+      >
         <div className="media-card__header">
           <div className="media-card__icon-container">
             <Icon symbol={props.icon ?? faCirclePlay} size="2xl" fill="white" />
           </div>
         </div>
-      </span>
+      </button>
       <div className="media-card__body">
         <h3 className="media-card__title">{props.title}</h3>
         <div className={"media-card__subtitle"}>{props.subtitle}</div>

package/src/forms/Form.tsx

@@ -13,6 +13,7 @@ const Form = ({ id, children, className, onSubmit }: FormProps) => {
   }
 
   return (
+    // eslint-disable-next-line  jsx-a11y/no-noninteractive-element-interactions
     <form id={id} className={className} onSubmit={onSubmit} onKeyPress={onKeyPress} noValidate>
       {children}
     </form>

package/src/headers/SiteHeader.tsx

@@ -104,7 +104,11 @@ const SiteHeader = (props: SiteHeaderProps) => {
       return (
         <>
           {option.iconSrc && isDesktop && (
-            <img src={option.iconSrc} className={option.iconClassName} />
+            <img
+              src={option.iconSrc}
+              className={option.iconClassName}
+              alt={`${option.title} icon`}
+            />
           )}
           {option.title}
         </>
@@ -143,7 +147,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
                 }
                 dropdownOptionKeyDown(event, index)
               }}
-              data-test-id={`${option.title}-${index}`}
+              data-test-id={`${option.title}`}
             >
               {dropdownOptionContent(option)}
             </button>
@@ -297,7 +301,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
                   className={`navbar-link ${props.menuItemClassName && props.menuItemClassName}`}
                   href={menuLink.href}
                   key={`${menuLink.title}-${index}`}
-                  data-test-id={`${menuLink.title}-${index}`}
+                  data-test-id={`${menuLink.title}`}
                 >
                   {menuContent}
                 </LinkComponent>
@@ -336,7 +340,8 @@ const SiteHeader = (props: SiteHeaderProps) => {
                 }}
                 onMouseEnter={() => changeMenuShow(menuLink.title, activeMenus, setActiveMenus)}
                 onMouseLeave={() => changeMenuShow(menuLink.title, activeMenus, setActiveMenus)}
-                data-test-id={`${menuLink.title}-${index}`}
+                role={"button"}
+                data-test-id={`${menuLink.title}`}
               >
                 {menuContent}
               </span>

package/src/locales/general.json

@@ -345,6 +345,7 @@
   "application.programs.rentBasedOnIncome.flatRent.description": "I would like to apply for an affordable flat rent apartment, which has a set monthly rent amount that is below market rate. Note - applicants with Section 8 Mobile Housing Choice Vouchers (HCV) are welcome to apply.",
   "application.programs.rentBasedOnIncome.flatRent.label": "Affordable apartment with flat rent",
   "application.programs.rentBasedOnIncome.summary": "Flat Rent & Rent Based on Income",
+  "application.programs.selectBelow": "Please select all that apply:",
   "application.programs.servedInMilitary.doNotConsider.label": "No",
   "application.programs.servedInMilitary.servedInMilitary.label": "Yes",
   "application.programs.servedInMilitary.summary": "Veteran of the US Military",
@@ -909,6 +910,7 @@
   "t.preferNotToSay": "Prefer not to say",
   "t.preferences": "Preferences",
   "t.previous": "Previous",
+  "t.programs": "Programs",
   "t.propertyAmenities": "Property Amenities",
   "t.range": "%{from} to %{to}",
   "t.readLess": "read less",

package/src/navigation/ProgressNav.scss

@@ -9,7 +9,7 @@
 
 .progress-nav__item {
   @apply text-2xs;
-  @apply px-2;
+  @apply px-1;
   @apply py-3;
   @apply relative;
   @apply text-center;
@@ -22,6 +22,7 @@
   @screen md {
     @apply text-sm;
     @apply p-0;
+    @apply px-2;
   }
 
   &:before {
@@ -71,7 +72,7 @@
       @apply top-0;
     }
 
-    a {
+    .progress-nav__item-container {
       @apply text-black;
       @apply font-bold;
     }
@@ -85,13 +86,13 @@
       @apply top-0;
     }
 
-    a {
+    .progress-nav__item-container {
       @apply pointer-events-none;
       @apply cursor-default;
     }
   }
 
-  a {
+  .progress-nav__item-container {
     @apply pt-4;
     @apply pl-1;
     @apply text-gray-700;

package/src/navigation/ProgressNav.tsx

@@ -27,10 +27,10 @@ const ProgressNavItem = (props: {
 
   return (
     <li className={`progress-nav__item ${bgColor}`}>
-      <a aria-disabled={bgColor === "is-disabled"} href={"#"}>
+      <span aria-disabled={bgColor === "is-disabled"} className={"progress-nav__item-container"}>
         {srText}
         {props.label}
-      </a>
+      </span>
     </li>
   )
 }

package/src/overlays/Drawer.scss

@@ -104,3 +104,10 @@
   @apply pb-4;
   @apply overflow-y-visible;
 }
+
+.drawer__small {
+  width: 100%;
+  @screen md {
+    width: 45rem;
+  }
+}

package/src/overlays/Modal.scss

@@ -52,7 +52,6 @@
     max-height: calc(100vh - 200px);
     overflow-y: auto;
   }
-
   p {
     color: var(--content-font-color);
   }

package/src/overlays/Overlay.tsx

@@ -39,6 +39,9 @@ const OverlayInner = (props: OverlayProps) => {
       onClick={(e) => {
         if (e.target === e.currentTarget) closeHandler()
       }}
+      onKeyPress={(e) => {
+        if (e.key === "Escape") closeHandler()
+      }}
     >
       <div className={`fixed-overlay__inner ${props.slim ? "fixed-overlay__inner-slim" : ""}`}>
         <FocusLock>{props.children}</FocusLock>

package/src/page_components/forgot-password/FormForgotPassword.tsx

@@ -95,9 +95,9 @@ const FormForgotPassword = ({
               </Button>
             </div>
             <div className="text-center mt-6">
-              <a href="#" onClick={() => router.back()}>
+              <Button onClick={() => router.back()} unstyled={true}>
                 {t("t.cancel")}
-              </a>
+              </Button>
             </div>
           </section>
         </Form>

package/src/page_components/listing/ListingMap.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect, useMemo } from "react"
+import React, { useState, useCallback, useEffect } from "react"
 import "mapbox-gl/dist/mapbox-gl.css"
 import MapGL, { Marker } from "react-map-gl"
 

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

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { Heading, HeaderType, HeadingProps } from "../../../headers/Heading"
+import { Heading, HeadingProps } from "../../../headers/Heading"
 
 export interface SidebarBlockProps extends Omit<HeadingProps, "children" | "className"> {
   children: React.ReactNode

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

@@ -1,5 +1,5 @@
 import * as React from "react"
-import Heading from "../../../../headers/Heading"
+import { Heading } from "../../../../headers/Heading"
 
 export type EventType = {
   timeString?: string

package/src/page_components/sign-in/FormSignIn.tsx

@@ -88,7 +88,7 @@ const FormSignIn = ({
 
           <aside className="float-right text-tiny font-semibold">
             <LinkComponent href="/forgot-password">
-              <a>{t("authentication.signIn.forgotPassword")}</a>
+              {t("authentication.signIn.forgotPassword")}
             </LinkComponent>
           </aside>
 

package/src/page_components/sign-in/FormSignInMFAType.tsx

@@ -31,7 +31,7 @@ export type FormSignInMFAControl = {
 const FormSignInMFAType = ({
   onSubmit,
   networkError,
-  control: { errors, register, handleSubmit, setValue },
+  control: { errors, register, handleSubmit },
   emailOnClick,
   smsOnClick,
 }: FormSignInMFAProps) => {

package/src/prototypes/Swatch.tsx

@@ -3,6 +3,7 @@ import * as React from "react"
 export const Swatch = (props: { colorVar: string }) => (
   <span
     style={{ backgroundColor: `var(${props.colorVar})` }}
+    title={props.colorVar}
     className="w-6 border border-gray-500 inline-block"
   >
     &nbsp;

package/src/sections/GridSection.tsx

@@ -22,7 +22,6 @@ const GridCell = (props: GridCellProps) => {
 
 export interface GridSectionProps {
   title?: React.ReactNode
-  edit?: string
   subtitle?: string
   description?: string
   tinted?: boolean
@@ -67,11 +66,6 @@ const GridSection = (props: GridSectionProps) => {
       {(props.title || props.subtitle) && (
         <header className={headerClasses.join(" ")}>
           {props.title && <h2 className="grid-section__title">{props.title}</h2>}
-          {props.edit && (
-            <span className="ml-auto">
-              <a className="edit-link">{props.edit}</a>
-            </span>
-          )}
           {props.subtitle && <h3 className={subtitleClasses.join(" ")}>{props.subtitle}</h3>}
           {props.description && (
             <span className={"grid-section__description"}>{props.description}</span>