@ukhomeoffice/cop-react-form-renderer 6.6.1 → 6.11.1

package/dist/components/CheckYourAnswers/Answer.js

@@ -19,9 +19,11 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 var Answer = function Answer(_ref) {
   var value = _ref.value,
     component = _ref.component,
-    formData = _ref.formData;
+    formData = _ref.formData,
+    placeholder = _ref.placeholder;
   if (!value) {
-    return /*#__PURE__*/_react.default.createElement(_VisuallyHidden.default, null, "No answer");
+    var placeholderValue = (component === null || component === void 0 ? void 0 : component.cyaPlaceholder) || placeholder;
+    return placeholderValue || /*#__PURE__*/_react.default.createElement(_VisuallyHidden.default, null, "No answer");
   }
   if (!component) {
     return Object.prototype.hasOwnProperty.call(value, 'label') ? value.label : value;
@@ -36,13 +38,17 @@ var Answer = function Answer(_ref) {
   });
 };
 Answer.propTypes = {
-  component: _propTypes.default.shape({}),
+  component: _propTypes.default.shape({
+    cyaPlaceholder: _propTypes.default.string
+  }),
   formData: _propTypes.default.shape({}),
-  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.shape({})])
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.shape({})]),
+  placeholder: _propTypes.default.string
 };
 Answer.defaultProps = {
   component: null,
   formData: null,
-  value: null
+  value: null,
+  placeholder: null
 };
 var _default = exports.default = Answer;

package/dist/components/CheckYourAnswers/Answer.test.js

@@ -75,31 +75,84 @@ describe('components', function () {
         }
       }, _callee3);
     })));
-    it('should handle a null component and an object value', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
-      var VALUE, COMPONENT, _renderWithValidation4, container;
+    it('should show a placeholder value for components without a value', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
+      var VALUE, PLACEHOLDER, COMPONENT, _renderWithValidation4, container, answer;
       return _regeneratorRuntime().wrap(function _callee4$(_context4) {
         while (1) switch (_context4.prev = _context4.next) {
+          case 0:
+            VALUE = '';
+            PLACEHOLDER = 'Not entered';
+            COMPONENT = {
+              id: 'alpha',
+              fieldId: 'alpha',
+              type: 'text',
+              label: 'Alpha'
+            };
+            _renderWithValidation4 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_Answer.default, {
+              value: VALUE,
+              component: COMPONENT,
+              placeholder: PLACEHOLDER
+            })), container = _renderWithValidation4.container;
+            answer = container.childNodes[0];
+            expect(answer.textContent).toEqual(PLACEHOLDER);
+          case 6:
+          case "end":
+            return _context4.stop();
+        }
+      }, _callee4);
+    })));
+    it('should use a component\'s placeholder value if one is defined', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
+      var VALUE, GLOBAL_PLACEHOLDER, COMPONENT, _renderWithValidation5, container, answer;
+      return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+        while (1) switch (_context5.prev = _context5.next) {
+          case 0:
+            VALUE = '';
+            GLOBAL_PLACEHOLDER = 'Not entered';
+            COMPONENT = {
+              id: 'alpha',
+              fieldId: 'alpha',
+              type: 'text',
+              label: 'Alpha',
+              cyaPlaceholder: 'Alpha not entered'
+            };
+            _renderWithValidation5 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_Answer.default, {
+              value: VALUE,
+              component: COMPONENT,
+              placeholder: GLOBAL_PLACEHOLDER
+            })), container = _renderWithValidation5.container;
+            answer = container.childNodes[0];
+            expect(answer.textContent).toEqual(COMPONENT.cyaPlaceholder);
+          case 6:
+          case "end":
+            return _context5.stop();
+        }
+      }, _callee5);
+    })));
+    it('should handle a null component and an object value', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
+      var VALUE, COMPONENT, _renderWithValidation6, container;
+      return _regeneratorRuntime().wrap(function _callee6$(_context6) {
+        while (1) switch (_context6.prev = _context6.next) {
           case 0:
             VALUE = {
               label: 'A label',
               value: 'a_value'
             };
             COMPONENT = null;
-            _renderWithValidation4 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_Answer.default, {
+            _renderWithValidation6 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_Answer.default, {
               value: VALUE,
               component: COMPONENT
-            })), container = _renderWithValidation4.container;
+            })), container = _renderWithValidation6.container;
             expect(container.textContent).toEqual(VALUE.label);
           case 4:
           case "end":
