@ukhomeoffice/cop-react-form-renderer 0.1.0-beta

package/dist/utils/CheckYourAnswers/getCYARow.test.js

@@ -0,0 +1,151 @@
+"use strict";
+
+var _getCYARow = _interopRequireDefault(require("./getCYARow"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Local imports
+describe('utils', function () {
+  describe('CheckYourAnswers', function () {
+    describe('getCYARow', function () {
+      var expectObjectLike = function expectObjectLike(received, expected) {
+        Object.keys(expected).forEach(function (key) {
+          expect(received[key]).toEqual(expected[key]);
+        });
+      };
+
+      it('should get an appropriate row for a readonly text component', function () {
+        var PAGE = {
+          id: 'page',
+          formData: {
+            a: 'Bravo'
+          }
+        };
+        var COMPONENT = {
+          type: 'text',
+          readonly: true,
+          id: 'a',
+          fieldId: 'a',
+          label: 'Alpha'
+        };
+
+        var ON_ACTION = function ON_ACTION() {};
+
+        var ROW = (0, _getCYARow.default)(PAGE, COMPONENT, ON_ACTION);
+        expectObjectLike(ROW, {
+          pageId: PAGE.id,
+          fieldId: COMPONENT.fieldId,
+          key: COMPONENT.label,
+          value: 'Bravo',
+          component: COMPONENT,
+          action: null
+        });
+      });
+      it('should get an appropriate row for a readonly text component with no value', function () {
+        var PAGE = {
+          id: 'page',
+          formData: {}
+        };
+        var COMPONENT = {
+          type: 'text',
+          readonly: true,
+          id: 'a',
+          fieldId: 'a',
+          label: 'Alpha'
+        };
+
+        var ON_ACTION = function ON_ACTION() {};
+
+        expect((0, _getCYARow.default)(PAGE, COMPONENT, ON_ACTION)).toEqual({
+          pageId: PAGE.id,
+          fieldId: COMPONENT.fieldId,
+          key: COMPONENT.label,
+          value: '',
+          component: COMPONENT,
+          action: null
+        });
+      });
+      it('should get an appropriate row for a readonly non-editable component', function () {
+        var PAGE = {
+          id: 'page',
+          formData: {
+            a: 'BLAH'
+          }
+        };
+        var COMPONENT = {
+          type: 'blah',
+          readonly: true,
+          id: 'a',
+          fieldId: 'a',
+          label: 'Alpha'
+        };
+
+        var ON_ACTION = function ON_ACTION() {};
+
+        expect((0, _getCYARow.default)(PAGE, COMPONENT, ON_ACTION)).toEqual({
+          pageId: PAGE.id,
+          fieldId: COMPONENT.fieldId,
+          key: COMPONENT.label,
+          value: 'BLAH',
+          action: null
+        });
+      });
+      it('should use the cya_label where there is no label', function () {
+        var PAGE = {
+          id: 'page',
+          formData: {
+            a: 'Bravo'
+          }
+        };
+        var COMPONENT = {
+          type: 'text',
+          readonly: true,
+          id: 'a',
+          fieldId: 'a',
+          cya_label: 'CYA Alpha'
+        };
+
+        var ON_ACTION = function ON_ACTION() {};
+
+        var ROW = (0, _getCYARow.default)(PAGE, COMPONENT, ON_ACTION);
+        expectObjectLike(ROW, {
+          pageId: PAGE.id,
+          fieldId: COMPONENT.fieldId,
+          key: COMPONENT.cya_label,
+          action: null,
+          component: COMPONENT,
+          value: 'Bravo'
+        });
+      });
+      it('should get an appropriate row for an editable text component', function () {
+        var PAGE = {
+          id: 'page',
+          formData: {
+            a: 'Bravo'
+          },
+          cya_link: {}
+        };
+        var COMPONENT = {
+          type: 'text',
+          id: 'a',
+          fieldId: 'a',
+          label: 'Alpha'
+        };
+
+        var ON_ACTION = function ON_ACTION() {};
+
+        var ROW = (0, _getCYARow.default)(PAGE, COMPONENT, ON_ACTION);
+        expectObjectLike(ROW, {
+          pageId: PAGE.id,
+          fieldId: COMPONENT.fieldId,
+          key: COMPONENT.label,
+          component: COMPONENT,
+          value: 'Bravo'
+        });
+        expectObjectLike(ROW.action, {
+          onAction: ON_ACTION
+        });
+      });
+    });
+  });
+});

package/dist/utils/CheckYourAnswers/getCYARowsForPage.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _getCYARow = _interopRequireDefault(require("./getCYARow"));
+
+var _showComponentCYA = _interopRequireDefault(require("./showComponentCYA"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Local imports
+var getCYARowsForPage = function getCYARowsForPage(page, onAction) {
+  return page.components.filter(function (c) {
+    return (0, _showComponentCYA.default)(c, page.formData);
+  }).map(function (component) {
+    return (0, _getCYARow.default)(page, component, onAction);
+  });
+};
+
+var _default = getCYARowsForPage;
+exports.default = _default;

package/dist/utils/CheckYourAnswers/getCYARowsForPage.test.js

@@ -0,0 +1,134 @@
+"use strict";
+
+var _getCYARowsForPage = _interopRequireDefault(require("./getCYARowsForPage"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Local imports
+describe('utils', function () {
+  describe('CheckYourAnswers', function () {
+    describe('getCYARowsForPage', function () {
+      var expectObjectLike = function expectObjectLike(received, expected) {
+        Object.keys(expected).forEach(function (key) {
+          expect(received[key]).toEqual(expected[key]);
+        });
+      };
+
+      it('should get a appropriate row for a page with a single readonly text component', function () {
+        var COMPONENT = {
+          type: 'text',
+          readonly: true,
+          id: 'a',
+          fieldId: 'a',
+          label: 'Alpha'
+        };
+        var PAGE = {
+          id: 'page',
+          components: [COMPONENT],
+          formData: {
+            a: 'Bravo'
+          }
+        };
+
+        var ON_ACTION = function ON_ACTION() {};
+
+        var ROWS = (0, _getCYARowsForPage.default)(PAGE, ON_ACTION);
+        expect(ROWS.length).toEqual(1);
+        ROWS.forEach(function (row, index) {
+          expectObjectLike(row, {
+            pageId: PAGE.id,
+            fieldId: PAGE.components[index].fieldId,
+            key: PAGE.components[index].label,
+            action: null,
+            component: COMPONENT,
+            value: 'Bravo'
+          });
+        });
+      });
+      it('should get appropriate rows for a page with two editable text components', function () {
+        var COMPONENT_A = {
+          type: 'text',
+          id: 'a',
+          fieldId: 'a',
+          label: 'Alpha'
+        };
+        var COMPONENT_B = {
+          type: 'text',
+          id: 'b',
+          fieldId: 'b',
+          label: 'Bravo'
+        };
+        var PAGE = {
+          id: 'page',
+          components: [COMPONENT_A, COMPONENT_B],
+          formData: {
+            a: 'Alpha Charlie',
+            b: 'Bravo Charlie'
+          },
+          cya_link: {}
+        };
+
+        var ON_ACTION = function ON_ACTION() {};
+
+        var ROWS = (0, _getCYARowsForPage.default)(PAGE, ON_ACTION);
+        expect(ROWS.length).toEqual(2);
+        ROWS.forEach(function (row, index) {
+          expectObjectLike(row, {
+            pageId: PAGE.id,
+            fieldId: PAGE.components[index].fieldId,
+            key: PAGE.components[index].label,
+            component: PAGE.components[index],
+            value: "".concat(PAGE.components[index].label, " Charlie")
+          });
+          expectObjectLike(row.action, {
+            onAction: ON_ACTION
+          });
+        });
+      });
+      it("should filter out any components that shouldn't be shown", function () {
+        var COMPONENT_A = {
+          type: 'text',
+          id: 'a',
+          fieldId: 'a',
+          label: 'Alpha'
+        };
+        var COMPONENT_B = {
+          type: 'text',
+          id: 'b',
+          fieldId: 'b',
+          label: 'Bravo'
+        };
+        var COMPONENT_C = {
+          type: 'heading',
+          content: 'Heading component'
+        };
+        var PAGE = {
+          id: 'page',
+          components: [COMPONENT_A, COMPONENT_B, COMPONENT_C],
+          formData: {
+            a: 'Alpha Charlie',
+            b: 'Bravo Charlie'
+          },
+          cya_link: {}
+        };
+
+        var ON_ACTION = function ON_ACTION() {};
+
+        var ROWS = (0, _getCYARowsForPage.default)(PAGE, ON_ACTION);
+        expect(ROWS.length).toEqual(2);
+        ROWS.forEach(function (row, index) {
+          expectObjectLike(row, {
+            pageId: PAGE.id,
+            fieldId: PAGE.components[index].fieldId,
+            key: PAGE.components[index].label,
+            component: PAGE.components[index],
+            value: "".concat(PAGE.components[index].label, " Charlie")
+          });
+          expectObjectLike(row.action, {
+            onAction: ON_ACTION
+          });
+        });
+      });
+    });
+  });
+});

package/dist/utils/CheckYourAnswers/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _getCYARowsForPage = _interopRequireDefault(require("./getCYARowsForPage"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Local imports
+var CheckYourAnswers = {
+  getRows: _getCYARowsForPage.default
+};
+var _default = CheckYourAnswers;
+exports.default = _default;

package/dist/utils/CheckYourAnswers/showComponentCYA.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _Component = _interopRequireDefault(require("../Component"));
+
+var _models = require("../../models");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Local imports
+var EXCLUDE_FROM_CYA = [_models.ComponentTypes.HEADING, _models.ComponentTypes.HTML, _models.ComponentTypes.INSET_TEXT];
+/**
+ * Determines whether a given component should display on the
+ * Check your answers page.
+ * @param {object} options The component options.
+ * @param {object} data The data contained on the form.
+ * @returns A boolean true, if the component should show; otherwise false.
+ */
+
+var showComponentCYA = function showComponentCYA(options, data) {
+  if (!options) {
+    return false;
+  }
+
+  if (EXCLUDE_FROM_CYA.includes(options.type)) {
+    return false;
+  }
+
+  return _Component.default.show(options, data);
+};
+
+var _default = showComponentCYA;
+exports.default = _default;

package/dist/utils/CheckYourAnswers/showComponentCYA.test.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _models = require("../../models");
+
+var _showComponentCYA = _interopRequireDefault(require("./showComponentCYA"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Local imports
+describe('utils', function () {
+  describe('CheckYourAnswers', function () {
+    describe('showComponentCYA', function () {
+      it('should not show when there are no options', function () {
+        expect((0, _showComponentCYA.default)(null, null)).toBeFalsy();
+      });
+      it('should not show when it is a heading type', function () {
+        expect((0, _showComponentCYA.default)({
+          type: _models.ComponentTypes.HEADING
+        }, null)).toBeFalsy();
+      });
+      it('should not show when it is an html type', function () {
+        expect((0, _showComponentCYA.default)({
+          type: _models.ComponentTypes.HTML
+        }, null)).toBeFalsy();
+      });
+      it('should not show when it is an inset-text type', function () {
+        expect((0, _showComponentCYA.default)({
+          type: _models.ComponentTypes.INSET_TEXT
+        }, null)).toBeFalsy();
+      });
+      it('should not show when it hidden and disabled', function () {
+        expect((0, _showComponentCYA.default)({
+          hidden: true,
+          disabled: true
+        }, null)).toBeFalsy();
+      });
+      it('should show when it hidden but not disabled', function () {
+        expect((0, _showComponentCYA.default)({
+          hidden: true
+        }, null)).toBeTruthy();
+      });
+      it('should show when it disabled but not hidden', function () {
+        expect((0, _showComponentCYA.default)({
+          disabled: true
+        }, null)).toBeTruthy();
+      });
+      it('should show when it not html, inset-text, a heading, hidden, or disabled', function () {
+        expect((0, _showComponentCYA.default)({
+          type: _models.ComponentTypes.TEXT
+        }, null)).toBeTruthy();
+      });
+    });
+  });
+});

package/dist/utils/Component/cleanAttributes.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.JSON_ONLY_PROPERTIES = void 0;
+
+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); }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+var JSON_ONLY_PROPERTIES = ['source', 'use', 'show_when', 'options'];
+/**
+ * This method removes and properties that are entirely specific to the JSON
+ * configuration and that should not be used as HTML attributes.
+ * 
+ * This is in place as certain properties being used as attributes result in
+ * console errors.
+ * 
+ * @param {object} options The options object that contains attributes and JSON configuration properties.
+ * @param {Array} alsoRemove An array of additional properties to remove.
+ * @returns A clean(er) JSON object.
+ */
+
+exports.JSON_ONLY_PROPERTIES = JSON_ONLY_PROPERTIES;
+
+var cleanAttributes = function cleanAttributes(options) {
+  var alsoRemove = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var removeKeys = Array.isArray(alsoRemove) ? [].concat(JSON_ONLY_PROPERTIES, _toConsumableArray(alsoRemove)) : JSON_ONLY_PROPERTIES;
+
+  if (options && _typeof(options) === 'object') {
+    return Object.keys(options).reduce(function (obj, key) {
+      if (!removeKeys.includes(key)) {
+        obj[key] = options[key];
+      }
+
+      return obj;
+    }, {});
+  }
+
+  return {};
+};
+
+var _default = cleanAttributes;
+exports.default = _default;

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

@@ -0,0 +1,69 @@
+"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 _cleanAttributes = _interopRequireWildcard(require("./cleanAttributes"));
+
+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
+describe('utils', function () {
+  describe('Component', function () {
+    describe('clean', function () {
+      it('should handle null options', function () {
+        expect((0, _cleanAttributes.default)(null)).toEqual({});
+      });
+      it('should handle undefined options', function () {
+        expect((0, _cleanAttributes.default)(undefined)).toEqual({});
+      });
+      it('should handle empty options', function () {
+        expect((0, _cleanAttributes.default)({}, null)).toEqual({});
+      });
+      it('should handle a non-object options', function () {
+        expect((0, _cleanAttributes.default)(23, null)).toEqual({});
+      });
+      it('should only remove properties specific to JSON', function () {
+        var OPTIONS = {
+          id: 'bob'
+        }; // Add a bunch of properties we know will need to be removed.
+
+        _cleanAttributes.JSON_ONLY_PROPERTIES.forEach(function (p) {
+          return OPTIONS[p] = 'value';
+        });
+
+        var RESULT = (0, _cleanAttributes.default)(OPTIONS); // The original options should remain untouched.
+
+        expect(OPTIONS.id).toEqual('bob');
+        expect(OPTIONS['source']).toEqual('value'); // But those values should have been removed from the result,
+        // which means it should simply have an id of 'bob'.
+
+        expect(RESULT).toEqual({
+          id: 'bob'
+        });
+      });
+      it('should also remove properties specified in the alsoRemove parameter', function () {
+        var OPTIONS = {
+          id: 'bob',
+          fieldId: 'bobField'
+        }; // Add a bunch of properties we know will need to be removed.
+
+        _cleanAttributes.JSON_ONLY_PROPERTIES.forEach(function (p) {
+          return OPTIONS[p] = 'value';
+        });
+
+        var RESULT = (0, _cleanAttributes.default)(OPTIONS, ['fieldId']); // The original options should remain untouched.
+
+        expect(OPTIONS.id).toEqual('bob');
+        expect(OPTIONS.fieldId).toEqual('bobField');
+        expect(OPTIONS['source']).toEqual('value'); // But those values should have been removed from the result,
+        // which means it should simply have an id of 'bob'.
+
+        expect(RESULT).toEqual({
+          id: 'bob'
+        });
+      });
+    });
+  });
+});

package/dist/utils/Component/getComponent.js

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _copReactComponents = require("@ukhomeoffice/cop-react-components");
+
+var _cleanAttributes = _interopRequireDefault(require("./cleanAttributes"));
+
+var _models = require("../../models");
+
+var _Data = _interopRequireDefault(require("../Data"));
+
+var _isEditable = _interopRequireDefault(require("./isEditable"));
+
+var _wrapInFormGroup = _interopRequireDefault(require("./wrapInFormGroup"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/** 
+ * Separate function for each component type for the sake of
+ * code clarity - having the additional bits and pieces in the
+ * switch statement increases the cyclomatic complexity and
+ * makes it much harder to follow what's going on.
+ */
+var getAutocomplete = function getAutocomplete(config) {
+  var attrs = (0, _cleanAttributes.default)(config);
+
+  var source = _Data.default.getAutocompleteSource(config);
+
+  return /*#__PURE__*/_react.default.createElement(_copReactComponents.Autocomplete, _extends({}, attrs, {
+    source: source
+  }));
+};
+
+var getHeading = function getHeading(config) {
+  var attrs = (0, _cleanAttributes.default)(config);
+  return /*#__PURE__*/_react.default.createElement(_copReactComponents.Heading, attrs, config.content);
+};
+
+var getHTML = function getHTML(config) {
+  var attrs = (0, _cleanAttributes.default)(config);
+  return /*#__PURE__*/_react.default.createElement(_copReactComponents.Markup, attrs);
+};
+
+var getInsetText = function getInsetText(config) {
+  var attrs = (0, _cleanAttributes.default)(config);
+  return /*#__PURE__*/_react.default.createElement(_copReactComponents.InsetText, attrs, config.content);
+};
+
+var getRadios = function getRadios(config) {
+  var options = [];
+
+  _Data.default.getOptions(config, function (val) {
+    options = val;
+  });
+
+  var attrs = (0, _cleanAttributes.default)(config);
+  return /*#__PURE__*/_react.default.createElement(_copReactComponents.Radios, _extends({}, attrs, {
+    options: options
+  }));
+};
+
+var getTextInput = function getTextInput(config) {
+  var attrs = (0, _cleanAttributes.default)(config);
+  return /*#__PURE__*/_react.default.createElement(_copReactComponents.TextInput, attrs);
+};
+
+var getComponentByType = function getComponentByType(config) {
+  switch (config.type) {
+    case _models.ComponentTypes.HTML:
+      return getHTML(config);
+
+    case _models.ComponentTypes.HEADING:
+      return getHeading(config);
+
+    case _models.ComponentTypes.INSET_TEXT:
+      return getInsetText(config);
+
+    case _models.ComponentTypes.TEXT:
+    case _models.ComponentTypes.EMAIL:
+    case _models.ComponentTypes.PHONE_NUMBER:
+      return getTextInput(config);
+
+    case _models.ComponentTypes.AUTOCOMPLETE:
+      return getAutocomplete(config);
+
+    case _models.ComponentTypes.RADIOS:
+      return getRadios(config);
+
+    default:
+      {
+        return null;
+      }
+  }
+};
+
+var getComponent = function getComponent(config) {
+  var noWrap = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var component = getComponentByType(config);
+
+  if (component && !noWrap && (0, _isEditable.default)(config)) {
+    var attrs = (0, _cleanAttributes.default)(config, ['fieldId', 'displayMenu']);
+    return (0, _wrapInFormGroup.default)(attrs, component);
+  }
+
+  return component;
+};
+
+var _default = getComponent;
+exports.default = _default;