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

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

@@ -1,6 +1,7 @@
 "use strict";
 
 var _react = require("@testing-library/react");
+require("@testing-library/jest-dom/extend-expect");
 var _react2 = _interopRequireDefault(require("react"));
 var _copReactComponents = require("@ukhomeoffice/cop-react-components");
 var _testUtils = require("react-dom/test-utils");
@@ -582,6 +583,62 @@ describe('components.CollectionSummary.SummaryCard', function () {
         headerActionDiv = _checkSetup18.headerActionDiv;
       expect(headerActionDiv.children.length).toEqual(0);
     });
+    it('should focus on the most recently duplicated item', function () {
+      var entryData = {
+        id: ID,
+        isDuplicate: true
+      };
+      var config = {
+        duplicateAction: {
+          label: 'Duplicate Label',
+          aria_label: 'Duplicate Aria Label'
+        }
+      };
+      var onDuplicate = jest.fn();
+      var _renderWithValidation20 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
+          id: ID,
+          entryData: entryData,
+          config: config,
+          onDuplicate: onDuplicate,
+          parentCollectionName: "parent",
+          pages: [],
+          formData: {},
+          hideDetails: true,
+          masterPage: {
+            childPages: []
+          }
+        })),
+        getByTestId = _renderWithValidation20.getByTestId;
+      var updatedConfig = {
+        focusOn: true,
+        quickEdit: true
+      };
+
+      // Rerender the component with updated config
+      var _renderWithValidation21 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
+          id: ID,
+          entryData: entryData,
+          config: updatedConfig,
+          parentCollectionName: "parent",
+          pages: [],
+          formData: {},
+          hideDetails: true,
+          masterPage: {
+            childPages: []
+          }
+        })),
+        getByTestIdRerender = _renderWithValidation21.getByTestId;
+
+      // check that focus isn't on the initial component
+      var initialComponent = getByTestId('duplicate-button');
+      expect(initialComponent).toBeInTheDocument();
+      expect(initialComponent).not.toHaveFocus();
+
+      // check that the focus is on the newly duplicated component
+      var DuplicatedComponent = getByTestIdRerender('quickedit-button');
+      expect(DuplicatedComponent).toBeInTheDocument();
+      expect(DuplicatedComponent).toHaveFocus();
+    });
   });
   describe('Quick Edit action button', function () {
     var CONFIG = {
@@ -611,7 +668,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
       }
     }];
     it('should render correctly', function () {
-      var _renderWithValidation20 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
+      var _renderWithValidation22 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
           id: ID,
           entryData: ENTRY,
           config: CONFIG,
@@ -621,7 +678,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
             childPages: PAGES
           }
         })),
-        container = _renderWithValidation20.container;
+        container = _renderWithValidation22.container;
       var _checkSetup19 = checkSetup(container),
         headerActionDiv = _checkSetup19.headerActionDiv;
       expect(headerActionDiv.children.length).toEqual(1);
@@ -652,7 +709,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
     });
 
     it('should not render when no config is provided for it', function () {
-      var _renderWithValidation21 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
+      var _renderWithValidation23 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
           id: ID,
           entryData: ENTRY,
           config: {},
@@ -662,7 +719,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
             childPages: PAGES
           }
         })),
-        container = _renderWithValidation21.container;
+        container = _renderWithValidation23.container;
       var _checkSetup20 = checkSetup(container),
         headerActionDiv = _checkSetup20.headerActionDiv;
       expect(headerActionDiv.children.length).toEqual(0);
@@ -707,7 +764,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
         entryId: '123',
         error: 'top-level error message'
       }];
-      var _renderWithValidation22 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCardValidationContext.default, {
+      var _renderWithValidation24 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCardValidationContext.default, {
           entryId: CUSTOM_ENTRY.id,
           topLevelErrors: TOP_LEVEL_ERRORS
         }, /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
@@ -720,7 +777,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
             childPages: PAGES
           }
         }))),
