@ukhomeoffice/cop-react-form-renderer 3.1.1 → 3.2.4

package/dist/components/FormComponent/FormComponent.js

@@ -140,8 +140,9 @@ var FormComponent = function FormComponent(_ref) {
   return _utils.default.Component.get(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, attrs), component), {}, {
     id: component.full_path || component.id
   }, (0, _helpers.getComponentError)(component, validation === null || validation === void 0 ? void 0 : validation.errors)), {}, {
-    label: component.label || '',
-    hint: component.hint || '',
+    label: _utils.default.interpolateString(component.label, formData),
+    content: _utils.default.interpolateString(component.content, formData),
+    hint: _utils.default.interpolateString(component.hint, formData),
     options: options,
     value: value || _utils.default.Component.defaultValue(component),
     onChange: onComponentChangeExtended,

package/dist/components/FormPage/FormPage.js

@@ -51,6 +51,8 @@ var DEFAULT_CLASS = 'hods-form';
 exports.DEFAULT_CLASS = DEFAULT_CLASS;
 
 var FormPage = function FormPage(_ref) {
+  var _page$actions;
+
   var page = _ref.page,
       _onAction = _ref.onAction,
       classBlock = _ref.classBlock,
@@ -81,10 +83,15 @@ var FormPage = function FormPage(_ref) {
 
   var classes = _utils.default.classBuilder(classBlock, classModifiers, className);
 
+  page.actions = (_page$actions = page.actions) === null || _page$actions === void 0 ? void 0 : _page$actions.map(function (action) {
+    return action.label ? _objectSpread(_objectSpread({}, action), {}, {
+      label: _utils.default.interpolateString(action.label, page.formData)
+    }) : action;
+  });
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes('page'),
     key: page.id
-  }, page.title && /*#__PURE__*/_react.default.createElement(_copReactComponents.LargeHeading, null, page.title), (errors === null || errors === void 0 ? void 0 : errors.length) > 0 && /*#__PURE__*/_react.default.createElement(_copReactComponents.ErrorSummary, {
+  }, page.title && /*#__PURE__*/_react.default.createElement(_copReactComponents.LargeHeading, null, _utils.default.interpolateString(page.title, page.formData)), (errors === null || errors === void 0 ? void 0 : errors.length) > 0 && /*#__PURE__*/_react.default.createElement(_copReactComponents.ErrorSummary, {
     errors: errors
   }), page.components.filter(function (c) {
     return _utils.default.Component.show(c, page.formData);

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

@@ -24,6 +24,18 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try
 
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 describe('components.FormPage', function () {
   describe('FormPage', function () {
     var TEXT = {
@@ -32,6 +44,25 @@ describe('components.FormPage', function () {
       type: 'text',
       label: 'Text component',
       hint: 'Text hint'
+    }; // eslint-disable-next-line no-template-curly-in-string
+
+    var TEXT_WITH_EXPRESSION = {
+      id: 'text1',
+      fieldId: 'text1',
+      type: 'text',
+      label: 'Email to ${wrapper.email}',
+      hint: 'Text hint ${currentUser.givenName}'
+    }; // eslint-disable-next-line no-template-curly-in-string
+
+    var AUTO_WITH_EXPRESSION = {
+      id: 'text2',
+      fieldId: 'text2',
+      label: '${text2} ${currentUser.givenName}',
+      hint: '${wrapper.email}',
+      type: 'autocomplete',
+      required: true,
+      source: [],
+      disabled: false
     };
     var VALUE = 'Text value';
     var PAGE = {
@@ -43,8 +74,102 @@ describe('components.FormPage', function () {
         text: VALUE
       }
     };
+    var PAGE_WITH_BUTTON_ACTIONS = {
+      id: 'pageId',
+      // eslint-disable-next-line no-template-curly-in-string
+      title: '${title}',
+      components: [TEXT_WITH_EXPRESSION, AUTO_WITH_EXPRESSION],
+      actions: [// eslint-disable-next-line no-template-curly-in-string
+      {
+        type: 'submit',
+        validate: true,
+        label: 'Next ${wrapper.nextAction}'
+      }, // eslint-disable-next-line no-template-curly-in-string
+      {
+        type: 'navigate',
+        page: '1',
+        label: 'Go back ${wrapper.prevAction}'
+      }],
+      formData: {
+        title: 'Order Form',
+        text1: "Text1 ".concat(VALUE),
+        text2: "Text2 ".concat(VALUE),
+        wrapper: {
+          email: 'test@example.email',
+          nextAction: 'Payment',
+          prevAction: 'User Details'
+        },
+        currentUser: {
+          givenName: 'Doe'
+        }
+      }
+    };
     var ON_ACTION_CALLS = [];
 
+    var checkInputField = function checkInputField(formGroup, fieldId, lbl, hnt, val) {
+      expect(formGroup.tagName).toEqual('DIV');
+      expect(formGroup.classList).toContain('govuk-form-group');
+      var label = formGroup.childNodes[0];
+      expect(label.tagName).toEqual('LABEL');
+      expect(label.classList).toContain('govuk-label');
+      expect(label.textContent).toEqual(lbl);
+      expect(label.getAttribute('for')).toEqual(fieldId);
+      var hint = formGroup.childNodes[1];
+      expect(hint.tagName).toEqual('SPAN');
+      expect(hint.classList).toContain('govuk-hint');
+      expect(hint.textContent).toEqual(hnt);
+      var input = formGroup.childNodes[2];
+      expect(input.tagName).toEqual('INPUT');
+      expect(input.classList).toContain('govuk-input');
+      expect(input.id).toEqual(fieldId);
+      expect(input.value).toEqual(val);
+      return input;
+    };
+
+    var checkAutoCompleteField = function checkAutoCompleteField(formGroup, fieldId, lbl, hnt, val) {
+      expect(formGroup.tagName).toEqual('DIV');
+      expect(formGroup.classList).toContain('govuk-form-group');
+      var label = formGroup.childNodes[0];
+      expect(label.tagName).toEqual('LABEL');
+      expect(label.classList).toContain('govuk-label');
+      expect(label.textContent).toEqual(lbl);
+      expect(label.getAttribute('for')).toEqual(fieldId);
+      var hint = formGroup.childNodes[1];
+      expect(hint.tagName).toEqual('SPAN');
+      expect(hint.classList).toContain('govuk-hint');
+      expect(hint.textContent).toEqual(hnt);
+      var outerWrapper = formGroup.childNodes[2];
+      expect(outerWrapper.classList).toContain('hods-autocomplete__outer-wrapper');
+      var autocomplete = outerWrapper.childNodes[0];
+      expect(autocomplete.classList).toContain('hods-autocomplete__wrapper');
+
+      var input = _toConsumableArray(autocomplete.childNodes).filter(function (e) {
+        return e.tagName === 'INPUT';
+      })[0];
+
+      expect(input.classList).toContain('hods-autocomplete__input');
+      expect(input.tagName).toEqual('INPUT');
+      expect(input.id).toEqual(fieldId);
+      expect(input.value).toEqual(val);
+      return input;
+    };
+
+    var checkFormButtonGroup = function checkFormButtonGroup(buttonGroup, labels) {
+      var _buttonGroup$childNod;
+
+      var buttons = [];
+      expect(buttonGroup.tagName).toEqual('DIV');
+      expect(buttonGroup.classList).toContain('hods-button-group');
+      expect((_buttonGroup$childNod = buttonGroup.childNodes) === null || _buttonGroup$childNod === void 0 ? void 0 : _buttonGroup$childNod.length).toEqual(labels.length);
+      buttonGroup.childNodes.forEach(function (button, i) {
+        expect(button.tagName).toEqual('BUTTON');
+        expect(button.classList).toContain('hods-button');
+        expect(button.textContent).toEqual(labels[i]);
+        buttons.push(button);
+      });
+      return buttons;
+    };
+
     var ON_ACTION = function ON_ACTION(action, patch, onError) {
       ON_ACTION_CALLS.push({
         action: action,
@@ -60,7 +185,7 @@ describe('components.FormPage', function () {
       ON_ACTION_CALLS.length = 0;
     });
     it('should render a submit page correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-      var _renderWithValidation, container, page, heading, formGroup, label, hint, input, buttonGroup, button;
+      var _renderWithValidation, container, page, heading;
 
       return regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
@@ -76,50 +201,57 @@ describe('components.FormPage', function () {
               heading = page.childNodes[0];
               expect(heading.classList).toContain('govuk-heading-l');
               expect(heading.textContent).toEqual(PAGE.title);
-              formGroup = page.childNodes[1];
-              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.label, " (optional)"));
-              expect(label.getAttribute('for')).toEqual(TEXT.fieldId);
-              hint = formGroup.childNodes[1];
-              expect(hint.tagName).toEqual('SPAN');
-              expect(hint.classList).toContain('govuk-hint');
-              expect(hint.textContent).toEqual(TEXT.hint);
-              input = formGroup.childNodes[2];
-              expect(input.tagName).toEqual('INPUT');
-              expect(input.classList).toContain('govuk-input');
-              expect(input.id).toEqual(TEXT.fieldId);
-              expect(input.value).toEqual(VALUE);
-              buttonGroup = page.childNodes[2];
-              expect(buttonGroup.tagName).toEqual('DIV');
-              expect(buttonGroup.classList).toContain('hods-button-group');
-              button = buttonGroup.childNodes[0];
-              expect(button.tagName).toEqual('BUTTON');
-              expect(button.classList).toContain('hods-button');
-              expect(button.textContent).toEqual(_ActionButton.DEFAULT_LABEL);
-
-            case 31:
+              checkInputField(page.childNodes[1], TEXT.fieldId, "".concat(TEXT.label, " (optional)"), TEXT.hint, VALUE);
+              checkFormButtonGroup(page.childNodes[2], [_ActionButton.DEFAULT_LABEL]);
+
+            case 9:
             case "end":
               return _context.stop();
           }
         }
       }, _callee);
     })));
-    it('should handle a page change appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-      var _renderWithValidation2, container, page, input, NEW_VALUE, EVENT;
+    it('should render a submit page correctly and submit action button has interpolated label', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+      var _renderWithValidation2, container, page, FORM_DATA, heading;
 
       return regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
               _renderWithValidation2 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormPage.default, {
-                page: PAGE,
+                page: PAGE_WITH_BUTTON_ACTIONS,
                 onAction: ON_ACTION
               })), container = _renderWithValidation2.container;
               page = container.childNodes[0];
+              FORM_DATA = PAGE_WITH_BUTTON_ACTIONS.formData;
+              expect(page.tagName).toEqual('DIV');
+              expect(page.classList).toContain("".concat(_FormPage.DEFAULT_CLASS, "__page"));
+              heading = page.childNodes[0];
+              expect(heading.classList).toContain('govuk-heading-l');
+              expect(heading.textContent).toEqual(FORM_DATA.title);
+              checkInputField(page.childNodes[1], TEXT_WITH_EXPRESSION.fieldId, 'Email to test@example.email (optional)', 'Text hint Doe', 'Text1 Text value');
+              checkAutoCompleteField(page.childNodes[2], AUTO_WITH_EXPRESSION.fieldId, "".concat(FORM_DATA.text2, " ").concat(FORM_DATA.currentUser.givenName), FORM_DATA.wrapper.email, "Text2 ".concat(VALUE));
+              checkFormButtonGroup(page.childNodes[3], ['Next Payment', 'Go back User Details']);
+
+            case 11:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    })));
+    it('should handle a page change appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+      var _renderWithValidation3, container, page, input, NEW_VALUE, EVENT;
+
+      return regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              _renderWithValidation3 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormPage.default, {
+                page: PAGE,
+                onAction: ON_ACTION
+              })), container = _renderWithValidation3.container;
+              page = container.childNodes[0];
               expect(page.tagName).toEqual('DIV'); // Change the input.
 
               input = page.childNodes[1].childNodes[2];
@@ -138,22 +270,22 @@ describe('components.FormPage', function () {
 
             case 8:
             case "end":
-              return _context2.stop();
+              return _context3.stop();
           }
         }
-      }, _callee2);
+      }, _callee3);
     })));
