@bloom-housing/ui-components 9.0.0-alpha.1 → 9.0.1

package/src/blocks/ImageCard.scss

@@ -1,4 +1,5 @@
 @import "../global/mixins.scss";
+@import "../global/accessibility.scss";
 
 .image-card {
   /* Component Variables */
@@ -18,6 +19,11 @@
   background-color: var(--default-background-color);
   border-radius: var(--border-radius);
 
+  button:focus {
+    outline: none;
+    box-shadow: 0 0 3px 4px var(--bloom-color-accent-cool);
+  }
+
   img {
     border-radius: var(--border-radius);
     width: 100%;
@@ -98,7 +104,8 @@
       flex-direction: column;
       align-items: center;
       justify-content: center;
-
+      color: var(--bloom-color-white);
+      background: rgba(0, 0, 0, 0.6);
       @media (max-width: $screen-sm) {
         font-size: var(--bloom-font-size-xs);
         line-height: var(--bloom-line-height-none);
@@ -119,6 +126,7 @@
   justify-content: var(--tags-justify);
   position: absolute;
   top: 0;
+  z-index: 10;
   width: 100%;
   margin-block-start: var(--bloom-s1);
   padding-inline: var(--bloom-s4);
@@ -157,4 +165,22 @@
   --footer-justify: center;
   --modal-border: none;
   --modal-shadow: none;
+  @media (min-width: $screen-md) {
+    --scroll-max-height: calc(80vh - 200px);
+    max-width: var(--bloom-width-5xl);
+  }
+  section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  button {
+    outline: none;
+  }
+  svg {
+    @extend .sr-only;
+  }
+  footer button:focus {
+    box-shadow: 0 0 3px 4px var(--bloom-color-accent-cool);
+  }
 }

package/src/blocks/ImageCard.stories.tsx

@@ -3,7 +3,7 @@ import { BADGES } from "../../.storybook/constants"
 import { ImageCard } from "./ImageCard"
 import { t } from "../helpers/translator"
 import { ApplicationStatusType } from "../global/ApplicationStatusType"
-import { IconFillColors } from "../icons/Icon"
+import { IconFillColors, UniversalIconType } from "../icons/Icon"
 import ImageCardDocumentation from "./ImageCard.docs.mdx"
 
 export default {
@@ -103,6 +103,32 @@ export const withMultipleTags = () => (
   />
 )
 
+export const withTooltip = () => (
+  <div style={{ margin: "5rem" }}>
+    <ImageCard
+      href="/listings"
+      imageUrl="/images/listing.jpg"
+      tags={[
+        {
+          text: "Label",
+        },
+        {
+          text: "Label2",
+          iconType: "globe" as UniversalIconType,
+          iconColor: IconFillColors.white,
+          tooltip: {
+            id: "tooltip",
+            text: "Here is some helpful tooltip content. Here is even more helpful tooltip content.",
+          },
+        },
+      ]}
+      statuses={[
+        { status: ApplicationStatusType.Closed, content: t("listings.applicationsClosed") },
+      ]}
+    />
+  </div>
+)
+
 export const withLongTagsAndIcons = () => (
   <ImageCard
     href="/listings"

package/src/blocks/ImageCard.tsx

@@ -3,6 +3,7 @@ import { LocalizedLink } from "../actions/LocalizedLink"
 import { ApplicationStatus } from "../notifications/ApplicationStatus"
 import "./ImageCard.scss"
 import { Tag } from "../text/Tag"
+import { TooltipProps, Tooltip } from "./Tooltip"
 import { ApplicationStatusType } from "../global/ApplicationStatusType"
 import { AppearanceSizeType, AppearanceStyleType } from "../global/AppearanceTypes"
 import { Icon, IconFillColors, UniversalIconType } from "../icons/Icon"
@@ -18,11 +19,14 @@ export interface StatusBarType {
   iconType?: UniversalIconType
 }
 
+export type ImageTagTooltip = Pick<TooltipProps, "id" | "text">
+
 export interface ImageTag {
   text?: string
   iconType?: UniversalIconType
   iconColor?: string
   styleType?: AppearanceStyleType
+  tooltip?: ImageTagTooltip
 }
 
 export interface ImageItem {
@@ -80,11 +84,7 @@ const ImageCard = (props: ImageCardProps) => {
         />
       )
     })
-    return (
-      <aside className="image-card__status" aria-label={`${props.description || ""} Statuses`}>
-        {statuses}
-      </aside>
-    )
+    return <aside aria-label={`${props.description || ""} Statuses`}>{statuses}</aside>
   }
 
   const innerClasses = ["image-card__inner"]
@@ -147,7 +147,7 @@ const ImageCard = (props: ImageCardProps) => {
                     ? `${props.images.length - 2} ${props.moreImagesDescription}`
                     : "More Images"
                 }
-                data-testid="open-modal-button"
+                data-test-id="open-modal-button"
                 onClick={() => {
                   setShowModal(true)
                 }}
@@ -158,20 +158,34 @@ const ImageCard = (props: ImageCardProps) => {
         {getStatuses()}
         <div className="image-card-tag__wrapper">
           {props.tags?.map((tag, index) => {
-            return (
-              <React.Fragment key={index}>
-                <Tag styleType={tag.styleType || AppearanceStyleType.warning}>
-                  {tag.iconType && (
-                    <Icon
-                      size={"medium"}
-                      symbol={tag.iconType}
-                      fill={tag.iconColor ?? IconFillColors.primary}
-                    />
-                  )}
-                  {tag.text}
-                </Tag>
-              </React.Fragment>
+            const tagContent = (
+              <Tag
+                styleType={tag.styleType || AppearanceStyleType.warning}
+                ariaLabel={
+                  tag.tooltip ? `${tag.text || ""} - ${tag.tooltip?.text || ""}` : undefined
+                }
+              >
+                {tag.iconType && (
+                  <Icon
+                    size={"medium"}
+                    symbol={tag.iconType}
+                    fill={tag.iconColor ?? IconFillColors.primary}
+                    className={"mr-2"}
+                  />
+                )}
+                {tag.text}
+              </Tag>
             )
+
+            if (tag.tooltip) {
+              return (
+                <Tooltip key={index} className="mt-3" {...tag.tooltip}>
+                  {tagContent}
+                </Tooltip>
+              )
+            }
+
+            return <React.Fragment key={index}>{tagContent}</React.Fragment>
           })}
         </div>
       </div>
@@ -179,7 +193,7 @@ const ImageCard = (props: ImageCardProps) => {
         <Modal
           open={showModal}
           title={props.modalAriaTitle || "Images"}
-          scrollable={true}
+          scrollableModal={true}
           onClose={() => setShowModal(!showModal)}
           className="image-card__overlay"
           modalClassNames="image-card__gallery-modal"
@@ -191,24 +205,21 @@ const ImageCard = (props: ImageCardProps) => {
             </Button>,
           ]}
         >
-          {props.images &&
-            props.images.map((image, index) => (
-              <p key={index} className="mb-7">
-                <picture>
-                  {image.mobileUrl && (
-                    <source media="(max-width: 767px)" srcSet={image.mobileUrl} />
-                  )}
-                  <img
-                    src={image.url}
-                    alt={
-                      image.description
-                        ? image.description
-                        : `${props.description || ""} - photo ${index + 1}`
-                    }
-                  />
-                </picture>
-              </p>
-            ))}
+          {props.images?.map((image, index) => (
+            <p key={index} className="mb-7">
+              <picture>
+                {image.mobileUrl && <source media="(max-width: 767px)" srcSet={image.mobileUrl} />}
+                <img
+                  src={image.url}
+                  alt={
+                    image.description
+                      ? image.description
+                      : `${props.description || ""} - photo ${index + 1}`
+                  }
+                />
+              </picture>
+            </p>
+          ))}
         </Modal>
       )}
     </>

package/src/blocks/InfoCard.scss

@@ -46,3 +46,21 @@
     margin-bottom: var(--bloom-s4);
   }
 }
