@ukhomeoffice/cop-react-form-renderer 6.12.1 → 6.14.0

package/README.md

@@ -45,6 +45,9 @@ Runs Storybook on [http://localhost:6007](http://localhost:6007), which showcase
 
 Builds Storybook for production to the `storybook-static` folder.
 
+### `npm run yalc-publish`
+This will compile the code with source maps enabled and publish it to the local yalc repository in `~/.yalc` Any linked repositories will be automatically updated.
+
 # Using the Service
 ## Versioning
 For versioning this project uses SemVer.

package/dist/components/CollectionSummary/CollectionSummary.js

@@ -246,7 +246,9 @@ var CollectionSummary = function CollectionSummary(_ref) {
     id: "".concat(config.fieldId, ".addButton"),
     action: {
       collection: config.collectionName,
-      label: config.addButton.label || DEFAULT_ADD_BUTTON_LABEL,
+      label: _utils.default.interpolateString(config.addButton.label || DEFAULT_ADD_BUTTON_LABEL, {
+        documents: data
+      }),
       page: config.addButton.page,
       type: _PageAction.PageActionTypes.COLLECTION_ADD,
       classModifiers: ['secondary']
@@ -303,7 +305,9 @@ var CollectionSummary = function CollectionSummary(_ref) {
     id: "".concat(config.fieldId, ".addButton"),
     action: {
       collection: config.collectionName,
-      label: config.addButton.label || DEFAULT_ADD_BUTTON_LABEL,
+      label: _utils.default.interpolateString(config.addButton.label || DEFAULT_ADD_BUTTON_LABEL, {
+        documents: data
+      }),
       page: config.addButton.page,
       type: _PageAction.PageActionTypes.COLLECTION_ADD,
       classModifiers: ['secondary'],

package/dist/components/CollectionSummary/RenderListView.js

@@ -29,7 +29,7 @@ var DEFAULT_DELETE_BUTTON_LABEL = exports.DEFAULT_DELETE_BUTTON_LABEL = 'Delete'
 var DEFAULT_CHANGE_BUTTON_CLASS = exports.DEFAULT_CHANGE_BUTTON_CLASS = 'secondary';
 var DEFAULT_DELETE_BUTTON_CLASS = exports.DEFAULT_DELETE_BUTTON_CLASS = 'warning';
 var RenderListView = function RenderListView(_ref) {
-  var _config$changeAction, _config$deleteAction, _masterPage$childPage;
+  var _config$changeAction, _config$changeAction2, _config$changeAction3, _config$changeAction4, _config$deleteAction, _masterPage$childPage;
   var id = _ref.id,
     entryData = _ref.entryData,
     config = _ref.config,
@@ -59,16 +59,28 @@ var RenderListView = function RenderListView(_ref) {
     className: classes('actions')
   }, /*#__PURE__*/_react.default.createElement("li", {
     className: classes('action')
-  }, config.changeAction && typeof onFullEdit === 'function' && /*#__PURE__*/_react.default.createElement("button", {
+  }, config.changeAction && typeof onFullEdit === 'function' &&
+  // If passed a value for classModifiers, render a Button with those classModifiers applied - 
+  // otherwise, revert to the default GOVUK List View styling of rendering a Link button instead:
+  config.changeAction.classModifiers ? /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
+    id: "".concat(id, ".changeButton"),
+    onClick: function onClick() {
+      return onFullEdit(config.changeAction.page, entryData.id);
+    },
+    classModifiers: config.changeAction.classModifiers,
+    "aria-label": _copReactComponents.Utils.interpolateString("".concat(((_config$changeAction = config.changeAction) === null || _config$changeAction === void 0 ? void 0 : _config$changeAction.label) || DEFAULT_CHANGE_BUTTON_LABEL, " ").concat(config.title || DEFAULT_TITLE), _objectSpread(_objectSpread({}, entryData), {}, {
+      index: entryData.index + 1
+    }))
+  }, ((_config$changeAction2 = config.changeAction) === null || _config$changeAction2 === void 0 ? void 0 : _config$changeAction2.label) || DEFAULT_CHANGE_BUTTON_LABEL) : /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     className: "govuk-link govuk-link-button",
     onClick: function onClick() {
       return onFullEdit(config.changeAction.page, entryData.id);
     },
-    "aria-label": _copReactComponents.Utils.interpolateString("".concat(((_config$changeAction = config.changeAction) === null || _config$changeAction === void 0 ? void 0 : _config$changeAction.label) || DEFAULT_CHANGE_BUTTON_LABEL, " ").concat(config.title || DEFAULT_TITLE), _objectSpread(_objectSpread({}, entryData), {}, {
+    "aria-label": _copReactComponents.Utils.interpolateString("".concat(((_config$changeAction3 = config.changeAction) === null || _config$changeAction3 === void 0 ? void 0 : _config$changeAction3.label) || DEFAULT_CHANGE_BUTTON_LABEL, " ").concat(config.title || DEFAULT_TITLE), _objectSpread(_objectSpread({}, entryData), {}, {
       index: entryData.index + 1
     }))
-  }, config.changeAction.label || DEFAULT_CHANGE_BUTTON_LABEL)), /*#__PURE__*/_react.default.createElement("li", {
+  }, ((_config$changeAction4 = config.changeAction) === null || _config$changeAction4 === void 0 ? void 0 : _config$changeAction4.label) || DEFAULT_CHANGE_BUTTON_LABEL)), /*#__PURE__*/_react.default.createElement("li", {
     className: classes('action')
   }, config.deleteAction && typeof onDelete === 'function' && /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
     id: "".concat(id, ".deleteButton"),

package/dist/components/CollectionSummary/RenderListView.scss

@@ -289,3 +289,7 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
   background: none;
   border: none;
 }
+
+.hods-button {
+  margin: 0;
+}

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

@@ -224,7 +224,7 @@ describe('components.CollectionSummary.RenderListView', function () {
       onDeleteArgs = [];
       onDeleteCalls = 0;
     });
-    it('should render and handle action buttons correctly', function () {
+    it('should render and handle action buttons correctly, including a GOVUK default Change Link when no classModifiers are passed in', function () {
       var _renderWithValidation4 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_RenderListView.default, {
           id: ID,
           entryData: ENTRY,
@@ -238,7 +238,7 @@ describe('components.CollectionSummary.RenderListView', function () {
       var listViewDiv = container.querySelector('.govuk-summary-card');
       expect(listViewDiv).not.toBeNull();
 
-      // Check for change button
+      // Check for change link
       var changeLink = listViewDiv.querySelector('.govuk-link');
       expect(changeLink.textContent).toEqual(CONFIG.changeAction.label);
       expect(changeLink.getAttribute('aria-label')).toEqual("".concat(CONFIG.changeAction.label, " ").concat(CONFIG.title));
@@ -257,5 +257,38 @@ describe('components.CollectionSummary.RenderListView', function () {
       expect(onDeleteCalls).toEqual(1);
       expect(onDeleteArgs[0]).toEqual(ENTRY);
     });
+    it('should render and handle an Update button instead of the GOVUK default Change link when classModifiers are passed in', function () {
+      var CONFIG_WITH_BUTTON = _objectSpread(_objectSpread({}, CONFIG), {}, {
+        changeAction: {
+          label: 'Update label',
+          page: 'testPage',
+          classModifiers: 'primary'
+        }
+      });
+      var _renderWithValidation5 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_RenderListView.default, {
+          id: ID,
+          entryData: ENTRY,
+          config: CONFIG_WITH_BUTTON,
+          onFullEdit: ON_CHANGE,
+          onDelete: ON_DELETE,
+          masterPage: MASTER_PAGE,
+          getComponentRow: getComponentRow
+        })),
+        container = _renderWithValidation5.container;
+      var listViewDiv = container.querySelector('.govuk-summary-card');
+      expect(listViewDiv).not.toBeNull();
+
+      // Check for update button
+      var changeButton = listViewDiv.querySelector('.hods-button');
+      expect(changeButton.classList).toContain('hods-button--primary');
+      expect(changeButton.textContent).toEqual(CONFIG_WITH_BUTTON.changeAction.label);
+      expect(changeButton.getAttribute('aria-label')).toEqual("".concat(CONFIG_WITH_BUTTON.changeAction.label, " ").concat(CONFIG_WITH_BUTTON.title));
+      _react.fireEvent.click(changeButton, {});
+      expect(onChangeCalls).toEqual(1);
+      expect(onChangeArgs[0]).toMatchObject({
+        page: CONFIG_WITH_BUTTON.changeAction.page,
+        id: ENTRY.id
+      });
+    });
   });
 });

package/dist/components/CollectionSummary/SummaryCard.js

@@ -15,6 +15,7 @@ var _FormPage = _interopRequireDefault(require("../FormPage"));
 var _BannerStrip = _interopRequireDefault(require("./BannerStrip"));
 var _RenderListView = _interopRequireDefault(require("./RenderListView"));
 var _SummaryCardDetails = _interopRequireDefault(require("./SummaryCardDetails"));
+var _SummaryCardButtons = require("./SummaryCardButtons");
 require("./SummaryCard.scss");
 var _excluded = ["isDuplicate"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -47,7 +48,7 @@ var DEFAULT_DUPLICATE_BUTTON_LABEL = exports.DEFAULT_DUPLICATE_BUTTON_LABEL = 'D
 var DEFAULT_DETAILS_TITLE = exports.DEFAULT_DETAILS_TITLE = 'Full details';
 var DEFAULT_CHANGE_BUTTON_CLASS = exports.DEFAULT_CHANGE_BUTTON_CLASS = 'secondary';
 var SummaryCard = function SummaryCard(_ref) {
-  var _config$changeAction2, _config$changeAction3, _config$changeAction4, _config$deleteAction, _config$deleteAction2, _config$duplicateActi, _config$duplicateActi2, _config$fullDetails2;
+  var _config$deleteAction, _config$deleteAction2, _config$duplicateActi, _config$duplicateActi2, _config$fullDetails2;
   var id = _ref.id,
     entryData = _ref.entryData,
     config = _ref.config,
@@ -191,18 +192,16 @@ var SummaryCard = function SummaryCard(_ref) {
     disabled: quickEdit,
     name: "QuickEdit",
     autoFocus: config.focusOn
-  }, DEFAULT_EDIT_LABEL), config.changeAction && typeof onFullEdit === 'function' && /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
+  }, DEFAULT_EDIT_LABEL), config.changeAction && typeof onFullEdit === 'function' && /*#__PURE__*/_react.default.createElement(_SummaryCardButtons.SummaryCardButtons, {
     id: "".concat(id, ".changeButton"),
     "data-testid": "change-button",
-    onClick: function onClick() {
-      var _config$changeAction;
-      return onFullEdit((_config$changeAction = config.changeAction) === null || _config$changeAction === void 0 ? void 0 : _config$changeAction.page, entryData.id);
-    },
-    classModifiers: ((_config$changeAction2 = config.changeAction) === null || _config$changeAction2 === void 0 ? void 0 : _config$changeAction2.classModifiers) || DEFAULT_CHANGE_BUTTON_CLASS,
-    "aria-label": _utils.default.FormPage.getConditionalText((_config$changeAction3 = config.changeAction) === null || _config$changeAction3 === void 0 ? void 0 : _config$changeAction3.aria_label, entryData),
+    actions: config.changeAction,
+    onFullEdit: onFullEdit,
+    entryData: entryData,
+    formData: formData,
     name: "Change",
     autoFocus: config.focusOn
-  }, ((_config$changeAction4 = config.changeAction) === null || _config$changeAction4 === void 0 ? void 0 : _config$changeAction4.label) || DEFAULT_CHANGE_BUTTON_LABEL), config.deleteAction && typeof onDelete === 'function' && /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
+  }), config.deleteAction && typeof onDelete === 'function' && /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
     id: "".concat(id, ".deleteButton"),
     onClick: function onClick() {
       return onDelete(entryData);
@@ -250,12 +249,7 @@ SummaryCard.propTypes = {
     banners: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.shape({})])),
     title: _propTypes.default.string,
     details: _propTypes.default.string,
-    changeAction: _propTypes.default.shape({
-      label: _propTypes.default.string,
-      page: _propTypes.default.string.isRequired,
-      classModifiers: _propTypes.default.string,
-      aria_label: _propTypes.default.string
-    }),
+    changeAction: _propTypes.default.oneOfType([_propTypes.default.shape(_SummaryCardButtons.actionShape), _propTypes.default.arrayOf(_propTypes.default.shape(_SummaryCardButtons.actionShape))]),
     deleteAction: _propTypes.default.shape({
       label: _propTypes.default.string,
       aria_label: _propTypes.default.string

package/dist/components/CollectionSummary/SummaryCardButtons.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.actionShape = exports.SummaryCardButtons = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _copReactComponents = require("@ukhomeoffice/cop-react-components");
+var _SummaryCard = require("./SummaryCard");
+var _utils = _interopRequireDefault(require("../../utils"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var actionShape = exports.actionShape = {
+  label: _propTypes.default.string,
+  page: _propTypes.default.string.isRequired,
+  classModifiers: _propTypes.default.string,
+  aria_label: _propTypes.default.string
+};
+var SummaryCardButtons = exports.SummaryCardButtons = function SummaryCardButtons(_ref) {
+  var id = _ref.id,
+    testId = _ref["data-testid"],
+    actions = _ref.actions,
+    onFullEdit = _ref.onFullEdit,
+    entryData = _ref.entryData,
+    formData = _ref.formData,
+    name = _ref.name,
+    autoFocus = _ref.autoFocus;
+  if (!Array.isArray(actions)) {
+    return /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
+      id: id,
+      "data-testid": testId,
+      onClick: function onClick() {
+        return onFullEdit(actions === null || actions === void 0 ? void 0 : actions.page, entryData.id);
+      },
+      classModifiers: (actions === null || actions === void 0 ? void 0 : actions.classModifiers) || _SummaryCard.DEFAULT_CHANGE_BUTTON_CLASS,
+      "aria-label": _utils.default.FormPage.getConditionalText(actions === null || actions === void 0 ? void 0 : actions.aria_label, entryData),
+      name: name,
+      autoFocus: autoFocus
+    }, (actions === null || actions === void 0 ? void 0 : actions.label) || _SummaryCard.DEFAULT_CHANGE_BUTTON_LABEL);
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, actions.filter(function (a) {
+    return _utils.default.Component.show(a, formData);
+  }).map(function (action) {
+    return /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
+      id: id,
+      key: id,
+      "data-testid": testId,
+      onClick: function onClick() {
+        return onFullEdit(action === null || action === void 0 ? void 0 : action.page, entryData.id);
+      },
+      classModifiers: (action === null || action === void 0 ? void 0 : action.classModifiers) || _SummaryCard.DEFAULT_CHANGE_BUTTON_CLASS,
+      "aria-label": _utils.default.FormPage.getConditionalText(action === null || action === void 0 ? void 0 : action.aria_label, entryData),
+      name: name,
+      autoFocus: autoFocus
+    }, (action === null || action === void 0 ? void 0 : action.label) || _SummaryCard.DEFAULT_CHANGE_BUTTON_LABEL);
+  }));
+};
+SummaryCardButtons.propTypes = {
+  id: _propTypes.default.string.isRequired,
+  "data-testid": _propTypes.default.string,
+  entryData: _propTypes.default.shape({
+    id: _propTypes.default.string.isRequired,
+    index: _propTypes.default.number.isRequired
+  }).isRequired,
+  onFullEdit: _propTypes.default.func,
+  autoFocus: _propTypes.default.bool,
+  name: _propTypes.default.string,
+  actions: _propTypes.default.oneOfType([_propTypes.default.shape(actionShape), _propTypes.default.arrayOf(_propTypes.default.shape(actionShape))]).isRequired,
+  formData: _propTypes.default.shape({}).isRequired
+};
+SummaryCardButtons.defaultProps = {
+  onFullEdit: null,
+  "data-testid": null,
+  autoFocus: null,
+  name: null
+};

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

@@ -0,0 +1,83 @@
+"use strict";
+
+require("@testing-library/jest-dom/extend-expect");
+var _react = _interopRequireDefault(require("react"));
+var _setupTests = require("../../setupTests");
+var _SummaryCardButtons = require("./SummaryCardButtons");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// Global imports.
+
+// Local imports.
+
+describe('components.CollectionSummary.SummaryCardButtons', function () {
+  var ID = 'summaryCardId';
+  var ENTRY = {
+    id: '001',
+    bannerText: 'A banner',
+    titleText: 'A title',
+    detailsText: 'Some details',
+    index: 0,
+    summaryText: 'Full details'
+  };
+  it('should correctly render a SummaryCardButtons component', function () {
+    var CONFIG = {
+      changeAction: {
+        label: 'Change label',
+        page: 'testPage',
+        aria_label: [{
+          text: 'testText'
+        }]
+      }
+    };
+    var _renderWithValidation = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardButtons.SummaryCardButtons, {
+        id: "".concat(ID, ".changeButton"),
+        "data-testid": "change-button",
+        actions: CONFIG.changeAction,
+        name: "Change",
+        entryData: ENTRY,
+        formData: {}
+      })),
+      container = _renderWithValidation.container;
+    var changeButton = container.children[0];
+    expect(changeButton.name).toEqual('Change');
+    expect(changeButton.tagName).toEqual('BUTTON');
+    expect(changeButton.textContent).toEqual(CONFIG.changeAction.label);
+    expect(changeButton.getAttribute('aria-label')).toEqual(CONFIG.changeAction.aria_label[0].text);
+  });
+  it('should correctly render a SummaryCardButtons component when array of buttons', function () {
+    var CONFIG = {
+      changeAction: [{
+        label: 'Change label',
+        page: 'testPage',
+        aria_label: [{
+          text: 'testText'
+        }]
+      }, {
+        label: 'Invalid label',
+        page: 'testPage',
+        aria_label: [{
+          text: 'testText'
+        }],
+        show_when: {
+          field: "test",
+          op: "=",
+          value: true
+        }
+      }]
+    };
+    var _renderWithValidation2 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_SummaryCardButtons.SummaryCardButtons, {
+        id: "".concat(ID, ".changeButton"),
+        "data-testid": "change-button",
+        actions: CONFIG.changeAction,
+        name: "Change",
+        entryData: ENTRY,
+        formData: {}
+      })),
+      container = _renderWithValidation2.container;
+    var changeButton = container.children[0];
+    expect(changeButton.name).toEqual('Change');
+    expect(changeButton.tagName).toEqual('BUTTON');
+    expect(changeButton.textContent).toEqual(CONFIG.changeAction[0].label);
+    expect(changeButton.getAttribute('aria-label')).toEqual(CONFIG.changeAction[0].aria_label[0].text);
+  });
+});

