@ukhomeoffice/cop-react-form-renderer 5.81.2 → 5.83.0

package/dist/components/CheckYourAnswers/CheckYourAnswers.js

@@ -165,7 +165,7 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
       });
       return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
         key: taskIndex
-      }, /*#__PURE__*/_react.default.createElement(_copReactComponents.MediumHeading, null, filterPages.length > 0 && task.displayName || task.name), filterPages.map(function (page, pageIndex) {
+      }, /*#__PURE__*/_react.default.createElement(_copReactComponents.MediumHeading, null, filterPages.length > 0 && (task.displayName || task.name)), filterPages.map(function (page, pageIndex) {
         var hideActionButtons = isGroup(page.id) || noChangeAction;
         var showHeading = !hide_page_titles && page.title && !isGroup(page.id);
         return /*#__PURE__*/_react.default.createElement(_react.Fragment, {

package/dist/components/CheckYourAnswers/CheckYourAnswers.test.js

@@ -527,23 +527,37 @@ describe('components', function () {
         }
       }, _callee20);
     })));
-    it('Show answers from multiple address fields into in one DL', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee22() {
-      var ADDRESS_DATA, GROUP_PAGES, cya, groupedComponent, keyGroup, valueGroup, changeButtonDiv, changeButton;
+    it('should show task list in CYA style and not show sections without any pages', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee22() {
+      var sections, taskHeading1, taskHeading2;
       return _regeneratorRuntime().wrap(function _callee22$(_context22) {
         while (1) switch (_context22.prev = _context22.next) {
           case 0:
-            ADDRESS_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({}, ADDRESS_DATA));
-            _context22.next = 4;
+            sections = [{
+              name: 'These are your tasks',
+              tasks: [{
+                name: 'Task 1',
+                displayName: 'Blue',
+                state: 'complete',
+                pages: []
+              }, {
+                name: 'Task 2',
+                displayName: 'Red',
+                state: 'complete',
+                pages: ['grade']
+              }]
+            }];
+            _context22.next = 3;
             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, _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:
                   case "end":
@@ -551,6 +565,41 @@ describe('components', function () {
                 }
               }, _callee21);
             })));
+          case 3:
+            taskHeading1 = container.childNodes[0].childNodes[0];
+            expect(taskHeading1.textContent).toEqual('');
+            taskHeading2 = container.childNodes[0].childNodes[1];
+            expect(taskHeading2.textContent).toEqual('Red');
+          case 7:
+          case "end":
+            return _context22.stop();
+        }
+      }, _callee22);
+    })));
+    it('Show answers from multiple address fields into in one DL', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee24() {
+      var ADDRESS_DATA, GROUP_PAGES, cya, groupedComponent, keyGroup, valueGroup, changeButtonDiv, changeButton;
+      return _regeneratorRuntime().wrap(function _callee24$(_context24) {
+        while (1) switch (_context24.prev = _context24.next) {
+          case 0:
+            ADDRESS_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({}, ADDRESS_DATA));
+            _context24.next = 4;
+            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, _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 _context23.stop();
+                }
+              }, _callee23);
+            })));
           case 4:
             cya = checkCYA(container);
             groupedComponent = cya.childNodes[10];
@@ -571,20 +620,20 @@ describe('components', function () {
             expect(changeButton.textContent).toEqual('Change address details');
           case 21:
           case "end":
-            return _context22.stop();
+            return _context24.stop();
         }
-      }, _callee22);
+      }, _callee24);
     })));
