@ukhomeoffice/cop-react-form-renderer 5.83.2 → 5.84.0

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.placeholder) || 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({
+    placeholder: _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',
+              placeholder: '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.placeholder);
+          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
           })
         });
       });
@@ -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

@@ -673,10 +673,53 @@ describe('components', function () {
         }
       }, _callee26);
     })));
-    it('should show page components corrently with interpolated title and cya_label, if label is missing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee28() {
-      var _PAGES, _COMPONENTS, T_PAGES, cya, _cya$childNodes7, cyaTitle, cyaChildNode, names, _names$childNodes3, firstName, surname, _firstName$childNodes, label;
+    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 _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]), {}, {
@@ -690,10 +733,10 @@ describe('components', function () {
               cya_label: "Text ${currentUser.familyName}"
             });
             T_PAGES = _utils.default.FormPage.getAll(_PAGES, _COMPONENTS, DATA);
-            _context28.next = 7;
-            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee27() {
-              return _regeneratorRuntime().wrap(function _callee27$(_context27) {
-                while (1) switch (_context27.prev = _context27.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,
@@ -702,9 +745,9 @@ describe('components', function () {
                     }), container);
                   case 1:
                   case "end":
-                    return _context27.stop();
+                    return _context29.stop();
                 }
-              }, _callee27);
+              }, _callee29);
             })));
           case 7:
             cya = checkCYA(container);
@@ -719,14 +762,14 @@ describe('components', function () {
             checkRow(surname, 'Last name', 'Smith', false);
           case 17:
           case "end":
-            return _context28.stop();
+            return _context30.stop();
         }
-      }, _callee28);
+      }, _callee30);
     })));
-    it('should show page components corrently with no label, if label and cya_label are missing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee30() {
+    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 _callee30$(_context30) {
-        while (1) switch (_context30.prev = _context30.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);
@@ -736,10 +779,10 @@ describe('components', function () {
               cya_label: undefined
             });
             T_PAGES = _utils.default.FormPage.getAll(_PAGES, _COMPONENTS, _objectSpread({}, DATA));
-            _context30.next = 6;
-            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee29() {
-              return _regeneratorRuntime().wrap(function _callee29$(_context29) {
-                while (1) switch (_context29.prev = _context29.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,
@@ -748,9 +791,9 @@ describe('components', function () {
                     }), container);
                   case 1:
                   case "end":
-                    return _context29.stop();
+                    return _context31.stop();
                 }
-              }, _callee29);
+              }, _callee31);
             })));
           case 6:
             cya = checkCYA(container);
@@ -764,14 +807,14 @@ describe('components', function () {
             checkRow(surname, 'Last name', 'Smith', false);
           case 15:
           case "end":
-            return _context30.stop();
+            return _context32.stop();
         }
-      }, _callee30);
+      }, _callee32);
     })));
-    it('should show task list in CYA style and hide pages from skipped tasks', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee32() {
+    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 _callee32$(_context32) {
-        while (1) switch (_context32.prev = _context32.next) {
+      return _regeneratorRuntime().wrap(function _callee34$(_context34) {
+        while (1) switch (_context34.prev = _context34.next) {
           case 0:
             sections = [{
               name: 'These are your tasks',
@@ -785,10 +828,10 @@ describe('components', function () {
                 pages: ['grade']
               }]
             }];
-            _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) {
+            _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,
@@ -800,9 +843,9 @@ describe('components', function () {
                     }), container);
                   case 1:
                   case "end":
-                    return _context31.stop();
+                    return _context33.stop();
                 }
-              }, _callee31);
+              }, _callee33);
             })));
           case 3:
             taskHeading1 = container.childNodes[0].childNodes[0];
@@ -816,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 _context32.stop();
+            return _context34.stop();
         }
-      }, _callee32);
+      }, _callee34);
     })));
-    it('Show answers from multiple address fields into in one DL correctly when hideBlankRows is true', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee34() {
+    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 _callee34$(_context34) {
-        while (1) switch (_context34.prev = _context34.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));
-            _context34.next = 4;
-            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee33() {
-              return _regeneratorRuntime().wrap(function _callee33$(_context33) {
-                while (1) switch (_context33.prev = _context33.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,
@@ -841,9 +884,9 @@ describe('components', function () {
                     }), container);
                   case 1:
                   case "end":
-                    return _context33.stop();
+                    return _context35.stop();
                 }
-              }, _callee33);
+              }, _callee35);
             })));
           case 4:
             cya = checkCYA(container);
@@ -865,9 +908,9 @@ describe('components', function () {
             expect(changeButton.textContent).toEqual('Change address details');
           case 21:
           case "end":
-            return _context34.stop();
+            return _context36.stop();
         }
-      }, _callee34);
+      }, _callee36);
     })));
   });
 });

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;
+  var _config$changeAction2, _config$changeAction3, _config$changeAction4, _config$deleteAction, _config$deleteAction2, _config$duplicateActi, _config$duplicateActi2, _config$fullDetails;
   var id = _ref.id,
     entryData = _ref.entryData,
     config = _ref.config,