package/dist/components/FormComponent/Collection.js

@@ -118,11 +118,13 @@ var Collection = function Collection(_ref) {
   (0, _react.useEffect)(function () {
     if (config.focusOnAdd && Array.isArray(value) && value.length) {
       if (value.length > config.minimumEntries || !config.minimumEntries) {
-        var _value2, _document$getElementB, _focusable$;
+        var _value2, _document$getElementB;
         var containerId = (_value2 = value[value.length - 1]) === null || _value2 === void 0 ? void 0 : _value2.id;
         var container = (_document$getElementB = document.getElementById(containerId)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.childNodes[0];
         var focusable = container === null || container === void 0 ? void 0 : container.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-        (_focusable$ = focusable[0]) === null || _focusable$ === void 0 || _focusable$.focus();
+        if (focusable && focusable.length > 0) {
+          focusable[0].focus();
+        }
       }
     }
   }, [value.length, config.focusOnAdd, config.minimumEntries]);
@@ -140,7 +142,7 @@ var Collection = function Collection(_ref) {
     id: config.id,
     required: config.required,
     className: classes('title')
-  }, config.label), value && value.map(function (item, index) {
+  }, config.label), Array.isArray(value) && value.map(function (item, index) {
     var _config$removeLocatio;
     var fullPath = "".concat(config.full_path || config.fieldId, "[").concat(index, "]");
     var labelCount = (config.countOffset || 0) + index + 1;

package/dist/components/FormPage/FormPage.js

@@ -31,7 +31,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } // Global
 // Styles
 var DEFAULT_CLASS = exports.DEFAULT_CLASS = 'hods-form__page';
 var FormPage = function FormPage(_ref) {
-  var _formPage$actions, _page$actions;
+  var _page$customValidatio, _formPage$actions, _page$actions;
   var page = _ref.page,
     pages = _ref.pages,
     _onAction = _ref.onAction,
@@ -42,17 +42,33 @@ var FormPage = function FormPage(_ref) {
     classBlock = _ref.classBlock,
     classModifiers = _ref.classModifiers,
     className = _ref.className,
-    submitting = _ref.submitting;
+    submitting = _ref.submitting,
+    pageId = _ref.pageId,
+    fromTarget = _ref.fromTarget;
   var _useState = (0, _react.useState)({}),
     _useState2 = _slicedToArray(_useState, 2),
     patch = _useState2[0],
     setPatch = _useState2[1];
   var _useValidation = (0, _hooks.useValidation)(),
-    errors = _useValidation.errors;
+    errors = _useValidation.errors,
+    validate = _useValidation.validate;
   var _useState3 = (0, _react.useState)({}),
     _useState4 = _slicedToArray(_useState3, 2),
     patchLabel = _useState4[0],
     setPatchLabel = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isPageRendered = _useState6[0],
+    setIsPageRendered = _useState6[1];
+  var runOnLoad = Array.isArray(page === null || page === void 0 ? void 0 : page.customValidation) && page.customValidation.length > 0 ? ((_page$customValidatio = page.customValidation[0]) === null || _page$customValidatio === void 0 || (_page$customValidatio = _page$customValidatio.runWhen) === null || _page$customValidatio === void 0 ? void 0 : _page$customValidatio.onLoad) === true : false;
+  (0, _react.useEffect)(function () {
+    setIsPageRendered(true);
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (isPageRendered && fromTarget && runOnLoad) {
+      validate.page(page);
+    }
+  }, [pageId, isPageRendered]);
 
   /**
    * Handle the state of the data directly within the page.
@@ -121,11 +137,20 @@ var FormPage = function FormPage(_ref) {
       submitting: submitting
     });
   });
+  var errorMessages = null;
+  if (runOnLoad && (errors === null || errors === void 0 ? void 0 : errors.length) > 0) {
+    var _page$customValidatio2;
+    errorMessages = [{
+      error: page === null || page === void 0 || (_page$customValidatio2 = page.customValidation) === null || _page$customValidatio2 === void 0 || (_page$customValidatio2 = _page$customValidatio2[0]) === null || _page$customValidatio2 === void 0 ? void 0 : _page$customValidatio2.message
+    }];
+  } else if ((errors === null || errors === void 0 ? void 0 : errors.length) > 0 && !runOnLoad) {
+    errorMessages = errors;
+  }
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes(),
     key: page.id
-  }, (errors === null || errors === void 0 ? void 0 : errors.length) > 0 && /*#__PURE__*/_react.default.createElement(_copReactComponents.ErrorSummary, {
-    errors: errors,
+  }, errorMessages && /*#__PURE__*/_react.default.createElement(_copReactComponents.ErrorSummary, {
+    errors: errorMessages,
     hashLink: hashLink
   }), page.fieldset && /*#__PURE__*/_react.default.createElement("fieldset", {
     className: "govuk-fieldset"
@@ -162,10 +187,18 @@ FormPage.propTypes = {
     label: _propTypes.default.string,
     required: _propTypes.default.bool,
     actions: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({}), _propTypes.default.string])),
-    formData: _propTypes.default.shape({}).isRequired
+    formData: _propTypes.default.shape({}).isRequired,
+    customValidation: _propTypes.default.arrayOf(_propTypes.default.shape({
+      runWhen: _propTypes.default.shape({
+        onLoad: _propTypes.default.bool
+      }).isRequired,
+      message: _propTypes.default.string.isRequired
+    }))
   }).isRequired,
   pages: _propTypes.default.arrayOf(_propTypes.default.shape({})),
-  submitting: _propTypes.default.bool
+  submitting: _propTypes.default.bool,
+  fromTarget: _propTypes.default.bool,
+  pageId: _propTypes.default.string.isRequired
 };
 FormPage.defaultProps = {
   classBlock: DEFAULT_CLASS,
@@ -176,6 +209,7 @@ FormPage.defaultProps = {
   onTopLevelChange: undefined,
   onWrapperChange: undefined,
   pages: [],
-  submitting: false
+  submitting: false,
+  fromTarget: false
 };
 var _default = exports.default = FormPage;

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

@@ -2,6 +2,7 @@
 
 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); }
 var _react = require("@testing-library/react");
+require("@testing-library/jest-dom");
 var _react2 = _interopRequireDefault(require("react"));
 var _models = require("../../models");
 var _setupTests = require("../../setupTests");
@@ -53,6 +54,30 @@ describe('components.FormPage', function () {
         text: VALUE
       }
     };
+    var PAGE_WITH_CUSTOM_VALIDATION = {
+      id: 'pageId',
+      title: 'Page with Custom Validation',
+      components: [TEXT],
+      actions: [_models.PageAction.TYPES.SUBMIT],
+      formData: {
+        text: VALUE
+      },
+      customValidation: [{
+        message: 'Custom validation failed',
+        runWhen: {
+          onLoad: true
+        }
+      }]
+    };
+    var PAGE_WITHOUT_CUSTOM_VALIDATION = {
+      id: 'pageId',
+      title: 'Page without Custom Validation',
+      components: [TEXT],
+      actions: [_models.PageAction.TYPES.SUBMIT],
+      formData: {
+        text: VALUE
+      }
+    };
     var PAGE_WITH_BUTTON_ACTIONS = {
       id: 'pageId',
       // eslint-disable-next-line no-template-curly-in-string
@@ -328,5 +353,41 @@ describe('components.FormPage', function () {
         }
       }, _callee5);
     })));
