@ukhomeoffice/cop-react-form-renderer 4.41.0 → 4.43.0

package/dist/components/FormComponent/Collection.js

@@ -153,6 +153,8 @@ var Collection = function Collection(_ref) {
     required: config.required,
     className: classes('title')
   }, config.label), value && value.map(function (item, index) {
+    var _config$removeLocatio;
+
     var full_path = "".concat(config.full_path || config.fieldId, "[").concat(index, "]");
     var labelCount = (config.countOffset || 0) + index + 1;
 
@@ -164,6 +166,7 @@ var Collection = function Collection(_ref) {
       index: labelCount
     }));
 
+    var removeStyle = config.disableAddAndRemove ? '' : (_config$removeLocatio = config.removeLocation) !== null && _config$removeLocatio !== void 0 ? _config$removeLocatio : 'start';
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(classes('item')),
       key: item.id
@@ -171,7 +174,7 @@ var Collection = function Collection(_ref) {
       id: item.id,
       required: true,
       className: classes('item-title')
-    }, itemTitle, !config.disableAddAndRemove && /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
+    }, itemTitle, removeStyle === 'start' && /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
       onClick: function onClick() {
         return onRemoveItem(item);
       },
@@ -198,7 +201,12 @@ var Collection = function Collection(_ref) {
       onChange: onCollectionChange,
       onTopLevelChange: onTopLevelChange,
       wrap: wrap
-    }));
+    }), removeStyle === 'end' && /*#__PURE__*/_react.default.createElement(_copReactComponents.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
+      onClick: function onClick() {
+        return onRemoveItem(item);
+      },
+      classModifiers: "secondary"
+    }, removeLabel)));
   }), !config.disableAddAndRemove && /*#__PURE__*/_react.default.createElement(_copReactComponents.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
     onClick: onAddAnother,
     classModifiers: "secondary"
@@ -215,6 +223,7 @@ Collection.propTypes = {
       add: _propTypes.default.string,
       remove: _propTypes.default.string
     }),
+    removeLocation: _propTypes.default.string,
     disableAddAndRemove: _propTypes.default.bool,
     countOffset: _propTypes.default.number,
     className: _propTypes.default.string,

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

@@ -319,12 +319,83 @@ describe('components.FormComponent.Collection', function () {
       }
     }, _callee6);
   })));
-  it('should appropriately make child components of items readonly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7() {
+  it('should handle the alternative styling', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8() {
+    var COLLECTION, container, c, addButton, item, label, removeButton;
+    return regeneratorRuntime.wrap(function _callee8$(_context8) {
+      while (1) {
+        switch (_context8.prev = _context8.next) {
+          case 0:
+            COLLECTION = {
+              id: ID,
+              fieldId: ID,
+              type: _models.ComponentTypes.COLLECTION,
+              item: [TEXT_COMPONENT],
+              removeLocation: 'end'
+            };
+            container = document.createElement('div');
+            document.body.appendChild(container);
+            _context8.next = 5;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7() {
+              return regeneratorRuntime.wrap(function _callee7$(_context7) {
+                while (1) {
+                  switch (_context7.prev = _context7.next) {
+                    case 0:
+                      (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+                        component: COLLECTION
+                      }), container);
+
+                    case 1:
+                    case "end":
+                      return _context7.stop();
+                  }
+                }
+              }, _callee7);
+            })));
+
+          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];
+
+            _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
+            })); // Get hold of the newly-add item's "Remove" button.
+
+            removeButton = item.childNodes[2].childNodes[0];
+            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, {}); // Make sure the item has been removed.
+
+
+            expect(c.childNodes.length).toEqual(1);
+            expect(c.childNodes[0].classList).toContain('hods-button-group');
+
+          case 22:
+          case "end":
+            return _context8.stop();
+        }
+      }
+    }, _callee8);
+  })));
+  it('should appropriately make child components of items readonly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee9() {
     var COLLECTION, _renderWithValidation5, container, c, item, _item$childNodes2, title, itemContainer, formGroup, label, hint, input;
 
-    return regeneratorRuntime.wrap(function _callee7$(_context7) {
+    return regeneratorRuntime.wrap(function _callee9$(_context9) {
       while (1) {
-        switch (_context7.prev = _context7.next) {
+        switch (_context9.prev = _context9.next) {
           case 0:
             COLLECTION = {
               id: ID,
@@ -373,9 +444,9 @@ describe('components.FormComponent.Collection', function () {
 
           case 30:
           case "end":
-            return _context7.stop();
+            return _context9.stop();
         }
       }
-    }, _callee7);
+    }, _callee9);
   })));
 });

package/dist/components/FormRenderer/FormRenderer.js

@@ -470,6 +470,8 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
         if (hubDetails !== null && hubDetails !== void 0 && hubDetails.noTaskCYAs) {
           var currentPage = data.formStatus.tasks[currentTask.name].currentPage;
           onPageChange(currentPage || currentTask.pages[0]);
+        } else if (currentTask.customCYA) {
+          onPageChange(currentTask.customCYA);
         } else {
           onPageChange(_models.FormPages.CYA);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "4.41.0",
+  "version": "4.43.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": "2.9.0",
+    "@ukhomeoffice/cop-react-components": "2.9.1",
     "axios": "^0.23.0",
     "dayjs": "^1.11.0",
     "govuk-frontend": "^4.3.1",