@ukhomeoffice/cop-react-form-renderer 1.0.0-gamma → 2.1.0

package/dist/utils/FormPage/showFormPage.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _Component = _interopRequireDefault(require("../Component"));
+
+var _Data = _interopRequireDefault(require("../Data"));
+
+var _meetsCondition = _interopRequireDefault(require("../meetsCondition"));
+
+var _getEditableComponents = _interopRequireDefault(require("./getEditableComponents"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Local imports
+
+/**
+ * Evaluates the show_when condition(s) on a page.
+ * @param {object} page The page to consider.
+ * @param {object} data The top-level form data.
+ * @returns Boolean true if all show_when conditions are met; false otherwise.
+ */
+var evaluatePageShowWhen = function evaluatePageShowWhen(page, data) {
+  var show_when = Array.isArray(page.show_when) ? page.show_when : [page.show_when];
+  var allConditionsMet = true;
+  show_when.forEach(function (condition) {
+    var sourceDataValue = _Data.default.getSource(data, condition.field);
+
+    allConditionsMet = allConditionsMet && (0, _meetsCondition.default)(condition, sourceDataValue);
+  });
+  return allConditionsMet;
+};
+/**
+ * Checks whether any of the editable components on a page should be shown.
+ * @param {Array} editableComponents The editable components on the page.
+ * @param {object} data The top-level form data.
+ * @returns Boolean true if ANY of the editable components should be shown; false otherwise.
+ */
+
+
+var showEditableComponent = function showEditableComponent(editableComponents, data) {
+  return editableComponents.reduce(function (shown, component) {
+    return shown || _Component.default.show(component, data);
+  }, false);
+};
+/**
+ * Indicates whether or not a page should be shown.
+ * @param {object} page The page to consider.
+ * @param {object} data The top-level form data.
+ * @returns Boolean true if the page should be shown; false if not.
+ */
+
+
+var showFormPage = function showFormPage(page, data) {
+  if (!page) {
+    return false;
+  } // If the page has a show_when condition, we should evaluate that.
+
+
+  if (page.show_when) {
+    return evaluatePageShowWhen(page, data);
+  } // If the page itself doesn't have a show_when, we need to make sure that if it
+  // contains ANY editable components, at least one of them is shown.
+
+
+  var editableComponents = (0, _getEditableComponents.default)(page);
+
+  if (editableComponents.length > 0) {
+    return showEditableComponent(editableComponents, data);
+  } // At this point, either the page has no show_when condition of its own, or
+  // the page has no editable components. In either case, it should be shown.
+
+
+  return true;
+};
+
+var _default = showFormPage;
+exports.default = _default;

package/dist/utils/FormPage/showFormPage.test.js

@@ -0,0 +1,131 @@
+"use strict";
+
+var _showFormPage = _interopRequireDefault(require("./showFormPage"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('utils', function () {
+  describe('FormPage', function () {
+    describe('showFormPage', function () {
+      var DATA = {
+        alpha: 'Alpha',
+        bravo: 'Bravo'
+      };
+      var HTML = {
+        type: 'html',
+        tagName: 'p',
+        content: 'Alpha'
+      };
+      var INSET_TEXT = {
+        type: 'inset-text',
+        content: 'Bravo'
+      };
+      var HEADING = {
+        type: 'heading',
+        size: 'm',
+        content: 'Charlie'
+      };
+      it('should NOT be shown when the page is null', function () {
+        expect((0, _showFormPage.default)(null, DATA)).toBeFalsy();
+      });
+      it('should NOT be shown when the page has a single show_when condition that is NOT matched', function () {
+        var PAGE = {
+          show_when: {
+            field: 'charlie',
+            op: '=',
+            value: 'Charlie'
+          }
+        };
+        expect((0, _showFormPage.default)(PAGE, DATA)).toBeFalsy();
+      });
+      it('should NOT be shown when the page has a multiple show_when conditions and at least one is NOT matched', function () {
+        var PAGE = {
+          show_when: [{
+            field: 'alpha',
+            op: '=',
+            value: 'Alpha'
+          }, {
+            field: 'charlie',
+            op: '=',
+            value: 'Charlie'
+          }]
+        };
+        expect((0, _showFormPage.default)(PAGE, DATA)).toBeFalsy();
+      });
+      it('SHOULD be shown when the page has a single show_when condition that IS matched', function () {
+        var PAGE = {
+          show_when: {
+            field: 'alpha',
+            op: '=',
+            value: 'Alpha'
+          }
+        };
+        expect((0, _showFormPage.default)(PAGE, DATA)).toBeTruthy();
+      });
+      it('SHOULD be shown when the page has a multiple show_when conditions that are ALL matched', function () {
+        var PAGE = {
+          show_when: [{
+            field: 'alpha',
+            op: '=',
+            value: 'Alpha'
+          }, {
+            field: 'charlie',
+            op: '!=',
+            value: 'Charlie'
+          }]
+        };
+        expect((0, _showFormPage.default)(PAGE, DATA)).toBeTruthy();
+      });
+      it('SHOULD be shown when the page has NO show_when conditions and NO editable components', function () {
+        var PAGE = {
+          components: [HTML, INSET_TEXT, HEADING]
+        };
+        expect((0, _showFormPage.default)(PAGE, DATA)).toBeTruthy();
+      });
+      it('should NOT be shown when the page has NO show_when conditions and NO SHOWN editable components', function () {
+        var TEXT = {
+          type: 'text',
+          show_when: {
+            field: 'charlie',
+            op: '=',
+            value: 'Charlie'
+          }
+        };
+        var RADIOS = {
+          type: 'radios',
+          show_when: {
+            field: 'charlie',
+            op: '=',
+            value: 'Charlie'
+          }
+        };
+        var PAGE = {
+          components: [TEXT, RADIOS]
+        };
+        expect((0, _showFormPage.default)(PAGE, DATA)).toBeFalsy();
+      });
+      it('SHOULD be shown when the page has NO show_when conditions and AT LEAST ONE SHOWN editable components', function () {
+        var TEXT = {
+          type: 'text',
+          show_when: {
+            field: 'alpha',
+            op: '=',
+            value: 'Alpha'
+          }
+        };
+        var RADIOS = {
+          type: 'radios',
+          show_when: {
+            field: 'charlie',
+            op: '=',
+            value: 'Charlie'
+          }
+        };
+        var PAGE = {
+          components: [TEXT, RADIOS]
+        };
+        expect((0, _showFormPage.default)(PAGE, DATA)).toBeTruthy();
+      });
+    });
+  });
+});

package/dist/utils/Validate/validateComponent.js

@@ -7,10 +7,12 @@ exports.default = void 0;
 
 var _models = require("../../models");
 
-var _validateRequired = _interopRequireDefault(require("./validateRequired"));
+var _showComponent = _interopRequireDefault(require("../Component/showComponent"));
 
 var _validateEmail = _interopRequireDefault(require("./validateEmail"));
 
+var _validateRequired = _interopRequireDefault(require("./validateRequired"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -25,11 +27,11 @@ var validateComponent = function validateComponent(component, formData) {
   var error = undefined;
   var data = formData && _typeof(formData) === 'object' ? formData : {};
 
-  if (component) {
+  if (component && (0, _showComponent.default)(component, formData)) {
     var value = data[component.fieldId];
 
     if (component.required) {
-      error = (0, _validateRequired.default)(value, component.label);
+      error = (0, _validateRequired.default)(value, component.label, component.custom_errors);
     }
 
     if (!error && component.type === _models.ComponentTypes.EMAIL) {

package/dist/utils/Validate/validateRequired.js

@@ -14,6 +14,7 @@ exports.default = void 0;
  */
 var validateRequired = function validateRequired(value) {
   var label = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  var customErrors = arguments.length > 2 ? arguments[2] : undefined;
   var hasValue = false;
 
   if (!!value || value === false || value === 0) {
@@ -27,6 +28,16 @@ var validateRequired = function validateRequired(value) {
   }
 
   if (!hasValue) {
+    if (Array.isArray(customErrors)) {
+      var result = customErrors.filter(function (error) {
+        return error.type === 'required';
+      });
+
+      if (result && result.length > 0 && result[0].message) {
+        return result[0].message;
+      }
+    }
+
     var name = label ? label : 'Field';
     return "".concat(name, " is required");
   }

package/dist/utils/Validate/validateRequired.test.js

@@ -45,6 +45,18 @@ describe('utils', function () {
       it('should use a default label when none is specified', function () {
         expect((0, _validateRequired.default)(undefined, undefined)).toEqual('Field is required');
       });
+      it('should use a custom error when one is provided', function () {
+        expect((0, _validateRequired.default)(undefined, undefined, [{
+          type: 'required',
+          message: 'custom error message'
+        }])).toEqual('custom error message');
+      });
+      it('should ignore a custom error when not of type required', function () {
+        expect((0, _validateRequired.default)(undefined, undefined, [{
+          type: 'genericError',
+          message: 'generic error message'
+        }])).toEqual('Field is required');
+      });
     });
   });
 });

package/package.json

@@ -1,21 +1,22 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "1.0.0-gamma",
+  "version": "2.1.0",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",
     "test": "react-scripts test",
+    "test:coverage": "yarn test --coverage --watchAll=false",
     "lint": "eslint --ext .js,.jsx src",
-    "storybook:start": "start-storybook --docs --no-manager-cache -p 6007",
+    "storybook:start": "start-storybook --docs -s src/assets --no-manager-cache -p 6007",
     "storybook:build": "build-storybook --docs -s src/assets",
     "storybook:deploy": "yarn deploy-storybook",
     "storybook": "yarn storybook:start",
     "deploy-storybook": "storybook-to-ghpages -e storybook-static",
     "compile": "yarn clean && cross-env NODE_ENV=production babel src --out-dir dist --copy-files && yarn post-compile",
-    "post-compile": "rimraf dist/**/*.test.* dist/**/*.stories.* dist/json dist/assets"
+    "post-compile": "rimraf dist/*.test.* dist/**/*.test.* dist/**/*.stories.* dist/docs dist/assets"
   },
   "dependencies": {
-    "@ukhomeoffice/cop-react-components": "^0.6.0",
+    "@ukhomeoffice/cop-react-components": "1.1.2",
     "axios": "^0.21.1",
     "govuk-frontend": "^3.13.0",
     "web-vitals": "^1.0.1"
@@ -44,14 +45,14 @@
     "cross-env": "^7.0.3",
     "html-react-parser": "^0.10.5",
     "node-sass": "^6.0.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "react-scripts": "4.0.3",
     "storybook-addon-mock": "^2.0.1"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "react-scripts": "4.0.3"
   },
   "optionalDependencies": {
@@ -74,8 +75,12 @@
     ],
     "overrides": [
       {
-        "files": [ "**/*.stories.*" ],
-        "rules": { "import/no-anonymous-default-export": "off" }
+        "files": [
+          "**/*.stories.*"
+        ],
+        "rules": {
+          "import/no-anonymous-default-export": "off"
+        }
       }
     ]
   },

package/dist/index.test.js

@@ -1,18 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-var _ = _interopRequireWildcard(require("."));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-// Local imports
-it('should have exported everything appropriately', function () {
-  expect(_.default).toBeDefined();
-  expect(_.FormTypes).toBeDefined();
-  expect(_.HubFormats).toBeDefined();
-  expect(_.intercepts).toBeDefined();
-  expect(_.Utils).toBeDefined();
-});