@ukhomeoffice/cop-react-form-renderer 3.12.0 → 3.16.1-alpha

package/dist/components/CheckYourAnswers/CheckYourAnswers.stories.mdx

@@ -1,21 +1,15 @@
 <!-- Global imports -->
 
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import {
-  Details,
-  Heading,
-  Link,
-  Tag,
-} from '@ukhomeoffice/cop-react-components';
+import { Details, Heading, Link, Tag } from '@ukhomeoffice/cop-react-components';
 import withMock from 'storybook-addon-mock';
 
 <!-- Local imports -->
-
+import { HooksContextProvider, ValidationContextProvider } from '../../context';
 import Utils from '../../utils';
 import CheckYourAnswers from './CheckYourAnswers';
 
 <!-- JSON documents -->
-
 import CIVIL_SERVANT from '../../json/areYouACivilServant.json';
 import GRADE from '../../json/grade.json';
 import TEAMS from '../../json/team.json';
@@ -84,11 +78,15 @@ Renders the **Check your answers** screen for a form.
         console.log('row action invoked', page);
       };
       return (
-        <CheckYourAnswers
-          pages={PAGES}
-          onAction={ON_ACTION}
-          onRowAction={ON_ROW_ACTION}
-        />
+        <HooksContextProvider>
+          <ValidationContextProvider>
+            <CheckYourAnswers
+              pages={PAGES}
+              onAction={ON_ACTION}
+              onRowAction={ON_ROW_ACTION}
+            />
+          </ValidationContextProvider>
+        </HooksContextProvider>
       );
     }}
   </Story>
@@ -146,12 +144,16 @@ Renders the **Check your answers** screen for a form.
         console.log('row action invoked', page);
       };
       return (
-        <CheckYourAnswers
-          pages={PAGES}
-          hide_page_titles={true}
-          onAction={ON_ACTION}
-          onRowAction={ON_ROW_ACTION}
-        />
+        <HooksContextProvider>
+          <ValidationContextProvider>
+            <CheckYourAnswers
+              pages={PAGES}
+              hide_page_titles={true}
+              onAction={ON_ACTION}
+              onRowAction={ON_ROW_ACTION}
+            />
+          </ValidationContextProvider>
+        </HooksContextProvider>
       );
     }}
   </Story>
@@ -200,13 +202,17 @@ Renders the **Check your answers** screen for a form.
         console.log('row action invoked', page);
       };
       return (
-        <CheckYourAnswers
-          pages={PAGES}
-          hide_page_titles={true}
-          actions={ACTIONS}
-          onAction={ON_ACTION}
-          onRowAction={ON_ROW_ACTION}
-        />
+        <HooksContextProvider>
+          <ValidationContextProvider>
+            <CheckYourAnswers
+              pages={PAGES}
+              hide_page_titles={true}
+              actions={ACTIONS}
+              onAction={ON_ACTION}
+              onRowAction={ON_ROW_ACTION}
+            />
+          </ValidationContextProvider>
+        </HooksContextProvider>
       );
     }}
   </Story>
@@ -258,15 +264,19 @@ Renders the **Check your answers** screen for a form.
         console.log('row action invoked', page);
       };
       return (
-        <CheckYourAnswers
-          pages={PAGES}
-          hide_page_titles={true}
-          onAction={ON_ACTION}
-          onRowAction={ON_ROW_ACTION}
-          hide_title={true}
-          summaryListClassModifiers='no-border'
-          noChangeAction={true}
-        />
+        <HooksContextProvider>
+          <ValidationContextProvider>
+            <CheckYourAnswers
+              pages={PAGES}
+              hide_page_titles={true}
+              onAction={ON_ACTION}
+              onRowAction={ON_ROW_ACTION}
+              hide_title={true}
+              summaryListClassModifiers='no-border'
+              noChangeAction={true}
+            />
+          </ValidationContextProvider>
+        </HooksContextProvider>
       );
     }}
   </Story>