-            return _context4.stop();
+            return _context6.stop();
         }
-      }, _callee4);
+      }, _callee6);
     })));
-    it('should handle a component that requires interpolation', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
-      var VALUE, DATA, COMPONENT, _renderWithValidation5, container, answer;
-      return _regeneratorRuntime().wrap(function _callee5$(_context5) {
-        while (1) switch (_context5.prev = _context5.next) {
+    it('should handle a component that requires interpolation', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7() {
+      var VALUE, DATA, COMPONENT, _renderWithValidation7, container, answer;
+      return _regeneratorRuntime().wrap(function _callee7$(_context7) {
+        while (1) switch (_context7.prev = _context7.next) {
           case 0:
             VALUE = 'beta';
             DATA = {
@@ -119,20 +172,20 @@ describe('components', function () {
                 }]
               }
             };
-            _renderWithValidation5 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_Answer.default, {
+            _renderWithValidation7 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_Answer.default, {
               value: VALUE,
               component: COMPONENT,
               formData: DATA
-            })), container = _renderWithValidation5.container;
+            })), container = _renderWithValidation7.container;
             answer = container.childNodes[0];
             expect(answer.tagName).toEqual('DIV');
             expect(answer.classList).toContain(_Readonly.DEFAULT_CLASS);
             expect(answer.textContent).toEqual('hardcoded delta');
           case 8:
           case "end":
-            return _context5.stop();
+            return _context7.stop();
         }
-      }, _callee5);
+      }, _callee7);
     })));
   });
 });

package/dist/components/CheckYourAnswers/CheckYourAnswers.js

@@ -51,7 +51,8 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
     groups = _ref.groups,
     sections = _ref.sections,
     type = _ref.type,
-    hideBlankRows = _ref.hideBlankRows;
+    hideBlankRows = _ref.hideBlankRows,
+    optionalFieldPlaceholder = _ref.optionalFieldPlaceholder;
   var _useState = (0, _react.useState)([]),
     _useState2 = _slicedToArray(_useState, 2),
     pages = _useState2[0],
@@ -73,7 +74,8 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
             key: "".concat(pageIndex, "_").concat(index),
             value: row.value,
             component: row.component,
-            formData: page.formData
+            formData: page.formData,
+            placeholder: optionalFieldPlaceholder
           })
         });
       });
@@ -165,7 +167,7 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
       });
       return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
         key: taskIndex
-      }, /*#__PURE__*/_react.default.createElement(_copReactComponents.MediumHeading, null, filterPages.length > 0 && task.displayName || task.name), filterPages.map(function (page, pageIndex) {
+      }, /*#__PURE__*/_react.default.createElement(_copReactComponents.MediumHeading, null, filterPages.length > 0 && (task.displayName || task.name)), filterPages.map(function (page, pageIndex) {
         var hideActionButtons = isGroup(page.id) || noChangeAction;
         var showHeading = !hide_page_titles && page.title && !isGroup(page.id);
         return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
@@ -233,7 +235,8 @@ CheckYourAnswers.propTypes = {
   summaryListClassModifiers: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
   title: _propTypes.default.string,
   type: _propTypes.default.string,
-  hideBlankRows: _propTypes.default.bool
+  hideBlankRows: _propTypes.default.bool,
+  optionalFieldPlaceholder: _propTypes.default.string
 };
 CheckYourAnswers.defaultProps = {
   actions: [],
@@ -247,6 +250,7 @@ CheckYourAnswers.defaultProps = {
   summaryListClassModifiers: null,
   title: DEFAULT_TITLE,
   type: null,
-  hideBlankRows: false
+  hideBlankRows: false,
+  optionalFieldPlaceholder: null
 };
 var _default = exports.default = CheckYourAnswers;

package/dist/components/CheckYourAnswers/CheckYourAnswers.test.js

@@ -527,23 +527,37 @@ describe('components', function () {
         }
       }, _callee20);
     })));