+    it('should not trigger custom validation when fromTarget is false', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
+      var _renderWithValidation6, queryByText;
+      return _regeneratorRuntime().wrap(function _callee6$(_context6) {
+        while (1) switch (_context6.prev = _context6.next) {
+          case 0:
+            _renderWithValidation6 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormPage.default, {
+              page: PAGE_WITH_CUSTOM_VALIDATION,
+              fromTarget: false,
+              onAction: ON_ACTION
+            })), queryByText = _renderWithValidation6.queryByText;
+            _context6.next = 3;
+            return (0, _react.waitFor)(function () {
+              expect(queryByText('Custom validation failed')).toBeNull();
+            });
+          case 3:
+          case "end":
+            return _context6.stop();
+        }
+      }, _callee6);
+    })));
+    it('should not trigger custom validation if no customValidation is provided', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7() {
+      return _regeneratorRuntime().wrap(function _callee7$(_context7) {
+        while (1) switch (_context7.prev = _context7.next) {
+          case 0:
+            (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormPage.default, {
+              page: PAGE_WITHOUT_CUSTOM_VALIDATION,
+              fromTarget: true,
+              onAction: ON_ACTION
+            }));
+            expect(ON_ACTION_CALLS.length).toEqual(0);
+          case 2:
+          case "end":
+            return _context7.stop();
+        }
+      }, _callee7);
+    })));
   });
 });

