@ukhomeoffice/cop-react-form-renderer 2.6.2 → 2.7.4

package/dist/components/CheckYourAnswers/CheckYourAnswers.test.js

@@ -22,6 +22,8 @@ var _userProfileData = _interopRequireDefault(require("../../json/userProfile.da
 
 var _userProfile = _interopRequireDefault(require("../../json/userProfile.json"));
 
+var _groupOfRow = _interopRequireDefault(require("../../json/groupOfRow.json"));
+
 var _utils = _interopRequireDefault(require("../../utils"));
 
 var _CheckYourAnswers = _interopRequireWildcard(require("./CheckYourAnswers"));
@@ -198,7 +200,7 @@ describe('components', function () {
       }, _callee4);
     })));
     it('should show readonly page components correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6() {
-      var cya, _cya$childNodes, names, _names$childNodes, firstName, surname;
+      var cya, _cya$childNodes, cyaChildNode, names, _names$childNodes, firstName, surname;
 
       return regeneratorRuntime.wrap(function _callee6$(_context6) {
         while (1) {
@@ -226,14 +228,15 @@ describe('components', function () {
 
             case 2:
               cya = checkCYA(container);
-              _cya$childNodes = _slicedToArray(cya.childNodes, 2), names = _cya$childNodes[1];
+              _cya$childNodes = _slicedToArray(cya.childNodes, 2), cyaChildNode = _cya$childNodes[1];
+              names = cyaChildNode.childNodes[0];
               expect(names.tagName).toEqual('DL');
               expect(names.classList).toContain("govuk-!-margin-bottom-".concat(_CheckYourAnswers.DEFAULT_MARGIN_BOTTOM));
               _names$childNodes = _slicedToArray(names.childNodes, 2), firstName = _names$childNodes[0], surname = _names$childNodes[1];
               checkRow(firstName, 'First name', 'John', false);
               checkRow(surname, 'Last name', 'Smith', false);
 
-            case 9:
+            case 10:
             case "end":
               return _context6.stop();
           }
@@ -241,7 +244,7 @@ describe('components', function () {
       }, _callee6);
     })));
     it('should show editable page components correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8() {
-      var cya, _cya$childNodes2, title, civilServant, _civilServant$childNo, status;
+      var cya, _cya$childNodes2, title, cyaChildNode, civilServant, _civilServant$childNo, status;
 
       return regeneratorRuntime.wrap(function _callee8$(_context8) {
         while (1) {
@@ -269,14 +272,15 @@ describe('components', function () {
 
             case 2:
               cya = checkCYA(container);
-              _cya$childNodes2 = _slicedToArray(cya.childNodes, 4), title = _cya$childNodes2[2], civilServant = _cya$childNodes2[3];
+              _cya$childNodes2 = _slicedToArray(cya.childNodes, 4), title = _cya$childNodes2[2], cyaChildNode = _cya$childNodes2[3];
+              civilServant = cyaChildNode.childNodes[0];
               expect(title.textContent).toEqual('Are you a civil servant?');
               expect(civilServant.tagName).toEqual('DL');
               expect(civilServant.classList).toContain("govuk-!-margin-bottom-".concat(_CheckYourAnswers.DEFAULT_MARGIN_BOTTOM));
               _civilServant$childNo = _slicedToArray(civilServant.childNodes, 1), status = _civilServant$childNo[0];
               checkRow(status, 'Are you a civil servant?', 'Yes', true);
 
-            case 9:
+            case 10:
             case "end":
               return _context8.stop();
           }
@@ -284,7 +288,7 @@ describe('components', function () {
       }, _callee8);
     })));
     it('should show editable page components correctly with page titles hidden', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee10() {
-      var cya, _cya$childNodes3, civilServant, _civilServant$childNo2, status;
+      var cya, _cya$childNodes3, cyaChildNode, civilServant, _civilServant$childNo2, status;
 
       return regeneratorRuntime.wrap(function _callee10$(_context10) {
         while (1) {
@@ -313,15 +317,16 @@ describe('components', function () {
 
             case 2:
               cya = checkCYA(container);
-              _cya$childNodes3 = _slicedToArray(cya.childNodes, 3), civilServant = _cya$childNodes3[2]; // The title simply isn't returned
+              _cya$childNodes3 = _slicedToArray(cya.childNodes, 3), cyaChildNode = _cya$childNodes3[2]; // The title simply isn't returned
 
+              civilServant = cyaChildNode.childNodes[0];
               expect(civilServant.tagName).toEqual('DL');
               expect(civilServant.classList).toContain("govuk-!-margin-bottom-0"); // Changed margin if no titles
 
               _civilServant$childNo2 = _slicedToArray(civilServant.childNodes, 1), status = _civilServant$childNo2[0];
               checkRow(status, 'Are you a civil servant?', 'Yes', true);
 
-            case 8:
+            case 9:
             case "end":
               return _context10.stop();
           }
@@ -329,7 +334,7 @@ describe('components', function () {
       }, _callee10);
     })));
     it('should show no title if is set to hidden', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee12() {
-      var cya, _cya$childNodes4, names, _names$childNodes2, firstName, surname;
+      var cya, _cya$childNodes4, cyaChildNode, names, _names$childNodes2, firstName, surname;
 
       return regeneratorRuntime.wrap(function _callee12$(_context12) {
         while (1) {
@@ -358,19 +363,76 @@ describe('components', function () {
 
             case 2:
               cya = checkCYA(container);
-              _cya$childNodes4 = _slicedToArray(cya.childNodes, 1), names = _cya$childNodes4[0];
+              _cya$childNodes4 = _slicedToArray(cya.childNodes, 1), cyaChildNode = _cya$childNodes4[0];
+              names = cyaChildNode.childNodes[0];
               expect(names.tagName).toEqual('DL');
               expect(names.classList).toContain("govuk-!-margin-bottom-".concat(_CheckYourAnswers.DEFAULT_MARGIN_BOTTOM));
               _names$childNodes2 = _slicedToArray(names.childNodes, 2), firstName = _names$childNodes2[0], surname = _names$childNodes2[1];
               checkRow(firstName, 'First name', 'John', false);
               checkRow(surname, 'Last name', 'Smith', false);
 
-            case 9:
+            case 10:
             case "end":
               return _context12.stop();
           }
         }
       }, _callee12);
     })));
+    it('should render a group with one action button', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee14() {
+      var GROUP_PAGES, cya, namesGroup, firstNameRow, surname, changeButtonDiv, changeButton;
+      return regeneratorRuntime.wrap(function _callee14$(_context14) {
+        while (1) {
+          switch (_context14.prev = _context14.next) {
+            case 0:
+              GROUP_PAGES = _utils.default.FormPage.getAll(_groupOfRow.default.pages, _groupOfRow.default.components, _objectSpread({}, DATA));
+              _context14.next = 3;
+              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee13() {
+                return regeneratorRuntime.wrap(function _callee13$(_context13) {
+                  while (1) {
+                    switch (_context13.prev = _context13.next) {
+                      case 0:
+                        (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
+                          pages: GROUP_PAGES,
+                          onRowAction: ON_ROW_ACTION,
+                          onAction: ON_ACTION,
+                          groups: _groupOfRow.default.cya.groups
+                        }), container);
+
+                      case 1:
+                      case "end":
+                        return _context13.stop();
+                    }
+                  }
+                }, _callee13);
+              })));
+
+            case 3:
+              cya = checkCYA(container);
+              namesGroup = cya.childNodes[2];
+              firstNameRow = namesGroup.childNodes[0].childNodes[0];
+              expect(firstNameRow.childNodes.length).toEqual(2);
+              expect(firstNameRow.childNodes[0].textContent).toEqual('First name (optional)');
+              expect(firstNameRow.childNodes[0].tagName).toEqual('DT');
+              expect(firstNameRow.childNodes[1].textContent).toEqual('John');
+              expect(firstNameRow.childNodes[1].tagName).toEqual('DD');
+              surname = namesGroup.childNodes[0].childNodes[1];
+              expect(surname.childNodes.length).toEqual(2);
+              expect(surname.childNodes[0].textContent).toEqual('Last name (optional)');
+              expect(surname.childNodes[0].tagName).toEqual('DT');
+              expect(surname.childNodes[1].textContent).toEqual('Smith');
+              expect(surname.childNodes[1].tagName).toEqual('DD');
+              changeButtonDiv = namesGroup.childNodes[0].childNodes[2];
+              expect(changeButtonDiv.classList).toContain('change-group-button');
+              changeButton = changeButtonDiv.childNodes[0];
+              expect(changeButton.tagName).toEqual('A');
+              expect(changeButton.textContent).toEqual('Change names');
+
+            case 22:
+            case "end":
+              return _context14.stop();
+          }
+        }
+      }, _callee14);
+    })));
   });
 });

