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

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

@@ -156,6 +156,94 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
     expect(section1Content.textContent).toContain('subThreeLabel');
     expect(section1Content.textContent).toContain('charlie');
   });
+  it('should render sections containing collections with dynamic titles based on summaryLayout config', function () {
+    var FORM_DATA = {
+      dummyTitleContent: "Kellogg's"
+    };
+    var CHILD_PAGES = [{
+      summaryLayout: {
+        sections: [{
+          // eslint-disable-next-line no-template-curly-in-string
+          title: 'Section 1 - ${dummyTitleContent}',
+          columns: [{
+            fields: ['collectionComponent']
+          }]
+        }]
+      },
+      formData: FORM_DATA,
+      components: [{
+        fieldId: 'collectionComponent',
+        id: 'collectionComponent',
+        type: 'collection',
+        label: 'Collection',
+        labels: {
+          item: 'north'
+        },
+        item: [{
+          id: 'north',
+          fieldId: 'north',
+          type: 'text',
+          label: 'North',
+          required: true
+        }, {
+          id: 'east',
+          fieldId: 'east',
+          type: 'text',
+          label: 'East',
+          required: true
+        }, {
+          id: 'south',
+          fieldId: 'south',
+          type: 'text',
+          label: 'South',
+          required: true
+        }, {
+          id: 'west',
+          fieldId: 'west',
+          type: 'text',
+          label: 'West',
+          required: true
+        }]
+      }]
+    }];
+    var COLLECTION_ENTRY = {
+      summaryText: 'Full details',
+      collectionComponent: [{
+        north: 'Never',
+        east: 'Eat',
+        south: 'Shredded',
+        west: 'Wheat'
+      }]
+    };
+    var MASTER_PAGE = {
+      childPages: CHILD_PAGES
+    };
+    var _renderWithValidation3 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
+        masterPage: MASTER_PAGE,
+        childMasterPages: [],
+        formData: {},
+        entryData: COLLECTION_ENTRY
+      })),
+      container = _renderWithValidation3.container;
+
+    // Check for section title
+    var section1Title = container.querySelector(".".concat(classes('section-title')));
+    expect(section1Title).not.toBeUndefined();
+
+    // Check for embedded variables in title
+    expect(section1Title.textContent).toEqual("Section 1 - Kellogg's");
+
+    // All four subcomponents from the container should have labels and values displayed
+    var section1Content = section1Title.parentNode.querySelector(".".concat(classes('section-content')));
+    expect(section1Content.textContent).toContain('North');
+    expect(section1Content.textContent).toContain('Never');
+    expect(section1Content.textContent).toContain('East');
+    expect(section1Content.textContent).toContain('Eat');
+    expect(section1Content.textContent).toContain('South');
+    expect(section1Content.textContent).toContain('Shredded');
+    expect(section1Content.textContent).toContain('West');
+    expect(section1Content.textContent).toContain('Wheat');
+  });
   it('should render sections if they have show_when checks and pass them', function () {
     var CHILD_PAGES = [{
       summaryLayout: {
@@ -192,13 +280,13 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
     var CUSTOM_ENTRY = _objectSpread(_objectSpread({}, ENTRY), {}, {
       showSection1: true
     });
-    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) {
@@ -253,13 +341,13 @@ 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 _renderWithValidation5 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
         masterPage: MASTER_PAGE,
         childMasterPages: [],
         formData: {},
         entryData: CUSTOM_ENTRY
       })),
-      container = _renderWithValidation4.container;
+      container = _renderWithValidation5.container;
 
     // Function to find an element by its text content
     function getByTextContent(parent, text) {
@@ -309,13 +397,13 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
     var MASTER_PAGE = {
       childPages: CHILD_PAGES
     };
-    var _renderWithValidation5 = (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: {},
         entryData: ENTRY
       })),
-      container = _renderWithValidation5.container;
+      container = _renderWithValidation6.container;
 
     // Function to find an element by its text content
     function getByTextContent(parent, text) {
@@ -376,7 +464,7 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
     var CUSTOM_ENTRY = _objectSpread(_objectSpread({}, ENTRY), {}, {
       showSection1: false
     });
-    var _renderWithValidation6 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
+    var _renderWithValidation7 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
         masterPage: MASTER_PAGE,
         childMasterPages: [],
         formData: {
@@ -384,7 +472,7 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
         },
         entryData: CUSTOM_ENTRY
       })),