@@ -320,13 +330,17 @@ Renders the **Check your answers** screen for a form.
         console.log('row action invoked', page);
       };
       return (
-        <CheckYourAnswers
-          pages={PAGES}
-          hide_page_titles={false}
-          onAction={ON_ACTION}
-          onRowAction={ON_ROW_ACTION}
-          groups={CYA.groups}
-        />
+        <HooksContextProvider>
+          <ValidationContextProvider>
+            <CheckYourAnswers
+              pages={PAGES}
+              hide_page_titles={false}
+              onAction={ON_ACTION}
+              onRowAction={ON_ROW_ACTION}
+              groups={CYA.groups}
+            />
+          </ValidationContextProvider>
+        </HooksContextProvider>
       );
     }}
   </Story>
@@ -359,33 +373,37 @@ Renders the **Check your answers** screen for a form.
       ],
     }}>
     {() => {
-        const DATA = Utils.Data.setupForm(
-         GROUP.pages,
-         GROUP.components,
-         GROUP_DATA
-       );
-       const PAGES = Utils.FormPage.getAll(
-         GROUP.pages,
-         GROUP.components,
-         { ...DATA }
-       );
-       const ACTIONS = GROUP.cya.actions;
-       const ON_ACTION = (action, patch, onError) => {
-         console.log('action invoked', action, patch);
-       };
-       const ON_ROW_ACTION = (page) => {
-         console.log('row action invoked', page);
-       };
-       return (
-         <CheckYourAnswers
-           pages={PAGES}
-           hide_page_titles={true}
-           actions={ACTIONS}
-           onAction={ON_ACTION}
-           onRowAction={ON_ROW_ACTION}
-         />
-       );
-     }}
+      const DATA = Utils.Data.setupForm(
+        GROUP.pages,
+        GROUP.components,
+        GROUP_DATA
+      );
+      const PAGES = Utils.FormPage.getAll(
+        GROUP.pages,
+        GROUP.components,
+        { ...DATA }
+      );
+      const ACTIONS = GROUP.cya.actions;
+      const ON_ACTION = (action, patch, onError) => {
+        console.log('action invoked', action, patch);
+      };
+      const ON_ROW_ACTION = (page) => {
+        console.log('row action invoked', page);
+      };
+      return (
+        <HooksContextProvider>
+          <ValidationContextProvider>
+            <CheckYourAnswers
+              pages={PAGES}
+              hide_page_titles={true}
+              actions={ACTIONS}
+              onAction={ON_ACTION}
+              onRowAction={ON_ROW_ACTION}
+            />
+          </ValidationContextProvider>
+        </HooksContextProvider>
+      );
+    }}
   </Story>
 </Canvas>
 

package/dist/components/FormComponent/FormComponent.stories.mdx

@@ -4,6 +4,7 @@ import { Details, Heading, Link } from '@ukhomeoffice/cop-react-components';
 import withMock from 'storybook-addon-mock';
 
 <!-- Local imports -->
+import { HooksContextProvider, ValidationContextProvider } from '../../context';
 import FormComponent from './FormComponent';
 
 <!-- JSON documents -->
@@ -54,7 +55,11 @@ on the basis of a <Link href="/?path=/docs/f-json-component">JSON</Link> configu
         // Do something with the target here.
       };
       return (
-        <FormComponent component={COMPONENT} value={''} onChange={ON_CHANGE} />
+        <HooksContextProvider>
+          <ValidationContextProvider>
+            <FormComponent component={COMPONENT} value={''} onChange={ON_CHANGE} />
+          </ValidationContextProvider>
+        </HooksContextProvider>
       );
     }}
   </Story>
@@ -101,7 +106,11 @@ on the basis of a <Link href="/?path=/docs/f-json-component">JSON</Link> configu
         // Do something with the target here.
       };
       return (
-        <FormComponent component={COMPONENT} value={''} onChange={ON_CHANGE} />
+        <HooksContextProvider>
+          <ValidationContextProvider>
+            <FormComponent component={COMPONENT} value={''} onChange={ON_CHANGE} />
+          </ValidationContextProvider>
+        </HooksContextProvider>
       );
     }}
   </Story>
