@ukhomeoffice/cop-react-form-renderer 5.56.1 → 5.58.0

package/dist/components/CollectionSummary/BannerStrip.js

@@ -36,7 +36,9 @@ var BannerStrip = function BannerStrip(_ref) {
         id: bannerId,
         key: bannerId,
         className: classes('banner')
-      }, _utils.default.interpolateString(banner, formData));
+      }, /*#__PURE__*/_react.default.createElement(_copReactComponents.Markup, {
+        content: _utils.default.interpolateString(banner, formData)
+      }));
     }
     return /*#__PURE__*/_react.default.createElement(_copReactComponents.Tag, {
       key: bannerId,

package/dist/components/CollectionSummary/BannerStrip.scss

@@ -7,9 +7,13 @@
   padding: 0;
   margin: 0 0 govuk-spacing(1) 0;
   &__banner {
-    @include govuk-font($size: 19, $weight: bold);
+    @include govuk-font($size: 19);
     display: inline-block;
     margin-right: govuk-spacing(2);
+
+    p {
+      margin: 0;
+    }
   }
   &__tag {
     @extend .govuk-tag;

package/dist/components/CollectionSummary/CollectionSummary.js

@@ -64,11 +64,24 @@ var CollectionSummary = function CollectionSummary(_ref) {
     return _utils.default.CollectionPage.getData(config.collectionName, formData) || [];
   }, [formData]);
   var masterPage = (0, _react.useMemo)(function () {
-    var newMasterPages = _utils.default.CollectionPage.mergePages(pages || []) || [];
-    return newMasterPages.find(function (page) {
-      var _page$collection;
-      return ((_page$collection = page.collection) === null || _page$collection === void 0 ? void 0 : _page$collection.name) === config.collectionName;
-    });
+    var collectionNameParts = config.collectionName.split('.');
+    var childPages = _utils.default.CollectionPage.mergePages(pages || []) || [];
+    return collectionNameParts.reduce(function (acc, current, index) {
+      var _childPages$find;
+      var currentPath = index === 0 ? "".concat(acc).concat(current) : "".concat(acc, ".").concat(current);
+      if (index === collectionNameParts.length - 1) {
+        var _childPages;
+        return ((_childPages = childPages) === null || _childPages === void 0 ? void 0 : _childPages.find(function (p) {
+          var _p$collection;
+          return ((_p$collection = p.collection) === null || _p$collection === void 0 ? void 0 : _p$collection.name) === currentPath;
+        })) || null;
+      }
+      childPages = ((_childPages$find = childPages.find(function (p) {
+        var _p$collection2;
+        return ((_p$collection2 = p.collection) === null || _p$collection2 === void 0 ? void 0 : _p$collection2.name) === currentPath;
+      })) === null || _childPages$find === void 0 ? void 0 : _childPages$find.childPages) || null;
+      return currentPath;
+    }, "");
   }, [pages]);
   var validateEntries = function validateEntries() {
     var stored = [];
@@ -224,6 +237,7 @@ var CollectionSummary = function CollectionSummary(_ref) {
         return onChange(target);
       },
       parentCollectionName: config.collectionName.split('.').shift(),
+      childCollections: config.childCollections || [],
       formData: formData,
       classModifiers: entry === entryToDelete ? ['deleting-summary-card'] : [''],
       inError: errors.filter(function (e) {
@@ -260,7 +274,8 @@ CollectionSummary.propTypes = {
     confirmation: _propTypes.default.shape({
       message: _propTypes.default.string,
       label: _propTypes.default.string
-    })
+    }),
+    childCollections: _propTypes.default.arrayOf(_propTypes.default.string)
   }).isRequired,
   onAction: _propTypes.default.func,
   onChange: _propTypes.default.func,

package/dist/components/CollectionSummary/SummaryCard.js

@@ -11,10 +11,10 @@ var _react = _interopRequireWildcard(require("react"));
 var _utils = _interopRequireDefault(require("../../utils"));
 var _getQuickEditPage = _interopRequireDefault(require("../../utils/CollectionPage/getQuickEditPage"));
 var _hooks = require("../../hooks");
-var _FormComponent = _interopRequireDefault(require("../FormComponent"));
 var _FormPage = _interopRequireDefault(require("../FormPage"));
 var _BannerStrip = _interopRequireDefault(require("./BannerStrip"));
 var _RenderListView = _interopRequireDefault(require("./RenderListView"));
+var _SummaryCardDetails = _interopRequireDefault(require("./SummaryCardDetails"));
 require("./SummaryCard.scss");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -44,7 +44,7 @@ var DEFAULT_DUPLICATE_BUTTON_LABEL = exports.DEFAULT_DUPLICATE_BUTTON_LABEL = 'D
 var DEFAULT_DETAILS_TITLE = exports.DEFAULT_DETAILS_TITLE = 'Full details';
 var DEFAULT_CHANGE_BUTTON_CLASS = exports.DEFAULT_CHANGE_BUTTON_CLASS = 'secondary';
 var SummaryCard = function SummaryCard(_ref) {
-  var _config$changeAction2, _config$changeAction3, _config$duplicateActi, _config$deleteAction, _masterPage$childPage;
+  var _config$changeAction2, _config$changeAction3, _config$deleteAction, _config$duplicateActi;
   var id = _ref.id,
     entryData = _ref.entryData,
     config = _ref.config,
@@ -54,6 +54,7 @@ var SummaryCard = function SummaryCard(_ref) {
     onDuplicate = _ref.onDuplicate,
     onQuickEdit = _ref.onQuickEdit,
     parentCollectionName = _ref.parentCollectionName,
+    childCollections = _ref.childCollections,
     formData = _ref.formData,
     masterPage = _ref.masterPage,
     hideDetails = _ref.hideDetails,
@@ -180,19 +181,19 @@ var SummaryCard = function SummaryCard(_ref) {
       return onChange((_config$changeAction = config.changeAction) === null || _config$changeAction === void 0 ? void 0 : _config$changeAction.page, entryData.id);
     },
     classModifiers: ((_config$changeAction2 = config.changeAction) === null || _config$changeAction2 === void 0 ? void 0 : _config$changeAction2.classModifiers) || DEFAULT_CHANGE_BUTTON_CLASS
-  }, ((_config$changeAction3 = config.changeAction) === null || _config$changeAction3 === void 0 ? void 0 : _config$changeAction3.label) || DEFAULT_CHANGE_BUTTON_LABEL), config.duplicateAction && typeof onDuplicate === 'function' && /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
-    id: "".concat(id, ".duplicateButton"),
+  }, ((_config$changeAction3 = config.changeAction) === null || _config$changeAction3 === void 0 ? void 0 : _config$changeAction3.label) || DEFAULT_CHANGE_BUTTON_LABEL), config.deleteAction && typeof onDelete === 'function' && /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
+    id: "".concat(id, ".deleteButton"),
     onClick: function onClick() {
-      onDuplicate(entryData);
+      return onDelete(entryData);
     },
     classModifiers: "secondary"
