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

package/dist/components/CheckYourAnswers/Answer.js

@@ -22,7 +22,7 @@ var Answer = function Answer(_ref) {
     formData = _ref.formData,
     placeholder = _ref.placeholder;
   if (!value) {
-    var placeholderValue = (component === null || component === void 0 ? void 0 : component.cyaPlaceholder) || placeholder;
+    var placeholderValue = Object.prototype.hasOwnProperty.call(component || {}, 'cyaPlaceholder') ? component === null || component === void 0 ? void 0 : component.cyaPlaceholder : placeholder;
     return placeholderValue || /*#__PURE__*/_react.default.createElement(_VisuallyHidden.default, null, "No answer");
   }
   if (!component) {

package/dist/components/CheckYourAnswers/CheckYourAnswers.js

@@ -207,7 +207,9 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
       isGroup: isGroup(page.id)
     }));
   }), !hide_actions && /*#__PURE__*/_react.default.createElement(_PageActions.default, {
-    actions: actions,
+    actions: actions === null || actions === void 0 ? void 0 : actions.filter(function (action) {
+      return _utils.default.Component.show(action, _pages[_pages.length - 1].formData);
+    }),
     onAction: function onAction(action) {
       return _onAction(action);
     }
@@ -223,7 +225,9 @@ CheckYourAnswers.propTypes = {
   noGroupAction: _propTypes.default.bool,
   onAction: _propTypes.default.func.isRequired,
   onRowAction: _propTypes.default.func.isRequired,
-  pages: _propTypes.default.arrayOf(_propTypes.default.shape({})).isRequired,
+  pages: _propTypes.default.arrayOf(_propTypes.default.shape({
+    formData: _propTypes.default.shape({}).isRequired
+  })).isRequired,
   sections: _propTypes.default.arrayOf(_propTypes.default.shape({
     name: _propTypes.default.string.isRequired,
     tasks: _propTypes.default.arrayOf(_propTypes.default.shape({

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

@@ -13,6 +13,8 @@ var _userProfile = _interopRequireDefault(require("../../json/userProfile.json")
 var _groupData = _interopRequireDefault(require("../../json/group.data.json"));
 var _group = _interopRequireDefault(require("../../json/group.json"));
 var _groupOfRow = _interopRequireDefault(require("../../json/groupOfRow.json"));
+var _actions = _interopRequireDefault(require("../../json/actions.json"));
+var _actionsNoSave = _interopRequireDefault(require("../../json/actionsNoSave.json"));
 var _models = require("../../models");
 var _setupTests = require("../../setupTests");
 var _utils = _interopRequireDefault(require("../../utils"));
@@ -673,12 +675,12 @@ describe('components', 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;
+    it('should show a conditional button', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee28() {
+      var GROUP_PAGES, cya, hodsButtonDiv, submitButton, saveButton;
       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, {});
+            GROUP_PAGES = _utils.default.FormPage.getAll(_groupOfRow.default.pages, _groupOfRow.default.components, _objectSpread({}, DATA));
             _context28.next = 3;
             return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee27() {
               return _regeneratorRuntime().wrap(function _callee27$(_context27) {
@@ -686,8 +688,10 @@ describe('components', function () {
                   case 0:
                     (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                       pages: GROUP_PAGES,
+                      onRowAction: ON_ROW_ACTION,
+                      onAction: ON_ACTION,
                       groups: _groupOfRow.default.cya.groups,
-                      optionalFieldPlaceholder: "Not entered"
+                      actions: _actions.default
                     }), container);
                   case 1:
                   case "end":
@@ -695,6 +699,83 @@ describe('components', function () {
                 }
               }, _callee27);
             })));
+          case 3:
+            cya = checkCYA(container);
+            hodsButtonDiv = cya.childNodes[7];
+            expect(hodsButtonDiv.classList).toContain('hods-button-group');
+            submitButton = hodsButtonDiv.childNodes[0];
+            expect(submitButton.tagName).toEqual('BUTTON');
+            expect(submitButton.textContent).toEqual('Submit');
+            saveButton = hodsButtonDiv.childNodes[1];
+            expect(saveButton.tagName).toEqual('BUTTON');
+            expect(saveButton.textContent).toEqual('Save and return later');
+          case 12:
+          case "end":
+            return _context28.stop();
+        }
+      }, _callee28);
+    })));
+    it('should not show a conditional button', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee30() {
+      var GROUP_PAGES, cya, hodsButtonDiv, submitButton, saveButton;
+      return _regeneratorRuntime().wrap(function _callee30$(_context30) {
+        while (1) switch (_context30.prev = _context30.next) {
+          case 0:
+            GROUP_PAGES = _utils.default.FormPage.getAll(_groupOfRow.default.pages, _groupOfRow.default.components, _objectSpread({}, DATA));
+            _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) {
+                  case 0:
+                    (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
+                      pages: GROUP_PAGES,
+                      onRowAction: ON_ROW_ACTION,
+                      onAction: ON_ACTION,
+                      groups: _groupOfRow.default.cya.groups,
+                      actions: _actionsNoSave.default
+                    }), container);
+                  case 1:
+                  case "end":
+                    return _context29.stop();
+                }
+              }, _callee29);
+            })));
+          case 3:
+            cya = checkCYA(container);
+            hodsButtonDiv = cya.childNodes[7];
+            expect(hodsButtonDiv.classList).toContain('hods-button-group');
+            submitButton = hodsButtonDiv.childNodes[0];
+            expect(submitButton.tagName).toEqual('BUTTON');
+            expect(submitButton.textContent).toEqual('Submit');
+            saveButton = hodsButtonDiv.childNodes[1];
+            expect(saveButton).toEqual(undefined);
+          case 11:
+          case "end":
+            return _context30.stop();
+        }
+      }, _callee30);
+    })));
+    it('should render empty optional fields with a placeholder value when provided', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee32() {
+      var GROUP_PAGES, cya, namesGroup, firstNameRow, surname;
+      return _regeneratorRuntime().wrap(function _callee32$(_context32) {
+        while (1) switch (_context32.prev = _context32.next) {
+          case 0:
+            GROUP_PAGES = _utils.default.FormPage.getAll(_groupOfRow.default.pages, _groupOfRow.default.components, {});
+            _context32.next = 3;
+            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: GROUP_PAGES,
+                      groups: _groupOfRow.default.cya.groups,
+                      optionalFieldPlaceholder: "Not entered"
+                    }), container);
+                  case 1:
+                  case "end":
+                    return _context31.stop();
+                }
+              }, _callee31);
+            })));
           case 3:
             cya = checkCYA(container);
             namesGroup = cya.childNodes[2];
