@ukhomeoffice/cop-react-form-renderer 5.85.2 → 5.86.1

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 "node_modules/govuk-frontend/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/SummaryCard.js

@@ -171,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", {

package/dist/components/CollectionSummary/SummaryCard.scss

@@ -44,6 +44,12 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
         margin-right: govuk-spacing(2);
       }
 
+      &-title {
+        margin-block-start: 0;
+        margin-block-end: 0;
+        font-size: 1em;
+      }
+
       &-detail {
         font-weight: normal;
       }

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

@@ -81,7 +81,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
     expect(headerBanners.tagName).toEqual('DIV');
     expect(headerBanners.classList).toContain(_BannerStrip.DEFAULT_CLASS);
     var headerTitle = headerContentDiv.children[1];
-    expect(headerTitle.tagName).toEqual('DIV');
+    expect(headerTitle.tagName).toEqual('H2');
     expect(headerTitle.classList).toContain(classes('header-content-title'));
     expect(headerTitle.textContent).toEqual(CONFIG.title);
     var headerDetails = headerContentDiv.children[2];
@@ -113,7 +113,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
     // and the details.
 
     var headerTitle = headerContentDiv.children[0];
-    expect(headerTitle.tagName).toEqual('DIV');
+    expect(headerTitle.tagName).toEqual('H2');
     expect(headerTitle.classList).toContain(classes('header-content-title'));
     expect(headerTitle.textContent).toEqual(CONFIG.title);
     var headerDetails = headerContentDiv.children[1];
@@ -148,7 +148,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
     // the title.
 
     var headerTitle = headerContentDiv.children[1];
-    expect(headerTitle.tagName).toEqual('DIV');
+    expect(headerTitle.tagName).toEqual('H2');
     expect(headerTitle.classList).toContain(classes('header-content-title'));
     expect(headerTitle.textContent).toEqual(CONFIG.title);
   });
@@ -171,7 +171,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
     var _checkSetup4 = checkSetup(container),
       headerContentDiv = _checkSetup4.headerContentDiv;
     var headerTitle = headerContentDiv.children[0];
-    expect(headerTitle.tagName).toEqual('DIV');
+    expect(headerTitle.tagName).toEqual('H2');
     expect(headerTitle.classList).toContain(classes('header-content-title'));
     expect(headerTitle.textContent).toEqual("".concat(ENTRY.titleText, " that is interpolated"));
   });
@@ -211,7 +211,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
     var _checkSetup5 = checkSetup(container),
       headerContentDiv = _checkSetup5.headerContentDiv;
     var headerTitle = headerContentDiv.children[0];
-    expect(headerTitle.tagName).toEqual('DIV');
+    expect(headerTitle.tagName).toEqual('H2');
     expect(headerTitle.classList).toContain(classes('header-content-title'));
     expect(headerTitle.textContent).toEqual("".concat(ENTRY.titleText, " that is interpolated"));
   });

package/dist/components/CollectionSummary/SummaryCardDetails.js

@@ -62,7 +62,7 @@ var SummaryCardDetails = function SummaryCardDetails(_ref) {
           if (component.type === _models.ComponentTypes.CONTAINER) {
             var containerRows = (0, _getCYARowsForContainer.default)(childPage, component, entryData);
             rowIndex += 1;
-            return /*#__PURE__*/_react.default.createElement("div", {
+            return /*#__PURE__*/_react.default.createElement("dl", {
               key: fieldId,
               className: classes('field'),
               style: {
@@ -84,7 +84,7 @@ var SummaryCardDetails = function SummaryCardDetails(_ref) {
             }), component, entryData[component.id]);
             rowIndex += 1;
             var collectionHeadingIndex = 0;
-            return /*#__PURE__*/_react.default.createElement("div", {
+            return /*#__PURE__*/_react.default.createElement("dl", {
               key: fieldId,
               className: classes('field'),
               style: {
@@ -113,7 +113,7 @@ var SummaryCardDetails = function SummaryCardDetails(_ref) {
             }));
           }
           rowIndex += 1;
-          return /*#__PURE__*/_react.default.createElement("div", {
+          return /*#__PURE__*/_react.default.createElement("dl", {
             key: fieldId,
             className: classes('field'),
             style: {

package/dist/components/CollectionSummary/SummaryCardDetails.scss

@@ -141,6 +141,8 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
         grid-column-end: var(--column);
         grid-row-start: var(--row);
         grid-row-end: var(--row);
+        margin-block-start: 0;
+        margin-block-end: 0;
       }
 
       .hods-form-summary-card-details__divider {

package/dist/utils/CheckYourAnswers/showComponentCYA.js

@@ -33,7 +33,7 @@ var showComponentCYA = function showComponentCYA(options, data) {
   }
   if (options.hideOnCyaWhenEmpty) {
     if (options.type === _models.ComponentTypes.COLLECTION) {
-      var itemCollectionsData = (0, _getSourceData.default)(data, options.full_path);
+      var itemCollectionsData = (0, _getSourceData.default)(data, options.full_path || options.fieldId);
       if (!(itemCollectionsData !== null && itemCollectionsData !== void 0 && itemCollectionsData.length)) {
         return false;
       }

package/package.json

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