-    it('should handle a page action appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
-      var _renderWithValidation3, container, page, input, NEW_VALUE, CHANGE_EVENT, button;
+    it('should handle a page action appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
+      var _renderWithValidation4, container, page, input, NEW_VALUE, CHANGE_EVENT, button;
 
-      return regeneratorRuntime.wrap(function _callee3$(_context3) {
+      return regeneratorRuntime.wrap(function _callee4$(_context4) {
         while (1) {
-          switch (_context3.prev = _context3.next) {
+          switch (_context4.prev = _context4.next) {
             case 0:
-              _renderWithValidation3 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormPage.default, {
+              _renderWithValidation4 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormPage.default, {
                 page: PAGE,
                 onAction: ON_ACTION
-              })), container = _renderWithValidation3.container;
+              })), container = _renderWithValidation4.container;
               page = container.childNodes[0]; // Change the input.
 
               input = page.childNodes[1].childNodes[2];
@@ -182,10 +314,10 @@ describe('components.FormPage', function () {
 
             case 12:
             case "end":
-              return _context3.stop();
+              return _context4.stop();
           }
         }
-      }, _callee3);
+      }, _callee4);
     })));
   });
 });

package/dist/utils/Component/getComponent.js

@@ -224,8 +224,7 @@ var getComponent = function getComponent(config) {
   var component = getComponentByType(config);
 
   if (component && wrap && (0, _isEditable.default)(config)) {
-    var attrs = (0, _cleanAttributes.default)(config, ['fieldId', 'displayMenu']);
-    return (0, _wrapInFormGroup.default)(attrs, component);
+    return (0, _wrapInFormGroup.default)(config, component);
   }
 
   return component;

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

@@ -0,0 +1,106 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+var _models = require("../../../models");
+
+var _getComponent = _interopRequireDefault(require("../getComponent"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+describe('utils.Component.get', function () {
+  it('should return an appropriately rendered time component', function () {
+    var ID = 'test-id';
+    var FIELD_ID = 'field-id';
+    var LABEL = 'label';
+    var ON_CHANGE_CALLS = [];
+
+    var ON_CHANGE = function ON_CHANGE(e) {
+      ON_CHANGE_CALLS.push(e.target);
+    };
+
+    var COMPONENT = {
+      type: _models.ComponentTypes.TIME,
+      id: ID,
+      fieldId: FIELD_ID,
+      label: LABEL,
+      onChange: ON_CHANGE,
+      'data-testid': ID
+    };
+
+    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],
+        timeInput = _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(timeInput.tagName).toEqual('DIV');
+    expect(timeInput.classList).toContain('govuk-date-input');
+    expect(timeInput.id).toEqual(ID);
+    var onChangeCalls = ON_CHANGE_CALLS.length;
+
+    var _timeInput$childNodes = _slicedToArray(timeInput.childNodes, 2),
+        hourItem = _timeInput$childNodes[0],
+        minuteItem = _timeInput$childNodes[1];
+
+    [{
+      id: 'hour',
+      label: 'Hour',
+      item: hourItem,
+      value: '5',
+      expectedValue: '5:'
+    }, {
+      id: 'minute',
+      label: 'Minute',
+      item: minuteItem,
+      value: '11',
+      expectedValue: '5:11'
+    }].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),
+          label = _part$item$childNodes[0],
+          input = _part$item$childNodes[1];
+
+      expect(label.tagName).toEqual('LABEL');
+      expect(label.classList).toContain('govuk-label');
+      expect(label.textContent).toEqual(part.label);
+      expect(input.tagName).toEqual('INPUT');
+      expect(input.id).toEqual("".concat(ID, "-").concat(part.id)); // Put something in the input and make sure it fires.
+
+      _react.fireEvent.change(input, {
+        target: {
+          name: "".concat(FIELD_ID, "-").concat(part.id),
+          value: part.value
+        }
+      });
+
+      onChangeCalls++;
+      expect(ON_CHANGE_CALLS.length).toEqual(onChangeCalls);
+      expect(ON_CHANGE_CALLS[onChangeCalls - 1]).toMatchObject({
+        name: FIELD_ID,
+        value: part.expectedValue
+      });
+    });
+  });
+});