@@ -712,14 +793,14 @@ describe('components', function () {
             expect(surname.childNodes[1].tagName).toEqual('DD');
           case 17:
           case "end":
-            return _context28.stop();
+            return _context32.stop();
         }
-      }, _callee28);
+      }, _callee32);
     })));
-    it('should show page components corrently with interpolated title and cya_label, if label is missing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee30() {
+    it('should show page components corrently with interpolated title and cya_label, if label is missing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee34() {
       var _PAGES, _COMPONENTS, T_PAGES, cya, _cya$childNodes7, cyaTitle, cyaChildNode, names, _names$childNodes3, firstName, surname, _firstName$childNodes, label;
-      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:
             _PAGES = [].concat(_userProfile.default.pages); // eslint-disable-next-line no-template-curly-in-string
             _PAGES[0] = _objectSpread(_objectSpread({}, _PAGES[0]), {}, {
@@ -733,10 +814,10 @@ describe('components', function () {
               cya_label: "Text ${currentUser.familyName}"
             });
             T_PAGES = _utils.default.FormPage.getAll(_PAGES, _COMPONENTS, DATA);
-            _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) {
+            _context34.next = 7;
+            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: T_PAGES,
@@ -745,9 +826,9 @@ describe('components', function () {
                     }), container);
                   case 1:
                   case "end":
-                    return _context29.stop();
+                    return _context33.stop();
                 }
-              }, _callee29);
+              }, _callee33);
             })));
           case 7:
             cya = checkCYA(container);
