@ukhomeoffice/cop-react-form-renderer 5.26.1 → 5.27.1

package/dist/components/CheckYourAnswers/CheckYourAnswers.js

@@ -135,14 +135,14 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
   var getPageHeading = function getPageHeading(page, size) {
     var _page$cya_link;
     if (!((_page$cya_link = page.cya_link) !== null && _page$cya_link !== void 0 && _page$cya_link.singleChangeLink) || noChangeAction) {
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, size === 's' && /*#__PURE__*/_react.default.createElement(_copReactComponents.SmallHeading, null, _utils.default.interpolateString(page.title, page.formData)), size === 'm' && /*#__PURE__*/_react.default.createElement(_copReactComponents.MediumHeading, null, _utils.default.interpolateString(page.title, page.formData)));
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, size === 's' && /*#__PURE__*/_react.default.createElement(_copReactComponents.SmallHeading, null, _utils.default.FormPage.getTitle(page.title, page.formData)), size === 'm' && /*#__PURE__*/_react.default.createElement(_copReactComponents.MediumHeading, null, _utils.default.FormPage.getTitle(page.title, page.formData)));
     }
     var headingAction = (0, _getCYAAction.default)(false, page, onRowAction);
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "heading-with-action"
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "heading-text"
-    }, size === 's' && /*#__PURE__*/_react.default.createElement(_copReactComponents.SmallHeading, null, _utils.default.interpolateString(page.title, page.formData)), size === 'm' && /*#__PURE__*/_react.default.createElement(_copReactComponents.MediumHeading, null, _utils.default.interpolateString(page.title, page.formData))), /*#__PURE__*/_react.default.createElement("div", {
+    }, size === 's' && /*#__PURE__*/_react.default.createElement(_copReactComponents.SmallHeading, null, _utils.default.FormPage.getTitle(page.title, page.formData)), size === 'm' && /*#__PURE__*/_react.default.createElement(_copReactComponents.MediumHeading, null, _utils.default.FormPage.getTitle(page.title, page.formData))), /*#__PURE__*/_react.default.createElement("div", {
       className: "heading-action"
     }, /*#__PURE__*/_react.default.createElement(_RowAction.default, {
       row: {
@@ -191,7 +191,7 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
       key: pageIndex
     }, showHeading && getPageHeading(page, 'm'), isGroup(page.id) && /*#__PURE__*/_react.default.createElement("div", {
       className: "group-title"
-    }, /*#__PURE__*/_react.default.createElement(_copReactComponents.MediumHeading, null, currentGroup.title || page.title)), /*#__PURE__*/_react.default.createElement(_SummaryList.default, {
+    }, /*#__PURE__*/_react.default.createElement(_copReactComponents.MediumHeading, null, currentGroup.title || _utils.default.FormPage.getTitle(page.title, page.formData))), /*#__PURE__*/_react.default.createElement(_SummaryList.default, {
       className: className,
       rows: page.rows,
       classModifiers: summaryListClassModifiers,

package/dist/components/CollectionPage/CollectionPage.test.js

@@ -4,6 +4,7 @@ var _react = require("@testing-library/react");
 var _react2 = _interopRequireDefault(require("react"));
 var _models = require("../../models");
 var _setupTests = require("../../setupTests");
+var _utils = _interopRequireDefault(require("../../utils"));
 var _ActionButton = require("../PageActions/ActionButton");
 var _CollectionPage = _interopRequireWildcard(require("./CollectionPage"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -222,7 +223,7 @@ describe('components.CollectionPage', function () {
             expect(page.classList).toContain(_CollectionPage.DEFAULT_CLASS);
             heading = page.childNodes[0];
             expect(heading.classList).toContain('govuk-heading-l');
-            expect(heading.textContent).toEqual(PAGE.title);
+            expect(heading.textContent).toEqual(_utils.default.FormPage.getTitle(PAGE.title, PAGE.formData));
             checkInputField(page.childNodes[1], TEXT.fieldId, "".concat(TEXT.label, " (optional)"), TEXT.hint, VALUE);
             checkFormButtonGroup(page.childNodes[2], [_ActionButton.DEFAULT_LABEL]);
           case 9:

package/dist/components/FormComponent/Collection.js

@@ -193,7 +193,9 @@ var Collection = function Collection(_ref) {
       onChange: onCollectionChange,
       onTopLevelChange: onTopLevelChange,
       wrap: wrap
-    }), removeStyle === 'end' && /*#__PURE__*/_react.default.createElement(_copReactComponents.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
+    }), removeStyle === 'end' && /*#__PURE__*/_react.default.createElement(_copReactComponents.ButtonGroup, {
+      className: "govuk-!-margin-top-1"
+    }, /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
       onClick: function onClick() {
         return onRemoveItem(item);
       },

package/dist/components/FormPage/FormPage.js

@@ -86,7 +86,7 @@ var FormPage = function FormPage(_ref) {
     }) : action;
   });
   formPage.formData = _utils.default.Operate.runPageOperations(formPage, _objectSpread(_objectSpread({}, formPage.formData), patch), onWrapperChange || onPageChange);
-  var headingContent = page.title ? /*#__PURE__*/_react.default.createElement(_copReactComponents.LargeHeading, null, _utils.default.interpolateString(page.title, page.formData)) : /*#__PURE__*/_react.default.createElement(_copReactComponents.Label, {
+  var headingContent = page.title ? /*#__PURE__*/_react.default.createElement(_copReactComponents.LargeHeading, null, _utils.default.FormPage.getTitle(page.title, page.formData)) : /*#__PURE__*/_react.default.createElement(_copReactComponents.Label, {
     id: page.id,
     required: page.required,
     hideOptionalSuffix: page.hideOptionalSuffix

package/dist/components/FormPage/FormPage.test.js

@@ -5,6 +5,7 @@ var _react = require("@testing-library/react");
 var _react2 = _interopRequireDefault(require("react"));
 var _models = require("../../models");
 var _setupTests = require("../../setupTests");
+var _utils = _interopRequireDefault(require("../../utils"));
 var _ActionButton = require("../PageActions/ActionButton");
 var _FormPage = _interopRequireWildcard(require("./FormPage"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -208,7 +209,7 @@ describe('components.FormPage', function () {
             expect(page.classList).toContain(_FormPage.DEFAULT_CLASS);
             heading = page.childNodes[0];
             expect(heading.classList).toContain('govuk-heading-l');
-            expect(heading.textContent).toEqual(PAGE.title);
+            expect(heading.textContent).toEqual(_utils.default.FormPage.getTitle(PAGE.title, PAGE.formData));
             checkInputField(page.childNodes[1], TEXT.fieldId, "".concat(TEXT.label, " (optional)"), TEXT.hint, VALUE);
             checkFormButtonGroup(page.childNodes[2], [_ActionButton.DEFAULT_LABEL]);
           case 9:

package/dist/components/FormRenderer/FormRenderer.test.js

@@ -33,6 +33,27 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } // Global imports
 // Local imports
 // JSON
+var setDate = function setDate(element, date) {
+  var items = element.children;
+  _react.fireEvent.change(items[0].childNodes[0].childNodes[1], {
+    target: {
+      name: 'date-day',
+      value: date[0]
+    }
+  });
+  _react.fireEvent.change(items[1].childNodes[0].childNodes[1], {
+    target: {
+      name: 'date-month',
+      value: date[1]
+    }
+  });
+  _react.fireEvent.change(items[2].childNodes[0].childNodes[1], {
+    target: {
+      name: 'date-year',
+      value: date[2]
+    }
+  });
+};
 describe('components', function () {
   describe('FormRenderer', function () {
     var mockAxios = new _axiosMockAdapter.default(_axios.default);
@@ -414,7 +435,7 @@ describe('components', function () {
         }
       }, _callee14);
     })));
-    it('should render a tasklist', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee16() {
+    it('should render a task list', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee16() {
       var taskList;
       return _regeneratorRuntime().wrap(function _callee16$(_context16) {
         while (1) switch (_context16.prev = _context16.next) {
@@ -466,7 +487,7 @@ describe('components', function () {
         }
       }, _callee18);
     })));
-    it('should load tasklist with notes', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee20() {
+    it('should load task list with notes', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee20() {
       var ON_SUBMIT_CALLS, ON_SUBMIT, HOOKS, TASK_LIST_WITH_NOTES, taskList;
       return _regeneratorRuntime().wrap(function _callee20$(_context20) {
         while (1) switch (_context20.prev = _context20.next) {
@@ -514,7 +535,7 @@ describe('components', function () {
         }
       }, _callee20);
     })));
-    it('should not load tasklist with notes', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee22() {
+    it('should not load task list with notes', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee22() {
       var ON_SUBMIT_CALLS, ON_SUBMIT, HOOKS, TASK_LIST_WITH_NOTES, taskList;
       return _regeneratorRuntime().wrap(function _callee22$(_context22) {
         while (1) switch (_context22.prev = _context22.next) {
@@ -567,7 +588,7 @@ describe('components', function () {
       }, _callee22);
     })));
     it('should handle navigating between task list pages', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee24() {
-      var ON_SUBMIT_CALLS, ON_SUBMIT, HOOKS, taskList, firstTaskStatus, secondTaskStatus, firstTask, newPage, continueButton, seaButton, cyaPageChange, modeChangeLink, changePage, airButton, cyaPage, finalSubmit;
+      var ON_SUBMIT_CALLS, ON_SUBMIT, HOOKS, taskList, firstTaskStatus, secondTaskStatus, firstTask, newPage, fieldset, continueButton, seaButton, cyaPageChange, modeChangeLink, changePage, airButton, cyaPage, finalSubmit;
       return _regeneratorRuntime().wrap(function _callee24$(_context24) {
         while (1) switch (_context24.prev = _context24.next) {
           case 0:
@@ -608,24 +629,8 @@ describe('components', function () {
             // Fill first page and navigate
             newPage = container.childNodes[0].childNodes[0];
             expect(newPage.childNodes[0].textContent).toEqual('Event Date');
-            _react.fireEvent.change(newPage.childNodes[1].childNodes[0].childNodes[2].childNodes[0].childNodes[1], {
-              target: {
-                name: 'date-day',
-                value: '7'
-              }
-            });
-            _react.fireEvent.change(newPage.childNodes[1].childNodes[0].childNodes[2].childNodes[1].childNodes[1], {
-              target: {
-                name: 'date-month',
-                value: '7'
-              }
-            });
-            _react.fireEvent.change(newPage.childNodes[1].childNodes[0].childNodes[2].childNodes[2].childNodes[1], {
-              target: {
-                name: 'date-year',
-                value: '2022'
-              }
-            });
+            fieldset = newPage.childNodes[1].childNodes[0]; // child nodes of fieldset are legend and date
+            setDate(fieldset.children[1], ['7', '7', '2022']);
             continueButton = newPage.childNodes[2].childNodes[0];
             _react.fireEvent.click(continueButton, {});
 
@@ -676,14 +681,14 @@ describe('components', function () {
             expect(finalSubmit.date).toEqual('7-7-2022');
             expect(finalSubmit.mode).toEqual('air');
             expect(finalSubmit.formStatus.tasks['Date, location and mode details'].complete).toEqual(true);
-          case 54:
+          case 53:
           case "end":
             return _context24.stop();
         }
       }, _callee24);
     })));
     it('should go straight to CYA page if a complete task is selected', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee26() {
-      var ON_SUBMIT, HOOKS, taskList, newPage;
+      var ON_SUBMIT, HOOKS, taskList, newPage, fieldset;
       return _regeneratorRuntime().wrap(function _callee26$(_context26) {
         while (1) switch (_context26.prev = _context26.next) {
           case 0:
@@ -713,24 +718,10 @@ describe('components', function () {
 
             // Fill first page and navigate
             newPage = container.childNodes[0].childNodes[0];
-            _react.fireEvent.change(newPage.childNodes[1].childNodes[0].childNodes[2].childNodes[0].childNodes[1], {
-              target: {
-                name: 'date-day',
-                value: '7'
-              }
-            });
-            _react.fireEvent.change(newPage.childNodes[1].childNodes[0].childNodes[2].childNodes[1].childNodes[1], {
-              target: {
-                name: 'date-month',
-                value: '7'
-              }
-            });
-            _react.fireEvent.change(newPage.childNodes[1].childNodes[0].childNodes[2].childNodes[2].childNodes[1], {
-              target: {
-                name: 'date-year',
-                value: '2022'
-              }
-            });
+            fieldset = newPage.childNodes[1].childNodes[0];
+            setDate(fieldset.children[1], ['7', '7', '2022']);
+            // child nodes of fieldset are legend and date
+
             _react.fireEvent.click(newPage.childNodes[2].childNodes[0], {});
 
             // Fill second page and navigate
@@ -746,7 +737,7 @@ describe('components', function () {
 
             // Should be at CYA page
             expect(container.childNodes[0].childNodes[0].childNodes[0].textContent).toEqual('Check your answers');
-          case 17:
+          case 16:
           case "end":
             return _context26.stop();
         }
@@ -803,7 +794,7 @@ describe('components', function () {
       }, _callee28);
     })));
     it('should go to the first page of a complete task if noTaskCYAs specified', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee30() {
-      var ON_SUBMIT, HOOKS, TASK_LIST_WITH_NO_TASK_CYAS, taskList, newPage;
+      var ON_SUBMIT, HOOKS, TASK_LIST_WITH_NO_TASK_CYAS, taskList, newPage, fieldset;
       return _regeneratorRuntime().wrap(function _callee30$(_context30) {
         while (1) switch (_context30.prev = _context30.next) {
           case 0:
@@ -839,24 +830,8 @@ describe('components', function () {
 
             // Fill first page and navigate
             newPage = container.childNodes[0].childNodes[0];
-            _react.fireEvent.change(newPage.childNodes[1].childNodes[0].childNodes[2].childNodes[0].childNodes[1], {
-              target: {
-                name: 'date-day',
-                value: '7'
-              }
-            });
-            _react.fireEvent.change(newPage.childNodes[1].childNodes[0].childNodes[2].childNodes[1].childNodes[1], {
-              target: {
-                name: 'date-month',
-                value: '7'
-              }
-            });
-            _react.fireEvent.change(newPage.childNodes[1].childNodes[0].childNodes[2].childNodes[2].childNodes[1], {
-              target: {
-                name: 'date-year',
-                value: '2022'
-              }
-            });
+            fieldset = newPage.childNodes[1].childNodes[0];
+            setDate(fieldset.children[1], ['7', '7', '2022']);
             _react.fireEvent.click(newPage.childNodes[2].childNodes[0], {});
 
             // Fill second page
@@ -870,7 +845,7 @@ describe('components', function () {
 
             // Should be on the first page
             expect(container.childNodes[0].childNodes[0].childNodes[0].textContent).toEqual('Event Date');
-          case 19:
+          case 18:
           case "end":
             return _context30.stop();
         }

package/dist/utils/Component/getComponentTests/getComponent.date.test.js

@@ -28,53 +28,53 @@ describe('utils.Component.get', function () {
       onChange: ON_CHANGE,
       'data-testid': ID
     };
+    var checkDateField = function checkDateField(node, option) {
+      expect(node.tagName).toEqual('DIV');
+      expect(node.classList).toContain('govuk-date-input__item');
+      var group = node.childNodes[0]; // form group
+      var _group$childNodes = _slicedToArray(group.childNodes, 2),
+        label = _group$childNodes[0],
+        input = _group$childNodes[1];
+      expect(label.tagName).toEqual('LABEL');
+      expect(label.classList).toContain('govuk-label');
+      expect(label.textContent).toEqual(option.label);
+      expect(input.tagName).toEqual('INPUT');
+      expect(input.id).toEqual(option.id);
+      return input;
+    };
     var _render = (0, _react.render)((0, _getComponent.default)(COMPONENT)),
       container = _render.container;
     var _getAllByTestId = (0, _react.getAllByTestId)(container, ID),
       _getAllByTestId2 = _slicedToArray(_getAllByTestId, 2),
       formGroup = _getAllByTestId2[0],
-      dateinput = _getAllByTestId2[1];
+      dateInput = _getAllByTestId2[1];
     expect(formGroup.tagName).toEqual('DIV');
     expect(formGroup.classList).toContain('govuk-form-group');
     var label = formGroup.childNodes[0];
     expect(label.innerHTML).toContain(LABEL);
     expect(label.getAttribute('for')).toEqual(ID);
-    expect(dateinput.tagName).toEqual('DIV');
-    expect(dateinput.classList).toContain('govuk-date-input');
-    expect(dateinput.id).toEqual(ID);
-    var dayitem = dateinput.childNodes[0];
-    expect(dayitem.tagName).toEqual('DIV');
-    expect(dayitem.classList).toContain('govuk-date-input__item');
-    var daylabel = dayitem.childNodes[0];
-    expect(daylabel.tagName).toEqual('LABEL');
-    expect(daylabel.classList).toContain('govuk-label');
-    expect(daylabel.textContent).toEqual('Day');
-    var dayinput = dayitem.childNodes[1];
-    expect(dayinput.tagName).toEqual('INPUT');
-    expect(dayinput.id).toEqual("".concat(ID, "-day"));
-    var monthitem = dateinput.childNodes[1];
-    expect(monthitem.tagName).toEqual('DIV');
-    expect(monthitem.classList).toContain('govuk-date-input__item');
-    var monthlabel = monthitem.childNodes[0];
-    expect(monthlabel.tagName).toEqual('LABEL');
-    expect(monthlabel.classList).toContain('govuk-label');
-    expect(monthlabel.textContent).toEqual('Month');
-    var monthinput = monthitem.childNodes[1];
-    expect(monthinput.tagName).toEqual('INPUT');
-    expect(monthinput.id).toEqual("".concat(ID, "-month"));
-    var yearitem = dateinput.childNodes[2];
-    expect(yearitem.tagName).toEqual('DIV');
-    expect(yearitem.classList).toContain('govuk-date-input__item');
-    var yearlabel = yearitem.childNodes[0];
-    expect(yearlabel.tagName).toEqual('LABEL');
-    expect(yearlabel.classList).toContain('govuk-label');
-    expect(yearlabel.textContent).toEqual('Year');
-    var yearinput = yearitem.childNodes[1];
-    expect(yearinput.tagName).toEqual('INPUT');
-    expect(yearinput.id).toEqual("".concat(ID, "-year"));
+    expect(dateInput.tagName).toEqual('DIV');
+    expect(dateInput.classList).toContain('govuk-date-input');
+    expect(dateInput.id).toEqual(ID);
+    var _dateInput$childNodes = _slicedToArray(dateInput.childNodes, 3),
+      dayItem = _dateInput$childNodes[0],
+      monthItem = _dateInput$childNodes[1],
+      yearItem = _dateInput$childNodes[2];
+    var dayInput = checkDateField(dayItem, {
+      id: "".concat(ID, "-day"),
+      label: 'Day'
+    });
+    var monthInput = checkDateField(monthItem, {
+      id: "".concat(ID, "-month"),
+      label: 'Month'
+    });
+    var yearInput = checkDateField(yearItem, {
+      id: "".concat(ID, "-year"),
+      label: 'Year'
+    });
 
     // Add something to the day and make sure it fires.
-    _react.fireEvent.change(dayinput, {
+    _react.fireEvent.change(dayInput, {
       target: {
         name: "".concat(FIELD_ID, "-day"),
         value: '5'
@@ -86,7 +86,7 @@ describe('utils.Component.get', function () {
       value: '5--'
     });
     // And now the month...
-    _react.fireEvent.change(monthinput, {
+    _react.fireEvent.change(monthInput, {
       target: {
         name: "".concat(FIELD_ID, "-month"),
         value: '11'
@@ -98,7 +98,7 @@ describe('utils.Component.get', function () {
       value: '5-11-'
     });
     // And finally the year.
-    _react.fireEvent.change(yearinput, {
+    _react.fireEvent.change(yearInput, {
       target: {
         name: "".concat(FIELD_ID, "-year"),
         value: '2022'

package/dist/utils/Component/getComponentTests/getComponent.nested.test.js

@@ -63,9 +63,9 @@ describe('utils.Component.get', function () {
           expect(input2.tagName).toEqual('DIV');
           expect(input2.classList).toContain('govuk-date-input');
           expect(input2.id).toEqual(ID2);
-          expect(input2.childNodes[0].childNodes[1].value).toEqual('1');
-          expect(input2.childNodes[1].childNodes[1].value).toEqual('2');
-          expect(input2.childNodes[2].childNodes[1].value).toEqual('2022');
+          expect(input2.childNodes[0].childNodes[0].childNodes[1].value).toEqual('1');
+          expect(input2.childNodes[1].childNodes[0].childNodes[1].value).toEqual('2');
+          expect(input2.childNodes[2].childNodes[0].childNodes[1].value).toEqual('2022');
         case 35:
         case "end":
           return _context.stop();

package/dist/utils/Component/getComponentTests/getComponent.time.test.js

@@ -61,7 +61,7 @@ describe('utils.Component.get', function () {
     }].forEach(function (part) {
       expect(part.item.tagName).toEqual('DIV');
       expect(part.item.classList).toContain('govuk-date-input__item');
-      var _part$item$childNodes = _slicedToArray(part.item.childNodes, 2),
+      var _part$item$childNodes = _slicedToArray(part.item.childNodes[0].childNodes, 2),
         inputLabel = _part$item$childNodes[0],
         input = _part$item$childNodes[1];
       expect(inputLabel.tagName).toEqual('LABEL');

package/dist/utils/FormPage/getPageTitle.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _copReactComponents = require("@ukhomeoffice/cop-react-components");
+var _meetsAllConditions = _interopRequireDefault(require("../Condition/meetsAllConditions"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// Global imports.
+
+// Local imports.
+
+var getPageTitle = function getPageTitle(title, formData) {
+  if (typeof title === 'string') {
+    return _copReactComponents.Utils.interpolateString(title, formData);
+  }
+  if (!Array.isArray(title)) {
+    return null;
+  }
+  var shownOption = title.find(function (option) {
+    if (typeof option === 'string') {
+      // This is intended to allow a plain string 'fallback' option in the array.
+      // As such, it should be the last option in the array as any options after
+      // it will not be considered.
+      return true;
+    }
+    return (0, _meetsAllConditions.default)(option.show_when, formData);
+  });
+  return typeof shownOption === 'string' ? _copReactComponents.Utils.interpolateString(shownOption, formData) : _copReactComponents.Utils.interpolateString(shownOption.title, formData);
+};
+var _default = getPageTitle;
+exports.default = _default;

package/dist/utils/FormPage/getPageTitle.test.js

@@ -0,0 +1,116 @@
+"use strict";
+
+var _getPageTitle = _interopRequireDefault(require("./getPageTitle"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+describe('utils.FormPage.getPageTitle', function () {
+  var FORM_DATA = {
+    testField: 'Alpha',
+    testField2: 'yes'
+  };
+  it('should return null if title is not defined', function () {
+    var result = (0, _getPageTitle.default)(null, FORM_DATA);
+    expect(result).toEqual(null);
+  });
+  it('should return the defined page title if it\'s just a string', function () {
+    var PAGE = {
+      title: 'Page title'
+    };
+    var result = (0, _getPageTitle.default)(PAGE.title, FORM_DATA);
+    expect(result).toEqual('Page title');
+  });
+  it('should return a correctly interpolated title', function () {
+    // eslint-disable-next-line no-template-curly-in-string
+    var PAGE = {
+      title: '${testField} title'
+    };
+    var result = (0, _getPageTitle.default)(PAGE.title, FORM_DATA);
+    expect(result).toEqual("".concat(FORM_DATA.testField, " title"));
+  });
+  it('should return the title that has it\'s conditions met', function () {
+    var PAGE = {
+      title: [{
+        title: 'First title',
+        show_when: [{
+          field: 'testField2',
+          op: '=',
+          value: 'no'
+        }]
+      }, {
+        title: 'Second title',
+        show_when: [{
+          field: 'testField2',
+          op: '=',
+          value: 'yes'
+        }]
+      }]
+    };
+    var result = (0, _getPageTitle.default)(PAGE.title, FORM_DATA);
+    expect(result).toEqual('Second title');
+  });
+  it('should return a plain string title if one is encountered in the array', function () {
+    var PAGE = {
+      title: [{
+        title: 'First title',
+        show_when: [{
+          field: 'testField2',
+          op: '=',
+          value: 'notTheValue'
+        }]
+      }, {
+        title: 'Second title',
+        show_when: [{
+          field: 'testField2',
+          op: '=',
+          value: 'notTheValue'
+        }]
+      }, "Default title"]
+    };
+    var result = (0, _getPageTitle.default)(PAGE.title, FORM_DATA);
+    expect(result).toEqual('Default title');
+  });
+  it('should correctly interpolate a plain string option in the title array', function () {
+    var PAGE = {
+      title: [{
+        title: 'First title',
+        show_when: [{
+          field: 'testField2',
+          op: '=',
+          value: 'notTheValue'
+        }]
+      }, {
+        title: 'Second title',
+        show_when: [{
+          field: 'testField2',
+          op: '=',
+          value: 'notTheValue'
+        }]
+      },
+      // eslint-disable-next-line no-template-curly-in-string
+      "${testField} title"]
+    };
+    var result = (0, _getPageTitle.default)(PAGE.title, FORM_DATA);
+    expect(result).toEqual("".concat(FORM_DATA.testField, " title"));
+  });
+  it('should correctly interpolate a conditional title', function () {
+    var PAGE = {
+      title: [{
+        title: 'First title',
+        show_when: [{
+          field: 'testField2',
+          op: '=',
+          value: 'no'
+        }]
+      }, {
+        // eslint-disable-next-line no-template-curly-in-string
+        title: '${testField} title',
+        show_when: [{
+          field: 'testField2',
+          op: '=',
+          value: 'yes'
+        }]
+      }]
+    };
+    var result = (0, _getPageTitle.default)(PAGE.title, FORM_DATA);
+    expect(result).toEqual("".concat(FORM_DATA.testField, " title"));
+  });
+});

package/dist/utils/FormPage/index.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _applyConditionalProperties = _interopRequireDefault(require("./applyConditionalProperties"));
 var _getFormPage = _interopRequireDefault(require("./getFormPage"));
 var _getFormPages = _interopRequireDefault(require("./getFormPages"));
+var _getPageTitle = _interopRequireDefault(require("./getPageTitle"));
 var _showFormPage = _interopRequireDefault(require("./showFormPage"));
 var _showFormPageCYA = _interopRequireDefault(require("./showFormPageCYA"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -14,6 +15,7 @@ var FormPage = {
   applyConditionalProperties: _applyConditionalProperties.default,
   get: _getFormPage.default,
   getAll: _getFormPages.default,
+  getTitle: _getPageTitle.default,
   show: _showFormPage.default,
   showCYA: _showFormPageCYA.default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "5.26.1",
+  "version": "5.27.1",
   "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.9.0",
+    "@ukhomeoffice/cop-react-components": "^3.14.2",
     "axios": "^0.23.0",
     "dayjs": "^1.11.0",
     "govuk-frontend": "^4.3.1",