@ukhomeoffice/cop-react-form-renderer 6.0.6-peter → 6.6.1

package/dist/components/CollectionSummary/SummaryCardDetails.js

@@ -7,7 +7,10 @@ exports.default = exports.DEFAULT_CLASS = void 0;
 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 _getCYARowsForContainer = _interopRequireDefault(require("../../utils/CheckYourAnswers/getCYARowsForContainer"));
+var _showComponent = _interopRequireDefault(require("../../utils/Component/showComponent"));
 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; }
@@ -40,13 +43,75 @@ var SummaryCardDetails = function SummaryCardDetails(_ref) {
       return !!e;
     });
   }, [masterPage, childCollections]);
+  var getSectionContent = function getSectionContent(section, components, childPage) {
+    var columnIndex = 0;
+    return section.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) {
+          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);
+          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, _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));
+      }).filter(function (e) {
+        return !!e;
+      });
+      // If the column that's just been generated has anything in it
+      // 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;
+      if (!lastColumn && columnContent.length !== 0) {
+        columnIndex += 2;
+        return [].concat(columnContent, [/*#__PURE__*/_react.default.createElement("div", {
+          key: "divider".concat(columnIndex),
+          className: classes('divider'),
+          style: {
+            '--column': columnIndex
+          }
+        })]);
+      }
+      return columnContent;
+    }).filter(function (e) {
+      return !!e;
+    });
+  };
   return (masterPage === null || masterPage === void 0 || (_masterPage$childPage = masterPage.childPages) === null || _masterPage$childPage === void 0 ? void 0 : _masterPage$childPage.filter(function (p) {
     return _utils.default.FormPage.show(p, _objectSpread(_objectSpread({}, formData), entryData));
   }).map(function (childPage) {
     var _childPage$summaryLay;
     var allPageComponents = _utils.default.Component.elevateNested(childPage === null || childPage === void 0 ? void 0 : childPage.components, entryData);
     return (_childPage$summaryLay = childPage.summaryLayout) === null || _childPage$summaryLay === void 0 ? void 0 : _childPage$summaryLay.sections.map(function (section) {
-      var _section$fields;
       if (section.show_when && !_utils.default.Condition.meetsAll(section.show_when, _objectSpread(_objectSpread({}, formData), entryData))) {
         return null;
       }
@@ -76,19 +141,11 @@ var SummaryCardDetails = function SummaryCardDetails(_ref) {
       }, !hideChildSectionTitles && /*#__PURE__*/_react.default.createElement("h3", {
         className: classes('section-title')
       }, section.title), /*#__PURE__*/_react.default.createElement("div", {
-        className: classes('section-content', "columns-".concat(section.columns))
-      }, (_section$fields = section.fields) === null || _section$fields === void 0 ? void 0 : _section$fields.map(function (fieldId) {
-        var component = allPageComponents.find(function (comp) {
-          return comp.fieldId === fieldId;
-        });
-        if (!component) {
-          return null;
+        className: classes('section-content'),
+        style: {
+          '--dividers': section.columns.length - 1
         }
-        return /*#__PURE__*/_react.default.createElement("div", {
-          key: fieldId,
-          className: classes('field')
-        }, (0, _getComponentRowForCYA.default)(childPage, component, classes, entryData));
-      })));
+      }, getSectionContent(section, allPageComponents, childPage)));
     });
   }).filter(function (e) {
     return !!e;

package/dist/components/CollectionSummary/SummaryCardDetails.scss

@@ -1,6 +1,6 @@
 $govuk-font-family: 'Roboto', arial, sans-serif;
 
-@import "node_modules/govuk-frontend/govuk/_base";
+@import 'govuk-frontend/dist/govuk/_base';
 
 .govuk-grid-column-two-thirds:has(.hods-form-summary-card-details) {
   width: 100% !important;
@@ -24,7 +24,7 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
     margin: 0;
 
     .hods-form-container .govuk-form-group {
-      margin-bottom: 0px;
+      margin-bottom: 0;
 
       label {
         display: none;
@@ -36,9 +36,12 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
     border-bottom: 2px solid #E9EBED;
 
     &-content {
-      display: flex;
-      flex-wrap: wrap;
+      display: grid;
+      grid-template-columns: repeat(var(--dividers), 1fr 2px) 1fr;
+      grid-auto-rows: minmax(100px, 1fr);
       gap: govuk-spacing(2);
+      position: relative;
+      margin-bottom: govuk-spacing(1);
 
       .hods-form-summary-card__field {
         box-sizing: border-box;
@@ -61,6 +64,7 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
         }
       }
 
+      /*
       &--columns-1,
       &--columns-2,
       &--columns-3 {
@@ -79,6 +83,9 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
       }
 
       &--columns-2 {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+
         &::after {
           content: "";
           position: absolute;
@@ -89,12 +96,13 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
           left: 50%;
         }
 
-        .hods-form-summary-card-details__field {
-          flex: 0 0 calc(50% - 10px);
-        }
+
       }
 
       &--columns-3 {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+
         &::after {
           content: "";
           position: absolute;
@@ -106,7 +114,10 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
         }
 
         .hods-form-summary-card-details__field {
-          flex: 0 0 calc(33.333% - 10px);
+          grid-column-start: var("--column");
+          grid-column-end: var("--column");
+          grid-row-start: var("--row");
+          grid-row-end: var("--row");
 
           &:nth-child(2)::after {
             content: "";
@@ -119,6 +130,23 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
           }
         }
       }
+      */
+
+      .hods-form-summary-card-details__field {
+        grid-column-start: var(--column);
+        grid-column-end: var(--column);
+        grid-row-start: var(--row);
+        grid-row-end: var(--row);
+      }
+
+      .hods-form-summary-card-details__divider {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        background-color: #E9EBED;
+        grid-column-start: var(--column);
+        grid-column-end: var(--column);
+      }
     }
   }
 }
@@ -137,6 +165,15 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
           display: none;
         }
 
+        .hods-form-summary-card-details__divider {
+          position: absolute;
+          height: 0;
+          width: 0;
+          background-color: #E9EBED;
+          grid-column-start: var(--column);
+          grid-column-end: var(--column);
+        }
+
         &--columns-2,
         &--columns-3 {
           position: relative;

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

@@ -38,12 +38,16 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
       summaryLayout: {
         sections: [{
           title: 'Section 1',
-          columns: 2,
-          fields: ['fieldA', 'fieldB']
+          columns: [{
+            fields: ['fieldA']
+          }, {
+            fields: ['fieldB']
+          }]
         }, {
           title: 'Section 2',
-          columns: 1,
-          fields: ['fieldC']
+          columns: [{
+            fields: ['fieldC']
+          }]
         }]
       },
       components: [{
@@ -82,13 +86,86 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
     var section2Content = section2Title.parentNode.querySelector(".".concat(classes('section-content')));
     expect(section2Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(1);
   });
+  it('should render sections containing containers based on summaryLayout config', function () {
+    var CHILD_PAGES = [{
+      summaryLayout: {
+        sections: [{
+          title: 'Section 1',
+          columns: [{
+            fields: ['containerComponent']
+          }]
+        }]
+      },
+      components: [{
+        fieldId: 'containerComponent',
+        type: 'container',
+        label: 'container',
+        components: [{
+          fieldId: 'subOne',
+          label: 'subOneLabel'
+        }, {
+          fieldId: 'subTwo',
+          label: 'subTwoLabel'
+        }, {
+          fieldId: 'subThree',
+          label: 'subThreeLabel'
+        }]
+      }]
+    }];
+    var CONTAINER_ENTRY = {
+      id: '001',
+      bannerText: 'A banner',
+      titleText: 'A title',
+      detailsText: 'Some details',
+      index: 0,
+      summaryText: 'Full details',
+      containerComponent: {
+        subOne: 'alpha',
+        subTwo: 'bravo',
+        subThree: 'charlie'
+      }
+    };
+    var MASTER_PAGE = {
+      childPages: CHILD_PAGES
+    };
+    var _renderWithValidation2 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
+        masterPage: MASTER_PAGE,
+        childMasterPages: [],
+        formData: {},
+        entryData: CONTAINER_ENTRY
+      })),
+      container = _renderWithValidation2.container;
+
+    // Function to find an element by its text content
+    function getByTextContent(parent, text) {
+      return Array.from(parent.getElementsByClassName(classes('section-title'))).find(function (el) {
+        return el.textContent === text;
+      });
+    }
+
+    // Check for section title
+    var section1Title = getByTextContent(container, 'Section 1');
+    expect(section1Title).not.toBeUndefined();
+
+    // All three subcomponents from the container should have labels and values displayed
+    var section1Content = section1Title.parentNode.querySelector(".".concat(classes('section-content')));
+    expect(section1Content.textContent).toContain('subOneLabel');
+    expect(section1Content.textContent).toContain('alpha');
+    expect(section1Content.textContent).toContain('subTwoLabel');
+    expect(section1Content.textContent).toContain('bravo');
+    expect(section1Content.textContent).toContain('subThreeLabel');
+    expect(section1Content.textContent).toContain('charlie');
+  });
   it('should render sections if they have show_when checks and pass them', function () {
     var CHILD_PAGES = [{
       summaryLayout: {
         sections: [{
           title: 'Section 1',
-          columns: 2,
-          fields: ['fieldA', 'fieldB'],
+          columns: [{
+            fields: ['fieldA']
+          }, {
+            fields: ['fieldB']
+          }],
           show_when: [{
             field: 'showSection1',
             op: "=",
@@ -96,8 +173,9 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
           }]
         }, {
           title: 'Section 2',
-          columns: 1,
-          fields: ['fieldC']
+          columns: [{
+            fields: ['fieldC']
+          }]
         }]
       },
       components: [{
@@ -114,13 +192,13 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
     var CUSTOM_ENTRY = _objectSpread(_objectSpread({}, ENTRY), {}, {
       showSection1: true
     });
-    var _renderWithValidation2 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
+    var _renderWithValidation3 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
         masterPage: MASTER_PAGE,
         childMasterPages: [],
         formData: {},
         entryData: CUSTOM_ENTRY
       })),
-      container = _renderWithValidation2.container;
+      container = _renderWithValidation3.container;
 
     // Function to find an element by its text content
     function getByTextContent(parent, text) {
@@ -144,8 +222,11 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
       summaryLayout: {
         sections: [{
           title: 'Section 1',
-          columns: 2,
-          fields: ['fieldA', 'fieldB'],
+          columns: [{
+            fields: ['fieldA']
+          }, {
+            fields: ['fieldB']
+          }],
           show_when: [{
             field: 'showSection1',
             op: "=",
@@ -153,8 +234,9 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
           }]
         }, {
           title: 'Section 2',
-          columns: 1,
-          fields: ['fieldC']
+          columns: [{
+            fields: ['fieldC']
+          }]
         }]
       },
       components: [{
@@ -171,13 +253,13 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
     var CUSTOM_ENTRY = _objectSpread(_objectSpread({}, ENTRY), {}, {
       showSection1: false
     });
-    var _renderWithValidation3 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
+    var _renderWithValidation4 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
         masterPage: MASTER_PAGE,
         childMasterPages: [],
         formData: {},
         entryData: CUSTOM_ENTRY
       })),
-      container = _renderWithValidation3.container;
+      container = _renderWithValidation4.container;
 
     // Function to find an element by its text content
     function getByTextContent(parent, text) {
@@ -194,6 +276,65 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
     var section2Content = section2Title.parentNode.querySelector(".".concat(classes('section-content')));
     expect(section2Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(1);
   });
+  it('should not render components that fail show_when checks', function () {
+    var CHILD_PAGES = [{
+      summaryLayout: {
+        sections: [{
+          title: 'Section 1',
+          columns: [{
+            fields: ['fieldA']
+          }, {
+            fields: ['fieldB']
+          }]
+        }, {
+          title: 'Section 2',
+          columns: [{
+            fields: ['fieldC']
+          }]
+        }]
+      },
+      components: [{
+        fieldId: 'fieldA'
+      }, {
+        fieldId: 'fieldB',
+        show_when: [{
+          field: 'fieldA',
+          op: '=',
+          value: 'notTheRightValue'
+        }]
+      }, {
+        fieldId: 'fieldC'
+      }]
+    }];
+    var MASTER_PAGE = {
+      childPages: CHILD_PAGES
+    };
+    var _renderWithValidation5 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
+        masterPage: MASTER_PAGE,
+        childMasterPages: [],
+        formData: {},
+        entryData: ENTRY
+      })),
+      container = _renderWithValidation5.container;
+
+    // Function to find an element by its text content
+    function getByTextContent(parent, text) {
+      return Array.from(parent.getElementsByClassName(classes('section-title'))).find(function (el) {
+        return el.textContent === text;
+      });
+    }
+
+    // Check for section titles
+    var section1Title = getByTextContent(container, 'Section 1');
+    var section2Title = getByTextContent(container, 'Section 2');
+    expect(section1Title).not.toBeUndefined();
+    expect(section2Title).not.toBeUndefined();
+    var section1Content = section1Title.parentNode.querySelector(".".concat(classes('section-content')));
+    expect(section1Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(1); // Just Field A, Field B should be hidden.
+
+    var section2Content = section2Title.parentNode.querySelector(".".concat(classes('section-content')));
+    expect(section2Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(1);
+  });
   it('should not render sections on pages that fail show_when checks', function () {
     var CHILD_PAGES = [{
       show_when: [{
@@ -204,8 +345,11 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
       summaryLayout: {
         sections: [{
           title: 'Section 1',
-          columns: 2,
-          fields: ['fieldA', 'fieldB'],
+          columns: [{
+            fields: ['fieldA']
+          }, {
+            fields: ['fieldB']
+          }],
           show_when: [{
             field: 'showSection1',
             op: "=",
@@ -213,8 +357,9 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
           }]
         }, {
           title: 'Section 2',
-          columns: 1,
-          fields: ['fieldC']
+          columns: [{
+            fields: ['fieldC']
+          }]
         }]
       },
       components: [{
@@ -231,7 +376,7 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
     var CUSTOM_ENTRY = _objectSpread(_objectSpread({}, ENTRY), {}, {
       showSection1: false
     });
-    var _renderWithValidation4 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
+    var _renderWithValidation6 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
         masterPage: MASTER_PAGE,
         childMasterPages: [],
         formData: {
@@ -239,7 +384,7 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
         },
         entryData: CUSTOM_ENTRY
       })),
-      container = _renderWithValidation4.container;
+      container = _renderWithValidation6.container;
 
     // Function to find an element by its text content
     function getByTextContent(parent, text) {
@@ -268,8 +413,11 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
         summaryLayout: {
           sections: [{
             title: 'Hidden Title',
-            columns: 2,
-            fields: ['childfield1', 'childfield2']
+            columns: [{
+              fields: ['childfield1']
+            }, {
+              fields: ['childfield2']
+            }]
           }]
         }
       }]
@@ -294,13 +442,13 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
       childPages: [].concat(CHILD_PAGES, CHILD_MASTER_PAGES)
     };
     var CHILD_COLLECTIONS = ['childCollection'];
-    var _renderWithValidation5 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
+    var _renderWithValidation7 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
         masterPage: MASTER_PAGE,
         childCollections: CHILD_COLLECTIONS,
         formData: {},
         entryData: ENTRY
       })),
-      container = _renderWithValidation5.container;
+      container = _renderWithValidation7.container;
 
     // Function to find an element by its text content
     function getByTextContent(parent, text) {

package/dist/components/CollectionSummary/SummaryCardValidationContext.js

@@ -7,8 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = _interopRequireDefault(require("../../utils"));
 var _ValidationContext = require("../../context/ValidationContext");
+var _hooks = require("../../hooks");
+var _utils = _interopRequireDefault(require("../../utils"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -22,7 +23,11 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } /* eslint-
 var SummaryCardValidationContextProvider = function SummaryCardValidationContextProvider(_ref) {
   var entryId = _ref.entryId,
     topLevelErrors = _ref.topLevelErrors,
+    clearTopLevelErrorsForCard = _ref.clearTopLevelErrorsForCard,
     children = _ref.children;
+  var _useHooks = (0, _hooks.useHooks)(),
+    hooks = _useHooks.hooks;
+
   // Errors raised from the Collection Summary.
   var initialErrors = topLevelErrors.filter(function (e) {
     return e.entryId === entryId;
@@ -38,8 +43,10 @@ var SummaryCardValidationContextProvider = function SummaryCardValidationContext
     setErrors(null);
   };
   var addErrors = function addErrors(addedErrors) {
-    var newErrors = errors !== null && errors !== void 0 ? errors : [];
-    setErrors(newErrors.concat(addedErrors));
+    setErrors(function (prev) {
+      var newErrors = prev !== null && prev !== void 0 ? prev : [];
+      return newErrors.concat(addedErrors);
+    });
   };
 
   // This validate is only used by the Quick Edit page
@@ -47,8 +54,9 @@ var SummaryCardValidationContextProvider = function SummaryCardValidationContext
   var validate = {
     page: function page(_page) {
       var pageErrors = _utils.default.Validate.page(_page);
-      setErrors(pageErrors);
-      return pageErrors;
+      var allErrors = hooks.onValidate(_page, pageErrors);
+      setErrors(allErrors);
+      return allErrors;
     }
   };
   return /*#__PURE__*/_react.default.createElement(_ValidationContext.ValidationContext.Provider, {
@@ -56,6 +64,7 @@ var SummaryCardValidationContextProvider = function SummaryCardValidationContext
       addErrors: addErrors,
       errors: errors === null ? [].concat(initialErrors) : errors,
       resetQuickEditErrors: resetQuickEditErrors,
+      clearTopLevelErrorsForCard: clearTopLevelErrorsForCard,
       validate: validate
     }
   }, children);
@@ -64,6 +73,7 @@ var _default = exports.default = SummaryCardValidationContextProvider;
 SummaryCardValidationContextProvider.propTypes = {
   entryId: _propTypes.default.string.isRequired,
   topLevelErrors: _propTypes.default.arrayOf(_propTypes.default.shape({})),
+  clearTopLevelErrorsForCard: _propTypes.default.func.isRequired,
   children: _propTypes.default.node
 };
 SummaryCardValidationContextProvider.defaultProps = {

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

@@ -6,6 +6,7 @@ var _copReactComponents = require("@ukhomeoffice/cop-react-components");
 var _react2 = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _hooks = require("../../hooks");
+var _context3 = require("../../context");
 var _SummaryCardValidationContext = _interopRequireDefault(require("./SummaryCardValidationContext"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
@@ -36,10 +37,10 @@ describe('context.SummaryCardValidationContext', function () {
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          _render = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_SummaryCardValidationContext.default, {
+          _render = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_context3.HooksContextProvider, null, /*#__PURE__*/_react2.default.createElement(_SummaryCardValidationContext.default, {
             entryId: "123",
             topLevelErrors: []
-          }, /*#__PURE__*/_react2.default.createElement(TestComponent, null))), container = _render.container;
+          }, /*#__PURE__*/_react2.default.createElement(TestComponent, null)))), container = _render.container;
           expect(container.childNodes.length).toEqual(4);
           expect(container.textContent).toContain('addErrors is a function');
           expect(container.textContent).toContain('resetQuickEditErrors is a function');
@@ -72,10 +73,10 @@ describe('context.SummaryCardValidationContext', function () {
             id: 'testid',
             error: 'error message four'
           }];
-          _render2 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_SummaryCardValidationContext.default, {
+          _render2 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_context3.HooksContextProvider, null, /*#__PURE__*/_react2.default.createElement(_SummaryCardValidationContext.default, {
             entryId: "123",
             topLevelErrors: TOP_LEVEL_ERRORS
-          }, /*#__PURE__*/_react2.default.createElement(TestComponent, null))), container = _render2.container;
+          }, /*#__PURE__*/_react2.default.createElement(TestComponent, null)))), container = _render2.container;
           expect(container.childNodes.length).toEqual(5);
           expect(container.textContent).toContain('addErrors is a function');
           expect(container.textContent).toContain('resetQuickEditErrors is a function');