-        container = _renderWithValidation22.container;
+        container = _renderWithValidation24.container;
       var _checkSetup21 = checkSetup(container),
         headerActionDiv = _checkSetup21.headerActionDiv;
       expect(headerActionDiv.children.length).toEqual(1);
@@ -742,7 +799,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
       expect(errorSummary.textContent).toContain(TOP_LEVEL_ERRORS[0].error);
     });
     it('should only show errors from validation when it happens, ignoring top-level errors', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
-      var TOP_LEVEL_ERRORS, _renderWithValidation23, container, _checkSetup22, headerActionDiv, editButton, quickEdit, errorSummary, component, componentInput, quickEditButtons, saveButton;
+      var TOP_LEVEL_ERRORS, _renderWithValidation25, container, _checkSetup22, headerActionDiv, editButton, quickEdit, errorSummary, component, componentInput, quickEditButtons, saveButton;
       return _regeneratorRuntime().wrap(function _callee3$(_context3) {
         while (1) switch (_context3.prev = _context3.next) {
           case 0:
@@ -751,7 +808,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
               entryId: '123',
               error: 'top-level error message'
             }];
-            _renderWithValidation23 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCardValidationContext.default, {
+            _renderWithValidation25 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCardValidationContext.default, {
               entryId: CUSTOM_ENTRY.id,
               topLevelErrors: TOP_LEVEL_ERRORS
             }, /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
@@ -764,7 +821,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
                 childPages: PAGES
               },
               onQuickEdit: function onQuickEdit() {}
-            }))), container = _renderWithValidation23.container;
+            }))), container = _renderWithValidation25.container;
             _checkSetup22 = checkSetup(container), headerActionDiv = _checkSetup22.headerActionDiv;
             expect(headerActionDiv.children.length).toEqual(1);
 
@@ -864,7 +921,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
       }
     }];
     it('should render correctly', function () {
-      var _renderWithValidation24 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
+      var _renderWithValidation26 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
           id: ID,
           entryData: ENTRY,
           config: CONFIG,
@@ -874,7 +931,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
             childPages: PAGES
           }
         })),
-        container = _renderWithValidation24.container;
+        container = _renderWithValidation26.container;
       var _checkSetup23 = checkSetup(container),
         headerActionDiv = _checkSetup23.headerActionDiv;
       expect(headerActionDiv.children.length).toEqual(1);
@@ -910,7 +967,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
           return ON_SUBMIT_CALLS.push(patch);
         }
       };
-      var _renderWithValidation25 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
+      var _renderWithValidation27 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
           id: ID,
           entryData: ENTRY,
           config: CONFIG,
@@ -922,7 +979,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
         }), {
           hooks: hooks
         }),
-        container = _renderWithValidation25.container;
+        container = _renderWithValidation27.container;
       var _checkSetup24 = checkSetup(container),
         headerActionDiv = _checkSetup24.headerActionDiv;
 
@@ -938,7 +995,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
       expect(ON_SUBMIT_CALLS.length).toEqual(0);
     });
     it('should return after local validation if errors are present', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
-      var ON_SUBMIT_CALLS, hooks, ON_QUICK_EDIT_CALLS, ON_QUICK_EDIT, _renderWithValidation26, container, _checkSetup25, headerActionDiv, editButton, quickEdit, component, componentInput, quickEditButtons, saveButton;
+      var ON_SUBMIT_CALLS, hooks, ON_QUICK_EDIT_CALLS, ON_QUICK_EDIT, _renderWithValidation28, container, _checkSetup25, headerActionDiv, editButton, quickEdit, component, componentInput, quickEditButtons, saveButton;
       return _regeneratorRuntime().wrap(function _callee6$(_context6) {
         while (1) switch (_context6.prev = _context6.next) {
           case 0:
@@ -953,7 +1010,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
               var target = _ref5.target;
               ON_QUICK_EDIT_CALLS.push(target);
             };
-            _renderWithValidation26 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
+            _renderWithValidation28 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
               id: ID,
               entryData: _objectSpread(_objectSpread({}, ENTRY), {}, {
                 index: 0
@@ -971,7 +1028,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
               }
             }), {
               hooks: hooks
-            }), container = _renderWithValidation26.container;
+            }), container = _renderWithValidation28.container;
             _checkSetup25 = checkSetup(container), headerActionDiv = _checkSetup25.headerActionDiv;
             editButton = headerActionDiv.children[0];
             _react.fireEvent.click(editButton, {});
