@ukhomeoffice/cop-react-form-renderer 6.0.0 → 6.0.2-peter

package/dist/components/CheckYourAnswers/CheckYourAnswers.scss

@@ -1,5 +1,5 @@
-@import "govuk-frontend/dist/govuk/_base";
-@import "govuk-frontend/dist/govuk/overrides/spacing";
+@import "node_modules/govuk-frontend/govuk/_base";
+@import "node_modules/govuk-frontend/govuk/overrides/spacing";
 
 .govuk-link {
     @include govuk-font($size: 19);

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

@@ -1,5 +1,5 @@
-@import "govuk-frontend/dist/govuk/_base";
-@import "govuk-frontend/dist/govuk/components/tag/_index";
+@import "node_modules/govuk-frontend/govuk/_base";
+@import "node_modules/govuk-frontend/govuk/components/tag/_index";
 
 .hods-form-banner-strip {
   display: block;
@@ -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,17 +64,34 @@ 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 = [];
     // We only clear errors if it's not empty to avoid
     // triggering a race condition with the 'data' memo 
     // above.
     if (errors.length > 0) {
+      stored = errors.filter(function (e) {
+        return e.id === config.id;
+      });
       clearErrors();
     }
     var allErrors = [];
@@ -99,6 +116,9 @@ var CollectionSummary = function CollectionSummary(_ref) {
       });
       allErrors = allErrors.concat(entryErrors);
     });
+    if (stored.length > 0) {
+      allErrors = allErrors.concat(stored);
+    }
     // We only add allErrors if it's not empty to avoid
     // triggering a race condition with the 'data' memo 
     // above.
