@ukhomeoffice/cop-react-form-renderer 4.22.6 → 4.25.0

package/dist/components/FormRenderer/FormRenderer.js

@@ -542,7 +542,10 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
     }
 
     if (action.type === _models.PageAction.TYPES.SAVE_AND_RETURN) {
-      if (_helpers.default.canCYASubmit(currentTask.fullPages, validate.pages)) {
+      var shouldValidate = !(action.hasOwnProperty('validate') && !action.validate);
+      var canSubmit = shouldValidate ? _helpers.default.canCYASubmit(currentTask.fullPages, validate.pages) : true;
+
+      if (canSubmit) {
         var _submissionData3 = _utils.default.Format.form({
           pages: pages,
           components: components

package/dist/utils/CheckYourAnswers/getCYARowsForCollectionPage.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _copReactComponents = require("@ukhomeoffice/cop-react-components");
 
-var _elevateNestedComponents = _interopRequireDefault(require("../Component/elevateNestedComponents"));
-
 var _models = require("../../models");
 
 var _getCYARowsForContainer = _interopRequireDefault(require("./getCYARowsForContainer"));
@@ -17,8 +15,6 @@ var _getCYACollectionDeleteAction = _interopRequireDefault(require("./getCYAColl
 
 var _getCYACollectionChangeAction = _interopRequireDefault(require("./getCYACollectionChangeAction"));
 
-var _showComponentCYA = _interopRequireDefault(require("./showComponentCYA"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -28,27 +24,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 var getContainerForPage = function getContainerForPage(page, item, labelCount, full_path) {
-  var allComponents = (0, _elevateNestedComponents.default)(page.components, item);
   return {
     id: item.id,
     fieldId: item.id,
     type: _models.ComponentTypes.CONTAINER,
     required: true,
     full_path: full_path,
-    components: allComponents.map(function (component) {
-      if ((0, _showComponentCYA.default)(component, item)) {
-        return _objectSpread(_objectSpread({}, component), {}, {
-          label: _copReactComponents.Utils.interpolateString(component.label, _objectSpread(_objectSpread({}, item), {}, {
-            index: labelCount
-          })),
-          full_path: "".concat(full_path, ".").concat(component.fieldId)
-        });
-      }
-
-      return undefined;
-    }).filter(function (c) {
-      return c;
-    })
+    components: page.components
   };
 };
 

package/dist/utils/CollectionPage/mergeCollectionPages.js

@@ -5,6 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _addShowWhen = _interopRequireDefault(require("../Component/addShowWhen"));
+
+var _applyToComponentTree = _interopRequireDefault(require("../Component/applyToComponentTree"));
+
 var _showFormPageCYA = _interopRequireDefault(require("../FormPage/showFormPageCYA"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -15,15 +19,31 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+var getComponentsWithRouting = function getComponentsWithRouting(page) {
+  if (!page.collection.route) {
+    return page.components;
+  } // Apply show_whens to components on certain conditional pages.
+  // This ensures that those components aren't shown on the CYA
+  // screen if they were never visited by the user.
+
+
+  return page.components.map(function (component) {
+    return (0, _applyToComponentTree.default)(component, function (c) {
+      return (0, _addShowWhen.default)(c, page.collection.route);
+    });
+  });
+};
+
 var createMasterPage = function createMasterPage(page) {
   return _objectSpread(_objectSpread({}, page), {}, {
-    title: page.collection.name.charAt(0).toUpperCase() + page.collection.name.slice(1)
+    title: page.collection.name.charAt(0).toUpperCase() + page.collection.name.slice(1),
+    components: getComponentsWithRouting(page)
   });
 };
 
 var mergeIntoMasterPage = function mergeIntoMasterPage(page, masterPage) {
   masterPage.collection = _objectSpread(_objectSpread({}, masterPage.collection), page.collection);
-  masterPage.components = [].concat(masterPage.components, page.components);
+  masterPage.components = [].concat(masterPage.components, getComponentsWithRouting(page));
   masterPage.formData = _objectSpread({}, page.formData);
 };
 /**

package/dist/utils/CollectionPage/mergeCollectionPages.test.js

@@ -128,4 +128,74 @@ describe('utils.CollectionPage.mergeCollectionPages', function () {
       formData: {}
     });
   });
+  it('should add a defined route as a show_when to components on the page', function () {
+    var PAGES = [{
+      id: 'page1',
+      collection: {
+        name: 'collection',
+        route: {
+          field: 'field',
+          op: '=',
+          value: 'value'
+        }
+      },
+      components: [{
+        type: 'text'
+      }]
+    }, {
+      id: 'page2',
+      collection: {
+        name: 'collection',
+        route: {
+          field: 'field',
+          op: '=',
+          value: 'otherValue'
+        }
+      },
+      components: [{
+        type: 'container',
+        components: [{
+          type: 'date'
+        }]
+      }]
+    }];
+    var RESULT = (0, _mergeCollectionPages.default)(PAGES);
+    expect(RESULT.length).toEqual(1);
+    expect(RESULT[0]).toEqual({
+      id: 'page1',
+      title: 'Collection',
+      collection: {
+        name: 'collection',
+        route: {
+          field: 'field',
+          op: '=',
+          value: 'otherValue'
+        }
+      },
+      components: [{
+        type: 'text',
+        show_when: [{
+          field: 'field',
+          op: '=',
+          value: 'value'
+        }]
+      }, {
+        type: 'container',
+        components: [{
+          type: 'date',
+          show_when: [{
+            field: 'field',
+            op: '=',
+            value: 'otherValue'
+          }]
+        }],
+        show_when: [{
+          field: 'field',
+          op: '=',
+          value: 'otherValue'
+        }]
+      }],
+      formData: {}
+    });
+  });
 });

package/dist/utils/Component/addShowWhen.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+/**
+ * Adds a show_when to a component.
+ * If the component has no show_when, then an array is created
+ * with condition as the only entry.
+ * If the component has existing show_whens then condition is
+ * appended to the existing array.
+ * @param {*} component The component to add the show_when to.
+ * @param {*} condition The show_when condition to add.
+ * @returns The component with the new show_when added.
+ *          null if component or condition are invalid.
+ */
+var addShowWhen = function addShowWhen(component, condition) {
+  if (!component) {
+    return null;
+  }
+
+  if (!condition) {
+    return component;
+  }
+
+  var result = _objectSpread({}, component);
+
+  if (result.show_when) {
+    result.show_when = Array.isArray(result.show_when) ? [].concat(result.show_when, [_objectSpread({}, condition)]) : [result.show_when, _objectSpread({}, condition)];
+  } else {
+    result.show_when = [_objectSpread({}, condition)];
+  }
+
+  return result;
+};
+
+var _default = addShowWhen;
+exports.default = _default;

package/dist/utils/Component/addShowWhen.test.js

@@ -0,0 +1,96 @@
+"use strict";
+
+var _addShowWhen = _interopRequireDefault(require("./addShowWhen"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Local imports
+describe('utils.Component.addShowWhen', function () {
+  var NEW_SHOW_WHEN = {
+    field: 'field',
+    op: '=',
+    value: 'value'
+  };
+  it('should return null when component is undefined', function () {
+    var result = (0, _addShowWhen.default)(undefined, {});
+    expect(result).toEqual(null);
+  });
+  it('should return null when component is null', function () {
+    var result = (0, _addShowWhen.default)(null, {});
+    expect(result).toEqual(null);
+  });
+  it('should return component when condition is undefined', function () {
+    var COMPONENT = {
+      alpha: 'bravo'
+    };
+    var result = (0, _addShowWhen.default)(COMPONENT, undefined);
+    expect(result).toEqual({
+      alpha: 'bravo'
+    });
+  });
+  it('should return component when condition is null', function () {
+    var COMPONENT = {
+      alpha: 'bravo'
+    };
+    var result = (0, _addShowWhen.default)(COMPONENT, null);
+    expect(result).toEqual({
+      alpha: 'bravo'
+    });
+  });
+  it('should add the show_when to a component with no existing show_whens', function () {
+    var COMPONENT = {
+      alpha: 'bravo'
+    };
+    var result = (0, _addShowWhen.default)(COMPONENT, NEW_SHOW_WHEN);
+    expect(result).toEqual({
+      alpha: 'bravo',
+      show_when: [NEW_SHOW_WHEN]
+    });
+  });
+  it('should add the show_when to a component with a single show_when', function () {
+    var COMPONENT = {
+      alpha: 'bravo',
+      show_when: {
+        field: 'abc',
+        op: '=',
+        value: 'bcd'
+      }
+    };
+    var result = (0, _addShowWhen.default)(COMPONENT, NEW_SHOW_WHEN);
+    expect(result).toEqual({
+      alpha: 'bravo',
+      show_when: [{
+        field: 'abc',
+        op: '=',
+        value: 'bcd'
+      }, NEW_SHOW_WHEN]
+    });
+  });
+  it('should add the show_when to a component with an array of show_whens', function () {
+    var COMPONENT = {
+      alpha: 'bravo',
+      show_when: [{
+        field: 'abc',
+        op: '=',
+        value: 'bcd'
+      }, {
+        field: 'cde',
+        op: '=',
+        value: 'efg'
+      }]
+    };
+    var result = (0, _addShowWhen.default)(COMPONENT, NEW_SHOW_WHEN);
+    expect(result).toEqual({
+      alpha: 'bravo',
+      show_when: [{
+        field: 'abc',
+        op: '=',
+        value: 'bcd'
+      }, {
+        field: 'cde',
+        op: '=',
+        value: 'efg'
+      }, NEW_SHOW_WHEN]
+    });
+  });
+});

package/dist/utils/Component/applyToComponentTree.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _models = require("../../models");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+/**
+ * Call a callback on a component and all of its child/nested components.
+ * At each stage, the value of the component is set to the returned value
+ * from the callback.
+ * 
+ * @param {*} root The root component to call the callback on.
+ * @param {*} callback The callback to call. It should take a single
+ *                     component as an argument and return the new
+ *                     desired value for that component.
+ * @returns The result of calling callback on root.
+ *          null if root is not valid.
+ *          root if callback is not valid. 
+ */
+var applyToComponentTree = function applyToComponentTree(root, callback) {
+  var _root$data;
+
+  if (!root) {
+    return null;
+  }
+
+  if (!callback) {
+    return root;
+  }
+
+  var result = _objectSpread({}, root);
+
+  switch (root.type) {
+    case _models.ComponentTypes.CONTAINER:
+      result.components.forEach(function (c, index, array) {
+        array[index] = applyToComponentTree(c, callback);
+      });
+      break;
+
+    case _models.ComponentTypes.COLLECTION:
+      result.item.forEach(function (c, index, array) {
+        array[index] = applyToComponentTree(c, callback);
+      });
+      break;
+
+    case _models.ComponentTypes.CHECKBOXES:
+    case _models.ComponentTypes.RADIOS:
+      if (!((_root$data = root.data) !== null && _root$data !== void 0 && _root$data.options)) {
+        break;
+      }
+
+      result.data = _objectSpread({}, root.data);
+      result.data.options = root.data.options.map(function (option) {
+        var newOption = _objectSpread({}, option);
+
+        if (option.nested) {
+          newOption.nested = option.nested.map(function (c) {
+            return applyToComponentTree(c, callback);
+          });
+        }
+
+        return newOption;
+      });
+      break;
+
+    default:
+      break;
+  }
+
+  return callback(result);
+};
+
+var _default = applyToComponentTree;
+exports.default = _default;

package/dist/utils/Component/applyToComponentTree.test.js

@@ -0,0 +1,131 @@
+"use strict";
+
+var _applyToComponentTree = _interopRequireDefault(require("./applyToComponentTree"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+describe('utils.Component.applyToComponentTree', function () {
+  var SINGLE_COMP = {
+    type: 'text',
+    label: 'alpha'
+  };
+  var CONTAINER = {
+    type: 'container',
+    label: 'bravo',
+    components: [{
+      type: 'text',
+      label: 'charlie'
+    }]
+  };
+  var COLLECTION = {
+    type: 'collection',
+    label: 'delta',
+    item: [{
+      type: 'text',
+      label: 'echo'
+    }]
+  };
+  var COMP_WITH_NESTED = {
+    type: 'radios',
+    label: 'foxtrot',
+    data: {
+      options: [{
+        nested: [{
+          type: 'text',
+          label: 'golf'
+        }]
+      }, {
+        nested: [{
+          type: 'text',
+          label: 'hotel'
+        }]
+      }]
+    }
+  };
+
+  var CALLBACK = function CALLBACK(component) {
+    return _objectSpread(_objectSpread({}, component), {}, {
+      label: component.label.toUpperCase()
+    });
+  };
+
+  it('should return null when root is undefined', function () {
+    var result = (0, _applyToComponentTree.default)(undefined, CALLBACK);
+    expect(result).toEqual(null);
+  });
+  it('should return null when root is null', function () {
+    var result = (0, _applyToComponentTree.default)(null, CALLBACK);
+    expect(result).toEqual(null);
+  });
+  it('should return root when callback is undefined', function () {
+    var result = (0, _applyToComponentTree.default)({
+      type: 'text'
+    }, undefined);
+    expect(result).toEqual({
+      type: 'text'
+    });
+  });
+  it('should return root when callback is null', function () {
+    var result = (0, _applyToComponentTree.default)({
+      type: 'text'
+    }, null);
+    expect(result).toEqual({
+      type: 'text'
+    });
+  });
+  it('should correctly call callback on a single component', function () {
+    var result = (0, _applyToComponentTree.default)(SINGLE_COMP, CALLBACK);
+    expect(result).toEqual({
+      type: 'text',
+      label: 'ALPHA'
+    });
+  });
+  it('should correctly call callback on a container component', function () {
+    var result = (0, _applyToComponentTree.default)(CONTAINER, CALLBACK);
+    expect(result).toEqual({
+      type: 'container',
+      label: 'BRAVO',
+      components: [{
+        type: 'text',
+        label: 'CHARLIE'
+      }]
+    });
+  });
+  it('should correctly call callback on a collection component', function () {
+    var result = (0, _applyToComponentTree.default)(COLLECTION, CALLBACK);
+    expect(result).toEqual({
+      type: 'collection',
+      label: 'DELTA',
+      item: [{
+        type: 'text',
+        label: 'ECHO'
+      }]
+    });
+  });
+  it('should correctly call callback on a component with nested components', function () {
+    var result = (0, _applyToComponentTree.default)(COMP_WITH_NESTED, CALLBACK);
+    expect(result).toEqual({
+      type: 'radios',
+      label: 'FOXTROT',
+      data: {
+        options: [{
+          nested: [{
+            type: 'text',
+            label: 'GOLF'
+          }]
+        }, {
+          nested: [{
+            type: 'text',
+            label: 'HOTEL'
+          }]
+        }]
+      }
+    });
+  });
+});

package/dist/utils/Validate/additional/conditionallyRequired.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/**
+ * Additional validator for the Container component type.
+ * @param {object} data the form data
+ * @param {object} config the config for the validation, must contain a property 'base' with the id of the conditionally required component and
+ * a property 'check' which if the corresponding component has a value will turn off the required check for 'base'
+ * @param {object} component the container component
+ * @returns true if the user has entered data into the 'base' field or entered a value into the 'check' field to turn off the validation
+ * otherwise returns false
+ */
+var conditionallyRequired = function conditionallyRequired(data, config, component) {
+  var _data$component$id, _data$component$id2;
+
+  var conditional = (_data$component$id = data[component.id]) === null || _data$component$id === void 0 ? void 0 : _data$component$id[config.base];
+  var checkFieldvalue = (_data$component$id2 = data[component.id]) === null || _data$component$id2 === void 0 ? void 0 : _data$component$id2[config.check];
+  var checkHasValue = checkFieldvalue && (checkFieldvalue === null || checkFieldvalue === void 0 ? void 0 : checkFieldvalue.length) > 0;
+  return !!(conditional || checkHasValue);
+};
+
+var _default = conditionallyRequired;
+exports.default = _default;

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

@@ -0,0 +1,75 @@
+"use strict";
+
+var _conditionallyRequired = _interopRequireDefault(require("./conditionallyRequired"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('utils', function () {
+  describe('Validate', function () {
+    describe('additional', function () {
+      describe('conditionallyRequired', function () {
+        var CONFIG = {
+          base: 'componentOne',
+          check: 'componentTwo'
+        };
+        var COMPONENT = {
+          id: 'containerComponent',
+          fieldId: 'containerComponent',
+          type: 'container',
+          components: [{
+            id: 'componentOne',
+            type: 'text',
+            fieldId: 'componentOne'
+          }, {
+            id: 'componentTwo',
+            fieldId: 'componentTwo',
+            type: 'checkboxes'
+          }]
+        };
+        test('should pass if only the base field has a value', function () {
+          var DATA = {
+            containerComponent: {
+              componentOne: 'value'
+            }
+          };
+          expect((0, _conditionallyRequired.default)(DATA, CONFIG, COMPONENT)).toEqual(true);
+        });
+        test('should pass if the base and check fields have values', function () {
+          var DATA = {
+            containerComponent: {
+              componentOne: 'value',
+              componentTwo: 'value'
+            }
+          };
+          expect((0, _conditionallyRequired.default)(DATA, CONFIG, COMPONENT)).toEqual(true);
+        });
+        test('should pass if only the check field has a value', function () {
+          var DATA = {
+            containerComponent: {
+              componentTwo: 'value'
+            }
+          };
+          expect((0, _conditionallyRequired.default)(DATA, CONFIG, COMPONENT)).toEqual(true);
+        });
+        test('should pass if only the check field has a value and that value is an array', function () {
+          var DATA = {
+            containerComponent: {
+              componentTwo: ['value']
+            }
+          };
+          expect((0, _conditionallyRequired.default)(DATA, CONFIG, COMPONENT)).toEqual(true);
+        });
+        test('should fail if neither field has a value', function () {
+          var DATA = {
+            containerComponent: {}
+          };
+          expect((0, _conditionallyRequired.default)(DATA, CONFIG, COMPONENT)).toEqual(false);
+        });
+        test('should fail if there is no data', function () {
+          var DATA = {};
+          expect((0, _conditionallyRequired.default)(DATA, CONFIG, COMPONENT)).toEqual(false);
+        });
+      });
+    });
+  });
+});

package/dist/utils/Validate/additional/index.js

@@ -25,6 +25,8 @@ var _mustBeNumbersOnly = _interopRequireDefault(require("./mustBeNumbersOnly"));
 
 var _mustBeLessThan = _interopRequireDefault(require("./mustBeLessThan"));
 
+var _conditionallyRequired = _interopRequireDefault(require("./conditionallyRequired"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // Local imports
@@ -36,6 +38,7 @@ var functions = {
   mustBeInTheFuture: _mustBeInTheFuture.default,
   mustBeLongerThan: _mustBeLongerThan.default,
   mustBeShorterThan: _mustBeShorterThan.default,
+  conditionallyRequired: _conditionallyRequired.default,
   mustEnterAtLeastOne: _mustEnterAtLeastOne.default,
   mustBeNumbersOnly: _mustBeNumbersOnly.default,
   mustBeLessThan: _mustBeLessThan.default

package/dist/utils/Validate/additional/mustBeLessThan.js

@@ -17,7 +17,7 @@ var mustBeLessThan = function mustBeLessThan(string, config) {
     return true;
   }
 
-  return string < config.value;
+  return parseFloat(string) < config.value;
 };
 
 var _default = mustBeLessThan;

package/package.json

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