@ukhomeoffice/cop-react-form-renderer 2.2.0 → 2.5.0

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

@@ -0,0 +1,223 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _TaskList = _interopRequireDefault(require("./TaskList"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Global imports
+// Local imports
+describe('components', function () {
+  describe('TaskList', function () {
+    it('should render a TaskList', function () {
+      var COP_REF = '123';
+      var REF_TITLE = 'COP reference number';
+      var sections = [{
+        name: 'These are your tasks',
+        tasks: [{
+          name: 'Nice task',
+          state: 'complete',
+          pages: ['pageOne']
+        }, {
+          name: 'Ok task',
+          state: 'inProgress',
+          pages: ['pageTwo']
+        }, {
+          name: 'Terrible task',
+          state: 'notStarted',
+          pages: ['pageThree']
+        }]
+      }, {
+        name: 'These are your extra bonus tasks',
+        tasks: [{
+          name: 'Nice task',
+          state: 'complete',
+          pages: ['pageFour']
+        }, {
+          name: 'Ok task',
+          state: 'cannotStartYet',
+          pages: ['pageFive']
+        }, {
+          name: 'Terrible task',
+          state: 'cannotStartYet',
+          pages: ['pageSix']
+        }]
+      }];
+
+      var _render = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
+        refNumber: COP_REF,
+        refTitle: REF_TITLE,
+        sections: sections
+      })),
+          container = _render.container;
+
+      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(incompleteForm.tagName).toEqual('H2');
+      expect(incompleteForm.textContent).toEqual('Incomplete form');
+      var numComplete = container.childNodes[0].childNodes[2];
+      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(subSectionOneHeading.tagName).toEqual('H2');
+      expect(subSectionOneHeading.textContent).toEqual('1. These are your tasks');
+      var subSectionOneList = container.childNodes[0].childNodes[4];
+      expect(subSectionOneList.childNodes.length).toEqual(3);
+      var subSectionTwoHeading = container.childNodes[0].childNodes[5];
+      expect(subSectionTwoHeading.tagName).toEqual('H2');
+      expect(subSectionTwoHeading.textContent).toEqual('2. These are your extra bonus tasks');
+      var subSectionTwoList = container.childNodes[0].childNodes[6];
+      expect(subSectionTwoList.childNodes.length).toEqual(3);
+    });
+    it('should not show incomplete form if form is complete', function () {
+      var COP_REF = '123';
+      var REF_TITLE = 'COP reference number';
+      var sections = [{
+        name: 'These are your tasks',
+        tasks: [{
+          name: 'Nice task',
+          state: 'complete',
+          pages: ['pageOne']
+        }, {
+          name: 'Ok task',
+          state: 'complete',
+          pages: ['pageTwo']
+        }, {
+          name: 'Terrible task',
+          state: 'complete',
+          pages: ['pageThree']
+        }]
+      }, {
+        name: 'These are your extra bonus tasks',
+        tasks: [{
+          name: 'Nice task',
+          state: 'complete',
+          pages: ['pageFour']
+        }, {
+          name: 'Ok task',
+          state: 'complete',
+          pages: ['pageFive']
+        }, {
+          name: 'Terrible task',
+          state: 'complete',
+          pages: ['pageSix']
+        }]
+      }];
+
+      var _render2 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
+        refNumber: COP_REF,
+        refTitle: REF_TITLE,
+        sections: sections
+      })),
+          container = _render2.container;
+
+      expect(container.childNodes[0].childNodes.length).toEqual(6);
+      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(numComplete.tagName).toEqual('P');
+      expect(numComplete.textContent).toEqual('You have completed 6 of 6 sections');
+    });
+    it('should not show numbers on section headings if there is only one section', function () {
+      var COP_REF = '123';
+      var REF_TITLE = 'COP reference number';
+      var sections = [{
+        name: 'These are your tasks',
+        tasks: [{
+          name: 'Nice task',
+          state: 'complete',
+          pages: ['pageOne']
+        }, {
+          name: 'Ok task',
+          state: 'complete',
+          pages: ['pageTwo']
+        }, {
+          name: 'Terrible task',
+          state: 'notStarted',
+          pages: ['pageThree']
+        }]
+      }];
+
+      var _render3 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
+        refNumber: COP_REF,
+        refTitle: REF_TITLE,
+        sections: sections
+      })),
+          container = _render3.container;
+
+      var subSectionOne = container.childNodes[0].childNodes[3];
+      expect(subSectionOne.childNodes[0].textContent).toEqual('');
+      expect(subSectionOne.childNodes[1].textContent).toEqual('These are your tasks');
+    });
+  });
+  it('should pass the the selected task to the given onTaskAction function', function () {
+    var COP_REF = '123';
+    var REF_TITLE = 'COP reference number';
+    var ON_CLICK_CALLS = [];
+
+    var ON_CLICK = function ON_CLICK(value) {
+      ON_CLICK_CALLS.push(value);
+    };
+
+    var sections = [{
+      name: 'These are your tasks',
+      tasks: [{
+        name: 'Nice task',
+        state: 'complete',
+        pages: ['pageOne']
+      }, {
+        name: 'Ok task',
+        state: 'complete',
+        pages: ['pageTwo']
+      }, {
+        name: 'Terrible task',
+        state: 'notStarted',
+        pages: ['pageThree']
+      }]
+    }];
+
+    var _render4 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
+      refNumber: COP_REF,
+      refTitle: REF_TITLE,
+      sections: sections,
+      onTaskAction: ON_CLICK
+    })),
+        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];
+
+    _react.fireEvent.click(firstTask.childNodes[0]);
+
+    expect(ON_CLICK_CALLS[0]).toEqual({
+      pages: ['pageOne'],
+      name: "Nice task",
+      state: 'complete'
+    });
+
+    _react.fireEvent.click(secondTask.childNodes[0]);
+
+    expect(ON_CLICK_CALLS[1]).toEqual({
+      pages: ['pageTwo'],
+      name: "Ok task",
+      state: 'complete'
+    });
+
+    _react.fireEvent.click(thirdTask.childNodes[0]);
+
+    expect(ON_CLICK_CALLS[2]).toEqual({
+      pages: ['pageThree'],
+      name: "Terrible task",
+      state: 'notStarted'
+    });
+  });
+});