@@ -107,7 +127,11 @@ var CollectionSummary = function CollectionSummary(_ref) {
     }
   };
   (0, _react.useEffect)(function () {
-    validateEntries();
+    // An empty array here indicates nothing to validate, higher level validation
+    // such as 'required' is taken care of at the page level not here
+    if (Array.isArray(data) && data.length > 0) {
+      validateEntries();
+    }
   }, [data]);
   var onSummaryCardChange = function onSummaryCardChange(page, entryId) {
     if (typeof onAction !== 'function') {
@@ -213,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) {
@@ -224,6 +249,7 @@ var CollectionSummary = function CollectionSummary(_ref) {
 CollectionSummary.propTypes = {
   config: _propTypes.default.shape({
     fieldId: _propTypes.default.string.isRequired,
+    id: _propTypes.default.string.isRequired,
     collectionName: _propTypes.default.string.isRequired,
     addButton: _propTypes.default.shape({
       label: _propTypes.default.string,
@@ -248,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/CollectionSummary.scss

@@ -1,4 +1,4 @@
-@import "govuk-frontend/dist/govuk/_base";
+@import "node_modules/govuk-frontend/govuk/_base";
 
 .hods-form-summary-card.hods-form-summary-card--nested {
   box-shadow: none;

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

@@ -1,19 +1,23 @@
 "use strict";
 
-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); }
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _setupTests = require("../../setupTests");
+var _context = require("../../context");
+var _ValidationContext = require("../../context/ValidationContext");
 var _hooks = require("../../hooks");
 var _CollectionSummary = _interopRequireWildcard(require("./CollectionSummary"));
 var _Confirmation = require("./Confirmation");
 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 }; }
-// Global imports.
-
+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.CollectionSummary', function () {
   var CONFIG = {
     id: 'testSummary',
@@ -106,6 +110,80 @@ describe('components.CollectionSummary.CollectionSummary', function () {
     expect(summary.children[0].id).toEqual("".concat(CONFIG.fieldId, ".confirmation"));
     expect(summary.children[0].classList).toContain(_Confirmation.DEFAULT_CLASS);
   });
+  it('should keep higher level errors that relate to the CollectionSummary', function () {
+    var errors = [{
+      id: 'testSummary',
+      error: 'add at least one'
+    }];
+    var clearErrorCount = 0;
+    var errorsAdded = [];
+    var clearErrors = function clearErrors() {
+      clearErrorCount += 1;
+    };
+    var addErrors = function addErrors(newErrors) {
+      errorsAdded = errorsAdded.concat(newErrors);
+    };
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_context.HooksContextProvider, null, /*#__PURE__*/_react.default.createElement(_ValidationContext.ValidationContext.Provider, {
+      value: {
+        errors: errors,
+        clearErrors: clearErrors,
+        addErrors: addErrors,
+        validate: function validate() {}
+      }
+    }, /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
+      config: _objectSpread(_objectSpread({}, CONFIG), {}, {
+        required: true
+      }),
+      formData: _objectSpread(_objectSpread({}, FORM_DATA), {}, {
+        testCollection: [{
+          id: '000',
+          testText: 'value'
+        }]
+      }),
+      onAction: ON_ACTION,
+      pages: PAGES
+    }))));
+    expect(clearErrorCount).toEqual(1);
+    expect(errorsAdded[0]).toEqual({
+      id: 'testSummary',
+      error: 'add at least one'
+    });
+  });
+  it('should ignore higher level errors that do not relate to the CollectionSummary', function () {
+    var errors = [{
+      id: 'somethingElse',
+      error: 'add at least one'
+    }];
+    var clearErrorCount = 0;
+    var errorsAdded = [];
+    var clearErrors = function clearErrors() {
+      clearErrorCount += 1;
+    };
+    var addErrors = function addErrors(newErrors) {
+      errorsAdded = errorsAdded.concat(newErrors);
+    };
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_context.HooksContextProvider, null, /*#__PURE__*/_react.default.createElement(_ValidationContext.ValidationContext.Provider, {
+      value: {
+        errors: errors,
+        clearErrors: clearErrors,
+        addErrors: addErrors
+      }
+    }, /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
+      config: _objectSpread(_objectSpread({}, CONFIG), {}, {
+        required: true
+      }),
+      formData: _objectSpread(_objectSpread({}, FORM_DATA), {}, {
+        testCollection: [{
+          id: '000',
+          testText: 'value'
+        }]
+      }),
+      onAction: ON_ACTION,
+      pages: PAGES
+    }))));
+    expect(clearErrorCount).toEqual(1);
+    expect(errorsAdded.length).toEqual(0);
+  });
   describe('Add Another button', function () {
     it('should render with an Add button if one is configured', function () {
       var CONFIG_WITH_BUTTON = {

package/dist/components/CollectionSummary/Confirmation.scss

@@ -1,6 +1,6 @@
 $govuk-font-family: 'Roboto', arial, sans-serif;
 
-@import "govuk-frontend/dist/govuk/_base";
+@import "node_modules/govuk-frontend/govuk/_base";
 
 .hods-form-confirmation {
   background-color: #E3E3E3;

package/dist/components/CollectionSummary/RenderListView.js

@@ -12,12 +12,14 @@ var _SummaryListRow = _interopRequireDefault(require("../SummaryList/SummaryList
 var _Answer = _interopRequireDefault(require("../CheckYourAnswers/Answer"));
 require("./RenderListView.scss");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-// Global imports.
-
+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 = 'govuk-summary-card';
 var DEFAULT_LIST_CLASS = exports.DEFAULT_LIST_CLASS = 'govuk-summary-list';
 var DEFAULT_TITLE = exports.DEFAULT_TITLE = 'Item';
@@ -43,7 +45,9 @@ var RenderListView = function RenderListView(_ref) {
     className: classes('title-wrapper', [], 'dark')
   }, /*#__PURE__*/_react.default.createElement("h2", {
     className: classes('title')
-  }, _copReactComponents.Utils.interpolateString(config.title || DEFAULT_TITLE, entryData)), /*#__PURE__*/_react.default.createElement("ul", {
+  }, _copReactComponents.Utils.interpolateString(config.title || DEFAULT_TITLE, _objectSpread(_objectSpread({}, entryData), {}, {
+    index: entryData.index + 1
+  }))), /*#__PURE__*/_react.default.createElement("ul", {
     className: classes('actions')
   }, /*#__PURE__*/_react.default.createElement("li", {
     className: classes('action')

package/dist/components/CollectionSummary/RenderListView.scss

@@ -1,6 +1,6 @@
 $govuk-font-family: 'Roboto', arial, sans-serif;
 
-@import "govuk-frontend/dist/govuk/_base";
+@import "node_modules/govuk-frontend/govuk/_base";
 
 .govuk-summary-list {
   @include govuk-font($size: 19);

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

@@ -60,7 +60,7 @@ describe('components.CollectionSummary.RenderListView', function () {
     }]
   };
   var CONFIG = {
-    title: 'Title text',
+    title: 'Title text 1',
     listView: true,
     changeAction: {
       label: 'Change label',
@@ -140,6 +140,27 @@ describe('components.CollectionSummary.RenderListView', function () {
     expect(thirdRowKey.textContent).toEqual('Item 3');
     expect(thirdRowValue.textContent).toEqual('Value 3Value 4');
   });
+  it('should render the index correctly in the title', function () {
+    var _renderWithValidation2 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_RenderListView.default, {
+        id: ID,
+        entryData: ENTRY,
+        config: CONFIG,
+        onChange: ON_CHANGE,
+        onDelete: ON_DELETE,
+        masterPage: MASTER_PAGE
+      })),
+      container = _renderWithValidation2.container;
+    var listViewDiv = checkSetup(container);
+
+    // Check title wrapper and title text
+    var titleWrapper = listViewDiv.querySelector('.govuk-summary-card__title-wrapper');
+    expect(titleWrapper).not.toBeNull();
+    var title = titleWrapper.querySelector('.govuk-summary-card__title');
+    expect(title.textContent).toEqual(CONFIG.title);
+
+    // Check if the index is rendered as expected in the title
+    expect(title.textContent).toContain("Title text ".concat(ENTRY.index + 1));
+  });
   describe('Action buttons in RenderListView', function () {
     beforeEach(function () {
       onChangeArgs = [];
@@ -148,7 +169,7 @@ describe('components.CollectionSummary.RenderListView', function () {
       onDeleteCalls = 0;
     });
     it('should render and handle action buttons correctly', function () {
-      var _renderWithValidation2 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_RenderListView.default, {
+      var _renderWithValidation3 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_RenderListView.default, {
           id: ID,
           entryData: ENTRY,
           config: CONFIG,
@@ -156,7 +177,7 @@ describe('components.CollectionSummary.RenderListView', function () {
           onDelete: ON_DELETE,
           masterPage: MASTER_PAGE
         })),
-        container = _renderWithValidation2.container;
+        container = _renderWithValidation3.container;
       var listViewDiv = container.querySelector('.govuk-summary-card');
       expect(listViewDiv).not.toBeNull();
 

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,
@@ -162,7 +163,7 @@ var SummaryCard = function SummaryCard(_ref) {
   }, _utils.default.FormPage.getTitle(config.title, entryData)), config.details && /*#__PURE__*/_react.default.createElement("div", {
     id: "".concat(id, ".titleDetail"),
     className: classes('header-content-detail')
-  }, _copReactComponents.Utils.interpolateString(config.details, entryData))), /*#__PURE__*/_react.default.createElement("div", {
+  }, _utils.default.FormPage.getConditionalText(config.details, entryData))), /*#__PURE__*/_react.default.createElement("div", {
     className: classes('header-actions')
   }, config.quickEdit && /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
     id: "".concat(id, ".quickEditButton"),
@@ -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,41 +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.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 = {
@@ -280,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
@@ -290,6 +262,7 @@ SummaryCard.defaultProps = {
   onDelete: null,
   onDuplicate: null,
   onQuickEdit: null,
+  childCollections: [],
   hideDetails: false,
   inError: false
 };

package/dist/components/CollectionSummary/SummaryCard.scss

@@ -1,6 +1,6 @@
 $govuk-font-family: 'Roboto', arial, sans-serif;
 
-@import "govuk-frontend/dist/govuk/_base";
+@import "node_modules/govuk-frontend/govuk/_base";
 
 .govuk-grid-column-two-thirds:has(.hods-form-summary-card) {
   width: 100% !important;
@@ -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;
-          }
-        }
-      }
-    }
   }
 }