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

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

@@ -22,6 +22,10 @@ var _userProfileData = _interopRequireDefault(require("../../json/userProfile.da
 
 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 _utils = _interopRequireDefault(require("../../utils"));
@@ -378,14 +382,15 @@ describe('components', function () {
         }
       }, _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;
+    it('Show answers from multiple address fields into in one DL', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee14() {
+      var DATA, GROUP_PAGES, cya, groupedComponent, keyGroup, valueGroup, 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;
+              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({}, DATA));
+              _context14.next = 4;
               return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee13() {
                 return regeneratorRuntime.wrap(function _callee13$(_context13) {
                   while (1) {
@@ -395,7 +400,7 @@ describe('components', function () {
                           pages: GROUP_PAGES,
                           onRowAction: ON_ROW_ACTION,
                           onAction: ON_ACTION,
-                          groups: _groupOfRow.default.cya.groups
+                          hide_title: true
                         }), container);
 
                       case 1:
@@ -406,6 +411,60 @@ describe('components', function () {
                 }, _callee13);
               })));
 
+            case 4:
+              cya = checkCYA(container);
+              groupedComponent = cya.childNodes[10];
+              keyGroup = groupedComponent.childNodes[0].childNodes[0].childNodes[0];
+              expect(keyGroup.tagName).toEqual('DT');
+              expect(keyGroup.textContent).toEqual('Address details (optional)');
+              valueGroup = groupedComponent.childNodes[0].childNodes[0].childNodes[1];
+              expect(valueGroup.childNodes.length).toEqual(4);
+              expect(valueGroup.tagName).toEqual('DD');
+              expect(valueGroup.childNodes[0].textContent).toContain('10 Downing Street');
+              expect(valueGroup.childNodes[1].textContent).toContain('City of Westminster');
+              expect(valueGroup.childNodes[2].textContent).toContain('London');
+              expect(valueGroup.childNodes[3].textContent).toContain('SW1A 2AA');
+              changeButtonDiv = groupedComponent.childNodes[0].childNodes[0].childNodes[2];
+              expect(changeButtonDiv.classList).toContain('govuk-summary-list__actions');
+              changeButton = changeButtonDiv.childNodes[0];
+              expect(changeButton.tagName).toEqual('A');
+              expect(changeButton.textContent).toEqual('Change address details');
+
+            case 21:
+            case "end":
+              return _context14.stop();
+          }
+        }
+      }, _callee14);
+    })));
+    it('should render a group with one action button', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee16() {
+      var GROUP_PAGES, cya, namesGroup, firstNameRow, surname, changeButtonDiv, changeButton;
+      return regeneratorRuntime.wrap(function _callee16$(_context16) {
+        while (1) {
+          switch (_context16.prev = _context16.next) {
+            case 0:
+              GROUP_PAGES = _utils.default.FormPage.getAll(_groupOfRow.default.pages, _groupOfRow.default.components, _objectSpread({}, DATA));
+              _context16.next = 3;
+              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, _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 _context15.stop();
+                    }
+                  }
+                }, _callee15);
+              })));
+
             case 3:
               cya = checkCYA(container);
               namesGroup = cya.childNodes[2];
@@ -429,10 +488,10 @@ describe('components', function () {
 
             case 22:
             case "end":
-              return _context14.stop();
+              return _context16.stop();
           }
         }
-      }, _callee14);
+      }, _callee16);
     })));
   });
 });

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

@@ -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[3].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[3].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[3].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[3].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[3].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[3].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[3].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/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/TaskList/TaskList.js

@@ -67,9 +67,11 @@ var TaskList = function TaskList(_ref) {
 
   return /*#__PURE__*/_react.default.createElement("div", _extends({}, attrs, {
     className: classes()
-  }), /*#__PURE__*/_react.default.createElement("h2", {
-    className: "govuk-heading-s govuk-!-margin-bottom-2"
-  }, "".concat(refTitle, " ").concat(refNumber)), numberOfSections !== numberOfCompleteSections && /*#__PURE__*/_react.default.createElement("h2", {
+  }), refNumber && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h2", {
+    className: "hods-task-reference-description govuk-heading-s govuk-!-margin-bottom-2 govuk-!-padding-right-1"
+  }, "".concat(refTitle)), /*#__PURE__*/_react.default.createElement("h2", {
+    className: "govuk-heading-s govuk-!-font-weight-regular"
+  }, "".concat(refNumber))), numberOfSections !== numberOfCompleteSections && /*#__PURE__*/_react.default.createElement("h2", {
     className: "govuk-heading-s govuk-!-margin-bottom-2"
   }, "Incomplete form"), /*#__PURE__*/_react.default.createElement("p", {
     className: "govuk-body govuk-!-margin-bottom-7"

package/dist/components/TaskList/TaskList.scss

@@ -15,9 +15,7 @@
     @include govuk-responsive-margin(9, 'bottom');
     list-style: none;
     padding-left: 0;
-    @include govuk-media-query($from: tablet) {
-      padding-left: govuk-spacing(6);
-    }
+    padding-left: govuk-spacing(4);
   }
 }
 
@@ -54,6 +52,13 @@
   }
 }
 
+.hods-task-reference-description{
+  @include govuk-media-query($from: 450px) {
+    float: left;
+  }
+}
+
+
 // The `hods-task-list__task-completed` class was previously used on the task
 // list for the completed tag (changed in 86c90ec) – it's still included here to
 // avoid breaking task lists in existing prototypes.

