@ukhomeoffice/cop-react-form-renderer 4.15.1 → 4.16.1-alpha

package/dist/components/FormComponent/Container.js

@@ -65,11 +65,17 @@ var Container = function Container(_ref) {
   };
 
   var shouldShow = function shouldShow(options) {
+    var full_path = "".concat(container.full_path || container.fieldId, ".").concat(options.fieldId);
+
     if (options.type === _models.ComponentTypes.CONTAINER) {
-      return _utils.default.Container.show(options, formData);
+      return _utils.default.Container.show(_objectSpread(_objectSpread({}, options), {}, {
+        full_path: full_path
+      }), formData);
     }
 
-    return _utils.default.Component.show(options, formData);
+    return _utils.default.Component.show(_objectSpread(_objectSpread({}, options), {}, {
+      full_path: full_path
+    }), formData);
   };
 
   var classes = _utils.default.classBuilder(DEFAULT_CLASS, [], container.className);
@@ -80,10 +86,12 @@ var Container = function Container(_ref) {
   }), container.components && container.components.filter(shouldShow).map(function (component, index) {
     var defaultValue = component.type === _models.ComponentTypes.FILE ? {} : '';
     var val = value ? value[component.fieldId] : defaultValue;
+    var full_path = "".concat(container.full_path || container.fieldId, ".").concat(component.fieldId);
     return /*#__PURE__*/_react.default.createElement(_FormComponent.default, _extends({
       key: index
     }, attrs, {
       component: _objectSpread(_objectSpread({}, component), {}, {
+        full_path: full_path,
         readonly: container.readonly ? true : component.readonly
       }),
       formData: formData,

package/dist/components/FormComponent/Container.test.js

@@ -80,7 +80,7 @@ describe('components.FormComponent.Container', function () {
             expect(label.tagName).toEqual('LABEL');
             expect(label.classList).toContain('govuk-label');
             expect(label.textContent).toEqual("".concat(TEXT_COMPONENT.label, " (optional)"));
-            expect(label.getAttribute('for')).toEqual(TEXT_ID);
+            expect(label.getAttribute('for')).toEqual("".concat(ID, ".").concat(TEXT_ID));
             hint = formGroup.childNodes[1];
             expect(hint.tagName).toEqual('SPAN');
             expect(hint.classList).toContain('govuk-hint');
@@ -88,7 +88,7 @@ describe('components.FormComponent.Container', function () {
             input = formGroup.childNodes[2];
             expect(input.tagName).toEqual('INPUT');
             expect(input.classList).toContain('govuk-input');
-            expect(input.id).toEqual(TEXT_ID);
+            expect(input.id).toEqual("".concat(ID, ".").concat(TEXT_ID));
             expect(input.value).toEqual(TEXT_VALUE);
 
           case 22:
@@ -137,7 +137,7 @@ describe('components.FormComponent.Container', function () {
             expect(label.tagName).toEqual('LABEL');
             expect(label.classList).toContain('govuk-label');
             expect(label.textContent).toEqual("".concat(TEXT_COMPONENT.label, " (optional)"));
-            expect(label.getAttribute('for')).toEqual(TEXT_ID);
+            expect(label.getAttribute('for')).toEqual("".concat(ID, ".").concat(NESTED_ID, ".").concat(TEXT_ID));
             hint = formGroup.childNodes[1];
             expect(hint.tagName).toEqual('SPAN');
             expect(hint.classList).toContain('govuk-hint');
@@ -145,7 +145,7 @@ describe('components.FormComponent.Container', function () {
             input = formGroup.childNodes[2];
             expect(input.tagName).toEqual('INPUT');
             expect(input.classList).toContain('govuk-input');
-            expect(input.id).toEqual(TEXT_ID);
+            expect(input.id).toEqual("".concat(ID, ".").concat(NESTED_ID, ".").concat(TEXT_ID));
             expect(input.value).toEqual(NESTED_TEXT_VALUE);
 
           case 25:
@@ -318,7 +318,7 @@ describe('components.FormComponent.Container', function () {
             expect(label.tagName).toEqual('LABEL');
             expect(label.classList).toContain('govuk-label');
             expect(label.textContent).toEqual("".concat(TEXT_COMPONENT.label, " (optional)"));
-            expect(label.getAttribute('for')).toEqual(TEXT_ID);
+            expect(label.getAttribute('for')).toEqual("".concat(ID, ".").concat(TEXT_ID));
             hint = formGroup.childNodes[1];
             expect(hint.tagName).toEqual('SPAN');
             expect(hint.classList).toContain('govuk-hint');
@@ -326,7 +326,7 @@ describe('components.FormComponent.Container', function () {
             input = formGroup.childNodes[2];
             expect(input.tagName).toEqual('INPUT');
             expect(input.classList).toContain('govuk-input');
-            expect(input.id).toEqual(TEXT_ID);
+            expect(input.id).toEqual("".concat(ID, ".").concat(TEXT_ID));
             expect(input.value).toEqual('');
 
           case 22:
@@ -400,7 +400,7 @@ describe('components.FormComponent.Container', function () {
             expect(label.tagName).toEqual('LABEL');
             expect(label.classList).toContain('govuk-label');
             expect(label.textContent).toEqual("".concat(TEXT_COMPONENT.label, " (optional)"));
-            expect(label.getAttribute('for')).toEqual(TEXT_ID);
+            expect(label.getAttribute('for')).toEqual("".concat(ID, ".").concat(TEXT_ID));
             hint = formGroup.childNodes[1];
             expect(hint.tagName).toEqual('SPAN');
             expect(hint.classList).toContain('govuk-hint');
@@ -410,7 +410,7 @@ describe('components.FormComponent.Container', function () {
 
             expect(input.classList).toContain('hods-readonly'); // Now readonly, so hods-readonly
 
-            expect(input.id).toEqual(TEXT_ID);
+            expect(input.id).toEqual("".concat(ID, ".").concat(TEXT_ID));
             expect(input.textContent).toEqual(TEXT_VALUE);
 
           case 22:

package/dist/components/FormComponent/FormComponent.js

@@ -90,6 +90,7 @@ var FormComponent = function FormComponent(_ref) {
     var target = _ref2.target;
 
     if (typeof onChange === 'function') {
+      target = (0, _helpers.addLabel)(target, component, data);
       onChange({
         target: target
       });

package/dist/components/FormComponent/helpers/addLabel.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+/**
+ * Adds label to target for given value.
+ * @param {object} target The target to be updated.
+ * @returns The updated target.
+ */
+var addLabel = function addLabel(target, component, data) {
+  // target.value can be an object in which case use value in object attribute
+  var value = _typeof(target.value) === 'object' ? target.value.value : target.value; // find the reference data item using the value
+
+  var item = data.find(function (e) {
+    return e.id === value;
+  }); // if item is null it means that the target.value can be used as a label otherwise use item.label
+
+  target['label'] = item === undefined ? target.value : item.label;
+  target['component'] = component.cya_label;
+  return target;
+};
+
+var _default = addLabel;
+exports.default = _default;

package/dist/components/FormComponent/helpers/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "addLabel", {
+  enumerable: true,
+  get: function get() {
+    return _addLabel.default;
+  }
+});
 Object.defineProperty(exports, "getComponentDisabled", {
   enumerable: true,
   get: function get() {
@@ -20,4 +26,6 @@ var _getComponentDisabled = _interopRequireDefault(require("./getComponentDisabl
 
 var _getComponentError = _interopRequireDefault(require("./getComponentError"));
 
+var _addLabel = _interopRequireDefault(require("./addLabel"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/components/FormPage/FormPage.js

@@ -68,6 +68,11 @@ var FormPage = function FormPage(_ref) {
 
   var _useValidation = (0, _hooks.useValidation)(),
       errors = _useValidation.errors;
+
+  var _useState3 = (0, _react.useState)({}),
+      _useState4 = _slicedToArray(_useState3, 2),
+      patchLabel = _useState4[0],
+      setPatchLabel = _useState4[1];
   /**
    * Handle the state of the data directly within the page.
    * This is so that the overall form data isn't affected until such
@@ -81,6 +86,9 @@ var FormPage = function FormPage(_ref) {
     setPatch(function (prev) {
       return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, target.name, target.value));
     });
+    setPatchLabel(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, target.component, target.label));
+    });
   };
 
   var classes = _utils.default.classBuilder(classBlock, classModifiers, className);
@@ -112,7 +120,7 @@ var FormPage = function FormPage(_ref) {
       return _utils.default.Component.show(action, page.formData);
     }),
     onAction: function onAction(action) {
-      return _onAction(action, patch);
+      return _onAction(action, patch, patchLabel);
     }
   }));
 };

package/dist/components/FormRenderer/FormRenderer.js

@@ -292,8 +292,11 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
   (0, _react.useEffect)(function () {
     if (newPageId !== undefined) setPageId(newPageId);
   }, [newPageId]); // Handle actions from pages.
+  // (patch captures payload ready field name and value, 
+  // patchLabel captures non ID values 
+  // for display purposes after submission.)
 
-  var onPageAction = function onPageAction(action, patch) {
+  var onPageAction = function onPageAction(action, patch, patchLabel) {
     if (action.type === _models.PageAction.TYPES.CANCEL) {
       hooks.onCancel();
       return;
@@ -370,15 +373,16 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
 
         if (patch) {
           setData(submissionData);
-        } // In case of hub-and-spoke if patch has changed then save field name and value to variables for call to onSubmit hook
+        } // In case of hub-and-spoke if patchLabel has changed then 
+        // save name and value to variables for call to onSubmit hook
 
 
-        var changedFieldName = undefined;
-        var changedFieldValue = undefined;
+        var changedFieldName;
+        var changedFieldValue;
 
-        if (type === _models.FormTypes.HUB && Object.keys(patch).length > 0) {
-          changedFieldName = formState.page.components[0].cya_label;
-          changedFieldValue = Object.values(patch)[0];
+        if (type === _models.FormTypes.HUB && Object.keys(patchLabel).length > 0) {
+          changedFieldName = Object.keys(patchLabel)[0];
+          changedFieldValue = Object.values(patchLabel)[0];
         } // Now submit the data to the backend...
 
 

package/dist/utils/Validate/errors/elevateErrors.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/**
+ * Iterates over an array of errors and brings any nested 
+ * error that should be displayed into the top level array.
+ * 
+ * e.g.
+ *  [
+ *   null,
+ *   null,
+ *   [
+ *      { error },
+ *      { error },
+ *      { error },
+ *    ]
+ * ]
+ * 
+ * This allows us to have containers components, whose components are children 
+ * containers and those children container components are also made up of 
+ * containers.
+ * 
+ * e.g.
+ *  {
+ *    "type": "container",
+ *    "components": [
+ *     {
+ *       "type": "any-type"
+ *     },
+ *     {
+ *       "type": "container",
+ *       "components": [
+ *         {
+ *           "type": "any-type"
+ *         },
+ *         {
+ *           "type": "container",
+ *           "components": [
+ *             {
+ *               "type": "container",
+ *               "components":[]
+ *             }
+ *           ]
+ *         }
+ *       ]
+ *     }
+ *   ]
+ * }
+ * 
+ * 
+ * @param {*} errors A array of nested arrays containing errors.
+ * @returns An array containing error objects or an empty array when no errors are found.
+ */
+var elevateErrors = function elevateErrors(errors) {
+  var nestedErrors = [];
+
+  var getError = function getError(errors) {
+    errors.forEach(function (error) {
+      if (error) {
+        if (Array.isArray(error)) {
+          getError(error);
+        } else {
+          // Must be an error if not an array
+          nestedErrors.push(error);
+        }
+      }
+    });
+  };
+
+  getError(errors);
+  return nestedErrors;
+};
+
+var _default = elevateErrors;
+exports.default = _default;

package/dist/utils/Validate/errors/elevateErrors.test.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _elevateErrors = _interopRequireDefault(require("./elevateErrors"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('utils.Validate.ElevateErrors', function () {
+  it('should get nested errors wrapped within multiple arrays', function () {
+    var nestedErrors = [[undefined, undefined, [[{
+      "type": 'This Alpha error is required'
+    }, [{
+      "type": 'This Bravo error is required'
+    }, [[], {
+      "type": 'This Charlie error is required'
+    }]]]]]];
+    expect((0, _elevateErrors.default)(nestedErrors)).toHaveLength(3);
+    expect((0, _elevateErrors.default)(nestedErrors)).toMatchObject([{
+      "type": 'This Alpha error is required'
+    }, {
+      "type": 'This Bravo error is required'
+    }, {
+      "type": 'This Charlie error is required'
+    }]);
+  });
+  it('should get the single error within an array', function () {
+    var nestedErrors = [[{
+      "type": 'This Alpha error is required'
+    }]];
+    expect((0, _elevateErrors.default)(nestedErrors)).toHaveLength(1);
+    expect((0, _elevateErrors.default)(nestedErrors)).toMatchObject([{
+      "type": 'This Alpha error is required'
+    }]);
+  });
+});

package/dist/utils/Validate/errors/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _elevateErrors = _interopRequireDefault(require("./elevateErrors"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Errors = {
+  elevate: _elevateErrors.default
+};
+var _default = Errors;
+exports.default = _default;

package/dist/utils/Validate/validateContainer.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _elevateErrors = _interopRequireDefault(require("./errors/elevateErrors"));
+
 var _validateComponent = _interopRequireDefault(require("./validateComponent"));
 
 var _additional = _interopRequireDefault(require("./additional"));
@@ -44,9 +46,9 @@ var validateContainer = function validateContainer(container, outerData, formDat
     });
   }
 
-  return errors.filter(function (e) {
+  return (0, _elevateErrors.default)(errors.filter(function (e) {
     return !!e;
-  });
+  }));
 };
 
 var _default = validateContainer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "4.15.1",
+  "version": "4.16.1-alpha",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",