@ukhomeoffice/cop-react-form-renderer 6.0.5-peter → 6.5.1-peter

package/dist/components/FormComponent/Collection.js

@@ -90,22 +90,6 @@ var Collection = function Collection(_ref) {
       return _ref3.apply(this, arguments);
     };
   }();
-  (0, _react.useEffect)(function () {
-    if (config.focusOnAdd && Array.isArray(value) && value.length) {
-      if (value.length > config.minimumEntries || !config.minimumEntries) {
-        var _value2, _document$getElementB, _focusable$;
-        var containerId = (_value2 = value[value.length - 1]) === null || _value2 === void 0 ? void 0 : _value2.id;
-        var container = (_document$getElementB = document.getElementById(containerId)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.childNodes[0];
-        var focusable = container === null || container === void 0 ? void 0 : container.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-        (_focusable$ = focusable[0]) === null || _focusable$ === void 0 || _focusable$.focus();
-      }
-    }
-  }, [value.length, config.focusOnAdd, config.minimumEntries]);
-  (0, _react.useEffect)(function () {
-    if (config.minimumEntries && !value.length) {
-      onAddAnother();
-    }
-  }, [config.minimumEntries, value.length]);
   var onRemoveItem = /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(item) {
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
@@ -124,6 +108,28 @@ var Collection = function Collection(_ref) {
       return _ref4.apply(this, arguments);
     };
   }();
+  var getAddLabel = function getAddLabel(labels) {
+    if (labels.initial && !value.length) {
+      return labels.initial;
+    }
+    return labels.add;
+  };
+  (0, _react.useEffect)(function () {
+    if (config.focusOnAdd && Array.isArray(value) && value.length) {
+      if (value.length > config.minimumEntries || !config.minimumEntries) {
+        var _value2, _document$getElementB, _focusable$;
+        var containerId = (_value2 = value[value.length - 1]) === null || _value2 === void 0 ? void 0 : _value2.id;
+        var container = (_document$getElementB = document.getElementById(containerId)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.childNodes[0];
+        var focusable = container === null || container === void 0 ? void 0 : container.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        (_focusable$ = focusable[0]) === null || _focusable$ === void 0 || _focusable$.focus();
+      }
+    }
+  }, [value.length, config.focusOnAdd, config.minimumEntries]);
+  (0, _react.useEffect)(function () {
+    if (config.minimumEntries && !value.length) {
+      onAddAnother();
+    }
+  }, [config.minimumEntries, value.length]);
   var labels = _objectSpread(_objectSpread({}, _models.CollectionLabels), config.labels);
   var classes = _utils.default.classBuilder(DEFAULT_CLASS, [], config.className);
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -203,7 +209,7 @@ var Collection = function Collection(_ref) {
   }), !config.disableAddAndRemove && /*#__PURE__*/_react.default.createElement(_copReactComponents.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
     onClick: onAddAnother,
     classModifiers: "secondary"
-  }, labels.add)));
+  }, getAddLabel(labels))));
 };
 Collection.propTypes = {
   config: _propTypes.default.shape({
@@ -220,6 +226,7 @@ Collection.propTypes = {
     })),
     label: _propTypes.default.string,
     labels: _propTypes.default.shape({
+      initial: _propTypes.default.string,
       item: _propTypes.default.string,
       add: _propTypes.default.string,
       remove: _propTypes.default.string

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

@@ -964,4 +964,142 @@ describe('components.FormComponent.Collection', function () {
       }
     }, _callee18);
   })));