@@ -762,14 +843,14 @@ describe('components', function () {
             checkRow(surname, 'Last name', 'Smith', false);
           case 17:
           case "end":
-            return _context30.stop();
+            return _context34.stop();
         }
-      }, _callee30);
+      }, _callee34);
     })));
-    it('should show page components corrently with no label, if label and cya_label are missing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee32() {
+    it('should show page components corrently with no label, if label and cya_label are missing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee36() {
       var _PAGES, _COMPONENTS, T_PAGES, cya, _cya$childNodes8, cyaChildNode, names, _names$childNodes4, firstName, surname, _firstName$childNodes2, label;
-      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:
             _PAGES = [].concat(_userProfile.default.pages);
             _COMPONENTS = [].concat(_userProfile.default.components);
@@ -779,10 +860,10 @@ describe('components', function () {
               cya_label: undefined
             });
             T_PAGES = _utils.default.FormPage.getAll(_PAGES, _COMPONENTS, _objectSpread({}, DATA));
-            _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) {
+            _context36.next = 6;
+            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: T_PAGES,
@@ -791,9 +872,9 @@ describe('components', function () {
                     }), container);
                   case 1:
                   case "end":
-                    return _context31.stop();
+                    return _context35.stop();
                 }
-              }, _callee31);
+              }, _callee35);
             })));
           case 6:
             cya = checkCYA(container);
@@ -807,14 +888,14 @@ describe('components', function () {
             checkRow(surname, 'Last name', 'Smith', false);
           case 15:
           case "end":
-            return _context32.stop();
+            return _context36.stop();
         }
-      }, _callee32);
+      }, _callee36);
     })));
-    it('should show task list in CYA style and hide pages from skipped tasks', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee34() {
+    it('should show task list in CYA style and hide pages from skipped tasks', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee38() {
       var sections, taskHeading1, namesPageHeading;
-      return _regeneratorRuntime().wrap(function _callee34$(_context34) {
-        while (1) switch (_context34.prev = _context34.next) {
+      return _regeneratorRuntime().wrap(function _callee38$(_context38) {
+        while (1) switch (_context38.prev = _context38.next) {
           case 0:
             sections = [{
               name: 'These are your tasks',
@@ -828,10 +909,10 @@ describe('components', function () {
                 pages: ['grade']
               }]
             }];
-            _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) {
+            _context38.next = 3;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee37() {
+              return _regeneratorRuntime().wrap(function _callee37$(_context37) {
+                while (1) switch (_context37.prev = _context37.next) {
                   case 0:
                     (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                       pages: PAGES,
@@ -843,9 +924,9 @@ describe('components', function () {
                     }), container);
                   case 1:
                   case "end":
-                    return _context33.stop();
+                    return _context37.stop();
                 }
-              }, _callee33);
+              }, _callee37);
             })));
           case 3:
             taskHeading1 = container.childNodes[0].childNodes[0];
@@ -859,21 +940,21 @@ describe('components', function () {
             expect(container.childNodes[0].childNodes.length).toEqual(2); // second task skipped so not shown 
           case 12:
           case "end":
-            return _context34.stop();
+            return _context38.stop();
         }
-      }, _callee34);
+      }, _callee38);
     })));
