@ukhomeoffice/cop-react-form-renderer 3.0.2 → 3.1.1

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/context/HooksContext/HooksContext.js

@@ -1,11 +1,17 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.HooksContext = exports.ALLOWED_HOOKS = void 0;
 
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -78,7 +84,7 @@ var HooksContextProvider = function HooksContextProvider(_ref) {
     }
   };
 
-  return /*#__PURE__*/React.createElement(HooksContext.Provider, {
+  return /*#__PURE__*/_react.default.createElement(HooksContext.Provider, {
     value: {
       hooks: hooks,
       addHook: addHook,

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/FormPage/getFormPage.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _copReactComponents = require("@ukhomeoffice/cop-react-components");
+
 var _Container = _interopRequireDefault(require("../Container"));
 
 var _Data = _interopRequireDefault(require("../Data"));
@@ -35,6 +37,8 @@ var getFormPage = function getFormPage(pageOptions, formComponents, formData) {
     return null;
   }
 
+  pageOptions = interpolatePageOptions(pageOptions, formData);
+  formComponents = interpolateFormComponents(formComponents, formData);
   var components = pageOptions.components.map(function (componentOptions) {
     if (typeof componentOptions === 'string') {
       return (0, _getParagraphFromText.default)(componentOptions);
@@ -57,6 +61,42 @@ var getFormPage = function getFormPage(pageOptions, formComponents, formData) {
     actions: actions
   }));
 };
+/**
+ * Interpolate 'Variable Expression' using formData - for local use only.
+ * @param {object} pageOptions The JSON page.
+ * @param {object} formData The top-level form data, used for setting up components.
+ * @returns interpolated pageOptions.
+ */
+
+
+var interpolatePageOptions = function interpolatePageOptions(pageOptions, formData) {
+  return JSON.parse(_copReactComponents.Utils.interpolateString(JSON.stringify(pageOptions), formData));
+};
+/**
+ * Interpolate 'Variable Expression' using formData excluding each component's data block - for local use only.
+ * @param {Array} formComponents The components defined at the top-level of the form.
+ * @param {object} formData The top-level form data, used for setting up components.
+ * @returns interpolated formComponents
+ */
+
+
+var interpolateFormComponents = function interpolateFormComponents(formComponents, formData) {
+  return formComponents.map(function (formComponent) {
+    var formComponentDataUrl = undefined;
+
+    if (formComponent.data && formComponent.data.url) {
+      formComponentDataUrl = formComponent.data.url;
+    }
+
+    var interpolatedFormComponent = JSON.parse(_copReactComponents.Utils.interpolateString(JSON.stringify(formComponent), formData));
+
+    if (formComponentDataUrl) {
+      interpolatedFormComponent.data.url = formComponentDataUrl;
+    }
+
+    return interpolatedFormComponent;
+  });
+};
 
 var _default = getFormPage;
 exports.default = _default;

package/dist/utils/FormPage/getFormPage.test.js

@@ -32,6 +32,18 @@ describe('utils', function () {
         data: {
           url: '${urls.refData}/v3/charlies'
         }
+      }, // eslint-disable-next-line no-template-curly-in-string
+      {
+        id: 'd',
+        fieldId: 'd',
+        label: 'Roger ${currentUser.firstname}',
+        type: 'text'
+      }, // eslint-disable-next-line no-template-curly-in-string
+      {
+        id: 'e',
+        fieldId: 'e',
+        label: 'Bravo ${currentUser.surname}',
+        type: 'text'
       }];
       var FORM_DATA = {
         urls: {
@@ -165,6 +177,59 @@ describe('utils', function () {
         var C = FORM_COMPONENTS[2];
         expect((0, _getFormPage.default)(PAGE, FORM_COMPONENTS, {})).toEqual({
           title: PAGE.title,
+          components: [{
+            type: 'html',
+            tagName: 'p',
+            content: PAGE.components[0]
+          }, _objectSpread(_objectSpread({}, PAGE.components[1]), {}, {
+            full_path: PAGE.components[1].fieldId
+          }), {
+            type: 'html',
+            tagName: 'p',
+            content: PAGE.components[2]
+          }, // eslint-disable-next-line no-template-curly-in-string
+          _objectSpread(_objectSpread({
+            use: 'c'
+          }, C), {}, {
+            cya_label: C.label,
+            full_path: C.fieldId,
+            data: {
+              url: '${urls.refData}/v3/charlies'
+            }
+          })],
+          formData: {}
+        });
+      });
+      it('should interpolate and handle a page that references a form-level component with formData', function () {
+        var PAGE = {
+          // eslint-disable-next-line no-template-curly-in-string
+          title: 'Page ${postFixTitle}',
+          components: ["Opening paragraph", {
+            type: 'heading',
+            size: 'l',
+            content: 'Page heading'
+          }, "Closing paragraph", {
+            use: 'c'
+          }, {
+            use: 'd'
+          }, "Kevin", {
+            use: 'e'
+          }]
+        };
+
+        var DATA = _objectSpread(_objectSpread({}, FORM_DATA), {}, {
+          currentUser: {
+            firstname: 'Bob',
+            surname: 'Kevin'
+          },
+          postFixTitle: 'Everyone'
+        });
+
+        var C = FORM_COMPONENTS[2];
+        var D = FORM_COMPONENTS[3];
+        var E = FORM_COMPONENTS[4];
+        expect((0, _getFormPage.default)(PAGE, FORM_COMPONENTS, DATA)).toEqual({
+          title: 'Page Everyone',
           components: [{
             type: 'html',
             tagName: 'p',
@@ -179,9 +244,28 @@ describe('utils', function () {
             use: 'c'
           }, C), {}, {
             cya_label: C.label,
+            data: {
+              url: "".concat(FORM_DATA.urls.refData, "/v3/charlies")
+            },
             full_path: C.fieldId
+          }), _objectSpread(_objectSpread({
+            use: 'd'
+          }, D), {}, {
+            label: 'Roger ' + DATA.currentUser.firstname,
+            cya_label: 'Roger ' + DATA.currentUser.firstname,
+            full_path: D.fieldId
+          }), {
+            type: 'html',
+            tagName: 'p',
+            content: PAGE.components[5]
+          }, _objectSpread(_objectSpread({
+            use: 'e'
+          }, E), {}, {
+            label: 'Bravo ' + DATA.currentUser.surname,
+            cya_label: 'Bravo ' + DATA.currentUser.surname,
+            full_path: E.fieldId
           })],
-          formData: {}
+          formData: DATA
         });
       });
     });

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.2",
+  "version": "3.1.1",
   "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",