@ukhomeoffice/cop-react-form-renderer 3.0.3 → 3.1.0

package/dist/components/FormComponent/Collection.js

@@ -67,15 +67,11 @@ var Collection = function Collection(_ref) {
       onChange = _ref.onChange,
       wrap = _ref.wrap;
 
-  var _useState = (0, _react.useState)(),
+  var _useState = (0, _react.useState)(_value),
       _useState2 = _slicedToArray(_useState, 2),
       value = _useState2[0],
       setValue = _useState2[1];
 
-  (0, _react.useEffect)(function () {
-    setValue(_value || []);
-  }, [_value, setValue]);
-
   var reportChange = function reportChange(newValue) {
     setValue(newValue);
 

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

@@ -0,0 +1,322 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _testUtils = require("react-dom/test-utils");
+
+var _models = require("../../models");
+
+var _setupTests = require("../../setupTests");
+
+var _utils = _interopRequireDefault(require("../../utils"));
+
+var _Collection = require("./Collection");
+
+var _Container = require("./Container");
+
+var _FormComponent = _interopRequireDefault(require("./FormComponent"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+describe('components.FormComponent.Collection', function () {
+  var ID = 'collection';
+  var TEXT_ID = 'text';
+  var TEXT_VALUE = 'alpha';
+
+  var FORM_DATA = _defineProperty({}, ID, [_defineProperty({
+    id: '1'
+  }, TEXT_ID, TEXT_VALUE)]);
+
+  var TEXT_COMPONENT = {
+    id: TEXT_ID,
+    fieldId: TEXT_ID,
+    type: _models.ComponentTypes.TEXT,
+    label: 'Text component',
+    hint: 'Text hint'
+  };
+  it('should render a collection component appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var COLLECTION, _renderWithValidation, container, c, item, _item$childNodes, title, itemContainer, formGroup, label, hint, input;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            COLLECTION = {
+              id: ID,
+              fieldId: ID,
+              type: _models.ComponentTypes.COLLECTION,
+              item: [TEXT_COMPONENT]
+            };
+            _renderWithValidation = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+              component: COLLECTION,
+              value: FORM_DATA[ID],
+              formData: FORM_DATA
+            })), container = _renderWithValidation.container; // Check the container itself.
+
+            c = container.childNodes[0];
+            expect(c.tagName).toEqual('DIV');
+            expect(c.classList).toContain(_Collection.DEFAULT_CLASS); // And now check the single text component within it.
+
+            item = c.childNodes[0];
+            expect(item.tagName).toEqual('DIV');
+            expect(item.classList).toContain("".concat(_Collection.DEFAULT_CLASS, "__item"));
+            _item$childNodes = _slicedToArray(item.childNodes, 2), title = _item$childNodes[0], itemContainer = _item$childNodes[1];
+            expect(title.tagName).toEqual('LABEL');
+            expect(title.classList).toContain("".concat(_Collection.DEFAULT_CLASS, "__item-title"));
+            expect(itemContainer.tagName).toEqual('DIV');
+            expect(itemContainer.classList).toContain(_Container.DEFAULT_CLASS);
+            formGroup = itemContainer.childNodes[0];
+            expect(formGroup.tagName).toEqual('DIV');
+            expect(formGroup.classList).toContain('govuk-form-group');
+            label = formGroup.childNodes[0];
+            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("".concat(ID, "[0].").concat(TEXT_ID));
+            hint = formGroup.childNodes[1];
+            expect(hint.tagName).toEqual('SPAN');
+            expect(hint.classList).toContain('govuk-hint');
+            expect(hint.textContent).toEqual(TEXT_COMPONENT.hint);
+            input = formGroup.childNodes[2];
+            expect(input.tagName).toEqual('INPUT');
+            expect(input.classList).toContain('govuk-input');
+            expect(input.id).toEqual("".concat(ID, "[0].").concat(TEXT_ID));
+            expect(input.value).toEqual(TEXT_VALUE);
+
+          case 30:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('should handle a change to a component appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+    var ON_CHANGE_EVENTS, ON_CHANGE, COLLECTION, _renderWithValidation2, container, c, item, formGroup, input, NEW_TEXT_VALUE, EVENT;
+
+    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            ON_CHANGE_EVENTS = [];
+
+            ON_CHANGE = function ON_CHANGE(e) {
+              ON_CHANGE_EVENTS.push(e);
+            };
+
+            COLLECTION = {
+              id: ID,
+              fieldId: ID,
+              type: _models.ComponentTypes.COLLECTION,
+              item: [{
+                id: TEXT_ID,
+                fieldId: TEXT_ID,
+                type: _models.ComponentTypes.TEXT,
+                label: 'Text component'
+              }]
+            };
+            _renderWithValidation2 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+              component: COLLECTION,
+              value: FORM_DATA[ID],
+              formData: FORM_DATA,
+              onChange: ON_CHANGE
+            })), container = _renderWithValidation2.container; // Get hold of the text input.
+
+            c = container.childNodes[0];
+            item = c.childNodes[0];
+            formGroup = item.childNodes[1].childNodes[0];
+            input = formGroup.childNodes[2];
+            NEW_TEXT_VALUE = 'bravo';
+            EVENT = {
+              target: {
+                name: TEXT_ID,
+                value: NEW_TEXT_VALUE
+              }
+            };
+
+            _react.fireEvent.change(input, EVENT); // And confirm the formData has been changed.
+
+
+            expect(ON_CHANGE_EVENTS.length).toEqual(1);
+            expect(ON_CHANGE_EVENTS[0].target.name).toEqual(ID);
+            expect(ON_CHANGE_EVENTS[0].target.value[0][TEXT_ID]).toEqual(NEW_TEXT_VALUE);
+
+          case 14:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('should handle a null value appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+    var COLLECTION, _renderWithValidation3, container, c, buttonGroup, button;
+
+    return regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            COLLECTION = {
+              id: ID,
+              fieldId: ID,
+              type: _models.ComponentTypes.COLLECTION,
+              item: [TEXT_COMPONENT]
+            };
+            _renderWithValidation3 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+              component: COLLECTION
+            })), container = _renderWithValidation3.container; // Check the container itself.
+
+            c = container.childNodes[0];
+            expect(c.tagName).toEqual('DIV');
+            expect(c.classList).toContain(_Collection.DEFAULT_CLASS); // And now make sure it has no children OTHER than the button to add an item.
+
+            expect(c.childNodes.length).toEqual(1);
+            buttonGroup = c.childNodes[0];
+            expect(buttonGroup.tagName).toEqual('DIV');
+            expect(buttonGroup.classList).toContain('hods-button-group');
+            button = buttonGroup.childNodes[0];
+            expect(button.tagName).toEqual('BUTTON');
+            expect(button.classList).toContain('hods-button');
+            expect(button.classList).toContain('hods-button--secondary');
+            expect(button.textContent).toContain(_models.CollectionLabels.add);
+
+          case 14:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  it('should handle a collection label appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
+    var LABEL, COLLECTION, _renderWithValidation4, container, c, _c$childNodes, title, buttonGroup, button;
+
+    return regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            LABEL = 'Alpha Collection';
+            COLLECTION = {
+              id: ID,
+              fieldId: ID,
+              type: _models.ComponentTypes.COLLECTION,
+              item: [TEXT_COMPONENT],
+              label: LABEL
+            };
+            _renderWithValidation4 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+              component: COLLECTION
+            })), container = _renderWithValidation4.container; // Check the container itself.
+
+            c = container.childNodes[0];
+            expect(c.tagName).toEqual('DIV');
+            expect(c.classList).toContain(_Collection.DEFAULT_CLASS); // And now make sure it has no children OTHER than the button to add an item.
+
+            expect(c.childNodes.length).toEqual(2);
+            _c$childNodes = _slicedToArray(c.childNodes, 2), title = _c$childNodes[0], buttonGroup = _c$childNodes[1];
+            expect(title.tagName).toEqual('LABEL');
+            expect(title.classList).toContain("".concat(_Collection.DEFAULT_CLASS, "__title"));
+            expect(title.getAttribute('for')).toEqual(ID);
+            expect(title.textContent).toContain(LABEL);
+            expect(buttonGroup.tagName).toEqual('DIV');
+            expect(buttonGroup.classList).toContain('hods-button-group');
+            button = buttonGroup.childNodes[0];
+            expect(button.tagName).toEqual('BUTTON');
+            expect(button.classList).toContain('hods-button');
+            expect(button.classList).toContain('hods-button--secondary');
+            expect(button.textContent).toContain(_models.CollectionLabels.add);
+
+          case 19:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })));
+  it('should handle the addition and removal of an item', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6() {
+    var COLLECTION, container, c, addButton, item, label, removeButton;
+    return regeneratorRuntime.wrap(function _callee6$(_context6) {
+      while (1) {
+        switch (_context6.prev = _context6.next) {
+          case 0:
+            COLLECTION = {
+              id: ID,
+              fieldId: ID,
+              type: _models.ComponentTypes.COLLECTION,
+              item: [TEXT_COMPONENT]
+            };
+            container = document.createElement('div');
+            document.body.appendChild(container);
+            _context6.next = 5;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
+              return regeneratorRuntime.wrap(function _callee5$(_context5) {
+                while (1) {
+                  switch (_context5.prev = _context5.next) {
+                    case 0:
+                      (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+                        component: COLLECTION
+                      }), container);
+
+                    case 1:
+                    case "end":
+                      return _context5.stop();
+                  }
+                }
+              }, _callee5);
+            })));
+
+          case 5:
+            // Check the container itself.
+            c = container.childNodes[0];
+            expect(c.tagName).toEqual('DIV');
+            expect(c.classList).toContain(_Collection.DEFAULT_CLASS); // And now make sure it has no children OTHER than the button to add an item.
+
+            expect(c.childNodes.length).toEqual(1); // Get hold of that "Add another" button and click it.
+
+            addButton = c.childNodes[0].childNodes[0];
+
+            _react.fireEvent.click(addButton, {}); // Make sure an item has been added.
+
+
+            expect(c.childNodes.length).toEqual(2);
+            item = c.childNodes[0];
+            label = item.childNodes[0];
+            expect(label.textContent).toContain(_utils.default.interpolateString(_models.CollectionLabels.item, {
+              index: 1
+            })); // Get hold of the newly-add item's "Remove" button.
+
+            removeButton = label.childNodes[1];
+            expect(removeButton.tagName).toEqual('BUTTON');
+            expect(removeButton.classList).toContain('hods-button--secondary');
+            expect(removeButton.textContent).toContain(_models.CollectionLabels.remove); // Click the "Remove" button
+
+            _react.fireEvent.click(removeButton, {}); // Make sure the item has been removed.
+
+
+            expect(c.childNodes.length).toEqual(1);
+            expect(c.childNodes[0].classList).toContain('hods-button-group');
+
+          case 22:
+          case "end":
+            return _context6.stop();
+        }
+      }
+    }, _callee6);
+  })));
+});

