@ukhomeoffice/cop-react-form-renderer 5.25.1 → 5.26.0

package/dist/components/CheckYourAnswers/CheckYourAnswers.js

@@ -8,8 +8,10 @@ exports.default = exports.DEFAULT_TITLE = exports.DEFAULT_MARGIN_BOTTOM = export
 var _copReactComponents = require("@ukhomeoffice/cop-react-components");
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _getCYAAction = _interopRequireDefault(require("../../utils/CheckYourAnswers/getCYAAction"));
 var _hooks = require("../../hooks");
 var _models = require("../../models");
+var _RowAction = _interopRequireDefault(require("../SummaryList/RowAction"));
 var _utils = _interopRequireDefault(require("../../utils"));
 var _PageActions = _interopRequireDefault(require("../PageActions"));
 var _SummaryList = _interopRequireDefault(require("../SummaryList"));
@@ -130,6 +132,24 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
       return group.pageId === pageId;
     });
   };
+  var getPageHeading = function getPageHeading(page, size) {
+    var _page$cya_link;
+    if (!((_page$cya_link = page.cya_link) !== null && _page$cya_link !== void 0 && _page$cya_link.singleChangeLink) || noChangeAction) {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, size === 's' && /*#__PURE__*/_react.default.createElement(_copReactComponents.SmallHeading, null, _utils.default.interpolateString(page.title, page.formData)), size === 'm' && /*#__PURE__*/_react.default.createElement(_copReactComponents.MediumHeading, null, _utils.default.interpolateString(page.title, page.formData)));
+    }
+    var headingAction = (0, _getCYAAction.default)(false, page, onRowAction);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "heading-with-action"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "heading-text"
+    }, size === 's' && /*#__PURE__*/_react.default.createElement(_copReactComponents.SmallHeading, null, _utils.default.interpolateString(page.title, page.formData)), size === 'm' && /*#__PURE__*/_react.default.createElement(_copReactComponents.MediumHeading, null, _utils.default.interpolateString(page.title, page.formData))), /*#__PURE__*/_react.default.createElement("div", {
+      className: "heading-action"
+    }, /*#__PURE__*/_react.default.createElement(_RowAction.default, {
+      row: {
+        action: headingAction
+      }
+    })));
+  };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: DEFAULT_CLASS
   }, title && !hide_title && /*#__PURE__*/_react.default.createElement(_copReactComponents.LargeHeading, {
@@ -147,11 +167,12 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
       });
       return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
         key: taskIndex
