@ukhomeoffice/cop-react-form-renderer 4.40.0 → 4.42.1

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/utils/Component/getComponentTests/getComponent.multifile.test.js

@@ -44,13 +44,16 @@ describe('utils.Component.get', function () {
         container = _render.container;
 
     var _getAllByTestId = (0, _react.getAllByTestId)(container, ID),
-        _getAllByTestId2 = _slicedToArray(_getAllByTestId, 2),
-        formGroup = _getAllByTestId2[0],
-        wrapper = _getAllByTestId2[1];
+        _getAllByTestId2 = _slicedToArray(_getAllByTestId, 1),
+        formGroup = _getAllByTestId2[0];
 
-    var input = wrapper.querySelector('#dropzone').children[0];
     expect(formGroup.tagName).toEqual('DIV');
     expect(formGroup.classList).toContain('govuk-form-group');
+    var wrapper = container.querySelector("#".concat(ID));
+    expect(wrapper.tagName).toEqual('DIV');
+    expect(wrapper.classList).toContain('cop-multi-file-upload');
+    expect(wrapper.id).toEqual(ID);
+    var input = wrapper.children[1].children[0];
     var label = undefined;
     formGroup.childNodes[0].childNodes.forEach(function (node) {
       // Check if it's an element.
@@ -61,9 +64,6 @@ describe('utils.Component.get', function () {
     expect(label).toBeDefined();
     expect(label.innerHTML).toContain(LABEL);
     expect(label.getAttribute('for')).toEqual(ID);
-    expect(wrapper.tagName).toEqual('DIV');
-    expect(wrapper.classList).toContain('cop-multi-file-upload');
-    expect(wrapper.id).toEqual(ID);
     var str = JSON.stringify({
       alpha: 'bravo'
     });

package/package.json

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