@ukhomeoffice/cop-react-form-renderer 2.6.2-alpha → 2.7.3

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

@@ -0,0 +1,77 @@
+"use strict";
+
+var _getGroupActionAttributes = _interopRequireDefault(require("./getGroupActionAttributes"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('components', function () {
+  describe('SummaryList', function () {
+    describe('helpers', function () {
+      describe('getGroupActionAttributes', function () {
+        it('should handle a null row', function () {
+          expect((0, _getGroupActionAttributes.default)(null)).toEqual({});
+        });
+        it('should handle a row without an action', function () {
+          expect((0, _getGroupActionAttributes.default)({})).toEqual({});
+        });
+        it('should handle a row with an empty action', function () {
+          var ROW = {
+            action: {}
+          };
+          expect((0, _getGroupActionAttributes.default)(ROW)).toEqual({});
+        });
+        it('should handle a row with a page', function () {
+          var PAGE = 'alpha';
+          var ROW = {
+            action: {
+              page: PAGE
+            }
+          };
+          expect((0, _getGroupActionAttributes.default)(ROW)).toEqual({
+            href: "/".concat(PAGE)
+          });
+        });
+        it('should handle a row with an onAction function', function () {
+          var ON_ACTION_CALLS = [];
+
+          var ON_ACTION = function ON_ACTION(row) {
+            ON_ACTION_CALLS.push(row);
+          };
+
+          var ROW = {
+            action: {
+              onAction: ON_ACTION
+            }
+          };
+          var ATTRS = (0, _getGroupActionAttributes.default)(ROW);
+          expect(ATTRS.onClick).toBeDefined();
+          expect(ATTRS.href).not.toBeDefined();
+          ATTRS.onClick();
+          expect(ON_ACTION_CALLS.length).toEqual(1);
+          expect(ON_ACTION_CALLS[0]).toEqual(ROW);
+        });
+        it('should favour onAction over href', function () {
+          var ON_ACTION_CALLS = [];
+
+          var ON_ACTION = function ON_ACTION(row) {
+            ON_ACTION_CALLS.push(row);
+          };
+
+          var HREF = 'http://alpha.homeoffice.gov.uk';
+          var ROW = {
+            action: {
+              href: HREF,
+              onAction: ON_ACTION
+            }
+          };
+          var ATTRS = (0, _getGroupActionAttributes.default)(ROW);
+          expect(ATTRS.onClick).toBeDefined();
+          expect(ATTRS.href).not.toBeDefined();
+          ATTRS.onClick();
+          expect(ON_ACTION_CALLS.length).toEqual(1);
+          expect(ON_ACTION_CALLS[0]).toEqual(ROW);
+        });
+      });
+    });
+  });
+});

package/dist/components/TaskList/TaskList.js

@@ -68,8 +68,10 @@ 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", {
+    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-!-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,16 @@
   }
 }
 
+.hods-task-reference-description{
+  @include govuk-media-query($from: 450px) {
+    float: left;
+  }
+}
+
+.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
 // 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/groupOfRow.json

@@ -0,0 +1,137 @@
+{
+  "id": "cop-secondForm",
+  "version": "1",
+  "name": "cop-secondForm",
+  "title": "Cop - Second Form",
+  "type": "cya",
+  "components": [
+    {
+      "id": "firstName",
+      "fieldId": "firstName",
+      "label": "First name",
+      "type": "text",
+      "readonly": false
+    },
+    {
+      "id": "surname",
+      "fieldId": "surname",
+      "label": "Last name",
+      "type": "text",
+      "readonly": false
+    },
+    {
+      "id": "dateGroup",
+      "fieldId": "dateGroup",
+      "label": "Date",
+      "type": "date",
+      "required": true,
+      "readonly": false
+    },
+    {
+      "id": "timeGroup",
+      "fieldId": "timeGroup",
+      "label": "Time",
+      "type": "time",
+      "required": true,
+      "readonly": false
+    },
+    {
+      "id": "portGroup",
+      "fieldId": "portGroup",
+      "label": "Port",
+      "type": "text",
+      "required": true,
+      "readonly": false
+    },
+    {
+      "id": "whereGroup",
+      "fieldId": "whereGroup",
+      "label": "Where did you see the incident take place",
+      "type": "text",
+      "required": true,
+      "readonly": false
+    },
+    {
+      "id": "extraDetails",
+      "fieldId": "extraDetails",
+      "label": "Extra details",
+      "type": "textarea",
+      "readonly": false
+    }
+  ],
+  "pages": [
+    {
+      "id": "names",
+      "name": "names",
+      "title": "Name",
+      "components": [
+        {
+          "use": "firstName"
+        },
+        {
+          "use": "surname"
+        }
+      ],
+      "cya_link": {
+        "page": "names",
+        "aria_suffix": "names"
+      },
+      "actions": [ "saveAndContinue", "saveAndReturn" ]
+    },
+    {
+      "id": "dateLocDet",
+      "name": "dateLocDetName",
+      "title": "Date and location details",
+      "components": [
+        {
+          "use": "dateGroup"
+        },
+        {
+          "use": "timeGroup"
+        },
+        {
+          "use": "portGroup"
+        },
+        {
+          "use": "whereGroup"
+        }
+      ],
+      "cya_link": {
+        "page": "dateLocDet",
+        "aria_suffix": "Date and location details"
+      },
+      "actions": [ "saveAndContinue", "saveAndReturn" ]
+    },
+    {
+      "id": "additional-info",
+      "name": "additional-info",
+      "title": "Additional Information",
+      "components": [
+        {
+          "use": "extraDetails"
+        }
+      ],
+      "cya_link": {
+        "page": "additional-info",
+        "aria_suffix": "Additional Information"
+      },
+      "actions": [ "saveAndContinue", "saveAndReturn" ]
+    }
+  ],
+  "cya": {
+    "hide_page_titles": false,
+    "hide_actions": false,
+    "groups": [
+      {
+        "pageId": "dateLocDet"
+      },
+      {
+        "pageId": "names",
+        "title": "Names"
+      }
+    ],
+    "actions": [
+      { "type": "submit", "label": "Submit", "validate": true }
+    ]
+  }
+}