-      }, /*#__PURE__*/_react.default.createElement(_copReactComponents.MediumHeading, null, filterPages.length > 0 && task.name), filterPages.map(function (page, pageIndex) {
+      }, /*#__PURE__*/_react.default.createElement(_copReactComponents.MediumHeading, null, filterPages.length > 0 && task.displayName || task.name), filterPages.map(function (page, pageIndex) {
         var hideActionButtons = isGroup(page.id) || noChangeAction;
+        var showHeading = !hide_page_titles && page.title && !isGroup(page.id);
         return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
           key: pageIndex
-        }, !hide_page_titles && page.title && !isGroup(page.id) && /*#__PURE__*/_react.default.createElement(_copReactComponents.SmallHeading, null, _utils.default.interpolateString(page.title, page.formData)), /*#__PURE__*/_react.default.createElement(_SummaryList.default, {
+        }, showHeading && getPageHeading(page, 's'), /*#__PURE__*/_react.default.createElement(_SummaryList.default, {
           rows: page.rows,
           classModifiers: summaryListClassModifiers,
           noChangeAction: hideActionButtons,
@@ -165,9 +186,10 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
     var currentGroup = isGroup(page.id) ? getGroupForPage(page.id) : undefined;
     var className = "govuk-!-margin-bottom-".concat(pageMarginBottom);
     var hideActionButtons = isGroup(page.id) || noChangeAction;
+    var showHeading = !hide_page_titles && page.title && !isGroup(page.id);
     return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
       key: pageIndex
-    }, !hide_page_titles && page.title && !isGroup(page.id) && /*#__PURE__*/_react.default.createElement(_copReactComponents.MediumHeading, null, _utils.default.interpolateString(page.title, page.formData)), isGroup(page.id) && /*#__PURE__*/_react.default.createElement("div", {
+    }, showHeading && getPageHeading(page, 'm'), isGroup(page.id) && /*#__PURE__*/_react.default.createElement("div", {
       className: "group-title"
     }, /*#__PURE__*/_react.default.createElement(_copReactComponents.MediumHeading, null, currentGroup.title || page.title)), /*#__PURE__*/_react.default.createElement(_SummaryList.default, {
       className: className,

package/dist/components/CheckYourAnswers/CheckYourAnswers.scss

@@ -10,3 +10,34 @@
 .group-title{
     padding-right: 75px;
 }
+
+.heading-with-action {
+  display: flex;
+  flex-direction: row;
+}
+
+.heading-text {
+  width: 80%
+}
+
+.heading-action {
+  width: 20%;
+  text-align: right;
+}
+
+@media screen and (max-width: 640px) {
+  .heading-with-action {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .heading-text {
+    width: 100%
+  }
+  
+  .heading-action {
+    margin-bottom: govuk-spacing(3);
+    width: 20%;
+    text-align: left;
+  }
+}

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

@@ -13,6 +13,7 @@ var _userProfile = _interopRequireDefault(require("../../json/userProfile.json")
 var _groupData = _interopRequireDefault(require("../../json/group.data.json"));
 var _group = _interopRequireDefault(require("../../json/group.json"));
 var _groupOfRow = _interopRequireDefault(require("../../json/groupOfRow.json"));
+var _models = require("../../models");
 var _setupTests = require("../../setupTests");
 var _utils = _interopRequireDefault(require("../../utils"));
 var _CheckYourAnswers = _interopRequireWildcard(require("./CheckYourAnswers"));
@@ -260,15 +261,136 @@ 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, cyaChildNode, names, _names$childNodes2, firstName, surname;
+    it('should only show change link next to the heading when the page is configured to only have a single change link', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee12() {
+      var CUSTOM_PAGES, cya, _cya$childNodes4, title, cyaChildNode, titleText, titleAction, civilServant, _civilServant$childNo3, status;
       return _regeneratorRuntime().wrap(function _callee12$(_context12) {
         while (1) switch (_context12.prev = _context12.next) {
           case 0:
-            _context12.next = 2;
+            CUSTOM_PAGES = PAGES.map(function (page) {
+              return _objectSpread(_objectSpread({}, page), {}, {
+                cya_link: {
+                  page: page.id,
+                  aria_suffix: 'page details',
+                  singleChangeLink: true
+                }
+              });
+            });
+            _context12.next = 3;
             return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee11() {
               return _regeneratorRuntime().wrap(function _callee11$(_context11) {
                 while (1) switch (_context11.prev = _context11.next) {
+                  case 0:
+                    (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
+                      pages: CUSTOM_PAGES,
+                      onRowAction: ON_ROW_ACTION,
+                      onAction: ON_ACTION
+                    }), container);
+                  case 1:
+                  case "end":
+                    return _context11.stop();
+                }
+              }, _callee11);
+            })));
+          case 3:
+            cya = checkCYA(container);
+            _cya$childNodes4 = _slicedToArray(cya.childNodes, 4), title = _cya$childNodes4[2], cyaChildNode = _cya$childNodes4[3];
+            expect(title.tagName).toEqual('DIV');
+            expect(title.classList).toContain('heading-with-action');
+            titleText = title.children[0];
+            expect(titleText.tagName).toEqual('DIV');
+            expect(titleText.classList).toContain('heading-text');
+            expect(titleText.textContent).toEqual('Are you a civil servant?');
+            titleAction = title.children[1];
+            expect(titleAction.tagName).toEqual('DIV');
+            expect(titleAction.classList).toContain('heading-action');
+            expect(titleAction.textContent).toEqual("Change page details");
+            civilServant = cyaChildNode.childNodes[0];
+            expect(civilServant.tagName).toEqual('DL');
+            _civilServant$childNo3 = _slicedToArray(civilServant.childNodes, 1), status = _civilServant$childNo3[0];
+            checkRow(status, 'Are you a civil servant?', 'Yes', false);
+          case 19:
+          case "end":
+            return _context12.stop();
+        }
+      }, _callee12);
+    })));
+    it('should only show change link next to the heading when the page is configured to have a single change link and form is a task list', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee14() {
+      var CUSTOM_PAGES, SECTIONS, taskHeading1, cya, _cya$childNodes5, title, cyaChildNode, titleText, titleAction, civilServant, _civilServant$childNo4, status;
+      return _regeneratorRuntime().wrap(function _callee14$(_context14) {
+        while (1) switch (_context14.prev = _context14.next) {
+          case 0:
+            CUSTOM_PAGES = PAGES.map(function (page) {
+              return _objectSpread(_objectSpread({}, page), {}, {
+                cya_link: {
+                  page: page.id,
+                  aria_suffix: 'page details',
+                  singleChangeLink: true
+                }
+              });
+            });
+            SECTIONS = [{
+              name: 'These are your tasks',
+              tasks: [{
+                name: 'Task 1',
+                state: 'complete',
+                pages: ['civil-servant-status']
+              }]
+            }];
+            _context14.next = 4;
+            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, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
+                      pages: CUSTOM_PAGES,
+                      onRowAction: ON_ROW_ACTION,
+                      onAction: ON_ACTION,
+                      hide_title: true,
+                      sections: SECTIONS,
+                      type: _models.FormTypes.TASK_CYA
+                    }), container);
+                  case 1:
+                  case "end":
+                    return _context13.stop();
+                }
+              }, _callee13);
+            })));
+          case 4:
+            taskHeading1 = container.childNodes[0].childNodes[0];
+            expect(taskHeading1.tagName).toEqual('H2');
+            expect(taskHeading1.textContent).toEqual('Task 1');
+            expect(taskHeading1.classList).toContain("govuk-heading-m");
+            cya = checkCYA(container);
+            _cya$childNodes5 = _slicedToArray(cya.childNodes, 3), title = _cya$childNodes5[1], cyaChildNode = _cya$childNodes5[2];
+            expect(title.tagName).toEqual('DIV');
+            expect(title.classList).toContain('heading-with-action');
+            titleText = title.children[0];
+            expect(titleText.tagName).toEqual('DIV');
+            expect(titleText.classList).toContain('heading-text');
+            expect(titleText.textContent).toEqual('Are you a civil servant?');
+            titleAction = title.children[1];
+            expect(titleAction.tagName).toEqual('DIV');
+            expect(titleAction.classList).toContain('heading-action');
+            expect(titleAction.textContent).toEqual("Change page details");
+            civilServant = cyaChildNode.childNodes[0];
+            expect(civilServant.tagName).toEqual('DL');
+            _civilServant$childNo4 = _slicedToArray(civilServant.childNodes, 1), status = _civilServant$childNo4[0];
+            checkRow(status, 'Are you a civil servant?', 'Yes', false);
+          case 24:
+          case "end":
+            return _context14.stop();
+        }
+      }, _callee14);
+    })));
+    it('should show no title if is set to hidden', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee16() {
+      var cya, _cya$childNodes6, cyaChildNode, names, _names$childNodes2, firstName, surname;
+      return _regeneratorRuntime().wrap(function _callee16$(_context16) {
+        while (1) switch (_context16.prev = _context16.next) {
+          case 0:
+            _context16.next = 2;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee15() {
+              return _regeneratorRuntime().wrap(function _callee15$(_context15) {
+                while (1) switch (_context15.prev = _context15.next) {
                   case 0:
                     (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                       pages: PAGES,
@@ -278,13 +400,13 @@ describe('components', function () {
                     }), container);
                   case 1:
                   case "end":
-                    return _context11.stop();
+                    return _context15.stop();
                 }
-              }, _callee11);
+              }, _callee15);
             })));
           case 2:
             cya = checkCYA(container);
