@ukhomeoffice/cop-react-form-renderer 5.13.3-bravo → 5.15.0

package/dist/components/CheckYourAnswers/Answer.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _copReactComponents = require("@ukhomeoffice/cop-react-components");
+var _VisuallyHidden = _interopRequireDefault(require("@ukhomeoffice/cop-react-components/dist/VisuallyHidden"));
 var _FormComponent = _interopRequireDefault(require("../FormComponent"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
@@ -20,7 +20,7 @@ var Answer = function Answer(_ref) {
     component = _ref.component,
     formData = _ref.formData;
   if (!value) {
-    return /*#__PURE__*/_react.default.createElement(_copReactComponents.VisuallyHidden, null, "No answer");
+    return /*#__PURE__*/_react.default.createElement(_VisuallyHidden.default, null, "No answer");
   }
   if (!component) {
     return Object.prototype.hasOwnProperty.call(value, 'label') ? value.label : value;

package/dist/components/CheckYourAnswers/Answer.test.js

@@ -1,6 +1,7 @@
 "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 _Readonly = require("@ukhomeoffice/cop-react-components/dist/Readonly");
 var _react = _interopRequireDefault(require("react"));
 var _setupTests = require("../../setupTests");
 var _Answer = _interopRequireDefault(require("./Answer"));
@@ -65,7 +66,7 @@ describe('components', function () {
             })), container = _renderWithValidation3.container;
             answer = container.childNodes[0];
             expect(answer.tagName).toEqual('DIV');
-            expect(answer.classList).toContain(DEFAULT_READONLY_CLASS);
+            expect(answer.classList).toContain(_Readonly.DEFAULT_CLASS);
             expect(answer.textContent).toEqual(VALUE);
           case 7:
           case "end":
@@ -124,7 +125,7 @@ describe('components', function () {
             })), container = _renderWithValidation5.container;
             answer = container.childNodes[0];
             expect(answer.tagName).toEqual('DIV');
-            expect(answer.classList).toContain(DEFAULT_READONLY_CLASS);
+            expect(answer.classList).toContain(_Readonly.DEFAULT_CLASS);
             expect(answer.textContent).toEqual('hardcoded delta');
           case 8:
           case "end":

package/dist/components/CollectionPage/CollectionPage.js

@@ -29,6 +29,7 @@ var DEFAULT_CLASS = _FormPage2.DEFAULT_CLASS;
 exports.DEFAULT_CLASS = DEFAULT_CLASS;
 var CollectionPage = function CollectionPage(_ref) {
   var page = _ref.page,
+    onCollectionChange = _ref.onCollectionChange,
     onAction = _ref.onAction,
     hashLink = _ref.hashLink,
     classBlock = _ref.classBlock,
@@ -62,6 +63,9 @@ var CollectionPage = function CollectionPage(_ref) {
         value: newValue
       }
     });
+    if (typeof onCollectionChange === 'function') {
+      onCollectionChange(page.formData);
+    }
   };
   var reportActiveIdChange = function reportActiveIdChange(newActiveId) {
     onPageChange({
@@ -119,6 +123,7 @@ CollectionPage.propTypes = {
     actions: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({}), _propTypes.default.string])),
     formData: _propTypes.default.shape({}).isRequired
   }).isRequired,
+  onCollectionChange: _propTypes.default.func,
   onAction: _propTypes.default.func.isRequired,
   hashLink: _propTypes.default.bool,
   classBlock: _propTypes.default.string,
