@ukhomeoffice/cop-react-form-renderer 4.11.0 → 4.12.0

package/dist/components/FormRenderer/FormRenderer.js

@@ -535,12 +535,10 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
     noChangeAction: noChangeAction,
     sections: typeof hubDetails !== 'undefined' ? hubDetails.sections : [],
     type: type
-  })), hub === _models.HubFormats.TASK && formState.pageId === _models.FormPages.HUB && /*#__PURE__*/_react.default.createElement(_TaskList.default, {
-    sections: hubDetails.sections,
-    refNumber: data['businessKey'],
-    refTitle: _hub.refTitle,
+  })), hub === _models.HubFormats.TASK && formState.pageId === _models.FormPages.HUB && /*#__PURE__*/_react.default.createElement(_TaskList.default, _extends({}, hubDetails, {
+    refNumber: data.businessKey,
     onTaskAction: onTaskAction
-  }), formState.page && !formState.cya && !formState.page.collection && /*#__PURE__*/_react.default.createElement(_FormPage.default, {
+  })), formState.page && !formState.cya && !formState.page.collection && /*#__PURE__*/_react.default.createElement(_FormPage.default, {
     page: formState.page,
     onAction: onPageAction
   }), formState.page && !formState.cya && formState.page.collection && /*#__PURE__*/_react.default.createElement(_CollectionPage.default, {

package/dist/components/TaskList/TaskList.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.DEFAULT_CLASS = void 0;
+exports.default = exports.DEFAULT_INCOMPLETE_TITLE = exports.DEFAULT_CLASS = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -19,7 +19,7 @@ var _Task = _interopRequireDefault(require("./Task"));
 
 require("./TaskList.scss");
 
-var _excluded = ["refTitle", "refNumber", "sections", "fieldId", "onTaskAction", "classBlock", "classModifiers", "className"];
+var _excluded = ["refTitle", "refNumber", "incompleteTitle", "sections", "fieldId", "onTaskAction", "classBlock", "classModifiers", "className"];
 
 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); }
 
@@ -35,10 +35,13 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 var DEFAULT_CLASS = 'hods-task-list';
 exports.DEFAULT_CLASS = DEFAULT_CLASS;