-    it('should render a group with one action button', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee24() {
+    it('should render a group with one action button', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee26() {
       var GROUP_PAGES, cya, namesGroup, firstNameRow, surname, changeButtonDiv, changeButton;
-      return _regeneratorRuntime().wrap(function _callee24$(_context24) {
-        while (1) switch (_context24.prev = _context24.next) {
+      return _regeneratorRuntime().wrap(function _callee26$(_context26) {
+        while (1) switch (_context26.prev = _context26.next) {
           case 0:
             GROUP_PAGES = _utils.default.FormPage.getAll(_groupOfRow.default.pages, _groupOfRow.default.components, _objectSpread({}, DATA));
-            _context24.next = 3;
-            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee23() {
-              return _regeneratorRuntime().wrap(function _callee23$(_context23) {
-                while (1) switch (_context23.prev = _context23.next) {
+            _context26.next = 3;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee25() {
+              return _regeneratorRuntime().wrap(function _callee25$(_context25) {
+                while (1) switch (_context25.prev = _context25.next) {
                   case 0:
                     (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                       pages: GROUP_PAGES,
@@ -594,9 +643,9 @@ describe('components', function () {
                     }), container);
                   case 1:
                   case "end":
-                    return _context23.stop();
+                    return _context25.stop();
                 }
-              }, _callee23);
+              }, _callee25);
             })));
           case 3:
             cya = checkCYA(container);
@@ -620,14 +669,14 @@ describe('components', function () {
             expect(changeButton.textContent).toEqual('Change names');
           case 22:
           case "end":
-            return _context24.stop();
+            return _context26.stop();
         }
-      }, _callee24);
+      }, _callee26);
     })));
-    it('should show page components corrently with interpolated title and cya_label, if label is missing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee26() {
+    it('should show page components corrently with interpolated title and cya_label, if label is missing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee28() {
       var _PAGES, _COMPONENTS, T_PAGES, cya, _cya$childNodes7, cyaTitle, cyaChildNode, names, _names$childNodes3, firstName, surname, _firstName$childNodes, label;
-      return _regeneratorRuntime().wrap(function _callee26$(_context26) {
-        while (1) switch (_context26.prev = _context26.next) {
+      return _regeneratorRuntime().wrap(function _callee28$(_context28) {
+        while (1) switch (_context28.prev = _context28.next) {
           case 0:
             _PAGES = [].concat(_userProfile.default.pages); // eslint-disable-next-line no-template-curly-in-string
             _PAGES[0] = _objectSpread(_objectSpread({}, _PAGES[0]), {}, {
@@ -641,10 +690,10 @@ describe('components', function () {
               cya_label: "Text ${currentUser.familyName}"
             });
             T_PAGES = _utils.default.FormPage.getAll(_PAGES, _COMPONENTS, DATA);
-            _context26.next = 7;
-            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee25() {
-              return _regeneratorRuntime().wrap(function _callee25$(_context25) {
-                while (1) switch (_context25.prev = _context25.next) {
+            _context28.next = 7;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee27() {
+              return _regeneratorRuntime().wrap(function _callee27$(_context27) {
+                while (1) switch (_context27.prev = _context27.next) {
                   case 0:
                     (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                       pages: T_PAGES,
@@ -653,9 +702,9 @@ describe('components', function () {
                     }), container);
                   case 1:
                   case "end":
-                    return _context25.stop();
+                    return _context27.stop();
                 }
-              }, _callee25);
+              }, _callee27);
             })));
           case 7:
             cya = checkCYA(container);
@@ -670,14 +719,14 @@ describe('components', function () {
             checkRow(surname, 'Last name', 'Smith', false);
           case 17:
           case "end":
-            return _context26.stop();
+            return _context28.stop();
         }
-      }, _callee26);
+      }, _callee28);
     })));
-    it('should show page components corrently with no label, if label and cya_label are missing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee28() {
+    it('should show page components corrently with no label, if label and cya_label are missing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee30() {
       var _PAGES, _COMPONENTS, T_PAGES, cya, _cya$childNodes8, cyaChildNode, names, _names$childNodes4, firstName, surname, _firstName$childNodes2, label;
-      return _regeneratorRuntime().wrap(function _callee28$(_context28) {
-        while (1) switch (_context28.prev = _context28.next) {
+      return _regeneratorRuntime().wrap(function _callee30$(_context30) {
+        while (1) switch (_context30.prev = _context30.next) {
           case 0:
             _PAGES = [].concat(_userProfile.default.pages);
             _COMPONENTS = [].concat(_userProfile.default.components);
@@ -687,10 +736,10 @@ describe('components', function () {
               cya_label: undefined
             });
             T_PAGES = _utils.default.FormPage.getAll(_PAGES, _COMPONENTS, _objectSpread({}, DATA));
-            _context28.next = 6;
-            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee27() {
-              return _regeneratorRuntime().wrap(function _callee27$(_context27) {
-                while (1) switch (_context27.prev = _context27.next) {
+            _context30.next = 6;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee29() {
+              return _regeneratorRuntime().wrap(function _callee29$(_context29) {
+                while (1) switch (_context29.prev = _context29.next) {
                   case 0:
                     (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                       pages: T_PAGES,
@@ -699,9 +748,9 @@ describe('components', function () {
                     }), container);
                   case 1:
                   case "end":
-                    return _context27.stop();
+                    return _context29.stop();
                 }
-              }, _callee27);
+              }, _callee29);
             })));
           case 6:
             cya = checkCYA(container);
@@ -715,14 +764,14 @@ describe('components', function () {
             checkRow(surname, 'Last name', 'Smith', false);
           case 15:
           case "end":
-            return _context28.stop();
+            return _context30.stop();
         }
-      }, _callee28);
+      }, _callee30);
     })));
-    it('should show task list in CYA style and hide pages from skipped tasks', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee30() {
+    it('should show task list in CYA style and hide pages from skipped tasks', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee32() {
       var sections, taskHeading1, namesPageHeading;
-      return _regeneratorRuntime().wrap(function _callee30$(_context30) {
-        while (1) switch (_context30.prev = _context30.next) {
+      return _regeneratorRuntime().wrap(function _callee32$(_context32) {
+        while (1) switch (_context32.prev = _context32.next) {
           case 0:
             sections = [{
               name: 'These are your tasks',
@@ -736,10 +785,10 @@ describe('components', function () {
                 pages: ['grade']
               }]
             }];
-            _context30.next = 3;
-            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee29() {
-              return _regeneratorRuntime().wrap(function _callee29$(_context29) {
-                while (1) switch (_context29.prev = _context29.next) {
+            _context32.next = 3;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee31() {
+              return _regeneratorRuntime().wrap(function _callee31$(_context31) {
+                while (1) switch (_context31.prev = _context31.next) {
                   case 0:
                     (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                       pages: PAGES,
@@ -751,9 +800,9 @@ describe('components', function () {
                     }), container);
                   case 1:
                   case "end":
-                    return _context29.stop();
+                    return _context31.stop();
                 }
-              }, _callee29);
+              }, _callee31);
             })));
           case 3:
             taskHeading1 = container.childNodes[0].childNodes[0];
@@ -767,21 +816,21 @@ describe('components', function () {
             expect(container.childNodes[0].childNodes.length).toEqual(2); // second task skipped so not shown 
           case 12:
           case "end":
-            return _context30.stop();
+            return _context32.stop();
         }
-      }, _callee30);
+      }, _callee32);
     })));
-    it('Show answers from multiple address fields into in one DL correctly when hideBlankRows is true', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee32() {
+    it('Show answers from multiple address fields into in one DL correctly when hideBlankRows is true', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee34() {
       var ADDRESS_DATA, GROUP_PAGES, cya, groupedComponent, keyGroup, valueGroup, changeButtonDiv, changeButton;
-      return _regeneratorRuntime().wrap(function _callee32$(_context32) {
-        while (1) switch (_context32.prev = _context32.next) {
+      return _regeneratorRuntime().wrap(function _callee34$(_context34) {
+        while (1) switch (_context34.prev = _context34.next) {
           case 0:
             ADDRESS_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({}, ADDRESS_DATA));
-            _context32.next = 4;
-            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee31() {
-              return _regeneratorRuntime().wrap(function _callee31$(_context31) {
-                while (1) switch (_context31.prev = _context31.next) {
+            _context34.next = 4;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee33() {
+              return _regeneratorRuntime().wrap(function _callee33$(_context33) {
+                while (1) switch (_context33.prev = _context33.next) {
                   case 0:
                     (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                       pages: GROUP_PAGES,
@@ -792,9 +841,9 @@ describe('components', function () {
                     }), container);
                   case 1:
                   case "end":
-                    return _context31.stop();
+                    return _context33.stop();
                 }
-              }, _callee31);
+              }, _callee33);
             })));
           case 4:
             cya = checkCYA(container);
@@ -816,9 +865,9 @@ describe('components', function () {
             expect(changeButton.textContent).toEqual('Change address details');
           case 21:
           case "end":
-            return _context32.stop();
+            return _context34.stop();
         }
-      }, _callee32);
+      }, _callee34);
     })));
   });
 });

package/dist/components/FormRenderer/FormRenderer.js

@@ -352,6 +352,7 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
     onTaskAction: function onTaskAction(task) {
       (0, _onTaskAction2.default)(task, pages, setCurrentTask, hubDetails, data, onPageChange);
     },
+    annotations: (hubDetails === null || hubDetails === void 0 ? void 0 : hubDetails.taskListAnnotations) || [],
     formData: data
   })), formState.page && !formState.cya && !formState.page.collection && /*#__PURE__*/_react.default.createElement(_FormPage.default, {
     page: formState.page,

package/dist/components/TaskList/TaskList.js

@@ -12,7 +12,7 @@ var _models = require("../../models");
 var _Task = _interopRequireDefault(require("./Task"));
 var _showComponent = _interopRequireDefault(require("../../utils/Component/showComponent"));
 require("./TaskList.scss");
-var _excluded = ["id", "refTitle", "refNumber", "notes", "incompleteTitle", "sections", "fieldId", "onTaskAction", "classBlock", "classModifiers", "className", "formData"];
+var _excluded = ["id", "refTitle", "refNumber", "notes", "incompleteTitle", "showCompletionOverview", "sections", "fieldId", "onTaskAction", "classBlock", "classModifiers", "className", "formData", "annotations"];
 /* eslint-disable import/no-duplicates */
 // Global Imports
 // Local Imports
@@ -36,6 +36,7 @@ var TaskList = function TaskList(_ref) {
     refNumber = _ref.refNumber,
     notes = _ref.notes,
     incompleteTitle = _ref.incompleteTitle,
+    showCompletionOverview = _ref.showCompletionOverview,
     sections = _ref.sections,
     fieldId = _ref.fieldId,
     onTaskAction = _ref.onTaskAction,
@@ -43,6 +44,7 @@ var TaskList = function TaskList(_ref) {
     classModifiers = _ref.classModifiers,
     className = _ref.className,
     formData = _ref.formData,
+    annotations = _ref.annotations,
     attrs = _objectWithoutProperties(_ref, _excluded);
   var classes = _copReactComponents.Utils.classBuilder(classBlock, classModifiers, className);
   var cleanedHtmlAttrs = _copReactComponents.Utils.cleanHtmlAttributes(attrs);
@@ -78,11 +80,19 @@ var TaskList = function TaskList(_ref) {
     className: "tasklist-summary"
   }, "".concat(refTitle))), /*#__PURE__*/_react.default.createElement("p", {
     className: "govuk-body govuk-!-font-weight-regular"
-  }, "".concat(refNumber))), totalSections !== completeSections && /*#__PURE__*/_react.default.createElement("p", {
+  }, "".concat(refNumber))), annotations.length > 0 && annotations.map(function (annotation) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classes('annotation')
+    }, /*#__PURE__*/_react.default.createElement("p", {
+      className: "".concat(classes('annotation-key'), " govuk-body")
+    }, _copReactComponents.Utils.interpolateString(annotation.key, formData)), /*#__PURE__*/_react.default.createElement("p", {
+      className: "".concat(classes('annotation-value'), " govuk-body")
+    }, _copReactComponents.Utils.interpolateString(annotation.value, formData)));
+  }), showCompletionOverview && totalSections !== completeSections && /*#__PURE__*/_react.default.createElement("p", {
     className: "govuk-body govuk-!-margin-bottom-0"
   }, /*#__PURE__*/_react.default.createElement("strong", {
     className: "tasklist-summary"
-  }, incompleteTitle)), /*#__PURE__*/_react.default.createElement("p", {
+  }, incompleteTitle)), showCompletionOverview && /*#__PURE__*/_react.default.createElement("p", {
     className: "govuk-body govuk-!-margin-bottom-7"
   }, "You have completed ".concat(completeSections, " of ").concat(totalSections, " sections")), notesTitle && notesText && (0, _showComponent.default)(notes, formData) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
     className: "govuk-body govuk-!-margin-bottom-0"