@@ -117,7 +126,11 @@ on the basis of a <Link href="/?path=/docs/f-json-component">JSON</Link> configu
         // Do something with the target here.
       };
       return (
-        <FormComponent component={COMPONENT} value={''} onChange={ON_CHANGE} />
+        <HooksContextProvider>
+          <ValidationContextProvider>
+            <FormComponent component={COMPONENT} value={''} onChange={ON_CHANGE} />
+          </ValidationContextProvider>
+        </HooksContextProvider>
       );
     }}
   </Story>
@@ -160,7 +173,11 @@ on the basis of a <Link href="/?path=/docs/f-json-component">JSON</Link> configu
         // Do something with the target here.
       };
       return (
-        <FormComponent component={COMPONENT} value={''} wrap={false} onChange={ON_CHANGE} />
+        <HooksContextProvider>
+          <ValidationContextProvider>
+            <FormComponent component={COMPONENT} value={''} wrap={false} onChange={ON_CHANGE} />
+          </ValidationContextProvider>
+        </HooksContextProvider>
       );
     }}
   </Story>

package/dist/components/FormPage/FormPage.js

@@ -104,7 +104,9 @@ var FormPage = function FormPage(_ref) {
       formData: _objectSpread(_objectSpread({}, page.formData), patch)
     });
   }), /*#__PURE__*/_react.default.createElement(_PageActions.default, {
-    actions: page.actions,
+    actions: page.actions.filter(function (action) {
+      return _utils.default.Component.show(action, page.formData);
+    }),
     onAction: function onAction(action) {
       return _onAction(action, patch);
     }

package/dist/components/FormPage/FormPage.stories.mdx

@@ -4,6 +4,7 @@ import { Details, Heading, Link } from '@ukhomeoffice/cop-react-components';
 import withMock from 'storybook-addon-mock';
 
 <!-- Local imports -->
+import { HooksContextProvider, ValidationContextProvider } from '../../context';
 import Utils from '../../utils';
 import FormPage from './FormPage';
 
@@ -51,7 +52,11 @@ on the basis of a <Link href="/?path=/docs/f-json-page">JSON</Link> configuratio
         console.log('action invoked', action, patch);
       };
       return (
-        <FormPage page={PAGE} onAction={ON_ACTION} />
+        <HooksContextProvider>
+          <ValidationContextProvider>
+            <FormPage page={PAGE} onAction={ON_ACTION} />
+          </ValidationContextProvider>
+        </HooksContextProvider>
       );
     }}
   </Story>
@@ -94,7 +99,11 @@ on the basis of a <Link href="/?path=/docs/f-json-page">JSON</Link> configuratio
         console.log('action invoked', action, patch);
       };
       return (
-        <FormPage page={PAGE} onAction={ON_ACTION} />
+        <HooksContextProvider>
+          <ValidationContextProvider>
+            <FormPage page={PAGE} onAction={ON_ACTION} />
+          </ValidationContextProvider>
+        </HooksContextProvider>
       );
     }}
   </Story>
@@ -111,7 +120,11 @@ on the basis of a <Link href="/?path=/docs/f-json-page">JSON</Link> configuratio
         console.log('action invoked', action, patch);
       };
       return (
-        <FormPage page={PAGE} onAction={ON_ACTION} />
+        <HooksContextProvider>
+          <ValidationContextProvider>
+            <FormPage page={PAGE} onAction={ON_ACTION} />
+          </ValidationContextProvider>
+        </HooksContextProvider>
       );
     }}
   </Story>

package/dist/components/FormPage/FormPage.test.js

@@ -92,6 +92,44 @@ describe('components.FormPage', function () {
         }
       }
     };
+    var PAGE_WITH_CONDITIONAL_BUTTONS = {
+      id: 'pageId',
+      // eslint-disable-next-line no-template-curly-in-string
+      title: '${title}',
+      components: [TEXT_WITH_EXPRESSION, AUTO_WITH_EXPRESSION],
+      actions: [{
+        type: 'submit',
+        validate: true,
+        label: 'Button 1',
+        show_when: [{
+          field: 'currentUser.givenName',
+          op: '!=',
+          value: 'Doe'
+        }]
+      }, {
+        type: 'submit',
+        validate: false,
+        label: 'Button 2',
+        show_when: [{
+          field: 'currentUser.givenName',
+          op: '=',
+          value: 'Doe'
+        }]
+      }],
+      formData: {
+        title: 'Order Form',
+        text1: "Text1 ".concat(VALUE),
+        text2: "Text2 ".concat(VALUE),
+        wrapper: {
+          email: 'test@example.email',
+          nextAction: 'Payment',
+          prevAction: 'User Details'
+        },
+        currentUser: {
+          givenName: 'Doe'
+        }
+      }
+    };
     var ON_ACTION_CALLS = [];
 
     var checkInputField = function checkInputField(formGroup, fieldId, lbl, hnt, val) {
@@ -305,5 +343,26 @@ describe('components.FormPage', function () {
         }
       }, _callee4);
     })));