+var DEFAULT_INCOMPLETE_TITLE = 'Incomplete form';
+exports.DEFAULT_INCOMPLETE_TITLE = DEFAULT_INCOMPLETE_TITLE;
 
 var TaskList = function TaskList(_ref) {
   var refTitle = _ref.refTitle,
       refNumber = _ref.refNumber,
+      incompleteTitle = _ref.incompleteTitle,
       sections = _ref.sections,
       fieldId = _ref.fieldId,
       onTaskAction = _ref.onTaskAction,
@@ -67,7 +70,7 @@ var TaskList = function TaskList(_ref) {
 
   return /*#__PURE__*/_react.default.createElement("div", _extends({}, attrs, {
     className: classes()
-  }), refNumber && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
+  }), refNumber && refTitle && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
     className: "govuk-body govuk-!-margin-bottom-0"
   }, /*#__PURE__*/_react.default.createElement("strong", {
     className: "tasklist-summary"
@@ -77,7 +80,7 @@ var TaskList = function TaskList(_ref) {
     className: "govuk-body govuk-!-margin-bottom-0"
   }, /*#__PURE__*/_react.default.createElement("strong", {
     className: "tasklist-summary"
-  }, "Incomplete form")), /*#__PURE__*/_react.default.createElement("p", {
+  }, incompleteTitle)), /*#__PURE__*/_react.default.createElement("p", {
     className: "govuk-body govuk-!-margin-bottom-7"
   }, "You have completed ".concat(numberOfCompleteSections, " of ").concat(numberOfSections, " sections")), sections.map(function (section, index) {
     return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
@@ -97,8 +100,9 @@ var TaskList = function TaskList(_ref) {
 };
 
 TaskList.propTypes = {
-  refNumber: _propTypes.default.string,
   refTitle: _propTypes.default.string,
+  refNumber: _propTypes.default.string,
+  incompleteTitle: _propTypes.default.string,
   sections: _propTypes.default.arrayOf(_propTypes.default.shape({
     name: _propTypes.default.string.isRequired,
     tasks: _propTypes.default.arrayOf(_propTypes.default.shape({
@@ -113,7 +117,8 @@ TaskList.propTypes = {
   className: _propTypes.default.string
 };
 TaskList.defaultProps = {
-  classBlock: DEFAULT_CLASS
+  classBlock: DEFAULT_CLASS,
+  incompleteTitle: DEFAULT_INCOMPLETE_TITLE
 };
 var _default = TaskList;
 exports.default = _default;

package/dist/components/TaskList/TaskList.stories.mdx

@@ -55,3 +55,55 @@ selected to navigate to that task.
 <Details summary="Properties" className="no-indent">
   <ArgsTable of={ TaskList } />
 </Details>
+
+## With custom incomplete title
+This can be specified within the `hub` portion of the form JSON:
+```
+{
+  ...
+  hub: {
+    ...
+    incompleteTitle: 'You still have work to do, it seems'
+  }
+}
+```
+
+<Canvas withToolbar>
+  <Story name="With custom incomplete title">
+    {() => {
+      const onAction = (row) => {
+        console.log('action clicked', row);
+      };
+      const COP_REF = '123';
+      const REF_TITLE = 'COP reference number';
+      const INCOMPLETE_TITLE = 'You still have work to do, it seems'
+      const SECTIONS = [
+        {
+          name: 'Add event details',
+          tasks: [
+            { name: 'Date, location and mode details', state: 'complete' },
+            { name: 'Officer and agency details', state: 'inProgress' },
+          ],
+        },
+        {
+          name: 'Add people details',
+          tasks: [
+            { name: 'People details', state: 'complete' },
+            { name: 'Immigration details', state: 'inProgress' },
+            { name: 'Journey details', state: 'notStarted' },
+          ],
+        },
+        {
+          name: 'Add item details',
+          tasks: [
+            { name: 'Item details', state: 'cannotStartYet' },
+            { name: 'Search and interception details', state: 'cannotStartYet' },
+          ],
+        },
+      ];
+      return (
+        <TaskList refNumber={COP_REF} refTitle={REF_TITLE} sections={SECTIONS} incompleteTitle={INCOMPLETE_TITLE} />
+      );
+    }}
+  </Story>
+</Canvas>

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

@@ -1,10 +1,16 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 var _react = require("@testing-library/react");
 
 var _react2 = _interopRequireDefault(require("react"));
 
-var _TaskList = _interopRequireDefault(require("./TaskList"));
+var _TaskList = _interopRequireWildcard(require("./TaskList"));
+
+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 }; }
 
@@ -63,7 +69,7 @@ describe('components', function () {
       expect(referenceNumber.textContent).toEqual('123');
       var incompleteForm = container.childNodes[0].childNodes[2];
       expect(incompleteForm.tagName).toEqual('P');
-      expect(incompleteForm.textContent).toEqual('Incomplete form');
+      expect(incompleteForm.textContent).toEqual(_TaskList.DEFAULT_INCOMPLETE_TITLE);
       var numComplete = container.childNodes[0].childNodes[3];
       expect(numComplete.tagName).toEqual('P');
       expect(numComplete.textContent).toEqual('You have completed 2 of 6 sections');
@@ -79,7 +85,7 @@ describe('components', function () {
       var subSectionTwoList = container.childNodes[0].childNodes[7];
       expect(subSectionTwoList.childNodes.length).toEqual(3);
     });
-    it('should not show incomplete form if form is complete', function () {
+    it('should not show incomplete title if form is complete', function () {
       var COP_REF = '123';
       var REF_TITLE = 'COP reference number';
       var sections = [{
@@ -163,6 +169,99 @@ describe('components', function () {
       expect(subSectionOne.childNodes[0].textContent).toEqual('');
       expect(subSectionOne.childNodes[1].textContent).toEqual('These are your tasks');
     });
+    it('should not display the reference if there is no reference title', function () {
+      var COP_REF = '123';
+      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 _render4 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
+        refNumber: COP_REF,
+        sections: sections
+      })),
+          container = _render4.container;
+
+      expect(container.childNodes.length).toEqual(1);
+      expect(container.childNodes[0].childNodes.length).toEqual(6); // The first child is now the incomplete text.
+
+      var incompleteForm = container.childNodes[0].childNodes[0];
+      expect(incompleteForm.tagName).toEqual('P');
+      expect(incompleteForm.textContent).toEqual(_TaskList.DEFAULT_INCOMPLETE_TITLE);
+    });
+    it('should show the correct incomplete title', function () {
+      var INCOMPLETE_TITLE = 'Alpha Bravo';
+      var COP_REF = '123';
+      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 _render5 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
+        refNumber: COP_REF,
+        sections: sections,
+        incompleteTitle: INCOMPLETE_TITLE
+      })),
+          container = _render5.container; // The first child is now the incomplete text.
+
+
+      var incompleteForm = container.childNodes[0].childNodes[0];
+      expect(incompleteForm.textContent).toEqual(INCOMPLETE_TITLE);
+    });
   });
   it('should pass the the selected task to the given onTaskAction function', function () {
     var COP_REF = '123';
@@ -190,13 +289,13 @@ describe('components', function () {
       }]
     }];
 
-    var _render4 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
+    var _render6 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
       refNumber: COP_REF,
       refTitle: REF_TITLE,
       sections: sections,
       onTaskAction: ON_CLICK
     })),
-        container = _render4.container;
+        container = _render6.container;
 
     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];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "4.11.0",
+  "version": "4.12.0",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",