@ukhomeoffice/cop-react-form-renderer 2.1.0 → 2.6.0

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

@@ -0,0 +1,250 @@
+"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 _react = require("@testing-library/react");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _models = require("../../models");
+
+var _FormComponent = _interopRequireWildcard(require("./FormComponent"));
+
+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; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+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('components.FormComponent.Container', function () {
+  var _ID;
+
+  var ID = 'container';
+  var NESTED_ID = 'nested';
+  var TEXT_ID = 'text';
+  var TEXT_VALUE = 'alpha';
+  var NESTED_TEXT_VALUE = 'charlie';
+
+  var FORM_DATA = _defineProperty({}, ID, (_ID = {}, _defineProperty(_ID, TEXT_ID, TEXT_VALUE), _defineProperty(_ID, NESTED_ID, _defineProperty({}, TEXT_ID, NESTED_TEXT_VALUE)), _ID));
+
+  var TEXT_COMPONENT = {
+    id: TEXT_ID,
+    fieldId: TEXT_ID,
+    type: _models.ComponentTypes.TEXT,
+    label: 'Text component',
+    hint: 'Text hint'
+  };
+  it('should render a container component appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var CONTAINER, _render, container, c, formGroup, label, hint, input;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            CONTAINER = {
+              id: ID,
+              fieldId: ID,
+              type: _models.ComponentTypes.CONTAINER,
+              components: [TEXT_COMPONENT]
+            };
+            _render = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+              component: CONTAINER,
+              value: FORM_DATA[ID],
+              formData: FORM_DATA
+            })), container = _render.container; // Check the container itself.
+
+            c = container.childNodes[0];
+            expect(c.tagName).toEqual('DIV');
+            expect(c.classList).toContain(_FormComponent.DEFAULT_CONTAINER_CLASS); // And now check the single text component within it.
+
+            formGroup = c.childNodes[0];
+            expect(formGroup.tagName).toEqual('DIV');
+            expect(formGroup.classList).toContain('govuk-form-group');
+            label = formGroup.childNodes[0];
+            expect(label.tagName).toEqual('LABEL');
+            expect(label.classList).toContain('govuk-label');
+            expect(label.textContent).toEqual("".concat(TEXT_COMPONENT.label, " (optional)"));
+            expect(label.getAttribute('for')).toEqual(TEXT_ID);
+            hint = formGroup.childNodes[1];
+            expect(hint.tagName).toEqual('SPAN');
+            expect(hint.classList).toContain('govuk-hint');
+            expect(hint.textContent).toEqual(TEXT_COMPONENT.hint);
+            input = formGroup.childNodes[2];
+            expect(input.tagName).toEqual('INPUT');
+            expect(input.classList).toContain('govuk-input');
+            expect(input.id).toEqual(TEXT_ID);
+            expect(input.value).toEqual(TEXT_VALUE);
+
+          case 22:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('should render a nested container component appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+    var CONTAINER, _render2, container, c, nested, formGroup, label, hint, input;
+
+    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            CONTAINER = {
+              id: ID,
+              fieldId: ID,
+              type: _models.ComponentTypes.CONTAINER,
+              components: [{
+                id: NESTED_ID,
+                fieldId: NESTED_ID,
+                type: _models.ComponentTypes.CONTAINER,
+                components: [TEXT_COMPONENT]
+              }]
+            };
+            _render2 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+              component: CONTAINER,
+              value: FORM_DATA[ID],
+              formData: FORM_DATA
+            })), container = _render2.container; // Check the container itself.
+
+            c = container.childNodes[0];
+            expect(c.tagName).toEqual('DIV');
+            expect(c.classList).toContain(_FormComponent.DEFAULT_CONTAINER_CLASS); // Check the nested container.
+
+            nested = c.childNodes[0];
+            expect(nested.tagName).toEqual('DIV');
+            expect(nested.classList).toContain(_FormComponent.DEFAULT_CONTAINER_CLASS); // And now check the single text component within the nested container.
+
+            formGroup = nested.childNodes[0];
+            expect(formGroup.tagName).toEqual('DIV');
+            expect(formGroup.classList).toContain('govuk-form-group');
+            label = formGroup.childNodes[0];
+            expect(label.tagName).toEqual('LABEL');
+            expect(label.classList).toContain('govuk-label');
+            expect(label.textContent).toEqual("".concat(TEXT_COMPONENT.label, " (optional)"));
+            expect(label.getAttribute('for')).toEqual(TEXT_ID);
+            hint = formGroup.childNodes[1];
+            expect(hint.tagName).toEqual('SPAN');
+            expect(hint.classList).toContain('govuk-hint');
+            expect(hint.textContent).toEqual(TEXT_COMPONENT.hint);
+            input = formGroup.childNodes[2];
+            expect(input.tagName).toEqual('INPUT');
+            expect(input.classList).toContain('govuk-input');
+            expect(input.id).toEqual(TEXT_ID);
+            expect(input.value).toEqual(NESTED_TEXT_VALUE);
+
+          case 25:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('should handle a change to a component appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+    var ON_CHANGE_EVENTS, ON_CHANGE, CONTAINER, _render3, container, c, formGroup, input, NEW_TEXT_VALUE, EVENT;
+
+    return regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            ON_CHANGE_EVENTS = [];
+
+            ON_CHANGE = function ON_CHANGE(e) {
+              ON_CHANGE_EVENTS.push(e);
+            };
+
+            CONTAINER = {
+              id: ID,
+              fieldId: ID,
+              type: _models.ComponentTypes.CONTAINER,
+              components: [{
+                id: TEXT_ID,
+                fieldId: TEXT_ID,
+                type: _models.ComponentTypes.TEXT,
+                label: 'Text component'
+              }]
+            };
+            _render3 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+              component: CONTAINER,
+              value: FORM_DATA[ID],
+              formData: FORM_DATA,
+              onChange: ON_CHANGE
+            })), container = _render3.container; // Get hold of the text input.
+
+            c = container.childNodes[0];
+            formGroup = c.childNodes[0];
+            input = formGroup.childNodes[2];
+            NEW_TEXT_VALUE = 'bravo';
+            EVENT = {
+              target: {
+                name: TEXT_ID,
+                value: NEW_TEXT_VALUE
+              }
+            };
+
+            _react.fireEvent.change(input, EVENT); // And confirm the formData has been changed.
+
+
+            expect(ON_CHANGE_EVENTS.length).toEqual(1);
+            expect(ON_CHANGE_EVENTS[0].target.name).toEqual(ID);
+            expect(ON_CHANGE_EVENTS[0].target.value[TEXT_ID]).toEqual(NEW_TEXT_VALUE);
+
+          case 13:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  it('should handle a null value appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
+    var CONTAINER, _render4, container, c, formGroup, label, hint, input;
+
+    return regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            CONTAINER = {
+              id: ID,
+              fieldId: ID,
+              type: _models.ComponentTypes.CONTAINER,
+              components: [TEXT_COMPONENT]
+            };
+            _render4 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+              component: CONTAINER
+            })), container = _render4.container; // Check the container itself.
+
+            c = container.childNodes[0];
+            expect(c.tagName).toEqual('DIV');
+            expect(c.classList).toContain(_FormComponent.DEFAULT_CONTAINER_CLASS); // And now check the single text component within it.
+
+            formGroup = c.childNodes[0];
+            expect(formGroup.tagName).toEqual('DIV');
+            expect(formGroup.classList).toContain('govuk-form-group');
+            label = formGroup.childNodes[0];
+            expect(label.tagName).toEqual('LABEL');
+            expect(label.classList).toContain('govuk-label');
+            expect(label.textContent).toEqual("".concat(TEXT_COMPONENT.label, " (optional)"));
+            expect(label.getAttribute('for')).toEqual(TEXT_ID);
+            hint = formGroup.childNodes[1];
+            expect(hint.tagName).toEqual('SPAN');
+            expect(hint.classList).toContain('govuk-hint');
+            expect(hint.textContent).toEqual(TEXT_COMPONENT.hint);
+            input = formGroup.childNodes[2];
+            expect(input.tagName).toEqual('INPUT');
+            expect(input.classList).toContain('govuk-input');
+            expect(input.id).toEqual(TEXT_ID);
+            expect(input.value).toEqual('');
+
+          case 22:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })));
+});