+  it('should display the initial cta add label and revert to default cta label on subsequent additions', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee20() {
+    var COLLECTION, container, c, addButton, item, label;
+    return _regeneratorRuntime().wrap(function _callee20$(_context20) {
+      while (1) switch (_context20.prev = _context20.next) {
+        case 0:
+          COLLECTION = {
+            id: ID,
+            fieldId: ID,
+            type: _models.ComponentTypes.COLLECTION,
+            item: [TEXT_COMPONENT],
+            // eslint-disable-next-line no-template-curly-in-string
+            labels: {
+              add: 'Add another item',
+              initial: 'Add an item',
+              item: 'Item ${index}'
+            }
+          };
+          container = document.createElement('div');
+          document.body.appendChild(container);
+          _context20.next = 5;
+          return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee19() {
+            return _regeneratorRuntime().wrap(function _callee19$(_context19) {
+              while (1) switch (_context19.prev = _context19.next) {
+                case 0:
+                  (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+                    component: COLLECTION
+                  }), container);
+                case 1:
+                case "end":
+                  return _context19.stop();
+              }
+            }, _callee19);
+          })));
+        case 5:
+          // Check the container itself.
+          c = container.childNodes[0];
+          expect(c.tagName).toEqual('DIV');
+          expect(c.classList).toContain(_Collection.DEFAULT_CLASS);
+
+          // And now make sure it has no children OTHER than the button to add an item.
+          expect(c.childNodes.length).toEqual(1);
+
+          // Get hold of that "Add another" button and click it.
+          addButton = c.childNodes[0].childNodes[0];
+          expect(addButton.textContent).toContain('Add an item');
+          _react.fireEvent.click(addButton, {});
+
+          // Make sure an item has been added.
+          expect(c.childNodes.length).toEqual(2);
+          item = c.childNodes[0];
+          label = item.childNodes[0];
+          expect(label.textContent).toContain(_utils.default.interpolateString(_models.CollectionLabels.item, {
+            index: 1
+          }));
+
+          // Check label of subsequent call to action button has updated
+          expect(addButton.textContent).toContain('Add another item');
+        case 17:
+        case "end":
+          return _context20.stop();
+      }
+    }, _callee20);
+  })));
+  it('should revert back to the initial cta add label on adding and removing an item', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee22() {
+    var COLLECTION, container, c, addButton, item, label, removeButton;
+    return _regeneratorRuntime().wrap(function _callee22$(_context22) {
+      while (1) switch (_context22.prev = _context22.next) {
+        case 0:
+          COLLECTION = {
+            id: ID,
+            fieldId: ID,
+            type: _models.ComponentTypes.COLLECTION,
+            item: [TEXT_COMPONENT],
+            // eslint-disable-next-line no-template-curly-in-string
+            labels: {
+              add: 'Add another item',
+              initial: 'Add an item',
+              item: 'Item ${index}'
+            }
+          };
+          container = document.createElement('div');
+          document.body.appendChild(container);
+          _context22.next = 5;
+          return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee21() {
+            return _regeneratorRuntime().wrap(function _callee21$(_context21) {
+              while (1) switch (_context21.prev = _context21.next) {
+                case 0:
+                  (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+                    component: COLLECTION
+                  }), container);
+                case 1:
+                case "end":
+                  return _context21.stop();
+              }
+            }, _callee21);
+          })));
+        case 5:
+          // Check the container itself.
+          c = container.childNodes[0];
+          expect(c.tagName).toEqual('DIV');
+          expect(c.classList).toContain(_Collection.DEFAULT_CLASS);
+
+          // And now make sure it has no children OTHER than the button to add an item.
+          expect(c.childNodes.length).toEqual(1);
+
+          // Get hold of that "Add another" button and click it.
+          addButton = c.childNodes[0].childNodes[0];
+          expect(addButton.textContent).toContain('Add an item');
+          _react.fireEvent.click(addButton, {});
+
+          // Make sure an item has been added.
+          expect(c.childNodes.length).toEqual(2);
+          item = c.childNodes[0];
+          label = item.childNodes[0];
+          expect(label.textContent).toContain(_utils.default.interpolateString(_models.CollectionLabels.item, {
+            index: 1
+          }));
+
+          // Check label of subsequent call to action button has updated
+          expect(addButton.textContent).toContain('Add another item');
+
+          // Get hold of the newly-add item's "Remove" button.
+          removeButton = label.childNodes[1];
+          expect(removeButton.tagName).toEqual('BUTTON');
+          expect(removeButton.classList).toContain('hods-button--secondary');
+          expect(removeButton.textContent).toContain(_models.CollectionLabels.remove);
+
+          // Click the "Remove" button
+          _react.fireEvent.click(removeButton, {});
+
+          // Check label of subsequent call to action button has updated
+          expect(addButton.textContent).toContain('Add an item');
+        case 23:
+        case "end":
+          return _context22.stop();
+      }
+    }, _callee22);
+  })));
 });