-    it('Show answers from multiple address fields into in one DL', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee22() {
-      var ADDRESS_DATA, GROUP_PAGES, cya, groupedComponent, keyGroup, valueGroup, changeButtonDiv, changeButton;
+    it('should show task list in CYA style and not show sections without any pages', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee22() {
+      var sections, taskHeading1, taskHeading2;
       return _regeneratorRuntime().wrap(function _callee22$(_context22) {
         while (1) switch (_context22.prev = _context22.next) {
           case 0:
-            ADDRESS_DATA = _utils.default.Data.setupForm(_group.default.pages, _group.default.components, _groupData.default);
-            GROUP_PAGES = _utils.default.FormPage.getAll(_group.default.pages, _group.default.components, _objectSpread({}, ADDRESS_DATA));
-            _context22.next = 4;
+            sections = [{
+              name: 'These are your tasks',
+              tasks: [{
+                name: 'Task 1',
+                displayName: 'Blue',
+                state: 'complete',
+                pages: []
+              }, {
+                name: 'Task 2',
+                displayName: 'Red',
+                state: 'complete',
+                pages: ['grade']
+              }]
+            }];
+            _context22.next = 3;
             return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee21() {
               return _regeneratorRuntime().wrap(function _callee21$(_context21) {
                 while (1) switch (_context21.prev = _context21.next) {
                   case 0:
                     (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
-                      pages: GROUP_PAGES,
+                      pages: PAGES,
                       onRowAction: ON_ROW_ACTION,
                       onAction: ON_ACTION,
-                      hide_title: true
+                      hide_title: true,
+                      sections: sections,
+                      type: "task-list-cya"
                     }), container);
                   case 1:
                   case "end":
@@ -551,6 +565,41 @@ describe('components', function () {
                 }
               }, _callee21);
             })));
+          case 3:
+            taskHeading1 = container.childNodes[0].childNodes[0];
+            expect(taskHeading1.textContent).toEqual('');
+            taskHeading2 = container.childNodes[0].childNodes[1];
+            expect(taskHeading2.textContent).toEqual('Red');
+          case 7:
+          case "end":
+            return _context22.stop();
+        }
+      }, _callee22);
+    })));
+    it('Show answers from multiple address fields into in one DL', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee24() {
+      var ADDRESS_DATA, GROUP_PAGES, cya, groupedComponent, keyGroup, valueGroup, changeButtonDiv, changeButton;
+      return _regeneratorRuntime().wrap(function _callee24$(_context24) {
+        while (1) switch (_context24.prev = _context24.next) {
+          case 0:
+            ADDRESS_DATA = _utils.default.Data.setupForm(_group.default.pages, _group.default.components, _groupData.default);
+            GROUP_PAGES = _utils.default.FormPage.getAll(_group.default.pages, _group.default.components, _objectSpread({}, ADDRESS_DATA));
+            _context24.next = 4;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee23() {
+              return _regeneratorRuntime().wrap(function _callee23$(_context23) {
+                while (1) switch (_context23.prev = _context23.next) {
+                  case 0:
+                    (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
+                      pages: GROUP_PAGES,
+                      onRowAction: ON_ROW_ACTION,
+                      onAction: ON_ACTION,
+                      hide_title: true
+                    }), container);
+                  case 1:
+                  case "end":
+                    return _context23.stop();
+                }
+              }, _callee23);
+            })));
           case 4:
             cya = checkCYA(container);
             groupedComponent = cya.childNodes[10];
@@ -571,20 +620,20 @@ describe('components', function () {
             expect(changeButton.textContent).toEqual('Change address details');
           case 21:
           case "end":
-            return _context22.stop();
+            return _context24.stop();
         }
-      }, _callee22);
+      }, _callee24);
     })));