@@ -1019,7 +1076,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
       }, _callee6);
     })));
     it('should run hook validation when local validation is passed', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee8() {
-      var ON_SUBMIT_CALLS, hooks, ON_QUICK_EDIT_CALLS, ON_QUICK_EDIT, _renderWithValidation27, container, _checkSetup26, headerActionDiv, editButton, quickEdit, component, componentInput, quickEditButtons, saveButton;
+      var ON_SUBMIT_CALLS, hooks, ON_QUICK_EDIT_CALLS, ON_QUICK_EDIT, _renderWithValidation29, container, _checkSetup26, headerActionDiv, editButton, quickEdit, component, componentInput, quickEditButtons, saveButton;
       return _regeneratorRuntime().wrap(function _callee8$(_context8) {
         while (1) switch (_context8.prev = _context8.next) {
           case 0:
@@ -1038,7 +1095,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
               var target = _ref9.target;
               ON_QUICK_EDIT_CALLS.push(target);
             };
-            _renderWithValidation27 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
+            _renderWithValidation29 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
               id: ID,
               entryData: ENTRY,
               config: CONFIG,
@@ -1054,7 +1111,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
               }
             }), {
               hooks: hooks
-            }), container = _renderWithValidation27.container;
+            }), container = _renderWithValidation29.container;
             _checkSetup26 = checkSetup(container), headerActionDiv = _checkSetup26.headerActionDiv;
             editButton = headerActionDiv.children[0];
             _react.fireEvent.click(editButton, {});
@@ -1092,7 +1149,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
       }, _callee8);
     })));
     it('should apply changes if no errors are present', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee10() {
-      var ON_SUBMIT_CALLS, hooks, ON_QUICK_EDIT_CALLS, ON_QUICK_EDIT, _renderWithValidation28, container, _checkSetup27, headerActionDiv, editButton, quickEdit, component, componentInput, quickEditButtons, saveButton;
+      var ON_SUBMIT_CALLS, hooks, ON_QUICK_EDIT_CALLS, ON_QUICK_EDIT, _renderWithValidation30, container, _checkSetup27, headerActionDiv, editButton, quickEdit, component, componentInput, quickEditButtons, saveButton;
       return _regeneratorRuntime().wrap(function _callee10$(_context10) {
         while (1) switch (_context10.prev = _context10.next) {
           case 0:
@@ -1107,7 +1164,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
               var target = _ref12.target;
               ON_QUICK_EDIT_CALLS.push(target);
             };
-            _renderWithValidation28 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCardValidationContext.default, {
+            _renderWithValidation30 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCardValidationContext.default, {
               entryId: "id",
               topLevelErrors: [],
               clearTopLevelErrorsForCard: function clearTopLevelErrorsForCard() {}
@@ -1130,7 +1187,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
               }
             })), {
               hooks: hooks
-            }), container = _renderWithValidation28.container;
+            }), container = _renderWithValidation30.container;
             _checkSetup27 = checkSetup(container), headerActionDiv = _checkSetup27.headerActionDiv;
             editButton = headerActionDiv.children[0];
             _react.fireEvent.click(editButton, {});
