@ukhomeoffice/cop-react-form-renderer 5.62.2 → 5.65.0

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.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,21 @@ 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 _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; }
@@ -55,10 +58,15 @@ var CollectionSummary = function CollectionSummary(_ref) {
     onAction = _ref.onAction,
     onChange = _ref.onChange,
     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,15 +106,13 @@ 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;
+    if (queuedErrors.length > 0) {
+      dequeueErrors(function (e) {
+        return e.raisedBy === config.id;
       });
-      clearErrors();
     }
     var allErrors = [];
     data.forEach(function (entry) {
@@ -119,25 +125,25 @@ var CollectionSummary = function CollectionSummary(_ref) {
         });
       });
       var allPagesErrors = (childPages === null || childPages === void 0 ? void 0 : childPages.flatMap(function (page) {
-        return _utils.default.Validate.page(page);
+        var pageErrors = _utils.default.Validate.page(page);
+        return hooks.onValidate(page, pageErrors);
       })) || [];
       // 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
+          entryId: entry.id,
+          showFor: config.id,
+          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
+    // 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,22 +153,35 @@ 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) || []);
+    _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 parentCollection = 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.
@@ -216,7 +235,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 +268,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 +288,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 +302,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 +345,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,

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/RenderListView.js

@@ -31,7 +31,7 @@ var RenderListView = function RenderListView(_ref) {
   var id = _ref.id,
     entryData = _ref.entryData,
     config = _ref.config,
-    onChange = _ref.onChange,
+    onFullEdit = _ref.onFullEdit,
     onDelete = _ref.onDelete,
     masterPage = _ref.masterPage,
     classModifiers = _ref.classModifiers;
@@ -50,21 +50,22 @@ var RenderListView = function RenderListView(_ref) {
     className: classes('actions')
   }, /*#__PURE__*/_react.default.createElement("li", {
     className: classes('action')
-  }, config.changeAction && typeof onChange === 'function' && /*#__PURE__*/_react.default.createElement("div", {
+  }, config.changeAction && typeof onFullEdit === 'function' && /*#__PURE__*/_react.default.createElement("div", {
     className: "govuk-link",
     onClick: function onClick() {
-      return onChange(config.changeAction.page, entryData.id);
+      return onFullEdit(config.changeAction.page, entryData.id);
     },
     onKeyDown: function onKeyDown(e) {
       if (e.key === 'Enter' || e.key === ' ') {
-        onChange(config.changeAction.page, entryData.id);
+        onFullEdit(config.changeAction.page, entryData.id);
       }
     },
     role: "button",
     tabIndex: 0,
     style: {
       cursor: 'pointer'
-    }
+    },
+    "aria-label": config.changeAction.label
   }, config.changeAction.label || DEFAULT_CHANGE_BUTTON_LABEL)), /*#__PURE__*/_react.default.createElement("li", {
     className: classes('action')
   }, config.deleteAction && typeof onDelete === 'function' && /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
@@ -72,7 +73,8 @@ var RenderListView = function RenderListView(_ref) {
     onClick: function onClick() {
       return onDelete(entryData);
     },
-    classModifiers: config.deleteAction.classModifiers || DEFAULT_DELETE_BUTTON_CLASS
+    classModifiers: config.deleteAction.classModifiers || DEFAULT_DELETE_BUTTON_CLASS,
+    "aria-label": config.deleteAction.label
   }, config.deleteAction.label || DEFAULT_DELETE_BUTTON_LABEL)))), /*#__PURE__*/_react.default.createElement("div", {
     className: classes('content')
   }, /*#__PURE__*/_react.default.createElement("dl", {
@@ -117,7 +119,7 @@ RenderListView.propTypes = {
     }),
     listView: _propTypes.default.bool
   }).isRequired,
-  onChange: _propTypes.default.func.isRequired,
+  onFullEdit: _propTypes.default.func.isRequired,
   onDelete: _propTypes.default.func.isRequired,
   masterPage: _propTypes.default.shape({
     childPages: _propTypes.default.arrayOf(_propTypes.default.shape({

package/dist/components/CollectionSummary/RenderListView.scss

@@ -179,6 +179,10 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
 .govuk-summary-card {
   @include govuk-responsive-margin(6, "bottom");
   border: 1px solid $govuk-border-colour;
+
+  &--deleting-summary-card {
+    background-color: #FCF0EE;
+  }
 }
 
 .govuk-summary-card__title-wrapper {

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

@@ -114,7 +114,7 @@ describe('components.CollectionSummary.RenderListView', function () {
         id: ID,
         entryData: ENTRY,
         config: CONFIG,
-        onChange: ON_CHANGE,
+        onFullEdit: ON_CHANGE,
         onDelete: ON_DELETE,
         masterPage: MASTER_PAGE,
         getComponentRow: getComponentRow
@@ -155,7 +155,7 @@ describe('components.CollectionSummary.RenderListView', function () {
         id: ID,
         entryData: ENTRY,
         config: CONFIG,
-        onChange: ON_CHANGE,
+        onFullEdit: ON_CHANGE,
         onDelete: ON_DELETE,
         masterPage: MASTER_PAGE,
         getComponentRow: getComponentRow
@@ -184,18 +184,23 @@ describe('components.CollectionSummary.RenderListView', function () {
           id: ID,
           entryData: ENTRY,
           config: CONFIG,
-          onChange: ON_CHANGE,
+          onFullEdit: ON_CHANGE,
           onDelete: ON_DELETE,
           masterPage: MASTER_PAGE,
           getComponentRow: getComponentRow
         })),
-        container = _renderWithValidation3.container;
+        container = _renderWithValidation3.container,
+        queryByRole = _renderWithValidation3.queryByRole;
       var listViewDiv = container.querySelector('.govuk-summary-card');
       expect(listViewDiv).not.toBeNull();
 
       // Check for change button
       var changeLink = listViewDiv.querySelector('.govuk-link');
       expect(changeLink.textContent).toEqual(CONFIG.changeAction.label);
+      var changeButton = queryByRole('button', {
+        name: CONFIG.changeAction.label
+      });
+      expect(changeButton).toBeTruthy();
       _react.fireEvent.click(changeLink, {});
       expect(onChangeCalls).toEqual(1);
       expect(onChangeArgs[0]).toMatchObject({
@@ -206,6 +211,10 @@ describe('components.CollectionSummary.RenderListView', function () {
       // Check for delete button
       var deleteButton = listViewDiv.querySelector('[id$=".deleteButton"]');
       expect(deleteButton.textContent).toEqual(CONFIG.deleteAction.label);
+      var deleteButtonElement = queryByRole('button', {
+        name: CONFIG.deleteAction.label
+      });
+      expect(deleteButtonElement).toBeTruthy();
       _react.fireEvent.click(deleteButton, {});
       expect(onDeleteCalls).toEqual(1);
       expect(onDeleteArgs[0]).toEqual(ENTRY);