+    it('should render only the conditionally shown button', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
+      var _renderWithValidation5, container, page;
+
+      return regeneratorRuntime.wrap(function _callee5$(_context5) {
+        while (1) {
+          switch (_context5.prev = _context5.next) {
+            case 0:
+              _renderWithValidation5 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormPage.default, {
+                page: PAGE_WITH_CONDITIONAL_BUTTONS,
+                onAction: ON_ACTION
+              })), container = _renderWithValidation5.container;
+              page = container.childNodes[0];
+              checkFormButtonGroup(page.childNodes[3], ['Button 2']); // Just the second button shown
+
+            case 3:
+            case "end":
+              return _context5.stop();
+          }
+        }
+      }, _callee5);
+    })));
   });
 });

package/dist/components/FormRenderer/FormRenderer.js

@@ -250,9 +250,14 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
   }, [newPageId]); // Handle actions from pages.
 
   var onPageAction = function onPageAction(action, patch) {
-    // Re-apply the patch to the page's formData.
+    if (action.type === _models.PageAction.TYPES.CANCEL) {
+      hooks.onCancel();
+      return;
+    } // Re-apply the patch to the page's formData.
     // This should normally have no effect but will prevent issues 
     // with validation if formData happens to have been wiped.
+
+
     formState.page.formData = _objectSpread(_objectSpread({}, formState.page.formData), patch); // Check to see whether the action is able to proceed, which in
     // in the case of a submission will validate the fields in the page.
 
@@ -318,10 +323,15 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
       setCurrentTask(currentTask);
 
       if (currentTask.state === _models.TaskStates.TYPES.COMPLETE) {
-        onPageChange(_models.FormPages.CYA);
+        if (hubDetails !== null && hubDetails !== void 0 && hubDetails.noTaskCYAs) {
+          var currentPage = data.formStatus.tasks[currentTask.name].currentPage;
+          onPageChange(currentPage || currentTask.pages[0]);
+        } else {
+          onPageChange(_models.FormPages.CYA);
+        }
       } else if (currentTask.state === _models.TaskStates.TYPES.IN_PROGRESS) {
-        var currentPage = data.formStatus.tasks[currentTask.name].currentPage;
-        onPageChange(currentPage || currentTask.pages[0]);
+        var _currentPage = data.formStatus.tasks[currentTask.name].currentPage;
+        onPageChange(_currentPage || currentTask.pages[0]);
       } else {
         onPageChange(currentTask.pages[0]);
       }
@@ -388,6 +398,10 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
         });
       }
     }
+
+    if (action.type === _models.PageAction.TYPES.CANCEL) {
+      hooks.onCancel();
+    }
   };
 
   var classes = _utils.default.classBuilder(classBlock, classModifiers, className);

package/dist/components/FormRenderer/FormRenderer.test.js

@@ -99,6 +99,10 @@ describe('components', function () {
       return page.childNodes[page.childNodes.length - 1].childNodes[0].childNodes[0];
     };
 
+    var getCancelButton = function getCancelButton(page) {
+      return page.childNodes[page.childNodes.length - 1].childNodes[1].childNodes[0];
+    };
+
     it('should start on the hub page correctly and display the title', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
       var form, title, hub;
       return regeneratorRuntime.wrap(function _callee2$(_context2) {
@@ -743,5 +747,154 @@ describe('components', function () {
         }
       }, _callee20);
     })));