@@ -1169,7 +1226,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
       }, _callee10);
     })));
     it('should remove the isDuplicate flag on a sucessful quick edit', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee12() {
-      var ON_SUBMIT_CALLS, hooks, ON_QUICK_EDIT_CALLS, ON_QUICK_EDIT, _renderWithValidation29, container, _checkSetup28, headerActionDiv, editButton, quickEdit, component, componentInput, quickEditButtons, saveButton;
+      var ON_SUBMIT_CALLS, hooks, ON_QUICK_EDIT_CALLS, ON_QUICK_EDIT, _renderWithValidation31, container, _checkSetup28, headerActionDiv, editButton, quickEdit, component, componentInput, quickEditButtons, saveButton;
       return _regeneratorRuntime().wrap(function _callee12$(_context12) {
         while (1) switch (_context12.prev = _context12.next) {
           case 0:
@@ -1184,7 +1241,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
               var target = _ref15.target;
               ON_QUICK_EDIT_CALLS.push(target);
             };
-            _renderWithValidation29 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCardValidationContext.default, {
+            _renderWithValidation31 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCardValidationContext.default, {
               entryId: "id",
               topLevelErrors: [],
               clearTopLevelErrorsForCard: function clearTopLevelErrorsForCard() {}
@@ -1208,7 +1265,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
               }
             })), {
               hooks: hooks
-            }), container = _renderWithValidation29.container;
+            }), container = _renderWithValidation31.container;
             _checkSetup28 = checkSetup(container), headerActionDiv = _checkSetup28.headerActionDiv;
             editButton = headerActionDiv.children[0];
             _react.fireEvent.click(editButton, {});
@@ -1255,7 +1312,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
         title: 'Title',
         details: DETAILS
       };
-      var _renderWithValidation30 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
+      var _renderWithValidation32 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
           id: ID,
           entryData: ENTRY,
           config: CONFIG,
@@ -1266,7 +1323,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
             childPages: []
           }
         })),
-        container = _renderWithValidation30.container;
+        container = _renderWithValidation32.container;
       var _checkSetup29 = checkSetup(container),
         headerContentDiv = _checkSetup29.headerContentDiv;
       var headerDetails = headerContentDiv.children[1];
@@ -1293,7 +1350,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
           }]
         }]
       };
-      var _renderWithValidation31 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
+      var _renderWithValidation33 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
           id: ID,
           entryData: _objectSpread(_objectSpread({}, ENTRY), {}, {
             field: true
@@ -1306,7 +1363,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
             childPages: []
           }
         })),
-        container = _renderWithValidation31.container;
+        container = _renderWithValidation33.container;
       var _checkSetup30 = checkSetup(container),
         headerContentDiv = _checkSetup30.headerContentDiv;
       var headerDetails = headerContentDiv.children[1];
@@ -1319,7 +1376,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
         title: 'Title',
         details: ''
       };
-      var _renderWithValidation32 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
+      var _renderWithValidation34 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
           id: ID,
           entryData: ENTRY,
           config: CONFIG,
@@ -1330,7 +1387,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
             childPages: []
           }
         })),
-        container = _renderWithValidation32.container;
+        container = _renderWithValidation34.container;
       var _checkSetup31 = checkSetup(container),
         headerContentDiv = _checkSetup31.headerContentDiv;
       // If no details are provided, we expect only the header title to be rendered.
@@ -1347,7 +1404,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
         title: 'Title',
         details: DETAILS
       };
-      var _renderWithValidation33 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
+      var _renderWithValidation35 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
           id: ID,
           entryData: INTERPOLATED_ENTRY,
           config: CONFIG,
@@ -1358,7 +1415,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
             childPages: []
           }
         })),
-        container = _renderWithValidation33.container;
+        container = _renderWithValidation35.container;
       var _checkSetup32 = checkSetup(container),
         headerContentDiv = _checkSetup32.headerContentDiv;
       var headerDetails = headerContentDiv.children[1];
@@ -1369,7 +1426,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
       var CONFIG = {
         title: 'Title'
       };