-      container = _renderWithValidation6.container;
+      container = _renderWithValidation7.container;
 
     // Function to find an element by its text content
     function getByTextContent(parent, text) {
@@ -399,6 +487,57 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
     expect(section1Title).toBeUndefined();
     expect(section2Title).toBeUndefined();
   });
+  it('should not render columns that fail show_when checks', function () {
+    var CHILD_PAGES = [{
+      summaryLayout: {
+        sections: [{
+          title: 'Section 1',
+          columns: [{
+            fields: ['fieldA'],
+            show_when: [{
+              field: 'showSection1',
+              op: '=',
+              value: true
+            }]
+          }, {
+            fields: ['fieldB']
+          }]
+        }]
+      },
+      components: [{
+        fieldId: 'fieldA',
+        label: 'fieldA'
+      }, {
+        fieldId: 'fieldB',
+        label: 'fieldB'
+      }]
+    }];
+    var MASTER_PAGE = {
+      childPages: CHILD_PAGES
+    };
+    var _renderWithValidation8 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
+        masterPage: MASTER_PAGE,
+        childMasterPages: [],
+        formData: {
+          testField: false
+        },
+        entryData: ENTRY
+      })),
+      container = _renderWithValidation8.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');
+    expect(section1Title).toBeDefined();
+    var section1Content = section1Title.parentNode.querySelector(".".concat(classes('section-content')));
+    expect(section1Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(1);
+  });
   it('should render child collections', function () {
     var CHILD_MASTER_PAGES = [{
       collection: {
@@ -442,13 +581,13 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
       childPages: [].concat(CHILD_PAGES, CHILD_MASTER_PAGES)
     };
     var CHILD_COLLECTIONS = ['childCollection'];
-    var _renderWithValidation7 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
+    var _renderWithValidation9 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
         masterPage: MASTER_PAGE,
         childCollections: CHILD_COLLECTIONS,
         formData: {},
         entryData: ENTRY
       })),
-      container = _renderWithValidation7.container;
+      container = _renderWithValidation9.container;
 
     // Function to find an element by its text content
     function getByTextContent(parent, text) {
@@ -464,4 +603,61 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
     var childFields = container.querySelectorAll(".".concat(classes('section')));
     expect(childFields.length).toEqual(2); // One for each entry in the child collection.
   });
+
+  it('should render components if a component with the same ID has already failed a show_when', function () {
+    var CHILD_PAGES = [{
+      summaryLayout: {
+        sections: [{
+          title: 'Section 1',
+          columns: [{
+            fields: ['fieldA']
+          }, {
+            fields: ['fieldB']
+          }]
+        }]
+      },
+      components: [{
+        fieldId: 'fieldA'
+      }, {
+        fieldId: 'fieldB',
+        label: 'first',
+        show_when: [{
+          field: 'fieldA',
+          op: '=',
+          value: 'notTheRightValue'
+        }]
+      }, {
+        fieldId: 'fieldB',
+        label: 'second',
+        show_when: [{
+          field: 'fieldA',
+          op: '!=',
+          value: 'notTheRightValue'
+        }]
+      }]
+    }];
+    var MASTER_PAGE = {
+      childPages: CHILD_PAGES
+    };
+    var _renderWithValidation10 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardDetails.default, {
+        masterPage: MASTER_PAGE,
+        childMasterPages: [],
+        formData: {},
+        entryData: _objectSpread(_objectSpread({}, ENTRY), {}, {
+          fieldA: 'notTheRightValue'
+        })
+      })),
+      container = _renderWithValidation10.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;
+      });
+    }
+    var section1Title = getByTextContent(container, 'Section 1');
+    expect(section1Title).not.toBeUndefined();
+    var section1Content = section1Title.parentNode.querySelector(".".concat(classes('section-content')));
+    expect(section1Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(2);
+  });
 });

