@ukhomeoffice/cop-react-form-renderer 4.89.2 → 4.90.0

package/dist/components/FormComponent/Collection.js

@@ -132,9 +132,11 @@ var Collection = function Collection(_ref) {
       index: labelCount
     }));
     var removeStyle = config.disableAddAndRemove || index === 0 && config.minimumEntries ? '' : (_config$removeLocatio = config.removeLocation) !== null && _config$removeLocatio !== void 0 ? _config$removeLocatio : 'start';
+    var addStyle = index !== 0 && config.subsequentItemStyle ? config.subsequentItemStyle : {};
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(classes('item')),
-      key: item.id
+      key: item.id,
+      style: addStyle
     }, /*#__PURE__*/_react.default.createElement(_copReactComponents.Label, {
       id: item.id,
       required: true,
@@ -211,6 +213,7 @@ Collection.propTypes = {
     minimumEntries: _propTypes.default.number,
     readonly: _propTypes.default.bool,
     removeLocation: _propTypes.default.string,
+    subsequentItemStyle: _propTypes.default.shape({}),
     required: _propTypes.default.bool
   }).isRequired,
   formData: _propTypes.default.shape({}),

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

@@ -728,4 +728,80 @@ describe('components.FormComponent.Collection', function () {
       }
     }, _callee12);
   })));
+  it('should handle the alternative styling with a background and padding on the subsequent item(s) when subsequentItemStyle is provided', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee14() {
+    var COLLECTION, container, c, addButton, item, label, secondItem, secondLabel;
+    return _regeneratorRuntime().wrap(function _callee14$(_context14) {
+      while (1) switch (_context14.prev = _context14.next) {
+        case 0:
+          COLLECTION = {
+            id: ID,
+            fieldId: ID,
+            type: _models.ComponentTypes.COLLECTION,
+            item: [TEXT_COMPONENT],
+            subsequentItemStyle: {
+              background: 'white',
+              padding: '1px'
+            }
+          };
+          container = document.createElement('div');
+          document.body.appendChild(container);
+          _context14.next = 5;
+          return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee13() {
+            return _regeneratorRuntime().wrap(function _callee13$(_context13) {
+              while (1) switch (_context13.prev = _context13.next) {
+                case 0:
+                  (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+                    component: COLLECTION
+                  }), container);
+                case 1:
+                case "end":
+                  return _context13.stop();
+              }
+            }, _callee13);
+          })));
+        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
+          }));
+
+          // Check to see if styling has been untouched for the first item
+          expect(item.style.background).toEqual('');
+          expect(item.style.padding).toEqual('');
+
+          // Get hold of that "Add another" button and click it.
+          _react.fireEvent.click(addButton, {});
+
+          // Make sure another item has been added.
+          expect(c.childNodes.length).toEqual(3);
+          secondItem = c.childNodes[1];
+          secondLabel = secondItem.childNodes[0];
+          expect(secondLabel.textContent).toContain(_utils.default.interpolateString(_models.CollectionLabels.secondItem, {
+            index: 2
+          }));
+
+          // Get hold of the second item and check background and padding has been applied.
+          expect(secondItem.style.background).toEqual('white');
+          expect(secondItem.style.padding).toEqual('1px');
+        case 24:
+        case "end":
+          return _context14.stop();
+      }
+    }, _callee14);
+  })));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "4.89.2",
+  "version": "4.90.0",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",