-      var _renderWithValidation34 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
+      var _renderWithValidation36 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
           id: ID,
           entryData: ENTRY,
           config: CONFIG,
@@ -1380,7 +1437,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
             childPages: []
           }
         })),
-        container = _renderWithValidation34.container;
+        container = _renderWithValidation36.container;
       var _checkSetup33 = checkSetup(container),
         headerContentDiv = _checkSetup33.headerContentDiv;
       var headerDetails = headerContentDiv.querySelector("#".concat(ID, ".titleDetail"));
@@ -1392,7 +1449,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
         title: 'Title',
         details: DETAILS
       };
-      var _renderWithValidation35 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
+      var _renderWithValidation37 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
           id: ID,
           entryData: ENTRY,
           config: CONFIG,
@@ -1404,7 +1461,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
             childPages: []
           }
         })),
-        container = _renderWithValidation35.container;
+        container = _renderWithValidation37.container;
       var detailsComponent = container.querySelector('.details');
       expect(detailsComponent).toBeNull();
     });

package/dist/components/CollectionSummary/SummaryCardDetails.js

@@ -8,9 +8,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _utils = _interopRequireDefault(require("../../utils"));
 var _models = require("../../models");
-var _getComponentRowForCYA = _interopRequireDefault(require("../../utils/CheckYourAnswers/getComponentRowForCYA"));
+var _getSummaryListRowForDetails = _interopRequireDefault(require("../../utils/CheckYourAnswers/getSummaryListRowForDetails"));
+var _getCYARowsForCollection = _interopRequireDefault(require("../../utils/CheckYourAnswers/getCYARowsForCollection"));
 var _getCYARowsForContainer = _interopRequireDefault(require("../../utils/CheckYourAnswers/getCYARowsForContainer"));
 var _showComponent = _interopRequireDefault(require("../../utils/Component/showComponent"));
+var _Condition = _interopRequireDefault(require("../../utils/Condition"));
 require("./SummaryCardDetails.scss");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -31,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) {
@@ -43,20 +46,72 @@ var SummaryCardDetails = function SummaryCardDetails(_ref) {
       return !!e;
     });
   }, [masterPage, childCollections]);