-            _cya$childNodes4 = _slicedToArray(cya.childNodes, 1), cyaChildNode = _cya$childNodes4[0];
+            _cya$childNodes6 = _slicedToArray(cya.childNodes, 1), cyaChildNode = _cya$childNodes6[0];
             names = cyaChildNode.childNodes[0];
             expect(names.tagName).toEqual('DL');
             expect(names.classList).toContain("govuk-!-margin-bottom-".concat(_CheckYourAnswers.DEFAULT_MARGIN_BOTTOM));
@@ -293,14 +415,14 @@ describe('components', function () {
             checkRow(surname, 'Last name', 'Smith', false);
           case 10:
           case "end":
-            return _context12.stop();
+            return _context16.stop();
         }
-      }, _callee12);
+      }, _callee16);
     })));
-    it('should show task list in CYA style', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee14() {
+    it('should show task list in CYA style', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee18() {
       var sections, taskHeading1, namesPageHeading, taskHeading2, gradePageHeading;
-      return _regeneratorRuntime().wrap(function _callee14$(_context14) {
-        while (1) switch (_context14.prev = _context14.next) {
+      return _regeneratorRuntime().wrap(function _callee18$(_context18) {
+        while (1) switch (_context18.prev = _context18.next) {
           case 0:
             sections = [{
               name: 'These are your tasks',
@@ -314,10 +436,10 @@ describe('components', function () {
                 pages: ['grade']
               }]
             }];
-            _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) {
+            _context18.next = 3;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee17() {
+              return _regeneratorRuntime().wrap(function _callee17$(_context17) {
+                while (1) switch (_context17.prev = _context17.next) {
                   case 0:
                     (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                       pages: PAGES,
@@ -329,9 +451,9 @@ describe('components', function () {
                     }), container);
                   case 1:
                   case "end":
-                    return _context13.stop();
+                    return _context17.stop();
                 }
-              }, _callee13);
+              }, _callee17);
             })));
           case 3:
             taskHeading1 = container.childNodes[0].childNodes[0];
@@ -352,21 +474,70 @@ describe('components', function () {
             expect(gradePageHeading.classList).toContain("govuk-heading-s");
           case 19:
           case "end":
-            return _context14.stop();
+            return _context18.stop();
         }
-      }, _callee14);
+      }, _callee18);
     })));