+    it('should go to the last page of a complete task if noTaskCYAs specified', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee22() {
+      var ON_SUBMIT, HOOKS, TASK_LIST_WITH_NO_TASK_CYAS, taskList, newPage;
+      return regeneratorRuntime.wrap(function _callee22$(_context22) {
+        while (1) {
+          switch (_context22.prev = _context22.next) {
+            case 0:
+              ON_SUBMIT = function ON_SUBMIT(type, payload, onSuccess, onError) {
+                onSuccess();
+              };
+
+              HOOKS = {
+                onSubmit: ON_SUBMIT
+              };
+              TASK_LIST_WITH_NO_TASK_CYAS = JSON.parse(JSON.stringify(_taskList.default));
+              TASK_LIST_WITH_NO_TASK_CYAS.hub.noTaskCYAs = true;
+              TASK_LIST_WITH_NO_TASK_CYAS.pages[1].actions[0] = {
+                type: 'save',
+                complete: true
+              };
+              _context22.next = 7;
+              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee21() {
+                return regeneratorRuntime.wrap(function _callee21$(_context21) {
+                  while (1) {
+                    switch (_context21.prev = _context21.next) {
+                      case 0:
+                        (0, _reactDom.render)( /*#__PURE__*/_react2.default.createElement(_FormRenderer.default, _extends({}, TASK_LIST_WITH_NO_TASK_CYAS, {
+                          hooks: HOOKS
+                        })), container);
+
+                      case 1:
+                      case "end":
+                        return _context21.stop();
+                    }
+                  }
+                }, _callee21);
+              })));
+
+            case 7:
+              taskList = container.childNodes[0].childNodes[1]; // Launch first task
+
+              _react.fireEvent.click(taskList.childNodes[3].childNodes[0].childNodes[0].childNodes[0], {}); // Fill first page and navigate
+
+
+              newPage = container.childNodes[0].childNodes[0];
+
+              _react.fireEvent.change(newPage.childNodes[1].childNodes[2].childNodes[0].childNodes[1], {
+                target: {
+                  name: 'date-day',
+                  value: '7'
+                }
+              });
+
+              _react.fireEvent.change(newPage.childNodes[1].childNodes[2].childNodes[1].childNodes[1], {
+                target: {
+                  name: 'date-month',
+                  value: '7'
+                }
+              });
+
+              _react.fireEvent.change(newPage.childNodes[1].childNodes[2].childNodes[2].childNodes[1], {
+                target: {
+                  name: 'date-year',
+                  value: '2022'
+                }
+              });
+
+              _react.fireEvent.click(newPage.childNodes[2].childNodes[0], {}); // Fill second page
+
+
+              newPage = container.childNodes[0].childNodes[0];
+
+              _react.fireEvent.click(newPage.childNodes[1].childNodes[2].childNodes[0].childNodes[0], {});
+
+              _react.fireEvent.click(newPage.childNodes[2].childNodes[0], {}); // Launch same task again
+
+
+              _react.fireEvent.click(container.childNodes[0].childNodes[1].childNodes[3].childNodes[0].childNodes[0].childNodes[0], {}); // Should be on the second page
+
+
+              expect(container.childNodes[0].childNodes[0].childNodes[0].textContent).toEqual('Event Mode');
+
+            case 19:
+            case "end":
+              return _context22.stop();
+          }
+        }
+      }, _callee22);
+    })));
+    it('should handle cancellation from a page', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee24() {
+      var ON_CANCEL_CALLS, ON_CANCEL, HOOKS, form, hub, _hub$childNodes5, civilServantList, link, page, cancel;
+
+      return regeneratorRuntime.wrap(function _callee24$(_context24) {
+        while (1) {
+          switch (_context24.prev = _context24.next) {
+            case 0:
+              ON_CANCEL_CALLS = [];
+
+              ON_CANCEL = function ON_CANCEL() {
+                ON_CANCEL_CALLS.push(undefined);
+              };
+
+              HOOKS = {
+                onCancel: ON_CANCEL
+              };
+              _context24.next = 5;
+              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee23() {
+                return regeneratorRuntime.wrap(function _callee23$(_context23) {
+                  while (1) {
+                    switch (_context23.prev = _context23.next) {
+                      case 0:
+                        (0, _reactDom.render)( /*#__PURE__*/_react2.default.createElement(_FormRenderer.default, _extends({}, _userProfile.default, {
+                          data: _userProfileData.default,
+                          hooks: HOOKS
+                        })), container);
+
+                      case 1:
+                      case "end":
+                        return _context23.stop();
+                    }
+                  }
+                }, _callee23);
+              })));
+
+            case 5:
+              form = checkForm(container); // Navigate to the "Are you a civil servant?" page.
+
+              hub = form.childNodes[1]; // Hub = CYA
+
+              _hub$childNodes5 = _slicedToArray(hub.childNodes, 3), civilServantList = _hub$childNodes5[2];
+              link = getChangeLink(civilServantList);
+
+              _react.fireEvent.click(link, {}); // Should already be answered "Yes", so simply click "Continue".
+
+
+              page = form.childNodes[0];
+              cancel = getCancelButton(page);
+              expect(ON_CANCEL_CALLS.length).toEqual(0);
+
+              _react.fireEvent.click(cancel, {});
+
+              expect(ON_CANCEL_CALLS.length).toEqual(1);
+
+            case 15:
+            case "end":
+              return _context24.stop();
+          }
+        }
+      }, _callee24);
+    })));
   });
 });