package/dist/utils/Component/showComponent.js

@@ -11,6 +11,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 // Local imports
 var showComponent = function showComponent(component, data) {
+  var _component$show_when;
+
   if (!component) {
     return false;
   }
@@ -19,6 +21,10 @@ var showComponent = function showComponent(component, data) {
     return false;
   }
 
+  if (((_component$show_when = component.show_when) === null || _component$show_when === void 0 ? void 0 : _component$show_when.type) === "or") {
+    return _Condition.default.meetsOne(component, data);
+  }
+
   return _Condition.default.meetsAll(component, data);
 };
 

package/dist/utils/Component/showComponent.test.js

@@ -89,6 +89,69 @@ describe('utils', function () {
         };
         expect((0, _showComponent.default)(COMPONENT, DATA)).toBeFalsy();
       });
+      it('SHOULD be shown when the component has multiple show_when conditions, with type "or" provided and ALL are matched', function () {
+        var COMPONENT = {
+          show_when: {
+            "type": "or",
+            "conditions": [{
+              field: 'alpha',
+              op: '=',
+              value: 'Alpha'
+            }, {
+              field: 'bravo',
+              op: '=',
+              value: 'Bravo'
+            }]
+          }
+        };
+        var DATA = {
+          alpha: 'Alpha',
+          bravo: 'Bravo'
+        };
+        expect((0, _showComponent.default)(COMPONENT, DATA)).toBeTruthy();
+      });
+      it('SHOULD be shown when the component has multiple show_when conditions, with type "or" provided and at least ONE is matched', function () {
+        var COMPONENT = {
+          show_when: {
+            "type": "or",
+            "conditions": [{
+              field: 'alpha',
+              op: '=',
+              value: 'Alpha'
+            }, {
+              field: 'charlie',
+              op: '=',
+              value: 'Charlie'
+            }]
+          }
+        };
+        var DATA = {
+          alpha: 'Alpha',
+          bravo: 'Bravo'
+        };
+        expect((0, _showComponent.default)(COMPONENT, DATA)).toBeTruthy();
+      });
+      it('should NOT be shown when the component has multiple show_when conditions, with type "or" provided and NONE are matched', function () {
+        var COMPONENT = {
+          show_when: {
+            "type": "or",
+            "conditions": [{
+              field: 'alpha',
+              op: '!=',
+              value: 'Alpha'
+            }, {
+              field: 'charlie',
+              op: '=',
+              value: 'Charlie'
+            }]
+          }
+        };
+        var DATA = {
+          alpha: 'Alpha',
+          bravo: 'Bravo'
+        };
+        expect((0, _showComponent.default)(COMPONENT, DATA)).toBeFalsy();
+      });
     });
   });
 });