@@ -126,6 +131,7 @@ CollectionPage.propTypes = {
   className: _propTypes.default.string
 };
 CollectionPage.defaultProps = {
+  onCollectionChange: undefined,
   hashLink: false,
   classBlock: DEFAULT_CLASS,
   classModifiers: [],

package/dist/components/CollectionPage/CollectionPage.test.js

@@ -150,7 +150,7 @@ describe('components.CollectionPage', function () {
       expect(input.tagName).toEqual('INPUT');
       expect(input.classList).toContain('govuk-input');
       expect(input.id).toEqual(fieldId);
-      expect(input.dataset.value).toEqual(val);
+      expect(input.value).toEqual(val);
       return input;
     };
     var checkAutoCompleteField = function checkAutoCompleteField(formGroup, fieldId, lbl, hnt, val) {

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

@@ -84,7 +84,7 @@ describe('components.FormComponent.Collection', function () {
           expect(input.tagName).toEqual('INPUT');
           expect(input.classList).toContain('govuk-input');
           expect(input.id).toEqual("".concat(ID, "[0].").concat(TEXT_ID));
-          expect(input.dataset.value).toEqual(TEXT_VALUE);
+          expect(input.value).toEqual(TEXT_VALUE);
         case 30:
         case "end":
           return _context.stop();
@@ -392,7 +392,7 @@ describe('components.FormComponent.Collection', function () {
           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.dataset.id).toEqual("".concat(ID, "[0].").concat(TEXT_ID));
+          expect(input.id).toEqual("".concat(ID, "[0].").concat(TEXT_ID));
           expect(input.textContent).toEqual(TEXT_VALUE);
         case 30:
         case "end":
@@ -518,7 +518,7 @@ describe('components.FormComponent.Collection', function () {
           expect(input.tagName).toEqual('INPUT');
           expect(input.classList).toContain('govuk-input');
           expect(input.id).toEqual("".concat(ID, "[0].").concat(TEXT_ID));
-          expect(input.dataset.value).toEqual(TEXT_VALUE);
+          expect(input.value).toEqual(TEXT_VALUE);
 
           // First item component 2
           formGroup = itemContainer.childNodes[1];
@@ -537,7 +537,7 @@ describe('components.FormComponent.Collection', function () {
           expect(input.tagName).toEqual('INPUT');
           expect(input.classList).toContain('govuk-input');
           expect(input.id).toEqual("".concat(ID, "[0].textTwo"));
-          expect(input.dataset.value).toEqual('charlie');
+          expect(input.value).toEqual('charlie');
 
           // Check the second item and confirm there is no hint
           itemTwo = c.childNodes[1];
@@ -564,7 +564,7 @@ describe('components.FormComponent.Collection', function () {
           expect(inputTwo.tagName).toEqual('INPUT');
           expect(inputTwo.classList).toContain('govuk-input');
           expect(inputTwo.id).toEqual("".concat(ID, "[1].").concat(TEXT_ID));
-          expect(inputTwo.dataset.value).toEqual('beta');
+          expect(inputTwo.value).toEqual('beta');
 
           // Second item second component
           formGroupTwo = itemContainerTwo.childNodes[1];
@@ -581,7 +581,7 @@ describe('components.FormComponent.Collection', function () {
           expect(inputTwo.tagName).toEqual('INPUT');
           expect(inputTwo.classList).toContain('govuk-input');
           expect(inputTwo.id).toEqual("".concat(ID, "[1].textTwo"));
-          expect(inputTwo.dataset.value).toEqual('delta');
+          expect(inputTwo.value).toEqual('delta');
         case 87:
         case "end":
           return _context11.stop();
@@ -658,7 +658,7 @@ describe('components.FormComponent.Collection', function () {
           expect(input.tagName).toEqual('INPUT');
           expect(input.classList).toContain('govuk-input');
           expect(input.id).toEqual("".concat(ID, "[0].").concat(TEXT_ID));
-          expect(input.dataset.value).toEqual(TEXT_VALUE);
+          expect(input.value).toEqual(TEXT_VALUE);
 
           // First item component 2
           formGroup = itemContainer.childNodes[1];
@@ -677,7 +677,7 @@ describe('components.FormComponent.Collection', function () {
           expect(input.tagName).toEqual('INPUT');
           expect(input.classList).toContain('govuk-input');
           expect(input.id).toEqual("".concat(ID, "[0].textTwo"));
-          expect(input.dataset.value).toEqual('charlie');
+          expect(input.value).toEqual('charlie');
 
           // Check the second item and confirm there is no hint
           itemTwo = c.childNodes[1];
@@ -704,7 +704,7 @@ describe('components.FormComponent.Collection', function () {
           expect(inputTwo.tagName).toEqual('INPUT');
           expect(inputTwo.classList).toContain('govuk-input');
           expect(inputTwo.id).toEqual("".concat(ID, "[1].").concat(TEXT_ID));
-          expect(inputTwo.dataset.value).toEqual('beta');
+          expect(inputTwo.value).toEqual('beta');
 
           // Second item second component
           formGroupTwo = itemContainerTwo.childNodes[1];
@@ -721,7 +721,7 @@ describe('components.FormComponent.Collection', function () {
           expect(inputTwo.tagName).toEqual('INPUT');
           expect(inputTwo.classList).toContain('govuk-input');
           expect(inputTwo.id).toEqual("".concat(ID, "[1].textTwo"));
-          expect(inputTwo.dataset.value).toEqual('delta');
+          expect(inputTwo.value).toEqual('delta');
         case 89:
         case "end":
           return _context12.stop();

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/FormComponent/Container.test.js

@@ -76,7 +76,7 @@ describe('components.FormComponent.Container', function () {
           expect(input.tagName).toEqual('INPUT');
           expect(input.classList).toContain('govuk-input');
           expect(input.id).toEqual("".concat(ID, ".").concat(TEXT_ID));
-          expect(input.dataset.value).toEqual(TEXT_VALUE);
+          expect(input.value).toEqual(TEXT_VALUE);
         case 22:
         case "end":
           return _context.stop();
@@ -130,7 +130,7 @@ describe('components.FormComponent.Container', function () {
           expect(input.tagName).toEqual('INPUT');
           expect(input.classList).toContain('govuk-input');
           expect(input.id).toEqual("".concat(ID, ".").concat(NESTED_ID, ".").concat(TEXT_ID));
-          expect(input.dataset.value).toEqual(NESTED_TEXT_VALUE);
+          expect(input.value).toEqual(NESTED_TEXT_VALUE);
         case 25:
         case "end":
           return _context2.stop();
@@ -359,7 +359,7 @@ describe('components.FormComponent.Container', function () {
           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.dataset.id).toEqual("".concat(ID, ".").concat(TEXT_ID));
+          expect(input.id).toEqual("".concat(ID, ".").concat(TEXT_ID));
           expect(input.textContent).toEqual(TEXT_VALUE);
         case 22:
         case "end":

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

@@ -47,7 +47,7 @@ describe('components', function () {
             expect(input.tagName).toEqual('INPUT');
             expect(input.classList).toContain('govuk-input');
             expect(input.id).toEqual(ID);
-            expect(input.dataset.value).toEqual(VALUE);
+            expect(input.value).toEqual(VALUE);
           case 22:
           case "end":
             return _context.stop();
@@ -80,7 +80,7 @@ describe('components', function () {
             expect(input.tagName).toEqual('INPUT');
             expect(input.classList).toContain('govuk-input');
             expect(input.id).toEqual(ID);
-            expect(input.dataset.value).toEqual(VALUE);
+            expect(input.value).toEqual(VALUE);
           case 10:
           case "end":
             return _context2.stop();
@@ -215,7 +215,7 @@ describe('components', function () {
             expect(input.tagName).toEqual('INPUT');
             expect(input.classList).toContain('govuk-input');
             expect(input.id).toEqual(ID);
-            expect(input.dataset.value).toEqual(VALUE);
+            expect(input.value).toEqual(VALUE);
           case 23:
           case "end":
             return _context6.stop();

package/dist/components/FormPage/FormPage.test.js

@@ -138,7 +138,7 @@ describe('components.FormPage', function () {
       expect(input.tagName).toEqual('INPUT');
       expect(input.classList).toContain('govuk-input');
       expect(input.id).toEqual(fieldId);
-      expect(input.dataset.value).toEqual(val);
+      expect(input.value).toEqual(val);
       return input;
     };
     var checkAutoCompleteField = function checkAutoCompleteField(formGroup, fieldId, lbl, hnt, val) {

package/dist/components/FormRenderer/FormRenderer.js

@@ -354,6 +354,7 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
     className: formState.page.className
   }), formState.page && !formState.cya && formState.page.collection && /*#__PURE__*/_react.default.createElement(_CollectionPage.default, {
     page: formState.page,
+    onCollectionChange: onChange,
     onAction: function onAction(action, patch, patchLabel) {
       (0, _onPageAction.default)(action, patch, patchLabel, hooks, data, formState, validate, onPageChange, type, pages, components, pageId, setPagePoint, currentTask, setData, hubDetails, setSubmitted, addErrors);
     },

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

@@ -552,9 +552,13 @@ describe('components', function () {
             })));
           case 7:
             taskList = container.childNodes[0].childNodes[1];
+            taskList.childNodes.forEach(function (child) {
+              // eslint-disable-next-line no-console
+              console.log("taskList, child = ".concat(JSON.stringify(child.textContent)));
+            });
             expect(taskList.childNodes[5].textContent).not.toEqual("test text");
             expect(taskList.childNodes[5].classList).not.toContain('govuk-textarea');
-          case 10:
+          case 11:
           case "end":
             return _context22.stop();
         }
@@ -589,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, {});
 
@@ -660,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
@@ -703,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];
@@ -736,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');
@@ -786,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');
@@ -829,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];
@@ -860,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');
@@ -947,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/FormRenderer/onCYAAction.js

@@ -101,7 +101,11 @@ var onCYAAction = function onCYAAction(setPagePoint, action, pages, validate, co
     onPageChange(_helpers.default.getNextPageId(type, pages, pageId, action, (_formState$page = formState.page) === null || _formState$page === void 0 ? void 0 : _formState$page.formData));
   }
   if (action.type === _models.PageAction.TYPES.CANCEL) {
-    hooks.onCancel();
+    var formData = _utils.default.Format.form({
+      pages: pages,
+      components: components
+    }, _objectSpread({}, data), _models.EventTypes.CANCEL);
+    hooks.onCancel(formData);
   }
 };
 var _default = onCYAAction;

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

@@ -102,15 +102,15 @@ describe('components.FormRenderer.onCYAAction', function () {
     onFormComplete: function onFormComplete() {
       this.onFormCompleteCalls += 1;
     },
-    onCancelCalls: 0,
-    onCancel: function onCancel() {
-      this.onCancelCalls += 1;
+    onCancelArgs: [],
+    onCancel: function onCancel(data) {
+      this.onCancelArgs.push(data);
     },
     reset: function reset() {
       this.onSubmitCalls = 0;
       this.onSubmitArgs = [];
       this.onFormCompleteCalls = 0;
-      this.onCancelCalls = 0;
+      this.onCancelArgs = [];
     }
   };
   var setPagePointCalls = 0;
@@ -578,6 +578,9 @@ describe('components.FormRenderer.onCYAAction', function () {
       }
     });
     _onCYAAction.default.apply(void 0, Object.values(CUSTOM_ARGS));
-    expect(MOCK_HOOKS.onCancelCalls).toEqual(1);
+    expect(MOCK_HOOKS.onCancelArgs.length).toEqual(1);
+    expect(MOCK_HOOKS.onCancelArgs[0]).toMatchObject({
+      id: 'formId'
+    });
   });
 });

package/dist/components/FormRenderer/onPageAction.js

@@ -20,11 +20,6 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 // patchLabel captures non-ID values 
 // for display purposes after submission.)
 var onPageAction = function onPageAction(action, patch, patchLabel, hooks, data, formState, validate, onPageChange, type, pages, components, pageId, setPagePoint, currentTask, setData, hubDetails, setSubmitted, addErrors) {
-  if (action.type === _models.PageAction.TYPES.CANCEL) {
-    hooks.onCancel();
-    return;
-  }
-  ;
   // Save a copy of data in case submit errors and we need to revert
   var preSubmitData = _objectSpread({}, data);
   var form = formState;
@@ -36,6 +31,14 @@ var onPageAction = function onPageAction(action, patch, patchLabel, hooks, data,
   // This should normally have no effect but will prevent issues 
   // with validation if formData happens to have been wiped.
   form.page.formData = _objectSpread(_objectSpread({}, form.page.formData), _patch);
+
+  // Exposes form data to consuming application.
+  if (action.type === _models.PageAction.TYPES.CANCEL) {
+    hooks.onCancel(form.page.formData);
+    return;
+  }
+  ;
+
   // Check to see whether the action is able to proceed, which in
   // in the case of a submission will validate the fields in the page.
   if (_helpers.default.canActionProceed(action, form.page, validate.page)) {

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

@@ -121,15 +121,15 @@ describe('components.FormRenderer.onPageAction', function () {
     onFormComplete: function onFormComplete() {
       this.onFormCompleteCalls += 1;
     },
-    onCancelCalls: 0,
-    onCancel: function onCancel() {
-      this.onCancelCalls += 1;
+    onCancelArgs: [],
+    onCancel: function onCancel(data) {
+      this.onCancelArgs.push(data);
     },
     reset: function reset() {
       this.onSubmitCalls = 0;
       this.onSubmitArgs = [];
       this.onFormCompleteCalls = 0;
-      this.onCancelCalls = 0;
+      this.onCancelArgs = [];
       this.onActionCalls = 0;
     },
     onActionCalls: 0,
@@ -290,7 +290,8 @@ describe('components.FormRenderer.onPageAction', function () {
       action: ACTION
     });
     _onPageAction.default.apply(void 0, Object.values(CUSTOM_ARGS));
-    expect(MOCK_HOOKS.onCancelCalls).toEqual(1);
+    expect(MOCK_HOOKS.onCancelArgs.length).toEqual(1);
+    expect(MOCK_HOOKS.onCancelArgs[0]).toMatchObject({});
     // Shouldn't get to the point of validation if
     // action is a cancel action.
     expect(_helpers.default.canActionProceedCalls).toEqual(0);

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,9 +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 _models = require("../../models");
 var _Task = _interopRequireDefault(require("./Task"));
 var _showComponent = _interopRequireDefault(require("../../utils/Component/showComponent"));
@@ -44,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;
@@ -68,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"
@@ -100,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(_copReactComponents.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/dist/context/HooksContext/HooksContext.js

@@ -56,7 +56,7 @@ var DEFAULT_HOOKS = {
     return errors;
   },
   // Returns the list of errors already found in FR by default.
-  onCancel: function onCancel() {} // Consuming application must provide function to action, else this does nothing.
+  onCancel: function onCancel(data) {} // Consuming application must provide function to action, else this does nothing.
 };
 
 var ALLOWED_HOOKS = Object.keys(DEFAULT_HOOKS);

package/dist/hooks/useRefData.js

@@ -52,8 +52,7 @@ var useRefData = function useRefData(component, formData) {
     setStatus = _useState4[1];
   (0, _react.useEffect)(function () {
     if (!url) {
-      var _component$data;
-      if ((_component$data = component.data) !== null && _component$data !== void 0 && _component$data.options) {
+      if (component.data && component.data.options) {
         setData(_Data.default.refData.toOptions(component.data.options, component.item));
       }
       setStatus(STATUS_COMPLETE);

package/dist/models/ComponentTypes.js

@@ -10,7 +10,6 @@ var TYPE_CALCULATION = 'calculation';
 var TYPE_CHECKBOXES = 'checkboxes';
 var TYPE_COLLECTION = 'collection';
 var TYPE_CONTAINER = 'container';
-var TYPE_DATA = 'data';
 var TYPE_DATE = 'date';
 var TYPE_DETAILS = 'details';
 var TYPE_EMAIL = 'email';
@@ -35,7 +34,6 @@ var ComponentTypes = {
   CHECKBOXES: TYPE_CHECKBOXES,
   COLLECTION: TYPE_COLLECTION,
   CONTAINER: TYPE_CONTAINER,
-  DATA: TYPE_DATA,
   DATE: TYPE_DATE,
   DETAILS: TYPE_DETAILS,
   EMAIL: TYPE_EMAIL,

package/dist/models/EventTypes.js

@@ -6,9 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var TYPE_BLUR = 'blur';
 var TYPE_SUBMIT = 'submit';
+var TYPE_CANCEL = 'cancel';
 var EventTypes = {
   BLUR: TYPE_BLUR,
-  SUBMIT: TYPE_SUBMIT
+  SUBMIT: TYPE_SUBMIT,
+  CANCEL: TYPE_CANCEL
 };
 var _default = EventTypes;
 exports.default = _default;

package/dist/utils/CheckYourAnswers/showComponentCYA.js

@@ -9,6 +9,7 @@ var _Component = _interopRequireDefault(require("../Component"));
 var _Container = _interopRequireDefault(require("../Container"));
 var _getSourceData = _interopRequireDefault(require("../Data/getSourceData"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable no-console */
 // Local imports
 
 var EXCLUDE_FROM_CYA = [_models.ComponentTypes.ALERT, _models.ComponentTypes.HEADING, _models.ComponentTypes.HTML, _models.ComponentTypes.INSET_TEXT];

package/dist/utils/Component/getComponent.js

@@ -80,17 +80,6 @@ var getCalculation = function getCalculation(config) {
     readonly: true
   }));
 };
-var getData = function getData(config) {
-  var options = [];
-  _Data.default.getOptions(config, function (val) {
-    options = val;
-  });
-  var attrs = (0, _cleanAttributes.default)(config);
-  var text = JSON.stringify(options, null, 2);
-  return /*#__PURE__*/_react.default.createElement(_copReactComponents.TextArea, _extends({}, attrs, {
-    value: text
-  }));
-};
 var getDate = function getDate(config) {
   var attrs = (0, _cleanAttributes.default)(config);
   return /*#__PURE__*/_react.default.createElement(_copReactComponents.DateInput, attrs);
@@ -231,8 +220,6 @@ var getComponentByType = function getComponentByType(config) {
       return getParagraph(config);
     case _models.ComponentTypes.LIST:
       return getList(config);
-    case _models.ComponentTypes.DATA:
-      return getData(config);
     default:
       {
         return null;

package/dist/utils/Component/getComponentTests/getComponent.calculation.test.js

@@ -148,7 +148,7 @@ describe('utils.Component.get', function () {
             expect(formGroup.classList).toContain('govuk-form-group');
             expect(input.tagName).toEqual('DIV');
             expect(input.classList).toContain('hods-readonly');
-            expect(input.dataset.id).toEqual(ID);
+            expect(input.id).toEqual(ID);
             expect("".concat(COMPONENT.formData[FIELD_ID])).toEqual(test.result);
           case 13:
           case "end":
@@ -258,7 +258,7 @@ describe('utils.Component.get', function () {
       expect(formGroup.classList).toContain('govuk-form-group');
       expect(input.tagName).toEqual('DIV');
       expect(input.classList).toContain('hods-readonly');
-      expect(input.dataset.id).toEqual(ID);
+      expect(input.id).toEqual(ID);
       expect(error).toBeCalledTimes(1);
       expect(error).toBeCalledWith(test.error);
     });

package/dist/utils/Component/getComponentTests/getComponent.nested.test.js

@@ -51,7 +51,7 @@ describe('utils.Component.get', function () {
           expect(input.tagName).toEqual('INPUT');
           expect(input.classList).toContain('govuk-input');
           expect(input.id).toEqual(ID);
-          expect(input.dataset.value).toEqual(VALUE);
+          expect(input.value).toEqual(VALUE);
           child2 = container.childNodes[1];
           expect(child2.childNodes[0].childNodes.length).toEqual(3);
           expect(child2.classList).toContain('govuk-form-group');
@@ -62,9 +62,9 @@ describe('utils.Component.get', function () {
           expect(input2.tagName).toEqual('DIV');
           expect(input2.classList).toContain('govuk-date-input');
           expect(input2.id).toEqual(ID2);
-          expect(input2.childNodes[0].childNodes[1].dataset.value).toEqual('1');
-          expect(input2.childNodes[1].childNodes[1].dataset.value).toEqual('2');
-          expect(input2.childNodes[2].childNodes[1].dataset.value).toEqual('2022');
+          expect(input2.childNodes[0].childNodes[1].value).toEqual('1');
+          expect(input2.childNodes[1].childNodes[1].value).toEqual('2');
+          expect(input2.childNodes[2].childNodes[1].value).toEqual('2022');
         case 35:
         case "end":
           return _context.stop();
@@ -133,7 +133,7 @@ describe('utils.Component.get', function () {
           expect(input.tagName).toEqual('INPUT');
           expect(input.classList).toContain('govuk-input');
           expect(input.id).toEqual("".concat(CONTAINER_ID, ".").concat(FIELD_ID));
-          expect(input.dataset.value).toEqual(VALUE);
+          expect(input.value).toEqual(VALUE);
         case 19:
         case "end":
           return _context3.stop();
@@ -172,7 +172,7 @@ describe('utils.Component.get', function () {
           expect(input.tagName).toEqual('INPUT');
           expect(input.classList).toContain('govuk-input');
           expect(input.id).toEqual("".concat(COLLECTION_ID, "[0].").concat(FIELD_ID));
-          expect(input.dataset.value).toEqual(VALUE);
+          expect(input.value).toEqual(VALUE);
         case 19:
         case "end":
           return _context4.stop();

package/dist/utils/Condition/meetsAllConditions.js

@@ -10,6 +10,19 @@ var _setupConditions = _interopRequireDefault(require("./setupConditions"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // Local imports
 
+var testConditions = function testConditions(conditions, data) {
+  var type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'and';
+  var arr = Array.isArray(conditions) ? conditions : [conditions];
+  var testCallback = function testCallback(condition) {
+    if (Array.isArray(condition.conditions)) {
+      return testConditions(condition.conditions, data, condition.type);
+    }
+    var sourceDataValue = _Data.default.getSource(data, condition.field);
+    return (0, _meetsCondition.default)(condition, sourceDataValue, data);
+  };
+  return type === 'and' ? arr.every(testCallback) : arr.some(testCallback);
+};
+
 /**
  * Evaluates all condition(s) on a page, container, or component.
  * @param {object} options The container to consider.
@@ -19,11 +32,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var meetsAllConditions = function meetsAllConditions(options, data) {
   var conditions = (0, _setupConditions.default)(options);
   if (conditions) {
-    var arr = Array.isArray(conditions) ? conditions : [conditions];
-    return arr.every(function (condition) {
-      var sourceDataValue = _Data.default.getSource(data, condition.field);
-      return (0, _meetsCondition.default)(condition, sourceDataValue, data);
-    });
+    return testConditions(conditions, data);
   }
   return true;
 };

package/dist/utils/Condition/meetsAllConditions.test.js

@@ -58,4 +58,38 @@ describe('utils.Condition.meetsAllConditions', function () {
     }];
     expect((0, _meetsAllConditions.default)(CONDITIONS, DATA)).toBeFalsy();
   });
+  it('should handle nested conditions', function () {
+    var VALID_DATA = {
+      shouldBeAlpha: 'alpha',
+      shouldBeBravo: 'bravo',
+      canBeCharlieOrDelta: 'charlie'
+    };
+    var INVALID_DATA = {
+      shouldBeAlpha: 'alpha',
+      shouldBeBravo: 'bravo',
+      canBeCharlieOrDelta: 'echo'
+    };
+    var CONDITIONS = [{
+      type: 'or',
+      conditions: [{
+        field: 'canBeCharlieOrDelta',
+        op: 'eq',
+        value: 'charlie'
+      }, {
+        field: 'canBeCharlieOrDelta',
+        op: 'eq',
+        value: 'delta'
+      }]
+    }, {
+      field: 'shouldBeAlpha',
+      op: 'eq',
+      value: 'alpha'
+    }, {
+      field: 'shouldBeBravo',
+      op: 'eq',
+      value: 'bravo'
+    }];
+    expect((0, _meetsAllConditions.default)(CONDITIONS, VALID_DATA)).toBeTruthy();
+    expect((0, _meetsAllConditions.default)(CONDITIONS, INVALID_DATA)).toBeFalsy();
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "5.13.3-bravo",
+  "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",