-    it('Show answers from multiple address fields into in one DL', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee16() {
+    it('should show task list in CYA style and priotitise displayName over name for a task', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee20() {
+      var sections, taskHeading1, taskHeading2;
+      return _regeneratorRuntime().wrap(function _callee20$(_context20) {
+        while (1) switch (_context20.prev = _context20.next) {
+          case 0:
+            sections = [{
+              name: 'These are your tasks',
+              tasks: [{
+                name: 'Task 1',
+                displayName: 'Blue',
+                state: 'complete',
+                pages: ['names']
+              }, {
+                name: 'Task 2',
+                displayName: 'Red',
+                state: 'complete',
+                pages: ['grade']
+              }]
+            }];
+            _context20.next = 3;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee19() {
+              return _regeneratorRuntime().wrap(function _callee19$(_context19) {
+                while (1) switch (_context19.prev = _context19.next) {
+                  case 0:
+                    (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
+                      pages: PAGES,
+                      onRowAction: ON_ROW_ACTION,
+                      onAction: ON_ACTION,
+                      hide_title: true,
+                      sections: sections,
+                      type: "task-list-cya"
+                    }), container);
+                  case 1:
+                  case "end":
+                    return _context19.stop();
+                }
+              }, _callee19);
+            })));
+          case 3:
+            taskHeading1 = container.childNodes[0].childNodes[0];
+            expect(taskHeading1.textContent).toEqual('Blue');
+            taskHeading2 = container.childNodes[0].childNodes[2];
+            expect(taskHeading2.textContent).toEqual('Red');
+          case 7:
+          case "end":
+            return _context20.stop();
+        }
+      }, _callee20);
+    })));
+    it('Show answers from multiple address fields into in one DL', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee22() {
       var ADDRESS_DATA, GROUP_PAGES, cya, groupedComponent, keyGroup, valueGroup, changeButtonDiv, changeButton;
-      return _regeneratorRuntime().wrap(function _callee16$(_context16) {
-        while (1) switch (_context16.prev = _context16.next) {
+      return _regeneratorRuntime().wrap(function _callee22$(_context22) {
+        while (1) switch (_context22.prev = _context22.next) {
           case 0:
             ADDRESS_DATA = _utils.default.Data.setupForm(_group.default.pages, _group.default.components, _groupData.default);
             GROUP_PAGES = _utils.default.FormPage.getAll(_group.default.pages, _group.default.components, _objectSpread({}, ADDRESS_DATA));
-            _context16.next = 4;
-            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee15() {
-              return _regeneratorRuntime().wrap(function _callee15$(_context15) {
-                while (1) switch (_context15.prev = _context15.next) {
+            _context22.next = 4;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee21() {
+              return _regeneratorRuntime().wrap(function _callee21$(_context21) {
+                while (1) switch (_context21.prev = _context21.next) {
                   case 0:
                     (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                       pages: GROUP_PAGES,
@@ -376,9 +547,9 @@ describe('components', function () {
                     }), container);
                   case 1:
                   case "end":
-                    return _context15.stop();
+                    return _context21.stop();
                 }
-              }, _callee15);
+              }, _callee21);
             })));
           case 4:
             cya = checkCYA(container);
@@ -400,20 +571,20 @@ describe('components', function () {
             expect(changeButton.textContent).toEqual('Change address details');
           case 21:
           case "end":
-            return _context16.stop();
+            return _context22.stop();
         }
-      }, _callee16);
+      }, _callee22);
     })));
