@ukhomeoffice/cop-react-form-renderer 5.14.0 → 5.15.0

package/dist/components/FormComponent/Container.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.DEFAULT_CLASS = void 0;
+var _copReactComponents = require("@ukhomeoffice/cop-react-components");
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _models = require("../../models");
 var _utils = _interopRequireDefault(require("../../utils"));
-var _cleanAttributes = _interopRequireDefault(require("../../utils/Component/cleanAttributes"));
 var _FormComponent = _interopRequireDefault(require("./FormComponent"));
 var _excluded = ["container", "value", "formData", "onChange", "wrap", "onTopLevelChange"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -61,8 +61,8 @@ var Container = function Container(_ref) {
     }), formData);
   };
   var classes = _utils.default.classBuilder(DEFAULT_CLASS, [], container.className);
-  var htmlAttrs = (0, _cleanAttributes.default)(attrs);
-  return /*#__PURE__*/_react.default.createElement("div", _extends({}, htmlAttrs, {
+  var cleanedAttrs = _copReactComponents.Utils.cleanHtmlAttributes(attrs);
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, cleanedAttrs, {
     className: classes(),
     id: container.id
   }), container.components && container.components.filter(shouldShow).map(function (component, index) {

package/dist/components/FormRenderer/FormRenderer.test.js

@@ -593,13 +593,13 @@ describe('components', function () {
             })));
           case 5:
             taskList = container.childNodes[0].childNodes[1]; // Check statuses are correct
-            firstTaskStatus = taskList.childNodes[3].childNodes[1].childNodes[1];
+            firstTaskStatus = taskList.childNodes[3].childNodes[0].childNodes[1];
             expect(firstTaskStatus.textContent).toEqual(_models.TaskStates.DETAILS[_models.TaskStates.TYPES.NOT_STARTED].label);
-            secondTaskStatus = taskList.childNodes[3].childNodes[2].childNodes[1];
+            secondTaskStatus = taskList.childNodes[3].childNodes[1].childNodes[1];
             expect(secondTaskStatus.textContent).toEqual(_models.TaskStates.DETAILS[_models.TaskStates.TYPES.CANNOT_START_YET].label);
 
             // Launch first task
-            firstTask = taskList.childNodes[3].childNodes[1].childNodes[0].childNodes[0];
+            firstTask = taskList.childNodes[3].childNodes[0].childNodes[0].childNodes[0];
             expect(firstTask.textContent).toEqual('Date, location and mode details');
             _react.fireEvent.click(firstTask, {});
 
@@ -664,9 +664,9 @@ describe('components', function () {
             expect(container.childNodes[0].childNodes[0].textContent).toEqual('Task List Form');
 
             // Check statuses are correct
-            firstTaskStatus = container.childNodes[0].childNodes[1].childNodes[3].childNodes[1].childNodes[1];
+            firstTaskStatus = container.childNodes[0].childNodes[1].childNodes[3].childNodes[0].childNodes[1];
             expect(firstTaskStatus.textContent).toEqual(_models.TaskStates.DETAILS[_models.TaskStates.TYPES.COMPLETE].label);
-            secondTaskStatus = container.childNodes[0].childNodes[1].childNodes[3].childNodes[2].childNodes[1];
+            secondTaskStatus = container.childNodes[0].childNodes[1].childNodes[3].childNodes[1].childNodes[1];
             expect(secondTaskStatus.textContent).toEqual(_models.TaskStates.DETAILS[_models.TaskStates.TYPES.NOT_STARTED].label);
 
             // Check final data submitted to backend is as expected
@@ -707,7 +707,7 @@ describe('components', function () {
             })));
           case 4:
             taskList = container.childNodes[0].childNodes[1]; // Launch first task
-            _react.fireEvent.click(taskList.childNodes[3].childNodes[1].childNodes[0].childNodes[0], {});
+            _react.fireEvent.click(taskList.childNodes[3].childNodes[0].childNodes[0].childNodes[0], {});
 
             // Fill first page and navigate
             newPage = container.childNodes[0].childNodes[0];
@@ -740,7 +740,7 @@ describe('components', function () {
             _react.fireEvent.click(container.childNodes[0].childNodes[0].childNodes[5].childNodes[0], {});
 
             // Launch same task again
-            _react.fireEvent.click(container.childNodes[0].childNodes[1].childNodes[3].childNodes[1].childNodes[0].childNodes[0], {});
+            _react.fireEvent.click(container.childNodes[0].childNodes[1].childNodes[3].childNodes[0].childNodes[0].childNodes[0], {});
 
             // Should be at CYA page
             expect(container.childNodes[0].childNodes[0].childNodes[0].textContent).toEqual('Check your answers');
@@ -790,7 +790,7 @@ describe('components', function () {
             })));
           case 5:
             taskList = container.childNodes[0].childNodes[1]; // Launch first task
-            _react.fireEvent.click(taskList.childNodes[3].childNodes[1].childNodes[0].childNodes[0], {});
+            _react.fireEvent.click(taskList.childNodes[3].childNodes[0].childNodes[0].childNodes[0], {});
 
             // Should be at Event Mode page
             expect(container.childNodes[0].childNodes[0].childNodes[0].textContent).toEqual('Event Mode');
@@ -833,7 +833,7 @@ describe('components', function () {
             })));
           case 7:
             taskList = container.childNodes[0].childNodes[1]; // Launch first task
