@ukhomeoffice/cop-react-form-renderer 2.7.4 → 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[5].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[5].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[5].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
@@ -640,9 +640,9 @@ describe('components', function () {
 
               expect(container.childNodes[0].childNodes[0].textContent).toEqual('Task List Form'); //Check status's are correct
 
-              firstTaskStatus = container.childNodes[0].childNodes[1].childNodes[5].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[5].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[5].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[5].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/TaskList/TaskList.js

@@ -67,11 +67,11 @@ var TaskList = function TaskList(_ref) {
 
   return /*#__PURE__*/_react.default.createElement("div", _extends({}, attrs, {
     className: classes()
-  }), /*#__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 hods-task-reference"
-  }, "".concat(refNumber)), numberOfSections !== numberOfCompleteSections && /*#__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

@@ -58,9 +58,6 @@
   }
 }
 
-.hods-task-reference{
-  font-weight: normal;
-}
 
 // 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

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"
+}

package/dist/json/group.json

@@ -0,0 +1,418 @@
+{
+  "id": "userProfile",
+  "version": "1",
+  "name": "userProfile",
+  "title": "Your profile",
+  "type": "hub-and-spoke",
+  "components": [
+    {
+      "id": "firstName",
+      "fieldId": "firstName",
+      "label": "First name",
+      "type": "input",
+      "readonly": true,
+      "groupId": "addressDetails",
+      "source": {
+        "field": "currentUser.givenName"
+      }
+    },
+    {
+      "id": "surname",
+      "fieldId": "surname",
+      "label": "Last name",
+      "type": "text",
+      "readonly": true,
+      "groupId": "addressDetails",
+      "source": {
+        "field": "currentUser.familyName"
+      }
+    },
+    {
+      "id": "areYouACivilServant",
+      "fieldId": "areYouACivilServant",
+      "label": "Are you a civil servant?",
+      "type": "radios",
+      "required": true,
+      "groupId": "addressDetails",
+      "data": {
+        "url": "${urls.refData}/areYouACivilServant"
+      }
+    },
+    {
+      "id": "staffGradeId",
+      "fieldId": "staffGradeId",
+      "label": "Grade",
+      "hint": "We use this to assign you tasks",
+      "type": "radios",
+      "required": true,
+      "data": {
+        "url": "${urls.refData}/grade"
+      },
+      "source": {
+        "field": "userDetails.gradeid"
+      },
+      "show_when": {
+        "field": "areYouACivilServant",
+        "op": "eq",
+        "value": "yes"
+      }
+    },
+    {
+      "id": "team",
+      "fieldId": "team",
+      "label": "Team",
+      "hint": "We use this to assign you tasks",
+      "type": "autocomplete",
+      "required": true,
+      "item": {
+        "value": "id",
+        "label": "name"
+      },
+      "data": {
+        "url": "${urls.refData}/team"
+      },
+      "displayMenu": "inline",
+      "source": {
+        "field": "userDetails.defaultteam"
+      }
+    },
+    {
+      "id": "linemanagerEmail",
+      "fieldId": "linemanagerEmail",
+      "label": "Line manager email",
+      "hint": "Must be a homeoffice.gov.uk or digital.homeoffice.gov.uk address",
+      "type": "email",
+      "format": {
+        "type": "lowercase",
+        "on": "submit"
+      },
+      "required": true,
+      "source": {
+        "field": "userDetails.linemanagerEmail"
+      }
+    },
+    {
+      "id": "delegateEmails",
+      "fieldId": "delegateEmails",
+      "label": "Delegate email",
+      "hint": "Must be a homeoffice.gov.uk or digital.homeoffice.gov.uk address",
+      "type": "email",
+      "format": {
+        "type": "lowercase",
+        "on": "submit"
+      },
+      "required": true,
+      "source": {
+        "field": "userDetails.delegateEmails"
+      },
+      "show_when": [
+        {
+          "field": "areYouACivilServant",
+          "op": "eq",
+          "value": "yes"
+        },
+        {
+          "field": "staffGradeId",
+          "op": "in",
+          "values": [
+            "373979c1-2360-46be-b712-0409ac068059",
+            "36c80dfe-0aae-455b-9445-2e1c09dcafdc",
+            "1b041cda-b151-4769-b76a-d42d67b0b960",
+            "172de41d-f7b0-4be9-b7e8-0cf4f1a1342f",
+            "39e18b45-0358-4a45-83ec-5a70b74641e8"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "firstLineOfTheAddress",
+      "fieldId": "firstLineOfTheAddress",
+      "label": "Address",
+      "type": "text",
+      "required": true,
+      "groupId": "addressDetails",
+      "custom_errors": [
+        {
+          "type": "required",
+          "message": "Please enter first line of the the address"
+        }
+      ],
+      "source": {
+        "field": "addressDetails.firstLineOfTheAddress"
+      }
+    },
+    {
+      "id": "city",
+      "fieldId": "city",
+      "label": "City",
+      "type": "text",
+      "required": true,
+      "groupId": "addressDetails",
+      "custom_errors": [
+        {
+          "type": "required",
+          "message": "Please enter city"
+        }
+      ],
+      "source": {
+        "field": "addressDetails.city"
+      }
+    },
+    {
+      "id": "town",
+      "fieldId": "town",
+      "label": "Town",
+      "type": "text",
+      "required": true,
+
+      "custom_errors": [
+        {
+          "type": "required",
+          "message": "Please enter Town"
+        }
+      ],
+      "source": {
+        "field": "addressDetails.town"
+      }
+    },
+    {
+      "id": "postCode",
+      "fieldId": "postCode",
+      "label": "Postcode",
+      "type": "text",
+      "required": true,
+      "groupId": "addressDetails",
+      "custom_errors": [
+        {
+          "type": "required",
+          "message": "Please enter postcode"
+        }
+      ],
+      "source": {
+        "field": "addressDetails.postCode"
+      }
+    },
+    {
+      "id": "postCode",
+      "fieldId": "postCode",
+      "label": "Postcode",
+      "type": "text",
+      "required": true,
+      "groupId": "addressDetails",
+      "custom_errors": [
+        {
+          "type": "required",
+          "message": "Please enter postcode"
+        }
+      ],
+      "source": {
+        "field": "addressDetails.postCode"
+      }
+    }
+  ],
+  "pages": [
+    {
+      "id": "names",
+      "name": "names",
+      "components": [
+        {
+          "use": "firstName"
+        },
+        {
+          "use": "surname"
+        }
+      ]
+    },
+    {
+      "id": "civil-servant-status",
+      "name": "civil-servant-status",
+      "title": "Are you a civil servant?",
+      "components": [
+        {
+          "use": "areYouACivilServant",
+          "label": ""
+        }
+      ],
+      "actions": ["submit"],
+      "cya_link": {
+        "page": "civil-servant-status",
+        "aria_suffix": "civil servant status"
+      }
+    },
+    {
+      "id": "grade",
+      "name": "grade",
+      "title": "What's your grade?",
+      "components": [
+        {
+          "use": "staffGradeId",
+          "label": ""
+        }
+      ],
+      "actions": ["submit"],
+      "cya_link": {
+        "page": "grade",
+        "aria_suffix": "grade"
+      }
+    },
+    {
+      "id": "team-name",
+      "name": "team-name",
+      "title": "What's your team name?",
+      "components": [
+        {
+          "use": "team",
+          "label": ""
+        }
+      ],
+      "actions": ["submit"],
+      "cya_link": {
+        "page": "team-name",
+        "aria_suffix": "teams"
+      }
+    },
+    {
+      "id": "add-or-change-line-manager",
+      "name": "add-or-change-line-manager",
+      "title": "Add or change a line manager",
+      "components": [
+        "Your line manager will need to review some of your forms. It’s important to keep their details up-to-date.",
+        "An email will be sent to your line manager to ask if they want to approve your request to add them.",
+        {
+          "type": "inset-text",
+          "content": "The changes will show in your profile when they approve your request."
+        },
+        {
+          "type": "heading",
+          "size": "m",
+          "content": "Mandatory declarations"
+        },
+        "Mandatory declarations will not go to your line manager until they have approved your request."
+      ],
+      "actions": [
+        {
+          "type": "navigate",
+          "page": "line-manager-email"
+        }
+      ],
+      "show_on_cya": false
+    },
+    {
+      "id": "line-manager-email",
+      "name": "line-manager-email",
+      "title": "What’s your line manager’s email address?",
+      "components": [
+        {
+          "use": "linemanagerEmail"
+        }
+      ],
+      "actions": ["submit"],
+      "cya_link": {
+        "page": "add-or-change-line-manager",
+        "aria_suffix": "line manager email address"
+      }
+    },
+    {
+      "id": "add-or-change-delegate",
+      "name": "add-or-change-delegate",
+      "title": "Add or change a delegate",
+      "components": [
+        "A delegate can review a mandatory declaration on your behalf.",
+        "An email will be sent to the delegate to ask if they want to approve your request.",
+        {
+          "type": "inset-text",
+          "content": "The changes will show in your profile when they approve your request."
+        }
+      ],
+      "actions": [
+        {
+          "type": "navigate",
+          "page": "delegate-email"
+        }
+      ],
+      "show_on_cya": false
+    },
+    {
+      "id": "delegate-email",
+      "name": "delegate-email",
+      "title": "What’s your delegate's email address?",
+      "components": [
+        {
+          "use": "delegateEmails",
+          "label": "Delegate email address"
+        },
+        {
+          "use": "delegateEmails",
+          "label": "Delegate email address"
+        }
+      ],
+      "actions": ["submit"],
+      "cya_link": {
+        "page": "add-or-change-delegate"
+      },
+      "show_when": [
+        {
+          "field": "areYouACivilServant",
+          "op": "eq",
+          "value": "yes"
+        },
+        {
+          "field": "staffGradeId",
+          "op": "in",
+          "values": [
+            "373979c1-2360-46be-b712-0409ac068059",
+            "36c80dfe-0aae-455b-9445-2e1c09dcafdc",
+            "1b041cda-b151-4769-b76a-d42d67b0b960",
+            "172de41d-f7b0-4be9-b7e8-0cf4f1a1342f",
+            "39e18b45-0358-4a45-83ec-5a70b74641e8"
+          ]
+        }
+      ]
+    },
+
+    {
+      "id": "address-details",
+      "groupLabel": "UK address",
+      "fieldId": "UK address",
+      "groups": [
+        {
+          "id": "address",
+          "label": "Address details",
+          "components": ["firstLineOfTheAddress", "town", "city", "postCode"]
+        }
+      ],
+      "name": "address-details",
+      "title": "Address details",
+      "components": [
+        {
+          "use": "firstLineOfTheAddress",
+          "label": "Address"
+        },
+        {
+          "use": "town",
+          "label": "Town"
+        },
+        {
+          "use": "city",
+          "label": "City"
+        },
+        {
+          "use": "postCode",
+          "label": "Postcode"
+        }
+      ],
+      "actions": ["saveAndContinue", "saveAndReturn"],
+      "cya_link": {
+        "url": "/address-details",
+        "aria_suffix": "address details"
+      }
+    }
+  ],
+  "hub": {
+    "format": "CYA"
+  },
+  "cya": {
+    "hide_page_titles": true,
+    "hide_actions": true
+  }
+}

package/dist/json/userProfile.data.json

@@ -11,5 +11,11 @@
     "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"
 }

package/dist/utils/CheckYourAnswers/getCYARow.js

@@ -31,6 +31,7 @@ var getCYARow = function getCYARow(page, component, onAction) {
 
   return {
     pageId: page.id,
+    id: component.id,
     fieldId: component.fieldId,
     key: component.label || component.cya_label,
     component: _Component.default.editable(component) ? component : undefined,

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

@@ -58,6 +58,7 @@ describe('utils', function () {
 
         expect((0, _getCYARow.default)(PAGE, COMPONENT, ON_ACTION)).toEqual({
           pageId: PAGE.id,
+          id: COMPONENT.id,
           fieldId: COMPONENT.fieldId,
           key: COMPONENT.label,
           value: '',
@@ -84,6 +85,7 @@ describe('utils', function () {
 
         expect((0, _getCYARow.default)(PAGE, COMPONENT, ON_ACTION)).toEqual({
           pageId: PAGE.id,
+          id: COMPONENT.id,
           fieldId: COMPONENT.fieldId,
           key: COMPONENT.label,
           value: 'BLAH',