-    it('should render a group with one action button', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee18() {
+    it('should render a group with one action button', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee24() {
       var GROUP_PAGES, cya, namesGroup, firstNameRow, surname, changeButtonDiv, changeButton;
-      return _regeneratorRuntime().wrap(function _callee18$(_context18) {
-        while (1) switch (_context18.prev = _context18.next) {
+      return _regeneratorRuntime().wrap(function _callee24$(_context24) {
+        while (1) switch (_context24.prev = _context24.next) {
           case 0:
             GROUP_PAGES = _utils.default.FormPage.getAll(_groupOfRow.default.pages, _groupOfRow.default.components, _objectSpread({}, DATA));
-            _context18.next = 3;
-            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee17() {
-              return _regeneratorRuntime().wrap(function _callee17$(_context17) {
-                while (1) switch (_context17.prev = _context17.next) {
+            _context24.next = 3;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee23() {
+              return _regeneratorRuntime().wrap(function _callee23$(_context23) {
+                while (1) switch (_context23.prev = _context23.next) {
                   case 0:
                     (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                       pages: GROUP_PAGES,
@@ -423,9 +594,9 @@ describe('components', function () {
                     }), container);
                   case 1:
                   case "end":
-                    return _context17.stop();
+                    return _context23.stop();
                 }
-              }, _callee17);
+              }, _callee23);
             })));
           case 3:
             cya = checkCYA(container);
@@ -449,14 +620,14 @@ describe('components', function () {
             expect(changeButton.textContent).toEqual('Change names');
           case 22:
           case "end":
-            return _context18.stop();
+            return _context24.stop();
         }
-      }, _callee18);
+      }, _callee24);
     })));
-    it('should show page components corrently with interpolated title and cya_label, if label is missing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee20() {
-      var _PAGES, _COMPONENTS, T_PAGES, cya, _cya$childNodes5, cyaTitle, cyaChildNode, names, _names$childNodes3, firstName, surname, _firstName$childNodes, label;
-      return _regeneratorRuntime().wrap(function _callee20$(_context20) {
-        while (1) switch (_context20.prev = _context20.next) {
+    it('should show page components corrently with interpolated title and cya_label, if label is missing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee26() {
+      var _PAGES, _COMPONENTS, T_PAGES, cya, _cya$childNodes7, cyaTitle, cyaChildNode, names, _names$childNodes3, firstName, surname, _firstName$childNodes, label;
+      return _regeneratorRuntime().wrap(function _callee26$(_context26) {
+        while (1) switch (_context26.prev = _context26.next) {
           case 0:
             _PAGES = [].concat(_userProfile.default.pages); // eslint-disable-next-line no-template-curly-in-string
             _PAGES[0] = _objectSpread(_objectSpread({}, _PAGES[0]), {}, {
@@ -470,10 +641,10 @@ describe('components', function () {
               cya_label: "Text ${currentUser.familyName}"
             });
             T_PAGES = _utils.default.FormPage.getAll(_PAGES, _COMPONENTS, DATA);
-            _context20.next = 7;
-            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee19() {
-              return _regeneratorRuntime().wrap(function _callee19$(_context19) {
-                while (1) switch (_context19.prev = _context19.next) {
+            _context26.next = 7;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee25() {
+              return _regeneratorRuntime().wrap(function _callee25$(_context25) {
+                while (1) switch (_context25.prev = _context25.next) {
                   case 0:
                     (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                       pages: T_PAGES,
@@ -482,13 +653,13 @@ describe('components', function () {
                     }), container);
                   case 1:
                   case "end":
-                    return _context19.stop();
+                    return _context25.stop();
                 }
-              }, _callee19);
+              }, _callee25);
             })));
           case 7:
             cya = checkCYA(container);
-            _cya$childNodes5 = _slicedToArray(cya.childNodes, 3), cyaTitle = _cya$childNodes5[1], cyaChildNode = _cya$childNodes5[2];
+            _cya$childNodes7 = _slicedToArray(cya.childNodes, 3), cyaTitle = _cya$childNodes7[1], cyaChildNode = _cya$childNodes7[2];
             expect(cyaTitle.textContent).toEqual('Alpha ID: 123456789');
             names = cyaChildNode.childNodes[0];
             expect(names.tagName).toEqual('DL');
@@ -499,14 +670,14 @@ describe('components', function () {
             checkRow(surname, 'Last name', 'Smith', false);
           case 17:
           case "end":
-            return _context20.stop();
+            return _context26.stop();
         }
-      }, _callee20);
+      }, _callee26);
     })));
-    it('should show page components corrently with no label, if label and cya_label are missing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee22() {
-      var _PAGES, _COMPONENTS, T_PAGES, cya, _cya$childNodes6, cyaChildNode, names, _names$childNodes4, firstName, surname, _firstName$childNodes2, label;
-      return _regeneratorRuntime().wrap(function _callee22$(_context22) {
-        while (1) switch (_context22.prev = _context22.next) {
+    it('should show page components corrently with no label, if label and cya_label are missing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee28() {
+      var _PAGES, _COMPONENTS, T_PAGES, cya, _cya$childNodes8, cyaChildNode, names, _names$childNodes4, firstName, surname, _firstName$childNodes2, label;
+      return _regeneratorRuntime().wrap(function _callee28$(_context28) {
+        while (1) switch (_context28.prev = _context28.next) {
           case 0:
             _PAGES = [].concat(_userProfile.default.pages);
             _COMPONENTS = [].concat(_userProfile.default.components);
@@ -516,10 +687,10 @@ describe('components', function () {
               cya_label: undefined
             });
             T_PAGES = _utils.default.FormPage.getAll(_PAGES, _COMPONENTS, _objectSpread({}, DATA));
-            _context22.next = 6;
-            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee21() {
-              return _regeneratorRuntime().wrap(function _callee21$(_context21) {
-                while (1) switch (_context21.prev = _context21.next) {
+            _context28.next = 6;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee27() {
+              return _regeneratorRuntime().wrap(function _callee27$(_context27) {
+                while (1) switch (_context27.prev = _context27.next) {
                   case 0:
                     (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                       pages: T_PAGES,
@@ -528,13 +699,13 @@ describe('components', function () {
                     }), container);
                   case 1:
                   case "end":
-                    return _context21.stop();
+                    return _context27.stop();
                 }
-              }, _callee21);
+              }, _callee27);
             })));
           case 6:
             cya = checkCYA(container);
-            _cya$childNodes6 = _slicedToArray(cya.childNodes, 2), cyaChildNode = _cya$childNodes6[1];
+            _cya$childNodes8 = _slicedToArray(cya.childNodes, 2), cyaChildNode = _cya$childNodes8[1];
             names = cyaChildNode.childNodes[0];
             expect(names.tagName).toEqual('DL');
             expect(names.classList).toContain("govuk-!-margin-bottom-".concat(_CheckYourAnswers.DEFAULT_MARGIN_BOTTOM));
@@ -544,14 +715,14 @@ describe('components', function () {
             checkRow(surname, 'Last name', 'Smith', false);
           case 15:
           case "end":
-            return _context22.stop();
+            return _context28.stop();
         }
-      }, _callee22);
+      }, _callee28);
     })));
-    it('should show task list in CYA style and hide pages from skipped tasks', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee24() {
+    it('should show task list in CYA style and hide pages from skipped tasks', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee30() {
       var sections, taskHeading1, namesPageHeading;
-      return _regeneratorRuntime().wrap(function _callee24$(_context24) {
-        while (1) switch (_context24.prev = _context24.next) {
+      return _regeneratorRuntime().wrap(function _callee30$(_context30) {
+        while (1) switch (_context30.prev = _context30.next) {
           case 0:
             sections = [{
               name: 'These are your tasks',
@@ -565,10 +736,10 @@ describe('components', function () {
                 pages: ['grade']
               }]
             }];
-            _context24.next = 3;
-            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee23() {
-              return _regeneratorRuntime().wrap(function _callee23$(_context23) {
-                while (1) switch (_context23.prev = _context23.next) {
+            _context30.next = 3;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee29() {
+              return _regeneratorRuntime().wrap(function _callee29$(_context29) {
+                while (1) switch (_context29.prev = _context29.next) {
                   case 0:
                     (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                       pages: PAGES,
@@ -580,9 +751,9 @@ describe('components', function () {
                     }), container);
                   case 1:
                   case "end":
-                    return _context23.stop();
+                    return _context29.stop();
                 }
-              }, _callee23);
+              }, _callee29);
             })));
           case 3:
             taskHeading1 = container.childNodes[0].childNodes[0];
@@ -596,9 +767,9 @@ describe('components', function () {
             expect(container.childNodes[0].childNodes.length).toEqual(2); // second task skipped so not shown 
           case 12:
           case "end":
-            return _context24.stop();
+            return _context30.stop();
         }
-      }, _callee24);
+      }, _callee30);
     })));
   });
 });

package/dist/utils/CheckYourAnswers/getCYARow.js

@@ -36,6 +36,7 @@ var setNestedValue = function setNestedValue(component, page) {
  * @returns A configuration object for a Check your answers row.
  */
 var getCYARow = function getCYARow(page, component, onAction) {
+  var _page$cya_link;
   var value = '';
   if (page.formData && component.fieldId) {
     value = page.formData[component.fieldId];
@@ -50,7 +51,7 @@ var getCYARow = function getCYARow(page, component, onAction) {
     required: component.required,
     component: _Component.default.editable(component) ? component : undefined,
     value: value || '',
-    action: (0, _getCYAAction.default)(component.readonly, page, onAction)
+    action: (_page$cya_link = page.cya_link) !== null && _page$cya_link !== void 0 && _page$cya_link.singleChangeLink ? null : (0, _getCYAAction.default)(component.readonly, page, onAction)
   };
 };
 var _default = getCYARow;

package/dist/utils/CheckYourAnswers/getCYARow.test.js

@@ -337,6 +337,36 @@ describe('utils', function () {
           value: 'Bravo'
         });
       });
+      it('should not produce an action when the page is configured to have a single change link', function () {
+        var PAGE = {
+          id: 'page',
+          formData: {
+            a: 'Bravo'
+          },
+          cya_link: {
+            page: 'page',
+            aria_suffix: 'page details',
+            singleChangeLink: true
+          }
+        };
+        var COMPONENT = {
+          type: 'text',
+          readonly: true,
+          id: 'a',
+          fieldId: 'a',
+          label: 'Alpha'
+        };
+        var ON_ACTION = function ON_ACTION() {};
+        var ROW = (0, _getCYARow.default)(PAGE, COMPONENT, ON_ACTION);
+        (0, _setupTests.expectObjectLike)(ROW, {
+          pageId: PAGE.id,
+          fieldId: COMPONENT.fieldId,
+          key: COMPONENT.label,
+          action: null,
+          component: COMPONENT,
+          value: 'Bravo'
+        });
+      });
     });
   });
 });

package/dist/utils/CheckYourAnswers/getCYARowsForCollectionPage.js

@@ -156,7 +156,7 @@ var getCYARowsForChildPages = function getCYARowsForChildPages(childPages, item,
           rows = rows.concat(headingRow);
         }
         var container = getContainerForPage(childPage, item, labelCount, fullPath);
-        var rowChangeAction = getChangeActionForPage(childPage, item, onAction, activeIds);
+        var rowChangeAction = getChangeActionForPage(childPage, onAction, activeIds);
         var containerRows = (0, _getCYARowsForContainer.default)(childPage, container, item, rowChangeAction, fnOverride);
         rows = rows.concat(containerRows);
       }

package/package.json

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