package/dist/components/FormComponent/Container.js

@@ -11,6 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _models = require("../../models");
 var _utils = _interopRequireDefault(require("../../utils"));
 var _FormComponent = _interopRequireDefault(require("./FormComponent"));
+var _getSourceData = _interopRequireDefault(require("../../utils/Data/getSourceData"));
 var _excluded = ["container", "value", "formData", "onChange", "wrap", "onTopLevelChange"]; // Global imports
 // Local imports
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -58,7 +59,7 @@ var Container = function Container(_ref) {
     }
     return _utils.default.Component.show(_objectSpread(_objectSpread({}, options), {}, {
       full_path: fullPath
-    }), formData);
+    }), _objectSpread(_objectSpread({}, formData), (0, _getSourceData.default)(formData, container.full_path)));
   };
   var classes = _utils.default.classBuilder(DEFAULT_CLASS, [], container.className);
   var cleanedAttrs = _copReactComponents.Utils.cleanHtmlAttributes(attrs);

package/dist/components/FormComponent/Container.test.js

@@ -368,4 +368,73 @@ describe('components.FormComponent.Container', function () {
       }
     }, _callee7);
   })));
+  it('should render a container component appropriately with show_whens referencing other components in the container', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee8() {
+    var _ID2;
+    var TEXT_COMPONENT_CONDITIONAL, FORM_DATA_CONDITIONAL, CONTAINER, _renderWithValidation8, container, c, formGroup, label, input, formGroup2, label2, input2;
+    return _regeneratorRuntime().wrap(function _callee8$(_context8) {
+      while (1) switch (_context8.prev = _context8.next) {
+        case 0:
+          TEXT_COMPONENT_CONDITIONAL = {
+            id: 'textTwo',
+            fieldId: 'textTwo',
+            type: _models.ComponentTypes.TEXT,
+            label: 'Text component 2',
+            show_when: {
+              field: TEXT_ID,
+              op: '=',
+              value: 'other'
+            }
+          };
+          FORM_DATA_CONDITIONAL = _defineProperty({}, ID, (_ID2 = {}, _defineProperty(_ID2, TEXT_ID, 'other'), _defineProperty(_ID2, "textTwo", 'blue'), _ID2));
+          CONTAINER = {
+            id: ID,
+            fieldId: ID,
+            type: _models.ComponentTypes.CONTAINER,
+            components: [TEXT_COMPONENT, TEXT_COMPONENT_CONDITIONAL],
+            full_path: ID
+          };
+          _renderWithValidation8 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+            component: CONTAINER,
+            value: FORM_DATA_CONDITIONAL[ID],
+            formData: FORM_DATA_CONDITIONAL
+          })), container = _renderWithValidation8.container; // Check the container itself.
+          c = container.childNodes[0];
+          expect(c.tagName).toEqual('DIV');
+          expect(c.classList).toContain(_Container.DEFAULT_CLASS);
+
+          // And now check the first text component within it.
+          formGroup = c.childNodes[0];
+          expect(formGroup.tagName).toEqual('DIV');
+          expect(formGroup.classList).toContain('govuk-form-group');
+          label = formGroup.childNodes[0];
+          expect(label.tagName).toEqual('LABEL');
+          expect(label.classList).toContain('govuk-label');
+          expect(label.textContent).toEqual("".concat(TEXT_COMPONENT.label, " (optional)"));
+          expect(label.getAttribute('for')).toEqual("".concat(ID, ".").concat(TEXT_ID));
+          input = formGroup.childNodes[2];
+          expect(input.tagName).toEqual('INPUT');
+          expect(input.classList).toContain('govuk-input');
+          expect(input.id).toEqual("".concat(ID, ".").concat(TEXT_ID));
+          expect(input.value).toEqual('other');
+
+          // And now check the second text component within it that should have passed the show_when
+          formGroup2 = c.childNodes[1];
+          expect(formGroup2.tagName).toEqual('DIV');
+          expect(formGroup2.classList).toContain('govuk-form-group');
+          label2 = formGroup2.childNodes[0];
+          expect(label2.tagName).toEqual('LABEL');
+          expect(label2.classList).toContain('govuk-label');
+          expect(label2.textContent).toEqual("".concat(TEXT_COMPONENT.label, " 2 (optional)"));
+          expect(label2.getAttribute('for')).toEqual("".concat(ID, ".").concat(TEXT_ID, "Two"));
+          input2 = formGroup2.childNodes[2];
+          expect(input2.tagName).toEqual('INPUT');
+          expect(input2.classList).toContain('govuk-input');
+          expect(input2.id).toEqual("".concat(ID, ".").concat(TEXT_ID, "Two"));
+          expect(input2.value).toEqual('blue');
+        case 33:
+        case "end":
+          return _context8.stop();
+      }
+    }, _callee8);
+  })));
 });