@@ -121,6 +131,7 @@ TaskList.propTypes = {
   formData: _propTypes.default.shape({}),
   id: _propTypes.default.string,
   incompleteTitle: _propTypes.default.string,
+  showCompletionOverview: _propTypes.default.bool,
   notes: _propTypes.default.shape({
     title: _propTypes.default.string,
     text: _propTypes.default.string
@@ -139,7 +150,11 @@ TaskList.propTypes = {
       firstPage: _propTypes.default.string,
       alwaysShowFirstPage: _propTypes.default.bool
     })).isRequired
-  })).isRequired
+  })).isRequired,
+  annotations: _propTypes.default.arrayOf(_propTypes.default.shape({
+    key: _propTypes.default.string,
+    value: _propTypes.default.string
+  }))
 };
 TaskList.defaultProps = {
   classBlock: DEFAULT_CLASS,
@@ -149,9 +164,11 @@ TaskList.defaultProps = {
   formData: {},
   id: '',
   incompleteTitle: DEFAULT_INCOMPLETE_TITLE,
+  showCompletionOverview: true,
   notes: {},
   onTaskAction: undefined,
   refNumber: undefined,
-  refTitle: undefined
+  refTitle: undefined,
+  annotations: []
 };
 var _default = exports.default = TaskList;

package/dist/components/TaskList/TaskList.scss

@@ -58,6 +58,26 @@
   }
 }
 