package/dist/utils/Component/wrapInFormGroup.js

@@ -5,16 +5,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _copReactComponents = require("@ukhomeoffice/cop-react-components");
+
 var _react = _interopRequireDefault(require("react"));
 
-var _copReactComponents = require("@ukhomeoffice/cop-react-components");
+var _cleanAttributes = _interopRequireDefault(require("./cleanAttributes"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 var wrapInFormGroup = function wrapInFormGroup(config, children) {
-  return /*#__PURE__*/_react.default.createElement(_copReactComponents.FormGroup, _extends({}, config, {
+  var attrs = (0, _cleanAttributes.default)(config, ['fieldId', 'displayMenu']);
+  return /*#__PURE__*/_react.default.createElement(_copReactComponents.FormGroup, _extends({}, attrs, {
     onChange: null
   }), children);
 };

package/dist/utils/Condition/index.js

@@ -9,9 +9,12 @@ var _meetsAllConditions = _interopRequireDefault(require("./meetsAllConditions")
 
 var _meetsCondition = _interopRequireDefault(require("./meetsCondition"));
 
+var _meetsOneCondition = _interopRequireDefault(require("./meetsOneCondition"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var Condition = {
+  meetsOne: _meetsOneCondition.default,
   meetsAll: _meetsAllConditions.default,
   met: _meetsCondition.default
 };

package/dist/utils/Condition/meetsOneCondition.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _Data = _interopRequireDefault(require("../Data"));
+
+var _meetsCondition = _interopRequireDefault(require("./meetsCondition"));
+
+var _setupConditions = _interopRequireDefault(require("./setupConditions"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Local imports
+
+/**
+ * Evaluates all condition(s) on a page, container, or component.
+ * @param {object} options The container to consider.
+ * @param {object} data The top-level form data.
+ * @returns Boolean true if at least one conditions is met; false otherwise.
+ */
+var meetsOneCondition = function meetsOneCondition(options, data) {
+  var conditions = (0, _setupConditions.default)(options);
+
+  if (conditions) {
+    var arr = Array.isArray(conditions) ? conditions : [conditions];
+    return arr.some(function (condition) {
+      var sourceDataValue = _Data.default.getSource(data, condition.field);
+
+      return (0, _meetsCondition.default)(condition, sourceDataValue);
+    });
+  }
+
+  return true;
+};
+
+var _default = meetsOneCondition;
+exports.default = _default;

package/dist/utils/Condition/meetsOneCondition.test.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _meetsOneCondition = _interopRequireDefault(require("./meetsOneCondition"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Local imports
+describe('utils.Condition.meetsOneCondition', function () {
+  var DATA = {
+    alpha: 'bravo',
+    charlie: 'delta'
+  };
+  it('should evaluate to true when conditions are null', function () {
+    expect((0, _meetsOneCondition.default)(null, DATA)).toBeTruthy();
+  });
+  it('should evaluate to true when conditions are undefined', function () {
+    expect((0, _meetsOneCondition.default)(undefined, DATA)).toBeTruthy();
+  });
+  it('should evaluate to true when conditions is an empty array', function () {
+    var CONDITION = {
+      "type": "or",
+      "conditions": []
+    };
+    expect((0, _meetsOneCondition.default)(CONDITION, DATA)).toBeTruthy();
+  });
+  it('should evaluate to true when one condition is provided and one condition is met', function () {
+    var CONDITION = {
+      "type": "or",
+      "conditions": [{
+        field: 'alpha',
+        op: 'eq',
+        value: 'bravo'
+      }]
+    };
+    expect((0, _meetsOneCondition.default)(CONDITION, DATA)).toBeTruthy();
+  });
+  it('should evaluate to true when two conditions are provided and one condition is met', function () {
+    var CONDITION = {
+      "type": "or",
+      "conditions": [{
+        field: 'alpha',
+        op: 'eq',
+        value: 'bravo'
+      }, {
+        field: 'alpha',
+        op: 'eq',
+        value: "charlie"
+      }]
+    };
+    expect((0, _meetsOneCondition.default)(CONDITION, DATA)).toBeTruthy();
+  });
+  it('should evaluate to true when three conditions are provided and two conditions are met', function () {
+    var CONDITION = {
+      "type": "or",
+      "conditions": [{
+        field: 'alpha',
+        op: 'eq',
+        value: 'bravo'
+      }, {
+        field: 'charlie',
+        op: 'eq',
+        value: 'delta'
+      }, {
+        field: 'alpha',
+        op: 'eq',
+        value: "charlie"
+      }]
+    };
+    expect((0, _meetsOneCondition.default)(CONDITION, DATA)).toBeTruthy();
+  });
+  it('should evaluate to true when all conditions are met', function () {
+    var CONDITION = {
+      "type": "or",
+      "conditions": [{
+        field: 'alpha',
+        op: 'eq',
+        value: 'bravo'
+      }, {
+        field: 'charlie',
+        op: 'eq',
+        value: 'delta'
+      }]
+    };
+    expect((0, _meetsOneCondition.default)(CONDITION, DATA)).toBeTruthy();
+  });
+  it('should evaluate to false when no conditions are met', function () {
+    var CONDITION = {
+      "type": "or",
+      "conditions": [{
+        field: 'alpha',
+        op: 'eq',
+        value: 'delta'
+      }, {
+        field: 'charlie',
+        op: 'eq',
+        value: 'bravo'
+      }]
+    };
+    expect((0, _meetsOneCondition.default)(CONDITION, DATA)).toBeTruthy();
+  });
+});

package/dist/utils/Condition/setupConditions.js

@@ -17,12 +17,13 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 var makeComponentFieldsAbsolute = function makeComponentFieldsAbsolute(component) {
   if (component.show_when) {
+    var conditions = component.show_when.type ? component.show_when.conditions : component.show_when;
     var full_path = component.full_path;
-    var show_when = Array.isArray(component.show_when) ? component.show_when : [component.show_when];
-    return show_when.map(function (sw) {
-      var field = _Data.default.getDataPath(sw.field, full_path);
+    conditions = Array.isArray(conditions) ? conditions : [conditions];
+    return conditions.map(function (condition) {
+      var field = _Data.default.getDataPath(condition.field, full_path);
 
-      return _objectSpread(_objectSpread({}, sw), {}, {
+      return _objectSpread(_objectSpread({}, condition), {}, {
         field: field
       });
     });

package/dist/utils/Container/showContainer.js

@@ -41,6 +41,10 @@ var showContainer = function showContainer(container, data) {
 
 
   if (container.show_when) {
+    if (container.show_when.type === "or") {
+      return _Condition.default.meetsOne(container, data);
+    }
+
     return _Condition.default.meetsAll(container, data);
   } // If the container itself doesn't have a show_when, we need to make sure that if it
   // contains ANY editable components, at least one of them is shown.

package/dist/utils/Container/showContainer.test.js

@@ -125,4 +125,55 @@ describe('utils.Container.showContainer', function () {
     };
     expect((0, _showContainer.default)(CONTAINER, DATA)).toBeTruthy();
   });
+  it('SHOULD be shown when the container has multiple show_when conditions, with type "or" provided and ALL are matched', function () {
+    var CONTAINER = {
+      show_when: {
+        "type": "or",
+        "conditions": [{
+          field: 'alpha',
+          op: '=',
+          value: 'Alpha'
+        }, {
+          field: 'bravo',
+          op: '=',
+          value: 'Bravo'
+        }]
+      }
+    };
+    expect((0, _showContainer.default)(CONTAINER, DATA)).toBeTruthy();
+  });
+  it('SHOULD be shown when the container has multiple show_when conditions, with type "or" provided and at least ONE is matched', function () {
+    var CONTAINER = {
+      show_when: {
+        "type": "or",
+        "conditions": [{
+          field: 'alpha',
+          op: '=',
+          value: 'Alpha'
+        }, {
+          field: 'charlie',
+          op: '=',
+          value: 'Charlie'
+        }]
+      }
+    };
+    expect((0, _showContainer.default)(CONTAINER, DATA)).toBeTruthy();
+  });
+  it('should NOT be shown when the container has multiple show_when conditions, with type "or" provided and NONE are matched', function () {
+    var CONTAINER = {
+      show_when: {
+        "type": "or",
+        "conditions": [{
+          field: 'alpha',
+          op: '!=',
+          value: 'Alpha'
+        }, {
+          field: 'charlie',
+          op: '=',
+          value: 'Charlie'
+        }]
+      }
+    };
+    expect((0, _showContainer.default)(CONTAINER, DATA)).toBeFalsy();
+  });
 });

package/dist/utils/Data/getOptions.js

@@ -5,12 +5,29 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _copReactComponents = require("@ukhomeoffice/cop-react-components");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var interpolateOptions = function interpolateOptions(config, options) {
+  return options.map(function (opt) {
+    return _objectSpread(_objectSpread({}, opt), {}, {
+      value: _copReactComponents.Utils.interpolateString(opt.value, config.formData),
+      label: _copReactComponents.Utils.interpolateString(opt.label, config.formData)
+    });
+  });
+};
+
 var getOptions = function getOptions(config, callback) {
   if (config) {
     if (config.options) {
-      return callback(config.options);
+      return callback(interpolateOptions(config, config.options));
     } else if (config.data && config.data.options) {
-      return callback(config.data.options);
+      return callback(interpolateOptions(config, config.data.options));
     }
   }
 

package/dist/utils/FormPage/getFormPage.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _copReactComponents = require("@ukhomeoffice/cop-react-components");
-
 var _Container = _interopRequireDefault(require("../Container"));
 
 var _Data = _interopRequireDefault(require("../Data"));
@@ -37,8 +35,6 @@ var getFormPage = function getFormPage(pageOptions, formComponents, formData) {
     return null;
   }
 
-  pageOptions = interpolatePageOptions(pageOptions, formData);
-  formComponents = interpolateFormComponents(formComponents, formData);
   var components = pageOptions.components.map(function (componentOptions) {
     if (typeof componentOptions === 'string') {
       return (0, _getParagraphFromText.default)(componentOptions);
@@ -61,42 +57,6 @@ var getFormPage = function getFormPage(pageOptions, formComponents, formData) {
     actions: actions
   }));
 };
-/**
- * Interpolate 'Variable Expression' using formData - for local use only.
- * @param {object} pageOptions The JSON page.
- * @param {object} formData The top-level form data, used for setting up components.
- * @returns interpolated pageOptions.
- */
-
-
-var interpolatePageOptions = function interpolatePageOptions(pageOptions, formData) {
-  return JSON.parse(_copReactComponents.Utils.interpolateString(JSON.stringify(pageOptions), formData));
-};
-/**
- * Interpolate 'Variable Expression' using formData excluding each component's data block - for local use only.
- * @param {Array} formComponents The components defined at the top-level of the form.
- * @param {object} formData The top-level form data, used for setting up components.
- * @returns interpolated formComponents
- */
-
-
-var interpolateFormComponents = function interpolateFormComponents(formComponents, formData) {
-  return formComponents.map(function (formComponent) {
-    var formComponentDataUrl = undefined;
-
-    if (formComponent.data && formComponent.data.url) {
-      formComponentDataUrl = formComponent.data.url;
-    }
-
-    var interpolatedFormComponent = JSON.parse(_copReactComponents.Utils.interpolateString(JSON.stringify(formComponent), formData));
-
-    if (formComponentDataUrl) {
-      interpolatedFormComponent.data.url = formComponentDataUrl;
-    }
-
-    return interpolatedFormComponent;
-  });
-};
 
 var _default = getFormPage;
 exports.default = _default;

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

@@ -200,74 +200,6 @@ describe('utils', function () {
           formData: {}
         });
       });
-      it('should interpolate and handle a page that references a form-level component with formData', function () {
-        var PAGE = {
-          // eslint-disable-next-line no-template-curly-in-string
-          title: 'Page ${postFixTitle}',
-          components: ["Opening paragraph", {
-            type: 'heading',
-            size: 'l',
-            content: 'Page heading'
-          }, "Closing paragraph", {
-            use: 'c'
-          }, {
-            use: 'd'
-          }, "Kevin", {
-            use: 'e'
-          }]
-        };
-
-        var DATA = _objectSpread(_objectSpread({}, FORM_DATA), {}, {
-          currentUser: {
-            firstname: 'Bob',
-            surname: 'Kevin'
-          },
-          postFixTitle: 'Everyone'
-        });
-
-        var C = FORM_COMPONENTS[2];
-        var D = FORM_COMPONENTS[3];
-        var E = FORM_COMPONENTS[4];
-        expect((0, _getFormPage.default)(PAGE, FORM_COMPONENTS, DATA)).toEqual({
-          title: 'Page Everyone',
-          components: [{
-            type: 'html',
-            tagName: 'p',
-            content: PAGE.components[0]
-          }, _objectSpread(_objectSpread({}, PAGE.components[1]), {}, {
-            full_path: PAGE.components[1].fieldId
-          }), {
-            type: 'html',
-            tagName: 'p',
-            content: PAGE.components[2]
-          }, _objectSpread(_objectSpread({
-            use: 'c'
-          }, C), {}, {
-            cya_label: C.label,
-            data: {
-              url: "".concat(FORM_DATA.urls.refData, "/v3/charlies")
-            },
-            full_path: C.fieldId
-          }), _objectSpread(_objectSpread({
-            use: 'd'
-          }, D), {}, {
-            label: 'Roger ' + DATA.currentUser.firstname,
-            cya_label: 'Roger ' + DATA.currentUser.firstname,
-            full_path: D.fieldId
-          }), {
-            type: 'html',
-            tagName: 'p',
-            content: PAGE.components[5]
-          }, _objectSpread(_objectSpread({
-            use: 'e'
-          }, E), {}, {
-            label: 'Bravo ' + DATA.currentUser.surname,
-            cya_label: 'Bravo ' + DATA.currentUser.surname,
-            full_path: E.fieldId
-          })],
-          formData: DATA
-        });
-      });
     });
   });
 });

package/dist/utils/FormPage/showFormPage.js

@@ -41,6 +41,10 @@ var showFormPage = function showFormPage(page, data) {
 
 
   if (page.show_when) {
+    if (page.show_when.type === "or") {
+      return _Condition.default.meetsOne(page, data);
+    }
+
     return _Condition.default.meetsAll(page, data);
   } // If the page itself doesn't have a show_when, we need to make sure that if it
   // contains ANY editable components, at least one of them is shown.

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

@@ -126,6 +126,57 @@ describe('utils', function () {
         };
         expect((0, _showFormPage.default)(PAGE, DATA)).toBeTruthy();
       });
+      it('SHOULD be shown when the page has multiple show_when conditions, with type "or" provided and ALL are matched', function () {
+        var PAGE = {
+          show_when: {
+            "type": "or",
+            "conditions": [{
+              field: 'alpha',
+              op: '=',
+              value: 'Alpha'
+            }, {
+              field: 'bravo',
+              op: '=',
+              value: 'Bravo'
+            }]
+          }
+        };
+        expect((0, _showFormPage.default)(PAGE, DATA)).toBeTruthy();
+      });
+      it('SHOULD be shown when the page has multiple show_when conditions, with type "or" provided and at least ONE is matched', function () {
+        var PAGE = {
+          show_when: {
+            "type": "or",
+            "conditions": [{
+              field: 'alpha',
+              op: '=',
+              value: 'Alpha'
+            }, {
+              field: 'charlie',
+              op: '=',
+              value: 'Charlie'
+            }]
+          }
+        };
+        expect((0, _showFormPage.default)(PAGE, DATA)).toBeTruthy();
+      });
+      it('should NOT be shown when the page has multiple show_when conditions, with type "or" provided and NONE are matched', function () {
+        var PAGE = {
+          show_when: {
+            "type": "or",
+            "conditions": [{
+              field: 'alpha',
+              op: '!=',
+              value: 'Alpha'
+            }, {
+              field: 'charlie',
+              op: '=',
+              value: 'Charlie'
+            }]
+          }
+        };
+        expect((0, _showFormPage.default)(PAGE, DATA)).toBeFalsy();
+      });
     });
   });
 });

package/dist/utils/Validate/validatePage.js

@@ -5,13 +5,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _copReactComponents = require("@ukhomeoffice/cop-react-components");
+
 var _validateComponent = _interopRequireDefault(require("./validateComponent"));
 
 var _showFormPage = _interopRequireDefault(require("../FormPage/showFormPage"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// Local imports
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 /**
  * Validate all of the components on a page.
@@ -21,7 +27,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var validatePage = function validatePage(page) {
   if ((0, _showFormPage.default)(page, page.formData) && Array.isArray(page.components)) {
     return page.components.reduce(function (errors, component) {
-      return errors.concat((0, _validateComponent.default)(component, page.formData, page.formData));
+      return errors.concat((0, _validateComponent.default)(component, page.formData, page.formData)).map(function (err) {
+        return !!err ? _objectSpread(_objectSpread({}, err), {}, {
+          error: _copReactComponents.Utils.interpolateString(err.error, page.formData)
+        }) : err;
+      });
     }, []).filter(function (e) {
       return !!e;
     }).flat();

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

@@ -6,7 +6,12 @@ var _validatePage = _interopRequireDefault(require("./validatePage"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// Local imports
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 describe('utils', function () {
   describe('Validate', function () {
     describe('page', function () {
@@ -69,6 +74,46 @@ describe('utils', function () {
             error: 'Echo is required'
           });
         });
+        it('should return an error for each required component with interpolated label', function () {
+          var COMPONENTS = [// eslint-disable-next-line no-template-curly-in-string
+          setup('a', _models.ComponentTypes.TEXT, 'Alpha ${tiger}', true), // eslint-disable-next-line no-template-curly-in-string
+          setup('b', _models.ComponentTypes.EMAIL, 'Bravo ${panther}', true), // eslint-disable-next-line no-template-curly-in-string
+          setup('c', _models.ComponentTypes.AUTOCOMPLETE, 'Charlie ${eagle}', true), // eslint-disable-next-line no-template-curly-in-string
+          setup('d', _models.ComponentTypes.CHECKBOXES, 'Delta ${lion}', true), // eslint-disable-next-line no-template-curly-in-string
+          setup('e', _models.ComponentTypes.FILE, 'Echo ${zoo}', true)];
+          var PAGE = {
+            components: COMPONENTS,
+            formData: {
+              tiger: 'Tiger',
+              panther: 'Panther',
+              eagle: 'Eagle',
+              lion: 'Lion',
+              zoo: 'Zoo'
+            }
+          };
+          var RESULT = (0, _validatePage.default)(PAGE);
+          expect(RESULT.length).toEqual(5);
+          expect(RESULT[0]).toEqual({
+            id: 'a',
+            error: "Alpha ".concat(PAGE.formData.tiger, " is required")
+          });
+          expect(RESULT[1]).toEqual({
+            id: 'b',
+            error: "Bravo ".concat(PAGE.formData.panther, " is required")
+          });
+          expect(RESULT[2]).toEqual({
+            id: 'c',
+            error: "Charlie ".concat(PAGE.formData.eagle, " is required")
+          });
+          expect(RESULT[3]).toEqual({
+            id: 'd',
+            error: "Delta ".concat(PAGE.formData.lion, " is required")
+          });
+          expect(RESULT[4]).toEqual({
+            id: 'e',
+            error: "Echo ".concat(PAGE.formData.zoo, " is required")
+          });
+        });
       });
       describe('when the form data is fully valid', function () {
         var DATA = {
@@ -164,6 +209,28 @@ describe('utils', function () {
             error: 'Charlie is required'
           });
         });
+        it('should return an interpolated error for both invalid fields when all are required and email types', function () {
+          var COMPONENTS = [setup('alpha', _models.ComponentTypes.EMAIL, 'Alpha', true), // eslint-disable-next-line no-template-curly-in-string
+          setup('bravo', _models.ComponentTypes.EMAIL, 'Bravo ${lion}', true), // eslint-disable-next-line no-template-curly-in-string
+          setup('charlie', _models.ComponentTypes.EMAIL, 'Charlie ${panther}', true)];
+          var PAGE = {
+            components: COMPONENTS,
+            formData: _objectSpread(_objectSpread({}, DATA), {}, {
+              lion: 'Lion',
+              panther: 'Panther'
+            })
+          };
+          var RESULT = (0, _validatePage.default)(PAGE);
+          expect(RESULT.length).toEqual(2);
+          expect(RESULT[0]).toEqual({
+            id: 'bravo',
+            error: "Enter bravo ".concat(PAGE.formData.lion, " in the correct format, like jane.doe@homeoffice.gov.uk")
+          });
+          expect(RESULT[1]).toEqual({
+            id: 'charlie',
+            error: "Charlie ".concat(PAGE.formData.panther, " is required")
+          });
+        });
       });
     });
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "3.1.1",
+  "version": "3.2.4",
   "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": "1.7.3",
+    "@ukhomeoffice/cop-react-components": "1.7.4",
     "axios": "^0.21.1",
     "dayjs": "^1.11.0",
     "govuk-frontend": "^3.13.0",