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

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/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.80.1",
+  "version": "5.81.2",
   "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": "3.22.0",
+    "@ukhomeoffice/cop-react-components": "3.23.0",
     "axios": "^0.23.0",
     "dayjs": "^1.11.0",
     "govuk-frontend": "^4.3.1",