@bloom-housing/ui-components 6.0.0 → 6.0.1-alpha.0

package/src/forms/DOBField.tsx

@@ -25,6 +25,15 @@ export interface DOBFieldProps {
   required?: boolean
   disabled?: boolean
   readerOnly?: boolean
+  strings?: {
+    dateError?: string
+    day?: string
+    dayPlaceholder?: string
+    month?: string
+    monthPlaceholder?: string
+    year?: string
+    yearPlaceholder?: string
+  }
 }
 
 const DOBField = (props: DOBFieldProps) => {
@@ -35,6 +44,8 @@ const DOBField = (props: DOBFieldProps) => {
     return [name, baseName].filter((item) => item).join(".")
   }
 
+  const hasError = error?.birthMonth || error?.birthDay || error?.birthYear
+
   const birthDay = watch(getFieldName("birthDay")) ?? defaultDOB?.birthDay
   const birthMonth = watch(getFieldName("birthMonth")) ?? defaultDOB?.birthMonth
 
@@ -47,6 +58,7 @@ const DOBField = (props: DOBFieldProps) => {
 
   const labelClasses = ["field-label--caps"]
   if (props.readerOnly) labelClasses.push("sr-only")
+  if (hasError) labelClasses.push("text-alert")
 
   return (
     <fieldset id={id}>
@@ -55,10 +67,10 @@ const DOBField = (props: DOBFieldProps) => {
       <div className="field-group--date">
         <Field
           name={getFieldName("birthMonth")}
-          label={t("t.month")}
+          label={props.strings?.month ?? t("t.month")}
           disabled={props.disabled}
           readerOnly={true}
-          placeholder={t("account.settings.placeholders.month")}
+          placeholder={props.strings?.monthPlaceholder ?? t("account.settings.placeholders.month")}
           defaultValue={defaultDOB?.birthMonth ? defaultDOB.birthMonth : ""}
           error={error?.birthMonth !== undefined}
           validation={{
@@ -77,10 +89,10 @@ const DOBField = (props: DOBFieldProps) => {
         />
         <Field
           name={getFieldName("birthDay")}
-          label={t("t.day")}
+          label={props.strings?.day ?? t("t.day")}
           disabled={props.disabled}
           readerOnly={true}
-          placeholder={t("account.settings.placeholders.day")}
+          placeholder={props.strings?.dayPlaceholder ?? t("account.settings.placeholders.day")}
           defaultValue={defaultDOB?.birthDay ? defaultDOB.birthDay : ""}
           error={error?.birthDay !== undefined}
           validation={{
@@ -99,10 +111,10 @@ const DOBField = (props: DOBFieldProps) => {
         />
         <Field
           name={getFieldName("birthYear")}
-          label={t("t.year")}
+          label={props.strings?.year ?? t("t.year")}
           disabled={props.disabled}
           readerOnly={true}
-          placeholder={t("account.settings.placeholders.year")}
+          placeholder={props.strings?.yearPlaceholder ?? t("account.settings.placeholders.year")}
           defaultValue={defaultDOB?.birthYear ? defaultDOB.birthYear : ""}
           error={error?.birthYear !== undefined}
           validation={{
@@ -123,10 +135,10 @@ const DOBField = (props: DOBFieldProps) => {
         />
       </div>
 
-      {(error?.birthMonth || error?.birthDay || error?.birthYear) && (
+      {hasError && (
         <div className="field error">
           <span id={`${id}-error`} className="error-message">
-            {errorMessage ? errorMessage : t("errors.dateOfBirthError")}
+            {errorMessage ? errorMessage : props.strings?.dateError ?? t("errors.dateOfBirthError")}
           </span>
         </div>
       )}

package/src/forms/DateField.tsx

@@ -25,6 +25,15 @@ export interface DateFieldProps {
   required?: boolean
   watch: UseFormMethods["watch"]
   dataTestId?: string
+  strings?: {
+    dateError?: string
+    day?: string
+    dayPlaceholder?: string
+    month?: string
+    monthPlaceholder?: string
+    year?: string
+    yearPlaceholder?: string
+  }
 }
 
 const DateField = (props: DateFieldProps) => {
@@ -44,10 +53,10 @@ const DateField = (props: DateFieldProps) => {
       <div className="field-group--date">
         <Field
           name={getFieldName("month")}
-          label={t("t.month")}
+          label={props.strings?.month ?? t("t.month")}
           disabled={props.disabled}
           readerOnly={true}
-          placeholder={t("account.settings.placeholders.month")}
+          placeholder={props.strings?.monthPlaceholder ?? t("account.settings.placeholders.month")}
           defaultValue={defaultDate?.month ?? ""}
           error={error?.month !== undefined}
           validation={{
@@ -65,10 +74,10 @@ const DateField = (props: DateFieldProps) => {
         />
         <Field
           name={getFieldName("day")}
-          label={t("t.day")}
+          label={props.strings?.day ?? t("t.day")}
           disabled={props.disabled}
           readerOnly={true}
-          placeholder={t("account.settings.placeholders.day")}
+          placeholder={props.strings?.dayPlaceholder ?? t("account.settings.placeholders.day")}
           defaultValue={defaultDate?.day ?? ""}
           error={error?.day !== undefined}
           validation={{
@@ -86,10 +95,10 @@ const DateField = (props: DateFieldProps) => {
         />
         <Field
           name={getFieldName("year")}
-          label={t("t.year")}
+          label={props.strings?.year ?? t("t.year")}
           disabled={props.disabled}
           readerOnly={true}
-          placeholder={t("account.settings.placeholders.year")}
+          placeholder={props.strings?.yearPlaceholder ?? t("account.settings.placeholders.year")}
           defaultValue={defaultDate?.year ?? ""}
           error={error?.year !== undefined}
           validation={{
@@ -113,7 +122,7 @@ const DateField = (props: DateFieldProps) => {
       {(error?.month || error?.day || error?.year) && (
         <div className="field error">
           <span id={`${id}-error`} className="error-message">
-            {errorMessage ? errorMessage : t("errors.dateError")}
+            {errorMessage ? errorMessage : props.strings?.dateError ?? t("errors.dateError")}
           </span>
         </div>
       )}

package/src/forms/Dropzone.scss

@@ -15,3 +15,10 @@
 .dropzone__progress {
   max-width: 250px;
 }
+
+.dropzone__helptext {
+  margin-block: var(--bloom-s2) var(--bloom-s4);
+  color: var(--bloom-color-gray-700);
+  font-family: var(--bloom-font-alt-sans);
+  font-size: var(--bloom-font-size-sm);
+}

package/src/forms/Dropzone.tsx

@@ -11,6 +11,13 @@ interface DropzoneProps {
   accept?: string | string[]
   progress?: number
   className?: string
+  maxFiles?: number
+  strings?: {
+    chooseFromFolder?: string
+    dragHere?: string
+    dropHere?: string
+    orString?: string
+  }
 }
 
 const Dropzone = (props: DropzoneProps) => {
@@ -18,6 +25,8 @@ const Dropzone = (props: DropzoneProps) => {
   const classNames = ["field"]
   if (props.className) classNames.push(props.className)
 
+  const maxFiles = props.maxFiles || 1
+
   const onDrop = useCallback(
     (acceptedFiles) => {
       acceptedFiles.forEach((file: File) => uploader(file))
@@ -27,7 +36,8 @@ const Dropzone = (props: DropzoneProps) => {
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     onDrop,
     accept: props.accept,
-    maxFiles: 1,
+    maxFiles: maxFiles > 1 ? maxFiles : undefined,
+    multiple: maxFiles > 1,
   })
 
   const dropzoneClasses = ["dropzone", "control"]
@@ -42,7 +52,7 @@ const Dropzone = (props: DropzoneProps) => {
       <label htmlFor={props.id} className="label">
         {props.label}
       </label>
-      {props.helptext && <p className="view-item__label mt-2 mb-4">{props.helptext}</p>}
+      {props.helptext && <p className="dropzone__helptext">{props.helptext}</p>}
       {props.progress && props.progress === 100 ? (
         <></>
       ) : props.progress && props.progress > 0 ? (
@@ -51,11 +61,14 @@ const Dropzone = (props: DropzoneProps) => {
         <div className={dropzoneClasses.join(" ")} {...getRootProps()}>
           <input id={props.id} {...getInputProps()} data-test-id={"dropzone-input"} />
           {isDragActive ? (
-            <p>{t("t.dropFilesHere")}</p>
+            <p>{props.strings?.dropHere ?? t("t.dropFilesHere")}</p>
           ) : (
             <p>
-              {t("t.dragFilesHere")} {t("t.or")}{" "}
-              <u className="text-primary">{t("t.chooseFromFolder").toLowerCase()}</u>
+              {props.strings?.dragHere ?? t("t.dragFilesHere")}{" "}
+              {props.strings?.orString ?? t("t.or")}{" "}
+              <u className="text-primary">
+                {props.strings?.chooseFromFolder ?? t("t.chooseFromFolder").toLowerCase()}
+              </u>
             </p>
           )}
         </div>

package/src/forms/Field.tsx

@@ -31,6 +31,7 @@ export interface FieldProps {
   setValue?: UseFormMethods["setValue"]
   dataTestId?: string
   hidden?: boolean
+  bordered?: boolean
 }
 
 const Field = (props: FieldProps) => {
@@ -53,6 +54,9 @@ const Field = (props: FieldProps) => {
     controlClasses.push(props.controlClassName)
   }
 
+  if (props.bordered && (props.type === "radio" || props.type === "checkbox"))
+    controlClasses.push("field-border")
+
   const formatValue = () => {
     if (props.getValues && props.setValue) {
       const currencyValue = props.getValues(props.name)
@@ -77,6 +81,7 @@ const Field = (props: FieldProps) => {
     if (props.type === "radio") {
       labelClasses.push("font-semibold")
     }
+    if (props.error) labelClasses.push("text-alert")
 
     return (
       <label className={labelClasses.join(" ")} htmlFor={props.id || props.name}>

package/src/forms/FieldGroup.tsx

@@ -37,6 +37,11 @@ interface FieldGroupProps {
   register: UseFormMethods["register"]
   type?: string
   validation?: RegisterOptions
+  strings?: {
+    description?: string
+    readLess?: string
+    readMore?: string
+  }
 }
 
 const FieldGroup = ({
@@ -54,8 +59,9 @@ const FieldGroup = ({
   fieldLabelClassName,
   groupSubNote,
   dataTestId,
+  strings,
 }: FieldGroupProps) => {
-  // Always align two-option radio groups side by side
+  // Always default align two-option radio groups side by side
   if (fields?.length === 2) {
     fieldGroupClassName = `${fieldGroupClassName} flex`
     fieldClassName = `${fieldClassName} flex-initial mr-4`
@@ -103,7 +109,12 @@ const FieldGroup = ({
 
         {item.description && (
           <div className="ml-8 -mt-1 mb-5">
-            <ExpandableContent strings={{ readMore: t("t.readMore"), readLess: t("t.readLess") }}>
+            <ExpandableContent
+              strings={{
+                readMore: strings?.readMore ?? t("t.readMore"),
+                readLess: strings?.readLess ?? t("t.readLess"),
+              }}
+            >
               <p className="field-note mb-2 -mt-2">{item.description}</p>
             </ExpandableContent>
           </div>
@@ -143,7 +154,7 @@ const FieldGroup = ({
             name={`${name}-${item.value}`}
             register={register}
             defaultValue={item.defaultText}
-            placeholder={t("t.description")}
+            placeholder={strings?.description ?? t("t.description")}
             className={"mb-4"}
             disabled={item.disabled}
             dataTestId={item.dataTestId}

package/src/forms/HouseholdMemberForm.tsx

@@ -10,6 +10,9 @@ export interface HouseholdMemberFormProps {
   memberId?: number
   memberLastName: string
   subtitle: string
+  strings?: {
+    edit?: string
+  }
 }
 
 const HouseholdMemberForm = (props: HouseholdMemberFormProps) => {
@@ -26,7 +29,7 @@ const HouseholdMemberForm = (props: HouseholdMemberFormProps) => {
           type={"button"}
           data-test-id={"app-household-member-edit-button"}
         >
-          {t("t.edit")}
+          {props.strings?.edit ?? t("t.edit")}
         </button>
       ) : (
         <Icon

package/src/forms/HouseholdSizeField.tsx

@@ -14,6 +14,13 @@ export interface HouseholdSizeFieldProps {
   householdSizeMin: number
   register: UseFormMethods["register"]
   validate: boolean
+  strings?: {
+    dontQualifyDescription?: string
+    dontQualifyHeader?: string
+    getAssistance?: string
+    householdTooBigError?: string
+    householdTooSmallError?: string
+  }
 }
 
 const HouseholdSizeField = (props: HouseholdSizeFieldProps) => {
@@ -26,6 +33,7 @@ const HouseholdSizeField = (props: HouseholdSizeFieldProps) => {
     clearErrors,
     error,
     assistanceUrl,
+    strings,
   } = props
   if (!householdSizeMax || !validate) {
     return <></>
@@ -44,11 +52,11 @@ const HouseholdSizeField = (props: HouseholdSizeFieldProps) => {
               ? register({
                   min: {
                     value: householdSizeMin || 0,
-                    message: t("errors.householdTooSmall"),
+                    message: strings?.householdTooSmallError ?? t("errors.householdTooSmall"),
                   },
                   max: {
                     value: householdSizeMax,
-                    message: t("errors.householdTooBig"),
+                    message: strings?.householdTooBigError ?? t("errors.householdTooBig"),
                   },
                 })
               : register
@@ -58,15 +66,17 @@ const HouseholdSizeField = (props: HouseholdSizeFieldProps) => {
       <ErrorMessage
         id={"householdsize-error"}
         error={!!error}
-        className="block mt-0 line-normal text-red-700"
+        className="block mt-0 line-normal text-alert"
       >
         <AlertBox type="alert" inverted onClose={() => clearErrors()}>
-          {t("application.household.dontQualifyHeader")}
+          {strings?.dontQualifyHeader ?? t("application.household.dontQualifyHeader")}
         </AlertBox>
         <AlertNotice title={error?.message} type="alert" inverted>
-          <p className="mb-2">{t("application.household.dontQualifyInfo")}</p>
+          <p className="mb-2">
+            {strings?.dontQualifyDescription ?? t("application.household.dontQualifyInfo")}
+          </p>
           <p>
-            <a href={assistanceUrl}>{t("pageTitle.getAssistance")}</a>
+            <a href={assistanceUrl}>{strings?.getAssistance ?? t("pageTitle.getAssistance")}</a>
           </p>
         </AlertNotice>
       </ErrorMessage>

package/src/forms/TimeField.tsx

@@ -29,6 +29,14 @@ export type TimeFieldProps = {
   watch: UseFormMethods["watch"]
   seconds?: boolean
   dataTestId?: string
+  strings?: {
+    hour?: string
+    minutes?: string
+    minutesPlaceholder?: string
+    seconds?: string
+    time?: string
+    timeError?: string
+  }
 }
 
 export const formatDateToTimeField = (date: Date) => {
@@ -56,6 +64,7 @@ const TimeField = ({
   defaultValues,
   disabled,
   dataTestId,
+  strings,
 }: TimeFieldProps) => {
   const fieldName = (baseName: string) => {
     return [name, baseName].filter((item) => item).join(".")
@@ -82,7 +91,7 @@ const TimeField = ({
       <div className="field-group--date">
         <Field
           name={fieldName("hours")}
-          label={t("t.hour")}
+          label={strings?.hour ?? t("t.hour")}
           defaultValue={defaultValues?.hours ?? ""}
           readerOnly={true}
           placeholder="HH"
@@ -106,10 +115,10 @@ const TimeField = ({
 
         <Field
           name={fieldName("minutes")}
-          label={t("t.minutes")}
+          label={strings?.minutes ?? t("t.minutes")}
           defaultValue={defaultValues?.minutes ?? ""}
           readerOnly={true}
-          placeholder={t("account.settings.placeholders.month")}
+          placeholder={strings?.minutesPlaceholder ?? t("account.settings.placeholders.month")}
           error={error}
           validation={{
             required: required || innerRequiredRule,
@@ -130,7 +139,7 @@ const TimeField = ({
 
         {seconds && (
           <Field
-            label={t("t.seconds")}
+            label={strings?.seconds ?? t("t.seconds")}
             defaultValue={defaultValues?.seconds ?? ""}
             name={fieldName("seconds")}
             readerOnly={true}
@@ -158,7 +167,7 @@ const TimeField = ({
           name={fieldName("period")}
           id={fieldName("period")}
           labelClassName="sr-only"
-          label={t("t.time")}
+          label={strings?.time ?? t("t.time")}
           register={register}
           options={["am", "pm"]}
           keyPrefix="t"
@@ -172,7 +181,7 @@ const TimeField = ({
 
       <div id={`${id}-error`} className="field error">
         <ErrorMessage id={"time-field-error"} error={error}>
-          {t("errors.timeError")}
+          {strings?.timeError ?? t("errors.timeError")}
         </ErrorMessage>
       </div>
     </fieldset>

package/src/global/custom_counter.scss

@@ -45,6 +45,6 @@
 }
 
 .custom-counter__subtitle {
-  @apply text-gray-700;
+  @apply text-gray-750;
   @apply text-tiny;
 }

package/src/global/forms.scss

@@ -1,4 +1,10 @@
 .field {
+  --bordered-border-width: 1px;
+  --bordered-border-radius: var(--bloom-s1_5);
+  --bordered-vertical-padding: var(--bloom-s4);
+  --bordered-leftward-padding: 2.875rem;
+  --bordered-checked-bg-color: var(--bloom-color-gray-100);
+
   margin-bottom: 1.25rem;
 
   * > &:last-child {
@@ -29,6 +35,34 @@
     @apply mt-0;
   }
 
+  .field-border {
+    label {
+      background-color: var(--bloom-color-white);
+      padding-top: var(--bordered-vertical-padding);
+      padding-bottom: var(--bordered-vertical-padding);
+      padding-left: var(--bordered-leftward-padding);
+      border-width: var(--bordered-border-width);
+      border-radius: var(--bordered-border-radius);
+      border-color: var(--bloom-color-gray-450);
+    }
+    input[type="checkbox"] + label::before,
+    input[type="radio"] + label::before,
+    input[type="checkbox"]:focus + label::before,
+    input[type="radio"]:focus + label::before {
+      background-color: none;
+      box-shadow: 0 0 0 1px white, 0 0 0 2px var(--bloom-color-gray-450);
+    }
+    input[type="checkbox"]:focus + label,
+    input[type="radio"]:focus + label {
+      box-shadow: 0 0 0 1px white, 0 0 0 2px var(--bloom-color-accent-cool),
+        0 0 3px 4px var(--bloom-color-accent-cool);
+    }
+    input[type="checkbox"]:checked + label,
+    input[type="radio"]:checked + label {
+      background-color: var(--bordered-checked-bg-color);
+    }
+  }
+
   .control {
     position: relative;
 
@@ -196,7 +230,7 @@
 
   &.error {
     label {
-      @apply text-red-700;
+      @apply text-alert;
     }
 
     .control {
@@ -208,7 +242,7 @@
       }
 
       .prepend {
-        @apply text-red-700;
+        @apply text-alert;
       }
     }
 
@@ -321,17 +355,16 @@ input[type="number"] {
 .field-note {
   @apply text-tiny;
   @apply text-gray-700;
-  @apply font-semibold;
   white-space: pre-line;
 }
 
 .error-message {
   display: inline-block;
   @apply text-sm;
-  @apply text-red-700;
+  @apply text-alert;
   @apply tracking-wide;
   @apply leading-5;
-  @apply mt-2;
+  @apply mt-1;
 }
 
 .field-sub-note {

package/src/global/headers.scss

@@ -74,7 +74,7 @@
   @apply text-tiny;
 
   @screen md {
-    @apply text-gray-700;
+    @apply text-gray-750;
   }
 }
 

package/src/global/markdown.scss

@@ -1,5 +1,5 @@
 .markdown {
-  h3 {
+  h2 {
     @apply mt-8;
     @apply mb-5;
     @apply text-3xl;
@@ -9,7 +9,7 @@
     }
   }
 
-  h3:first-child {
+  h2:first-child {
     @apply mt-0;
   }
 

package/src/headers/Hero.tsx

@@ -14,6 +14,9 @@ export interface HeroProps {
   secondaryButtonLink?: string
   secondaryButtonTitle?: string
   title: React.ReactNode
+  strings?: {
+    allApplicationsClosed?: string
+  }
 }
 
 const HeroButton = (props: { title: string; href: string; className?: string }) => (
@@ -26,7 +29,11 @@ const Hero = (props: HeroProps) => {
   let subHeader, styles
   let classNames = ""
   if (props.allApplicationsClosed) {
-    subHeader = <h2 className="hero__subtitle">{t("welcome.allApplicationClosed")}</h2>
+    subHeader = (
+      <h2 className="hero__subtitle">
+        {props.strings?.allApplicationsClosed ?? t("welcome.allApplicationClosed")}
+      </h2>
+    )
   } else if (props.children) {
     subHeader = <h2 className="hero__subtitle">{props.children}</h2>
   }

package/src/headers/PageHeader.scss

@@ -1,6 +1,6 @@
 .page-header {
   /* Component Variables */
-  --background-color: var(--bloom-color-primary-lighter);
+  --background-color: var(--bloom-color-gray-300);
   --border-color: var(--bloom-color-gray-450);
   --text-color: inherit;
   --text-font-family: var(--bloom-font-serif);

package/src/headers/PageHeader.tsx

@@ -19,7 +19,11 @@ const PageHeader = (props: PageHeaderProps) => {
   return (
     <header className={classNames.join(" ")}>
       <hgroup className="page-header__group">
-        {props?.breadcrumbs && <nav className="page-header__breadcrumbs">{props?.breadcrumbs}</nav>}
+        {props?.breadcrumbs && (
+          <nav className="page-header__breadcrumbs" aria-label={"Page Header"}>
+            {props?.breadcrumbs}
+          </nav>
+        )}
 
         {props.title && (
           <h1 data-test-id="page-header" className="page-header__title">

package/src/headers/SiteHeader.tsx

@@ -38,6 +38,11 @@ export interface SiteHeaderProps {
   noticeMobile?: boolean
   siteHeaderWidth?: SiteHeaderWidth
   title?: string
+  strings?: {
+    close?: string
+    logoAriaLable?: string
+    menu?: string
+  }
 }
 
 const SiteHeader = (props: SiteHeaderProps) => {
@@ -240,7 +245,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
                   setMobileDrawer(false)
                 }
               }}
-              aria-label={t("t.close")}
+              aria-label={props.strings?.close ?? t("t.close")}
             >
               <Icon size="small" symbol="arrowForward" fill={"#ffffff"} className={"pl-2"} />
             </button>
@@ -377,7 +382,9 @@ const SiteHeader = (props: SiteHeaderProps) => {
               }
             }}
           >
-            <div className={"pr-2 text-tiny text-primary uppercase"}>{t("t.menu")}</div>
+            <div className={"pr-2 text-tiny text-primary uppercase"}>
+              {props.strings?.menu ?? t("t.menu")}
+            </div>
             <Icon
               symbol={mobileMenu ? "closeSmall" : "hamburger"}
               size={"base"}
@@ -400,7 +407,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
             className={"navbar-mobile-menu-button"}
             unstyled
           >
-            {mobileMenu ? t("t.close") : t("t.menu")}
+            {mobileMenu ? props.strings?.close ?? t("t.close") : props.strings?.menu ?? t("t.menu")}
           </Button>
         )}
       </>
@@ -415,7 +422,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
             props.logoWidth && "navbar-custom-width"
           }`}
           href={props.homeURL}
-          aria-label={t("t.homePage")}
+          aria-label={props.strings?.logoAriaLable ?? t("t.homePage")}
         >
           <div className={`logo-content ${props.imageOnly && "navbar-image-only-container"}`}>
             <img

package/src/helpers/formOptions.tsx

@@ -5,6 +5,9 @@ import { SelectOption } from "../forms/Select"
 export interface FormOptionsProps {
   options: (string | SelectOption)[]
   keyPrefix?: string
+  strings?: {
+    selectOne?: string
+  }
 }
 
 export const numberOptions = (end: number, start = 1): SelectOption[] => {
@@ -21,7 +24,7 @@ export const FormOptions = (props: FormOptionsProps) => {
     if (option == "" || option["value"] == "") {
       return (
         <option value="" key="select-one">
-          {t("t.selectOne")}
+          {props.strings?.selectOne ?? t("t.selectOne")}
         </option>
       )
     } else {