+
+.info-card__columns {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.info-card__column {
+  flex: 1 1 0%;
+}
+
+.info-card__column-2 {
+  flex: 1 1 100%;
+  margin-top: var(--bloom-s4);
+  margin-right: var(--bloom-s4);
+  @media (min-width: 440px) {
+    flex: 1 1 45%;
+  }
+}

package/src/blocks/InfoCard.stories.tsx

@@ -20,6 +20,7 @@ export const Default = () => (
   <>
     <InfoCard
       title="My Card"
+      subtitle="Subtitle"
       externalHref="http://google.com"
       className="is-normal-primary-lighter"
     >
@@ -34,6 +35,17 @@ More content
   </>
 )
 
+export const NoChildren = () => (
+  <>
+    <InfoCard
+      title="My Card"
+      subtitle="Subtitle"
+      externalHref="http://google.com"
+      className="is-normal-primary-lighter"
+    />
+  </>
+)
+
 export const WithMarkdown = () => (
   <InfoCard title="My Card" externalHref="http://google.com" className="is-normal-primary-lighter">
     {`

package/src/blocks/InfoCard.tsx

@@ -7,7 +7,7 @@ export interface InfoCardProps {
   subtitle?: string
   externalHref?: string
   className?: string
-  children: React.ReactNode
+  children?: React.ReactNode
 }
 
 const InfoCard = (props: InfoCardProps) => {
@@ -28,7 +28,7 @@ const InfoCard = (props: InfoCardProps) => {
         ) : (
           <h3 className="info-card__title">{props.title}</h3>
         )}
-        {props.subtitle && <span className={"text-xs text-gray-700"}>{props.subtitle}</span>}
+        {props.subtitle && <span className={"text-sm text-gray-700"}>{props.subtitle}</span>}
       </div>
       {typeof props.children == "string" ? (
         <div className="markdown">

package/src/blocks/Tooltip.scss

@@ -0,0 +1,43 @@
+.tooltip {
+  @apply relative;
+  display: inline-block;
+  width: fit-content;
+}
+
+.tooltip__element {
+  @apply w-full;
+  @apply fixed;
+  @apply bg-primary-dark;
+  @apply text-white;
+  @apply rounded;
+  @apply p-2;
+  @apply text-sm;
+  @apply font-bold;
+  @apply text-center;
+  @apply normal-case;
+  @apply opacity-0;
+  @apply invisible;
+  transform: translate(-50%, calc(-100% - 10px * 2));
+
+  max-width: 280px;
+  transition: opacity 0.2s;
+
+  &--visible {
+    @apply opacity-100;
+    @apply visible;
+  }
+
+  &::before {
+    content: "";
+    @apply absolute;
+    @apply bottom-0;
+    @apply w-0;
+    @apply h-0;
+    @apply border-solid;
+    left: 50%;
+    bottom: -8px;
+    transform: translateX(-50%);
+    border-width: 10px 7px 0 7px;
+    border-color: theme("colors.primary-dark") transparent transparent transparent;
+  }
+}

package/src/blocks/Tooltip.tsx

@@ -0,0 +1,65 @@
+import React, { useState, useRef, useEffect } from "react"
+import useKeyPress from "../helpers/useKeyPress"
+import "./Tooltip.scss"
+
+export interface TooltipProps {
+  className?: string
+  id: string
+  text: string
+}
+
+export interface TooltipPosition {
+  top: number
+  left: number
+}
+
+const Tooltip = ({ className, id, text, children }: React.PropsWithChildren<TooltipProps>) => {
+  const [position, setPosition] = useState<TooltipPosition | null>(null)
+  const childrenWrapperRef = useRef<HTMLDivElement>(null)
+
+  const show = () => {
+    const { x, y, width, height } = childrenWrapperRef.current?.getBoundingClientRect() || {}
+
+    if (x && y && width && height) {
+      setPosition({ top: y, left: x + width / 2 })
+    }
+  }
+
+  const hide = () => setPosition(null)
+
+  useKeyPress("Escape", () => hide())
+
+  useEffect(() => {
+    window.addEventListener("scroll", () => hide())
+
+    return () => {
+      window.removeEventListener("scroll", () => hide())
+    }
+  }, [])
+
+  return (
+    <div
+      className={`tooltip ${className || ""}`}
+      onFocus={show}
+      onMouseEnter={show}
+      onBlur={hide}
+      onMouseLeave={hide}
+    >
+      <div
+        className={`tooltip__element ${position ? "tooltip__element--visible" : ""}`}
+        style={position || {}}
+        role="tooltip"
+        id={id}
+        data-test-id="tooltip-element"
+      >
+        {text}
+      </div>
+
+      <div className="tooltip__children" data-test-id="tooltip-children" ref={childrenWrapperRef}>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export { Tooltip as default, Tooltip }

package/src/blocks/ViewItem.tsx

@@ -23,14 +23,14 @@ const ViewItem = (props: ViewItemProps) => {
   if (props.truncated) valueClassName += " is-truncated"
 
   return (
-    <div id={props.id} className={viewItemClasses.join(" ")} data-testid={props.dataTestId}>
+    <div id={props.id} className={viewItemClasses.join(" ")} data-test-id={props.dataTestId}>
       {props.label && (
         <span className={`view-item__label ${props.error ? "text-alert text-sm" : ""}`}>
           {props.label}
         </span>
       )}
       {props.children && (
-        <span className={valueClassName} data-testid={props.dataTestId}>
+        <span className={valueClassName} data-test-id={props.dataTestId}>
           {props.children}
         </span>
       )}

package/src/forms/Dropzone.tsx

@@ -59,7 +59,7 @@ const Dropzone = (props: DropzoneProps) => {
         <progress className="dropzone__progress" max="100" value={props.progress}></progress>
       ) : (
         <div className={dropzoneClasses.join(" ")} {...getRootProps()}>
-          <input id={props.id} {...getInputProps()} data-testid={"dropzone-input"} />
+          <input id={props.id} {...getInputProps()} data-test-id={"dropzone-input"} />
           {isDragActive ? (
             <p>{props.strings?.dropHere ?? t("t.dropFilesHere")}</p>
           ) : (

package/src/forms/Field.tsx

@@ -138,7 +138,7 @@ const Field = (props: FieldProps) => {
           onPaste={props.onPaste}
           onDrop={props.onDrop}
           onChange={props.onChange}
-          data-testid={props.dataTestId}
+          data-test-id={props.dataTestId}
           {...inputProps}
           hidden={props.hidden}
         />

package/src/forms/FieldGroup.tsx

@@ -63,8 +63,8 @@ const FieldGroup = ({
 }: FieldGroupProps) => {
   // Always default align two-option radio groups side by side
   if (fields?.length === 2) {
-    fieldGroupClassName = `${fieldGroupClassName || ""} flex`
-    fieldClassName = `${fieldClassName || ""} flex-initial mr-4`
+    fieldGroupClassName = `${fieldGroupClassName} flex`
+    fieldClassName = `${fieldClassName} flex-initial mr-4`
   }
 
   const [checkedInputs, setCheckedInputs] = useState<string[]>([])
@@ -82,7 +82,7 @@ const FieldGroup = ({
           type={type}
           id={item.id}
           defaultValue={item.value || item.id}
-          name={subfieldsExist() || item.uniqueName ? `${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) {
@@ -95,12 +95,12 @@ const FieldGroup = ({
           disabled={item.disabled}
           ref={register(validation)}
           {...item.inputProps}
-          data-testid={item.dataTestId ?? dataTestId}
+          data-test-id={item.dataTestId ?? dataTestId}
         />
         <label
           htmlFor={item.id}
-          className={`font-semibold ${fieldLabelClassName || ""} ${
-            item.disabled ? "text-gray-600 cursor-not-allowed" : ""
+          className={`font-semibold ${fieldLabelClassName} ${
+            item.disabled && "text-gray-600 cursor-not-allowed"
           }`}
         >
           {item.label}
@@ -150,8 +150,8 @@ const FieldGroup = ({
         {item.additionalText && checkedInputs.indexOf(item.label) >= 0 && (
           <Field
             id={item.id}
-            key={`${item.value || ""}-additionalText`}
-            name={`${name}-${item.value || ""}`}
+            key={`${item.value}-additionalText`}
+            name={`${name}-${item.value}`}
             register={register}
             defaultValue={item.defaultText}
             placeholder={strings?.description ?? t("t.description")}
@@ -168,12 +168,12 @@ const FieldGroup = ({
       {groupLabel && <label className="text__caps-spaced">{groupLabel}</label>}
       {groupNote && <p className="field-note mb-4">{groupNote}</p>}
 
-      <div className={`field ${error ? "error" : ""} ${fieldGroupClassName || ""} mb-0`}>
+      <div className={`field ${error && "error"} ${fieldGroupClassName || ""} mb-0`}>
         {fields?.map((item) => (
           <div className={`field ${fieldClassName || ""} mb-1`} key={item.id}>
             {getInputSet(item)}
             {item.subFields && checkedInputs.indexOf(item.label) >= 0 && (
-              <div className={"ml-8"} key={`${item.value || ""}-subfields`}>
+              <div className={"ml-8"} key={`${item.value}-subfields`}>
                 {item.subFields?.map((subItem) => {
                   return getInputSet(subItem)
                 })}

package/src/forms/HouseholdMemberForm.tsx

@@ -27,7 +27,7 @@ const HouseholdMemberForm = (props: HouseholdMemberFormProps) => {
           className="edit-link"
           onClick={() => props.editMember && props.editMember(props.memberId)}
           type={"button"}
-          data-testid={"app-household-member-edit-button"}
+          data-test-id={"app-household-member-edit-button"}
         >
           {props.strings?.edit ?? t("t.edit")}
         </button>

package/src/forms/MultiSelectField.tsx

@@ -80,7 +80,7 @@ const MultiSelectField = (props: MultiSelectFieldProps) => {
   return (
     <div className="field multi-select-field">
       {props.label && label}
-      <div className="control" data-testid={props.dataTestId}>
+      <div className="control" data-test-id={props.dataTestId}>
         <Icon symbol="search" size="medium" />
         <input
           id={props.id}

package/src/forms/PhoneField.tsx

@@ -60,7 +60,7 @@ export const PhoneField = (props: {
           {props.label}
         </label>
       )}
-      <div className={props.controlClassName} data-testid={props.dataTestId}>
+      <div className={props.controlClassName} data-test-id={props.dataTestId}>
         {props.mask ? (
           <Controller {...controllerProps} render={props.mask} />
         ) : (
@@ -68,7 +68,7 @@ export const PhoneField = (props: {
         )}
       </div>
       {props.subNote && <p className="field-sub-note">{props.subNote}</p>}
-      <ErrorMessage id={`${props.id || ""}-error`} error={props.error}>
+      <ErrorMessage id={`${props.id}-error`} error={props.error}>
         {props.errorMessage}
       </ErrorMessage>
     </div>

package/src/forms/Select.tsx

@@ -60,8 +60,8 @@ export const Select = ({
           className="input"
           id={id || name}
           name={name}
-          data-testid={dataTestId}
-          aria-describedby={describedBy ? describedBy : `${id || name}-error`}
+          data-test-id={dataTestId}
+          aria-describedby={describedBy ? describedBy : `${id}-error`}
           aria-invalid={!!error || false}
           aria-label={label}
           ref={register && register(validation)}
@@ -79,7 +79,7 @@ export const Select = ({
       </div>
       {subNote && <p className="field-sub-note">{subNote}</p>}
       {error && errorMessage && (
-        <ErrorMessage id={`${id || name}-error`} error={error}>
+        <ErrorMessage id={`${id}-error`} error={error}>
           {errorMessage}
         </ErrorMessage>
       )}

package/src/forms/Textarea.tsx

@@ -57,7 +57,7 @@ export const Textarea = (props: TextareaProps) => {
         wrap={props.wrap ?? "soft"}
         title={props.label}
         {...inputProps}
-        data-testid={props.dataTestId}
+        data-test-id={props.dataTestId}
       />
       {props.note && <p className="field-note font-normal mb-2">{props.note}</p>}
       {props.errorMessage && <span className="textarea-error-message">{props.errorMessage}</span>}

package/src/global/tokens/sizes.scss

@@ -5,7 +5,7 @@
   --bloom-s2: 0.5rem;
   --bloom-s2_5: 0.625rem;
   --bloom-s3: 0.75rem;
-  --bloom-s3_5: 0.875;
+  --bloom-s3_5: 0.875rem;
   --bloom-s4: 1rem;
   --bloom-s5: 1.25rem;
   --bloom-s6: 1.5rem;

package/src/headers/Hero.tsx

@@ -20,7 +20,7 @@ export interface HeroProps {
 }
 
 const HeroButton = (props: { title: string; href: string; className?: string }) => (
-  <span className={`${props.className || ""} hero__button`}>
+  <span className={props.className + " hero__button"}>
     <LinkButton href={props.href}>{props.title}</LinkButton>
   </span>
 )
@@ -44,7 +44,7 @@ const Hero = (props: HeroProps) => {
     classNames = "centered"
   }
   return (
-    <div className={`hero ${classNames}`} style={styles} data-testid={"hero-component"}>
+    <div className={`hero ${classNames}`} style={styles} data-test-id={"hero-component"}>
       <h1 className={`hero__title ${props.extraLargeTitle ? "lg:text-6.5xl" : ""}`}>
         {props.title}
       </h1>

package/src/headers/PageHeader.tsx

@@ -31,7 +31,7 @@ const PageHeader = (props: PageHeaderProps) => {
         )}
 
         {props.title && (
-          <h1 data-testid="page-header" className="page-header__title">
+          <h1 data-test-id="page-header" className="page-header__title">
             {props.title}
           </h1>
         )}

package/src/headers/SiteHeader.tsx

@@ -157,7 +157,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
                 }
                 dropdownOptionKeyDown(event, index)
               }}
-              data-testid={`${option.title}-${index}`}
+              data-test-id={`${option.title}-${index}`}
             >
               {dropdownOptionContent(option)}
             </button>
@@ -327,7 +327,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
                   }`}
                   href={menuLink.href}
                   key={`${menuLink.title}-${index}`}
-                  data-testid={`${menuLink.title}-${index}`}
+                  data-test-id={`${menuLink.title}-${index}`}
                 >
                   {menuContent}
                 </LinkComponent>
@@ -367,7 +367,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
                 onMouseEnter={() => changeMenuShow(menuLink.title, activeMenus, setActiveMenus)}
                 onMouseLeave={() => changeMenuShow(menuLink.title, activeMenus, setActiveMenus)}
                 role={"button"}
-                data-testid={`${menuLink.title}-${index}`}
+                data-test-id={`${menuLink.title}-${index}`}
               >
                 {menuContent}
               </span>

package/src/icons/Icon.tsx

@@ -171,7 +171,7 @@ const Icon = (props: IconProps) => {
     <span
       className={wrapperClasses.join(" ")}
       aria-hidden={props.ariaHidden}
-      data-testid={props.dataTestId ?? null}
+      data-test-id={props.dataTestId ?? null}
     >
       <SpecificIcon fill={props.fill ? props.fill : undefined} />
     </span>
@@ -179,7 +179,7 @@ const Icon = (props: IconProps) => {
     <span
       className={wrapperClasses.join(" ")}
       aria-hidden={props.ariaHidden}
-      data-testid={props.dataTestId ?? null}
+      data-test-id={props.dataTestId ?? null}
       style={{ color: props.fill }}
     >
       {SpecificIcon}