+.hods-task-list__annotation {
+  display: flex;
+  flex-flow: row wrap;
+  margin-bottom: govuk-spacing(2);
+
+  .hods-task-list__annotation-key {
+    font-weight: bold;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-right: govuk-spacing(1)
+  }
+
+  .hods-task-list__annotation-value {
+    font-weight: normal;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+}
+
 .hods-task-list__task-name {
   display: block;
   cursor: auto;

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

@@ -101,6 +101,150 @@ describe('components', function () {
       expect(subSectionTwoLabel.textContent).toEqual('This is the label for your extra tasks');
       expect(subSectionTwoList.childNodes.length).toEqual(3);
     });
+    it('should not render the incomplete title and message when showCompletionOverview is false', function () {
+      var COP_REF = '123';
+      var REF_TITLE = 'COP reference number';
+      var sections = [{
+        name: 'These are your tasks',
+        label: 'This is the label for your first tasks',
+        tasks: [{
+          name: 'Nice task',
+          state: 'complete',
+          pages: ['pageOne']
+        }, {
+          name: 'Ok task',
+          state: 'inProgress',
+          pages: ['pageTwo']
+        }, {
+          name: 'Terrible task',
+          state: 'notStarted',
+          pages: ['pageThree']
+        }]
+      }, {
+        name: 'These are your extra bonus tasks',
+        label: 'This is the label for your extra tasks',
+        tasks: [{
+          name: 'Nice task',
+          state: 'complete',
+          pages: ['pageFour']
+        }, {
+          name: 'Ok task',
+          state: 'cannotStartYet',
+          pages: ['pageFive']
+        }, {
+          name: 'Terrible task',
+          state: 'cannotStartYet',
+          pages: ['pageSix']
+        }]
+      }];
+      var _render2 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
+          refNumber: COP_REF,
+          refTitle: REF_TITLE,
+          sections: sections,
+          showCompletionOverview: false
+        })),
+        container = _render2.container;
+      var childNodes = container.childNodes;
+      expect(childNodes.length).toEqual(1);
+      expect(childNodes[0].childNodes.length).toEqual(8); // Without incomplete heading and message.
+
+      var _childNodes$0$childNo2 = _slicedToArray(childNodes[0].childNodes, 8),
+        referenceHeading = _childNodes$0$childNo2[0],
+        referenceNumber = _childNodes$0$childNo2[1],
+        subSectionOneHeading = _childNodes$0$childNo2[2],
+        subSectionOneLabel = _childNodes$0$childNo2[3],
+        subSectionOneList = _childNodes$0$childNo2[4],
+        subSectionTwoHeading = _childNodes$0$childNo2[5],
+        subSectionTwoLabel = _childNodes$0$childNo2[6],
+        subSectionTwoList = _childNodes$0$childNo2[7];
+      expect(referenceHeading).toMatchObject({
+        tagName: 'P',
+        textContent: 'COP reference number'
+      });
+      expect(referenceNumber).toMatchObject({
+        tagName: 'P',
+        textContent: '123'
+      });
+      expect(subSectionOneHeading).toMatchObject({
+        tagName: 'H2',
+        textContent: '1. These are your tasks'
+      });
+      expect(subSectionOneLabel.textContent).toEqual('This is the label for your first tasks');
+      expect(subSectionOneList.childNodes.length).toEqual(3);
+      expect(subSectionTwoHeading).toMatchObject({
+        tagName: 'H2',
+        textContent: '2. These are your extra bonus tasks'
+      });
+      expect(subSectionTwoLabel.textContent).toEqual('This is the label for your extra tasks');
+      expect(subSectionTwoList.childNodes.length).toEqual(3);
+    });
+    it('should render any provided annotations', function () {
+      var COP_REF = '123';
+      var REF_TITLE = 'COP reference number';
+      var sections = [{
+        name: 'These are your tasks',
+        label: 'This is the label for your first tasks',
+        tasks: [{
+          name: 'Nice task',
+          state: 'complete',
+          pages: ['pageOne']
+        }, {
+          name: 'Ok task',
+          state: 'inProgress',
+          pages: ['pageTwo']
+        }, {
+          name: 'Terrible task',
+          state: 'notStarted',
+          pages: ['pageThree']
+        }]
+      }, {
+        name: 'These are your extra bonus tasks',
+        label: 'This is the label for your extra tasks',
+        tasks: [{
+          name: 'Nice task',
+          state: 'complete',
+          pages: ['pageFour']
+        }, {
+          name: 'Ok task',
+          state: 'cannotStartYet',
+          pages: ['pageFive']
+        }, {
+          name: 'Terrible task',
+          state: 'cannotStartYet',
+          pages: ['pageSix']
+        }]
+      }];
+      var FORM_DATA = {
+        port: {
+          name: 'Heathrow Airport'
+        }
+      };
+      var ANNOTATIONS = [{
+        key: 'Port',
+        // eslint-disable-next-line no-template-curly-in-string
+        value: '${port.name}'
+      }];
+      var _render3 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
+          refNumber: COP_REF,
+          refTitle: REF_TITLE,
+          sections: sections,
+          annotations: ANNOTATIONS,
+          formData: FORM_DATA
+        })),
+        container = _render3.container;
+      var childNodes = container.childNodes;
+      expect(childNodes.length).toEqual(1);
+      expect(childNodes[0].childNodes.length).toEqual(11);
+      var annotation = childNodes[0].childNodes[2];
+      expect(annotation.children[0]).toMatchObject({
+        tagName: 'P',
+        textContent: 'Port'
+      });
+      expect(annotation.childNodes[1]).toMatchObject({
+        tagName: 'P',
+        textContent: 'Heathrow Airport'
+      });
+    });
     it('should not show incomplete title if form is complete', function () {
       var COP_REF = '123';
       var REF_TITLE = 'COP reference number';
@@ -135,18 +279,18 @@ describe('components', function () {
           pages: ['pageSix']
         }]
       }];