package/dist/json/groupOfRowData.json

@@ -0,0 +1,15 @@
+{
+  "currentUser": {
+    "givenName": "John",
+    "familyName": "Smith"
+  },
+  "businessKey": "123456789",
+  "dateGroupField": "01-01-2022",
+  "timeGroupField": "14:57",
+  "portGroupField": "Glasgow",
+  "whereGroupField": "terminal",
+  "firstName": "sample",
+  "surname": "test",
+  "age": "12",
+  "extraDetails": "extra notes here"
+}

package/dist/json/taskList.json

@@ -72,8 +72,10 @@
       "actions": [
         {
           "type": "saveAndNavigate",
-          "page": "eventMode"
-        }
+          "page": "eventMode",
+          "label": "Save and continue"
+        },
+        "saveAndReturn"
       ],
       "cya_link": {
         "page": "eventDate",
@@ -93,7 +95,8 @@
         {
           "type": "saveAndNavigate",
           "page": "cya"
-        }
+        },
+        "saveAndReturn"
       ],
       "cya_link": {
         "page": "eventMode",
@@ -113,7 +116,8 @@
         {
           "type": "saveAndNavigate",
           "page": "cya"
-        }
+        },
+        "saveAndReturn"
       ],
       "cya_link": {
         "page": "officeDetails",
@@ -133,7 +137,8 @@
         {
           "type": "saveAndNavigate",
           "page": "cya"
-        }
+        },
+        "saveAndReturn"
       ],
       "cya_link": {
         "page": "immigrationDate",
@@ -153,7 +158,8 @@
         {
           "type": "saveAndNavigate",
           "page": "surname"
-        }
+        },
+        "saveAndReturn"
       ],
       "cya_link": {
         "page": "firstName",
@@ -173,7 +179,8 @@
         {
           "type": "saveAndNavigate",
           "page": "cya"
-        }
+        },
+        "saveAndReturn"
       ],
       "cya_link": {
         "page": "surname",
@@ -223,6 +230,9 @@
     ]
   },
   "cya": {
-    "hide_page_titles": false
+    "hide_page_titles": false,
+    "actions": [
+      { "type": "saveAndContinue", "label": "save cont", "validate": true }
+    ]
   }
 }

package/dist/models/PageAction.js