-    it('Show answers from multiple address fields into in one DL correctly when hideBlankRows is true', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee36() {
+    it('Show answers from multiple address fields into in one DL correctly when hideBlankRows is true', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee40() {
       var ADDRESS_DATA, GROUP_PAGES, cya, groupedComponent, keyGroup, valueGroup, changeButtonDiv, changeButton;
-      return _regeneratorRuntime().wrap(function _callee36$(_context36) {
-        while (1) switch (_context36.prev = _context36.next) {
+      return _regeneratorRuntime().wrap(function _callee40$(_context40) {
+        while (1) switch (_context40.prev = _context40.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));
-            _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) {
+            _context40.next = 4;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee39() {
+              return _regeneratorRuntime().wrap(function _callee39$(_context39) {
+                while (1) switch (_context39.prev = _context39.next) {
                   case 0:
                     (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                       pages: GROUP_PAGES,
@@ -884,9 +965,9 @@ describe('components', function () {
                     }), container);
                   case 1:
                   case "end":
-                    return _context35.stop();
+                    return _context39.stop();
                 }
-              }, _callee35);
+              }, _callee39);
             })));
           case 4:
             cya = checkCYA(container);
@@ -908,9 +989,9 @@ describe('components', function () {
             expect(changeButton.textContent).toEqual('Change address details');
           case 21:
           case "end":
-            return _context36.stop();
+            return _context40.stop();
         }
-      }, _callee36);
+      }, _callee40);
     })));
   });
 });

package/dist/components/CollectionSummary/CollectionSummary.js

@@ -252,7 +252,9 @@ var CollectionSummary = function CollectionSummary(_ref) {
       classModifiers: ['secondary']
     },
     onAction: onAction
