@abgov/jsonforms-components 1.42.5 → 1.42.7

package/index.esm.js

@@ -3684,7 +3684,7 @@ const GoAInputBaseControl = props => {
           error: modifiedErrors,
           testId: `${isStepperReview === true && 'review-base-'}${path}`,
           label: (props === null || props === void 0 ? void 0 : props.noLabel) === true ? '' : labelToUpdate,
-          helpText: typeof ((_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.help) === 'string' ? (_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.help : '',
+          helpText: typeof ((_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.help) === 'string' && !isStepperReview ? (_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.help : '',
           children: jsx(InnerComponent, Object.assign({}, modifiedProps))
         })
       })
@@ -4435,7 +4435,7 @@ let _$7 = t => t,
   _t$7,
   _t2$4,
   _t3$4,
-  _t4$2;
+  _t4$3;
 const GoADropdownTextbox = styled.div(_t$7 || (_t$7 = _$7`
   border-radius: var(--goa-space-2xs);
   box-shadow: ${0};
@@ -4475,7 +4475,7 @@ const GoADropdownListContainer = styled.div(_t3$4 || (_t3$4 = _$7`
     scrollbar-color: #a8a8a8 var(--goa-color-greyscale-100) !important;
   }
 `), p => p.optionListMaxHeight || '272px');
-const GoADropdownListOption = styled.div(_t4$2 || (_t4$2 = _$7`
+const GoADropdownListOption = styled.div(_t4$3 || (_t4$3 = _$7`
   padding: var(--goa-space-2xs) var(--goa-space-s);
   text-overflow: ellipsis;
   color: ${0} !important;
@@ -5118,7 +5118,7 @@ let _$5 = t => t,
   _t$5,
   _t2$3,
   _t3$3,
-  _t4$1,
+  _t4$2,
   _t5$1,
   _t6$1,
   _t7$1,
@@ -5149,7 +5149,7 @@ const ReviewItemHeader = styled.div(_t3$3 || (_t3$3 = _$5`
   justify-content: space-between;
   margin-bottom: 2rem;
 `));
-const ReviewItemTitle = styled.div(_t4$1 || (_t4$1 = _$5`
+const ReviewItemTitle = styled.div(_t4$2 || (_t4$2 = _$5`
   font-size: var(--fs-xl);
   line-height: var(--lh-lg);
   font-weight: var(--fw-light);
@@ -5673,7 +5673,7 @@ const FormStepper = props => {
     const categoryLabels = [...allCategories.elements.map(category => category.label), summaryLabel];
     const visibleLabels = [...visibleCategoryLabels, summaryLabel];
     const newPage = mapToVisibleStep(page, categoryLabels, visibleLabels);
-    const pageStatus = getCompletionStatus(inputStatuses, page);
+    const pageStatus = getCompletionStatus(inputStatuses, page, true);
     const statuses = [...stepStatuses];
     statuses[page - 1] = pageStatus ? pageStatus : 'incomplete';
     setStepStatuses(statuses);
@@ -6312,7 +6312,7 @@ let _$2 = t => t,
   _t$2,
   _t2$1,
   _t3$1,
-  _t4,
+  _t4$1,
   _t5,
   _t6,
   _t7,
@@ -6333,7 +6333,7 @@ const NonEmptyCellStyle = styled.div(_t2$1 || (_t2$1 = _$2`
 const ToolBarHeader = styled.div(_t3$1 || (_t3$1 = _$2`
   margin-bottom: var(--goa-space-l);
 `));
-const ObjectArrayTitle = styled.h2(_t4 || (_t4 = _$2`
+const ObjectArrayTitle = styled.h2(_t4$1 || (_t4$1 = _$2`
   margin-bottom: var(--goa-space-l);
 `));
 const TextCenter = styled.div(_t5 || (_t5 = _$2`
@@ -7466,7 +7466,8 @@ const GoAListWithDetailsTester = rankWith(3, and(uiTypeIs('ListWithDetail')));
 let _$1 = t => t,
   _t$1,
   _t2,
-  _t3;
+  _t3,
+  _t4;
 const SearchBox = styled.div(_t$1 || (_t$1 = _$1`
   position: relative;
 
@@ -7498,11 +7499,14 @@ const SearchBox = styled.div(_t$1 || (_t$1 = _$1`
     font-weight: var(--fw-bold);
   }
 `));
-const LabelDiv = styled.div(_t2 || (_t2 = _$1`
+const AddressIndent = styled.div(_t2 || (_t2 = _$1`
+  margin: 1em 1.5em 0 1.5em;
+`));
+const LabelDiv = styled.div(_t3 || (_t3 = _$1`
   font-size: var(--fs-sl);
   padding-bottom: 1.5rem;
 `));
-const ListItem = styled.li(_t3 || (_t3 = _$1`
+const ListItem = styled.li(_t4 || (_t4 = _$1`
   background-color: ${0};
   color: ${0};
   font-weight: ${0};
@@ -8197,55 +8201,63 @@ const AddressViews = ({
     label: 'Yukon'
   }];
   return jsxs(Fragment, {
-    children: [jsxs(GoAGrid, {
+    children: [jsx(GoAGrid, {
       minChildWidth: "0",
       gap: "s",
-      children: [jsx(GoAFormItem, {
-        error: ((_a = data === null || data === void 0 ? void 0 : data.addressLine1) === null || _a === void 0 ? void 0 : _a.length) === 0 ? 'addressLine1 is required' : '',
-        label: `${isAlbertaAddress ? 'Alberta p' : 'Canada p'}ostal address`,
-        children: jsx("p", {
-          children: data === null || data === void 0 ? void 0 : data.addressLine1
-        })
-      }), (data === null || data === void 0 ? void 0 : data.addressLine2) && jsx(GoAFormItem, {
-        label: "Address line 2",
-        children: jsx("p", {
-          children: data.addressLine2
-        })
-      })]
-    }), jsx("br", {}), jsxs(GoAGrid, {
-      minChildWidth: "0ch",
-      gap: "s",
-      children: [jsx(GoAFormItem, {
-        error: ((_b = data === null || data === void 0 ? void 0 : data.municipality) === null || _b === void 0 ? void 0 : _b.length) === 0 ? 'city is required' : '',
-        label: "City",
-        children: jsx("p", {
-          children: data === null || data === void 0 ? void 0 : data.municipality
-        })
-      }), jsx(GoAFormItem, {
-        error: ((_c = data === null || data === void 0 ? void 0 : data.postalCode) === null || _c === void 0 ? void 0 : _c.length) === 0 ? 'postalCode is required' : '',
-        label: "Postal Code",
-        children: jsx("p", {
-          children: data === null || data === void 0 ? void 0 : data.postalCode
-        })
-      })]
-    }), jsx("br", {}), jsxs(GoAGrid, {
-      minChildWidth: "0",
-      gap: "s",
-      children: [jsxs(GoAFormItem, {
-        label: "Province",
-        children: [isAlbertaAddress && jsx("div", {
-          "data-testid": "address-form-province-view",
-          children: "Alberta"
-        }), !isAlbertaAddress && jsx("div", {
-          "data-testid": "address-form-province-view",
-          children: (_d = provinces.find(p => p.value === (data === null || data === void 0 ? void 0 : data.subdivisionCode))) === null || _d === void 0 ? void 0 : _d.label
+      children: jsx(GoAFormItem, {
+        label: `${isAlbertaAddress ? 'Alberta' : 'Canada'} postal address`
+      })
+    }), jsxs(AddressIndent, {
+      children: [jsxs(GoAGrid, {
+        minChildWidth: "0",
+        gap: "s",
+        children: [jsx(GoAFormItem, {
+          label: "Address line 1",
+          error: ((_a = data === null || data === void 0 ? void 0 : data.addressLine1) === null || _a === void 0 ? void 0 : _a.length) === 0 ? 'addressLine1 is required' : '',
+          children: jsx("p", {
+            children: data === null || data === void 0 ? void 0 : data.addressLine1
+          })
+        }), (data === null || data === void 0 ? void 0 : data.addressLine2) && jsx(GoAFormItem, {
+          label: "Address line 2",
+          children: jsx("p", {
+            children: data.addressLine2
+          })
+        })]
+      }), jsx("br", {}), jsxs(GoAGrid, {
+        minChildWidth: "0ch",
+        gap: "s",
+        children: [jsx(GoAFormItem, {
+          error: ((_b = data === null || data === void 0 ? void 0 : data.municipality) === null || _b === void 0 ? void 0 : _b.length) === 0 ? 'city is required' : '',
+          label: "City",
+          children: jsx("p", {
+            children: data === null || data === void 0 ? void 0 : data.municipality
+          })
+        }), jsx(GoAFormItem, {
+          error: ((_c = data === null || data === void 0 ? void 0 : data.postalCode) === null || _c === void 0 ? void 0 : _c.length) === 0 ? 'postalCode is required' : '',
+          label: "Postal Code",
+          children: jsx("p", {
+            children: data === null || data === void 0 ? void 0 : data.postalCode
+          })
+        })]
+      }), jsx("br", {}), jsxs(GoAGrid, {
+        minChildWidth: "0",
+        gap: "s",
+        children: [jsxs(GoAFormItem, {
+          label: "Province",
+          children: [isAlbertaAddress && jsx("div", {
+            "data-testid": "address-form-province-view",
+            children: "Alberta"
+          }), !isAlbertaAddress && jsx("div", {
+            "data-testid": "address-form-province-view",
+            children: (_d = provinces.find(p => p.value === (data === null || data === void 0 ? void 0 : data.subdivisionCode))) === null || _d === void 0 ? void 0 : _d.label
+          })]
+        }), jsx(GoAFormItem, {
+          label: "Country",
+          children: jsx("div", {
+            "data-testid": "address-form-country",
+            children: "Canada"
+          })
         })]
-      }), jsx(GoAFormItem, {
-        label: "Country",
-        children: jsx("div", {
-          "data-testid": "address-form-country",
-          children: "Canada"
-        })
       })]
     }), jsx("br", {}), jsx("br", {})]
   });
@@ -8258,11 +8270,9 @@ const AddressLookUpControlReview = props => {
     schema
   } = props;
   const isAlbertaAddress = ((_b = (_a = schema === null || schema === void 0 ? void 0 : schema.properties) === null || _a === void 0 ? void 0 : _a.subdivisionCode) === null || _b === void 0 ? void 0 : _b.const) === 'AB';
-  return jsx("div", {
-    children: jsx(AddressViews, {
-      data: data,
-      isAlbertaAddress: isAlbertaAddress
-    })
+  return jsx(AddressViews, {
+    data: data,
+    isAlbertaAddress: isAlbertaAddress
   });
 };
 
@@ -8378,30 +8388,44 @@ const NameInputs = ({
 };
 
 const FullNameReviewControl = props => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e;
   const requiredFields = props.schema.required;
+  const [errors, setErrors] = useState({});
+  useEffect(() => {
+    var _a, _b;
+    const err = {};
+    if ((requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('firstName')) && !((_a = props.data) === null || _a === void 0 ? void 0 : _a.firstName)) {
+      err['firstName'] = `First name is required`;
+    }
+    if ((requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('lastName')) && !((_b = props.data) === null || _b === void 0 ? void 0 : _b.lastName)) {
+      err['lastName'] = `Last name is required`;
+    }
+    setErrors(err);
+  }, [props.data, requiredFields]);
   return jsxs(GoAGrid, {
     minChildWidth: "0ch",
     gap: "s",
     children: [jsx(GoAFormItem, {
       label: "First Name",
       requirement: (requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('firstName')) ? 'required' : undefined,
+      error: (_a = errors === null || errors === void 0 ? void 0 : errors['firstName']) !== null && _a !== void 0 ? _a : '',
       children: jsx("div", {
         "data-testid": `firstName-control-${props.id}`,
-        children: (_a = props.data) === null || _a === void 0 ? void 0 : _a.firstName
+        children: (_b = props.data) === null || _b === void 0 ? void 0 : _b.firstName
       })
     }), jsx(GoAFormItem, {
       label: "Middle Name",
       children: jsx("div", {
         "data-testid": `middleName-control-${props.id}`,
-        children: (_b = props.data) === null || _b === void 0 ? void 0 : _b.middleName
+        children: (_c = props.data) === null || _c === void 0 ? void 0 : _c.middleName
       })
     }), jsx(GoAFormItem, {
       label: "Last Name",
       requirement: (requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('lastName')) ? 'required' : undefined,
+      error: (_d = errors === null || errors === void 0 ? void 0 : errors['lastName']) !== null && _d !== void 0 ? _d : '',
       children: jsx("div", {
         "data-testid": `lastName-control-${props.id}`,
-        children: (_c = props.data) === null || _c === void 0 ? void 0 : _c.lastName
+        children: (_e = props.data) === null || _e === void 0 ? void 0 : _e.lastName
       })
     })]
   });
@@ -8492,6 +8516,7 @@ const FullNameDobControl = props => {
   };
   const [formData, setFormData] = useState(data || defaultNameAndDob);
   const updateFormData = updatedData => {
+    updatedData = Object.fromEntries(Object.entries(updatedData).filter(([_, value]) => value !== ''));
     handleChange(path, updatedData);
   };
   const handleInputChange = (field, value) => {
@@ -8500,7 +8525,6 @@ const FullNameDobControl = props => {
     });
     setFormData(updatedData);
     updateFormData(updatedData);
-    handleRequiredFieldBlur(field, updatedData);
   };
   const handleDobChange = (field, value) => {
     const updatedData = Object.assign(Object.assign({}, formData), {
@@ -8537,7 +8561,6 @@ const FullNameDobControl = props => {
           value: formData.firstName || '',
           onChange: (name, value) => {
             handleInputChange(name, value);
-            handleRequiredFieldBlur(name);
           },
           onBlur: name => {
             /* istanbul ignore next */
@@ -8604,8 +8627,23 @@ const FullNameDobControl = props => {
 };
 
 const FullNameDobReviewControl = props => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f, _g;
   const requiredFields = props.schema.required;
+  const [errors, setErrors] = useState({});
+  useEffect(() => {
+    var _a, _b, _c;
+    const err = {};
+    if ((requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('firstName')) && !((_a = props.data) === null || _a === void 0 ? void 0 : _a.firstName)) {
+      err['firstName'] = `First name is required`;
+    }
+    if ((requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('lastName')) && !((_b = props.data) === null || _b === void 0 ? void 0 : _b.lastName)) {
+      err['lastName'] = `Last name is required`;
+    }
+    if ((requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('dateOfBirth')) && !((_c = props.data) === null || _c === void 0 ? void 0 : _c.dateOfBirth)) {
+      err['dateOfBirth'] = `Date of birth is required`;
+    }
+    setErrors(err);
+  }, [props.data, requiredFields]);
   return jsxs(Fragment, {
     children: [jsxs(GoAGrid, {
       minChildWidth: "0ch",
@@ -8613,22 +8651,24 @@ const FullNameDobReviewControl = props => {
       children: [jsx(GoAFormItem, {
         label: "First name",
         requirement: (requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('firstName')) ? 'required' : undefined,
+        error: (_a = errors === null || errors === void 0 ? void 0 : errors['firstName']) !== null && _a !== void 0 ? _a : '',
         children: jsx("div", {
           "data-testid": `firstName-control-${props.id}`,
-          children: (_a = props.data) === null || _a === void 0 ? void 0 : _a.firstName
+          children: (_b = props.data) === null || _b === void 0 ? void 0 : _b.firstName
         })
       }), jsx(GoAFormItem, {
         label: "Middle name",
         children: jsx("div", {
           "data-testid": `middleName-control-${props.id}`,
-          children: (_b = props.data) === null || _b === void 0 ? void 0 : _b.middleName
+          children: (_c = props.data) === null || _c === void 0 ? void 0 : _c.middleName
         })
       }), jsx(GoAFormItem, {
         label: "Last name",
         requirement: (requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('lastName')) ? 'required' : undefined,
+        error: (_d = errors === null || errors === void 0 ? void 0 : errors['lastName']) !== null && _d !== void 0 ? _d : '',
         children: jsx("div", {
           "data-testid": `lastName-control-${props.id}`,
-          children: (_c = props.data) === null || _c === void 0 ? void 0 : _c.lastName
+          children: (_e = props.data) === null || _e === void 0 ? void 0 : _e.lastName
         })
       })]
     }), jsx(GoAGrid, {
@@ -8637,9 +8677,10 @@ const FullNameDobReviewControl = props => {
       children: jsx(GoAFormItem, {
         label: "Date of birth",
         requirement: (requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('dateOfBirth')) ? 'required' : undefined,
+        error: (_f = errors === null || errors === void 0 ? void 0 : errors['dateOfBirth']) !== null && _f !== void 0 ? _f : '',
         children: jsx("div", {
           "data-testid": `dob-control-${props.id}`,
-          children: (_d = props.data) === null || _d === void 0 ? void 0 : _d.dateOfBirth
+          children: (_g = props.data) === null || _g === void 0 ? void 0 : _g.dateOfBirth
         })
       })
     })]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.42.5",
+  "version": "1.42.7",
   "license": "Apache-2.0",
   "description": "Government of Alberta - React renderers for JSON Forms based on the design system.",
   "repository": "https://github.com/GovAlta/adsp-monorepo",

package/src/lib/Controls/AddressLookup/styled-components.d.ts

@@ -4,6 +4,7 @@ interface ListItemProps {
     index: number;
 }
 export declare const SearchBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const AddressIndent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const LabelDiv: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, ListItemProps>> & string;
 export {};