@ukhomeoffice/cop-react-form-renderer 3.11.1-alpha → 3.15.0

package/dist/components/CheckYourAnswers/CheckYourAnswers.js

@@ -67,7 +67,9 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
       hide_title = _ref.hide_title,
       summaryListClassModifiers = _ref.summaryListClassModifiers,
       noChangeAction = _ref.noChangeAction,
-      groups = _ref.groups;
+      groups = _ref.groups,
+      sections = _ref.sections,
+      type = _ref.type;
 
   var _useState = (0, _react.useState)([]),
       _useState2 = _slicedToArray(_useState, 2),
@@ -145,7 +147,31 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
     key: "heading"
   }, title), errors && errors.length > 0 && /*#__PURE__*/_react.default.createElement(_copReactComponents.ErrorSummary, {
     errors: errors
-  }), pages && pages.map(function (page, pageIndex, array) {
+  }), type === 'task-list-cya' && pages.length > 0 && sections && sections.map(function (section) {
+    return section.tasks.map(function (task) {
+      var filterPages = pages.filter(function (page) {
+        return task.pages.some(function (p) {
+          return p === page.name;
+        });
+      });
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h3", {
+        className: "govuk-heading-m govuk-!-margin-top-8 govuk-!-margin-bottom-0"
+      }, filterPages.length > 0 && task.name), filterPages.map(function (page, pageIndex, array) {
+        var hideActionButtons;
+        isGroup(page.id) ? hideActionButtons = true : hideActionButtons = noChangeAction;
+        return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+          key: pageIndex
+        }, !hide_page_titles && page.title && !isGroup(page.id) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h4", {
+          className: "govuk-heading-m govuk-!-margin-top-6 govuk-!-margin-bottom-5"
+        }, _utils.default.interpolateString(page.title, page.formData))), /*#__PURE__*/_react.default.createElement(_SummaryList.default, {
+          rows: page.rows,
+          classModifiers: summaryListClassModifiers,
+          noChangeAction: hideActionButtons,
+          isGroup: isGroup(page.id)
+        }));
+      }));
+    });
+  }), type !== 'task-list-cya' && pages && pages.map(function (page, pageIndex, array) {
     var pageMarginBottom = isLastPage(pageIndex) || isGroup(array[pageIndex].id) || isGroup(array[pageIndex + 1].id) ? DEFAULT_MARGIN_BOTTOM : listMarginBottom;
     var currentGroup;
     isGroup(page.id) && (currentGroup = getGroupForPage(page.id));
@@ -181,7 +207,16 @@ CheckYourAnswers.propTypes = {
   hide_actions: _propTypes.default.bool,
   hide_title: _propTypes.default.bool,
   summaryListClassModifiers: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
-  noChangeAction: _propTypes.default.bool
+  noChangeAction: _propTypes.default.bool,
+  sections: _propTypes.default.arrayOf(_propTypes.default.shape({
+    name: _propTypes.default.string.isRequired,
+    tasks: _propTypes.default.arrayOf(_propTypes.default.shape({
+      name: _propTypes.default.string.isRequired,
+      pages: _propTypes.default.array.isRequired,
+      state: _propTypes.default.string.isRequired
+    })).isRequired
+  })),
+  type: _propTypes.default.string
 };
 CheckYourAnswers.defaultProps = {
   title: DEFAULT_TITLE,
@@ -189,7 +224,8 @@ CheckYourAnswers.defaultProps = {
   hide_actions: false,
   hide_title: false,
   summaryListClassModifiers: null,
-  noChangeAction: false
+  noChangeAction: false,
+  sections: []
 };
 var _default = CheckYourAnswers;
 exports.default = _default;

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/CheckYourAnswers/CheckYourAnswers.test.js

@@ -384,25 +384,37 @@ describe('components', function () {
         }
       }, _callee12);
     })));