package/dist/components/FormRenderer/FormRenderer.js

@@ -247,6 +247,8 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
     // Check to see whether the action is able to proceed, which in
     // in the case of a submission will validate the fields in the page.
     if (_helpers.default.canActionProceed(action, formState.page, validate.page)) {
+      patch = _helpers.default.cleanHiddenNestedData(patch, formState.page);
+
       if (action.type === _models.PageAction.TYPES.NAVIGATE) {
         _handlers.default.navigate(action, pageId, onPageChange);
       } else {

package/dist/components/FormRenderer/helpers/cleanHiddenNestedData.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var parentComponents = ['radios'];
+
+var cleanHiddenNestedData = function cleanHiddenNestedData(patch, page) {
+  page.components.forEach(function (component) {
+    if (!parentComponents.includes(component.type)) {
+      return;
+    }
+
+    var idsToDelete = getIdsToDelete(component, patch[component.id]);
+    idsToDelete.forEach(function (id) {
+      delete patch[id];
+    });
+  });
+  return patch;
+};
+
+function getIdsToDelete(component, selectedValue) {
+  var _component$data, _component$data$optio;
+
+  var idsToDelete = [];
+  component === null || component === void 0 ? void 0 : (_component$data = component.data) === null || _component$data === void 0 ? void 0 : (_component$data$optio = _component$data.options) === null || _component$data$optio === void 0 ? void 0 : _component$data$optio.forEach(function (option) {
+    if (option.value !== selectedValue && option.nested) {
+      option.nested.forEach(function (nested) {
+        idsToDelete.push(nested.id);
+      });
+    }
+  });
+  return idsToDelete;
+}
+
+var _default = cleanHiddenNestedData;
+exports.default = _default;

package/dist/components/FormRenderer/helpers/cleanHiddenNestedData.test.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _cleanHiddenNestedData = _interopRequireDefault(require("./cleanHiddenNestedData"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Local imports
+describe('components', function () {
+  describe('FormRenderer', function () {
+    describe('helpers', function () {
+      describe('cleanHiddenNestedData', function () {
+        it('remove data corresponding to hidden nested components', function () {
+          var patch = {
+            parent: 'option2',
+            nested1: 'should not be included',
+            nested2: 'should be included'
+          };
+          var page = {
+            id: 'page',
+            name: 'page',
+            title: 'Page',
+            components: [{
+              id: 'parent',
+              fieldId: 'parent',
+              type: 'radios',
+              data: {
+                options: [{
+                  value: 'option1',
+                  nested: [{
+                    id: 'nested1',
+                    fieldId: 'nested1'
+                  }]
+                }, {
+                  value: 'option2',
+                  nested: [{
+                    id: 'nested2',
+                    fieldId: 'nested2'
+                  }]
+                }]
+              }
+            }]
+          };
+          var updatedPatch = (0, _cleanHiddenNestedData.default)(patch, page);
+          expect(updatedPatch['nested1']).toBeFalsy();
+          expect(updatedPatch['nested2']).toBeTruthy();
+        });
+      });
+    });
+  });
+});

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

@@ -9,6 +9,8 @@ var _canActionProceed = _interopRequireDefault(require("./canActionProceed"));
 
 var _canCYASubmit = _interopRequireDefault(require("./canCYASubmit"));
 
+var _cleanHiddenNestedData = _interopRequireDefault(require("./cleanHiddenNestedData"));
+
 var _getFormState = _interopRequireDefault(require("./getFormState"));
 
 var _getNextPageId = _interopRequireDefault(require("./getNextPageId"));
@@ -25,6 +27,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var helpers = {
   canActionProceed: _canActionProceed.default,
   canCYASubmit: _canCYASubmit.default,
+  cleanHiddenNestedData: _cleanHiddenNestedData.default,
   getFormState: _getFormState.default,
   getNextPageId: _getNextPageId.default,
   getPage: _getPage.default,

package/dist/utils/CheckYourAnswers/getCYARow.js

@@ -49,7 +49,9 @@ var setNestedValue = function setNestedValue(component, page) {
   (_component$data = component.data) === null || _component$data === void 0 ? void 0 : (_component$data$optio = _component$data.options) === null || _component$data$optio === void 0 ? void 0 : _component$data$optio.forEach(function (option, index) {
     //check if option is selected and has nested component
     if (page.formData[component.id] === option.value && option.nested) {
-      component.data.options[index].nested.value = page.formData[option.nested.id];
+      option.nested.forEach(function (child) {
+        child.value = page.formData[child.id];
+      });
     }
   });
 };

package/dist/utils/CheckYourAnswers/getCYARow.test.js

@@ -162,14 +162,14 @@ describe('utils', function () {
           data: {
             options: [{
               value: SELECTED_VALUE,
-              nested: {
+              nested: [{
                 id: NESTED_ID
-              }
+              }]
             }]
           }
         };
         var ROW = (0, _getCYARow.default)(PAGE, COMPONENT, function () {});
-        expect(ROW.component.data.options[0].nested.value).toEqual(NESTED_VALUE);
+        expect(ROW.component.data.options[0].nested[0].value).toEqual(NESTED_VALUE);
       });
     });
   });

