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

package/dist/components/CollectionSummary/SummaryCardDetails.js

@@ -168,7 +168,7 @@ var SummaryCardDetails = function SummaryCardDetails(_ref) {
         className: classes('section')
       }, !hideChildSectionTitles && /*#__PURE__*/_react.default.createElement("h3", {
         className: classes('section-title')
-      }, section.title), /*#__PURE__*/_react.default.createElement("div", {
+      }, _utils.default.FormPage.getConditionalText(section.title, _objectSpread(_objectSpread({}, childPage.formData), entryData))), /*#__PURE__*/_react.default.createElement("div", {
         className: classes('section-content'),
         style: {
           '--dividers': columns.length - 1

package/dist/components/CollectionSummary/SummaryCardDetails.test.js

@@ -156,16 +156,21 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
     expect(section1Content.textContent).toContain('subThreeLabel');
     expect(section1Content.textContent).toContain('charlie');
   });
-  it('should render sections containing collections based on summaryLayout config', function () {
+  it('should render sections containing collections with dynamic titles based on summaryLayout config', function () {
+    var FORM_DATA = {
+      dummyTitleContent: "Kellogg's"
+    };
     var CHILD_PAGES = [{
       summaryLayout: {
         sections: [{
-          title: 'Section 1',
+          // eslint-disable-next-line no-template-curly-in-string
+          title: 'Section 1 - ${dummyTitleContent}',
           columns: [{
             fields: ['collectionComponent']
           }]
         }]
       },
+      formData: FORM_DATA,
       components: [{
         fieldId: 'collectionComponent',
         id: 'collectionComponent',
@@ -221,17 +226,13 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
       })),
       container = _renderWithValidation3.container;
 
-    // Function to find an element by its text content
-    function getByTextContent(parent, text) {
-      return Array.from(parent.getElementsByClassName(classes('section-title'))).find(function (el) {
-        return el.textContent === text;
-      });
-    }
-
     // Check for section title
-    var section1Title = getByTextContent(container, 'Section 1');
+    var section1Title = container.querySelector(".".concat(classes('section-title')));
     expect(section1Title).not.toBeUndefined();
 
+    // Check for embedded variables in title
+    expect(section1Title.textContent).toEqual("Section 1 - Kellogg's");
+
     // All four subcomponents from the container should have labels and values displayed
     var section1Content = section1Title.parentNode.querySelector(".".concat(classes('section-content')));
     expect(section1Content.textContent).toContain('North');

package/dist/components/FormComponent/Container.js

@@ -11,6 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _models = require("../../models");
 var _utils = _interopRequireDefault(require("../../utils"));
 var _FormComponent = _interopRequireDefault(require("./FormComponent"));
+var _getSourceData = _interopRequireDefault(require("../../utils/Data/getSourceData"));
 var _excluded = ["container", "value", "formData", "onChange", "wrap", "onTopLevelChange"]; // Global imports
 // Local imports
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -58,7 +59,7 @@ var Container = function Container(_ref) {
     }
     return _utils.default.Component.show(_objectSpread(_objectSpread({}, options), {}, {
       full_path: fullPath
-    }), formData);
+    }), _objectSpread(_objectSpread({}, formData), (0, _getSourceData.default)(formData, container.full_path)));
   };
   var classes = _utils.default.classBuilder(DEFAULT_CLASS, [], container.className);
   var cleanedAttrs = _copReactComponents.Utils.cleanHtmlAttributes(attrs);

package/dist/components/FormComponent/Container.test.js

@@ -368,4 +368,73 @@ describe('components.FormComponent.Container', function () {
       }
     }, _callee7);
   })));