-    it('Show answers from multiple address fields into in one DL', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee14() {
-      var DATA, GROUP_PAGES, cya, groupedComponent, keyGroup, valueGroup, changeButtonDiv, changeButton;
+    it('should show task list in CYA style', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee14() {
+      var sections, taskHeading1, namesPageHeading, taskHeading2, gradePageHeading;
       return regeneratorRuntime.wrap(function _callee14$(_context14) {
         while (1) {
           switch (_context14.prev = _context14.next) {
             case 0:
-              DATA = _utils.default.Data.setupForm(_group.default.pages, _group.default.components, _groupData.default);
-              GROUP_PAGES = _utils.default.FormPage.getAll(_group.default.pages, _group.default.components, _objectSpread({}, DATA));
-              _context14.next = 4;
+              sections = [{
+                name: 'These are your tasks',
+                tasks: [{
+                  name: 'Task 1',
+                  state: 'complete',
+                  pages: ['names']
+                }, {
+                  name: 'Task 2',
+                  state: 'complete',
+                  pages: ['grade']
+                }]
+              }];
+              _context14.next = 3;
               return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee13() {
                 return regeneratorRuntime.wrap(function _callee13$(_context13) {
                   while (1) {
                     switch (_context13.prev = _context13.next) {
                       case 0:
                         (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
-                          pages: GROUP_PAGES,
+                          pages: PAGES,
                           onRowAction: ON_ROW_ACTION,
                           onAction: ON_ACTION,
-                          hide_title: true
+                          hide_title: true,
+                          sections: sections,
+                          type: "task-list-cya"
                         }), container);
 
                       case 1:
@@ -413,6 +425,63 @@ describe('components', function () {
                 }, _callee13);
               })));
 
+            case 3:
+              taskHeading1 = container.childNodes[0].childNodes[0];
+              expect(taskHeading1.tagName).toEqual('H3');
+              expect(taskHeading1.textContent).toEqual('Task 1');
+              expect(taskHeading1.classList).toContain("govuk-!-margin-top-8");
+              expect(taskHeading1.classList).toContain("govuk-!-margin-bottom-0");
+              namesPageHeading = container.childNodes[0].childNodes[1];
+              expect(namesPageHeading.tagName).toEqual('DIV');
+              expect(namesPageHeading.textContent).toContain('John');
+              expect(namesPageHeading.classList).toContain("group-of-rows");
+              taskHeading2 = container.childNodes[0].childNodes[2];
+              expect(taskHeading2.tagName).toEqual('H3');
+              expect(taskHeading2.textContent).toEqual('Task 2');
+              expect(taskHeading2.classList).toContain("govuk-!-margin-top-8");
+              expect(taskHeading2.classList).toContain("govuk-!-margin-bottom-0");
+              gradePageHeading = container.childNodes[0].childNodes[3];
+              expect(gradePageHeading.tagName).toEqual('H4');
+              expect(gradePageHeading.textContent).toEqual("What's your grade?");
+              expect(gradePageHeading.classList).toContain("govuk-!-margin-top-6");
+              expect(gradePageHeading.classList).toContain("govuk-!-margin-bottom-5");
+
+            case 22:
+            case "end":
+              return _context14.stop();
+          }
+        }
+      }, _callee14);
+    })));
+    it('Show answers from multiple address fields into in one DL', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee16() {
+      var DATA, GROUP_PAGES, cya, groupedComponent, keyGroup, valueGroup, changeButtonDiv, changeButton;
+      return regeneratorRuntime.wrap(function _callee16$(_context16) {
+        while (1) {
+          switch (_context16.prev = _context16.next) {
+            case 0:
+              DATA = _utils.default.Data.setupForm(_group.default.pages, _group.default.components, _groupData.default);
+              GROUP_PAGES = _utils.default.FormPage.getAll(_group.default.pages, _group.default.components, _objectSpread({}, DATA));
+              _context16.next = 4;
+              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee15() {
+                return regeneratorRuntime.wrap(function _callee15$(_context15) {
+                  while (1) {
+                    switch (_context15.prev = _context15.next) {
+                      case 0:
+                        (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
+                          pages: GROUP_PAGES,
+                          onRowAction: ON_ROW_ACTION,
+                          onAction: ON_ACTION,
+                          hide_title: true
+                        }), container);
+
+                      case 1:
+                      case "end":
+                        return _context15.stop();
+                    }
+                  }
+                }, _callee15);
+              })));
+
             case 4:
               cya = checkCYA(container);
               groupedComponent = cya.childNodes[10];
@@ -434,23 +503,23 @@ describe('components', function () {
 
             case 21:
             case "end":
-              return _context14.stop();
+              return _context16.stop();
           }
         }
-      }, _callee14);
+      }, _callee16);
     })));