package/dist/components/FormRenderer/helpers/getSubmissionStatus.js

@@ -13,22 +13,20 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var getSubmissionStatus = function getSubmissionStatus(formType, pages, currentPageId, action, formData, currentTask, isCompleted) {
   if (formType === _models.FormTypes.TASK) {
-    var formStatus = formData.formStatus ? formData.formStatus : {};
-    formStatus.tasks = formStatus.tasks ? formStatus.tasks : {};
-    formStatus.tasks[currentTask.name] = formStatus.tasks[currentTask.name] ? formStatus.tasks[currentTask.name] : {};
+    var formStatus = formData.formStatus || {};
+    formStatus.tasks = formStatus.tasks || {};
+    formStatus.tasks[currentTask.name] = formStatus.tasks[currentTask.name] || {};
 
     if (currentPageId === (_models.FormPages.CYA || 'submitForm') && isCompleted) {
       formStatus.tasks[currentTask.name].complete = true;
     } else if ((action === null || action === void 0 ? void 0 : action.type) === _models.PageAction.TYPES.SAVE_AND_NAVIGATE) {
-      console.log('pg action sc');
       formStatus.tasks[currentTask.name] = {
         complete: false,
         currentPage: (0, _getNextPageId.default)(formType, pages, currentPageId, action, formData)
       };
     } else {
-      console.log('got to else stmt');
       formStatus.tasks[currentTask.name] = {
-        complete: false,
+        complete: !!(action !== null && action !== void 0 && action.complete),
         currentPage: currentPageId
       };
     }

package/dist/components/FormRenderer/helpers/getSubmissionStatus.test.js

@@ -240,6 +240,21 @@ describe('components', function () {
               })
             });
           });
+          it("should mark the current task as complete if the action indicates as much", function () {
+            var CURRENT_PAGE_ID = PAGES[0].id;
+            var TASK_NAME = 'taskName';
+            var CURRENT_TASK = {
+              name: TASK_NAME
+            };
+            var ACTION = {
+              complete: true
+            };
+            expect((0, _getSubmissionStatus.default)(FORM_TYPE, PAGES, CURRENT_PAGE_ID, ACTION, {}, CURRENT_TASK, true)).toMatchObject({
+              tasks: _defineProperty({}, TASK_NAME, {
+                complete: true
+              })
+            });
+          });
         });
       });
     });

package/dist/components/TaskList/Task.js

@@ -81,7 +81,7 @@ Task.propTypes = {
   task: _propTypes.default.shape({
     name: _propTypes.default.string.isRequired,
     pages: _propTypes.default.array.isRequired,
-    state: _propTypes.default.string.isRequired
+    state: _propTypes.default.string
   }).isRequired,
   onClick: _propTypes.default.func.isRequired
 };

package/dist/components/TaskList/TaskList.js