-  }), data.map(function (entry, index) {
+  }), /*#__PURE__*/_react.default.createElement("ul", {
+    className: "collection-summary-card-list"
+  }, data.map(function (entry, index) {
     var isInError = errors.filter(function (e) {
       return e.entryId === entry.id;
     }).length > 0;
@@ -260,7 +262,7 @@ var CollectionSummary = function CollectionSummary(_ref) {
       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, {
+    return /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_SummaryCardValidationContext.default, {
       entryId: entry.id,
       topLevelErrors: errors,
       clearTopLevelErrorsForCard: function clearTopLevelErrorsForCard() {
@@ -296,8 +298,8 @@ var CollectionSummary = function CollectionSummary(_ref) {
       inError: errors.filter(function (e) {
         return e.entryId === entry.id;
       }).length > 0
-    }));
-  }), config.card.listView && config.addButton && /*#__PURE__*/_react.default.createElement(_ActionButton.default, {
+    })));
+  })), config.card.listView && config.addButton && /*#__PURE__*/_react.default.createElement(_ActionButton.default, {
     id: "".concat(config.fieldId, ".addButton"),
     action: {
       collection: config.collectionName,

package/dist/components/CollectionSummary/CollectionSummary.scss

@@ -1,5 +1,10 @@
 @import "govuk-frontend/dist/govuk/_base";
 
+.collection-summary-card-list {
+  list-style-type: none;
+  padding-inline-start: 0;
+}
+
 .hods-form-summary-card.hods-form-summary-card--nested {
   box-shadow: none;
   border: none;

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

@@ -57,9 +57,23 @@ describe('components.CollectionSummary.CollectionSummary', function () {
   }];
   var ON_ACTION = function ON_ACTION() {};
   var checkSetup = function checkSetup(container) {
+    var withAddButton = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     var summaryDiv = container.children[0];
     expect(summaryDiv.tagName).toEqual('DIV');
-    return summaryDiv;
+    var cardList = withAddButton ? summaryDiv.children[1] : summaryDiv.children[0];
+    expect(cardList.tagName).toEqual('UL');
+    expect(cardList.classList).toContain('collection-summary-card-list');
+    var cards = Array.from(cardList.children, function (child) {
+      expect(child.tagName).toEqual('LI');
+      return child.children[0] || null;
+    }).filter(function (c) {
+      return !!c;
+    });
+    return {
+      summaryDiv: summaryDiv,
+      cardList: cardList,
+      cards: cards
+    };
   };
   it('should correctly render a CollectionSummary component', function () {
     var _renderWithValidation = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
@@ -68,10 +82,11 @@ describe('components.CollectionSummary.CollectionSummary', function () {
         onAction: ON_ACTION
       })),
       container = _renderWithValidation.container;
-    var summary = checkSetup(container);
-    expect(summary.children.length).toEqual(2);
-    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));
+    var _checkSetup = checkSetup(container),
+      cards = _checkSetup.cards;
+    expect(cards.length).toEqual(2);
+    expect(cards[0].id).toEqual("".concat(CONFIG.fieldId, ".summaryCard").concat(FORM_DATA.testCollection[0].id));
+    expect(cards[1].id).toEqual("".concat(CONFIG.fieldId, ".summaryCard").concat(FORM_DATA.testCollection[1].id));
   });
   it('should focus on the most recently duplicated item', function () {
     var customConfig = {
@@ -145,14 +160,16 @@ describe('components.CollectionSummary.CollectionSummary', function () {
         onAction: ON_ACTION
       })),
       container = _renderWithValidation4.container;
-    var summary = checkSetup(container);
-    expect(summary.children.length).toEqual(2);
-    var card = summary.children[0];
+    var _checkSetup2 = checkSetup(container),
+      summaryDiv = _checkSetup2.summaryDiv,
+      cards = _checkSetup2.cards;
+    expect(cards.length).toEqual(2);
+    var card = cards[0];
     var deleteButton = card.children[0].children[1].children[0];
     _react2.fireEvent.click(deleteButton, {});
-    expect(summary.children.length).toEqual(3); // Now with a confirmation.
-    expect(summary.children[0].id).toEqual("".concat(CONFIG.fieldId, ".confirmation"));
-    expect(summary.children[0].classList).toContain(_Confirmation.DEFAULT_CLASS);
+    expect(summaryDiv.children.length).toEqual(2); // Now with a confirmation.
+    expect(summaryDiv.children[0].id).toEqual("".concat(CONFIG.fieldId, ".confirmation"));
+    expect(summaryDiv.children[0].classList).toContain(_Confirmation.DEFAULT_CLASS);
   });
   describe('Add Another button', function () {
     it('should render with an Add button if one is configured', function () {
@@ -174,11 +191,12 @@ describe('components.CollectionSummary.CollectionSummary', function () {
           onAction: ON_ACTION
         })),
         container = _renderWithValidation5.container;
-      var summary = checkSetup(container);
-      expect(summary.children.length).toEqual(3); // The button and a card for each item.
-      expect(summary.children[0].id).toEqual("".concat(CONFIG_WITH_BUTTON.fieldId, ".addButton"));
-      expect(summary.children[0].textContent).toEqual(CONFIG_WITH_BUTTON.addButton.label);
-      expect(summary.children[0].tagName).toEqual('BUTTON');
+      var _checkSetup3 = checkSetup(container, true),
+        summaryDiv = _checkSetup3.summaryDiv;
+      expect(summaryDiv.children.length).toEqual(2); // The button and card list.
+      expect(summaryDiv.children[0].id).toEqual("".concat(CONFIG_WITH_BUTTON.fieldId, ".addButton"));
+      expect(summaryDiv.children[0].textContent).toEqual(CONFIG_WITH_BUTTON.addButton.label);
+      expect(summaryDiv.children[0].tagName).toEqual('BUTTON');
     });
     it('should use the default button label if none is provided', function () {
       var CONFIG_WITH_BUTTON = {
@@ -198,11 +216,12 @@ describe('components.CollectionSummary.CollectionSummary', function () {
           onAction: ON_ACTION
         })),
         container = _renderWithValidation6.container;
-      var summary = checkSetup(container);
-      expect(summary.children.length).toEqual(3); // The button and a card for each item.
-      expect(summary.children[0].id).toEqual("".concat(CONFIG_WITH_BUTTON.fieldId, ".addButton"));
-      expect(summary.children[0].textContent).toEqual(_CollectionSummary.DEFAULT_ADD_BUTTON_LABEL);
-      expect(summary.children[0].tagName).toEqual('BUTTON');
+      var _checkSetup4 = checkSetup(container, true),
+        summaryDiv = _checkSetup4.summaryDiv;
+      expect(summaryDiv.children.length).toEqual(2); // The button and card list.
+      expect(summaryDiv.children[0].id).toEqual("".concat(CONFIG_WITH_BUTTON.fieldId, ".addButton"));
+      expect(summaryDiv.children[0].textContent).toEqual(_CollectionSummary.DEFAULT_ADD_BUTTON_LABEL);
+      expect(summaryDiv.children[0].tagName).toEqual('BUTTON');
     });
     it('should apply the expected class name to the summary card when delete button is pressed', function () {
       var _renderWithValidation7 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
@@ -211,9 +230,10 @@ describe('components.CollectionSummary.CollectionSummary', function () {
           onAction: ON_ACTION
         })),
         container = _renderWithValidation7.container;
-      var summary = checkSetup(container);
-      expect(summary.children.length).toEqual(2);
-      var card = summary.children[0];
+      var _checkSetup5 = checkSetup(container),
+        cards = _checkSetup5.cards;
+      expect(cards.length).toEqual(2);
+      var card = cards[0];
       var deleteButton = card.children[0].children[1].children[0];
       _react2.fireEvent.click(deleteButton, {});
       var confirmation = container.querySelector(".".concat(_Confirmation.DEFAULT_CLASS));
@@ -227,9 +247,10 @@ describe('components.CollectionSummary.CollectionSummary', function () {
           onAction: ON_ACTION
         })),
         container = _renderWithValidation8.container;
-      var summary = checkSetup(container);
-      expect(summary.children.length).toEqual(2);
-      var card = summary.children[0];
+      var _checkSetup6 = checkSetup(container),
+        cards = _checkSetup6.cards;
+      expect(cards.length).toEqual(2);
+      var card = cards[0];
       var deleteButton = card.children[0].children[1].children[0];
       _react2.fireEvent.click(deleteButton, {});
       var confirmButton = container.querySelector(".".concat(_Confirmation.DEFAULT_CLASS, " button.hods-button--warning"));
@@ -243,9 +264,10 @@ describe('components.CollectionSummary.CollectionSummary', function () {
           onAction: ON_ACTION
         })),
         container = _renderWithValidation9.container;
-      var summary = checkSetup(container);
-      expect(summary.children.length).toEqual(2);
-      var card = summary.children[0];
+      var _checkSetup7 = checkSetup(container),
+        cards = _checkSetup7.cards;
+      expect(cards.length).toEqual(2);
+      var card = cards[0];
       var deleteButton = card.children[0].children[1].children[0];
       _react2.fireEvent.click(deleteButton, {});
       var confirmation = container.querySelector(".".concat(_Confirmation.DEFAULT_CLASS));
@@ -270,9 +292,10 @@ describe('components.CollectionSummary.CollectionSummary', function () {
         })),
         container = _renderWithValidation10.container,
         getByText = _renderWithValidation10.getByText;
