@ukhomeoffice/cop-react-form-renderer 2.2.0 → 2.6.1-alpha

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,36 +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 _useHooks2 = _interopRequireDefault(require("../../hooks/useHooks"));
+var _hooks = require("../../hooks");
 
-var _useRefData2 = _interopRequireWildcard(require("../../hooks/useRefData"));
+var _models = require("../../models");
 
 var _utils = _interopRequireDefault(require("../../utils"));
 
-var _excluded = ["component", "value", "wrap", "onChange"];
-
-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; }
+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."); }
@@ -43,21 +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 _useHooks = (0, _useHooks2.default)(),
+  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, _useRefData2.default)(component),
+  var _useRefData = (0, _hooks.useRefData)(component),
       data = _useRefData.data,
       status = _useRefData.status;
 
@@ -67,10 +133,21 @@ 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 || '',
@@ -82,6 +159,7 @@ var FormComponent = function FormComponent(_ref) {
 
 FormComponent.propTypes = {
   component: _propTypes.default.shape({
+    fieldId: _propTypes.default.string,
     label: _propTypes.default.string,
     hint: _propTypes.default.string,
     data: _propTypes.default.shape({
@@ -90,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/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,

package/dist/components/FormRenderer/FormRenderer.js

@@ -23,6 +23,8 @@ var _CheckYourAnswers = _interopRequireDefault(require("../CheckYourAnswers"));
 
 var _FormPage = _interopRequireDefault(require("../FormPage"));
 
+var _TaskList = _interopRequireDefault(require("../TaskList"));
+
 var _handlers = _interopRequireDefault(require("./handlers"));
 
 var _helpers = _interopRequireDefault(require("./helpers"));
@@ -98,7 +100,17 @@ var FormRenderer = function FormRenderer(_ref) {
   var _useState9 = (0, _react.useState)(_helpers.default.getFormState(pageId, pages, hub)),
       _useState10 = _slicedToArray(_useState9, 2),
       formState = _useState10[0],
-      setFormState = _useState10[1]; // Set up hooks.
+      setFormState = _useState10[1];
+
+  var _useState11 = (0, _react.useState)({}),
+      _useState12 = _slicedToArray(_useState11, 2),
+      currentTask = _useState12[0],
+      setCurrentTask = _useState12[1];
+
+  var _useState13 = (0, _react.useState)({}),
+      _useState14 = _slicedToArray(_useState13, 2),
+      hubDetails = _useState14[0],
+      setHubDetails = _useState14[1]; // Set up hooks.
 
 
   var _useHooks = (0, _hooks2.useHooks)(),
@@ -146,6 +158,36 @@ var FormRenderer = function FormRenderer(_ref) {
   (0, _react.useEffect)(function () {
     hooks.onFormLoad();
   }, [hooks]);
+  (0, _react.useEffect)(function () {
+    setHubDetails(_hub);
+  }, [_hub]); // Update task list pages with form data and update states
+
+  (0, _react.useEffect)(function () {
+    var pages = currentTask.fullPages;
+
+    if (pages) {
+      pages.forEach(function (page) {
+        page.formData = data;
+      });
+      setCurrentTask(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          fullPages: pages
+        });
+      });
+    }
+
+    if (hubDetails !== null && hubDetails !== void 0 && hubDetails.sections) {
+      var _data$formStatus2;
+
+      var tasks = data !== null && data !== void 0 && (_data$formStatus2 = data.formStatus) !== null && _data$formStatus2 !== void 0 && _data$formStatus2.tasks ? data.formStatus.tasks : {};
+
+      var updatedSections = _helpers.default.getUpdatedSectionStates(hubDetails.sections, tasks);
+
+      setHubDetails(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), updatedSections);
+      });
+    }
+  }, [currentTask.fullPages, data, hubDetails === null || hubDetails === void 0 ? void 0 : hubDetails.sections]);
 
   var onPageChange = function onPageChange(newPageId) {
     setPageId(newPageId);
@@ -166,10 +208,20 @@ var FormRenderer = function FormRenderer(_ref) {
           components: components
         }, _objectSpread(_objectSpread({}, data), patch), _models.EventTypes.SUBMIT);
 
-        submissionData.formStatus = _helpers.default.getSubmissionStatus(type, pages, pageId, action, submissionData);
+        submissionData.formStatus = _helpers.default.getSubmissionStatus(type, pages, pageId, action, submissionData, currentTask);
 
         if (patch) {
           setData(submissionData);
+        }
+
+        var pageUpdate = function pageUpdate(next) {
+          return onPageChange(_helpers.default.getNextPageId(type, pages, pageId, action, next));
+        };
+
+        if (action.type === _models.PageAction.TYPES.SAVE_AND_NAVIGATE) {
+          pageUpdate = function pageUpdate() {
+            return _handlers.default.navigate(action, pageId, onPageChange);
+          };
         } // Now submit the data to the backend...
 
 
@@ -178,7 +230,7 @@ var FormRenderer = function FormRenderer(_ref) {
           setData(function (prev) {
             var next = _objectSpread(_objectSpread({}, prev), response);
 
-            onPageChange(_helpers.default.getNextPageId(type, pages, pageId, action, next));
+            pageUpdate(next);
             return next;
           });
         }, function (errors) {
@@ -191,6 +243,23 @@ var FormRenderer = function FormRenderer(_ref) {
 
   var onCYARowAction = function onCYARowAction(page) {
     _handlers.default.cyaAction(page, pageId, onPageChange);
+  }; //Kick off a task, gather required pages and move to the correct point
+
+
+  var onTaskAction = function onTaskAction(currentTask) {
+    if (currentTask) {
+      currentTask.fullPages = [];
+      currentTask.pages.forEach(function (page) {
+        currentTask.fullPages.push(_helpers.default.getPage(page, pages));
+      });
+      setCurrentTask(currentTask);
+
+      if (currentTask.state === _models.TaskStates.TYPES.COMPLETE) {
+        onPageChange(_models.FormPages.CYA);
+      } else {
+        onPageChange(currentTask.pages[0]);
+      }
+    }
   }; // Handle actions from "Check your answers".
 
 
@@ -215,21 +284,51 @@ var FormRenderer = function FormRenderer(_ref) {
         });
       }
     }
+
+    if (action.type === _models.PageAction.TYPES.SAVE_AND_RETURN) {
+      if (_helpers.default.canCYASubmit(currentTask.fullPages, onError)) {
+        var _submissionData = _utils.default.Format.form({
+          pages: pages,
+          components: components
+        }, _objectSpread({}, data), _models.EventTypes.SUBMIT);
+
+        _submissionData.formStatus = _helpers.default.getSubmissionStatus(type, pages, pageId, action, _submissionData, currentTask);
+        setData(_submissionData);
+        hooks.onSubmit(action.type, _submissionData, function () {
+          return onPageChange(_models.FormPages.HUB);
+        }, function (errors) {
+          return _handlers.default.submissionError(errors, onError);
+        });
+      }
+    }
   };
 
   var classes = _utils.default.classBuilder(classBlock, classModifiers, className);
 