@@ -100,7 +100,7 @@ TaskList.propTypes = {
     tasks: _propTypes.default.arrayOf(_propTypes.default.shape({
       name: _propTypes.default.string.isRequired,
       pages: _propTypes.default.array.isRequired,
-      state: _propTypes.default.string.isRequired
+      state: _propTypes.default.string
     })).isRequired
   })).isRequired,
   classBlock: _propTypes.default.string,

package/dist/components/TaskList/TaskState.js

@@ -25,18 +25,18 @@ var TaskState = function TaskState(_ref) {
 
   var classes = _copReactComponents.Utils.classBuilder(DEFAULT_CLASS, undefined, undefined);
 
-  if (!_models.TaskStates.DETAILS[state]) {
-    return null;
-  }
-
+  var details = _models.TaskStates.DETAILS[state] || _models.TaskStates.DETAILS.cannotStartYet;
   return /*#__PURE__*/_react.default.createElement(_copReactComponents.Tag, {
-    classModifiers: [_models.TaskStates.DETAILS[state].colour],
+    classModifiers: details.colour,
     className: classes('tag')
-  }, _models.TaskStates.DETAILS[state].label);
+  }, details.label);
 };
 
 TaskState.propTypes = {
-  state: _propTypes.default.string.isRequired
+  state: _propTypes.default.string
+};
+TaskState.defaultProps = {
+  state: _models.TaskStates.TYPES.CANNOT_START_YET
 };
 var _default = TaskState;
 exports.default = _default;

package/dist/components/TaskList/TaskState.test.js

@@ -14,6 +14,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // Local imports
 describe('components', function () {
   describe('TaskList.TaskState', function () {
+    var checkIsCannotStartYet = function checkIsCannotStartYet(container) {
+      expect(container.childNodes.length).toEqual(1);
+      expect(container.childNodes[0].classList).toContain('hods-tag');
+      expect(container.childNodes[0].classList).toContain("hods-tag--".concat(_models.TaskStates.DETAILS.cannotStartYet.colour));
+      expect(container.childNodes[0].textContent).toEqual(_models.TaskStates.DETAILS.cannotStartYet.label);
+      return true;
+    };
+
     it('should render a complete state icon', function () {
       var STATE = _models.TaskStates.TYPES.COMPLETE;
 
@@ -60,12 +68,9 @@ describe('components', function () {
       })),
           container = _render4.container;
 
-      expect(container.childNodes.length).toEqual(1);
-      expect(container.childNodes[0].classList).toContain('hods-tag');
-      expect(container.childNodes[0].classList).toContain("hods-tag--".concat(_models.TaskStates.DETAILS.cannotStartYet.colour));
-      expect(container.childNodes[0].textContent).toEqual(_models.TaskStates.DETAILS.cannotStartYet.label);
+      expect(checkIsCannotStartYet(container)).toBeTruthy();
     });
-    it('should not render a state if given an unknown value', function () {
+    it('should render the "Cannot start yet" state if given an unknown value', function () {
       var STATE = 'spellingError';
 
       var _render5 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskState.default, {
@@ -73,9 +78,9 @@ describe('components', function () {
       })),
           container = _render5.container;
 
-      expect(container.childNodes.length).toEqual(0);
+      expect(checkIsCannotStartYet(container)).toBeTruthy();
     });
-    it('should not render a state if given null', function () {
+    it('should render the "Cannot start yet" state if given null', function () {
       var STATE = null;
 
       var _render6 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskState.default, {
@@ -83,9 +88,9 @@ describe('components', function () {
       })),
           container = _render6.container;
 
-      expect(container.childNodes.length).toEqual(0);
+      expect(checkIsCannotStartYet(container)).toBeTruthy();
     });
-    it('should not render a state if given undefined', function () {
+    it('should render the "Cannot start yet" state if given undefined', function () {
       var STATE = undefined;
 
       var _render7 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskState.default, {
@@ -93,7 +98,7 @@ describe('components', function () {
       })),
           container = _render7.container;
 
-      expect(container.childNodes.length).toEqual(0);
+      expect(checkIsCannotStartYet(container)).toBeTruthy();
     });
   });
 });

package/dist/context/HooksContext/HooksContext.js

@@ -45,7 +45,9 @@ var DEFAULT_HOOKS = {
   },
   onSubmit: function onSubmit(type, payload, onSuccess, onError) {
     if (typeof onSuccess === 'function') onSuccess();
-  }
+  },
+  onCancel: function onCancel() {} // Consuming application must provide function to action, else this does nothing.
+
 };
 var ALLOWED_HOOKS = Object.keys(DEFAULT_HOOKS);
 exports.ALLOWED_HOOKS = ALLOWED_HOOKS;
@@ -62,7 +64,8 @@ var HooksContextProvider = function HooksContextProvider(_ref) {
     onGetComponent: (overrides === null || overrides === void 0 ? void 0 : overrides.onGetComponent) || DEFAULT_HOOKS.onGetComponent,
     onPageChange: (overrides === null || overrides === void 0 ? void 0 : overrides.onPageChange) || DEFAULT_HOOKS.onPageChange,
     onRequest: (overrides === null || overrides === void 0 ? void 0 : overrides.onRequest) || DEFAULT_HOOKS.onRequest,
-    onSubmit: (overrides === null || overrides === void 0 ? void 0 : overrides.onSubmit) || DEFAULT_HOOKS.onSubmit
+    onSubmit: (overrides === null || overrides === void 0 ? void 0 : overrides.onSubmit) || DEFAULT_HOOKS.onSubmit,
+    onCancel: (overrides === null || overrides === void 0 ? void 0 : overrides.onCancel) || DEFAULT_HOOKS.onCancel
   }),
       _useState2 = _slicedToArray(_useState, 2),
       hooks = _useState2[0],

package/dist/json/userProfile.json

@@ -138,7 +138,7 @@
           "label": ""
         }
       ],