-  }, ((_config$duplicateActi = config.duplicateAction) === null || _config$duplicateActi === void 0 ? void 0 : _config$duplicateActi.label) || DEFAULT_DUPLICATE_BUTTON_LABEL), config.deleteAction && typeof onDelete === 'function' && /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
-    id: "".concat(id, ".deleteButton"),
+  }, ((_config$deleteAction = config.deleteAction) === null || _config$deleteAction === void 0 ? void 0 : _config$deleteAction.label) || DEFAULT_DELETE_BUTTON_LABEL), config.duplicateAction && typeof onDuplicate === 'function' && /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
+    id: "".concat(id, ".duplicateButton"),
     onClick: function onClick() {
-      return onDelete(entryData);
+      onDuplicate(entryData);
     },
     classModifiers: "secondary"
-  }, ((_config$deleteAction = config.deleteAction) === null || _config$deleteAction === void 0 ? void 0 : _config$deleteAction.label) || DEFAULT_DELETE_BUTTON_LABEL))), quickEdit && quickEditPage && /*#__PURE__*/_react.default.createElement(_FormPage.default, {
+  }, ((_config$duplicateActi = config.duplicateAction) === null || _config$duplicateActi === void 0 ? void 0 : _config$duplicateActi.label) || DEFAULT_DUPLICATE_BUTTON_LABEL))), quickEdit && quickEditPage && /*#__PURE__*/_react.default.createElement(_FormPage.default, {
     page: quickEditPage,
     onAction: function onAction(action, patch) {
       return _onAction(action, patch);
@@ -203,43 +204,11 @@ var SummaryCard = function SummaryCard(_ref) {
   }, !hideDetails && /*#__PURE__*/_react.default.createElement(_copReactComponents.Details, {
     summary: config.detailsTitle || DEFAULT_DETAILS_TITLE,
     className: "details"
-  }, masterPage === null || masterPage === void 0 || (_masterPage$childPage = masterPage.childPages) === null || _masterPage$childPage === void 0 ? void 0 : _masterPage$childPage.filter(function (p) {
-    return _utils.default.FormPage.show(p, _objectSpread(_objectSpread({}, formData), entryData));
-  }).map(function (childPage) {
-    var _childPage$summaryLay;
-    var allPageComponents = _utils.default.Component.elevateNested(childPage === null || childPage === void 0 ? void 0 : childPage.components, entryData);
-    return (_childPage$summaryLay = childPage.summaryLayout) === null || _childPage$summaryLay === void 0 ? void 0 : _childPage$summaryLay.sections.map(function (section) {
-      var _section$fields;
-      if (section.show_when && !_utils.default.Condition.meetsAll(section.show_when, _objectSpread(_objectSpread({}, formData), entryData))) {
-        return null;
-      }
-      return /*#__PURE__*/_react.default.createElement("div", {
-        key: section.title,
-        className: classes('section')
-      }, /*#__PURE__*/_react.default.createElement("h3", {
-        className: classes('section-title')
-      }, section.title), /*#__PURE__*/_react.default.createElement("div", {
-        className: classes('section-content', "columns-".concat(section.columns))
-      }, (_section$fields = section.fields) === null || _section$fields === void 0 ? void 0 : _section$fields.map(function (fieldId) {
-        var component = allPageComponents.find(function (comp) {
-          return comp.fieldId === fieldId;
-        });
-        return /*#__PURE__*/_react.default.createElement("div", {
-          key: fieldId,
-          className: classes('field')
-        }, /*#__PURE__*/_react.default.createElement(_FormComponent.default, {
-          component: _objectSpread(_objectSpread({}, component), {}, {
-            hint: ''
-          }),
-          value: entryData[component === null || component === void 0 ? void 0 : component.fieldId],
-          formData: entryData,
-          wrap: true,
-          readonly: true
-        }));
-      })));
-    });
-  }).filter(function (e) {
-    return !!e;
+  }, /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
+    masterPage: masterPage,
+    childCollections: childCollections,
+    formData: formData,
+    entryData: entryData
   }))));
 };
 SummaryCard.propTypes = {
@@ -282,6 +251,7 @@ SummaryCard.propTypes = {
   onDuplicate: _propTypes.default.func,
   onQuickEdit: _propTypes.default.func,
   parentCollectionName: _propTypes.default.string.isRequired,
+  childCollections: _propTypes.default.arrayOf(_propTypes.default.string),
   formData: _propTypes.default.shape({}).isRequired,
   hideDetails: _propTypes.default.bool,
   inError: _propTypes.default.bool
@@ -292,6 +262,7 @@ SummaryCard.defaultProps = {
   onDelete: null,
   onDuplicate: null,
   onQuickEdit: null,
+  childCollections: [],
   hideDetails: false,
   inError: false
 };

package/dist/components/CollectionSummary/SummaryCard.scss

@@ -71,7 +71,9 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
   }
 
   &__editpage {
-    margin: 0 govuk-spacing(4)
+    margin: 0 govuk-spacing(4);
+    padding: govuk-spacing(4) govuk-spacing(4) 0;
+    background-color: #FFFFFF
   }
 
   &__body {
@@ -87,111 +89,6 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
       margin-bottom: 0;
     }
   }