package/dist/components/FormRenderer/FormRenderer.test.js

@@ -89,7 +89,7 @@ describe('components', function () {
     };
 
     var getChangeLink = function getChangeLink(summaryList) {
-      var _summaryList$childNod = _slicedToArray(summaryList.childNodes[0].childNodes, 3),
+      var _summaryList$childNod = _slicedToArray(summaryList.childNodes[0].childNodes[0].childNodes, 3),
           actions = _summaryList$childNod[2];
 
       return actions.childNodes[0];
@@ -581,12 +581,12 @@ describe('components', function () {
             case 5:
               taskList = container.childNodes[0].childNodes[1]; //Check status's are correct
 
-              firstTaskStatus = taskList.childNodes[4].childNodes[0].childNodes[1];
+              firstTaskStatus = taskList.childNodes[5].childNodes[0].childNodes[1];
               expect(firstTaskStatus.textContent).toEqual(_models.TaskStates.DETAILS[_models.TaskStates.TYPES.NOT_STARTED].label);
-              secondTaskStatus = taskList.childNodes[4].childNodes[1].childNodes[1];
+              secondTaskStatus = taskList.childNodes[5].childNodes[1].childNodes[1];
               expect(secondTaskStatus.textContent).toEqual(_models.TaskStates.DETAILS[_models.TaskStates.TYPES.CANNOT_START_YET].label); //Launch first task
 
-              firstTask = taskList.childNodes[4].childNodes[0].childNodes[0].childNodes[0];
+              firstTask = taskList.childNodes[5].childNodes[0].childNodes[0].childNodes[0];
               expect(firstTask.textContent).toEqual('Date, location and mode details');
 
               _react.fireEvent.click(firstTask, {}); //Fill first page and navigate
@@ -638,11 +638,11 @@ describe('components', function () {
               _react.fireEvent.click(cyaPage.childNodes[5].childNodes[0], {}); //Should be back at task list
 
 
-              expect(container.childNodes[0].childNodes[0].textContent).toEqual('Event at the border'); //Check status's are correct
+              expect(container.childNodes[0].childNodes[0].textContent).toEqual('Task List Form'); //Check status's are correct
 
-              firstTaskStatus = container.childNodes[0].childNodes[1].childNodes[4].childNodes[0].childNodes[1];
+              firstTaskStatus = container.childNodes[0].childNodes[1].childNodes[5].childNodes[0].childNodes[1];
               expect(firstTaskStatus.textContent).toEqual(_models.TaskStates.DETAILS[_models.TaskStates.TYPES.COMPLETE].label);
-              secondTaskStatus = container.childNodes[0].childNodes[1].childNodes[4].childNodes[1].childNodes[1];
+              secondTaskStatus = container.childNodes[0].childNodes[1].childNodes[5].childNodes[1].childNodes[1];
               expect(secondTaskStatus.textContent).toEqual(_models.TaskStates.DETAILS[_models.TaskStates.TYPES.NOT_STARTED].label); //Check final data submitted to backend is as expected
 
               finalSubmit = ON_SUBMIT_CALLS[ON_SUBMIT_CALLS.length - 1];
@@ -691,7 +691,7 @@ describe('components', function () {
             case 4:
               taskList = container.childNodes[0].childNodes[1]; //Launch first task
 
-              _react.fireEvent.click(taskList.childNodes[4].childNodes[0].childNodes[0].childNodes[0], {}); //Fill first page and navigate
+              _react.fireEvent.click(taskList.childNodes[5].childNodes[0].childNodes[0].childNodes[0], {}); //Fill first page and navigate
 
 
               newPage = container.childNodes[0].childNodes[0];
@@ -730,7 +730,7 @@ describe('components', function () {
               _react.fireEvent.click(container.childNodes[0].childNodes[0].childNodes[5].childNodes[0], {}); //Launch same task again
 
 
-              _react.fireEvent.click(container.childNodes[0].childNodes[1].childNodes[4].childNodes[0].childNodes[0].childNodes[0], {}); //Should be at CYA page
+              _react.fireEvent.click(container.childNodes[0].childNodes[1].childNodes[5].childNodes[0].childNodes[0].childNodes[0], {}); //Should be at CYA page
 
 
               expect(container.childNodes[0].childNodes[0].childNodes[0].textContent).toEqual('Check your answers');

package/dist/components/FormRenderer/helpers/canActionProceed.js

@@ -22,7 +22,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  */
 var canActionProceed = function canActionProceed(action, page, onError) {
   if (action.validate) {
-    var errors = _utils.default.Validate.page(page.components, page.formData);
+    var errors = _utils.default.Validate.page(page);
 
     onError(errors);
     return errors.length === 0;

package/dist/components/FormRenderer/helpers/canCYASubmit.js

@@ -32,7 +32,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 var canCYASubmit = function canCYASubmit(pages, onError) {
   var errors = [];
   pages.forEach(function (p) {
-    errors.push.apply(errors, _toConsumableArray(_utils.default.Validate.page(p.components, p.formData)));
+    errors.push.apply(errors, _toConsumableArray(_utils.default.Validate.page(p)));
   });
   onError(errors);
   return errors.length === 0;

package/dist/components/PageActions/ActionButton.js

@@ -32,6 +32,7 @@ var ActionButton = function ActionButton(_ref) {
       attrs = _objectWithoutProperties(_ref, _excluded);
 
   var action = typeof _action === 'string' ? _models.PageAction.DEFAULTS[_action] : _action;
+  var actionLabel = _models.PageAction.DEFAULTS[_action.type];
 
   if (!action) {
     return null;
@@ -44,7 +45,7 @@ var ActionButton = function ActionButton(_ref) {
     onClick: function onClick() {
       return onAction(action);
     }
-  }), action.label || DEFAULT_LABEL);
+  }), action.label || (actionLabel === null || actionLabel === void 0 ? void 0 : actionLabel.label) || DEFAULT_LABEL);
 };
 
 ActionButton.propTypes = {

package/dist/components/SummaryList/GroupAction.js

@@ -0,0 +1,68 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _copReactComponents = require("@ukhomeoffice/cop-react-components");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _getGroupActionAttributes = _interopRequireDefault(require("./helpers/getGroupActionAttributes"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var GroupAction = function GroupAction(_ref) {
+  var group = _ref.group;
+
+  var _useState = (0, _react.useState)({}),
+      _useState2 = _slicedToArray(_useState, 2),
+      attrs = _useState2[0],
+      setAttrs = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    setAttrs((0, _getGroupActionAttributes.default)(group));
+  }, [group, setAttrs]);
+
+  if (!group.action) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_copReactComponents.Link, attrs, group.action.label, group.action.aria_suffix && /*#__PURE__*/_react.default.createElement("span", {
+    className: "mobile-text govuk-link"
+  }, ' ', "".concat(group.action.aria_suffix)));
+};
+
+GroupAction.propTypes = {
+  group: _propTypes.default.shape({
+    action: _propTypes.default.shape({
+      label: _propTypes.default.string.isRequired,
+      page: _propTypes.default.string,
+      aria_suffix: _propTypes.default.string,
+      onAction: _propTypes.default.func
+    })
+  }).isRequired
+};
+var _default = GroupAction;
+exports.default = _default;

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

@@ -0,0 +1,94 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _GroupAction = _interopRequireDefault(require("./GroupAction"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Global imports
+// Local imports
+describe('components', function () {
+  describe('SummaryList.GroupAction', function () {
+    it('should handle a group row without an action', function () {
+      var ROW = {};
+
+      var _render = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_GroupAction.default, {
+        group: ROW
+      })),
+          container = _render.container;
+
+      expect(container.childNodes.length).toEqual(0);
+    });
+    it('should handle a row with an href in the action', function () {
+      var PAGE = 'alpha';
+      var ROW = {
+        action: {
+          page: PAGE,
+          label: 'Change'
+        }
+      };
+
+      var _render2 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_GroupAction.default, {
+        group: ROW
+      })),
+          container = _render2.container;
+
+      var link = container.childNodes[0];
+      expect(link.tagName).toEqual('A');
+      expect(link.getAttribute('href')).toEqual("/".concat(PAGE));
+      expect(link.textContent).toEqual(ROW.action.label);
+    });
+    it('should render an aria_suffix appropriately', function () {
+      var PAGE = 'alpha';
+      var ROW = {
+        action: {
+          page: PAGE,
+          label: 'Change',
+          aria_suffix: 'the thing'
+        }
+      };
+
+      var _render3 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_GroupAction.default, {
+        group: ROW
+      })),
+          container = _render3.container;
+
+      var link = container.childNodes[0];
+      expect(link.tagName).toEqual('A');
+      expect(link.getAttribute('href')).toEqual("/".concat(PAGE));
+      expect(link.textContent).toEqual("".concat(ROW.action.label, " ").concat(ROW.action.aria_suffix));
+    });
+    it('should handle a row with an onAction in the action', function () {
+      var ON_ACTION_CALLS = [];
+
+      var ON_ACTION = function ON_ACTION(row) {
+        ON_ACTION_CALLS.push(row);
+      };
+
+      var ROW = {
+        action: {
+          onAction: ON_ACTION,
+          label: 'Change'
+        }
+      };
+
+      var _render4 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_GroupAction.default, {
+        group: ROW
+      })),
+          container = _render4.container;
+
+      var link = container.childNodes[0];
+      expect(link.tagName).toEqual('A');
+      expect(link.getAttribute('onClick')).toBeDefined();
+      expect(link.textContent).toEqual(ROW.action.label);
+
+      _react.fireEvent.click(link, {});
+
+      expect(ON_ACTION_CALLS.length).toEqual(1);
+      expect(ON_ACTION_CALLS[0]).toEqual(ROW);
+    });
+  });
+});

package/dist/components/SummaryList/SummaryList.js

@@ -11,11 +11,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
 
+var _GroupAction = _interopRequireDefault(require("./GroupAction"));
+
 var _RowAction = _interopRequireDefault(require("./RowAction"));
 
 require("./SummaryList.scss");
 
-var _excluded = ["rows", "noChangeAction", "classBlock", "classModifiers", "className"];
+var _excluded = ["rows", "noChangeAction", "isGroup", "classBlock", "classModifiers", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -31,6 +33,7 @@ exports.DEFAULT_CLASS = DEFAULT_CLASS;
 var SummaryList = function SummaryList(_ref) {
   var rows = _ref.rows,
       noChangeAction = _ref.noChangeAction,
+      isGroup = _ref.isGroup,
       classBlock = _ref.classBlock,
       classModifiers = _ref.classModifiers,
       className = _ref.className,
@@ -38,22 +41,30 @@ var SummaryList = function SummaryList(_ref) {
 
   var classes = _copReactComponents.Utils.classBuilder(classBlock, classModifiers, className);
 
-  return /*#__PURE__*/_react.default.createElement("dl", _extends({}, attrs, {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "group-of-rows"
+  }, /*#__PURE__*/_react.default.createElement("dl", _extends({}, attrs, {
     className: classes()
   }), rows.map(function (row) {
+    var _row$component;
+
     return /*#__PURE__*/_react.default.createElement("div", {
       key: "".concat(row.pageId, "_").concat(row.fieldId),
       className: classes('row')
     }, /*#__PURE__*/_react.default.createElement("dt", {
       className: classes('key')
-    }, row.key), /*#__PURE__*/_react.default.createElement("dd", {
+    }, row.key, !((_row$component = row.component) !== null && _row$component !== void 0 && _row$component.required) && " (optional)"), /*#__PURE__*/_react.default.createElement("dd", {
       className: classes('value')
     }, row.value), !noChangeAction && /*#__PURE__*/_react.default.createElement("dd", {
       className: classes('actions')
     }, row.action && /*#__PURE__*/_react.default.createElement(_RowAction.default, {
       row: row
     })));
-  }));
+  }), isGroup && /*#__PURE__*/_react.default.createElement("div", {
+    className: "change-group-button"
+  }, /*#__PURE__*/_react.default.createElement(_GroupAction.default, {
+    group: rows[0]
+  }))));
 };
 
 SummaryList.propTypes = {

package/dist/components/SummaryList/SummaryList.scss

@@ -1,17 +1,41 @@
 @import 'node_modules/govuk-frontend/govuk/_base';
 @import 'node_modules/govuk-frontend/govuk/components/summary-list/_summary-list';
 
-.govuk-summary-list__actions {
+// .govuk-summary-list__actions {
+//   .govuk-link {
+//     float: right;
+//     color: govuk-colour('blue');
+//     cursor: pointer;
+//   }
+// }
+
+.changeRow {
   .govuk-link {
+    float: right;
     color: govuk-colour('blue');
     cursor: pointer;
   }
 }
 
-.caseview__key {
-  font-weight: normal;
+.group-of-rows {
+  position:relative;
+}
+ 
+.mobile-text{
+  text-transform: lowercase;
 }
 
-.caseview__value {
-  @include govuk-typography-weight-bold;
+@media screen and (min-width: 640px) {
+   .change-group-button {
+    position: absolute;
+    top: -47px;
+    right: 0;
+  }
+
+  .mobile-text{
+    display:none; 
+  }
+
+
 }
+

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

@@ -113,7 +113,7 @@ describe('components', function () {
             value = _checkRow2[1],
             actions = _checkRow2[2];
 
-        expect(key.textContent).toEqual(row.key);
+        expect(key.textContent).toEqual("".concat(row.key, " (optional)"));
         expect(value.textContent).toEqual(row.value);
         expect(actions.childNodes.length).toEqual(0);
       });
@@ -148,7 +148,7 @@ describe('components', function () {
             value = _checkRow4[1],
             actions = _checkRow4[2];
 
-        expect(key.textContent).toEqual(row.key);
+        expect(key.textContent).toEqual("".concat(row.key, " (optional)"));
         expect(value.childNodes.length).toEqual(1);
         var valueDiv = value.childNodes[0];
         expect(valueDiv.tagName).toEqual('DIV');
@@ -199,7 +199,7 @@ describe('components', function () {
             value = _checkRow6[1],
             actions = _checkRow6[2];
 
-        expect(key.textContent).toEqual(row.key);
+        expect(key.textContent).toEqual("".concat(row.key, " (optional)"));
         expect(value.textContent).toEqual(row.value);
         var a = actions.childNodes[0];
         expect(a.textContent).toEqual(row.action.label);
@@ -240,7 +240,50 @@ describe('components', function () {
             key = _checkRowNoChangeActi2[0],
             value = _checkRowNoChangeActi2[1];
 
-        expect(key.textContent).toEqual(row.key);
+        expect(key.textContent).toEqual("".concat(row.key, " (optional)"));
+        expect(value.childNodes.length).toEqual(1);
+        var valueDiv = value.childNodes[0];
+        expect(valueDiv.tagName).toEqual('DIV');
+        expect(valueDiv.textContent).toEqual(VALUES[index]);
+      });
+    });
+    it('should render groups of rows corretly', function () {
+      var ID = 'test-id';
+      var VALUES = ['Alpha component value', 'Bravo component value', 'Charlie component value'];
+      var ISGROUP = true;
+      var ROWS = [{
+        pageId: 'p1',
+        fieldId: 'a',
+        key: 'Alpha',
+        value: /*#__PURE__*/_react2.default.createElement("div", null, VALUES[0])
+      }, {
+        pageId: 'p1',
+        fieldId: 'b',
+        key: 'Bravo',
+        value: /*#__PURE__*/_react2.default.createElement("div", null, VALUES[1])
+      }, {
+        pageId: 'p1',
+        fieldId: 'c',
+        key: 'Charlie',
+        value: /*#__PURE__*/_react2.default.createElement("div", null, VALUES[2])
+      }];
+
+      var _render6 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_SummaryList.default, {
+        "data-testid": ID,
+        rows: ROWS,
+        isGroup: ISGROUP
+      })),
+          container = _render6.container;
+
+      var summaryList = checkSummaryList(container, ID);
+      expect(summaryList.childNodes.length).toEqual(ROWS.length + 1);
+      ROWS.forEach(function (row, index) {
+        var _checkRow7 = checkRow(summaryList, index),
+            _checkRow8 = _slicedToArray(_checkRow7, 2),
+            key = _checkRow8[0],
+            value = _checkRow8[1];
+
+        expect(key.textContent).toEqual("".concat(row.key, " (optional)"));
         expect(value.childNodes.length).toEqual(1);
         var valueDiv = value.childNodes[0];
         expect(valueDiv.tagName).toEqual('DIV');

package/dist/components/SummaryList/helpers/getGroupActionAttributes.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var getGroupActionAttributes = function getGroupActionAttributes(groupRow) {
+  if (groupRow && Object.prototype.hasOwnProperty.call(groupRow, 'action')) {
+    if (typeof groupRow.action.onAction === 'function') {
+      return {
+        onClick: function onClick() {
+          return groupRow.action.onAction(groupRow);
+        }
+      };
+    } else if (groupRow.action.page) {
+      return {
+        href: "/".concat(groupRow.action.page)
+      };
+    }
+  }
+
+  return {};
+};
+
+var _default = getGroupActionAttributes;
+exports.default = _default;