-    it('should render a group with one action button', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee16() {
+    it('should render a group with one action button', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee18() {
       var GROUP_PAGES, cya, namesGroup, firstNameRow, surname, changeButtonDiv, changeButton;
-      return regeneratorRuntime.wrap(function _callee16$(_context16) {
+      return regeneratorRuntime.wrap(function _callee18$(_context18) {
         while (1) {
-          switch (_context16.prev = _context16.next) {
+          switch (_context18.prev = _context18.next) {
             case 0:
               GROUP_PAGES = _utils.default.FormPage.getAll(_groupOfRow.default.pages, _groupOfRow.default.components, _objectSpread({}, DATA));
-              _context16.next = 3;
-              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee15() {
-                return regeneratorRuntime.wrap(function _callee15$(_context15) {
+              _context18.next = 3;
+              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee17() {
+                return regeneratorRuntime.wrap(function _callee17$(_context17) {
                   while (1) {
-                    switch (_context15.prev = _context15.next) {
+                    switch (_context17.prev = _context17.next) {
                       case 0:
                         (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                           pages: GROUP_PAGES,
@@ -461,10 +530,10 @@ describe('components', function () {
 
                       case 1:
                       case "end":
-                        return _context15.stop();
+                        return _context17.stop();
                     }
                   }
-                }, _callee15);
+                }, _callee17);
               })));
 
             case 3:
@@ -490,17 +559,17 @@ describe('components', function () {
 
             case 22:
             case "end":
-              return _context16.stop();
+              return _context18.stop();
           }
         }
-      }, _callee16);
+      }, _callee18);
     })));
-    it('should show page components corrently with interpolated title and cya_label, if label is missing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee18() {
+    it('should show page components corrently with interpolated title and cya_label, if label is missing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee20() {
       var _PAGES, _COMPONENTS, T_PAGES, cya, _cya$childNodes5, cyaTitle, cyaChildNode, names, _names$childNodes3, firstName, surname, _firstName$childNodes, label;
 
-      return regeneratorRuntime.wrap(function _callee18$(_context18) {
+      return regeneratorRuntime.wrap(function _callee20$(_context20) {
         while (1) {
-          switch (_context18.prev = _context18.next) {
+          switch (_context20.prev = _context20.next) {
             case 0:
               _PAGES = [].concat(_userProfile.default.pages); // eslint-disable-next-line no-template-curly-in-string
 
@@ -515,11 +584,11 @@ describe('components', function () {
                 cya_label: "Text ${currentUser.familyName}"
               });
               T_PAGES = _utils.default.FormPage.getAll(_PAGES, _COMPONENTS, DATA);
-              _context18.next = 7;
-              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee17() {
-                return regeneratorRuntime.wrap(function _callee17$(_context17) {
+              _context20.next = 7;
+              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee19() {
+                return regeneratorRuntime.wrap(function _callee19$(_context19) {
                   while (1) {
-                    switch (_context17.prev = _context17.next) {
+                    switch (_context19.prev = _context19.next) {
                       case 0:
                         (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                           pages: T_PAGES,
@@ -529,10 +598,10 @@ describe('components', function () {
 
                       case 1:
                       case "end":
-                        return _context17.stop();
+                        return _context19.stop();
                     }
                   }
-                }, _callee17);
+                }, _callee19);
               })));
 
             case 7:
@@ -549,17 +618,17 @@ describe('components', function () {
 
             case 17:
             case "end":
-              return _context18.stop();
+              return _context20.stop();
           }
         }
-      }, _callee18);
+      }, _callee20);
     })));
-    it('should show page components corrently with no label, if label and cya_label are missing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee20() {
+    it('should show page components corrently with no label, if label and cya_label are missing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee22() {
       var _PAGES, _COMPONENTS, T_PAGES, cya, _cya$childNodes6, cyaChildNode, names, _names$childNodes4, firstName, surname, _firstName$childNodes2, label;
 
-      return regeneratorRuntime.wrap(function _callee20$(_context20) {
+      return regeneratorRuntime.wrap(function _callee22$(_context22) {
         while (1) {
-          switch (_context20.prev = _context20.next) {
+          switch (_context22.prev = _context22.next) {
             case 0:
               _PAGES = [].concat(_userProfile.default.pages);
               _COMPONENTS = [].concat(_userProfile.default.components);
@@ -569,11 +638,11 @@ describe('components', function () {
                 cya_label: undefined
               });
               T_PAGES = _utils.default.FormPage.getAll(_PAGES, _COMPONENTS, _objectSpread({}, DATA));
-              _context20.next = 6;
-              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee19() {
-                return regeneratorRuntime.wrap(function _callee19$(_context19) {
+              _context22.next = 6;
+              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee21() {
+                return regeneratorRuntime.wrap(function _callee21$(_context21) {
                   while (1) {
-                    switch (_context19.prev = _context19.next) {
+                    switch (_context21.prev = _context21.next) {
                       case 0:
                         (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                           pages: T_PAGES,
@@ -583,10 +652,10 @@ describe('components', function () {
 
                       case 1:
                       case "end":
-                        return _context19.stop();
+                        return _context21.stop();
                     }
                   }
-                }, _callee19);
+                }, _callee21);
               })));
 
             case 6:
@@ -602,10 +671,10 @@ describe('components', function () {
 
             case 15:
             case "end":
-              return _context20.stop();
+              return _context22.stop();
           }
         }
-      }, _callee20);
+      }, _callee22);
     })));
   });
 });

package/dist/components/FormComponent/FormComponent.js

@@ -68,7 +68,7 @@ var FormComponent = function FormComponent(_ref) {
 
   var validation = (0, _hooks.useValidation)();
 
-  var _useRefData = (0, _hooks.useRefData)(component),
+  var _useRefData = (0, _hooks.useRefData)(component, formData),
       data = _useRefData.data,
       status = _useRefData.status;
 

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.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/FormRenderer/FormRenderer.js

@@ -73,7 +73,8 @@ var FormRenderer = function FormRenderer(_ref) {
       className = _ref.className,
       hide_title = _ref.hide_title,
       summaryListClassModifiers = _ref.summaryListClassModifiers,
-      noChangeAction = _ref.noChangeAction;
+      noChangeAction = _ref.noChangeAction,
+      newPageId = _ref.newPageId;
   return /*#__PURE__*/_react.default.createElement(_context.HooksContextProvider, {
     overrides: hooks
   }, /*#__PURE__*/_react.default.createElement(_context.ValidationContextProvider, null, /*#__PURE__*/_react.default.createElement(InternalFormRenderer, {
@@ -89,7 +90,8 @@ var FormRenderer = function FormRenderer(_ref) {
     className: className,
     hide_title: hide_title,
     summaryListClassModifiers: summaryListClassModifiers,
-    noChangeAction: noChangeAction
+    noChangeAction: noChangeAction,
+    newPageId: newPageId
   })));
 };
 
@@ -109,7 +111,8 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
       className = _ref2.className,
       hide_title = _ref2.hide_title,
       summaryListClassModifiers = _ref2.summaryListClassModifiers,
-      noChangeAction = _ref2.noChangeAction;
+      noChangeAction = _ref2.noChangeAction,
+      newPageId = _ref2.newPageId;
 
   // Set up the initial states.
   var _useState = (0, _react.useState)({}),
@@ -240,13 +243,21 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
     clearErrors();
     setPageId(newPageId);
     hooks.onPageChange(newPageId);
-  }; // Handle actions from pages.
+  };
 
+  (0, _react.useEffect)(function () {
+    if (newPageId !== undefined) setPageId(newPageId);
+  }, [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.
 
@@ -312,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]);
       }
@@ -382,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);
@@ -399,7 +419,9 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
     onRowAction: onCYARowAction,
     summaryListClassModifiers: summaryListClassModifiers,
     hide_title: hide_title,
-    noChangeAction: noChangeAction
+    noChangeAction: noChangeAction,
+    sections: typeof hubDetails !== 'undefined' ? hubDetails.sections : [],
+    type: type
   })), hub === _models.HubFormats.TASK && formState.pageId === _models.FormPages.HUB && /*#__PURE__*/_react.default.createElement(_TaskList.default, {
     sections: hubDetails.sections,
     refNumber: data['businessKey'],
@@ -415,7 +437,7 @@ FormRenderer.propTypes = InternalFormRenderer.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.TASK, _models.FormTypes.WIZARD]).isRequired,
+  type: _propTypes.default.oneOf([_models.FormTypes.CYA, _models.FormTypes.FORM, _models.FormTypes.HUB, _models.FormTypes.TASK, _models.FormTypes.WIZARD, _models.FormTypes.TASKCYA]).isRequired,
   components: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
   pages: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
   hub: _propTypes.default.object,

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/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/hooks/useRefData.js

@@ -33,6 +33,12 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+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; }
+
 var STATUS_LOADING = 'loading';
 exports.STATUS_LOADING = STATUS_LOADING;
 var STATUS_COMPLETE = 'complete';
@@ -48,8 +54,10 @@ var getRefDataUrl = function getRefDataUrl(component) {
   return undefined;
 };
 
-var useRefData = function useRefData(component) {
-  var url = getRefDataUrl(component);
+var useRefData = function useRefData(component, formData) {
+  var url = getRefDataUrl(_objectSpread(_objectSpread({}, component), {}, {
+    formData: formData
+  }));
 
   var _useGetRequest = (0, _useGetRequest2.default)(url),
       _status = _useGetRequest.status,

package/dist/json/group.json

@@ -11,7 +11,7 @@
       "label": "First name",
       "type": "input",
       "readonly": true,
-      "groupId": "addressDetails",
+      "groupid": "addressDetails",
       "source": {
         "field": "currentUser.givenName"
       }
@@ -22,7 +22,7 @@
       "label": "Last name",
       "type": "text",
       "readonly": true,
-      "groupId": "addressDetails",
+      "groupid": "addressDetails",
       "source": {
         "field": "currentUser.familyName"
       }
@@ -33,7 +33,7 @@
       "label": "Are you a civil servant?",
       "type": "radios",
       "required": true,
-      "groupId": "addressDetails",
+      "groupid": "addressDetails",
       "data": {
         "url": "${urls.refData}/areYouACivilServant"
       }
@@ -130,7 +130,7 @@
       "label": "Address",
       "type": "text",
       "required": true,
-      "groupId": "addressDetails",
+      "groupid": "addressDetails",
       "custom_errors": [
         {
           "type": "required",
@@ -147,7 +147,7 @@
       "label": "City",
       "type": "text",
       "required": true,
-      "groupId": "addressDetails",
+      "groupid": "addressDetails",
       "custom_errors": [
         {
           "type": "required",
@@ -181,7 +181,7 @@
       "label": "Postcode",
       "type": "text",
       "required": true,
-      "groupId": "addressDetails",
+      "groupid": "addressDetails",
       "custom_errors": [
         {
           "type": "required",

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/FormTypes.js

@@ -9,12 +9,14 @@ var TYPE_CHECK_YOUR_ANSWERS = 'cya';
 var TYPE_HUB_AND_SPOKE = 'hub-and-spoke';
 var TYPE_TASK_LIST = 'task-list';
 var TYPE_WIZARD = 'wizard';
+var TYPE_TASK_LIST_CYA = 'task-list-cya';
 var FormTypes = {
   FORM: TYPE_FORM,
   CYA: TYPE_CHECK_YOUR_ANSWERS,
   HUB: TYPE_HUB_AND_SPOKE,
   TASK: TYPE_TASK_LIST,
-  WIZARD: TYPE_WIZARD
+  WIZARD: TYPE_WIZARD,
+  TASKCYA: TYPE_TASK_LIST_CYA
 };
 var _default = FormTypes;
 exports.default = _default;

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/dist/utils/CheckYourAnswers/getCYARowsForCollection.test.js

@@ -15,7 +15,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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('utils.CheckYourAnswers.getCYARowsForCollection', function () {
-  it('should get a single placeholder row when there are no items', function () {
+  it('should get a single entry point row when there are no items', function () {
     var FORM_DATA = undefined;
     var PAGE = {
       id: 'page',

package/dist/utils/Data/setupRefDataUrlForComponent.js

@@ -43,6 +43,10 @@ var setupRefDataUrlForComponent = function setupRefDataUrlForComponent(component
       return setupRefDataForCollection(component, data);
     }
 
+    if (component.type === _models.ComponentTypes.SELECT) {
+      return component;
+    }
+
     if (component.data && component.data.url) {
       return _objectSpread(_objectSpread({}, component), {}, {
         data: _objectSpread(_objectSpread({}, component.data), {}, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "3.11.1-alpha",
+  "version": "3.15.0",
   "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",