+  it('should render a container component appropriately with show_whens referencing other components in the container', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee8() {
+    var _ID2;
+    var TEXT_COMPONENT_CONDITIONAL, FORM_DATA_CONDITIONAL, CONTAINER, _renderWithValidation8, container, c, formGroup, label, input, formGroup2, label2, input2;
+    return _regeneratorRuntime().wrap(function _callee8$(_context8) {
+      while (1) switch (_context8.prev = _context8.next) {
+        case 0:
+          TEXT_COMPONENT_CONDITIONAL = {
+            id: 'textTwo',
+            fieldId: 'textTwo',
+            type: _models.ComponentTypes.TEXT,
+            label: 'Text component 2',
+            show_when: {
+              field: TEXT_ID,
+              op: '=',
+              value: 'other'
+            }
+          };
+          FORM_DATA_CONDITIONAL = _defineProperty({}, ID, (_ID2 = {}, _defineProperty(_ID2, TEXT_ID, 'other'), _defineProperty(_ID2, "textTwo", 'blue'), _ID2));
+          CONTAINER = {
+            id: ID,
+            fieldId: ID,
+            type: _models.ComponentTypes.CONTAINER,
+            components: [TEXT_COMPONENT, TEXT_COMPONENT_CONDITIONAL],
+            full_path: ID
+          };
+          _renderWithValidation8 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+            component: CONTAINER,
+            value: FORM_DATA_CONDITIONAL[ID],
+            formData: FORM_DATA_CONDITIONAL
+          })), container = _renderWithValidation8.container; // Check the container itself.
+          c = container.childNodes[0];
+          expect(c.tagName).toEqual('DIV');
+          expect(c.classList).toContain(_Container.DEFAULT_CLASS);
+
+          // And now check the first text component within it.
+          formGroup = c.childNodes[0];
+          expect(formGroup.tagName).toEqual('DIV');
+          expect(formGroup.classList).toContain('govuk-form-group');
+          label = formGroup.childNodes[0];
+          expect(label.tagName).toEqual('LABEL');
+          expect(label.classList).toContain('govuk-label');
+          expect(label.textContent).toEqual("".concat(TEXT_COMPONENT.label, " (optional)"));
+          expect(label.getAttribute('for')).toEqual("".concat(ID, ".").concat(TEXT_ID));
+          input = formGroup.childNodes[2];
+          expect(input.tagName).toEqual('INPUT');
+          expect(input.classList).toContain('govuk-input');
+          expect(input.id).toEqual("".concat(ID, ".").concat(TEXT_ID));
+          expect(input.value).toEqual('other');
+
+          // And now check the second text component within it that should have passed the show_when
+          formGroup2 = c.childNodes[1];
+          expect(formGroup2.tagName).toEqual('DIV');
+          expect(formGroup2.classList).toContain('govuk-form-group');
+          label2 = formGroup2.childNodes[0];
+          expect(label2.tagName).toEqual('LABEL');
+          expect(label2.classList).toContain('govuk-label');
+          expect(label2.textContent).toEqual("".concat(TEXT_COMPONENT.label, " 2 (optional)"));
+          expect(label2.getAttribute('for')).toEqual("".concat(ID, ".").concat(TEXT_ID, "Two"));
+          input2 = formGroup2.childNodes[2];
+          expect(input2.tagName).toEqual('INPUT');
+          expect(input2.classList).toContain('govuk-input');
+          expect(input2.id).toEqual("".concat(ID, ".").concat(TEXT_ID, "Two"));
+          expect(input2.value).toEqual('blue');
+        case 33:
+        case "end":
+          return _context8.stop();
+      }
+    }, _callee8);
+  })));
 });

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/dist/utils/Validate/validateComponent.js

@@ -19,7 +19,12 @@ var _validateRequired = _interopRequireDefault(require("./validateRequired"));
 var _validateTextArea = _interopRequireDefault(require("./validateTextArea"));
 var _validateTime = _interopRequireDefault(require("./validateTime"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); } // Local imports
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } // Local imports
 /**
  * Validates a single component.
  * @param {object} component The component to validate.
@@ -29,7 +34,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
  */
 var validateComponent = function validateComponent(component, outerData, formData) {
   var fd = formData || outerData;
-  if (!(0, _showComponent.default)(component, fd)) {
+  if (!(0, _showComponent.default)(component, _objectSpread(_objectSpread({}, fd), outerData))) {
     return undefined;
   }
   if (component.type === _models.ComponentTypes.CONTAINER) {

package/dist/utils/Validate/validateComponent.test.js

@@ -182,6 +182,37 @@ describe('utils.Validate.Component', function () {
       var DATA = _defineProperty({}, ID, _defineProperty({}, EMAIL_ID, 'alpha.bravo@digital.homeoffice.gov.uk'));
       expect((0, _validateComponent.default)(CONTAINER, DATA)).toEqual([]);
     });
+    it('should return an empty array when the container has only valid components', function () {
+      var TEXT_COMPONENT = {
+        id: 'one',
+        fieldId: 'one',
+        type: _models.ComponentTypes.TEXT,
+        label: 'Text component one'
+      };
+      var TEXT_COMPONENT_TWO = {
+        id: 'two',
+        fieldId: 'two',
+        type: _models.ComponentTypes.TEXT,
+        label: 'Text component two',
+        required: true,
+        show_when: {
+          field: 'one',
+          op: '=',
+          value: 'other'
+        }
+      };
+      var ID = 'container';
+      var LABEL = 'field';
+      var CONTAINER = setup(ID, _models.ComponentTypes.CONTAINER, LABEL, false);
+      CONTAINER.components = [TEXT_COMPONENT, TEXT_COMPONENT_TWO];
+      var DATA = _defineProperty({}, ID, {
+        one: 'other'
+      });
+      var errors = (0, _validateComponent.default)(CONTAINER, DATA, {
+        colour: 'blue'
+      });
+      expect(errors.length).toEqual(1);
+    });
   });
   describe('when the component is a collection', function () {
     it('should return an empty array when the collection has only valid items', function () {

package/package.json

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