package/dist/components/TaskList/TaskList.test.js

@@ -57,23 +57,26 @@ describe('components', function () {
       expect(container.childNodes.length).toEqual(1);
       var referenceHeading = container.childNodes[0].childNodes[0];
       expect(referenceHeading.tagName).toEqual('H2');
-      expect(referenceHeading.textContent).toEqual('COP reference number 123');
-      var incompleteForm = container.childNodes[0].childNodes[1];
+      expect(referenceHeading.textContent).toEqual('COP reference number');
+      var referenceNumber = container.childNodes[0].childNodes[1];
+      expect(referenceNumber.tagName).toEqual('H2');
+      expect(referenceNumber.textContent).toEqual('123');
+      var incompleteForm = container.childNodes[0].childNodes[2];
       expect(incompleteForm.tagName).toEqual('H2');
       expect(incompleteForm.textContent).toEqual('Incomplete form');
-      var numComplete = container.childNodes[0].childNodes[2];
+      var numComplete = container.childNodes[0].childNodes[3];
       expect(numComplete.tagName).toEqual('P');
       expect(numComplete.textContent).toEqual('You have completed 2 of 6 sections');
-      expect(container.childNodes[0].childNodes.length).toEqual(7);
-      var subSectionOneHeading = container.childNodes[0].childNodes[3];
+      expect(container.childNodes[0].childNodes.length).toEqual(8);
+      var subSectionOneHeading = container.childNodes[0].childNodes[4];
       expect(subSectionOneHeading.tagName).toEqual('H2');
       expect(subSectionOneHeading.textContent).toEqual('1. These are your tasks');
-      var subSectionOneList = container.childNodes[0].childNodes[4];
+      var subSectionOneList = container.childNodes[0].childNodes[5];
       expect(subSectionOneList.childNodes.length).toEqual(3);
-      var subSectionTwoHeading = container.childNodes[0].childNodes[5];
+      var subSectionTwoHeading = container.childNodes[0].childNodes[6];
       expect(subSectionTwoHeading.tagName).toEqual('H2');
       expect(subSectionTwoHeading.textContent).toEqual('2. These are your extra bonus tasks');
-      var subSectionTwoList = container.childNodes[0].childNodes[6];
+      var subSectionTwoList = container.childNodes[0].childNodes[7];
       expect(subSectionTwoList.childNodes.length).toEqual(3);
     });
     it('should not show incomplete form if form is complete', function () {
@@ -118,11 +121,14 @@ describe('components', function () {
       })),
           container = _render2.container;
 
-      expect(container.childNodes[0].childNodes.length).toEqual(6);
+      expect(container.childNodes[0].childNodes.length).toEqual(7);
       var referenceHeading = container.childNodes[0].childNodes[0];
       expect(referenceHeading.tagName).toEqual('H2');
-      expect(referenceHeading.textContent).toEqual('COP reference number 123');
-      var numComplete = container.childNodes[0].childNodes[1];
+      expect(referenceHeading.textContent).toEqual('COP reference number');
+      var referenceNumber = container.childNodes[0].childNodes[1];
+      expect(referenceNumber.tagName).toEqual('H2');
+      expect(referenceNumber.textContent).toEqual('123');
+      var numComplete = container.childNodes[0].childNodes[2];
       expect(numComplete.tagName).toEqual('P');
       expect(numComplete.textContent).toEqual('You have completed 6 of 6 sections');
     });
@@ -153,7 +159,7 @@ describe('components', function () {
       })),
           container = _render3.container;
 
-      var subSectionOne = container.childNodes[0].childNodes[3];
+      var subSectionOne = container.childNodes[0].childNodes[4];
       expect(subSectionOne.childNodes[0].textContent).toEqual('');
       expect(subSectionOne.childNodes[1].textContent).toEqual('These are your tasks');
     });
@@ -192,9 +198,9 @@ describe('components', function () {
     })),
         container = _render4.container;
 
-    var firstTask = container.childNodes[0].childNodes[4].childNodes[0].childNodes[0].childNodes[0];
-    var secondTask = container.childNodes[0].childNodes[4].childNodes[1].childNodes[0].childNodes[0];
-    var thirdTask = container.childNodes[0].childNodes[4].childNodes[2].childNodes[0].childNodes[0];
+    var firstTask = container.childNodes[0].childNodes[5].childNodes[0].childNodes[0].childNodes[0];
+    var secondTask = container.childNodes[0].childNodes[5].childNodes[1].childNodes[0].childNodes[0];
+    var thirdTask = container.childNodes[0].childNodes[5].childNodes[2].childNodes[0].childNodes[0];
 
     _react.fireEvent.click(firstTask.childNodes[0]);
 

package/dist/json/group.data.json

@@ -0,0 +1,21 @@
+{
+  "urls": {
+    "refData": "/ref-data"
+  },
+  "currentUser": {
+    "givenName": "John",
+    "familyName": "Smith"
+  },
+  "areYouACivilServant": "yes",
+  "userDetails": {
+    "linemanagerEmail": "line.manager@digital.homeoffice.gov.uk",
+    "delegateEmails": "del.egate@digital.homeoffice.gov.uk"
+  },
+  "addressDetails": {
+    "firstLineOfTheAddress": "10 Downing Street",
+    "city": "London",
+    "town": "City of Westminster",
+    "postCode": "SW1A 2AA"
+  },
+  "businessKey": "123456789"
+}