-      var summary = checkSetup(container);
-      expect(summary.children.length).toEqual(2);
-      var card = summary.children[0];
+      var _checkSetup8 = checkSetup(container),
+        cards = _checkSetup8.cards;
+      expect(cards.length).toEqual(2);
+      var card = cards[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));
@@ -302,9 +325,10 @@ describe('components.CollectionSummary.CollectionSummary', function () {
         })),
         container = _renderWithValidation11.container,
         getByText = _renderWithValidation11.getByText;
-      var summary = checkSetup(container);
-      expect(summary.children.length).toEqual(2);
-      var card = summary.children[0];
+      var _checkSetup9 = checkSetup(container),
+        cards = _checkSetup9.cards;
+      expect(cards.length).toEqual(2);
+      var card = cards[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));

package/dist/components/CollectionSummary/RenderListView.js

@@ -35,7 +35,8 @@ var RenderListView = function RenderListView(_ref) {
     onFullEdit = _ref.onFullEdit,
     onDelete = _ref.onDelete,
     masterPage = _ref.masterPage,
-    classModifiers = _ref.classModifiers;
+    classModifiers = _ref.classModifiers,
+    optionalFieldPlaceholder = _ref.optionalFieldPlaceholder;
   var classes = _copReactComponents.Utils.classBuilder(DEFAULT_CLASS, classModifiers);
   var listClass = _copReactComponents.Utils.classBuilder(DEFAULT_LIST_CLASS);
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -95,7 +96,7 @@ var RenderListView = function RenderListView(_ref) {
           if (!component) {
             return null;
           }
-          return (0, _getSummaryListRowForDetails.default)(childPage, component, listClass, entryData);
+          return (0, _getSummaryListRowForDetails.default)(childPage, component, listClass, entryData, optionalFieldPlaceholder);
         });
       }
       return null;