-
-  &__section {
-    border-bottom: 2px solid #A9A9A9;
-
-    &-title {
-      font-weight: bold;
-      margin: govuk-spacing(2) 0 govuk-spacing(6) 0;
-    }
-
-    &-content {
-      display: flex;
-      flex-wrap: wrap;
-      gap: govuk-spacing(2);
-
-      .hods-form-summary-card__field {
-        box-sizing: border-box;
-        margin-bottom: govuk-spacing(4);
-
-        .govuk-label,
-        .govuk-fieldset__legend {
-          font-weight: bold;
-          margin-bottom: govuk-spacing(1) !important;
-
-          &::after {
-            content: " :";
-          }
-        }
-
-        div.govuk-form-group div:has(img){
-          display: flex;
-          flex-wrap: wrap;
-
-          .hods-readonly.hods-readonly--success {
-            font-size: 0;
-            line-height: 0;
-
-            .cop-upload-preview__thumb {
-              display: inline-block;
-              margin-right: govuk-spacing(1);
-            }
-          }
-
-        }
-      }
-
-      &--columns-1,
-      &--columns-2,
-      &--columns-3 {
-        position: relative;
-        margin-bottom: govuk-spacing(1);
-
-        &::before {
-          content: "";
-          position: absolute;
-          top: 0;
-          width: 2px;
-          height: 100%;
-          background-color: #A9A9A9;
-          left: 0;
-        }
-      }
-
-      &--columns-2 {
-        &::after {
-          content: "";
-          position: absolute;
-          top: 0;
-          width: 2px;
-          height: 100%;
-          background-color: #A9A9A9;
-          left: 50%;
-        }
-
-        .hods-form-summary-card__field {
-          flex: 0 0 calc(50% - 10px);
-        }
-      }
-
-      &--columns-3 {
-        &::after {
-          content: "";
-          position: absolute;
-          top: 0;
-          left: 33.333%;
-          width: 2px;
-          height: 100%;
-          background-color: #A9A9A9;
-        }
-
-        .hods-form-summary-card__field {
-          flex: 0 0 calc(33.333% - 10px);
-
-          &:nth-child(2)::after {
-            content: "";
-            position: absolute;
-            top: 0;
-            right: 33.333%;
-            width: 2px;
-            height: 100%;
-            background-color: #A9A9A9;
-          }
-        }
-      }
-    }
-  }
 }
 
 @media (max-width: 640px) {
@@ -208,45 +105,5 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
         margin-top: govuk-spacing(2);
       }
     }
-
-    &__section {
-      &-content {
-        display: block;
-
-        .hods-form-summary-card__field {
-          width: 100%;
-        }
-
-        .hods-form-summary-card__field:nth-child(2)::after {
-          display: none;
-        }
-
-        &--columns-2,
-        &--columns-3 {
-          position: relative;
-          margin-bottom: govuk-spacing(1);
-
-          &::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            width: 2px;
-            height: 100%;
-            background-color: #A9A9A9;
-            left: 0;
-          }
-
-          &::after {
-            display: none;
-          }
-        }
-
-        &--columns-3 {
-          .hods-form-summary-card__field:nth-child(2)::after {
-            content: none;
-          }
-        }
-      }
-    }
   }
 }

package/dist/components/CollectionSummary/SummaryCard.test.js

@@ -1366,247 +1366,4 @@ describe('components.CollectionSummary.SummaryCard', function () {
       expect(detailsComponent).toBeNull();
     });
   });
