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

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", "sections", "fieldId", "onTaskAction", "classBlock", "classModifiers", "className", "formData", "annotations"];
 /* eslint-disable import/no-duplicates */
 // Global Imports
 // Local Imports
@@ -43,6 +43,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,7 +79,15 @@ 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)));
+  }), totalSections !== completeSections && /*#__PURE__*/_react.default.createElement("p", {
     className: "govuk-body govuk-!-margin-bottom-0"
   }, /*#__PURE__*/_react.default.createElement("strong", {
     className: "tasklist-summary"
@@ -139,7 +148,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,
@@ -152,6 +165,7 @@ TaskList.defaultProps = {
   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,73 @@ describe('components', function () {
       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 _render2 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
+          refNumber: COP_REF,
+          refTitle: REF_TITLE,
+          sections: sections,
+          annotations: ANNOTATIONS,
+          formData: FORM_DATA
+        })),
+        container = _render2.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,12 +202,12 @@ describe('components', function () {
           pages: ['pageSix']
         }]
       }];
-      var _render2 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
+      var _render3 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
           refNumber: COP_REF,
           refTitle: REF_TITLE,
           sections: sections
         })),
-        container = _render2.container;
+        container = _render3.container;
       var childNodes = container.childNodes;
       expect(childNodes[0].childNodes.length).toEqual(7);
       var _childNodes$0$childNo2 = _slicedToArray(childNodes[0].childNodes, 3),
@@ -179,12 +246,12 @@ describe('components', function () {
           pages: ['pageThree']
         }]
       }];
-      var _render3 = (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 = _render3.container;
+        container = _render4.container;
       var childNodes = container.childNodes;
       var subSectionOne = childNodes[0].childNodes[4];
       expect(subSectionOne.childNodes[0].textContent).toEqual('');
@@ -223,11 +290,11 @@ describe('components', function () {
           pages: ['pageSix']
         }]
       }];
-      var _render4 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
+      var _render5 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
           refNumber: COP_REF,
           sections: sections
         })),
-        container = _render4.container;
+        container = _render5.container;
       var childNodes = container.childNodes;
       expect(childNodes.length).toEqual(1);
       expect(childNodes[0].childNodes.length).toEqual(6);
@@ -273,12 +340,12 @@ describe('components', function () {
           pages: ['pageSix']
         }]
       }];
-      var _render5 = (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,
           incompleteTitle: INCOMPLETE_TITLE
         })),
-        container = _render5.container;
+        container = _render6.container;
       var childNodes = container.childNodes;
       // The first child is now the incomplete text.
       var incompleteForm = childNodes[0].childNodes[0];
@@ -319,12 +386,12 @@ describe('components', function () {
           pages: ['pageSix']
         }]
       }];
-      var _render6 = (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 = _render6.container;
+        container = _render7.container;
       var childNodes = container.childNodes;
       expect(childNodes.length).toEqual(1);
       var children = childNodes[0].childNodes;
@@ -357,13 +424,13 @@ describe('components', function () {
         pages: ['pageThree']
       }]
     }];
-    var _render7 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
+    var _render8 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
         refNumber: COP_REF,
         refTitle: REF_TITLE,
         sections: sections,
         onTaskAction: ON_CLICK
       })),
-      container = _render7.container;
+      container = _render8.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.82.0",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",