package/dist/components/TaskList/TaskState.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DEFAULT_CLASS = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _copReactComponents = require("@ukhomeoffice/cop-react-components");
+
+var _models = require("../../models");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+//Global Imports
+//Local imports
+var DEFAULT_CLASS = 'hods-task-list';
+exports.DEFAULT_CLASS = DEFAULT_CLASS;
+
+var TaskState = function TaskState(_ref) {
+  var state = _ref.state;
+
+  var classes = _copReactComponents.Utils.classBuilder(DEFAULT_CLASS, undefined, undefined);
+
+  if (!_models.TaskStates.DETAILS[state]) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_copReactComponents.Tag, {
+    classModifiers: [_models.TaskStates.DETAILS[state].colour],
+    className: classes('tag')
+  }, _models.TaskStates.DETAILS[state].label);
+};
+
+TaskState.propTypes = {
+  state: _propTypes.default.string.isRequired
+};
+var _default = TaskState;
+exports.default = _default;

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

@@ -0,0 +1,99 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _TaskState = _interopRequireDefault(require("./TaskState"));
+
+var _models = require("../../models");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Global imports
+// Local imports
+describe('components', function () {
+  describe('TaskList.TaskState', function () {
+    it('should render a complete state icon', function () {
+      var STATE = _models.TaskStates.TYPES.COMPLETE;
+
+      var _render = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskState.default, {
+        state: STATE
+      })),
+          container = _render.container;
+
+      expect(container.childNodes.length).toEqual(1);
+      expect(container.childNodes[0].classList).toContain('hods-tag');
+      expect(container.childNodes[0].textContent).toEqual(_models.TaskStates.DETAILS.complete.label);
+    });
+    it('should render an in progress state icon', function () {
+      var STATE = _models.TaskStates.TYPES.IN_PROGRESS;
+
+      var _render2 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskState.default, {
+        state: STATE
+      })),
+          container = _render2.container;
+
+      expect(container.childNodes.length).toEqual(1);
+      expect(container.childNodes[0].classList).toContain('hods-tag');
+      expect(container.childNodes[0].classList).toContain("hods-tag--".concat(_models.TaskStates.DETAILS.inProgress.colour));
+      expect(container.childNodes[0].textContent).toEqual(_models.TaskStates.DETAILS.inProgress.label);
+    });
+    it('should render a not started state icon', function () {
+      var STATE = _models.TaskStates.TYPES.NOT_STARTED;
+
+      var _render3 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskState.default, {
+        state: STATE
+      })),
+          container = _render3.container;
+
+      expect(container.childNodes.length).toEqual(1);
+      expect(container.childNodes[0].classList).toContain('hods-tag');
+      expect(container.childNodes[0].classList).toContain("hods-tag--".concat(_models.TaskStates.DETAILS.notStarted.colour));
+      expect(container.childNodes[0].textContent).toEqual(_models.TaskStates.DETAILS.notStarted.label);
+    });
+    it('should render a cannot start state icon', function () {
+      var STATE = _models.TaskStates.TYPES.CANNOT_START_YET;
+
+      var _render4 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskState.default, {
+        state: STATE
+      })),
+          container = _render4.container;
+
+      expect(container.childNodes.length).toEqual(1);
+      expect(container.childNodes[0].classList).toContain('hods-tag');
+      expect(container.childNodes[0].classList).toContain("hods-tag--".concat(_models.TaskStates.DETAILS.cannotStartYet.colour));
+      expect(container.childNodes[0].textContent).toEqual(_models.TaskStates.DETAILS.cannotStartYet.label);
+    });
+    it('should not render a state if given an unknown value', function () {
+      var STATE = 'spellingError';
+
+      var _render5 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskState.default, {
+        state: STATE
+      })),
+          container = _render5.container;
+
+      expect(container.childNodes.length).toEqual(0);
+    });
+    it('should not render a state if given null', function () {
+      var STATE = null;
+
+      var _render6 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskState.default, {
+        state: STATE
+      })),
+          container = _render6.container;
+
+      expect(container.childNodes.length).toEqual(0);
+    });
+    it('should not render a state if given undefined', function () {
+      var STATE = undefined;
+
+      var _render7 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskState.default, {
+        state: STATE
+      })),
+          container = _render7.container;
+
+      expect(container.childNodes.length).toEqual(0);
+    });
+  });
+});