-  describe('SummaryLayout config behavior', function () {
-    it('should render sections and fields based on summaryLayout config', function () {
-      var CHILD_PAGES = [{
-        summaryLayout: {
-          sections: [{
-            title: 'Section 1',
-            columns: 2,
-            fields: ['fieldA', 'fieldB']
-          }, {
-            title: 'Section 2',
-            columns: 1,
-            fields: ['fieldC']
-          }]
-        },
-        components: [{
-          fieldId: 'fieldA'
-        }, {
-          fieldId: 'fieldB'
-        }, {
-          fieldId: 'fieldC'
-        }]
-      }];
-      var CONFIG = {
-        title: 'Title'
-      };
-      var _renderWithValidation36 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
-          id: ID,
-          entryData: ENTRY,
-          config: CONFIG,
-          parentCollectionName: "parent",
-          pages: CHILD_PAGES,
-          formData: {},
-          masterPage: {
-            childPages: CHILD_PAGES
-          }
-        })),
-        container = _renderWithValidation36.container;
-
-      // Function to find an element by its text content
-      function getByTextContent(parent, text) {
-        return Array.from(parent.getElementsByClassName(classes('section-title'))).find(function (el) {
-          return el.textContent === text;
-        });
-      }
-
-      // Check for section titles
-      var section1Title = getByTextContent(container, 'Section 1');
-      var section2Title = getByTextContent(container, 'Section 2');
-      expect(section1Title).not.toBeUndefined();
-      expect(section2Title).not.toBeUndefined();
-      var section1Content = section1Title.parentNode.querySelector(".".concat(classes('section-content')));
-      expect(section1Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(2);
-      var section2Content = section2Title.parentNode.querySelector(".".concat(classes('section-content')));
-      expect(section2Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(1);
-    });
-    it('should render sections if they have show_when checks and pass them', function () {
-      var CHILD_PAGES = [{
-        summaryLayout: {
-          sections: [{
-            title: 'Section 1',
-            columns: 2,
-            fields: ['fieldA', 'fieldB'],
-            show_when: [{
-              field: 'showSection1',
-              op: "=",
-              value: true
-            }]
-          }, {
-            title: 'Section 2',
-            columns: 1,
-            fields: ['fieldC']
-          }]
-        },
-        components: [{
-          fieldId: 'fieldA'
-        }, {
-          fieldId: 'fieldB'
-        }, {
-          fieldId: 'fieldC'
-        }]
-      }];
-      var CONFIG = {
-        title: 'Title'
-      };
-      var CUSTOM_ENTRY = _objectSpread(_objectSpread({}, ENTRY), {}, {
-        showSection1: true
-      });
-      var _renderWithValidation37 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
-          id: ID,
-          entryData: CUSTOM_ENTRY,
-          config: CONFIG,
-          parentCollectionName: "parent",
-          pages: CHILD_PAGES,
-          formData: {},
-          masterPage: {
-            childPages: CHILD_PAGES
-          }
-        })),
-        container = _renderWithValidation37.container;
-
-      // Function to find an element by its text content
-      function getByTextContent(parent, text) {
-        return Array.from(parent.getElementsByClassName(classes('section-title'))).find(function (el) {
-          return el.textContent === text;
-        });
-      }
-
-      // Check for section titles
-      var section1Title = getByTextContent(container, 'Section 1');
-      var section2Title = getByTextContent(container, 'Section 2');
-      expect(section1Title).not.toBeUndefined();
-      expect(section2Title).not.toBeUndefined();
-      var section1Content = section1Title.parentNode.querySelector(".".concat(classes('section-content')));
-      expect(section1Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(2);
-      var section2Content = section2Title.parentNode.querySelector(".".concat(classes('section-content')));
-      expect(section2Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(1);
-    });
-    it('should not render sections if they have show_when checks and fail them', function () {
-      var CHILD_PAGES = [{
-        summaryLayout: {
-          sections: [{
-            title: 'Section 1',
-            columns: 2,
-            fields: ['fieldA', 'fieldB'],
-            show_when: [{
-              field: 'showSection1',
-              op: "=",
-              value: true
-            }]
-          }, {
-            title: 'Section 2',
-            columns: 1,
-            fields: ['fieldC']
-          }]
-        },
-        components: [{
-          fieldId: 'fieldA'
-        }, {
-          fieldId: 'fieldB'
-        }, {
-          fieldId: 'fieldC'
-        }]
-      }];
-      var CONFIG = {
-        title: 'Title'
-      };
-      var CUSTOM_ENTRY = _objectSpread(_objectSpread({}, ENTRY), {}, {
-        showSection1: false
-      });
-      var _renderWithValidation38 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
-          id: ID,
-          entryData: CUSTOM_ENTRY,
-          config: CONFIG,
-          parentCollectionName: "parent",
-          pages: CHILD_PAGES,
-          formData: {},
-          masterPage: {
-            childPages: CHILD_PAGES
-          }
-        })),
-        container = _renderWithValidation38.container;
-
-      // Function to find an element by its text content
-      function getByTextContent(parent, text) {
-        return Array.from(parent.getElementsByClassName(classes('section-title'))).find(function (el) {
-          return el.textContent === text;
-        });
-      }
-
-      // Check for section titles
-      var section1Title = getByTextContent(container, 'Section 1');
-      var section2Title = getByTextContent(container, 'Section 2');
-      expect(section1Title).toBeUndefined();
-      expect(section2Title).not.toBeUndefined();
-      var section2Content = section2Title.parentNode.querySelector(".".concat(classes('section-content')));
-      expect(section2Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(1);
-    });
-    it('should not render sections on pages that fail show_when checks', function () {
-      var CHILD_PAGES = [{
-        show_when: [{
-          field: 'testField',
-          op: '=',
-          value: true
-        }],
-        summaryLayout: {
-          sections: [{
-            title: 'Section 1',
-            columns: 2,
-            fields: ['fieldA', 'fieldB'],
-            show_when: [{
-              field: 'showSection1',
-              op: "=",
-              value: true
-            }]
-          }, {
-            title: 'Section 2',
-            columns: 1,
-            fields: ['fieldC']
-          }]
-        },
-        components: [{
-          fieldId: 'fieldA'
-        }, {
-          fieldId: 'fieldB'
-        }, {
-          fieldId: 'fieldC'
-        }]
-      }];
-      var CONFIG = {
-        title: 'Title'
-      };
-      var CUSTOM_ENTRY = _objectSpread(_objectSpread({}, ENTRY), {}, {
-        showSection1: false
-      });
-      var _renderWithValidation39 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
-          id: ID,
-          entryData: CUSTOM_ENTRY,
-          config: CONFIG,
-          parentCollectionName: "parent",
-          pages: CHILD_PAGES,
-          formData: {
-            testField: false
-          },
-          masterPage: {
-            childPages: CHILD_PAGES
-          }
-        })),
-        container = _renderWithValidation39.container;
-
-      // Function to find an element by its text content
-      function getByTextContent(parent, text) {
-        return Array.from(parent.getElementsByClassName(classes('section-title'))).find(function (el) {
-          return el.textContent === text;
-        });
-      }
-
-      // Check for section titles
-      var section1Title = getByTextContent(container, 'Section 1');
-      var section2Title = getByTextContent(container, 'Section 2');
-      expect(section1Title).toBeUndefined();
-      expect(section2Title).toBeUndefined();
-    });
-  });
 });

