@ukhomeoffice/cop-react-form-renderer 6.0.6-peter → 6.6.1

package/dist/components/CheckYourAnswers/CheckYourAnswers.scss

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

package/dist/components/CollectionPage/CollectionPage.js

@@ -29,8 +29,9 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } // Global
 // Styles
 var DEFAULT_CLASS = exports.DEFAULT_CLASS = _FormPage2.DEFAULT_CLASS;
 var CollectionPage = function CollectionPage(_ref) {
-  var _page$collection, _objectSpread4;
+  var _page$collection, _objectSpread5;
   var page = _ref.page,
+    pages = _ref.pages,
     onCollectionChange = _ref.onCollectionChange,
     onAction = _ref.onAction,
     hashLink = _ref.hashLink,
@@ -67,6 +68,9 @@ var CollectionPage = function CollectionPage(_ref) {
   var onTopLevelChange = function onTopLevelChange(_ref3) {
     var target = _ref3.target;
     currentPage.formData[target.name] = target.value;
+    setPatch(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, target.name, target.value));
+    });
   };
   var reportChange = function reportChange(newValue) {
     onPageChange({
@@ -120,13 +124,14 @@ var CollectionPage = function CollectionPage(_ref) {
   }
   return /*#__PURE__*/_react.default.createElement(_FormPage.default, {
     page: _objectSpread(_objectSpread({}, page), {}, {
-      formData: _objectSpread(_objectSpread(_objectSpread({}, page.formData), data[activeIndex]), {}, (_objectSpread4 = {}, _defineProperty(_objectSpread4, "".concat(currentCollectionName, "ActiveIndex"), activeIndex), _defineProperty(_objectSpread4, "".concat(currentCollectionName, "NumberedIndex"), typeof activeIndex === 'number' ? activeIndex + 1 : null), _objectSpread4)),
+      formData: _objectSpread(_objectSpread(_objectSpread({}, page.formData), data[activeIndex]), {}, (_objectSpread5 = {}, _defineProperty(_objectSpread5, "".concat(currentCollectionName, "ActiveIndex"), activeIndex), _defineProperty(_objectSpread5, "".concat(currentCollectionName, "NumberedIndex"), typeof activeIndex === 'number' ? activeIndex + 1 : null), _objectSpread5)),
       components: page.components.map(function (component) {
         return _objectSpread(_objectSpread({}, component), {}, {
           pageCollection: _objectSpread({}, page.collection)
         });
       })
     }),
+    pages: pages,
     onAction: onInnerPageAction,
     onWrapperChange: onInnerPageChange,
     onTopLevelChange: onTopLevelChange,
@@ -149,6 +154,7 @@ CollectionPage.propTypes = {
     actions: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({}), _propTypes.default.string])),
     formData: _propTypes.default.shape({}).isRequired
   }).isRequired,
+  pages: _propTypes.default.arrayOf(_propTypes.default.shape({})).isRequired,
   onCollectionChange: _propTypes.default.func,
   onAction: _propTypes.default.func.isRequired,
   hashLink: _propTypes.default.bool,

package/dist/components/CollectionSummary/BannerStrip.js

@@ -31,13 +31,14 @@ var BannerStrip = function BannerStrip(_ref) {
     className: classes()
   }, filteredBanners.map(function (banner, index) {
     var bannerId = "".concat(id, "-banner-").concat(index);
-    if (typeof banner === 'string') {
+    if (typeof banner === 'string' || banner.type === 'plain') {
+      var bannerText = typeof banner === 'string' ? banner : banner.text;
       return /*#__PURE__*/_react.default.createElement("div", {
         id: bannerId,
         key: bannerId,
         className: classes('banner')
       }, /*#__PURE__*/_react.default.createElement(_copReactComponents.Markup, {
-        content: _utils.default.interpolateString(banner, formData)
+        content: _utils.default.interpolateString(bannerText, formData)
       }));
     }
     return /*#__PURE__*/_react.default.createElement(_copReactComponents.Tag, {

package/dist/components/CollectionSummary/BannerStrip.scss

@@ -1,5 +1,5 @@
-@import "node_modules/govuk-frontend/govuk/_base";
-@import "node_modules/govuk-frontend/govuk/components/tag/_index";
+@import "govuk-frontend/dist/govuk/_base";
+@import "govuk-frontend/dist/govuk/components/tag/_index";
 
 .hods-form-banner-strip {
   display: block;

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

@@ -1,6 +1,5 @@
 "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 _copReactComponents = require("@ukhomeoffice/cop-react-components");
 var _react = _interopRequireDefault(require("react"));
 var _setupTests = require("../../setupTests");
@@ -8,10 +7,13 @@ var _BannerStrip = _interopRequireWildcard(require("./BannerStrip"));
 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.BannerStrip', function () {
   var ID = 'testBanner';
   var BANNERS = ['Banner 1', 'Banner 2'];
@@ -123,4 +125,37 @@ describe('components.CollectionSummary.BannerStrip', function () {
     expect(plainStringBanner.classList.contains(classes('banner'))).toBe(true);
     expect(plainStringBanner.textContent).toEqual(PLAIN_STRING_BANNER);
   });
+  it('should correctly render banners based on their show_whens', function () {
+    var CUSTOM_BANNERS = [{
+      type: 'plain',
+      text: 'A banner',
+      show_when: [{
+        field: 'testField',
+        op: '=',
+        value: '123'
+      }]
+    }, {
+      type: 'plain',
+      text: BANNERS[1]
+    }];
+    var CUSTOM_FORM_DATA = _objectSpread(_objectSpread({}, FORM_DATA), {}, {
+      testField: 'abc'
+    });
+    var _renderWithValidation6 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_BannerStrip.default, {
+        id: ID,
+        banners: CUSTOM_BANNERS,
+        formData: CUSTOM_FORM_DATA
+      })),
+      container = _renderWithValidation6.container;
+    var bannerStripDiv = checkSetup(container);
+    expect(bannerStripDiv.tagName).toEqual('DIV');
+    expect(bannerStripDiv.classList).toContain(_BannerStrip.DEFAULT_CLASS);
+    expect(bannerStripDiv.children.length).toEqual(1); // One banner should be hidden.
+
+    // Only the second banner should be visible.
+    var secondBanner = bannerStripDiv.children[0];
+    expect(secondBanner.tagName).toEqual('DIV');
+    expect(secondBanner.classList).toContain(classes('banner'));
+    expect(secondBanner.textContent).toEqual(CUSTOM_BANNERS[1].text);
+  });
 });

package/dist/components/CollectionSummary/CollectionSummary.js

@@ -9,18 +9,22 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("../../hooks");
 var _PageAction = require("../../models/PageAction");
+var _elevateNestedComponents = _interopRequireDefault(require("../../utils/Component/elevateNestedComponents"));
+var _getErrorsForCollection = _interopRequireDefault(require("../../utils/CollectionPage/getErrorsForCollection"));
 var _utils = _interopRequireDefault(require("../../utils"));
 var _getCYARow = _interopRequireDefault(require("../../utils/CheckYourAnswers/getCYARow"));
-var _elevateNestedComponents = _interopRequireDefault(require("../../utils/Component/elevateNestedComponents"));
 var _Answer = _interopRequireDefault(require("../CheckYourAnswers/Answer"));
 var _ActionButton = _interopRequireDefault(require("../PageActions/ActionButton"));
 var _Confirmation = _interopRequireDefault(require("./Confirmation"));
 var _SummaryCard = _interopRequireDefault(require("./SummaryCard"));
 var _SummaryCardValidationContext = _interopRequireDefault(require("./SummaryCardValidationContext"));
 require("./CollectionSummary.scss");
+var _excluded = ["isDuplicate"];
 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 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; }
@@ -54,11 +58,17 @@ var CollectionSummary = function CollectionSummary(_ref) {
     formData = _ref.formData,
     onAction = _ref.onAction,
     onChange = _ref.onChange,
+    onTopLevelChange = _ref.onTopLevelChange,
     pages = _ref.pages;
+  var _useHooks = (0, _hooks.useHooks)(),
+    hooks = _useHooks.hooks;
   var _useValidation = (0, _hooks.useValidation)(),
     errors = _useValidation.errors,
     addErrors = _useValidation.addErrors,
-    clearErrors = _useValidation.clearErrors;
+    clearErrors = _useValidation.clearErrors,
+    queuedErrors = _useValidation.queuedErrors,
+    enqueueErrors = _useValidation.enqueueErrors,
+    dequeueErrors = _useValidation.dequeueErrors;
   var _useState = (0, _react.useState)(null),
     _useState2 = _slicedToArray(_useState, 2),
     entryToDelete = _useState2[0],
@@ -98,46 +108,21 @@ var CollectionSummary = function CollectionSummary(_ref) {
     return [];
   }, [masterPage, formData, entryToDelete, config.card.listView]);
   var validateEntries = function validateEntries() {
-    var stored = [];
-    // We only clear errors if it's not empty to avoid
+    // We only clear queuedErrors 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 = [];
-    data.forEach(function (entry) {
-      // Validation of a collection page uses the data from the
-      // active entry, so here we have to set the active ID before
-      // validating.
-      var childPages = masterPage === null || masterPage === void 0 ? void 0 : masterPage.childPages.map(function (page) {
-        return _objectSpread(_objectSpread({}, page), {}, {
-          formData: _objectSpread(_objectSpread({}, masterPage.formData), {}, _defineProperty({}, "".concat(config.collectionName, "ActiveId"), entry.id))
-        });
-      });
-      var allPagesErrors = (childPages === null || childPages === void 0 ? void 0 : childPages.flatMap(function (page) {
-        return _utils.default.Validate.page(page);
-      })) || [];
-      // For each error we found, add the entryId so we know what Summary Card
-      // we have to pass it to.
-      var entryErrors = allPagesErrors.map(function (e) {
-        return _objectSpread(_objectSpread({}, e), {}, {
-          entryId: entry.id
-        });
+    if (queuedErrors.length > 0) {
+      dequeueErrors(function (e) {
+        return e.raisedBy === config.id;
       });
-      allErrors = allErrors.concat(entryErrors);
-    });
-    if (stored.length > 0) {
-      allErrors = allErrors.concat(stored);
     }
-    // We only add allErrors if it's not empty to avoid
+    var allErrors = (0, _getErrorsForCollection.default)(config, masterPage, formData, hooks);
+
+    // We only queue allErrors if it's not empty to avoid
     // triggering a race condition with the 'data' memo 
     // above.
     if (allErrors.length > 0) {
-      addErrors(allErrors);
+      enqueueErrors(allErrors);
     }
   };
   (0, _react.useEffect)(function () {
@@ -147,30 +132,43 @@ var CollectionSummary = function CollectionSummary(_ref) {
       validateEntries();
     }
   }, [data]);
-  var onSummaryCardChange = function onSummaryCardChange(page, entryId) {
-    if (typeof onAction !== 'function') {
-      return;
+  var onSummaryCardFullEdit = function onSummaryCardFullEdit(page, entryId) {
+    if (typeof onAction === 'function') {
+      var newData = [].concat(data);
+      var entryIndex = data.findIndex(function (e) {
+        return e.id === entryId;
+      });
+      var _data$entryIndex = data[entryIndex],
+        isDuplicate = _data$entryIndex.isDuplicate,
+        newEntry = _objectWithoutProperties(_data$entryIndex, _excluded);
+      newData[entryIndex] = _objectSpread({}, newEntry);
+      onAction({
+        type: _PageAction.PageActionTypes.SAVE_AND_NAVIGATE,
+        page: page,
+        addToFormData: [{
+          field: "".concat(config.collectionName.split('.').pop(), "ActiveId"),
+          value: entryId
+        }, {
+          field: config.collectionName,
+          value: newData,
+          isCollection: true
+        }]
+      });
     }
-    onAction({
-      type: _PageAction.PageActionTypes.SAVE_AND_NAVIGATE,
-      page: page,
-      addToFormData: {
-        field: "".concat(config.collectionName.split('.').pop(), "ActiveId"),
-        value: entryId
-      }
-    });
   };
   var onDuplicate = function onDuplicate(entry) {
     var _config$card;
-    _utils.default.CollectionPage.duplicateEntry(config.collectionName, formData, entry.id, ((_config$card = config.card) === null || _config$card === void 0 || (_config$card = _config$card.duplicateAction) === null || _config$card === void 0 ? void 0 : _config$card.fieldsToIgnore) || []);
-    var parentCollection = config.collectionName.split('.').shift();
+    _utils.default.CollectionPage.duplicateEntry(config.collectionName, formData, entry.id, ((_config$card = config.card) === null || _config$card === void 0 || (_config$card = _config$card.duplicateAction) === null || _config$card === void 0 ? void 0 : _config$card.fieldsToIgnore) || [], {
+      isDuplicate: true
+    });
+    var topLevelCollectionName = config.collectionName.split('.').shift();
     // Report the whole top-level collection as being changed. We have to do this
     // because of how patch is applied to formData on a page submission.
-    if (typeof onChange === 'function') {
-      onChange({
+    if (typeof onTopLevelChange === 'function') {
+      onTopLevelChange({
         target: {
-          name: parentCollection,
-          value: _utils.default.CollectionPage.getData(parentCollection, formData)
+          name: topLevelCollectionName,
+          value: _utils.default.CollectionPage.getData(topLevelCollectionName, formData)
         }
       });
       validateEntries();
@@ -181,14 +179,14 @@ var CollectionSummary = function CollectionSummary(_ref) {
       return;
     }
     _utils.default.CollectionPage.removeEntry(config.collectionName, formData, entryToDelete.id);
-    var parentCollection = config.collectionName.split('.').shift();
+    var topLevelCollectionName = config.collectionName.split('.').shift();
     // Report the whole top-level collection as being changed. We have to do this
     // because of how patch is applied to formData on a page submission.
-    if (typeof onChange === 'function') {
-      onChange({
+    if (typeof onTopLevelChange === 'function') {
+      onTopLevelChange({
         target: {
-          name: parentCollection,
-          value: _utils.default.CollectionPage.getData(parentCollection, formData)
+          name: topLevelCollectionName,
+          value: _utils.default.CollectionPage.getData(topLevelCollectionName, formData)
         }
       });
     }
@@ -216,7 +214,9 @@ var CollectionSummary = function CollectionSummary(_ref) {
     id: config.fieldId
   }, entryToDelete && /*#__PURE__*/_react.default.createElement(_Confirmation.default, {
     id: "".concat(config.fieldId, ".confirmation"),
-    message: _utils.default.interpolateString((_config$confirmation = config.confirmation) === null || _config$confirmation === void 0 ? void 0 : _config$confirmation.message, entryToDelete) || null,
+    message: _utils.default.interpolateString((_config$confirmation = config.confirmation) === null || _config$confirmation === void 0 ? void 0 : _config$confirmation.message, _objectSpread(_objectSpread({}, entryToDelete), {}, {
+      index: entryToDelete.index + 1
+    })) || null,
     confirmLabel: _utils.default.interpolateString((_config$confirmation2 = config.confirmation) === null || _config$confirmation2 === void 0 ? void 0 : _config$confirmation2.label, entryToDelete) || null,
     onConfirm: onDeleteConfirm,
     onCancel: function onCancel() {
@@ -247,11 +247,18 @@ var CollectionSummary = function CollectionSummary(_ref) {
     var isInError = errors.filter(function (e) {
       return e.entryId === entry.id;
     }).length > 0;
-    var finalConfig = _objectSpread(_objectSpread({}, config.card), isInError && config.errorCard ? config.errorCard : {});
+    var finalConfig = _objectSpread(_objectSpread(_objectSpread({}, config.card), entry.isDuplicate && config.duplicatedCard ? config.duplicatedCard : {}), isInError && config.errorCard ? config.errorCard : {});
     var key = "".concat(config.fieldId, ".summaryCard").concat(entry.id);
     return /*#__PURE__*/_react.default.createElement(_SummaryCardValidationContext.default, {
       entryId: entry.id,
-      topLevelErrors: errors
+      topLevelErrors: errors,
+      clearTopLevelErrorsForCard: function clearTopLevelErrorsForCard() {
+        var newErrors = errors.filter(function (e) {
+          return e.entryId !== entry.id;
+        });
+        clearErrors();
+        addErrors(newErrors);
+      }
     }, /*#__PURE__*/_react.default.createElement(_SummaryCard.default, {
       id: key,
       key: key,
@@ -260,10 +267,12 @@ var CollectionSummary = function CollectionSummary(_ref) {
       }),
       masterPage: masterPage,
       config: finalConfig || {},
-      onChange: onSummaryCardChange,
+      onFullEdit: onSummaryCardFullEdit,
       onDuplicate: onDuplicate,
       onDelete: function onDelete() {
-        return setEntryToDelete(entry);
+        return setEntryToDelete(_objectSpread(_objectSpread({}, entry), {}, {
+          index: index
+        }));
       },
       onQuickEdit: function onQuickEdit(target) {
         validateEntries();
@@ -272,7 +281,7 @@ var CollectionSummary = function CollectionSummary(_ref) {
       parentCollectionName: config.collectionName.split('.').shift(),
       childCollections: config.childCollections || [],
       formData: formData,
-      classModifiers: entry === entryToDelete ? ['deleting-summary-card'] : [''],
+      classModifiers: entry.id === (entryToDelete === null || entryToDelete === void 0 ? void 0 : entryToDelete.id) ? ['deleting-summary-card'] : [''],
       inError: errors.filter(function (e) {
         return e.entryId === entry.id;
       }).length > 0
@@ -315,6 +324,14 @@ CollectionSummary.propTypes = {
         fieldsToIgnore: _propTypes.default.arrayOf(_propTypes.default.string)
       })
     }),
+    duplicatedCard: _propTypes.default.shape({
+      banners: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.shape({})])),
+      title: _propTypes.default.string,
+      details: _propTypes.default.string,
+      duplicateAction: _propTypes.default.shape({
+        fieldsToIgnore: _propTypes.default.arrayOf(_propTypes.default.string)
+      })
+    }),
     confirmation: _propTypes.default.shape({
       message: _propTypes.default.string,
       label: _propTypes.default.string,
@@ -324,12 +341,14 @@ CollectionSummary.propTypes = {
   }).isRequired,
   onAction: _propTypes.default.func,
   onChange: _propTypes.default.func,
+  onTopLevelChange: _propTypes.default.func,
   formData: _propTypes.default.shape({}).isRequired,
   pages: _propTypes.default.arrayOf(_propTypes.default.shape({}))
 };
 CollectionSummary.defaultProps = {
   onAction: null,
   onChange: null,
+  onTopLevelChange: null,
   pages: []
 };
 var _default = exports.default = CollectionSummary;

package/dist/components/CollectionSummary/CollectionSummary.scss

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

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

@@ -3,8 +3,6 @@
 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");
@@ -75,11 +73,11 @@ describe('components.CollectionSummary.CollectionSummary', function () {
     expect(summary.children[0].id).toEqual("".concat(CONFIG.fieldId, ".summaryCard").concat(FORM_DATA.testCollection[0].id));
     expect(summary.children[1].id).toEqual("".concat(CONFIG.fieldId, ".summaryCard").concat(FORM_DATA.testCollection[1].id));
   });
-  it('should correctly raise errors found when validating entries', function () {
+  it('should correctly queue errors found when validating entries', function () {
     var ErrorCheckComponent = function ErrorCheckComponent() {
       var _useValidation = (0, _hooks.useValidation)(),
-        errors = _useValidation.errors;
-      return /*#__PURE__*/_react.default.createElement("div", null, Array.isArray(errors) && "errors is an array of length ".concat(errors.length), (errors === null || errors === void 0 ? void 0 : errors.length) > 0 && errors.map(function (e) {
+        queuedErrors = _useValidation.queuedErrors;
+      return /*#__PURE__*/_react.default.createElement("div", null, Array.isArray(queuedErrors) && "queuedErrors is an array of length ".concat(queuedErrors.length), (queuedErrors === null || queuedErrors === void 0 ? void 0 : queuedErrors.length) > 0 && queuedErrors.map(function (e) {
         return e.error;
       }));
     };
@@ -91,7 +89,7 @@ describe('components.CollectionSummary.CollectionSummary', function () {
       }))),
       container = _renderWithValidation2.container;
     var errorChecker = container.children[0];
-    expect(errorChecker.textContent).toContain('errors is an array of length 1');
+    expect(errorChecker.textContent).toContain('queuedErrors is an array of length 1');
     expect(errorChecker.textContent).toContain('testText is required');
   });
   it('should render a confirmation when a SummaryCard\'s delete button is pressed', function () {
@@ -110,80 +108,6 @@ 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 = {
@@ -313,5 +237,41 @@ describe('components.CollectionSummary.CollectionSummary', function () {
         expect(fieldElement).not.toBeNull();
       });
     });
+    it('should correctly render field values in confirmation view with index', function () {
+      var listViewConfig = _objectSpread(_objectSpread({}, CONFIG), {}, {
+        card: _objectSpread(_objectSpread({}, CONFIG.card), {}, {
+          listView: true
+        }),
+        confirmation: {
+          displayFields: ['testText'],
+          // eslint-disable-next-line no-template-curly-in-string
+          message: 'Test confirmation message with index number ${index}'
+        }
+      });
+      var _renderWithValidation10 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
+          config: listViewConfig,
+          formData: FORM_DATA,
+          onAction: ON_ACTION,
+          pages: PAGES
+        })),
+        container = _renderWithValidation10.container,
+        getByText = _renderWithValidation10.getByText;
+      var summary = checkSetup(container);
+      expect(summary.children.length).toEqual(2);
+      var card = summary.children[0];
+      var deleteButton = card.querySelector('.govuk-summary-card__actions li:last-child button');
+      _react2.fireEvent.click(deleteButton);
+      var confirmation = container.querySelector(".".concat(_Confirmation.DEFAULT_CLASS));
+      expect(confirmation).toBeTruthy();
+      listViewConfig.confirmation.displayFields.forEach(function (field) {
+        var fieldValue = FORM_DATA.testCollection[0][field];
+        var fieldElement = getByText(fieldValue);
+        expect(fieldElement).not.toBeNull();
+      });
+
+      // Check if the confirmation message contains the index
+      var confirmationMessage = confirmation.querySelector('h2').textContent;
+      expect(confirmationMessage).toContain("Test confirmation message with index number 1");
+    });
   });
 });

package/dist/components/CollectionSummary/Confirmation.scss

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