package/dist/components/TaskList/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _TaskList = _interopRequireDefault(require("./TaskList"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _TaskList.default;
+exports.default = _default;

package/dist/json/taskList.json

@@ -0,0 +1,228 @@
+{
+  "id": "eventAtTheBorder",
+  "version": "1",
+  "name": "Event at the border",
+  "title": "Event at the border",
+  "type": "task-list",
+  "components": [
+    {
+      "id": "firstName",
+      "fieldId": "firstName",
+      "label": "First name",
+      "type": "text",
+      "required": true
+    },
+    {
+      "id": "surname",
+      "fieldId": "surname",
+      "label": "Last name",
+      "type": "text",
+      "required": true
+    },
+    {
+      "id": "date",
+      "fieldId": "date",
+      "label": "Date",
+      "type": "date",
+      "required": true
+    },
+    {
+      "id": "officerName",
+      "fieldId": "officerName",
+      "label": "Officer Name",
+      "type": "text"
+    },
+    {
+      "id": "immigrationDate",
+      "fieldId": "immigrationDate",
+      "label": "Immigration Date",
+      "type": "date",
+      "required": true
+    },
+    {
+      "id": "mode",
+      "fieldId": "mode",
+      "label": "Mode",
+      "type": "radios",
+      "data": {
+        "options": [
+          {
+            "value": "sea",
+            "label": "Sea"
+          },
+          {
+            "value": "air",
+            "label": "Air"
+          }
+        ]
+      },
+      "required": true
+    }
+  ],
+  "pages": [
+    {
+      "id": "eventDate",
+      "name": "eventDate",
+      "title": "Event Date",
+      "components": [
+        {
+          "use": "date"
+        }
+      ],
+      "actions": [
+        {
+          "type": "saveAndNavigate",
+          "page": "eventMode"
+        }
+      ],
+      "cya_link": {
+        "page": "eventDate",
+        "aria_suffix": "Event Date"
+      }
+    },
+    {
+      "id": "eventMode",
+      "name": "eventMode",
+      "title": "Event Mode",
+      "components": [
+        {
+          "use": "mode"
+        }
+      ],
+      "actions": [
+        {
+          "type": "saveAndNavigate",
+          "page": "cya"
+        }
+      ],
+      "cya_link": {
+        "page": "eventMode",
+        "aria_suffix": "Event Mode"
+      }
+    },
+    {
+      "id": "officeDetails",
+      "name": "officeDetails",
+      "title": "Officer Details",
+      "components": [
+        {
+          "use": "officerName"
+        }
+      ],
+      "actions": [
+        {
+          "type": "saveAndNavigate",
+          "page": "cya"
+        }
+      ],
+      "cya_link": {
+        "page": "officeDetails",
+        "aria_suffix": "Officer Details"
+      }
+    },
+    {
+      "id": "immigrationDate",
+      "name": "immigrationDate",
+      "title": "Immigration Date",
+      "components": [
+        {
+          "use": "immigrationDate"
+        }
+      ],
+      "actions": [
+        {
+          "type": "saveAndNavigate",
+          "page": "cya"
+        }
+      ],
+      "cya_link": {
+        "page": "immigrationDate",
+        "aria_suffix": "Immigration Date"
+      }
+    },
+    {
+      "id": "firstName",
+      "name": "firstName",
+      "title": "First Name",
+      "components": [
+        {
+          "use": "firstName"
+        }
+      ],
+      "actions": [
+        {
+          "type": "saveAndNavigate",
+          "page": "surname"
+        }
+      ],
+      "cya_link": {
+        "page": "firstName",
+        "aria_suffix": "First Name"
+      }
+    },
+    {
+      "id": "surname",
+      "name": "surname",
+      "title": "Surname",
+      "components": [
+        {
+          "use": "surname"
+        }
+      ],
+      "actions": [
+        {
+          "type": "saveAndNavigate",
+          "page": "cya"
+        }
+      ],
+      "cya_link": {
+        "page": "surname",
+        "aria_suffix": "Surname"
+      }
+    }
+  ],
+  "hub": {
+    "format": "CYA",
+    "refTitle": "COP reference number",
+    "sections": [
+      {
+        "name": "Add event details",
+        "tasks": [
+          {
+            "name": "Date, location and mode details",
+            "pages": ["eventDate", "eventMode"],
+            "state": "complete"
+          },
+          {
+            "name": "Officer and agency details",
+            "pages": ["officeDetails"],
+            "state": "inProgress"
+          }
+        ]
+      },
+      {
+        "name": "Add people details",
+        "tasks": [
+          {
+            "name": "People details",
+            "pages": ["firstName", "surname"],
+            "state": "complete"
+          },
+          {
+            "name": "Immigration details",
+            "pages": ["immigrationDate"],
+            "state": "inProgress"
+          },
+          {
+            "name": "Journey details",
+            "pages": ["none"],
+            "state": "cannotStartYet"
+          }
+        ]
+      }
+    ]
+  },
+  "cya": {
+    "hide_page_titles": false
+  }
+}

package/dist/json/userProfile.data.json

@@ -10,5 +10,6 @@
   "userDetails": {
     "linemanagerEmail": "line.manager@digital.homeoffice.gov.uk",
     "delegateEmails": "del.egate@digital.homeoffice.gov.uk"
-  }
+  },
+  "businessKey": "123456789"
 }