package/dist/components/CollectionSummary/SummaryCardDetails.js

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DEFAULT_CLASS = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _utils = _interopRequireDefault(require("../../utils"));
+var _FormComponent = _interopRequireDefault(require("../FormComponent"));
+require("./SummaryCardDetails.scss");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } // Global imports.
+// Local imports.
+// Styles.
+var DEFAULT_CLASS = exports.DEFAULT_CLASS = 'hods-form-summary-card-details';
+var SummaryCardDetails = function SummaryCardDetails(_ref) {
+  var _masterPage$childPage;
+  var masterPage = _ref.masterPage,
+    childCollections = _ref.childCollections,
+    formData = _ref.formData,
+    entryData = _ref.entryData,
+    classModifiers = _ref.classModifiers,
+    hideChildSectionTitles = _ref.hideChildSectionTitles;
+  var classes = _utils.default.classBuilder(DEFAULT_CLASS, classModifiers);
+  var childMasterPages = (0, _react.useMemo)(function () {
+    return childCollections.map(function (childName) {
+      return masterPage.childPages.find(function (page) {
+        var _page$collection;
+        return ((_page$collection = page.collection) === null || _page$collection === void 0 ? void 0 : _page$collection.name) === childName;
+      });
+    }).filter(function (e) {
+      return !!e;
+    });
+  }, [masterPage, childCollections]);
+  return (masterPage === null || masterPage === void 0 || (_masterPage$childPage = masterPage.childPages) === null || _masterPage$childPage === void 0 ? void 0 : _masterPage$childPage.filter(function (p) {
+    return _utils.default.FormPage.show(p, _objectSpread(_objectSpread({}, formData), entryData));
+  }).map(function (childPage) {
+    var _childPage$summaryLay;
+    var allPageComponents = _utils.default.Component.elevateNested(childPage === null || childPage === void 0 ? void 0 : childPage.components, entryData);
+    return (_childPage$summaryLay = childPage.summaryLayout) === null || _childPage$summaryLay === void 0 ? void 0 : _childPage$summaryLay.sections.map(function (section) {
+      var _section$fields;
+      if (section.show_when && !_utils.default.Condition.meetsAll(section.show_when, _objectSpread(_objectSpread({}, formData), entryData))) {
+        return null;
+      }
+      if (section.type === 'childCollection') {
+        var childMasterPage = childMasterPages.find(function (p) {
+          return p.collection.name === section.collectionName;
+        });
+        var childFormData = entryData[section.collectionName.split('.').pop()] || [];
+        if (childMasterPage && childFormData.length > 0) {
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h3", {
+            className: classes('section-title')
+          }, section.title), childFormData.map(function (entry) {
+            return /*#__PURE__*/_react.default.createElement(SummaryCardDetails, {
+              masterPage: childMasterPage,
+              childMasterPages: [],
+              formData: _objectSpread(_objectSpread(_objectSpread({}, formData), entryData), entry),
+              entryData: entry,
+              hideChildSectionTitles: true
+            });
+          }));
+        }
+        return null;
+      }
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: section.title,
+        className: classes('section')
+      }, !hideChildSectionTitles && /*#__PURE__*/_react.default.createElement("h3", {
+        className: classes('section-title')
+      }, section.title), /*#__PURE__*/_react.default.createElement("div", {
+        className: classes('section-content', "columns-".concat(section.columns))
+      }, (_section$fields = section.fields) === null || _section$fields === void 0 ? void 0 : _section$fields.map(function (fieldId) {
+        var component = allPageComponents.find(function (comp) {
+          return comp.fieldId === fieldId;
+        });
+        return /*#__PURE__*/_react.default.createElement("div", {
+          key: fieldId,
+          className: classes('field')
+        }, /*#__PURE__*/_react.default.createElement(_FormComponent.default, {
+          component: _objectSpread(_objectSpread({}, component), {}, {
+            hint: ''
+          }),
+          value: entryData[component === null || component === void 0 ? void 0 : component.fieldId],
+          formData: entryData,
+          wrap: true,
+          readonly: true
+        }));
+      })));
+    });
+  }).filter(function (e) {
+    return !!e;
+  })) || null;
+};
+SummaryCardDetails.propTypes = {
+  childCollections: _propTypes.default.arrayOf(_propTypes.default.string),
+  masterPage: _propTypes.default.shape({
+    childPages: _propTypes.default.arrayOf(_propTypes.default.shape({})).isRequired
+  }).isRequired,
+  formData: _propTypes.default.shape({}).isRequired,
+  entryData: _propTypes.default.shape({}).isRequired,
+  classModifiers: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  hideChildSectionTitles: _propTypes.default.bool
+};
+SummaryCardDetails.defaultProps = {
+  childCollections: [],
+  classModifiers: null,
+  hideChildSectionTitles: false
+};
+var _default = exports.default = SummaryCardDetails;

package/dist/components/CollectionSummary/SummaryCardDetails.scss