package/dist/components/FormComponent/helpers/getComponentFieldSet.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _models = require("../../../models");
-var SHOULD_HAVE_FIELDSET = [_models.ComponentTypes.RADIOS, _models.ComponentTypes.CHECKBOXES, _models.ComponentTypes.DATE];
+var SHOULD_HAVE_FIELDSET = [_models.ComponentTypes.RADIOS, _models.ComponentTypes.CHECKBOXES, _models.ComponentTypes.DATE, _models.ComponentTypes.TIME];
 var _default = exports.default = function _default(component) {
   return component.fieldset || SHOULD_HAVE_FIELDSET.includes(component.type);
 };

package/dist/components/FormRenderer/FormRenderer.js

@@ -352,6 +352,7 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
     onTaskAction: function onTaskAction(task) {
       (0, _onTaskAction2.default)(task, pages, setCurrentTask, hubDetails, data, onPageChange);
     },
+    annotations: (hubDetails === null || hubDetails === void 0 ? void 0 : hubDetails.taskListAnnotations) || [],
     formData: data
   })), formState.page && !formState.cya && !formState.page.collection && /*#__PURE__*/_react.default.createElement(_FormPage.default, {
     page: formState.page,

package/dist/components/SummaryList/SummaryList.js

@@ -10,6 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _GroupAction = _interopRequireDefault(require("./GroupAction"));
 var _SummaryListRow = _interopRequireDefault(require("./SummaryListRow"));
 var _SummaryListHeadingRow = _interopRequireDefault(require("./SummaryListHeadingRow"));
+var _SummaryListHeadingRowWithAction = _interopRequireDefault(require("./SummaryListHeadingRowWithAction"));
 var _SummaryListTitleRow = _interopRequireDefault(require("./SummaryListTitleRow"));
 require("./SummaryList.scss");
 var _excluded = ["rows", "noChangeAction", "noGroupAction", "isGroup", "classBlock", "classModifiers", "className"]; // Global imports
@@ -59,6 +60,13 @@ var SummaryList = function SummaryList(_ref) {
         classes: classes
       });
     }