package/dist/models/ComponentTypes.js

@@ -15,6 +15,7 @@ var TYPE_PHONE_NUMBER = 'phone-number';
 var TYPE_RADIOS = 'radios';
 var TYPE_TEXT = 'text';
 var TYPE_TEXT_AREA = 'textarea';
+var TYPE_TIME = 'time';
 var ComponentTypes = {
   AUTOCOMPLETE: TYPE_AUTOCOMPLETE,
   CHECKBOXES: TYPE_CHECKBOXES,
@@ -26,7 +27,8 @@ var ComponentTypes = {
   PHONE_NUMBER: TYPE_PHONE_NUMBER,
   RADIOS: TYPE_RADIOS,
   TEXT: TYPE_TEXT,
-  TEXT_AREA: TYPE_TEXT_AREA
+  TEXT_AREA: TYPE_TEXT_AREA,
+  TIME: TYPE_TIME
 };
 var _default = ComponentTypes;
 exports.default = _default;

package/dist/models/FormTypes.js

@@ -7,11 +7,13 @@ exports.default = void 0;
 var TYPE_FORM = 'form';
 var TYPE_CHECK_YOUR_ANSWERS = 'cya';
 var TYPE_HUB_AND_SPOKE = 'hub-and-spoke';
+var TYPE_TASK_LIST = 'task-list';
 var TYPE_WIZARD = 'wizard';
 var FormTypes = {
   FORM: TYPE_FORM,
   CYA: TYPE_CHECK_YOUR_ANSWERS,
   HUB: TYPE_HUB_AND_SPOKE,
+  TASK: TYPE_TASK_LIST,
   WIZARD: TYPE_WIZARD
 };
 var _default = FormTypes;

package/dist/models/HubFormats.js

@@ -5,8 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var HUB_FORMAT_CYA = 'CYA';
+var HUB_FORMAT_TASK = 'TASK';
 var HubFormats = {
-  CYA: HUB_FORMAT_CYA
+  CYA: HUB_FORMAT_CYA,
+  TASK: HUB_FORMAT_TASK
 };
 var _default = HubFormats;
 exports.default = _default;

package/dist/models/PageAction.js

@@ -11,11 +11,13 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 var TYPE_NAVIGATE = 'navigate';
 var TYPE_SAVE_AND_CONTINUE = 'saveAndContinue';
+var TYPE_SAVE_AND_NAVIGATE = 'saveAndNavigate';
 var TYPE_SAVE_AND_RETURN = 'saveAndReturn';
 var TYPE_SUBMIT = 'submit';
 var PageActionTypes = {
   NAVIGATE: TYPE_NAVIGATE,
   SAVE_AND_CONTINUE: TYPE_SAVE_AND_CONTINUE,
+  SAVE_AND_NAVIGATE: TYPE_SAVE_AND_NAVIGATE,
   SAVE_AND_RETURN: TYPE_SAVE_AND_RETURN,
   SUBMIT: TYPE_SUBMIT
 };
@@ -24,6 +26,9 @@ var DefaultPageActions = (_DefaultPageActions = {}, _defineProperty(_DefaultPage
   type: TYPE_SAVE_AND_CONTINUE,
   validate: true,
   label: 'Save and continue'
+}), _defineProperty(_DefaultPageActions, TYPE_SAVE_AND_NAVIGATE, {
+  type: TYPE_SAVE_AND_NAVIGATE,
+  validate: true
 }), _defineProperty(_DefaultPageActions, TYPE_SAVE_AND_RETURN, {
   type: TYPE_SAVE_AND_RETURN,
   validate: false,