@@ -0,0 +1,158 @@
+$govuk-font-family: 'Roboto', arial, sans-serif;
+
+@import "node_modules/govuk-frontend/govuk/_base";
+
+.govuk-grid-column-two-thirds:has(.hods-form-summary-card-details) {
+  width: 100% !important;
+}
+
+.hods-form-summary-card-details {
+  &__section {
+    border-bottom: 2px solid #E9EBED;
+
+    &-title {
+      font-weight: bold;
+      margin: govuk-spacing(2) 0 govuk-spacing(6) 0;
+    }
+
+    &-content {
+      display: flex;
+      flex-wrap: wrap;
+      gap: govuk-spacing(2);
+
+      .hods-form-summary-card-details__field {
+        box-sizing: border-box;
+        margin-bottom: govuk-spacing(4);
+
+        .govuk-label,
+        .govuk-fieldset__legend {
+          font-weight: bold;
+          margin-bottom: govuk-spacing(1) !important;
+
+          &::after {
+            content: " :";
+          }
+        }
+
+        div.govuk-form-group div:has(img){
+          display: flex;
+          flex-wrap: wrap;
+
+          .hods-readonly.hods-readonly--success {
+            font-size: 0;
+            line-height: 0;
+
+            .cop-upload-preview__thumb {
+              display: inline-block;
+              margin-right: govuk-spacing(1);
+            }
+          }
+
+        }
+      }
+
+      &--columns-1,
+      &--columns-2,
+      &--columns-3 {
+        position: relative;
+        margin-bottom: govuk-spacing(1);
+
+        &::before {
+          content: "";
+          position: absolute;
+          top: 0;
+          width: 2px;
+          height: 100%;
+          background-color: #E9EBED;
+          left: 0;
+        }
+      }
+
+      &--columns-2 {
+        &::after {
+          content: "";
+          position: absolute;
+          top: 0;
+          width: 2px;
+          height: 100%;
+          background-color: #E9EBED;
+          left: 50%;
+        }
+
+        .hods-form-summary-card-details__field {
+          flex: 0 0 calc(50% - 10px);
+        }
+      }
+
+      &--columns-3 {
+        &::after {
+          content: "";
+          position: absolute;
+          top: 0;
+          left: 33.333%;
+          width: 2px;
+          height: 100%;
+          background-color: #E9EBED;
+        }
+
+        .hods-form-summary-card-details__field {
+          flex: 0 0 calc(33.333% - 10px);
+
+          &:nth-child(2)::after {
+            content: "";
+            position: absolute;
+            top: 0;
+            right: 33.333%;
+            width: 2px;
+            height: 100%;
+            background-color: #E9EBED;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 640px) {
+  .hods-form-summary-card-details {
+    &__section {
+      &-content {
+        display: block;
+
+        .hods-form-summary-card-details__field {
+          width: 100%;
+        }
+
+        .hods-form-summary-card-details__field:nth-child(2)::after {
+          display: none;
+        }
+
+        &--columns-2,
+        &--columns-3 {
+          position: relative;
+          margin-bottom: govuk-spacing(1);
+
+          &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            width: 2px;
+            height: 100%;
+            background-color: #A9A9A9;
+            left: 0;
+          }
+
+          &::after {
+            display: none;
+          }
+        }
+
+        &--columns-3 {
+          .hods-form-summary-card-details__field:nth-child(2)::after {
+            content: none;
+          }
+        }
+      }
+    }
+  }
+}

package/dist/components/CollectionSummary/SummaryCardDetails.test.js

@@ -0,0 +1,319 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _copReactComponents = require("@ukhomeoffice/cop-react-components");
+var _setupTests = require("../../setupTests");
+var _SummaryCardDetails = _interopRequireWildcard(require("./SummaryCardDetails"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } // Global imports.
+// Local imports.
+describe('components.CollectionSummary.SummaryCardDetails', function () {
+  var classes = _copReactComponents.Utils.classBuilder(_SummaryCardDetails.DEFAULT_CLASS, [], '');
+  var ENTRY = {
+    id: '001',
+    bannerText: 'A banner',
+    titleText: 'A title',
+    detailsText: 'Some details',
+    index: 0,
+    summaryText: 'Full details',
+    childCollection: [{
+      id: '001',
+      childField1: 'alpha',
+      childField2: 'bravo'
+    }, {
+      id: '002',
+      childField1: 'alpha',
+      childField2: 'bravo'
+    }]
+  };
+  it('should render sections and fields based on summaryLayout config', function () {
+    var CHILD_PAGES = [{
+      summaryLayout: {
+        sections: [{
+          title: 'Section 1',
+          columns: 2,
+          fields: ['fieldA', 'fieldB']
+        }, {
+          title: 'Section 2',
+          columns: 1,
+          fields: ['fieldC']
+        }]
+      },
+      components: [{
+        fieldId: 'fieldA'
+      }, {
+        fieldId: 'fieldB'
+      }, {
+        fieldId: 'fieldC'
+      }]
+    }];
+    var MASTER_PAGE = {
+      childPages: CHILD_PAGES
+    };
+    var _renderWithValidation = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
+        masterPage: MASTER_PAGE,
+        childMasterPages: [],
+        formData: {},
+        entryData: ENTRY
+      })),
+      container = _renderWithValidation.container;
+
+    // Function to find an element by its text content
+    function getByTextContent(parent, text) {
+      return Array.from(parent.getElementsByClassName(classes('section-title'))).find(function (el) {
+        return el.textContent === text;
+      });
+    }
+
+    // Check for section titles
+    var section1Title = getByTextContent(container, 'Section 1');
+    var section2Title = getByTextContent(container, 'Section 2');
+    expect(section1Title).not.toBeUndefined();
+    expect(section2Title).not.toBeUndefined();
+    var section1Content = section1Title.parentNode.querySelector(".".concat(classes('section-content')));
+    expect(section1Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(2);
+    var section2Content = section2Title.parentNode.querySelector(".".concat(classes('section-content')));
+    expect(section2Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(1);
+  });
+  it('should render sections if they have show_when checks and pass them', function () {
+    var CHILD_PAGES = [{
+      summaryLayout: {
+        sections: [{
+          title: 'Section 1',
+          columns: 2,
+          fields: ['fieldA', 'fieldB'],
+          show_when: [{
+            field: 'showSection1',
+            op: "=",
+            value: true
+          }]
+        }, {
+          title: 'Section 2',
+          columns: 1,
+          fields: ['fieldC']
+        }]
+      },
+      components: [{
+        fieldId: 'fieldA'
+      }, {
+        fieldId: 'fieldB'
+      }, {
+        fieldId: 'fieldC'
+      }]
+    }];
+    var MASTER_PAGE = {
+      childPages: CHILD_PAGES
+    };
+    var CUSTOM_ENTRY = _objectSpread(_objectSpread({}, ENTRY), {}, {
+      showSection1: true
+    });
+    var _renderWithValidation2 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
+        masterPage: MASTER_PAGE,
+        childMasterPages: [],
+        formData: {},
+        entryData: CUSTOM_ENTRY
+      })),
+      container = _renderWithValidation2.container;
+
+    // Function to find an element by its text content
+    function getByTextContent(parent, text) {
+      return Array.from(parent.getElementsByClassName(classes('section-title'))).find(function (el) {
+        return el.textContent === text;
+      });
+    }
+
+    // Check for section titles
+    var section1Title = getByTextContent(container, 'Section 1');
+    var section2Title = getByTextContent(container, 'Section 2');
+    expect(section1Title).not.toBeUndefined();
+    expect(section2Title).not.toBeUndefined();
+    var section1Content = section1Title.parentNode.querySelector(".".concat(classes('section-content')));
+    expect(section1Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(2);
+    var section2Content = section2Title.parentNode.querySelector(".".concat(classes('section-content')));
+    expect(section2Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(1);
+  });
+  it('should not render sections if they have show_when checks and fail them', function () {
+    var CHILD_PAGES = [{
+      summaryLayout: {
+        sections: [{
+          title: 'Section 1',
+          columns: 2,
+          fields: ['fieldA', 'fieldB'],
+          show_when: [{
+            field: 'showSection1',
+            op: "=",
+            value: true
+          }]
+        }, {
+          title: 'Section 2',
+          columns: 1,
+          fields: ['fieldC']
+        }]
+      },
+      components: [{
+        fieldId: 'fieldA'
+      }, {
+        fieldId: 'fieldB'
+      }, {
+        fieldId: 'fieldC'
+      }]
+    }];
+    var MASTER_PAGE = {
+      childPages: CHILD_PAGES
+    };
+    var CUSTOM_ENTRY = _objectSpread(_objectSpread({}, ENTRY), {}, {
+      showSection1: false
+    });
+    var _renderWithValidation3 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
+        masterPage: MASTER_PAGE,
+        childMasterPages: [],
+        formData: {},
+        entryData: CUSTOM_ENTRY
+      })),
+      container = _renderWithValidation3.container;
+
+    // Function to find an element by its text content
+    function getByTextContent(parent, text) {
+      return Array.from(parent.getElementsByClassName(classes('section-title'))).find(function (el) {
+        return el.textContent === text;
+      });
+    }
+
+    // Check for section titles
+    var section1Title = getByTextContent(container, 'Section 1');
+    var section2Title = getByTextContent(container, 'Section 2');
+    expect(section1Title).toBeUndefined();
+    expect(section2Title).not.toBeUndefined();
+    var section2Content = section2Title.parentNode.querySelector(".".concat(classes('section-content')));
+    expect(section2Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(1);
+  });
+  it('should not render sections on pages that fail show_when checks', function () {
+    var CHILD_PAGES = [{
+      show_when: [{
+        field: 'testField',
+        op: '=',
+        value: true
+      }],
+      summaryLayout: {
+        sections: [{
+          title: 'Section 1',
+          columns: 2,
+          fields: ['fieldA', 'fieldB'],
+          show_when: [{
+            field: 'showSection1',
+            op: "=",
+            value: true
+          }]
+        }, {
+          title: 'Section 2',
+          columns: 1,
+          fields: ['fieldC']
+        }]
+      },
+      components: [{
+        fieldId: 'fieldA'
+      }, {
+        fieldId: 'fieldB'
+      }, {
+        fieldId: 'fieldC'
+      }]
+    }];
+    var MASTER_PAGE = {
+      childPages: CHILD_PAGES
+    };
+    var CUSTOM_ENTRY = _objectSpread(_objectSpread({}, ENTRY), {}, {
+      showSection1: false
+    });
+    var _renderWithValidation4 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
+        masterPage: MASTER_PAGE,
+        childMasterPages: [],
+        formData: {
+          testField: false
+        },
+        entryData: CUSTOM_ENTRY
+      })),
+      container = _renderWithValidation4.container;
+
+    // Function to find an element by its text content
+    function getByTextContent(parent, text) {
+      return Array.from(parent.getElementsByClassName(classes('section-title'))).find(function (el) {
+        return el.textContent === text;
+      });
+    }
+
+    // Check for section titles
+    var section1Title = getByTextContent(container, 'Section 1');
+    var section2Title = getByTextContent(container, 'Section 2');
+    expect(section1Title).toBeUndefined();
+    expect(section2Title).toBeUndefined();
+  });
+  it('should render child collections', function () {
+    var CHILD_MASTER_PAGES = [{
+      collection: {
+        name: 'childCollection'
+      },
+      childPages: [{
+        components: [{
+          fieldId: 'childField1'
+        }, {
+          fieldId: 'childField2'
+        }],
+        summaryLayout: {
+          sections: [{
+            title: 'Hidden Title',
+            columns: 2,
+            fields: ['childfield1', 'childfield2']
+          }]
+        }
+      }]
+    }];
+    var CHILD_PAGES = [{
+      summaryLayout: {
+        sections: [{
+          type: 'childCollection',
+          collectionName: 'childCollection',
+          title: 'Children'
+        }]
+      },
+      components: [{
+        fieldId: 'fieldA'
+      }, {
+        fieldId: 'fieldB'
+      }, {
+        fieldId: 'fieldC'
+      }]
+    }];
+    var MASTER_PAGE = {
+      childPages: [].concat(CHILD_PAGES, CHILD_MASTER_PAGES)
+    };
+    var CHILD_COLLECTIONS = ['childCollection'];
+    var _renderWithValidation5 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
+        masterPage: MASTER_PAGE,
+        childCollections: CHILD_COLLECTIONS,
+        formData: {},
+        entryData: ENTRY
+      })),
+      container = _renderWithValidation5.container;
+
+    // Function to find an element by its text content
+    function getByTextContent(parent, text) {
+      return Array.from(parent.getElementsByClassName(classes('section-title'))).find(function (el) {
+        return el.textContent === text;
+      });
+    }
+    var childCollectionSectionTitle = getByTextContent(container, 'Children');
+    expect(childCollectionSectionTitle).not.toBeUndefined();
+    var childSectionTitles = getByTextContent(container, 'Hidden Title');
+    expect(childSectionTitles).toBeUndefined(); // Individual section title for child collections should be hidden.
+
+    var childFields = container.querySelectorAll(".".concat(classes('field')));
+    expect(childFields.length).toEqual(4); // Two for each entry in the child collection.
+  });
+});