package/dist/components/FormRenderer/FormRenderer.js

@@ -60,7 +60,8 @@ var FormRenderer = function FormRenderer(_ref) {
     noChangeAction = _ref.noChangeAction,
     newPageId = _ref.newPageId,
     viewOnly = _ref.viewOnly,
-    hideBlankRows = _ref.hideBlankRows;
+    hideBlankRows = _ref.hideBlankRows,
+    fromTarget = _ref.fromTarget;
   return /*#__PURE__*/_react.default.createElement(_context.HooksContextProvider, {
     overrides: hooks
   }, /*#__PURE__*/_react.default.createElement(_context.ValidationContextProvider, null, /*#__PURE__*/_react.default.createElement(InternalFormRenderer, {
@@ -80,7 +81,8 @@ var FormRenderer = function FormRenderer(_ref) {
     noChangeAction: noChangeAction,
     newPageId: newPageId,
     viewOnly: viewOnly,
-    hideBlankRows: hideBlankRows
+    hideBlankRows: hideBlankRows,
+    fromTarget: fromTarget
   })));
 };
 var DEFAULT_CLASS = exports.DEFAULT_CLASS = 'hods-form';
@@ -102,7 +104,8 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
     noChangeAction = _ref2.noChangeAction,
     newPageId = _ref2.newPageId,
     viewOnly = _ref2.viewOnly,
-    hideBlankRows = _ref2.hideBlankRows;
+    hideBlankRows = _ref2.hideBlankRows,
+    fromTarget = _ref2.fromTarget;
   // Set up the initial states.
   var _useState = (0, _react.useState)({}),
     _useState2 = _slicedToArray(_useState, 2),
@@ -364,7 +367,9 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
     hashLink: hashLink,
     classModifiers: formState.page.classModifiers,
     className: formState.page.className,
-    submitting: submitting
+    submitting: submitting,
+    pageId: pageId,
+    fromTarget: fromTarget
   }), formState.page && !formState.cya && formState.page.collection && /*#__PURE__*/_react.default.createElement(_CollectionPage.default, {
     page: formState.page,
     pages: pages,
@@ -407,7 +412,8 @@ var propTypes = {
   /** See <a href="/?path=/docs/f-json--page#formtypes">FormTypes</a>. */
   type: _propTypes.default.oneOf([_models.FormTypes.CYA, _models.FormTypes.FORM, _models.FormTypes.HUB, _models.FormTypes.TASK, _models.FormTypes.WIZARD, _models.FormTypes.TASK_CYA, _models.FormTypes.FORM_WITH_TASK]).isRequired,
   viewOnly: _propTypes.default.bool,
-  hideBlankRows: _propTypes.default.bool
+  hideBlankRows: _propTypes.default.bool,
+  fromTarget: _propTypes.default.bool.isRequired
 };
 var defaultProps = {
   classBlock: DEFAULT_CLASS,

package/dist/utils/CheckYourAnswers/getCYARowsForCollectionPage.js

@@ -215,6 +215,9 @@ var getCYARowsForCollectionPage = function getCYARowsForCollectionPage(page, onA
   }
   collectionData.forEach(function (item) {
     var _page$collection2;
+    if (!item) {
+      return; // Skip this iteration if item is undefined
+    }
     // Keep track of the active entry in each collection.
     // This helps us make sure the right entry is being affected
     // by change/remove links.

package/dist/utils/CheckYourAnswers/getCYARowsForContainer.js

@@ -18,7 +18,9 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
 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
 var getCYARowsForContainer = function getCYARowsForContainer(page, container, formData, onAction, fnOverride) {
   if ((0, _showComponentCYA.default)(container, _objectSpread(_objectSpread({}, page.formData), formData))) {
-    var allComponents = (0, _elevateNestedComponents.default)(container.components, formData);
+    var allComponents = (0, _elevateNestedComponents.default)(container.components.filter(function (component) {
+      return component.show_on_cya === undefined || component.show_on_cya;
+    }), formData);
     return allComponents.filter(function (c) {
       return (0, _showComponentCYA.default)(c, _objectSpread(_objectSpread({}, page.formData), formData));
     }).flatMap(function (component) {

package/dist/utils/CheckYourAnswers/getCYARowsForContainer.test.js

@@ -151,6 +151,48 @@ describe('utils.CheckYourAnswers.getCYARowsForContainer', function () {
       });
     });
   });
+  it('should not display nested input components when passed a value of false for "show_on_cya" at the parent component level', function () {
+    var FORM_DATA = {
+      container: {
+        topLevelInput: 'A',
+        nestedInput: 'Bravo'
+      }
+    };
+    var PAGE = {
+      id: 'page',
+      formData: FORM_DATA,
+      cya_link: {}
+    };
+    var NESTED_COMPONENT = {
+      type: 'text',
+      id: 'nestedInput',
+      fieldId: 'nestedInput',
+      label: 'Nested input',
+      value: 'Bravo'
+    };
+    var COMPONENT = {
+      type: 'checkboxes',
+      id: 'topLevelInput',
+      fieldId: 'topLevelInput',
+      label: 'Top level input',
+      show_on_cya: false,
+      options: [{
+        value: 'A',
+        label: 'Option Alpha',
+        nested: [NESTED_COMPONENT]
+      }]
+    };
+    var CONTAINER = {
+      id: 'container',
+      fieldId: 'container',
+      type: _models.ComponentTypes.CONTAINER,
+      components: [COMPONENT],
+      value: FORM_DATA
+    };
+    var ON_ACTION = function ON_ACTION() {};
+    var ROWS = (0, _getCYARowsForContainer.default)(PAGE, CONTAINER, FORM_DATA.container, ON_ACTION);
+    expect(ROWS.length).toEqual(0);
+  });
   it('should get an appropriate row for a container with a single readonly text component inside a nested container', function () {
     var FORM_DATA = {
       container: {

package/dist/utils/Component/getComponent.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getChildrenJsx = exports.default = void 0;
 var _copReactComponents = require("@ukhomeoffice/cop-react-components");
 var _react = _interopRequireDefault(require("react"));
+var _Condition = _interopRequireDefault(require("../Condition"));
 var _models = require("../../models");
 var _Data = _interopRequireDefault(require("../Data"));
 var _cleanAttributes = _interopRequireDefault(require("./cleanAttributes"));
@@ -265,11 +266,14 @@ var getChildJsx = function getChildJsx(parent, paramChild) {
  * @param {*} childrenConfigs array of configurations for the child components
  */
 var getChildrenJsx = exports.getChildrenJsx = function getChildrenJsx(parentConfig, childrenConfigs) {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, childrenConfigs.map(function (config) {
+  var validChildren = childrenConfigs.filter(function (config) {
+    return !(config.show_when && !_Condition.default.meetsAll(config.show_when, parentConfig.formData));
+  }).map(function (config) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
       key: config.id
     }, getChildJsx(parentConfig, config));
-  }));
+  });
+  return validChildren.length > 0 ? validChildren : null;
 };
 /**
  * Get a renderable component, based on a configuration object.

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

@@ -180,4 +180,56 @@ describe('utils.Component.get', function () {
       }
     }, _callee4);
   })));
+  it('should correctly show nested component with show_when', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
+    var FIELD_ID, VALUE, VisibleComponent, HiddenComponent, PARENT_CONFIG, _renderWithValidation4, container, child, label, input;
+    return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          FIELD_ID = 'fieldId';
+          VALUE = 'nestedValue';
+          VisibleComponent = {
+            id: 'testId',
+            fieldId: FIELD_ID,
+            label: 'Test label',
+            type: 'text',
+            show_when: [{
+              field: FIELD_ID,
+              op: "=",
+              value: VALUE
+            }]
+          };
+          HiddenComponent = {
+            id: 'hiddenID',
+            fieldId: "hiddenFeild",
+            label: 'Hidden label',
+            type: 'text',
+            show_when: [{
+              field: FIELD_ID,
+              op: "!=",
+              value: VALUE
+            }]
+          };
+          PARENT_CONFIG = {
+            onChange: function onChange() {},
+            formData: _defineProperty({}, FIELD_ID, VALUE)
+          };
+          _renderWithValidation4 = (0, _setupTests.renderWithValidation)((0, _getComponent.getChildrenJsx)(PARENT_CONFIG, [VisibleComponent, HiddenComponent])), container = _renderWithValidation4.container;
+          expect(container.childNodes.length).toEqual(1);
+          child = container.childNodes[0];
+          expect(child.childNodes[0].childNodes.length).toEqual(2);
+          expect(child.classList).toContain('govuk-form-group');
+          label = child.childNodes[0];
+          expect(label).toBeDefined();
+          expect(label.innerHTML).toContain(VisibleComponent.label);
+          input = child.childNodes[2];
+          expect(input.tagName).toEqual('INPUT');
+          expect(input.classList).toContain('govuk-input');
+          expect(input.id).toEqual("".concat(VisibleComponent.id));
+          expect(input.value).toEqual(VALUE);
+        case 18:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee5);
+  })));
 });

package/dist/utils/Data/getOptions.js

@@ -26,6 +26,9 @@ var interpolateOptions = function interpolateOptions(config, options) {
     if (typeof opt === 'string') {
       return opt;
     }
+    if (!opt.value) {
+      return opt.label;
+    }
     if (config.alternativeHintField) {
       // eslint-disable-next-line no-param-reassign
       opt.hint = opt[config.alternativeHintField];
@@ -39,13 +42,44 @@ var interpolateOptions = function interpolateOptions(config, options) {
     return n;
   });
 };
+
+/**
+ * Returns a list of options templated from a collection specified. 
+ * config requires a item field with the templated options  e.g 
+ * "item": {
+ * "value": "${id}"
+ * "label": "${name}"
+ * "hint": "Select a person name"
+ * }
+ * @param {*} config 
+ * @param {*} collectionName 
+ * @returns 
+ */
+var getCollectionOptions = function getCollectionOptions(config, collectionName) {
+  var collectionOptions = config.formData[collectionName].map(function (collection) {
+    return {
+      value: _copReactComponents.Utils.interpolateString(config.item.value, collection),
+      label: _copReactComponents.Utils.interpolateString(config.item.label, collection),
+      hint: _copReactComponents.Utils.interpolateString(config.item.hint, collection)
+    };
+  });
+  if (config.data.options) {
+    return [].concat(collectionOptions, config.data.options);
+  }
+  return collectionOptions;
+};
 var getOptions = function getOptions(config, callback) {
   if (config) {
-    var _config$data, _config$data2;
-    if (config.options && config !== null && config !== void 0 && (_config$data = config.data) !== null && _config$data !== void 0 && _config$data.options && config !== null && config !== void 0 && (_config$data2 = config.data) !== null && _config$data2 !== void 0 && _config$data2.url) {
-      var combinedOptions = (0, _nestInRefdataOptions.default)(config.options, config.data.options);
+    var _config$data, _config$data3, _config$data4;
+    if (config !== null && config !== void 0 && (_config$data = config.data) !== null && _config$data !== void 0 && _config$data.collection && config !== null && config !== void 0 && config.item) {
+      var _config$data2;
+      var combinedOptions = getCollectionOptions(config, config === null || config === void 0 || (_config$data2 = config.data) === null || _config$data2 === void 0 ? void 0 : _config$data2.collection);
       return callback(interpolateOptions(config, combinedOptions));
     }
+    if (config.options && config !== null && config !== void 0 && (_config$data3 = config.data) !== null && _config$data3 !== void 0 && _config$data3.options && config !== null && config !== void 0 && (_config$data4 = config.data) !== null && _config$data4 !== void 0 && _config$data4.url) {
+      var _combinedOptions = (0, _nestInRefdataOptions.default)(config.options, config.data.options);
+      return callback(interpolateOptions(config, _combinedOptions));
+    }
     if (config.options) {
       return callback(interpolateOptions(config, config.options));
     }

package/dist/utils/Data/getOptions.test.js

@@ -28,6 +28,16 @@ describe('utils', function () {
           expect(options).toEqual(CONFIG.options);
         });
       });
+      it('should handle stings in option and if no value is supplied treat it as a string', function () {
+        var CONFIG = {
+          options: ["or", {
+            label: "and"
+          }]
+        };
+        (0, _getOptions.default)(CONFIG, function (options) {
+          expect(options).toEqual(["or", "and"]);
+        });
+      });
       it('should get any specified options from the data property of the config', function () {
         var CONFIG = {
           data: {
@@ -46,6 +56,44 @@ describe('utils', function () {
           expect(options).toEqual(CONFIG.data.options);
         });
       });
+      it('should get options from form data collection', function () {
+        var CONFIG = {
+          data: {
+            collection: "people"
+          },
+          item: {
+            /* eslint-disable no-template-curly-in-string */
+            label: "${name}",
+            value: "${name}",
+            hint: "${name}"
+            /* eslint-enable no-template-curly-in-string */
+          },
+
+          formData: {
+            people: [{
+              "name": "test"
+            }]
+          }
+        };
+        (0, _getOptions.default)(CONFIG, function (options) {
+          expect(options[0].hint).toEqual("test");
+        });
+      });
+      it('should not show options if there is collection but not item data', function () {
+        var CONFIG = {
+          data: {
+            collection: "people"
+          },
+          formData: {
+            people: [{
+              "name": "test"
+            }]
+          }
+        };
+        (0, _getOptions.default)(CONFIG, function (options) {
+          expect(options).toEqual([]);
+        });
+      });
       it('should use the top-level options over those in the data property', function () {
         var CONFIG = {
           options: [{

package/dist/utils/FormPage/getFormPage.js

@@ -9,6 +9,7 @@ var _Data = _interopRequireDefault(require("../Data"));
 var _getPageActions = _interopRequireDefault(require("./getPageActions"));
 var _getParagraphFromText = _interopRequireDefault(require("./getParagraphFromText"));
 var _useComponent = _interopRequireDefault(require("./useComponent"));
+var _models = require("../../models");
 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); }
 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; }
@@ -32,6 +33,12 @@ var getFormPage = function getFormPage(pageOptions, formComponents, formData) {
       return (0, _getParagraphFromText.default)(componentOptions);
     }
     var ret;
+    if (componentOptions.type === _models.ComponentTypes.CONTAINER) {
+      // eslint-disable-next-line no-param-reassign
+      componentOptions.components = componentOptions.components.map(function (cmp) {
+        return cmp.use ? (0, _useComponent.default)(cmp, formComponents) : cmp;
+      });
+    }
     if (componentOptions.use) {
       ret = (0, _useComponent.default)(componentOptions, formComponents);
     } else {

package/dist/utils/FormPage/useComponent.js

@@ -53,6 +53,17 @@ var getComponentToUse = function getComponentToUse(toUse, formComponents) {
     } else {
       wrapper = component;
     }
+
+    // this allows us to have the 'use: component' functionality inside item array
+    if (component.item && Array.isArray(component.item)) {
+      component.item = component.item.map(function (item) {
+        if (item.use) {
+          // eslint-disable-next-line no-use-before-define
+          return useComponent(item, formComponents);
+        }
+        return item;
+      });
+    }
     return wrapper;
   }
 

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

@@ -175,6 +175,42 @@ describe('utils', function () {
           label: TO_USE.label
         }));
       });
+      it('should handle nested use references within item', function () {
+        var SEARCH_METHOD = {
+          id: 'searchMethod',
+          label: 'Search Method',
+          type: _models.ComponentTypes.TEXT
+        };
+        var SEARCH_TECHNIQUES = {
+          id: 'searchTechniques',
+          label: 'Search Techniques',
+          type: _models.ComponentTypes.CONTAINER,
+          item: [{
+            use: 'searchMethod',
+            data: {
+              url: 'https://api.example.com/searchtype'
+            }
+          }]
+        };
+        var EXTENDED_FORM_COMPONENTS = [].concat(FORM_COMPONENTS, [SEARCH_METHOD, SEARCH_TECHNIQUES]);
+        var TO_USE = {
+          use: 'searchTechniques'
+        };
+        var expectedComponent = _objectSpread(_objectSpread({
+          use: 'searchTechniques'
+        }, SEARCH_TECHNIQUES), {}, {
+          cya_label: SEARCH_TECHNIQUES.label,
+          item: [_objectSpread(_objectSpread({
+            use: 'searchMethod'
+          }, SEARCH_METHOD), {}, {
+            cya_label: SEARCH_METHOD.label,
+            data: {
+              url: 'https://api.example.com/searchtype'
+            }
+          })]
+        });
+        expect((0, _useComponent.default)(TO_USE, EXTENDED_FORM_COMPONENTS)).toEqual(expectedComponent);
+      });
     });
   });
 });

package/dist/utils/Validate/validateEmail.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 // eslint-disable-next-line no-control-regex
 // const EMAIL_REGEX = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/i;
 var HODS_EMAIL_REGEX = /^[a-z0-9._\-']+@(digital\.)?homeoffice.gov.uk$/i;
+var JMSC_EMAIL_REGEX = /^[a-z0-9._\-']+@jmsc.gov.uk$/i;
 
 /**
  * Validates an email address, ensuring it is in the correct domain and
@@ -26,7 +27,7 @@ var validateEmail = function validateEmail(value) {
   if (!!value) {
     var name = label ? label.toLowerCase() : 'email address';
     if (typeof value === 'string') {
-      if (HODS_EMAIL_REGEX.test(value)) {
+      if (HODS_EMAIL_REGEX.test(value) || JMSC_EMAIL_REGEX.test(value)) {
         return undefined;
       }
     }

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

@@ -14,6 +14,9 @@ describe('utils', function () {
       it('should return no error when the value is a valid .gov.uk address', function () {
         expect((0, _validateEmail.default)('alpha@homeoffice.gov.uk', LABEL)).toBeUndefined();
       });
+      it('should return no error when the value is a valid jmsc.gov.uk address', function () {
+        expect((0, _validateEmail.default)('alpha@jmsc.gov.uk', LABEL)).toBeUndefined();
+      });
       it('should return no error when the value is a capitalised digital.homeoffice.gov.uk address', function () {
         expect((0, _validateEmail.default)('ALPHA.BRAVO@DIGITAL.HOMEOFFICE.GOV.UK', LABEL)).toBeUndefined();
       });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "6.12.1",
+  "version": "6.14.0",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",
@@ -13,10 +13,12 @@
     "storybook": "yarn storybook:start",
     "deploy-storybook": "storybook-to-ghpages -e storybook-static",
     "compile": "yarn clean && cross-env NODE_ENV=production babel src --out-dir dist --copy-files && yarn post-compile",
-    "post-compile": "rimraf dist/*.test.* dist/**/*.test.* dist/**/*.stories.* dist/docs dist/assets"
+    "post-compile": "rimraf dist/*.test.* dist/**/*.test.* dist/**/*.stories.* dist/docs dist/assets",
+    "compile-with-maps": "yarn clean && cross-env NODE_ENV=production babel src --out-dir dist --source-maps true --copy-files && yarn post-compile",
+    "yalc-publish": "yarn compile-with-maps && cp -r src dist/src && yalc publish --push"
   },
   "dependencies": {
-    "@ukhomeoffice/cop-react-components": "4.7.2",
+    "@ukhomeoffice/cop-react-components": "4.7.3",
     "axios": "^0.23.0",
     "dayjs": "^1.11.0",
     "govuk-frontend": "^5.0.0",