-      var _render2 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
+      var _render4 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
           refNumber: COP_REF,
           refTitle: REF_TITLE,
           sections: sections
         })),
-        container = _render2.container;
+        container = _render4.container;
       var childNodes = container.childNodes;
       expect(childNodes[0].childNodes.length).toEqual(7);
-      var _childNodes$0$childNo2 = _slicedToArray(childNodes[0].childNodes, 3),
-        referenceHeading = _childNodes$0$childNo2[0],
-        referenceNumber = _childNodes$0$childNo2[1],
-        numComplete = _childNodes$0$childNo2[2];
+      var _childNodes$0$childNo3 = _slicedToArray(childNodes[0].childNodes, 3),
+        referenceHeading = _childNodes$0$childNo3[0],
+        referenceNumber = _childNodes$0$childNo3[1],
+        numComplete = _childNodes$0$childNo3[2];
       expect(referenceHeading).toMatchObject({
         tagName: 'P',
         textContent: 'COP reference number'
@@ -179,12 +323,12 @@ describe('components', function () {
           pages: ['pageThree']
         }]
       }];
-      var _render3 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
+      var _render5 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
           refNumber: COP_REF,
           refTitle: REF_TITLE,
           sections: sections
         })),
-        container = _render3.container;
+        container = _render5.container;
       var childNodes = container.childNodes;
       var subSectionOne = childNodes[0].childNodes[4];
       expect(subSectionOne.childNodes[0].textContent).toEqual('');