-            _react.fireEvent.click(taskList.childNodes[3].childNodes[1].childNodes[0].childNodes[0], {});
+            _react.fireEvent.click(taskList.childNodes[3].childNodes[0].childNodes[0].childNodes[0], {});
 
             // Fill first page and navigate
             newPage = container.childNodes[0].childNodes[0];
@@ -864,7 +864,7 @@ describe('components', function () {
             _react.fireEvent.click(newPage.childNodes[2].childNodes[0], {});
 
             // Launch same task again
-            _react.fireEvent.click(container.childNodes[0].childNodes[1].childNodes[3].childNodes[1].childNodes[0].childNodes[0], {});
+            _react.fireEvent.click(container.childNodes[0].childNodes[1].childNodes[3].childNodes[0].childNodes[0].childNodes[0], {});
 
             // Should be on the first page
             expect(container.childNodes[0].childNodes[0].childNodes[0].textContent).toEqual('Event Date');
@@ -951,7 +951,7 @@ describe('components', function () {
             })));
           case 7:
             taskList = container.childNodes[0].childNodes[1]; // Launch first task of second section
-            firstTask = taskList.childNodes[5].childNodes[1].childNodes[0].childNodes[0];
+            firstTask = taskList.childNodes[5].childNodes[0].childNodes[0].childNodes[0];
             expect(firstTask.textContent).toEqual('People details');
             _react.fireEvent.click(firstTask, {});
 

package/dist/components/SummaryList/SummaryList.js