@@ -128,9 +129,11 @@ RenderListView.propTypes = {
       components: _propTypes.default.arrayOf(_propTypes.default.shape())
     })).isRequired
   }).isRequired,
-  classModifiers: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)])
+  classModifiers: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  optionalFieldPlaceholder: _propTypes.default.string
 };
 RenderListView.defaultProps = {
-  classModifiers: null
+  classModifiers: null,
+  optionalFieldPlaceholder: null
 };
 var _default = exports.default = RenderListView;

package/dist/components/CollectionSummary/SummaryCard.js

@@ -47,7 +47,7 @@ var DEFAULT_DUPLICATE_BUTTON_LABEL = exports.DEFAULT_DUPLICATE_BUTTON_LABEL = 'D
 var DEFAULT_DETAILS_TITLE = exports.DEFAULT_DETAILS_TITLE = 'Full details';
 var DEFAULT_CHANGE_BUTTON_CLASS = exports.DEFAULT_CHANGE_BUTTON_CLASS = 'secondary';
 var SummaryCard = function SummaryCard(_ref) {
-  var _config$changeAction2, _config$changeAction3, _config$changeAction4, _config$deleteAction, _config$deleteAction2, _config$duplicateActi, _config$duplicateActi2, _config$fullDetails;
+  var _config$changeAction2, _config$changeAction3, _config$changeAction4, _config$deleteAction, _config$deleteAction2, _config$duplicateActi, _config$duplicateActi2, _config$fullDetails2;
   var id = _ref.id,
     entryData = _ref.entryData,
     config = _ref.config,
@@ -148,6 +148,7 @@ var SummaryCard = function SummaryCard(_ref) {
 
   // To render summary card in list view as per https://design-system.service.gov.uk/components/summary-list
   if (config.listView) {
+    var _config$fullDetails;
     return /*#__PURE__*/_react.default.createElement(_RenderListView.default, {
       id: id,
       entryData: entryData,
@@ -155,7 +156,8 @@ var SummaryCard = function SummaryCard(_ref) {
       onFullEdit: onFullEdit,
       onDelete: onDelete,
       masterPage: masterPage,
-      classModifiers: classModifiers
+      classModifiers: classModifiers,
+      optionalFieldPlaceholder: (_config$fullDetails = config.fullDetails) === null || _config$fullDetails === void 0 ? void 0 : _config$fullDetails.optionalFieldPlaceholder
     });
   }
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -169,7 +171,7 @@ var SummaryCard = function SummaryCard(_ref) {
     id: "BannerStrip".concat(entryData.id),
     banners: config.banners,
     formData: entryData
-  }), /*#__PURE__*/_react.default.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement("h2", {
     id: "".concat(id, ".titleText"),
     className: classes('header-content-title')
   }, _utils.default.FormPage.getTitle(config.title, entryData)), config.details && /*#__PURE__*/_react.default.createElement("div", {
@@ -234,7 +236,7 @@ var SummaryCard = function SummaryCard(_ref) {
     childCollections: childCollections,
     formData: formData,
     entryData: entryData,
-    optionalFieldPlaceholder: ((_config$fullDetails = config.fullDetails) === null || _config$fullDetails === void 0 ? void 0 : _config$fullDetails.optionalFieldPlaceholder) || ''
+    optionalFieldPlaceholder: (_config$fullDetails2 = config.fullDetails) === null || _config$fullDetails2 === void 0 ? void 0 : _config$fullDetails2.optionalFieldPlaceholder
   }))));
 };
 SummaryCard.propTypes = {