@ukhomeoffice/cop-react-form-renderer 4.11.1 → 4.13.0

package/dist/components/FormComponent/Collection.js

@@ -184,6 +184,7 @@ var Collection = function Collection(_ref) {
         full_path: full_path,
         components: config.item.map(function (component) {
           return _objectSpread(_objectSpread({}, component), {}, {
+            readonly: config.readonly ? true : component.readonly,
             label: _utils.default.interpolateString(component.label, _objectSpread(_objectSpread({}, item), {}, {
               index: labelCount
             })),

package/dist/components/FormComponent/Collection.test.js

@@ -319,4 +319,63 @@ describe('components.FormComponent.Collection', function () {
       }
     }, _callee6);
   })));
+  it('should appropriately make child components of items readonly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7() {
+    var COLLECTION, _renderWithValidation5, container, c, item, _item$childNodes2, title, itemContainer, formGroup, label, hint, input;
+
+    return regeneratorRuntime.wrap(function _callee7$(_context7) {
+      while (1) {
+        switch (_context7.prev = _context7.next) {
+          case 0:
+            COLLECTION = {
+              id: ID,
+              fieldId: ID,
+              type: _models.ComponentTypes.COLLECTION,
+              item: [TEXT_COMPONENT],
+              readonly: true
+            };
+            _renderWithValidation5 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+              component: COLLECTION,
+              value: FORM_DATA[ID],
+              formData: FORM_DATA
+            })), container = _renderWithValidation5.container; // Check the container itself.
+
+            c = container.childNodes[0];
+            expect(c.tagName).toEqual('DIV');
+            expect(c.classList).toContain(_Collection.DEFAULT_CLASS); // And now check the single text component within it.
+
+            item = c.childNodes[0];
+            expect(item.tagName).toEqual('DIV');
+            expect(item.classList).toContain("".concat(_Collection.DEFAULT_CLASS, "__item"));
+            _item$childNodes2 = _slicedToArray(item.childNodes, 2), title = _item$childNodes2[0], itemContainer = _item$childNodes2[1];
+            expect(title.tagName).toEqual('LABEL');
+            expect(title.classList).toContain("".concat(_Collection.DEFAULT_CLASS, "__item-title"));
+            expect(itemContainer.tagName).toEqual('DIV');
+            expect(itemContainer.classList).toContain(_Container.DEFAULT_CLASS);
+            formGroup = itemContainer.childNodes[0];
+            expect(formGroup.tagName).toEqual('DIV');
+            expect(formGroup.classList).toContain('govuk-form-group');
+            label = formGroup.childNodes[0];
+            expect(label.tagName).toEqual('LABEL');
+            expect(label.classList).toContain('govuk-label');
+            expect(label.textContent).toEqual("".concat(TEXT_COMPONENT.label, " (optional)"));
+            expect(label.getAttribute('for')).toEqual("".concat(ID, "[0].").concat(TEXT_ID));
+            hint = formGroup.childNodes[1];
+            expect(hint.tagName).toEqual('SPAN');
+            expect(hint.classList).toContain('govuk-hint');
+            expect(hint.textContent).toEqual(TEXT_COMPONENT.hint);
+            input = formGroup.childNodes[2];
+            expect(input.tagName).toEqual('DIV'); // Now readonly, so a DIV.
+
+            expect(input.classList).toContain('hods-readonly'); // Now readonly, so hods-readonly
+
+            expect(input.id).toEqual("".concat(ID, "[0].").concat(TEXT_ID));
+            expect(input.textContent).toEqual(TEXT_VALUE);
+
+          case 30:
+          case "end":
+            return _context7.stop();
+        }
+      }
+    }, _callee7);
+  })));
 });

package/dist/components/FormComponent/Container.js

@@ -82,7 +82,9 @@ var Container = function Container(_ref) {
     return /*#__PURE__*/_react.default.createElement(_FormComponent.default, _extends({
       key: index
     }, attrs, {
-      component: component,
+      component: _objectSpread(_objectSpread({}, component), {}, {
+        readonly: container.readonly ? true : component.readonly
+      }),
       formData: formData,
       value: val || defaultValue,
       wrap: wrap,

package/dist/components/FormComponent/Container.test.js

@@ -359,4 +359,55 @@ describe('components.FormComponent.Container', function () {
       }
     }, _callee6);
   })));
+  it('should appropriately make child components readonly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7() {
+    var CONTAINER, _renderWithValidation7, container, c, formGroup, label, hint, input;
+
+    return regeneratorRuntime.wrap(function _callee7$(_context7) {
+      while (1) {
+        switch (_context7.prev = _context7.next) {
+          case 0:
+            CONTAINER = {
+              id: ID,
+              fieldId: ID,
+              type: _models.ComponentTypes.CONTAINER,
+              components: [TEXT_COMPONENT],
+              readonly: true
+            };
+            _renderWithValidation7 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+              component: CONTAINER,
+              value: FORM_DATA[ID],
+              formData: FORM_DATA
+            })), container = _renderWithValidation7.container; // Check the container itself.
+
+            c = container.childNodes[0];
+            expect(c.tagName).toEqual('DIV');
+            expect(c.classList).toContain(_Container.DEFAULT_CLASS); // And now check the single text component within it.
+
+            formGroup = c.childNodes[0];
+            expect(formGroup.tagName).toEqual('DIV');
+            expect(formGroup.classList).toContain('govuk-form-group');
+            label = formGroup.childNodes[0];
+            expect(label.tagName).toEqual('LABEL');
+            expect(label.classList).toContain('govuk-label');
+            expect(label.textContent).toEqual("".concat(TEXT_COMPONENT.label, " (optional)"));
+            expect(label.getAttribute('for')).toEqual(TEXT_ID);
+            hint = formGroup.childNodes[1];
+            expect(hint.tagName).toEqual('SPAN');
+            expect(hint.classList).toContain('govuk-hint');
+            expect(hint.textContent).toEqual(TEXT_COMPONENT.hint);
+            input = formGroup.childNodes[2];
+            expect(input.tagName).toEqual('DIV'); // Now readonly, so a DIV.
+
+            expect(input.classList).toContain('hods-readonly'); // Now readonly, so hods-readonly
+
+            expect(input.id).toEqual(TEXT_ID);
+            expect(input.textContent).toEqual(TEXT_VALUE);
+
+          case 22:
+          case "end":
+            return _context7.stop();
+        }
+      }
+    }, _callee7);
+  })));
 });

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,
@@ -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, {
@@ -99,6 +102,7 @@ var TaskList = function TaskList(_ref) {
 TaskList.propTypes = {
   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 = [{
@@ -208,7 +214,53 @@ describe('components', function () {
 
       var incompleteForm = container.childNodes[0].childNodes[0];
       expect(incompleteForm.tagName).toEqual('P');
-      expect(incompleteForm.textContent).toEqual('Incomplete form');
+      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 () {
@@ -237,13 +289,13 @@ describe('components', function () {
       }]
     }];
 
-    var _render5 = (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 = _render5.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.1",
+  "version": "4.13.0",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",