package/dist/components/FormComponent/FormComponent.js

@@ -1,34 +1,25 @@
 "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); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.DEFAULT_CONTAINER_CLASS = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = require("react");
 
-var _useRefData2 = _interopRequireWildcard(require("../../hooks/useRefData"));
-
-var _utils = _interopRequireDefault(require("../../utils"));
+var _hooks = require("../../hooks");
 
-var _excluded = ["component", "value", "wrap", "onChange"];
+var _models = require("../../models");
 
-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); }
+var _utils = _interopRequireDefault(require("../../utils"));
 
-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; }
+var _excluded = ["container", "value", "formData", "onChange", "wrap"],
+    _excluded2 = ["component", "value", "formData", "wrap", "onChange"];
 
 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); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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; }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -41,18 +32,98 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+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); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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; }
+
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-var FormComponent = function FormComponent(_ref) {
-  var component = _ref.component,
+var DEFAULT_CONTAINER_CLASS = 'hods-form-container';
+exports.DEFAULT_CONTAINER_CLASS = DEFAULT_CONTAINER_CLASS;
+
+var Container = function Container(_ref) {
+  var container = _ref.container,
       value = _ref.value,
-      wrap = _ref.wrap,
+      formData = _ref.formData,
       onChange = _ref.onChange,
+      wrap = _ref.wrap,
       attrs = _objectWithoutProperties(_ref, _excluded);
 
-  var _useRefData = (0, _useRefData2.default)(component),
+  var onComponentChange = function onComponentChange(_ref2) {
+    var target = _ref2.target;
+
+    var val = _objectSpread(_objectSpread({}, value), {}, _defineProperty({}, target.name, target.value));
+
+    if (typeof onChange === 'function') {
+      onChange({
+        target: {
+          name: container.fieldId,
+          value: val
+        }
+      });
+    }
+  };
+
+  var shouldShow = function shouldShow(options) {
+    if (options.type === _models.ComponentTypes.CONTAINER) {
+      return _utils.default.Container.show(options, formData);
+    }
+
+    return _utils.default.Component.show(options, formData);
+  };
+
+  return /*#__PURE__*/React.createElement("div", _extends({}, attrs, {
+    className: DEFAULT_CONTAINER_CLASS,
+    id: container.id
+  }), container.components && container.components.filter(shouldShow).map(function (component, index) {
+    var val = value ? value[component.fieldId] : '';
+    return /*#__PURE__*/React.createElement(FormComponent, {
+      key: index,
+      component: component,
+      formData: formData,
+      value: val || '',
+      wrap: wrap,
+      onChange: onComponentChange
+    });
+  }));
+};
+
+Container.propTypes = {
+  container: _propTypes.default.shape({
+    id: _propTypes.default.string.isRequired,
+    fieldId: _propTypes.default.string.isRequired,
+    components: _propTypes.default.arrayOf(_propTypes.default.shape({
+      fieldId: _propTypes.default.string,
+      type: _propTypes.default.string
+    }))
+  }).isRequired,
+  value: _propTypes.default.any,
+  formData: _propTypes.default.any,
+  wrap: _propTypes.default.bool,
+  onChange: _propTypes.default.func
+};
+Container.defaultProps = {
+  wrap: true
+};
+
+var FormComponent = function FormComponent(_ref3) {
+  var component = _ref3.component,
+      value = _ref3.value,
+      formData = _ref3.formData,
+      wrap = _ref3.wrap,
+      onChange = _ref3.onChange,
+      attrs = _objectWithoutProperties(_ref3, _excluded2);
+
+  var _useHooks = (0, _hooks.useHooks)(),
+      hooks = _useHooks.hooks;
+
+  var _useRefData = (0, _hooks.useRefData)(component),
       data = _useRefData.data,
       status = _useRefData.status;
 
@@ -62,21 +133,33 @@ var FormComponent = function FormComponent(_ref) {
       setOptions = _useState2[1];
 
   (0, _react.useEffect)(function () {
-    if (status === _useRefData2.STATUS_COMPLETE) {
+    if (status === _hooks.STATUS_COMPLETE) {
       setOptions(data);
     }
   }, [component, data, status]);
+
+  if (component.type === _models.ComponentTypes.CONTAINER) {
+    return /*#__PURE__*/React.createElement(Container, {
+      container: component,
+      wrap: wrap,
+      onChange: onChange,
+      value: value,
+      formData: formData
+    });
+  }
+
   return _utils.default.Component.get(_objectSpread(_objectSpread(_objectSpread({}, attrs), component), {}, {
     label: component.label || '',
     hint: component.hint || '',
     options: options,
     value: value || '',
     onChange: onChange
-  }), wrap);
+  }), wrap, hooks.onGetComponent);
 };
 
 FormComponent.propTypes = {
   component: _propTypes.default.shape({
+    fieldId: _propTypes.default.string,
     label: _propTypes.default.string,
     hint: _propTypes.default.string,
     data: _propTypes.default.shape({
@@ -85,6 +168,7 @@ FormComponent.propTypes = {
     })
   }).isRequired,
   value: _propTypes.default.any,
+  formData: _propTypes.default.any,
   wrap: _propTypes.default.bool,
   onChange: _propTypes.default.func
 };

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

@@ -4,6 +4,8 @@ var _react = require("@testing-library/react");
 
 var _react2 = _interopRequireDefault(require("react"));
 
+var _useHooks = require("../../hooks/useHooks");
+
 var _FormComponent = _interopRequireDefault(require("./FormComponent"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -14,6 +16,9 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 
 describe('components', function () {
   describe('FormComponent', function () {
+    beforeEach(function () {
+      (0, _useHooks.resetHooks)();
+    });
     it('should render a text component appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
       var ID, VALUE, COMPONENT, ON_CHANGE, _render, container, formGroup, label, hint, input;
 
@@ -133,5 +138,67 @@ describe('components', function () {
         }
       }, _callee3);
     })));
+    it('should render an overridden html component appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
+      var ID, COMPONENT, _render4, container, div;
+
+      return regeneratorRuntime.wrap(function _callee4$(_context4) {
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              (0, _useHooks.addHook)('onGetComponent', function (config, wrap) {
+                return /*#__PURE__*/_react2.default.createElement("div", null, "".concat(config.type, " | ").concat(config.tagName, " | ").concat(config.content, " | ").concat(wrap));
+              });
+              ID = 'component';
+              COMPONENT = {
+                type: 'html',
+                tagName: 'p',
+                content: 'HTML content'
+              };
+              _render4 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+                "data-testid": ID,
+                component: COMPONENT
+              })), container = _render4.container;
+              div = container.childNodes[0];
+              expect(div.tagName).toEqual('DIV');
+              expect(div.textContent).toEqual("".concat(COMPONENT.type, " | ").concat(COMPONENT.tagName, " | ").concat(COMPONENT.content, " | true"));
+
+            case 7:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee4);
+    })));
+    it('should render the correct html component when the override returns null', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
+      var ID, COMPONENT, _render5, container, p;
+
+      return regeneratorRuntime.wrap(function _callee5$(_context5) {
+        while (1) {
+          switch (_context5.prev = _context5.next) {
+            case 0:
+              (0, _useHooks.addHook)('onGetComponent', function () {
+                return null;
+              });
+              ID = 'component';
+              COMPONENT = {
+                type: 'html',
+                tagName: 'p',
+                content: 'HTML content'
+              };
+              _render5 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+                "data-testid": ID,
+                component: COMPONENT
+              })), container = _render5.container;
+              p = container.childNodes[0];
+              expect(p.tagName).toEqual('P');
+              expect(p.textContent).toEqual(COMPONENT.content);
+
+            case 7:
+            case "end":
+              return _context5.stop();
+          }
+        }
+      }, _callee5);
+    })));
   });
 });

package/dist/components/FormPage/FormPage.js

@@ -97,7 +97,8 @@ var FormPage = function FormPage(_ref) {
       key: index,
       component: component,
       onChange: onPageChange,
-      value: page.formData[component.fieldId] || ''
+      value: page.formData[component.fieldId] || '',
+      formData: page.formData
     });
   }), /*#__PURE__*/_react.default.createElement(_PageActions.default, {
     actions: page.actions,