@@ -233,7 +233,8 @@ var SummaryCard = function SummaryCard(_ref) {
     masterPage: masterPage,
     childCollections: childCollections,
     formData: formData,
-    entryData: entryData
+    entryData: entryData,
+    optionalFieldPlaceholder: ((_config$fullDetails = config.fullDetails) === null || _config$fullDetails === void 0 ? void 0 : _config$fullDetails.optionalFieldPlaceholder) || ''
   }))));
 };
 SummaryCard.propTypes = {
@@ -268,7 +269,10 @@ SummaryCard.propTypes = {
     }),
     detailsTitle: _propTypes.default.string,
     listView: _propTypes.default.bool,
-    focusOn: _propTypes.default.bool
+    focusOn: _propTypes.default.bool,
+    fullDetails: _propTypes.default.shape({
+      optionalFieldPlaceholder: _propTypes.default.string
+    })
   }).isRequired,
   masterPage: _propTypes.default.shape({
     childPages: _propTypes.default.arrayOf(_propTypes.default.shape({

package/dist/components/CollectionSummary/SummaryCardDetails.js

@@ -33,7 +33,8 @@ var SummaryCardDetails = function SummaryCardDetails(_ref) {
     formData = _ref.formData,
     entryData = _ref.entryData,
     classModifiers = _ref.classModifiers,
-    hideChildSectionTitles = _ref.hideChildSectionTitles;
+    hideChildSectionTitles = _ref.hideChildSectionTitles,
+    optionalFieldPlaceholder = _ref.optionalFieldPlaceholder;
   var classes = _utils.default.classBuilder(DEFAULT_CLASS, classModifiers);
   var childMasterPages = (0, _react.useMemo)(function () {
     return childCollections.map(function (childName) {
@@ -74,7 +75,7 @@ var SummaryCardDetails = function SummaryCardDetails(_ref) {
               var modEntry = _objectSpread(_objectSpread({}, entryData), _defineProperty({}, subComponent.fieldId, (_entryData$component$ = entryData[component.fieldId]) === null || _entryData$component$ === void 0 ? void 0 : _entryData$component$[subComponent.fieldId]));
               return (0, _getSummaryListRowForDetails.default)(childPage, _objectSpread(_objectSpread({}, subComponent), {
                 label: subComponent.key
-              }), classes, modEntry);
+              }), classes, modEntry, optionalFieldPlaceholder);
             }));
           }
           if (component.type === _models.ComponentTypes.COLLECTION) {
@@ -82,6 +83,7 @@ var SummaryCardDetails = function SummaryCardDetails(_ref) {
               formData: _objectSpread(_objectSpread({}, childPage.formData), entryData)
             }), component, entryData[component.id]);
             rowIndex += 1;
+            var collectionHeadingIndex = 0;
             return /*#__PURE__*/_react.default.createElement("div", {
               key: fieldId,
               className: classes('field'),
@@ -93,9 +95,21 @@ var SummaryCardDetails = function SummaryCardDetails(_ref) {
               var _entryData$component$2;
               // Put value for current subComponent at the top level
               var modEntry = _objectSpread(_objectSpread({}, entryData), _defineProperty({}, subComponent.fieldId, (_entryData$component$2 = entryData[component.fieldId]) === null || _entryData$component$2 === void 0 ? void 0 : _entryData$component$2[subComponent.fieldId]));
-              return (0, _getSummaryListRowForDetails.default)(childPage, _objectSpread(_objectSpread({}, subComponent), {
+              var rowContent = (0, _getSummaryListRowForDetails.default)(childPage, _objectSpread(_objectSpread({}, subComponent), {
                 label: subComponent.key
-              }), classes, modEntry);
+              }), classes, modEntry, optionalFieldPlaceholder);
+              // Because collections are flat, we need to identify the subsequent titles (2, 3, 4... etc) in order to apply appropriate spacing
+              if (subComponent.type === 'title') {
+                collectionHeadingIndex += 1;
+                if (collectionHeadingIndex > 1) {
+                  return /*#__PURE__*/_react.default.createElement("div", {
+                    style: {
+                      marginTop: '40px'
+                    }
+                  }, rowContent);
+                }
+              }
+              return rowContent;
             }));
           }
           rowIndex += 1;
@@ -106,7 +120,7 @@ var SummaryCardDetails = function SummaryCardDetails(_ref) {
               '--column': columnIndex + 1,
               '--row': rowIndex
             }
-          }, (0, _getSummaryListRowForDetails.default)(childPage, component, classes, entryData));
+          }, (0, _getSummaryListRowForDetails.default)(childPage, component, classes, entryData, optionalFieldPlaceholder));
         });
       }).filter(function (e) {
         return !!e;
@@ -187,11 +201,13 @@ SummaryCardDetails.propTypes = {
   formData: _propTypes.default.shape({}).isRequired,
   entryData: _propTypes.default.shape({}).isRequired,
   classModifiers: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
-  hideChildSectionTitles: _propTypes.default.bool
+  hideChildSectionTitles: _propTypes.default.bool,
+  optionalFieldPlaceholder: _propTypes.default.string
 };
 SummaryCardDetails.defaultProps = {
   childCollections: [],
   classModifiers: null,
-  hideChildSectionTitles: false
+  hideChildSectionTitles: false,
+  optionalFieldPlaceholder: null
 };
 var _default = exports.default = SummaryCardDetails;

package/dist/utils/CheckYourAnswers/getSummaryListRowForDetails.js

@@ -16,7 +16,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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); } // Local imports
-var getSummaryListRowForDetails = function getSummaryListRowForDetails(page, component, customClasses, entryData) {
+var getSummaryListRowForDetails = function getSummaryListRowForDetails(page, component, customClasses, entryData, optionalFieldPlaceholder) {
   var modifiedPage = _objectSpread(_objectSpread({}, page), {}, {
     formData: _objectSpread(_objectSpread({}, page.formData), entryData)
   });
@@ -31,7 +31,8 @@ var getSummaryListRowForDetails = function getSummaryListRowForDetails(page, com
       value: /*#__PURE__*/_react.default.createElement(_Answer.default, {
         value: row.value || component.value,
         component: row.component,
-        formData: modifiedPage.formData
+        formData: modifiedPage.formData,
+        placeholder: optionalFieldPlaceholder
       }),
       required: row.required
     },

package/dist/utils/CheckYourAnswers/getSummaryListRowForDetails.test.js

@@ -1,41 +1,56 @@
 "use strict";
 
-var _getCYARowsForPage = _interopRequireDefault(require("./getCYARowsForPage"));
+var _getSummaryListRowForDetails = _interopRequireDefault(require("./getSummaryListRowForDetails"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-describe('utils.CheckYourAnswers.getCYARowsForPage', function () {
+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); }
+describe('utils.CheckYourAnswers.getSummaryListRowForDetails', function () {
   var COMPONENT_A = {
     type: 'text',
     id: 'a',
     fieldId: 'a',
     label: 'Alpha'
   };
-  var COMPONENT_B = {
-    type: 'text',
-    id: 'b',
-    fieldId: 'b',
-    label: 'Bravo'
+  var TITLE = {
+    type: 'title',
+    key: 'Bravo'
   };
   var PAGE = {
     id: 'page',
-    components: [COMPONENT_A, COMPONENT_B],
+    components: [COMPONENT_A],
     formData: {
-      a: 'Alpha Value',
-      b: 'Bravo Value'
+      a: 'Alpha Value'
     }
   };
-  var ON_ACTION = function ON_ACTION() {};
-  it('should get rows for a page with readonly text components', function () {
-    var rows = (0, _getCYARowsForPage.default)(PAGE, ON_ACTION);
-    expect(rows.length).toEqual(2);
-    expect(rows[0]).toEqual(expect.objectContaining({
-      fieldId: COMPONENT_A.fieldId,
-      key: COMPONENT_A.label,
-      value: 'Alpha Value'
-    }));
-    expect(rows[1]).toEqual(expect.objectContaining({
-      fieldId: COMPONENT_B.fieldId,
-      key: COMPONENT_B.label,
-      value: 'Bravo Value'
-    }));
+  it('should get a summary list row for a component', function () {
+    var row = (0, _getSummaryListRowForDetails.default)(PAGE, COMPONENT_A, null, {});
+    expect(row.props.row.key).toEqual(COMPONENT_A.label);
+    expect(row.props.row.value.props).toMatchObject({
+      component: COMPONENT_A,
+      value: PAGE.formData[COMPONENT_A.fieldId]
+    });
+  });
+  it('should get a summary list title row for a component with a type of title', function () {
+    var row = (0, _getSummaryListRowForDetails.default)(PAGE, TITLE, null, {});
+    expect(row.props.title).toEqual(TITLE.key);
+  });
+  it('should use a placeholder value for empty optional fields if one is provided', function () {
+    var CUSTOM_PAGE = _objectSpread(_objectSpread({}, PAGE), {}, {
+      components: [{
+        type: 'text',
+        fieldId: 'componentA',
+        label: 'Component A',
+        required: false
+      }]
+    });
+    var summaryListRow = (0, _getSummaryListRowForDetails.default)(CUSTOM_PAGE, CUSTOM_PAGE.components[0], null, {}, 'Not entered');
+    expect(summaryListRow.props.row.key).toEqual('Component A');
+    expect(summaryListRow.props.row.value.props).toMatchObject({
+      placeholder: 'Not entered'
+    });
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "5.83.2",
+  "version": "5.84.0",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",