package/dist/utils/Component/cleanAttributes.js

@@ -19,7 +19,7 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-var JSON_ONLY_PROPERTIES = ['source', 'use', 'show_when', 'options', 'additionalValidation', 'full_path', 'shown', 'formData'];
+var JSON_ONLY_PROPERTIES = ['source', 'use', 'show_when', 'options', 'additionalValidation', 'full_path', 'formData'];
 /**
  * This method removes and properties that are entirely specific to the JSON
  * configuration and that should not be used as HTML attributes.

package/dist/utils/Component/getComponent.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getNestedComponent = exports.default = void 0;
+exports.getChildrenJsx = exports.default = void 0;
 
 var _copReactComponents = require("@ukhomeoffice/cop-react-components");
 
@@ -17,6 +17,8 @@ var _cleanAttributes = _interopRequireDefault(require("./cleanAttributes"));
 
 var _isEditable = _interopRequireDefault(require("./isEditable"));
 
+var _FormComponent = _interopRequireDefault(require("../../components/FormComponent"));
+
 var _wrapInFormGroup = _interopRequireDefault(require("./wrapInFormGroup"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -85,11 +87,11 @@ var getRadios = function getRadios(config) {
   });
 
   options.forEach(function (option) {
-    if (!option.nested) {
+    if (!Array.isArray(option.nested)) {
       return;
     }
 
-    option.nestedJSX = getNestedComponent(config, option);
+    option.children = getChildrenJsx(config, option.nested);
   });
   var attrs = (0, _cleanAttributes.default)(config);
   return /*#__PURE__*/_react.default.createElement(_copReactComponents.Radios, _extends({}, attrs, {
@@ -156,32 +158,49 @@ var getComponentByType = function getComponentByType(config) {
   }
 };
 /**
- * Get nested component with form data
- * @param {*} parentConfig 
- * @param {*} nestedConfig 
+ * Get single child component for a parent
+ * @param {*} parent the parent configuration
+ * @param {*} child the child configuration
  */
 
 
-var getNestedComponent = function getNestedComponent(parentConfig, nestedConfig) {
-  nestedConfig.nested.onChange = parentConfig.onChange;
-
-  if (parentConfig.formData) {
-    var _parentConfig$formDat;
+var getChildJsx = function getChildJsx(parent, child) {
+  if (parent.formData) {
+    var _parent$formData;
 
-    nestedConfig.nested.value = parentConfig !== null && parentConfig !== void 0 && (_parentConfig$formDat = parentConfig.formData) !== null && _parentConfig$formDat !== void 0 && _parentConfig$formDat[nestedConfig.nested.fieldId] ? parentConfig.formData[nestedConfig.nested.fieldId] : '';
+    child.value = parent !== null && parent !== void 0 && (_parent$formData = parent.formData) !== null && _parent$formData !== void 0 && _parent$formData[child.fieldId] ? parent.formData[child.fieldId] : '';
   }
 
-  if ('readonly' in nestedConfig.nested) delete nestedConfig.nested.readonly;
+  if ('readonly' in child) delete child.readonly;
 
-  if (parentConfig.readonly) {
-    nestedConfig.nested.readonly = parentConfig.readonly;
-    return getComponent(nestedConfig.nested, false);
+  if (parent.readonly) {
+    child.readonly = parent.readonly;
+    return /*#__PURE__*/_react.default.createElement("div", null, getComponent(child, false));
   }
 
-  return getComponent(nestedConfig.nested);
+  return /*#__PURE__*/_react.default.createElement(_FormComponent.default, {
+    component: child,
+    value: child.value,
+    onChange: parent.onChange,
+    key: child.key
+  });
+};
+/**
+ * Convert chidlrenConfigs into components
+ * @param {*} parentConfig parent component which the childrenConfigs will be under
+ * @param {*} childrenConfigs array of configurations for the child components
+ */
+
+
+var getChildrenJsx = function getChildrenJsx(parentConfig, childrenConfigs) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, childrenConfigs.map(function (config) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+      key: config.id
+    }, getChildJsx(parentConfig, config));
+  }));
 };
 