-    it('should render a group with one action button', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee24() {
+    it('should render a group with one action button', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee26() {
       var GROUP_PAGES, cya, namesGroup, firstNameRow, surname, changeButtonDiv, changeButton;
-      return _regeneratorRuntime().wrap(function _callee24$(_context24) {
-        while (1) switch (_context24.prev = _context24.next) {
+      return _regeneratorRuntime().wrap(function _callee26$(_context26) {
+        while (1) switch (_context26.prev = _context26.next) {
           case 0:
             GROUP_PAGES = _utils.default.FormPage.getAll(_groupOfRow.default.pages, _groupOfRow.default.components, _objectSpread({}, DATA));
-            _context24.next = 3;
-            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee23() {
-              return _regeneratorRuntime().wrap(function _callee23$(_context23) {
-                while (1) switch (_context23.prev = _context23.next) {
+            _context26.next = 3;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee25() {
+              return _regeneratorRuntime().wrap(function _callee25$(_context25) {
+                while (1) switch (_context25.prev = _context25.next) {
                   case 0:
                     (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                       pages: GROUP_PAGES,
@@ -594,9 +643,9 @@ describe('components', function () {
                     }), container);
                   case 1:
                   case "end":
-                    return _context23.stop();
+                    return _context25.stop();
                 }
-              }, _callee23);
+              }, _callee25);
             })));
           case 3:
             cya = checkCYA(container);
@@ -620,14 +669,57 @@ describe('components', function () {
             expect(changeButton.textContent).toEqual('Change names');
           case 22:
           case "end":
-            return _context24.stop();
+            return _context26.stop();
         }
-      }, _callee24);
+      }, _callee26);
     })));
-    it('should show page components corrently with interpolated title and cya_label, if label is missing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee26() {
+    it('should render empty optional fields with a placeholder value when provided', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee28() {
+      var GROUP_PAGES, cya, namesGroup, firstNameRow, surname;
+      return _regeneratorRuntime().wrap(function _callee28$(_context28) {
+        while (1) switch (_context28.prev = _context28.next) {
+          case 0:
+            GROUP_PAGES = _utils.default.FormPage.getAll(_groupOfRow.default.pages, _groupOfRow.default.components, {});
+            _context28.next = 3;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee27() {
+              return _regeneratorRuntime().wrap(function _callee27$(_context27) {
+                while (1) switch (_context27.prev = _context27.next) {
+                  case 0:
+                    (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
+                      pages: GROUP_PAGES,
+                      groups: _groupOfRow.default.cya.groups,
+                      optionalFieldPlaceholder: "Not entered"
+                    }), container);
+                  case 1:
+                  case "end":
+                    return _context27.stop();
+                }
+              }, _callee27);
+            })));
+          case 3:
+            cya = checkCYA(container);
+            namesGroup = cya.childNodes[2];
+            firstNameRow = namesGroup.childNodes[0].childNodes[0];
+            expect(firstNameRow.childNodes.length).toEqual(2);
+            expect(firstNameRow.childNodes[0].textContent).toEqual('First name (optional)');
+            expect(firstNameRow.childNodes[0].tagName).toEqual('DT');
+            expect(firstNameRow.childNodes[1].textContent).toEqual('Not entered');
+            expect(firstNameRow.childNodes[1].tagName).toEqual('DD');
+            surname = namesGroup.childNodes[0].childNodes[1];
+            expect(surname.childNodes.length).toEqual(2);
+            expect(surname.childNodes[0].textContent).toEqual('Last name (optional)');
+            expect(surname.childNodes[0].tagName).toEqual('DT');
+            expect(surname.childNodes[1].textContent).toEqual('Not entered');
+            expect(surname.childNodes[1].tagName).toEqual('DD');
+          case 17:
+          case "end":
+            return _context28.stop();
+        }
+      }, _callee28);
+    })));
+    it('should show page components corrently with interpolated title and cya_label, if label is missing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee30() {
       var _PAGES, _COMPONENTS, T_PAGES, cya, _cya$childNodes7, cyaTitle, cyaChildNode, names, _names$childNodes3, firstName, surname, _firstName$childNodes, label;
-      return _regeneratorRuntime().wrap(function _callee26$(_context26) {
-        while (1) switch (_context26.prev = _context26.next) {
+      return _regeneratorRuntime().wrap(function _callee30$(_context30) {
+        while (1) switch (_context30.prev = _context30.next) {
           case 0:
             _PAGES = [].concat(_userProfile.default.pages); // eslint-disable-next-line no-template-curly-in-string
             _PAGES[0] = _objectSpread(_objectSpread({}, _PAGES[0]), {}, {
@@ -641,10 +733,10 @@ describe('components', function () {
               cya_label: "Text ${currentUser.familyName}"
             });
             T_PAGES = _utils.default.FormPage.getAll(_PAGES, _COMPONENTS, DATA);
-            _context26.next = 7;
-            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee25() {
-              return _regeneratorRuntime().wrap(function _callee25$(_context25) {
-                while (1) switch (_context25.prev = _context25.next) {
+            _context30.next = 7;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee29() {
+              return _regeneratorRuntime().wrap(function _callee29$(_context29) {
+                while (1) switch (_context29.prev = _context29.next) {
                   case 0:
                     (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                       pages: T_PAGES,
@@ -653,9 +745,9 @@ describe('components', function () {
                     }), container);
                   case 1:
                   case "end":
-                    return _context25.stop();
+                    return _context29.stop();
                 }
-              }, _callee25);
+              }, _callee29);
             })));
           case 7:
             cya = checkCYA(container);
@@ -670,14 +762,14 @@ describe('components', function () {
             checkRow(surname, 'Last name', 'Smith', false);
           case 17:
           case "end":
-            return _context26.stop();
+            return _context30.stop();
         }
-      }, _callee26);
+      }, _callee30);
     })));
-    it('should show page components corrently with no label, if label and cya_label are missing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee28() {
+    it('should show page components corrently with no label, if label and cya_label are missing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee32() {
       var _PAGES, _COMPONENTS, T_PAGES, cya, _cya$childNodes8, cyaChildNode, names, _names$childNodes4, firstName, surname, _firstName$childNodes2, label;
-      return _regeneratorRuntime().wrap(function _callee28$(_context28) {
-        while (1) switch (_context28.prev = _context28.next) {
+      return _regeneratorRuntime().wrap(function _callee32$(_context32) {
+        while (1) switch (_context32.prev = _context32.next) {
           case 0:
             _PAGES = [].concat(_userProfile.default.pages);
             _COMPONENTS = [].concat(_userProfile.default.components);
@@ -687,10 +779,10 @@ describe('components', function () {
               cya_label: undefined
             });
             T_PAGES = _utils.default.FormPage.getAll(_PAGES, _COMPONENTS, _objectSpread({}, DATA));
-            _context28.next = 6;
-            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee27() {
-              return _regeneratorRuntime().wrap(function _callee27$(_context27) {
-                while (1) switch (_context27.prev = _context27.next) {
+            _context32.next = 6;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee31() {
+              return _regeneratorRuntime().wrap(function _callee31$(_context31) {
+                while (1) switch (_context31.prev = _context31.next) {
                   case 0:
                     (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                       pages: T_PAGES,
@@ -699,9 +791,9 @@ describe('components', function () {
                     }), container);
                   case 1:
                   case "end":
-                    return _context27.stop();
+                    return _context31.stop();
                 }
-              }, _callee27);
+              }, _callee31);
             })));
           case 6:
             cya = checkCYA(container);
@@ -715,14 +807,14 @@ describe('components', function () {
             checkRow(surname, 'Last name', 'Smith', false);
           case 15:
           case "end":
-            return _context28.stop();
+            return _context32.stop();
         }
-      }, _callee28);
+      }, _callee32);
     })));
-    it('should show task list in CYA style and hide pages from skipped tasks', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee30() {
+    it('should show task list in CYA style and hide pages from skipped tasks', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee34() {
       var sections, taskHeading1, namesPageHeading;
-      return _regeneratorRuntime().wrap(function _callee30$(_context30) {
-        while (1) switch (_context30.prev = _context30.next) {
+      return _regeneratorRuntime().wrap(function _callee34$(_context34) {
+        while (1) switch (_context34.prev = _context34.next) {
           case 0:
             sections = [{
               name: 'These are your tasks',
@@ -736,10 +828,10 @@ describe('components', function () {
                 pages: ['grade']
               }]
             }];
-            _context30.next = 3;
-            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee29() {
-              return _regeneratorRuntime().wrap(function _callee29$(_context29) {
-                while (1) switch (_context29.prev = _context29.next) {
+            _context34.next = 3;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee33() {
+              return _regeneratorRuntime().wrap(function _callee33$(_context33) {
+                while (1) switch (_context33.prev = _context33.next) {
                   case 0:
                     (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                       pages: PAGES,
@@ -751,9 +843,9 @@ describe('components', function () {
                     }), container);
                   case 1:
                   case "end":
-                    return _context29.stop();
+                    return _context33.stop();
                 }
-              }, _callee29);
+              }, _callee33);
             })));
           case 3:
             taskHeading1 = container.childNodes[0].childNodes[0];
@@ -767,21 +859,21 @@ describe('components', function () {
             expect(container.childNodes[0].childNodes.length).toEqual(2); // second task skipped so not shown 
           case 12:
           case "end":
-            return _context30.stop();
+            return _context34.stop();
         }
-      }, _callee30);
+      }, _callee34);
     })));
-    it('Show answers from multiple address fields into in one DL correctly when hideBlankRows is true', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee32() {
+    it('Show answers from multiple address fields into in one DL correctly when hideBlankRows is true', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee36() {
       var ADDRESS_DATA, GROUP_PAGES, cya, groupedComponent, keyGroup, valueGroup, changeButtonDiv, changeButton;
-      return _regeneratorRuntime().wrap(function _callee32$(_context32) {
-        while (1) switch (_context32.prev = _context32.next) {
+      return _regeneratorRuntime().wrap(function _callee36$(_context36) {
+        while (1) switch (_context36.prev = _context36.next) {
           case 0:
             ADDRESS_DATA = _utils.default.Data.setupForm(_group.default.pages, _group.default.components, _groupData.default);
             GROUP_PAGES = _utils.default.FormPage.getAll(_group.default.pages, _group.default.components, _objectSpread({}, ADDRESS_DATA));
-            _context32.next = 4;
-            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee31() {
-              return _regeneratorRuntime().wrap(function _callee31$(_context31) {
-                while (1) switch (_context31.prev = _context31.next) {
+            _context36.next = 4;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee35() {
+              return _regeneratorRuntime().wrap(function _callee35$(_context35) {
+                while (1) switch (_context35.prev = _context35.next) {
                   case 0:
                     (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                       pages: GROUP_PAGES,
@@ -792,9 +884,9 @@ describe('components', function () {
                     }), container);
                   case 1:
                   case "end":
-                    return _context31.stop();
+                    return _context35.stop();
                 }
-              }, _callee31);
+              }, _callee35);
             })));
           case 4:
             cya = checkCYA(container);
@@ -816,9 +908,9 @@ describe('components', function () {
             expect(changeButton.textContent).toEqual('Change address details');
           case 21:
           case "end":
-            return _context32.stop();
+            return _context36.stop();
         }
-      }, _callee32);
+      }, _callee36);
     })));
   });
 });

package/dist/components/CollectionSummary/CollectionSummary.js

@@ -76,6 +76,15 @@ var CollectionSummary = function CollectionSummary(_ref) {
   var data = (0, _react.useMemo)(function () {
     return _utils.default.CollectionPage.getData(config.collectionName, formData) || [];
   }, [formData]);
+  var toFocusOn = Array.isArray(data) && data.length > 0 ? data.reduce(function (acc, current) {
+    if (current.isDuplicate) {
+      if (!acc || current.id > acc.id) {
+        return current;
+      }
+      return acc;
+    }
+    return acc;
+  }, null) : null;
   var masterPage = (0, _react.useMemo)(function () {
     var collectionNameParts = config.collectionName.split('.');
     var childPages = _utils.default.CollectionPage.mergePages(pages || []) || [];
@@ -247,7 +256,9 @@ var CollectionSummary = function CollectionSummary(_ref) {
     var isInError = errors.filter(function (e) {
       return e.entryId === entry.id;
     }).length > 0;
-    var finalConfig = _objectSpread(_objectSpread(_objectSpread({}, config.card), entry.isDuplicate && config.duplicatedCard ? config.duplicatedCard : {}), isInError && config.errorCard ? config.errorCard : {});
+    var finalConfig = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, config.card), entry.isDuplicate && config.duplicatedCard ? config.duplicatedCard : {}), isInError && config.errorCard ? config.errorCard : {}), {}, {
+      focusOn: (toFocusOn === null || toFocusOn === void 0 ? void 0 : toFocusOn.id) === entry.id
+    });
     var key = "".concat(config.fieldId, ".summaryCard").concat(entry.id);
     return /*#__PURE__*/_react.default.createElement(_SummaryCardValidationContext.default, {
       entryId: entry.id,
@@ -293,7 +304,10 @@ var CollectionSummary = function CollectionSummary(_ref) {
       label: config.addButton.label || DEFAULT_ADD_BUTTON_LABEL,
       page: config.addButton.page,
       type: _PageAction.PageActionTypes.COLLECTION_ADD,
-      classModifiers: ['secondary']
+      classModifiers: ['secondary'],
+      customAction: {
+        type: config.addButton.customAction
+      }
     },
     onAction: onAction
   }));
@@ -305,7 +319,10 @@ CollectionSummary.propTypes = {
     collectionName: _propTypes.default.string.isRequired,
     addButton: _propTypes.default.shape({
       label: _propTypes.default.string,
-      page: _propTypes.default.string.isRequired
+      page: _propTypes.default.string.isRequired,
+      customAction: _propTypes.default.shape({
+        type: _propTypes.default.string
+      })
     }),
     card: _propTypes.default.shape({
       banners: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.shape({})])),