+  if (hub === _models.HubFormats.TASK) {
+    cya.actions = [{
+      type: _models.PageAction.TYPES.SAVE_AND_RETURN,
+      label: 'Submit',
+      validate: true
+    }];
+  }
+
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes()
   }, title && !hide_title && pageId === _models.FormPages.HUB && /*#__PURE__*/_react.default.createElement(_copReactComponents.LargeHeading, null, title), formState.cya && /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, _extends({
-    pages: pages
+    pages: currentTask.fullPages ? currentTask.fullPages : pages
   }, cya, formState.cya, {
     onAction: onCYAAction,
     onRowAction: onCYARowAction,
     summaryListClassModifiers: summaryListClassModifiers,
     hide_title: hide_title,
     noChangeAction: noChangeAction
-  })), formState.page && /*#__PURE__*/_react.default.createElement(_FormPage.default, {
+  })), hub === _models.HubFormats.TASK && formState.pageId === _models.FormPages.HUB && /*#__PURE__*/_react.default.createElement(_TaskList.default, {
+    sections: hubDetails.sections,
+    refNumber: data['businessKey'],
+    refTitle: _hub.refTitle,
+    onTaskAction: onTaskAction
+  }), formState.page && /*#__PURE__*/_react.default.createElement(_FormPage.default, {
     page: formState.page,
     onAction: onPageAction
   }));
@@ -239,7 +338,7 @@ FormRenderer.propTypes = {
   title: _propTypes.default.string,
 
   /** See <a href="/?path=/docs/f-json--page#formtypes">FormTypes</a>. */
-  type: _propTypes.default.oneOf([_models.FormTypes.CYA, _models.FormTypes.FORM, _models.FormTypes.HUB, _models.FormTypes.WIZARD]).isRequired,
+  type: _propTypes.default.oneOf([_models.FormTypes.CYA, _models.FormTypes.FORM, _models.FormTypes.HUB, _models.FormTypes.TASK, _models.FormTypes.WIZARD]).isRequired,
   components: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
   pages: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
   hub: _propTypes.default.object,