-exports.getNestedComponent = getNestedComponent;
+exports.getChildrenJsx = getChildrenJsx;
 
 /**
  * Get a renderable component, based on a configuration object.

package/dist/utils/Component/getComponentTests/getComponent.nested.test.js

@@ -4,6 +4,8 @@ var _react = require("@testing-library/react");
 
 var _getComponent = require("../getComponent");
 
+var _setupTests = require("../../../setupTests");
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
@@ -11,8 +13,10 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
 describe('utils.Component.get', function () {
-  it('should return a component that is nested within another component', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-    var ID, FIELD_ID, LABEL, VALUE, PARENT_CONFIG, NESTED_CONFIG, _render, container, child, label, input;
+  it('should return components that are nested within another component', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var _formData;
+
+    var ID, FIELD_ID, LABEL, ID2, FIELD_ID2, LABEL2, VALUE, VALUE2, PARENT_CONFIG, NESTED_CONFIG, _renderWithValidation, container, child, label, input, child2, label2, input2;
 
     return regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) {
@@ -21,32 +25,53 @@ describe('utils.Component.get', function () {
             ID = 'testId';
             FIELD_ID = 'fieldId';
             LABEL = 'Test label';
+            ID2 = 'testId2';
+            FIELD_ID2 = 'fieldId2';
+            LABEL2 = 'Test label 2';
             VALUE = 'nestedValue';
+            VALUE2 = '1-2-2022';
             PARENT_CONFIG = {
               onChange: function onChange() {},
-              formData: _defineProperty({}, FIELD_ID, VALUE)
-            };
-            NESTED_CONFIG = {
-              nested: {
-                id: ID,
-                fieldId: FIELD_ID,
-                label: LABEL,
-                type: 'text'
-              }
+              formData: (_formData = {}, _defineProperty(_formData, FIELD_ID, VALUE), _defineProperty(_formData, FIELD_ID2, VALUE2), _formData)
             };
-            _render = (0, _react.render)((0, _getComponent.getNestedComponent)(PARENT_CONFIG, NESTED_CONFIG)), container = _render.container;
+            NESTED_CONFIG = [{
+              id: ID,
+              fieldId: FIELD_ID,
+              label: LABEL,
+              type: 'text'
+            }, {
+              id: ID2,
+              fieldId: FIELD_ID2,
+              label: LABEL2,
+              type: 'date'
+            }];
+            _renderWithValidation = (0, _setupTests.renderWithValidation)((0, _getComponent.getChildrenJsx)(PARENT_CONFIG, NESTED_CONFIG)), container = _renderWithValidation.container;
             child = container.childNodes[0];
+            expect(child.childNodes.length).toEqual(3);
             expect(child.classList).toContain('govuk-form-group');
             label = child.childNodes[0];
             expect(label).toBeDefined();
             expect(label.innerHTML).toContain(LABEL);
-            input = child.childNodes[1];
+            input = child.childNodes[2];
             expect(input.tagName).toEqual('INPUT');
             expect(input.classList).toContain('govuk-input');
             expect(input.id).toEqual(ID);
             expect(input.value).toEqual(VALUE);
+            child2 = container.childNodes[1];
+            expect(child2.childNodes.length).toEqual(3);
+            expect(child2.classList).toContain('govuk-form-group');
+            label2 = child2.childNodes[0];
+            expect(label2).toBeDefined();
+            expect(label2.innerHTML).toContain(LABEL2);
+            input2 = child2.childNodes[2];
+            expect(input2.tagName).toEqual('DIV');
+            expect(input2.classList).toContain('govuk-date-input');
+            expect(input2.id).toEqual(ID2);
+            expect(input2.childNodes[0].childNodes[1].value).toEqual('1');
+            expect(input2.childNodes[1].childNodes[1].value).toEqual('2');
+            expect(input2.childNodes[2].childNodes[1].value).toEqual('2022');
 
-          case 17:
+          case 35:
           case "end":
             return _context.stop();
         }
@@ -54,7 +79,7 @@ describe('utils.Component.get', function () {
     }, _callee);
   })));
   it('should return a read only component that is nested within another readonly component', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-    var ID, FIELD_ID, LABEL, VALUE, PARENT_CONFIG, NESTED_CONFIG, _render2, container, child;
+    var ID, FIELD_ID, LABEL, VALUE, PARENT_CONFIG, NESTED_CONFIG, _render, container, child;
 
     return regeneratorRuntime.wrap(function _callee2$(_context2) {
       while (1) {
@@ -69,17 +94,15 @@ describe('utils.Component.get', function () {
               formData: _defineProperty({}, FIELD_ID, VALUE),
               readonly: true
             };
-            NESTED_CONFIG = {
-              nested: {
-                id: ID,
-                fieldId: FIELD_ID,
-                label: LABEL,
-                type: 'text',
-                readonly: true
-              }
-            };
-            _render2 = (0, _react.render)((0, _getComponent.getNestedComponent)(PARENT_CONFIG, NESTED_CONFIG)), container = _render2.container;
-            child = container.childNodes[0];
+            NESTED_CONFIG = [{
+              id: ID,
+              fieldId: FIELD_ID,
+              label: LABEL,
+              type: 'text',
+              readonly: true
+            }];
+            _render = (0, _react.render)((0, _getComponent.getChildrenJsx)(PARENT_CONFIG, NESTED_CONFIG)), container = _render.container;
+            child = container.childNodes[0].childNodes[0];
             expect(child.classList).toContain('hods-readonly');
 
           case 9:

package/dist/utils/Validate/validateComponent.js

@@ -50,7 +50,6 @@ var validateComponent = function validateComponent(component, outerData, formDat
   }
 
   var error = undefined;
-  var nestedId = undefined;
   var properties = undefined;
   var data = outerData && _typeof(outerData) === 'object' ? outerData : {};
   var value = data[component.fieldId];
@@ -81,21 +80,15 @@ var validateComponent = function validateComponent(component, outerData, formDat
         break;
 
       case _models.ComponentTypes.RADIOS:
-        (_component$data$optio = component.data.options) === null || _component$data$optio === void 0 ? void 0 : _component$data$optio.some(function (option) {
-          var nestedError;
-
-          if (option.nested && option.nested.shown) {
-            nestedError = validateComponent(option.nested, outerData, fd);
-
-            if (nestedError) {
-              error = nestedError.error;
-              nestedId = nestedError.id;
-            }
+        var nestedErrors = [];
+        (_component$data$optio = component.data.options) === null || _component$data$optio === void 0 ? void 0 : _component$data$optio.forEach(function (option) {
+          if (option.nested && formData[component.id] === option.value) {
+            nestedErrors = nestedErrors.concat((0, _validateContainer.default)({
+              components: option.nested
+            }, formData));
           }
-
-          return nestedError;
         });
-        break;
+        return nestedErrors;
 
       default:
         break;
@@ -120,7 +113,7 @@ var validateComponent = function validateComponent(component, outerData, formDat
 
   if (error) {
     return {
-      id: nestedId || component.full_path || component.id,
+      id: component.full_path || component.id,
       error: error,
       properties: properties
     };

package/dist/utils/Validate/validateComponent.test.js

@@ -211,17 +211,16 @@ describe('utils.Validate.Component', function () {
         id: 'a',
         data: {
           options: [{
-            nested: {
+            nested: [{
               type: 'text',
               fieldId: NESTED_ID,
               id: NESTED_ID,
-              required: true,
-              shown: true
-            }
+              required: true
+            }]
           }]
         }
       };
-      expect((0, _validateComponent.default)(COMPONENT, FORMDATA)).toBeUndefined();
+      expect((0, _validateComponent.default)(COMPONENT, undefined, FORMDATA)).toEqual([]);
     });
     it('should return an error when the radio component contains nested components with errors', function () {
       var NESTED_ID = 'nestedId';
@@ -231,20 +230,19 @@ describe('utils.Validate.Component', function () {
         id: 'a',
         data: {
           options: [{
-            nested: {
+            nested: [{
               type: 'text',
               fieldId: NESTED_ID,
               id: NESTED_ID,
-              required: true,
-              shown: true
-            }
+              required: true
+            }]
           }]
         }
       };
-      expect((0, _validateComponent.default)(COMPONENT, FORMDATA)).toEqual({
+      expect((0, _validateComponent.default)(COMPONENT, undefined, FORMDATA)).toEqual([{
         id: NESTED_ID,
         error: "Field is required"
-      });
+      }]);
     });
     it('should return no error when a non selected radio component contains nested components with errors', function () {
       var NESTED_ID = 'nestedId';
@@ -253,16 +251,17 @@ describe('utils.Validate.Component', function () {
         id: 'a',
         data: {
           options: [{
-            nested: {
+            value: 'optionValue',
+            nested: [{
               type: 'text',
               fieldId: NESTED_ID,
               id: NESTED_ID,
               required: true
-            }
+            }]
           }]
         }
       };
-      expect((0, _validateComponent.default)(COMPONENT, {})).toBeUndefined();
+      expect((0, _validateComponent.default)(COMPONENT, undefined, {})).toEqual([]);
     });
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",
@@ -16,7 +16,7 @@
     "post-compile": "rimraf dist/*.test.* dist/**/*.test.* dist/**/*.stories.* dist/docs dist/assets"
   },
   "dependencies": {
-    "@ukhomeoffice/cop-react-components": "1.7.1",
+    "@ukhomeoffice/cop-react-components": "1.7.3",
     "axios": "^0.21.1",
     "dayjs": "^1.11.0",
     "govuk-frontend": "^3.13.0",