@ukhomeoffice/cop-react-form-renderer 2.6.1 → 2.7.1

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/FormComponent/Container.test.js

@@ -4,6 +4,8 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 
 var _react = require("@testing-library/react");
 
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
 var _react2 = _interopRequireDefault(require("react"));
 
 var _models = require("../../models");
@@ -16,6 +18,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
@@ -23,16 +29,20 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 describe('components.FormComponent.Container', function () {
-  var _ID;
+  var _ID, _FORM_DATA;
 
   var ID = 'container';
   var NESTED_ID = 'nested';
   var TEXT_ID = 'text';
   var TEXT_VALUE = 'alpha';
   var NESTED_TEXT_VALUE = 'charlie';
-
-  var FORM_DATA = _defineProperty({}, ID, (_ID = {}, _defineProperty(_ID, TEXT_ID, TEXT_VALUE), _defineProperty(_ID, NESTED_ID, _defineProperty({}, TEXT_ID, NESTED_TEXT_VALUE)), _ID));
-
+  var FORM_DATA = (_FORM_DATA = {}, _defineProperty(_FORM_DATA, ID, (_ID = {}, _defineProperty(_ID, TEXT_ID, TEXT_VALUE), _defineProperty(_ID, NESTED_ID, _defineProperty({}, TEXT_ID, NESTED_TEXT_VALUE)), _ID)), _defineProperty(_FORM_DATA, _FormComponent.META_PROPERTY, _defineProperty({}, _FormComponent.META_DOCUMENTS_PROPERTY, [{
+    field: 'epsilon.zeta',
+    name: 'ez.jpg',
+    type: 'image/jpg',
+    extension: 'jpg',
+    url: 'http://files.com/ez.jpg'
+  }])), _FORM_DATA);
   var TEXT_COMPONENT = {
     id: TEXT_ID,
     fieldId: TEXT_ID,
@@ -201,22 +211,91 @@ describe('components.FormComponent.Container', function () {
       }
     }, _callee3);
   })));
-  it('should handle a null value appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
-    var CONTAINER, _render4, container, c, formGroup, label, hint, input;
+  it('should handle a change to a file type component appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
+    var FILE_ID, ON_CHANGE_EVENTS, ON_CHANGE, CONTAINER, _render4, container, c, formGroup, input, FILE_EXTENSION, FILE_NAME, FILE_TYPE, str, blob, FILE, containerChangeValue, metaChangeValue;
 
     return regeneratorRuntime.wrap(function _callee4$(_context4) {
       while (1) {
         switch (_context4.prev = _context4.next) {
           case 0:
+            FILE_ID = 'file';
+            ON_CHANGE_EVENTS = [];
+
+            ON_CHANGE = function ON_CHANGE(e) {
+              ON_CHANGE_EVENTS.push(e);
+            };
+
             CONTAINER = {
               id: ID,
               fieldId: ID,
               type: _models.ComponentTypes.CONTAINER,
-              components: [TEXT_COMPONENT]
+              components: [{
+                id: FILE_ID,
+                fieldId: FILE_ID,
+                full_path: "".concat(ID, ".").concat(FILE_ID),
+                type: _models.ComponentTypes.FILE,
+                label: 'File component'
+              }]
             };
             _render4 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+              component: CONTAINER,
+              value: FORM_DATA[ID],
+              formData: FORM_DATA,
+              onChange: ON_CHANGE
+            })), container = _render4.container; // Get hold of the text input.
+
+            c = container.childNodes[0];
+            formGroup = c.childNodes[0];
+            input = formGroup.childNodes[2].childNodes[0];
+            FILE_EXTENSION = 'json';
+            FILE_NAME = "test.".concat(FILE_EXTENSION);
+            FILE_TYPE = 'application/JSON';
+            str = JSON.stringify({
+              alpha: 'bravo'
+            });
+            blob = new Blob([str]);
+            FILE = new File([blob], FILE_NAME, {
+              type: FILE_TYPE
+            });
+
+            _userEvent.default.upload(input, FILE); // And confirm the formData has been changed.
+
+
+            expect(ON_CHANGE_EVENTS.length).toEqual(2); // One for the file, another for the meta.
+
+            expect(ON_CHANGE_EVENTS[0].target.name).toEqual(ID);
+            expect(ON_CHANGE_EVENTS[1].target.name).toEqual(_FormComponent.META_PROPERTY);
+            containerChangeValue = JSON.parse(JSON.stringify(ON_CHANGE_EVENTS[0].target.value));
+            metaChangeValue = JSON.parse(JSON.stringify(ON_CHANGE_EVENTS[1].target.value));
+            expect(metaChangeValue.documents.length).toEqual(2); // Existing one, plus this new one.
+
+            expect(metaChangeValue.documents[1]).toMatchObject(_objectSpread(_objectSpread({}, containerChangeValue[FILE_ID]), {}, {
+              field: "".concat(ID, ".").concat(FILE_ID)
+            }));
+
+          case 22:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })));
+  it('should handle a null value appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
+    var CONTAINER, _render5, container, c, formGroup, label, hint, input;
+
+    return regeneratorRuntime.wrap(function _callee5$(_context5) {
+      while (1) {
+        switch (_context5.prev = _context5.next) {
+          case 0:
+            CONTAINER = {
+              id: ID,
+              fieldId: ID,
+              type: _models.ComponentTypes.CONTAINER,
+              components: [TEXT_COMPONENT]
+            };
+            _render5 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
               component: CONTAINER
-            })), container = _render4.container; // Check the container itself.
+            })), container = _render5.container; // Check the container itself.
 
             c = container.childNodes[0];
             expect(c.tagName).toEqual('DIV');