package/dist/components/FormComponent/FormComponent.js

@@ -67,6 +67,17 @@ var FormComponent = function FormComponent(_ref) {
         // eslint-disable-next-line no-param-reassign
         target.value = target.value.trim();
       }
+      if (component.type === _models.ComponentTypes.CHECKBOXES && Array.isArray(target.value)) {
+        target.value.forEach(function (item) {
+          if (item.children && item.nested) {
+            // eslint-disable-next-line no-param-reassign
+            delete item.children;
+            // eslint-disable-next-line no-param-reassign
+            delete item.nested;
+          }
+        });
+      }
+
       // eslint-disable-next-line no-param-reassign
       target = (0, _helpers.addLabel)(target, component, data);
       onChange({
@@ -119,6 +130,7 @@ var FormComponent = function FormComponent(_ref) {
       formData: formData,
       onAction: onAction,
       onChange: onChange,
+      onTopLevelChange: onTopLevelChange,
       pages: pages
     })));
   }

package/dist/components/FormPage/FormPage.scss

@@ -1,4 +1,4 @@
-@import "node_modules/govuk-frontend/govuk/_base";
+@import "govuk-frontend/dist/govuk/_base";
 
 .hods-form {
   &__page {

package/dist/components/FormRenderer/FormRenderer.js

@@ -174,9 +174,9 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
         });
       });
     }
+    clearErrors();
     setGoingBack(true);
     hooks.onGoingBack(e.state ? e.state : null);
-    clearErrors();
     if (components && pages && data && (_formState$page = formState.page) !== null && _formState$page !== void 0 && _formState$page.formData && pagePoint === undefined) {
       var submissionData = _utils.default.Format.form({
         pages: pages,
@@ -302,7 +302,7 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
         setData(newData);
       }
     }
-    if (((_formState$page3 = formState.page) === null || _formState$page3 === void 0 ? void 0 : _formState$page3.type) === _models.FormPages.PARTIAL_CYA) {
+    if (((_formState$page3 = formState.page) === null || _formState$page3 === void 0 ? void 0 : _formState$page3.type) === _models.FormPages.PARTIAL_CYA && !cya.disableTaskSwitch) {
       hubDetails.sections.every(function (section) {
         return section.tasks.every(function (task) {
           if (task.pages.includes(page.pageId) && task.name !== currentTask.name) {
@@ -366,6 +366,7 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
     submitting: submitting
   }), formState.page && !formState.cya && formState.page.collection && /*#__PURE__*/_react.default.createElement(_CollectionPage.default, {
     page: formState.page,
+    pages: pages,
     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, submitting, setSubmitting, errors);
@@ -382,7 +383,8 @@ var propTypes = {
   className: _propTypes.default.string,
   components: _propTypes.default.arrayOf(_propTypes.default.shape({})).isRequired,
   cya: _propTypes.default.shape({
-    actions: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({}), _propTypes.default.string]))
+    actions: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({}), _propTypes.default.string])),
+    disableTaskSwitch: _propTypes.default.bool
   }),
   data: _propTypes.default.shape({
     formStatus: _propTypes.default.shape({
@@ -411,7 +413,8 @@ var defaultProps = {
   className: '',
   classModifiers: [],
   cya: {
-    actions: []
+    actions: [],
+    disableTaskSwitch: false
   },
   data: null,
   hashLink: false,

package/dist/components/FormRenderer/FormRenderer.scss

@@ -1,4 +1,4 @@
-@import "node_modules/govuk-frontend/govuk/_base";
+@import "govuk-frontend/dist/govuk/_base";
 
 .hods-form {
   display: block;