@@ -28,7 +28,8 @@ var DefaultPageActions = (_DefaultPageActions = {}, _defineProperty(_DefaultPage
   label: 'Save and continue'
 }), _defineProperty(_DefaultPageActions, TYPE_SAVE_AND_NAVIGATE, {
   type: TYPE_SAVE_AND_NAVIGATE,
-  validate: true
+  validate: true,
+  label: 'Save and continue'
 }), _defineProperty(_DefaultPageActions, TYPE_SAVE_AND_RETURN, {
   type: TYPE_SAVE_AND_RETURN,
   validate: false,

package/dist/models/TaskStates.js

@@ -22,16 +22,16 @@ var StateTypes = {
 exports.StateTypes = StateTypes;
 var StateDetails = (_StateDetails = {}, _defineProperty(_StateDetails, TYPE_COMPLETE, {
   label: 'Completed',
-  colour: ''
+  colour: 'dark-blue'
 }), _defineProperty(_StateDetails, TYPE_IN_PROGRESS, {
   label: 'In Progress',
-  colour: 'blue'
+  colour: 'white'
 }), _defineProperty(_StateDetails, TYPE_NOT_STARTED, {
   label: 'Not Started',
-  colour: 'grey'
+  colour: 'dark-grey'
 }), _defineProperty(_StateDetails, TYPE_CANNOT_START_YET, {
   label: 'Cannot Start Yet',
-  colour: 'grey'
+  colour: 'dark-grey'
 }), _StateDetails);
 var TaskStates = {
   TYPES: StateTypes,

package/dist/utils/Validate/validatePage.js

@@ -7,20 +7,21 @@ exports.default = void 0;
 
 var _validateComponent = _interopRequireDefault(require("./validateComponent"));
 
+var _showFormPage = _interopRequireDefault(require("../FormPage/showFormPage"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // Local imports
 
 /**
  * Validate all of the components on a page.
- * @param {Array} components The components to validate.
- * @param {object} formData The data to use that holds this components' values.
+ * @param {object} page The page to validate
  * @returns An array containing all of the errors.
  */
-var validatePage = function validatePage(components, formData) {
-  if (Array.isArray(components)) {
-    return components.reduce(function (errors, component) {
-      return errors.concat((0, _validateComponent.default)(component, formData));
+var validatePage = function validatePage(page) {
+  if ((0, _showFormPage.default)(page, page.formData) && Array.isArray(page.components)) {
+    return page.components.reduce(function (errors, component) {
+      return errors.concat((0, _validateComponent.default)(component, page.formData));
     }, []).filter(function (e) {
       return !!e;
     }).flat();

package/dist/utils/Validate/validatePage.test.js

@@ -21,20 +21,36 @@ describe('utils', function () {
       };
 
       it('should return no error when the components array is null', function () {
-        expect((0, _validatePage.default)(null, {}).length).toEqual(0);
+        var PAGE = {
+          components: null,
+          formData: null
+        };
+        expect((0, _validatePage.default)(PAGE).length).toEqual(0);
       });
       it('should return no error when the components array is empty', function () {
-        expect((0, _validatePage.default)([], {}).length).toEqual(0);
+        var PAGE = {
+          components: [],
+          formData: null
+        };
+        expect((0, _validatePage.default)(PAGE).length).toEqual(0);
       });
       describe('when there is no form data', function () {
         it('should return no errors when no components are required', function () {
           var COMPONENTS = [setup('a', _models.ComponentTypes.TEXT, 'Alpha', false), setup('b', _models.ComponentTypes.TEXT, 'Bravo', false)];
-          expect((0, _validatePage.default)(COMPONENTS, null).length).toEqual(0);
+          var PAGE = {
+            components: COMPONENTS,
+            formData: null
+          };
+          expect((0, _validatePage.default)(PAGE).length).toEqual(0);
         });
         it('should return an error for each required component', function () {
           var COMPONENTS = [setup('a', _models.ComponentTypes.TEXT, 'Alpha', true), setup('b', _models.ComponentTypes.TEXT, 'Bravo', true), setup('c', _models.ComponentTypes.TEXT, 'Charlie', false), // The only unrequired one
           setup('d', _models.ComponentTypes.TEXT, 'Delta', true), setup('e', _models.ComponentTypes.TEXT, 'Echo', true)];
-          var RESULT = (0, _validatePage.default)(COMPONENTS, null);
+          var PAGE = {
+            components: COMPONENTS,
+            formData: null
+          };
+          var RESULT = (0, _validatePage.default)(PAGE);
           expect(RESULT.length).toEqual(4);
           expect(RESULT[0]).toEqual({
             id: 'a',
@@ -61,19 +77,35 @@ describe('utils', function () {
         };
         it('should return no errors when none of the components are required or email types', function () {
           var COMPONENTS = [setup('alpha', _models.ComponentTypes.TEXT, 'Alpha', false), setup('bravo', _models.ComponentTypes.TEXT, 'Bravo', false)];
-          expect((0, _validatePage.default)(COMPONENTS, DATA).length).toEqual(0);
+          var PAGE = {
+            components: COMPONENTS,
+            formData: DATA
+          };
+          expect((0, _validatePage.default)(PAGE).length).toEqual(0);
         });
         it('should return no errors when all of the components are required but not email types', function () {
           var COMPONENTS = [setup('alpha', _models.ComponentTypes.TEXT, 'Alpha', true), setup('bravo', _models.ComponentTypes.TEXT, 'Bravo', true)];
-          expect((0, _validatePage.default)(COMPONENTS, DATA).length).toEqual(0);
+          var PAGE = {
+            components: COMPONENTS,
+            formData: DATA
+          };
+          expect((0, _validatePage.default)(PAGE).length).toEqual(0);
         });
         it('should return no errors when none of the components are required but are all email types', function () {
           var COMPONENTS = [setup('alpha', _models.ComponentTypes.EMAIL, 'Alpha', false), setup('bravo', _models.ComponentTypes.EMAIL, 'Bravo', false)];
-          expect((0, _validatePage.default)(COMPONENTS, DATA).length).toEqual(0);
+          var PAGE = {
+            components: COMPONENTS,
+            formData: DATA
+          };
+          expect((0, _validatePage.default)(PAGE).length).toEqual(0);
         });
         it('should return no errors when all of the components are required and email types', function () {
           var COMPONENTS = [setup('alpha', _models.ComponentTypes.EMAIL, 'Alpha', true), setup('bravo', _models.ComponentTypes.EMAIL, 'Bravo', true)];
-          expect((0, _validatePage.default)(COMPONENTS, DATA).length).toEqual(0);
+          var PAGE = {
+            components: COMPONENTS,
+            formData: DATA
+          };
+          expect((0, _validatePage.default)(PAGE).length).toEqual(0);
         });
       });
       describe('when the form data has one field missing and includes an invalid email', function () {
@@ -83,11 +115,19 @@ describe('utils', function () {
         };
         it('should return no errors when none of the components are required or email types', function () {
           var COMPONENTS = [setup('alpha', _models.ComponentTypes.TEXT, 'Alpha', false), setup('bravo', _models.ComponentTypes.TEXT, 'Bravo', false), setup('charlie', _models.ComponentTypes.TEXT, 'Charlie', false)];
-          expect((0, _validatePage.default)(COMPONENTS, DATA).length).toEqual(0);
+          var PAGE = {
+            components: COMPONENTS,
+            formData: null
+          };
+          expect((0, _validatePage.default)(PAGE).length).toEqual(0);
         });
         it('should return an error for the missing field when all are required but not email types', function () {
           var COMPONENTS = [setup('alpha', _models.ComponentTypes.TEXT, 'Alpha', true), setup('bravo', _models.ComponentTypes.TEXT, 'Bravo', true), setup('charlie', _models.ComponentTypes.TEXT, 'Charlie', true)];
-          var RESULT = (0, _validatePage.default)(COMPONENTS, DATA);
+          var PAGE = {
+            components: COMPONENTS,
+            formData: DATA
+          };
+          var RESULT = (0, _validatePage.default)(PAGE);
           expect(RESULT.length).toEqual(1);
           expect(RESULT[0]).toEqual({
             id: 'charlie',
@@ -96,7 +136,11 @@ describe('utils', function () {
         });
         it('should return an error for the invalid email field when none are required but all email types', function () {
           var COMPONENTS = [setup('alpha', _models.ComponentTypes.EMAIL, 'Alpha', false), setup('bravo', _models.ComponentTypes.EMAIL, 'Bravo', false), setup('charlie', _models.ComponentTypes.EMAIL, 'Charlie', false)];
-          var RESULT = (0, _validatePage.default)(COMPONENTS, DATA);
+          var PAGE = {
+            components: COMPONENTS,
+            formData: DATA
+          };
+          var RESULT = (0, _validatePage.default)(PAGE);
           expect(RESULT.length).toEqual(1);
           expect(RESULT[0]).toEqual({
             id: 'bravo',
@@ -105,7 +149,11 @@ describe('utils', function () {
         });
         it('should return an error for both invalid fields when all are required and email types', function () {
           var COMPONENTS = [setup('alpha', _models.ComponentTypes.EMAIL, 'Alpha', true), setup('bravo', _models.ComponentTypes.EMAIL, 'Bravo', true), setup('charlie', _models.ComponentTypes.EMAIL, 'Charlie', true)];
-          var RESULT = (0, _validatePage.default)(COMPONENTS, DATA);
+          var PAGE = {
+            components: COMPONENTS,
+            formData: DATA
+          };
+          var RESULT = (0, _validatePage.default)(PAGE);
           expect(RESULT.length).toEqual(2);
           expect(RESULT[0]).toEqual({
             id: 'bravo',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "2.6.2-alpha",
+  "version": "2.7.3",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",
@@ -16,7 +16,7 @@
     "post-compile": "rimraf dist/*.test.* dist/**/*.test.* dist/**/*.stories.* dist/docs dist/assets"
   },
   "dependencies": {
-    "@ukhomeoffice/cop-react-components": "1.3.0",
+    "@ukhomeoffice/cop-react-components": "1.5.1",
     "axios": "^0.21.1",
     "dayjs": "^1.11.0",
     "govuk-frontend": "^3.13.0",