-      "actions": ["submit"],
+      "actions": ["submit", "cancel"],
       "cya_link": {
         "page": "civil-servant-status",
         "aria_suffix": "civil servant status"

package/dist/models/PageAction.js

@@ -9,12 +9,14 @@ var _DefaultPageActions;
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+var TYPE_CANCEL = 'cancel';
 var TYPE_NAVIGATE = 'navigate';
 var TYPE_SAVE_AND_CONTINUE = 'saveAndContinue';
 var TYPE_SAVE_AND_NAVIGATE = 'saveAndNavigate';
 var TYPE_SAVE_AND_RETURN = 'saveAndReturn';
 var TYPE_SUBMIT = 'submit';
 var PageActionTypes = {
+  CANCEL: TYPE_CANCEL,
   NAVIGATE: TYPE_NAVIGATE,
   SAVE_AND_CONTINUE: TYPE_SAVE_AND_CONTINUE,
   SAVE_AND_NAVIGATE: TYPE_SAVE_AND_NAVIGATE,
@@ -22,7 +24,12 @@ var PageActionTypes = {
   SUBMIT: TYPE_SUBMIT
 };
 exports.PageActionTypes = PageActionTypes;
-var DefaultPageActions = (_DefaultPageActions = {}, _defineProperty(_DefaultPageActions, TYPE_NAVIGATE, undefined), _defineProperty(_DefaultPageActions, TYPE_SAVE_AND_CONTINUE, {
+var DefaultPageActions = (_DefaultPageActions = {}, _defineProperty(_DefaultPageActions, TYPE_CANCEL, {
+  type: TYPE_CANCEL,
+  validate: false,
+  label: 'Cancel',
+  classModifiers: 'secondary'
+}), _defineProperty(_DefaultPageActions, TYPE_NAVIGATE, undefined), _defineProperty(_DefaultPageActions, TYPE_SAVE_AND_CONTINUE, {
   type: TYPE_SAVE_AND_CONTINUE,
   validate: true,
   label: 'Save and continue'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "3.12.0",
+  "version": "3.16.1-alpha",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",
@@ -16,7 +16,7 @@
     "post-compile": "rimraf dist/*.test.* dist/**/*.test.* dist/**/*.stories.* dist/docs dist/assets"
   },
   "dependencies": {
-    "@ukhomeoffice/cop-react-components": "1.10.0",
+    "@ukhomeoffice/cop-react-components": "1.12.0",
     "axios": "^0.23.0",
     "dayjs": "^1.11.0",
     "govuk-frontend": "^3.13.0",