@@ -223,11 +367,11 @@ describe('components', function () {
           pages: ['pageSix']
         }]
       }];
-      var _render4 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
+      var _render6 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
           refNumber: COP_REF,
           sections: sections
         })),
-        container = _render4.container;
+        container = _render6.container;
       var childNodes = container.childNodes;
       expect(childNodes.length).toEqual(1);
       expect(childNodes[0].childNodes.length).toEqual(6);
@@ -273,12 +417,12 @@ describe('components', function () {
           pages: ['pageSix']
         }]
       }];
-      var _render5 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
+      var _render7 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
           refNumber: COP_REF,
           sections: sections,
           incompleteTitle: INCOMPLETE_TITLE
         })),
-        container = _render5.container;
+        container = _render7.container;
       var childNodes = container.childNodes;
       // The first child is now the incomplete text.
       var incompleteForm = childNodes[0].childNodes[0];
@@ -319,12 +463,12 @@ describe('components', function () {
           pages: ['pageSix']
         }]
       }];
-      var _render6 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
+      var _render8 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
           refNumber: COP_REF,
           sections: sections,
           incompleteTitle: INCOMPLETE_TITLE
         })),
-        container = _render6.container;
+        container = _render8.container;
       var childNodes = container.childNodes;
       expect(childNodes.length).toEqual(1);
       var children = childNodes[0].childNodes;
@@ -357,13 +501,13 @@ describe('components', function () {
         pages: ['pageThree']
       }]
     }];
-    var _render7 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
+    var _render9 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
         refNumber: COP_REF,
         refTitle: REF_TITLE,
         sections: sections,
         onTaskAction: ON_CLICK
       })),
-      container = _render7.container;
+      container = _render9.container;
     var taskList = container.childNodes[0].childNodes[5].childNodes;
     var firstTask = taskList[0].childNodes[0].childNodes[0];
     var secondTask = taskList[1].childNodes[0].childNodes[0];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "5.81.2",
+  "version": "5.83.0",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",