+    if (row.type === 'headingWithAction') {
+      return /*#__PURE__*/_react.default.createElement(_SummaryListHeadingRowWithAction.default, {
+        row: row,
+        classes: classes,
+        noChangeAction: noChangeAction
+      });
+    }
     if (row.type === 'action') {
       return noChangeAction ? null : /*#__PURE__*/_react.default.createElement("div", {
         key: "".concat(key, "-actions")

package/dist/components/SummaryList/SummaryList.scss

@@ -33,6 +33,21 @@
   }
 }
 
+.govuk-summary-list__headingWithAction {
+  display: table-row;
+  width: 100%;
+  white-space: nowrap;
+  .heading-text, .heading-action {
+    padding-bottom: 10px;
+  }
+
+  &:not(:first-child) {
+    .heading-text, .heading-action {
+      padding-top: 20px;
+    }
+  }
+}
+
 .changeRow {
   .govuk-link {
     float: right;

package/dist/components/SummaryList/SummaryList.test.js

@@ -56,13 +56,26 @@ describe('components', function () {
       expect(actions.classList).toContain("".concat(_SummaryList.DEFAULT_CLASS, "__actions"));
       return [key, value, actions];
     };
-    var checkRowNoChangeActions = function checkRowNoChangeActions(summaryList, index) {
+    var checkHeadingRowWithAction = function checkHeadingRowWithAction(summaryList, index) {
       var row = summaryList.childNodes[index];
       expect(row.tagName).toEqual('DIV');
-      expect(row.classList).toContain("".concat(_SummaryList.DEFAULT_CLASS, "__row"));
+      expect(row.classList).toContain("".concat(_SummaryList.DEFAULT_CLASS, "__headingWithAction"));
       var _row$childNodes3 = _slicedToArray(row.childNodes, 2),
         key = _row$childNodes3[0],
-        value = _row$childNodes3[1];
+        action = _row$childNodes3[1];
+      expect(key.tagName).toEqual('TD');
+      expect(key.classList).toContain('heading-text');
+      expect(action.tagName).toEqual('TD');
+      expect(action.classList).toContain('heading-action');
+      return [key, action];
+    };
+    var checkRowNoChangeActions = function checkRowNoChangeActions(summaryList, index) {
+      var row = summaryList.childNodes[index];
+      expect(row.tagName).toEqual('DIV');
+      expect(row.classList).toContain("".concat(_SummaryList.DEFAULT_CLASS, "__row"));
+      var _row$childNodes4 = _slicedToArray(row.childNodes, 2),
+        key = _row$childNodes4[0],
+        value = _row$childNodes4[1];
       expect(key.tagName).toEqual('DT');
       expect(key.classList).toContain("".concat(_SummaryList.DEFAULT_CLASS, "__key"));
       expect(value.tagName).toEqual('DD');
@@ -320,6 +333,53 @@ describe('components', function () {
         expect(ON_ACTION_CALLS[index]).toEqual(row);
       });
     });
+    it('should handle heading rows with actions', function () {
+      var ID = 'test-id';
+      var ON_ACTION_CALLS = [];
+      var ON_ACTION = function ON_ACTION(row) {
+        ON_ACTION_CALLS.push(row);
+      };
+      var ROWS = [{
+        key: 'a',
+        pageId: 'p1',
+        type: 'headingWithAction',
+        size: 'm',
+        action: {
+          label: 'Change A',
+          onAction: ON_ACTION
+        }
+      }, {
+        key: 'b',
+        pageId: 'p2',
+        type: 'headingWithAction',
+        size: 'm',
+        action: {
+          label: 'Change B',
+          onAction: ON_ACTION
+        }
+      }];
+      var _render8 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_SummaryList.default, {
+          "data-testid": ID,
+          rows: ROWS
+        })),
+        container = _render8.container;
+      var summaryList = checkSummaryList(container, ID);
+      expect(summaryList.childNodes.length).toEqual(ROWS.length);
+      ROWS.forEach(function (row, index) {
+        var _checkHeadingRowWithA = checkHeadingRowWithAction(summaryList, index),
+          _checkHeadingRowWithA2 = _slicedToArray(_checkHeadingRowWithA, 2),
+          key = _checkHeadingRowWithA2[0],
+          actions = _checkHeadingRowWithA2[1];
+        expect(key.textContent).toEqual("".concat(row.key));
+        var a = actions.childNodes[0];
+        expect(a.textContent).toEqual(row.action.label);
+        _react.fireEvent.click(a, {});
+        expect(ON_ACTION_CALLS.length).toEqual(index + 1);
+        expect(ON_ACTION_CALLS[index]).toEqual({
+          action: row.action
+        });
+      });
+    });
     it('should handle rows with component values and actions set to hidden', function () {
       var ID = 'test-id';
       var VALUES = ['Alpha component value', 'Bravo component value'];
@@ -334,12 +394,12 @@ describe('components', function () {
         fieldId: 'b',
         value: /*#__PURE__*/_react2.default.createElement("div", null, VALUES[1])
       }];
-      var _render8 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_SummaryList.default, {
+      var _render9 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_SummaryList.default, {
           "data-testid": ID,
           rows: ROWS,
           noChangeAction: true
         })),
-        container = _render8.container;
+        container = _render9.container;
       var summaryList = checkSummaryList(container, ID);
       expect(summaryList.childNodes.length).toEqual(ROWS.length);
       ROWS.forEach(function (row, index) {
@@ -377,12 +437,12 @@ describe('components', function () {
         fieldId: 'c',
         value: /*#__PURE__*/_react2.default.createElement("div", null, VALUES[2])
       }];
-      var _render9 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_SummaryList.default, {
+      var _render10 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_SummaryList.default, {
           "data-testid": ID,
           rows: ROWS,
           isGroup: ISGROUP
         })),
-        container = _render9.container;
+        container = _render10.container;
       var summaryList = checkSummaryList(container, ID);
       expect(summaryList.childNodes.length).toEqual(ROWS.length + 1);
       ROWS.forEach(function (row, index) {

package/dist/components/SummaryList/SummaryListHeadingRowWithAction.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _copReactComponents = require("@ukhomeoffice/cop-react-components");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+var _RowAction = _interopRequireDefault(require("./RowAction"));
+require("./SummaryListHeadingRowWithAction.scss");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// Global imports
+
+// Local imports
+
+// Styles
+
+var SummaryListHeadingRowWithAction = function SummaryListHeadingRowWithAction(_ref) {
+  var row = _ref.row,
+    classes = _ref.classes,
+    noChangeAction = _ref.noChangeAction;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes('headingWithAction')
+  }, /*#__PURE__*/_react.default.createElement("td", {
+    className: "heading-text",
+    colSpan: "2"
+  }, row.size === 's' && /*#__PURE__*/_react.default.createElement(_copReactComponents.SmallHeading, null, row.key), row.size === 'm' && /*#__PURE__*/_react.default.createElement(_copReactComponents.MediumHeading, null, row.key)), /*#__PURE__*/_react.default.createElement("td", {
+    className: "heading-action"
+  }, !noChangeAction && /*#__PURE__*/_react.default.createElement(_RowAction.default, {
+    row: {
+      action: row.action
+    }
+  })));
+};
+SummaryListHeadingRowWithAction.propTypes = {
+  classes: _propTypes.default.func.isRequired,
+  row: _propTypes.default.shape({
+    key: _propTypes.default.string.isRequired,
+    size: _propTypes.default.string,
+    action: _propTypes.default.shape({
+      page: _propTypes.default.string,
+      label: _propTypes.default.string,
+      aria_suffix: _propTypes.default.string,
+      onAction: _propTypes.default.func
+    })
+  }).isRequired,
+  noChangeAction: _propTypes.default.bool
+};
+SummaryListHeadingRowWithAction.defaultProps = {
+  noChangeAction: false
+};
+var _default = exports.default = SummaryListHeadingRowWithAction;

package/dist/components/SummaryList/SummaryListHeadingRowWithAction.scss

@@ -0,0 +1,38 @@
+.heading-with-action {
+  flex-direction: row;
+  width: 100%;
+}
+
+.heading-text {
+  display: table-cell;
+  column-span: 2;
+  width: 80%;
+
+  .govuk-heading-m, .govuk-heading-s {
+    margin-bottom: 0;
+  }
+}
+
+.heading-action {
+  display: table-cell;
+  width: 20%;
+  text-align: right;
+}
+
+@media screen and (max-width: 640px) {
+  .heading-with-action {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+  
+  .heading-text {
+    width: 100%
+  }
+  
+  .heading-action {
+    margin-bottom: govuk-spacing(3);
+    width: 20%;
+    text-align: left;
+  }
+}