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

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/global/vendor/ag_grid.scss

@@ -11,6 +11,12 @@
     )
   );
 
+  --ag-selected-row-background-color: var(--bloom-color-primary-light);
+
+  a {
+    color: var(--bloom-color-primary-dark);
+  }
+
   .ag-row {
     height: ag-param(row-height);
   }
@@ -72,6 +78,15 @@
     @apply border-b-0;
   }
 
+  .ag-pinned-right-header,
+  .ag-cell.ag-cell-first-right-pinned:not(.ag-cell-range-left):not(.ag-cell-range-single-cell) {
+    @apply border-gray-450;
+    @apply border-r-0;
+    @apply border-t-0;
+    @apply border-l-4;
+    @apply border-b-0;
+  }
+
   .ag-row {
     @apply border-t-0;
     @apply border-l-0;
@@ -85,29 +100,48 @@
 
   .ag-body-viewport {
     ::-webkit-scrollbar {
-      // -webkit-appearance: none;
       height: 8px;
-      @apply bg-gray-600;
     }
 
     ::-webkit-scrollbar-thumb {
       border-radius: 8px;
-      @apply bg-gray-600;
+      @apply bg-gray-550;
     }
+  }
 
-    ::-webkit-scrollbar-track {
-      @apply bg-gray-100;
-      -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.7);
-      box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.7);
-    }
+  .ag-body-horizontal-scroll {
+    border-bottom: 1px solid var(--bloom-color-gray-500);
+    border-radius: var(--bloom-rounded-md);
   }
 
   .ag-root-wrapper {
     @apply border-b-0;
     @apply rounded-t-md;
-    @apply rounded-b-none;
+    @apply rounded-b-md;
     overflow: visible;
   }
+
+  .ag-layout-auto-height {
+    .ag-center-cols-container,
+    .ag-center-cols-clipper {
+      --table-min-height: 124px;
+      min-height: var(--table-min-height);
+    }
+  }
+
+  .ag-ltr {
+    .ag-selection-checkbox {
+      margin-right: var(--bloom-s6);
+    }
+  }
+
+  .ag-horizontal-right-spacer:not(.ag-scroller-corner) {
+    border: none;
+  }
+
+  .ag-horizontal-left-spacer:not(.ag-scroller-corner) {
+    border: none;
+  }
 }
 
 .data-pager {

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>
   }