@bloom-housing/ui-components 5.1.1-alpha.6 → 5.1.1-alpha.9

package/CHANGELOG.md

@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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)
+
+
+### Bug Fixes
+
+* image width fix for tablet screen sizes ([#2970](https://github.com/bloom-housing/bloom/issues/2970)) ([feac019](https://github.com/bloom-housing/bloom/commit/feac019b25a476221a7ad77518d1fa185a75b27f))
+
+
+
+
+
 ## [5.1.1-alpha.6](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.5...@bloom-housing/ui-components@5.1.1-alpha.6) (2022-08-16)
 
 **Note:** Version bump only for package @bloom-housing/ui-components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "5.1.1-alpha.6",
+  "version": "5.1.1-alpha.9",
   "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",
@@ -110,5 +110,5 @@
     "ts-jest": "^26.4.1",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "c01076eb2c02bc0bb5b3c5b3928424d34112b98e"
+  "gitHead": "b9ed99bd1b58d8057bae8782616aa43f53f1294e"
 }

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/ImageCard.scss

@@ -142,7 +142,7 @@
 .image-card--leader {
   width: 100%;
 
-  @media (min-width: $screen-sm) {
+  @media (min-width: $screen-md) {
     width: var(--bloom-width-2-3rd);
     padding-block-start: var(--bloom-s8);
     padding-inline-end: var(--bloom-s8);

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}
         </>
@@ -337,6 +341,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
                 onMouseEnter={() => changeMenuShow(menuLink.title, activeMenus, setActiveMenus)}
                 onMouseLeave={() => changeMenuShow(menuLink.title, activeMenus, setActiveMenus)}
                 data-test-id={`${menuLink.title}-${index}`}
+                role={"button"}
               >
                 {menuContent}
               </span>

package/src/navigation/ProgressNav.scss

@@ -71,7 +71,7 @@
       @apply top-0;
     }
 
-    a {
+    .progress-nav__item-container {
       @apply text-black;
       @apply font-bold;
     }
@@ -85,13 +85,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/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/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/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>