@ukhomeoffice/cop-react-form-renderer 2.1.0 → 2.6.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/hooks/index.js

@@ -1,8 +1,22 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "STATUS_COMPLETE", {
+  enumerable: true,
+  get: function get() {
+    return _useRefData.STATUS_COMPLETE;
+  }
+});
+Object.defineProperty(exports, "STATUS_LOADING", {
+  enumerable: true,
+  get: function get() {
+    return _useRefData.STATUS_LOADING;
+  }
+});
 Object.defineProperty(exports, "useAxios", {
   enumerable: true,
   get: function get() {
@@ -34,6 +48,10 @@ var _useHooks = _interopRequireDefault(require("./useHooks"));
 
 var _useGetRequest = _interopRequireDefault(require("./useGetRequest"));
 
-var _useRefData = _interopRequireDefault(require("./useRefData"));
+var _useRefData = _interopRequireWildcard(require("./useRefData"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/hooks/useHooks.js

@@ -4,11 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.resetHooks = exports.removeHook = exports.default = exports.addHook = exports.ALLOWED_HOOKS = void 0;
-var ALLOWED_HOOKS = ['onRequest', 'onFormComplete', 'onFormLoad', 'onPageChange', 'onSubmit'];
+var ALLOWED_HOOKS = ['onFormComplete', 'onFormLoad', 'onGetComponent', 'onPageChange', 'onRequest', 'onSubmit'];
 exports.ALLOWED_HOOKS = ALLOWED_HOOKS;
 var DEFAULT_HOOKS = {
   onFormComplete: function onFormComplete() {},
   onFormLoad: function onFormLoad() {},
+  onGetComponent: function onGetComponent(config, wrap) {
+    return null;
+  },
   onPageChange: function onPageChange(pageId) {
     return pageId;
   },
@@ -22,6 +25,7 @@ var DEFAULT_HOOKS = {
 var hooks = {
   onFormComplete: DEFAULT_HOOKS.onFormComplete,
   onFormLoad: DEFAULT_HOOKS.onFormLoad,
+  onGetComponent: DEFAULT_HOOKS.onGetComponent,
   onPageChange: DEFAULT_HOOKS.onPageChange,
   onRequest: DEFAULT_HOOKS.onRequest,
   onSubmit: DEFAULT_HOOKS.onSubmit

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