package/dist/components/FormComponent/FormComponent.js

@@ -166,6 +166,7 @@ var FormComponent = function FormComponent(_ref) {
     options: options,
     value: value,
     onChange: onComponentChangeExtended,
+    onTopLevelChange: onTopLevelChange,
     formData: formData,
     onAction: onAction,
     submitting: submitting

package/dist/utils/CollectionPage/mergeCollectionPages.js

@@ -84,7 +84,7 @@ var nestUnderParent = function nestUnderParent(childPage, masterPages) {
  */
 var mergeCollectionPages = function mergeCollectionPages(pages) {
   var masterPages = {};
-  return pages.map(function (page) {
+  var pagesWithMasters = pages.map(function (page) {
     var _page$collection;
     if (page !== null && page !== void 0 && (_page$collection = page.collection) !== null && _page$collection !== void 0 && _page$collection.name) {
       if (!masterPages[page.collection.name]) {
@@ -92,10 +92,7 @@ var mergeCollectionPages = function mergeCollectionPages(pages) {
         // we kick one off using this page as a template.
         var newMasterPage = createMasterPage(page);
         masterPages[page.collection.name] = newMasterPage;
-        // We check if the new master page belongs to a child collection,
-        // if so then nest it under the parent master page and remove from
-        // the pages array. If not then treat it as a top-level collection.
-        return nestUnderParent(newMasterPage, masterPages) ? null : newMasterPage;
+        return newMasterPage;
       }
       // If a master page already exists for this collection.name
       // then we just merge this page into it and remove this page
@@ -107,5 +104,17 @@ var mergeCollectionPages = function mergeCollectionPages(pages) {
   }).filter(function (page) {
     return !!page;
   });
+  // We nest any child master pages under their parents here to 
+  // ensure that all parent master pages have been created by the
+  // above code first.
+  return pagesWithMasters.map(function (page) {
+    var _page$collection2;
+    if ((_page$collection2 = page.collection) !== null && _page$collection2 !== void 0 && _page$collection2.masterPage) {
+      return nestUnderParent(page, masterPages) ? null : page;
+    }
+    return page;
+  }).filter(function (e) {
+    return !!e;
+  });
 };
 var _default = exports.default = mergeCollectionPages;

package/dist/utils/CollectionPage/mergeCollectionPages.test.js

@@ -49,7 +49,7 @@ describe('utils.CollectionPage.mergeCollectionPages', function () {
       childPages: PAGES
     });
   });
-  it('should correctly merge and nested child collection pages under their parents', function () {
+  it('should correctly merge and nest child collection pages under their parents', function () {
     var PAGES = [{
       id: 'page1',
       collection: {
@@ -95,6 +95,53 @@ describe('utils.CollectionPage.mergeCollectionPages', function () {
       }]
     });
   });
+  it('should correctly merge and nest child collection pages under their parents, even if the child pages are created first', function () {
+    var PAGES = [{
+      id: 'page1',
+      collection: {
+        name: 'parent.child'
+      },
+      components: [TEXT_COMP]
+    }, {
+      id: 'page2',
+      collection: {
+        name: 'parent.child'
+      },
+      components: [DATE_COMP]
+    }, {
+      id: 'page3',
+      collection: {
+        name: 'parent'
+      },
+      components: [DATE_COMP]
+    }, {
+      id: 'page4',
+      collection: {
+        name: 'parent'
+      },
+      components: [DATE_COMP]
+    }];
+    var RESULT = (0, _mergeCollectionPages.default)(PAGES);
+    expect(RESULT.length).toEqual(1); // One master page for parent collection.      
+    expect(RESULT[0].childPages.length).toEqual(3); // Two normal pages and the child collection's master page.
+    expect(RESULT[0]).toMatchObject({
+      id: 'page3',
+      collection: {
+        name: 'parent',
+        masterPage: true
+      },
+      formData: {},
+      childPages: [PAGES[2], PAGES[3], {
+        id: 'page1',
+        collection: {
+          name: 'parent.child',
+          masterPage: true
+        },
+        formData: {},
+        childPages: [PAGES[0], PAGES[1]]
+      }]
+    });
+  });
   it('should leave non-collection pages unaffected', function () {
     var PAGES = [{
       id: 'page1',

package/package.json

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