-  var getSectionContent = function getSectionContent(section, components, childPage) {
+  var getSectionContent = function getSectionContent(columns, components, childPage) {
     var columnIndex = 0;
-    return section.columns.flatMap(function (column, index) {
+    return columns.flatMap(function (column, index) {
       var _column$fields;
       var rowIndex = 0;
       var columnContent = (_column$fields = column.fields) === null || _column$fields === void 0 ? void 0 : _column$fields.flatMap(function (fieldId) {
-        var component = components.find(function (comp) {
+        var componentMatches = components.filter(function (comp) {
           return comp.fieldId === fieldId;
         });
-        if (!component || !(0, _showComponent.default)(component, _objectSpread(_objectSpread({}, childPage.formData), entryData))) {
-          return null;
-        }
-        if (component.type === _models.ComponentTypes.CONTAINER) {
-          var containerRows = (0, _getCYARowsForContainer.default)(childPage, component, entryData);
+        return componentMatches.map(function (component) {
+          if (!component || !(0, _showComponent.default)(component, _objectSpread(_objectSpread({}, childPage.formData), entryData))) {
+            return null;
+          }
+          if (component.type === _models.ComponentTypes.CONTAINER) {
+            var containerRows = (0, _getCYARowsForContainer.default)(childPage, component, entryData);
+            rowIndex += 1;
+            return /*#__PURE__*/_react.default.createElement("div", {
+              key: fieldId,
+              className: classes('field'),
+              style: {
+                '--column': columnIndex + 1,
+                '--row': rowIndex
+              }
+            }, containerRows.map(function (subComponent) {
+              var _entryData$component$;
+              // Put value for current subcomponent at top level
+              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, optionalFieldPlaceholder);
+            }));
+          }
+          if (component.type === _models.ComponentTypes.COLLECTION) {
+            var collectionRows = (0, _getCYARowsForCollection.default)(_objectSpread(_objectSpread({}, childPage), {}, {
+              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'),
+              style: {
+                '--column': columnIndex + 1,
+                '--row': rowIndex
+              }
+            }, collectionRows.map(function (subComponent) {
+              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]));
+              var rowContent = (0, _getSummaryListRowForDetails.default)(childPage, _objectSpread(_objectSpread({}, subComponent), {
+                label: subComponent.key
+              }), 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;
           return /*#__PURE__*/_react.default.createElement("div", {
             key: fieldId,
@@ -65,24 +120,8 @@ var SummaryCardDetails = function SummaryCardDetails(_ref) {
               '--column': columnIndex + 1,
               '--row': rowIndex
             }
-          }, containerRows.map(function (subComponent) {
-            var _entryData$component$;
-            // Put value for current subcomponent at top level
-            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, _getComponentRowForCYA.default)(childPage, _objectSpread(_objectSpread({}, subComponent), {
-              label: subComponent.key
-            }), classes, modEntry);
-          }));
-        }
-        rowIndex += 1;
-        return /*#__PURE__*/_react.default.createElement("div", {
-          key: fieldId,
-          className: classes('field'),
-          style: {
-            '--column': columnIndex + 1,
-            '--row': rowIndex
-          }
-        }, (0, _getComponentRowForCYA.default)(childPage, component, classes, entryData));
+          }, (0, _getSummaryListRowForDetails.default)(childPage, component, classes, entryData, optionalFieldPlaceholder));
+        });
       }).filter(function (e) {
         return !!e;
       });
@@ -90,7 +129,7 @@ var SummaryCardDetails = function SummaryCardDetails(_ref) {
       // then we stick a divider on it's right side. The divider isn't
       // passed rowIndex as it spans all rows. columnIndex is incremented
       // twice to account for the divider column too.
-      var lastColumn = index === section.columns.length - 1;
+      var lastColumn = index === columns.length - 1;
       if (!lastColumn && columnContent.length !== 0) {
         columnIndex += 2;
         return [].concat(columnContent, [/*#__PURE__*/_react.default.createElement("div", {
@@ -135,17 +174,20 @@ var SummaryCardDetails = function SummaryCardDetails(_ref) {
         }
         return null;
       }
+      var columns = section.columns.filter(function (column) {
+        return _Condition.default.meetsAll(column, _objectSpread(_objectSpread({}, childPage.formData), entryData));
+      });
       return /*#__PURE__*/_react.default.createElement("div", {
         key: section.title,
         className: classes('section')
       }, !hideChildSectionTitles && /*#__PURE__*/_react.default.createElement("h3", {
         className: classes('section-title')
-      }, section.title), /*#__PURE__*/_react.default.createElement("div", {
+      }, _utils.default.FormPage.getConditionalText(section.title, _objectSpread(_objectSpread({}, childPage.formData), entryData))), /*#__PURE__*/_react.default.createElement("div", {
         className: classes('section-content'),
         style: {
-          '--dividers': section.columns.length - 1
+          '--dividers': columns.length - 1
         }
-      }, getSectionContent(section, allPageComponents, childPage)));
+      }, getSectionContent(columns, allPageComponents, childPage)));
     });
   }).filter(function (e) {
     return !!e;
@@ -159,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/components/CollectionSummary/SummaryCardDetails.scss

@@ -15,6 +15,10 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
     }
   }
 
+  &__field {
+    margin-bottom: govuk-spacing(6);
+  }
+
   &__key {
     font-weight: bold;
     margin: govuk-spacing(2) 0 govuk-spacing(1) 0;
@@ -153,6 +157,11 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
 
 @media (max-width: 640px) {
   .hods-form-summary-card-details {
+
+    &__title {
+      margin-top: govuk-spacing(8)
+    }
+
     &__section {
       &-content {
         display: block;