@bloom-housing/ui-components 5.1.1-alpha.32 → 5.1.1-alpha.33

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.1.1-alpha.33](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.32...@bloom-housing/ui-components@5.1.1-alpha.33) (2022-09-26)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
 ## [5.1.1-alpha.32](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.31...@bloom-housing/ui-components@5.1.1-alpha.32) (2022-09-26)
 
 **Note:** Version bump only for package @bloom-housing/ui-components

package/package.json

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

package/src/forms/DOBField.tsx

@@ -44,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
 
@@ -56,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}>
@@ -132,7 +135,7 @@ 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 : props.strings?.dateError ?? t("errors.dateOfBirthError")}

package/src/forms/Field.tsx

@@ -81,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

@@ -61,7 +61,7 @@ const FieldGroup = ({
   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`

package/src/forms/HouseholdSizeField.tsx

@@ -66,7 +66,7 @@ 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()}>
           {strings?.dontQualifyHeader ?? t("application.household.dontQualifyHeader")}

package/src/global/forms.scss

@@ -230,7 +230,7 @@
 
   &.error {
     label {
-      @apply text-red-700;
+      @apply text-alert;
     }
 
     .control {
@@ -242,7 +242,7 @@
       }
 
       .prepend {
-        @apply text-red-700;
+        @apply text-alert;
       }
     }
 
@@ -355,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/notifications/AlertBox.scss

@@ -12,7 +12,7 @@
   --warn-invert-background-color: var(--bloom-color-warn);
   --text-color: var(--bloom-color-gray-900);
   --close-icon-color: var(--bloom-color-gray-900);
-  --font-weight: 600;
+  --font-weight: 500;
   --max-width: var(--bloom-width-5xl);
   --line-height: 1.375;
 

package/src/page_components/sign-in/FormSignInErrorBox.tsx

@@ -27,7 +27,7 @@ const FormSignInErrorBox = ({ networkStatus, errors, errorMessageId }: FormSignI
         <ErrorMessage
           id={`form-sign-in-${errorMessageId}-error`}
           error={!!networkStatus.content}
-          className="block mt-0 leading-normal text-red-700"
+          className="block mt-0 leading-normal text-alert"
         >
           <AlertBox type={"alert"} inverted onClose={() => networkStatus.reset()}>
             {networkStatus.content.title}