@ukhomeoffice/cop-react-form-renderer 5.71.8 → 5.73.0

package/dist/components/CollectionSummary/RenderListView.js

@@ -92,7 +92,7 @@ var RenderListView = function RenderListView(_ref) {
           var component = elevatedComponents.find(function (comp) {
             return comp.fieldId === fieldId;
           });
-          if (!component || !_Condition.default.meetsAll(component, _objectSpread(_objectSpread({}, childPage.formData), entryData))) {
+          if (!component) {
             return null;
           }
           return (0, _getComponentRowForCYA.default)(childPage, component, listClass, entryData);

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/utils/Validate/additional/mustBeUniqueInCollection.js

@@ -10,6 +10,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /**
  * @param {*} value - the value to check.
  * @param {string} config.collectionPath - the path to the collection within formData
+ * @param {string} config.caseInsensitive - true to ignore case, assumes string values
  * @param {object} component - the component definition
  * @param {object} formData - the current form data
  * @returns true if components value is not the same in any other entry in the collection
@@ -28,6 +29,9 @@ var mustBeUniqueInCollection = function mustBeUniqueInCollection(value, config,
       return false;
     }
     ;
+    if (config.caseInsensitive && typeof value === 'string' && typeof entry[component.id] === 'string') {
+      return entry[component.id].toUpperCase() === value.toUpperCase();
+    }
     return entry[component.id] === value;
   });
   return !result;

package/dist/utils/Validate/additional/mustBeUniqueInCollection.test.js

@@ -121,6 +121,42 @@ describe('utils', function () {
           }), COMPONENT_NESTED, FORM_DATA);
           expect(result).toBeFalsy();
         });
+        test('should return true if other entries have the same value for this field in a different case', function () {
+          var FORM_DATA = {
+            namesActiveId: 2,
+            names: [{
+              id: 1,
+              firstName: 'ALPHA'
+            }, {
+              id: 2,
+              firstName: 'alpha'
+            }, {
+              id: 3,
+              firstName: 'bravo'
+            }]
+          };
+          var result = (0, _mustBeUniqueInCollection.default)('alpha', CONFIG, COMPONENT, FORM_DATA);
+          expect(result).toBeTruthy();
+        });
+        test('should return false if other entries have the same value for this field in a different case and caseInsensitive is true', function () {
+          var FORM_DATA = {
+            namesActiveId: 2,
+            names: [{
+              id: 1,
+              firstName: 'ALPHA'
+            }, {
+              id: 2,
+              firstName: 'alpha'
+            }, {
+              id: 3,
+              firstName: 'bravo'
+            }]
+          };
+          var result = (0, _mustBeUniqueInCollection.default)('alpha', _objectSpread(_objectSpread({}, CONFIG), {}, {
+            caseInsensitive: true
+          }), COMPONENT, FORM_DATA);
+          expect(result).toBeFalsy();
+        });
       });
     });
   });

package/package.json

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