@@ -242,9 +321,9 @@ describe('components.FormComponent.Container', function () {
 
           case 22:
           case "end":
-            return _context4.stop();
+            return _context5.stop();
         }
       }
-    }, _callee4);
+    }, _callee5);
   })));
 });

package/dist/components/FormComponent/FormComponent.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.DEFAULT_CONTAINER_CLASS = void 0;
+exports.default = exports.META_PROPERTY = exports.META_DOCUMENTS_PROPERTY = exports.DEFAULT_CONTAINER_CLASS = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -50,6 +50,10 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+var META_PROPERTY = 'meta';
+exports.META_PROPERTY = META_PROPERTY;
+var META_DOCUMENTS_PROPERTY = 'documents';
+exports.META_DOCUMENTS_PROPERTY = META_DOCUMENTS_PROPERTY;
 var DEFAULT_CONTAINER_CLASS = 'hods-form-container';
 exports.DEFAULT_CONTAINER_CLASS = DEFAULT_CONTAINER_CLASS;
 
@@ -64,15 +68,21 @@ var Container = function Container(_ref) {
   var onComponentChange = function onComponentChange(_ref2) {
     var target = _ref2.target;
 
-    var val = _objectSpread(_objectSpread({}, value), {}, _defineProperty({}, target.name, target.value));
-
     if (typeof onChange === 'function') {
-      onChange({
-        target: {
-          name: container.fieldId,
-          value: val
-        }
-      });
+      if (target.name === META_PROPERTY) {
+        onChange({
+          target: target
+        });
+      } else {
+        var val = _objectSpread(_objectSpread({}, value), {}, _defineProperty({}, target.name, target.value));
+
+        onChange({
+          target: {
+            name: container.fieldId,
+            value: val
+          }
+        });
+      }
     }
   };
 
@@ -88,12 +98,13 @@ var Container = function Container(_ref) {
     className: DEFAULT_CONTAINER_CLASS,
     id: container.id
   }), container.components && container.components.filter(shouldShow).map(function (component, index) {
-    var val = value ? value[component.fieldId] : '';
+    var defaultValue = component.type === _models.ComponentTypes.FILE ? {} : '';
+    var val = value ? value[component.fieldId] : defaultValue;
     return /*#__PURE__*/_react.default.createElement(FormComponent, {
       key: index,
       component: component,
       formData: formData,
-      value: val || '',
+      value: val || defaultValue,
       wrap: wrap,
       onChange: onComponentChange
     });
@@ -144,22 +155,60 @@ var FormComponent = function FormComponent(_ref3) {
     }
   }, [component, data, status]);
 
+  var changeMetaDocuments = function changeMetaDocuments(document) {
+    var _formData$META_PROPER;
+
+    var documents = (((_formData$META_PROPER = formData[META_PROPERTY]) === null || _formData$META_PROPER === void 0 ? void 0 : _formData$META_PROPER.documents) || []).filter(function (d) {
+      return d.field !== component.full_path;
+    });
+
+    if (document) {
+      documents.push(_objectSpread(_objectSpread({}, document), {}, {
+        field: component.full_path
+      }));
+    }
+
+    onChange({
+      target: {
+        name: META_PROPERTY,
+        value: _objectSpread(_objectSpread({}, formData[META_PROPERTY]), {}, {
+          documents: documents
+        })
+      }
+    });
+  };
+
+  var onComponentChange = function onComponentChange(_ref4) {
+    var target = _ref4.target;
+
+    if (typeof onChange === 'function') {
+      onChange({
+        target: target
+      });
+
+      if (component.type === _models.ComponentTypes.FILE) {
+        changeMetaDocuments(target.value);
+      }
+    }
+  };
+
   if (component.type === _models.ComponentTypes.CONTAINER) {
     return /*#__PURE__*/_react.default.createElement(Container, {
       container: component,
       wrap: wrap,
-      onChange: onChange,
+      onChange: onComponentChange,
       value: value,
       formData: formData
     });
   }
 
+  var defaultValue = component.type === _models.ComponentTypes.FILE ? {} : '';
   return _utils.default.Component.get(_objectSpread(_objectSpread(_objectSpread({}, attrs), component), {}, {
     label: component.label || '',
     hint: component.hint || '',
     options: options,
-    value: value || '',
-    onChange: onChange
+    value: value || defaultValue,
+    onChange: onComponentChange
   }), wrap, hooks.onGetComponent);
 };
 

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];

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/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);
+    });
+  });
+});