@bloom-housing/ui-components 3.0.1-alpha.3 → 3.0.1-alpha.33

package/.jest/setup-tests.js

@@ -1,4 +1,5 @@
 import "@testing-library/jest-dom/extend-expect"
+import { configure } from "@testing-library/dom"
 
 import { addTranslation } from "../src/helpers/translator"
 import general from "../src/locales/general.json"
@@ -18,3 +19,5 @@ window.matchMedia = jest.fn().mockImplementation((query) => {
 })
 
 addTranslation(general)
+
+configure({ testIdAttribute: "data-test-id" })

package/CHANGELOG.md

@@ -3,6 +3,285 @@
 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.33](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.32...@bloom-housing/ui-components@3.0.1-alpha.33) (2021-12-07)
+
+
+### Features
+
+* overrides fallback to english, tagalog support ([#2262](https://github.com/bloom-housing/bloom/issues/2262)) ([679ab9b](https://github.com/bloom-housing/bloom/commit/679ab9b1816d5934f48f02ca5f5696952ef88ae7))
+
+
+
+
+
+## [3.0.1-alpha.32](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.31...@bloom-housing/ui-components@3.0.1-alpha.32) (2021-12-07)
+
+
+### Bug Fixes
+
+* Fix modal styles on mobile ([#2280](https://github.com/bloom-housing/bloom/issues/2280)) ([95f45e5](https://github.com/bloom-housing/bloom/commit/95f45e5a6d2c38c512f59d8cb35847cab59dc8bb)), closes [#2253](https://github.com/bloom-housing/bloom/issues/2253)
+
+
+
+
+
+## [3.0.1-alpha.31](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.30...@bloom-housing/ui-components@3.0.1-alpha.31) (2021-12-06)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [3.0.1-alpha.30](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.29...@bloom-housing/ui-components@3.0.1-alpha.30) (2021-12-03)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [3.0.1-alpha.29](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.28...@bloom-housing/ui-components@3.0.1-alpha.29) (2021-12-03)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [3.0.1-alpha.28](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.27...@bloom-housing/ui-components@3.0.1-alpha.28) (2021-12-03)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [3.0.1-alpha.27](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.26...@bloom-housing/ui-components@3.0.1-alpha.27) (2021-12-01)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [3.0.1-alpha.26](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.25...@bloom-housing/ui-components@3.0.1-alpha.26) (2021-12-01)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [3.0.1-alpha.25](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.24...@bloom-housing/ui-components@3.0.1-alpha.25) (2021-11-30)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [3.0.1-alpha.24](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.23...@bloom-housing/ui-components@3.0.1-alpha.24) (2021-11-29)
+
+
+### Bug Fixes
+
+* guard against 0 output ([0ea9012](https://github.com/bloom-housing/bloom/commit/0ea9012fdac02fb1cb4357abec2ec69633902654))
+* remove bold style from current waitlist size ([2e2f414](https://github.com/bloom-housing/bloom/commit/2e2f4141e62c8544c0828b29de0b99bb97abb201))
+* show waitlist values even if they're zero ([6a35e67](https://github.com/bloom-housing/bloom/commit/6a35e679f142105e40719e89bda3d957e3200e1d))
+* simpler conditionals ([f3e588d](https://github.com/bloom-housing/bloom/commit/f3e588d5e6dd0a39d1aed99ef6eba0054540ed14))
+* waitlist: handle both null and undefined ([90fd369](https://github.com/bloom-housing/bloom/commit/90fd369b471c7f9baa0a1d58f452159449fe6fcf))
+
+
+### Features
+
+* simplify Waitlist component and use more flexible schema ([96df149](https://github.com/bloom-housing/bloom/commit/96df1496f377ddfa6f0e6c016c84954b6a43ff4a))
+
+
+
+
+
+## [3.0.1-alpha.23](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.22...@bloom-housing/ui-components@3.0.1-alpha.23) (2021-11-29)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [3.0.1-alpha.22](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.21...@bloom-housing/ui-components@3.0.1-alpha.22) (2021-11-23)
+
+
+### Bug Fixes
+
+* remove alameda reference in demographics ([#2209](https://github.com/bloom-housing/bloom/issues/2209)) ([7d5991c](https://github.com/bloom-housing/bloom/commit/7d5991cbf6dbe0b61f2b14d265e87ce3687f743d))
+
+
+
+
+
+## [3.0.1-alpha.21](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.20...@bloom-housing/ui-components@3.0.1-alpha.21) (2021-11-23)
+
+
+### Bug Fixes
+
+* change the yes/no radio text to be more descriptive ([#2208](https://github.com/bloom-housing/bloom/issues/2208)) ([0c46054](https://github.com/bloom-housing/bloom/commit/0c46054574535523d6f217bb0677bbe732b8945f))
+
+
+
+
+
+## [3.0.1-alpha.20](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.19...@bloom-housing/ui-components@3.0.1-alpha.20) (2021-11-23)
+
+
+### Bug Fixes
+
+* add ariaLabel prop to Button component ([509ddc8](https://github.com/bloom-housing/bloom/commit/509ddc898ba44c05e26f8ed8c777f1ba456eeee5))
+
+
+
+
+
+## [3.0.1-alpha.19](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.18...@bloom-housing/ui-components@3.0.1-alpha.19) (2021-11-23)
+
+
+### Bug Fixes
+
+* add ariaHidden to Icon component ([c7bb86a](https://github.com/bloom-housing/bloom/commit/c7bb86aec6fd5ad386c7ca50087d0113b14503be))
+
+
+
+
+
+## [3.0.1-alpha.18](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.17...@bloom-housing/ui-components@3.0.1-alpha.18) (2021-11-23)
+
+
+### Features
+
+* new demographics sub-race questions ([#2109](https://github.com/bloom-housing/bloom/issues/2109)) ([9ab8926](https://github.com/bloom-housing/bloom/commit/9ab892694c1ad2fa8890b411b3b32af68ade1fc3))
+
+
+
+
+
+## [3.0.1-alpha.17](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.16...@bloom-housing/ui-components@3.0.1-alpha.17) (2021-11-22)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [3.0.1-alpha.16](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.15...@bloom-housing/ui-components@3.0.1-alpha.16) (2021-11-22)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [3.0.1-alpha.15](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.14...@bloom-housing/ui-components@3.0.1-alpha.15) (2021-11-16)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [3.0.1-alpha.14](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.13...@bloom-housing/ui-components@3.0.1-alpha.14) (2021-11-16)
+
+
+### Bug Fixes
+
+* preference cleanup for avance ([d0aebbc](https://github.com/bloom-housing/bloom/commit/d0aebbcd334dfffc4a7a1a39e9964c90155c5bfb))
+
+
+
+
+
+## [3.0.1-alpha.13](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.12...@bloom-housing/ui-components@3.0.1-alpha.13) (2021-11-16)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [3.0.1-alpha.12](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.11...@bloom-housing/ui-components@3.0.1-alpha.12) (2021-11-16)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [3.0.1-alpha.11](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.10...@bloom-housing/ui-components@3.0.1-alpha.11) (2021-11-15)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [3.0.1-alpha.10](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.9...@bloom-housing/ui-components@3.0.1-alpha.10) (2021-11-12)
+
+
+### Features
+
+* refactor and add public site application flow cypress tests ([#2118](https://github.com/bloom-housing/bloom/issues/2118)) ([9ec0e8d](https://github.com/bloom-housing/bloom/commit/9ec0e8d05f9570773110754e7fdaf49254d1eab8))
+
+
+
+
+
+## [3.0.1-alpha.9](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.8...@bloom-housing/ui-components@3.0.1-alpha.9) (2021-11-12)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [3.0.1-alpha.8](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.7...@bloom-housing/ui-components@3.0.1-alpha.8) (2021-11-09)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [3.0.1-alpha.7](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.6...@bloom-housing/ui-components@3.0.1-alpha.7) (2021-11-09)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [3.0.1-alpha.6](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.5...@bloom-housing/ui-components@3.0.1-alpha.6) (2021-11-09)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [3.0.1-alpha.5](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.4...@bloom-housing/ui-components@3.0.1-alpha.5) (2021-11-09)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [3.0.1-alpha.4](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.3...@bloom-housing/ui-components@3.0.1-alpha.4) (2021-11-09)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
 ## [3.0.1-alpha.3](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@3.0.1-alpha.2...@bloom-housing/ui-components@3.0.1-alpha.3) (2021-11-08)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "3.0.1-alpha.3",
+  "version": "3.0.1-alpha.33",
   "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.3",
+    "@bloom-housing/backend-core": "^3.0.1-alpha.33",
     "@mapbox/mapbox-sdk": "^0.13.0",
     "@types/body-scroll-lock": "^2.6.1",
     "@types/jwt-decode": "^2.2.1",
@@ -80,7 +80,7 @@
     "@types/react-dom": "^16.9.5",
     "@types/react-text-mask": "^5.4.6",
     "@types/react-transition-group": "^4.4.0",
-    "axios": "^0.21.1",
+    "axios": "0.21.1",
     "body-scroll-lock": "^3.1.5",
     "jwt-decode": "^2.2.0",
     "markdown-to-jsx": "^6.11.4",
@@ -100,5 +100,5 @@
     "tailwindcss": "2.2.10",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "e0fcb37b598e3d6bcd9916b70d7d578322c6196d"
+  "gitHead": "4d1181baccd2a4b19765420e55a31593639fdb38"
 }

package/src/actions/Button.tsx

@@ -19,6 +19,7 @@ export interface ButtonProps extends AppearanceProps {
   className?: string
   disabled?: boolean
   loading?: boolean
+  ariaLabel?: string
 }
 
 export const buttonClassesForProps = (props: Omit<ButtonProps, "onClick">) => {
@@ -67,11 +68,13 @@ const Button = (props: ButtonProps) => {
 
   return (
     <button
+      {...props}
       id={props.id}
       type={props.type}
       className={buttonClasses.join(" ")}
       onClick={props.onClick}
       disabled={props.disabled || props.loading}
+      aria-label={props.ariaLabel}
     >
       {buttonInner(props)}
     </button>

package/src/actions/LinkButton.tsx

@@ -6,6 +6,7 @@ import { isExternalLink } from "../helpers/links"
 
 export interface LinkButtonProps extends Omit<ButtonProps, "onClick"> {
   href: string
+  dataTestId?: string
 }
 
 const LinkButton = (props: LinkButtonProps) => {
@@ -14,13 +15,17 @@ const LinkButton = (props: LinkButtonProps) => {
 
   if (isExternalLink(props.href)) {
     return (
-      <a href={props.href} className={buttonClasses.join(" ")}>
+      <a href={props.href} className={buttonClasses.join(" ")} data-test-id={props.dataTestId}>
         {buttonInner(props)}
       </a>
     )
   } else {
     return (
-      <LinkComponent href={props.href} className={buttonClasses.join(" ")}>
+      <LinkComponent
+        href={props.href}
+        className={buttonClasses.join(" ")}
+        data-test-id={props.dataTestId}
+      >
         {buttonInner(props)}
       </LinkComponent>
     )

package/src/blocks/DashBlock.tsx

@@ -7,6 +7,7 @@ interface DashBlockProps {
   subtitle?: string
   icon: React.ReactNode
   children?: React.ReactNode
+  dataTestId?: string
 }
 const DashBlock = (props: DashBlockProps) => {
   const { href, title, subtitle, icon, children } = props
@@ -37,6 +38,10 @@ const DashBlock = (props: DashBlockProps) => {
       </>
     )
   }
-  return <div className="dash-block">{wrapper}</div>
+  return (
+    <div className="dash-block" data-test-id={props.dataTestId}>
+      {wrapper}
+    </div>
+  )
 }
 export { DashBlock as default, DashBlock }

package/src/forms/DOBField.tsx

@@ -71,6 +71,7 @@ const DOBField = (props: DOBFieldProps) => {
           }}
           inputProps={{ maxLength: 2 }}
           register={register}
+          dataTestId={"dob-field-month"}
         />
         <Field
           name={getFieldName("birthDay")}
@@ -92,6 +93,7 @@ const DOBField = (props: DOBFieldProps) => {
           }}
           inputProps={{ maxLength: 2 }}
           register={register}
+          dataTestId={"dob-field-day"}
         />
         <Field
           name={getFieldName("birthYear")}
@@ -115,6 +117,7 @@ const DOBField = (props: DOBFieldProps) => {
           }}
           inputProps={{ maxLength: 4 }}
           register={register}
+          dataTestId={"dob-field-year"}
         />
       </div>
 

package/src/forms/Field.tsx

@@ -29,6 +29,7 @@ export interface FieldProps {
   describedBy?: string
   getValues?: UseFormMethods["getValues"]
   setValue?: UseFormMethods["setValue"]
+  dataTestId?: string
 }
 
 const Field = (props: FieldProps) => {
@@ -94,6 +95,7 @@ const Field = (props: FieldProps) => {
       <div className={controlClasses.join(" ")}>
         {props.prepend && <span className="prepend">{props.prepend}</span>}
         <input
+          {...props}
           aria-describedby={props.describedBy ? props.describedBy : `${idOrName}`}
           aria-invalid={!!props.error || false}
           className="input"
@@ -107,6 +109,7 @@ const Field = (props: FieldProps) => {
           onPaste={props.onPaste}
           onDrop={props.onDrop}
           onChange={props.onChange}
+          data-test-id={props.dataTestId}
           {...inputProps}
         />
         {isRadioOrCheckbox && label}

package/src/forms/FieldGroup.tsx

@@ -1,14 +1,22 @@
-import React from "react"
+import React, { useState, useEffect } from "react"
+import { ExpandableContent } from "../actions/ExpandableContent"
 import { ErrorMessage } from "../notifications/ErrorMessage"
 import { UseFormMethods } from "react-hook-form"
+import { Field } from "./Field"
+import { t } from "../helpers/translator"
 
 interface FieldSingle {
   id: string
   label: string
   value?: string
   defaultChecked?: boolean
+  description?: React.ReactNode
+  defaultText?: string
   note?: string
   inputProps?: Record<string, unknown>
+  subFields?: FieldSingle[]
+  type?: string
+  additionalText?: boolean
 }
 
 interface FieldGroupProps {
@@ -25,6 +33,7 @@ interface FieldGroupProps {
   fieldGroupClassName?: string
   fieldClassName?: string
   fieldLabelClassName?: string
+  dataTestId?: string
 }
 
 const FieldGroup = ({
@@ -41,12 +50,94 @@ const FieldGroup = ({
   fieldClassName,
   fieldLabelClassName,
   groupSubNote,
+  dataTestId,
 }: FieldGroupProps) => {
   // Always align two-option radio groups side by side
   if (fields?.length === 2) {
     fieldGroupClassName = `${fieldGroupClassName} flex`
     fieldClassName = `${fieldClassName} flex-initial mr-4`
   }
+
+  const [checkedInputs, setCheckedInputs] = useState<string[]>([])
+
+  const subfieldsExist = () => {
+    return fields?.filter((field) => field.subFields).length
+  }
+
+  const getIndividualInput = (item: FieldSingle): React.ReactNode => {
+    return (
+      <div key={item.value}>
+        <input
+          aria-describedby={`${name}-error`}
+          aria-invalid={!!error || false}
+          type={type}
+          id={item.id}
+          defaultValue={item.value || item.id}
+          name={subfieldsExist() ? `${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) {
+              setCheckedInputs([...checkedInputs, item.label])
+            } else {
+              setCheckedInputs(checkedInputs.filter((subset) => item.label !== subset))
+            }
+          }}
+          defaultChecked={item.defaultChecked || false}
+          ref={register(validation)}
+          {...item.inputProps}
+          data-test-id={dataTestId}
+        />
+        <label htmlFor={item.id} className={`font-semibold ${fieldLabelClassName}`}>
+          {item.label}
+        </label>
+        {item.note && <span className={"field-note font-normal"}>{item.note}</span>}
+
+        {item.description && (
+          <div className="ml-8 -mt-1 mb-5">
+            <ExpandableContent>
+              <p className="field-note mb-2 -mt-2">{item.description}</p>
+            </ExpandableContent>
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  const checkSelected = (formFields: FieldSingle[] | undefined, checkedValues: string[]) => {
+    formFields?.forEach((field) => {
+      if (field.defaultChecked) {
+        checkedValues.push(field.label)
+      }
+      if (field.subFields) {
+        checkSelected(field.subFields, checkedValues)
+      }
+    })
+  }
+
+  useEffect(() => {
+    const initialValues: string[] = []
+    checkSelected(fields, initialValues)
+    setCheckedInputs([...initialValues])
+  }, [])
+
+  const getInputSet = (item: FieldSingle): React.ReactNode => {
+    return (
+      <div key={item.value}>
+        {getIndividualInput(item)}
+        {item.additionalText && checkedInputs.indexOf(item.label) >= 0 && (
+          <Field
+            id={item.id}
+            key={`${item.value}-additionalText`}
+            name={`${name}-${item.value}`}
+            register={register}
+            defaultValue={item.defaultText}
+            placeholder={t("t.description")}
+            className={"mb-4"}
+          />
+        )}
+      </div>
+    )
+  }
   return (
     <>
       {groupLabel && <label className="field-label--caps">{groupLabel}</label>}
@@ -55,21 +146,14 @@ const FieldGroup = ({
       <div className={`field ${error && "error"} ${fieldGroupClassName || ""} mb-0`}>
         {fields?.map((item) => (
           <div className={`field ${fieldClassName || ""} mb-1`} key={item.id}>
-            <input
-              aria-describedby={`${name}-error`}
-              aria-invalid={!!error || false}
-              type={type}
-              id={item.id}
-              defaultValue={item.value || item.id}
-              name={name}
-              defaultChecked={item.defaultChecked || false}
-              ref={register(validation)}
-              {...item.inputProps}
-            />
-            <label htmlFor={item.id} className={`font-semibold ${fieldLabelClassName}`}>
-              {item.label}
-            </label>
-            {item.note && <span className={"field-note font-normal"}>{item.note}</span>}
+            {getInputSet(item)}
+            {item.subFields && checkedInputs.indexOf(item.label) >= 0 && (
+              <div className={"ml-8"} key={`${item.value}-subfields`}>
+                {item.subFields?.map((subItem) => {
+                  return getInputSet(subItem)
+                })}
+              </div>
+            )}
           </div>
         ))}
       </div>

package/src/forms/HouseholdMemberForm.tsx

@@ -20,10 +20,11 @@ const HouseholdMemberForm = (props: HouseholdMemberFormProps) => {
       {props.memberFirstName} {props.memberLastName}
       {editMode ? (
         <button
-          id="edit-member"
+          id={`edit-member-${props.memberFirstName}-${props.memberLastName}`}
           className="edit-link"
           onClick={() => props.editMember && props.editMember(props.memberId)}
           type={"button"}
+          data-test-id={"app-household-member-edit-button"}
         >
           {t("t.edit")}
         </button>

package/src/forms/PhoneField.tsx

@@ -19,6 +19,7 @@ export const PhoneField = (props: {
   disabled?: boolean
   required?: boolean
   mask?: (args: any) => JSX.Element
+  dataTestId?: string
 }) => {
   const labelClasses = ["label"]
   if (props.caps) labelClasses.push("field-label--caps")
@@ -55,7 +56,7 @@ export const PhoneField = (props: {
   return (
     <div className={"field " + (props.error ? "error" : "")}>
       {props.label && <label className={labelClasses.join(" ")}>{props.label}</label>}
-      <div className={props.controlClassName}>
+      <div className={props.controlClassName} data-test-id={props.dataTestId}>
         {props.mask ? (
           <Controller {...controllerProps} render={props.mask} />
         ) : (

package/src/forms/Select.tsx

@@ -27,6 +27,7 @@ interface SelectProps {
   keyPrefix?: string
   describedBy?: string
   inputProps?: Record<string, unknown>
+  dataTestId?: string
 }
 
 export const Select = ({
@@ -47,6 +48,7 @@ export const Select = ({
   inputProps,
   defaultValue,
   subNote,
+  dataTestId,
 }: SelectProps) => {
   return (
     <div className={`field ${error ? "error" : ""}`}>
@@ -58,8 +60,10 @@ export const Select = ({
           className="input"
           id={id || name}
           name={name}
+          data-test-id={dataTestId}
           aria-describedby={describedBy ? describedBy : `${id}-error`}
           aria-invalid={!!error || false}
+          aria-label={label}
           ref={register && register(validation)}
           disabled={disabled}
           defaultValue={defaultValue ?? ""}

package/src/global/forms.scss

@@ -323,6 +323,7 @@ input[type="number"] {
   @apply text-tiny;
   @apply text-gray-700;
   @apply font-semibold;
+  white-space: pre-line;
 }
 
 .error-message {

package/src/headers/Hero.tsx

@@ -37,7 +37,7 @@ const Hero = (props: HeroProps) => {
     classNames = "centered"
   }
   return (
-    <div className={`hero ${classNames}`} style={styles}>
+    <div className={`hero ${classNames}`} style={styles} data-test-id={"hero-component"}>
       <h1 className={`hero__title ${props.extraLargeTitle ? "lg:text-6.5xl" : ""}`}>
         {props.title}
       </h1>