@@ -29,6 +29,7 @@ var SummaryList = function SummaryList(_ref) {
     className = _ref.className,
     attrs = _objectWithoutProperties(_ref, _excluded);
   var classes = _copReactComponents.Utils.classBuilder(classBlock, classModifiers, className);
+  var cleanedHtmlAttrs = _copReactComponents.Utils.cleanHtmlAttributes(attrs);
   var groupActionRow = null;
   if (isGroup) {
     var rowActions = rows.filter(function (r) {
@@ -38,7 +39,7 @@ var SummaryList = function SummaryList(_ref) {
   }
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "group-of-rows"
-  }, /*#__PURE__*/_react.default.createElement("dl", _extends({}, attrs, {
+  }, /*#__PURE__*/_react.default.createElement("dl", _extends({}, cleanedHtmlAttrs, {
     className: classes()
   }), rows.map(function (row) {
     var key = "".concat(row.pageId, "_").concat(row.full_path || row.fieldId);

package/dist/components/TaskList/TaskList.js

@@ -5,10 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.DEFAULT_INCOMPLETE_TITLE = exports.DEFAULT_CLASS = void 0;
+var _copReactComponents = require("@ukhomeoffice/cop-react-components");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
-var _copReactComponents = require("@ukhomeoffice/cop-react-components");
-var _dist = require("@ukhomeoffice/cop-react-components/dist");
 var _models = require("../../models");
 var _Task = _interopRequireDefault(require("./Task"));
 var _showComponent = _interopRequireDefault(require("../../utils/Component/showComponent"));
@@ -45,7 +44,7 @@ var TaskList = function TaskList(_ref) {
     formData = _ref.formData,
     attrs = _objectWithoutProperties(_ref, _excluded);
   var classes = _copReactComponents.Utils.classBuilder(classBlock, classModifiers, className);
-
+  var cleanedHtmlAttrs = _copReactComponents.Utils.cleanHtmlAttributes(attrs);
   // TODO state will be retrieved from a document in S3 rather than given in the component definition, covered under COP-9885
   var _sections$filter$redu = sections.filter(function (section) {
       return !section.skipped;
@@ -69,9 +68,8 @@ var TaskList = function TaskList(_ref) {
       onTaskAction(task);
     }
   };
-  return /*#__PURE__*/_react.default.createElement("div", _extends({
-    id: id
-  }, attrs, {
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, cleanedHtmlAttrs, {
+    id: id,
     className: classes()
   }), refNumber && refTitle && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
     className: "govuk-body govuk-!-margin-bottom-0"
@@ -101,9 +99,9 @@ var TaskList = function TaskList(_ref) {
       key: "".concat(section.name)
     }, /*#__PURE__*/_react.default.createElement("h2", {
       className: classes('section')
-    }, sections.length > 1 ? "".concat(index + 1, ". ") : '', section.name), /*#__PURE__*/_react.default.createElement("ol", {
+    }, sections.length > 1 ? "".concat(index + 1, ". ") : '', section.name), section.label && /*#__PURE__*/_react.default.createElement(_copReactComponents.Hint, null, section.label), /*#__PURE__*/_react.default.createElement("ol", {
       className: classes('items')
-    }, /*#__PURE__*/_react.default.createElement(_dist.Hint, null, section.label ? section.label : ''), section.tasks.filter(function (task) {
+    }, section.tasks.filter(function (task) {
       return task.state !== _models.TaskStates.TYPES.SKIPPED;
     }).map(function (task) {
       return /*#__PURE__*/_react.default.createElement(_Task.default, {

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

@@ -59,16 +59,18 @@ describe('components', function () {
         container = _render.container;
       var childNodes = container.childNodes;
       expect(childNodes.length).toEqual(1);
-      expect(childNodes[0].childNodes.length).toEqual(8);
-      var _childNodes$0$childNo = _slicedToArray(childNodes[0].childNodes, 8),
+      expect(childNodes[0].childNodes.length).toEqual(10);
+      var _childNodes$0$childNo = _slicedToArray(childNodes[0].childNodes, 10),
         referenceHeading = _childNodes$0$childNo[0],
         referenceNumber = _childNodes$0$childNo[1],
         incompleteForm = _childNodes$0$childNo[2],
         numComplete = _childNodes$0$childNo[3],
         subSectionOneHeading = _childNodes$0$childNo[4],
-        subSectionOneList = _childNodes$0$childNo[5],
-        subSectionTwoHeading = _childNodes$0$childNo[6],
-        subSectionTwoList = _childNodes$0$childNo[7];
+        subSectionOneLabel = _childNodes$0$childNo[5],
+        subSectionOneList = _childNodes$0$childNo[6],
+        subSectionTwoHeading = _childNodes$0$childNo[7],
+        subSectionTwoLabel = _childNodes$0$childNo[8],
+        subSectionTwoList = _childNodes$0$childNo[9];
       expect(referenceHeading).toMatchObject({
         tagName: 'P',
         textContent: 'COP reference number'
@@ -89,16 +91,14 @@ describe('components', function () {
         tagName: 'H2',
         textContent: '1. These are your tasks'
       });
-      expect(subSectionOneList.childNodes.length).toEqual(4);
+      expect(subSectionOneLabel.textContent).toEqual('This is the label for your first tasks');
+      expect(subSectionOneList.childNodes.length).toEqual(3);
       expect(subSectionTwoHeading).toMatchObject({
         tagName: 'H2',
         textContent: '2. These are your extra bonus tasks'
       });
-      expect(subSectionTwoList.childNodes.length).toEqual(4);
-      var subSectionOneLabel = childNodes[0].childNodes[5].firstChild;
-      expect(subSectionOneLabel.textContent).toEqual('This is the label for your first tasks');
-      var subSectionTwoLabel = childNodes[0].childNodes[7].firstChild;
       expect(subSectionTwoLabel.textContent).toEqual('This is the label for your extra tasks');
+      expect(subSectionTwoList.childNodes.length).toEqual(3);
     });
     it('should not show incomplete title if form is complete', function () {
       var COP_REF = '123';
@@ -364,9 +364,9 @@ describe('components', function () {
       })),
       container = _render7.container;
     var taskList = container.childNodes[0].childNodes[5].childNodes;
-    var firstTask = taskList[1].childNodes[0].childNodes[0];
-    var secondTask = taskList[2].childNodes[0].childNodes[0];
-    var thirdTask = taskList[3].childNodes[0].childNodes[0];
+    var firstTask = taskList[0].childNodes[0].childNodes[0];
+    var secondTask = taskList[1].childNodes[0].childNodes[0];
+    var thirdTask = taskList[2].childNodes[0].childNodes[0];
     _react.fireEvent.click(firstTask.childNodes[0]);
     expect(ON_CLICK_CALLS[0]).toEqual({
       pages: ['pageOne'],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "5.14.0",
+  "version": "5.15.0",
   "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": "^3.4.2",
+    "@ukhomeoffice/cop-react-components": "^3.5.0",
     "axios": "^0.23.0",
     "dayjs": "^1.11.0",
     "govuk-frontend": "^4.3.1",