@ukhomeoffice/cop-react-form-renderer 2.8.5 → 2.10.1

package/dist/utils/CheckYourAnswers/getCYARowsForCollection.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _copReactComponents = require("@ukhomeoffice/cop-react-components");
+
+var _models = require("../../models");
+
+var _getCYARowsForContainer = _interopRequireDefault(require("./getCYARowsForContainer"));
+
+var _showComponentCYA = _interopRequireDefault(require("./showComponentCYA"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+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 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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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; }
+
+var getContainerForItem = function getContainerForItem(collection, item, labelCount, full_path) {
+  return {
+    id: item.id,
+    fieldId: item.id,
+    type: _models.ComponentTypes.CONTAINER,
+    required: collection.required,
+    full_path: full_path,
+    components: collection.item.map(function (component) {
+      return _objectSpread(_objectSpread({}, component), {}, {
+        label: _copReactComponents.Utils.interpolateString(component.label, _objectSpread(_objectSpread({}, item), {}, {
+          index: labelCount
+        })),
+        full_path: "".concat(full_path, ".").concat(component.fieldId)
+      });
+    })
+  };
+};
+
+var getTitleRowForItem = function getTitleRowForItem(collection, item, pageId, labelCount, full_path) {
+  var labels = _objectSpread(_objectSpread({}, _models.CollectionLabels), collection.labels);
+
+  if (labels.item) {
+    return {
+      pageId: pageId,
+      fieldId: collection.fieldId,
+      full_path: full_path,
+      key: _copReactComponents.Utils.interpolateString(labels.item, _objectSpread(_objectSpread({}, item), {}, {
+        index: labelCount
+      })),
+      type: 'title',
+      action: null
+    };
+  }
+
+  return null;
+};
+
+var getCYARowsForCollection = function getCYARowsForCollection(page, collection, items, onAction) {
+  if (Array.isArray(items) && (0, _showComponentCYA.default)(collection, page.formData)) {
+    return items.flatMap(function (item, index) {
+      var labelCount = (collection.countOffset || 0) + index + 1;
+      var full_path = "".concat(collection.full_path || collection.fieldId, "[").concat(index, "]");
+      var container = getContainerForItem(collection, item, labelCount, full_path);
+      return [getTitleRowForItem(collection, item, page.id, labelCount, full_path)].concat(_toConsumableArray((0, _getCYARowsForContainer.default)(page, container, item, onAction)));
+    }).filter(function (r) {
+      return !!r;
+    });
+  }
+
+  return [];
+};
+
+var _default = getCYARowsForCollection;
+exports.default = _default;

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

@@ -0,0 +1,194 @@
+"use strict";
+
+var _models = require("../../models");
+
+var _setupTests = require("../../setupTests");
+
+var _getCYARowsForCollection = _interopRequireDefault(require("./getCYARowsForCollection"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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('utils.CheckYourAnswers.getCYARowsForCollection', function () {
+  it('should get no rows when there are no items', function () {
+    var FORM_DATA = undefined;
+    var PAGE = {
+      id: 'page',
+      formData: FORM_DATA,
+      cya_link: {}
+    };
+    var COMPONENT = {
+      type: 'text',
+      readonly: true,
+      id: 'a',
+      fieldId: 'a',
+      label: 'Alpha'
+    };
+    var COLLECTION = {
+      id: 'collection',
+      fieldId: 'collection',
+      type: _models.ComponentTypes.COLLECTION,
+      item: [COMPONENT]
+    };
+
+    var ON_ACTION = function ON_ACTION() {};
+
+    var ROWS = (0, _getCYARowsForCollection.default)(PAGE, COLLECTION, undefined, ON_ACTION);
+    expect(ROWS.length).toEqual(0);
+  });
+  it('should get an appropriate row for a collection with a single readonly text component', function () {
+    var FORM_DATA = {
+      collection: [{
+        a: 'Bravo'
+      }]
+    };
+    var PAGE = {
+      id: 'page',
+      formData: FORM_DATA,
+      cya_link: {}
+    };
+    var COMPONENT = {
+      type: 'text',
+      readonly: true,
+      id: 'a',
+      fieldId: 'a',
+      label: 'Alpha'
+    };
+    var COLLECTION = {
+      id: 'collection',
+      fieldId: 'collection',
+      type: _models.ComponentTypes.COLLECTION,
+      countOffset: 22,
+      item: [COMPONENT],
+      value: FORM_DATA.collection,
+      formData: FORM_DATA
+    };
+
+    var ON_ACTION = function ON_ACTION() {};
+
+    var ROWS = (0, _getCYARowsForCollection.default)(PAGE, COLLECTION, FORM_DATA.collection, ON_ACTION);
+    expect(ROWS.length).toEqual(2); // Item title row + component row
+
+    (0, _setupTests.expectObjectLike)(ROWS[0], {
+      pageId: PAGE.id,
+      fieldId: COLLECTION.fieldId,
+      full_path: "".concat(COLLECTION.fieldId, "[0]"),
+      key: 'Item 23',
+      // includes countOffset
+      type: 'title',
+      action: null
+    });
+    (0, _setupTests.expectObjectLike)(ROWS[1], {
+      pageId: PAGE.id,
+      fieldId: COMPONENT.fieldId,
+      full_path: "".concat(COLLECTION.fieldId, "[0].").concat(COMPONENT.fieldId),
+      key: COMPONENT.label,
+      action: null,
+      component: _objectSpread(_objectSpread({}, COMPONENT), {}, {
+        full_path: "".concat(COLLECTION.fieldId, "[0].").concat(COMPONENT.fieldId)
+      }),
+      value: 'Bravo'
+    });
+  });
+  it('should get an appropriate row for a collection with a single readonly text component where the item label is an empty string', function () {
+    var FORM_DATA = {
+      collection: [{
+        a: 'Bravo'
+      }]
+    };
+    var PAGE = {
+      id: 'page',
+      formData: FORM_DATA,
+      cya_link: {}
+    };
+    var COMPONENT = {
+      type: 'text',
+      readonly: true,
+      id: 'a',
+      fieldId: 'a',
+      label: 'Alpha'
+    };
+    var COLLECTION = {
+      id: 'collection',
+      fieldId: 'collection',
+      type: _models.ComponentTypes.COLLECTION,
+      labels: {
+        item: ''
+      },
+      countOffset: 22,
+      item: [COMPONENT],
+      value: FORM_DATA.collection,
+      formData: FORM_DATA
+    };
+
+    var ON_ACTION = function ON_ACTION() {};
+
+    var ROWS = (0, _getCYARowsForCollection.default)(PAGE, COLLECTION, FORM_DATA.collection, ON_ACTION);
+    expect(ROWS.length).toEqual(1); // Just the component row, no title row
+
+    (0, _setupTests.expectObjectLike)(ROWS[0], {
+      pageId: PAGE.id,
+      fieldId: COMPONENT.fieldId,
+      full_path: "".concat(COLLECTION.fieldId, "[0].").concat(COMPONENT.fieldId),
+      key: COMPONENT.label,
+      action: null,
+      component: _objectSpread(_objectSpread({}, COMPONENT), {}, {
+        full_path: "".concat(COLLECTION.fieldId, "[0].").concat(COMPONENT.fieldId)
+      }),
+      value: 'Bravo'
+    });
+  });
+  it('should interpolate a field label appropriately', function () {
+    var FORM_DATA = {
+      collection: [{
+        a: 'Bravo'
+      }]
+    };
+    var PAGE = {
+      id: 'page',
+      formData: FORM_DATA,
+      cya_link: {}
+    }; // eslint-disable-next-line no-template-curly-in-string
+
+    var COMPONENT = {
+      type: 'text',
+      readonly: true,
+      id: 'a',
+      fieldId: 'a',
+      label: 'Alpha ${index}'
+    };
+    var COLLECTION = {
+      id: 'collection',
+      fieldId: 'collection',
+      type: _models.ComponentTypes.COLLECTION,
+      item: [COMPONENT],
+      value: FORM_DATA.collection,
+      formData: FORM_DATA
+    };
+
+    var ON_ACTION = function ON_ACTION() {};
+
+    var ROWS = (0, _getCYARowsForCollection.default)(PAGE, COLLECTION, FORM_DATA.collection, ON_ACTION);
+    expect(ROWS.length).toEqual(2); // Title and item row.
+
+    (0, _setupTests.expectObjectLike)(ROWS[1], {
+      pageId: PAGE.id,
+      fieldId: COMPONENT.fieldId,
+      full_path: "".concat(COLLECTION.fieldId, "[0].").concat(COMPONENT.fieldId),
+      key: 'Alpha 1',
+      // no countOffset
+      action: null,
+      component: _objectSpread(_objectSpread({}, COMPONENT), {}, {
+        full_path: "".concat(COLLECTION.fieldId, "[0].").concat(COMPONENT.fieldId),
+        label: 'Alpha 1' // no countOffset
+
+      }),
+      value: 'Bravo'
+    });
+  });
+});

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

@@ -2,18 +2,14 @@
 
 var _models = require("../../models");
 
+var _setupTests = require("../../setupTests");
+
 var _getCYARowsForContainer = _interopRequireDefault(require("./getCYARowsForContainer"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // Local imports
 describe('utils.CheckYourAnswers.getCYARowsForContainer', function () {
-  var expectObjectLike = function expectObjectLike(received, expected) {
-    Object.keys(expected).forEach(function (key) {
-      expect(received[key]).toEqual(expected[key]);
-    });
-  };
-
   it('should get an appropriate row for a container with a single readonly text component', function () {
     var FORM_DATA = {
       container: {
@@ -46,7 +42,7 @@ describe('utils.CheckYourAnswers.getCYARowsForContainer', function () {
     var ROWS = (0, _getCYARowsForContainer.default)(PAGE, CONTAINER, FORM_DATA.container, ON_ACTION);
     expect(ROWS.length).toEqual(1);
     ROWS.forEach(function (row, index) {
-      expectObjectLike(row, {
+      (0, _setupTests.expectObjectLike)(row, {
         pageId: PAGE.id,
         fieldId: CONTAINER.components[index].fieldId,
         key: CONTAINER.components[index].label,
@@ -94,14 +90,14 @@ describe('utils.CheckYourAnswers.getCYARowsForContainer', function () {
     var ROWS = (0, _getCYARowsForContainer.default)(PAGE, CONTAINER, FORM_DATA.container, ON_ACTION);
     expect(ROWS.length).toEqual(2);
     ROWS.forEach(function (row, index) {
-      expectObjectLike(row, {
+      (0, _setupTests.expectObjectLike)(row, {
         pageId: PAGE.id,
         fieldId: CONTAINER.components[index].fieldId,
         key: CONTAINER.components[index].label,
         component: CONTAINER.components[index],
         value: "".concat(CONTAINER.components[index].label, " Charlie")
       });
-      expectObjectLike(row.action, {
+      (0, _setupTests.expectObjectLike)(row.action, {
         onAction: ON_ACTION
       });
     });
@@ -148,14 +144,14 @@ describe('utils.CheckYourAnswers.getCYARowsForContainer', function () {
     var ROWS = (0, _getCYARowsForContainer.default)(PAGE, CONTAINER, FORM_DATA.container, ON_ACTION);
     expect(ROWS.length).toEqual(2);
     ROWS.forEach(function (row, index) {
-      expectObjectLike(row, {
+      (0, _setupTests.expectObjectLike)(row, {
         pageId: PAGE.id,
         fieldId: CONTAINER.components[index].fieldId,
         key: CONTAINER.components[index].label,
         component: CONTAINER.components[index],
         value: "".concat(CONTAINER.components[index].label, " Charlie")
       });
-      expectObjectLike(row.action, {
+      (0, _setupTests.expectObjectLike)(row.action, {
         onAction: ON_ACTION
       });
     });
@@ -202,7 +198,7 @@ describe('utils.CheckYourAnswers.getCYARowsForContainer', function () {
     var ROWS = (0, _getCYARowsForContainer.default)(PAGE, CONTAINER, FORM_DATA.container, ON_ACTION);
     expect(ROWS.length).toEqual(1);
     ROWS.forEach(function (row, index) {
-      expectObjectLike(row, {
+      (0, _setupTests.expectObjectLike)(row, {
         pageId: PAGE.id,
         fieldId: NESTED_CONTAINER.components[index].fieldId,
         key: NESTED_CONTAINER.components[index].label,
@@ -244,7 +240,7 @@ describe('utils.CheckYourAnswers.getCYARowsForContainer', function () {
     var ROWS = (0, _getCYARowsForContainer.default)(PAGE, CONTAINER, undefined, ON_ACTION);
     expect(ROWS.length).toEqual(1);
     ROWS.forEach(function (row, index) {
-      expectObjectLike(row, {
+      (0, _setupTests.expectObjectLike)(row, {
         pageId: PAGE.id,
         fieldId: NESTED_CONTAINER.components[index].fieldId,
         key: NESTED_CONTAINER.components[index].label,

package/dist/utils/CheckYourAnswers/getCYARowsForPage.js

@@ -13,6 +13,8 @@ var _getCYARow = _interopRequireDefault(require("./getCYARow"));
 
 var _getCYARowForGroup2 = _interopRequireDefault(require("./getCYARowForGroup"));
 
+var _getCYARowsForCollection = _interopRequireDefault(require("./getCYARowsForCollection"));
+
 var _getCYARowsForContainer = _interopRequireDefault(require("./getCYARowsForContainer"));
 
 var _showComponentCYA = _interopRequireDefault(require("./showComponentCYA"));
@@ -36,11 +38,16 @@ var getCYARowsForPage = function getCYARowsForPage(page, onAction) {
     var rows = page.components.filter(function (c) {
       return (0, _showComponentCYA.default)(c, page.formData);
     }).flatMap(function (component) {
-      if (component.type === _models.ComponentTypes.CONTAINER) {
-        return (0, _getCYARowsForContainer.default)(page, component, page.formData[component.fieldId], onAction);
-      }
+      switch (component.type) {
+        case _models.ComponentTypes.CONTAINER:
+          return (0, _getCYARowsForContainer.default)(page, component, page.formData[component.fieldId], onAction);
 
-      return (0, _getCYARow.default)(page, component, onAction);
+        case _models.ComponentTypes.COLLECTION:
+          return (0, _getCYARowsForCollection.default)(page, component, page.formData[component.fieldId], onAction);
+
+        default:
+          return (0, _getCYARow.default)(page, component, onAction);
+      }
     });
 
     if (((_page$groups = page.groups) === null || _page$groups === void 0 ? void 0 : _page$groups.length) > 0) {

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

@@ -2,23 +2,23 @@
 
 var _react = require("@testing-library/react");
 
+var _setupTests = require("../../setupTests");
+
 var _models = require("../../models");
 
 var _getCYARowsForPage = _interopRequireDefault(require("./getCYARowsForPage"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// Global imports
-// Local imports
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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('utils', function () {
   describe('CheckYourAnswers', function () {
     describe('getCYARowsForPage', function () {
-      var expectObjectLike = function expectObjectLike(received, expected) {
-        Object.keys(expected).forEach(function (key) {
-          expect(received[key]).toEqual(expected[key]);
-        });
-      };
-
       it('should get a appropriate row for a page with a single readonly text component', function () {
         var COMPONENT = {
           type: 'text',
@@ -40,7 +40,7 @@ describe('utils', function () {
         var ROWS = (0, _getCYARowsForPage.default)(PAGE, ON_ACTION);
         expect(ROWS.length).toEqual(1);
         ROWS.forEach(function (row, index) {
-          expectObjectLike(row, {
+          (0, _setupTests.expectObjectLike)(row, {
             pageId: PAGE.id,
             fieldId: PAGE.components[index].fieldId,
             key: PAGE.components[index].label,
@@ -78,14 +78,14 @@ describe('utils', function () {
         var ROWS = (0, _getCYARowsForPage.default)(PAGE, ON_ACTION);
         expect(ROWS.length).toEqual(2);
         ROWS.forEach(function (row, index) {
-          expectObjectLike(row, {
+          (0, _setupTests.expectObjectLike)(row, {
             pageId: PAGE.id,
             fieldId: PAGE.components[index].fieldId,
             key: PAGE.components[index].label,
             component: PAGE.components[index],
             value: "".concat(PAGE.components[index].label, " Charlie")
           });
-          expectObjectLike(row.action, {
+          (0, _setupTests.expectObjectLike)(row.action, {
             onAction: ON_ACTION
           });
         });
@@ -122,14 +122,14 @@ describe('utils', function () {
         var ROWS = (0, _getCYARowsForPage.default)(PAGE, ON_ACTION);
         expect(ROWS.length).toEqual(2);
         ROWS.forEach(function (row, index) {
-          expectObjectLike(row, {
+          (0, _setupTests.expectObjectLike)(row, {
             pageId: PAGE.id,
             fieldId: PAGE.components[index].fieldId,
             key: PAGE.components[index].label,
             component: PAGE.components[index],
             value: "".concat(PAGE.components[index].label, " Charlie")
           });
-          expectObjectLike(row.action, {
+          (0, _setupTests.expectObjectLike)(row.action, {
             onAction: ON_ACTION
           });
         });
@@ -166,7 +166,7 @@ describe('utils', function () {
         var ROWS = (0, _getCYARowsForPage.default)(PAGE, ON_ACTION);
         expect(ROWS.length).toEqual(1);
         ROWS.forEach(function (row, index) {
-          expectObjectLike(row, {
+          (0, _setupTests.expectObjectLike)(row, {
             pageId: PAGE.id,
             fieldId: CONTAINER.components[index].fieldId,
             key: CONTAINER.components[index].label,
@@ -234,6 +234,50 @@ describe('utils', function () {
         expect(addressValues[2].childNodes[0].textContent).toEqual('London');
         expect(addressValues[3].childNodes[0].textContent).toEqual('SW1A 2AA');
       });
+      it('should get appropriate rows for a page with a single readonly text component within a collection', function () {
+        var FORM_DATA = {
+          collection: [{
+            a: 'Bravo'
+          }]
+        };
+        var COMPONENT = {
+          type: 'text',
+          readonly: true,
+          id: 'a',
+          fieldId: 'a',
+          label: 'Alpha'
+        };
+        var COLLECTION = {
+          id: 'collection',
+          fieldId: 'collection',
+          type: _models.ComponentTypes.COLLECTION,
+          item: [COMPONENT],
+          value: FORM_DATA.collection,
+          formData: FORM_DATA
+        };
+        var PAGE = {
+          id: 'page',
+          components: [COLLECTION],
+          formData: FORM_DATA
+        };
+
+        var ON_ACTION = function ON_ACTION() {};
+
+        var ROWS = (0, _getCYARowsForPage.default)(PAGE, ON_ACTION);
+        expect(ROWS.length).toEqual(2); // Title and item row
+
+        (0, _setupTests.expectObjectLike)(ROWS[1], {
+          pageId: PAGE.id,
+          fieldId: COMPONENT.fieldId,
+          full_path: "".concat(COLLECTION.fieldId, "[0].").concat(COMPONENT.fieldId),
+          key: COMPONENT.label,
+          action: null,
+          component: _objectSpread(_objectSpread({}, COMPONENT), {}, {
+            full_path: "".concat(COLLECTION.fieldId, "[0].").concat(COMPONENT.fieldId)
+          }),
+          value: 'Bravo'
+        });
+      });
     });
   });
 });

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'];
+var JSON_ONLY_PROPERTIES = ['source', 'use', 'show_when', 'options', 'additionalValidation', 'full_path', 'shown', '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.default = void 0;
+exports.getNestedComponent = exports.default = void 0;
 
 var _copReactComponents = require("@ukhomeoffice/cop-react-components");
 
@@ -84,6 +84,13 @@ var getRadios = function getRadios(config) {
     options = val;
   });
 
+  options.forEach(function (option) {
+    if (!option.nested) {
+      return;
+    }
+
+    option.nestedJSX = getNestedComponent(config, option);
+  });
   var attrs = (0, _cleanAttributes.default)(config);
   return /*#__PURE__*/_react.default.createElement(_copReactComponents.Radios, _extends({}, attrs, {
     options: options
@@ -148,6 +155,34 @@ var getComponentByType = function getComponentByType(config) {
       }
   }
 };
+/**
+ * Get nested component with form data
+ * @param {*} parentConfig 
+ * @param {*} nestedConfig 
+ */
+
+
+var getNestedComponent = function getNestedComponent(parentConfig, nestedConfig) {
+  nestedConfig.nested.onChange = parentConfig.onChange;
+
+  if (parentConfig.formData) {
+    var _parentConfig$formDat;
+
+    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] : '';
+  }
+
+  if ('readonly' in nestedConfig.nested) delete nestedConfig.nested.readonly;
+
+  if (parentConfig.readonly) {
+    nestedConfig.nested.readonly = parentConfig.readonly;
+    return getComponent(nestedConfig.nested, false);
+  }
+
+  return getComponent(nestedConfig.nested);
+};
+
+exports.getNestedComponent = getNestedComponent;
+
 /**
  * Get a renderable component, based on a configuration object.
  * @param {object} config The configuration object for the component.
@@ -155,8 +190,6 @@ var getComponentByType = function getComponentByType(config) {
  * @param {Function} fnOverride An optional override function for component rendering.
  * @returns A renderable component.
  */
-
-
 var getComponent = function getComponent(config) {
   var wrap = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
   var fnOverride = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;