@ukhomeoffice/cop-react-form-renderer 5.88.8 → 5.90.0

package/dist/components/CheckYourAnswers/CheckYourAnswers.js

@@ -207,7 +207,9 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
       isGroup: isGroup(page.id)
     }));
   }), !hide_actions && /*#__PURE__*/_react.default.createElement(_PageActions.default, {
-    actions: actions,
+    actions: actions === null || actions === void 0 ? void 0 : actions.filter(function (action) {
+      return _utils.default.Component.show(action, _pages[_pages.length - 1].formData);
+    }),
     onAction: function onAction(action) {
       return _onAction(action);
     }
@@ -223,7 +225,9 @@ CheckYourAnswers.propTypes = {
   noGroupAction: _propTypes.default.bool,
   onAction: _propTypes.default.func.isRequired,
   onRowAction: _propTypes.default.func.isRequired,
-  pages: _propTypes.default.arrayOf(_propTypes.default.shape({})).isRequired,
+  pages: _propTypes.default.arrayOf(_propTypes.default.shape({
+    formData: _propTypes.default.shape({}).isRequired
+  })).isRequired,
   sections: _propTypes.default.arrayOf(_propTypes.default.shape({
     name: _propTypes.default.string.isRequired,
     tasks: _propTypes.default.arrayOf(_propTypes.default.shape({

package/dist/components/CheckYourAnswers/CheckYourAnswers.test.js

@@ -13,6 +13,8 @@ var _userProfile = _interopRequireDefault(require("../../json/userProfile.json")
 var _groupData = _interopRequireDefault(require("../../json/group.data.json"));
 var _group = _interopRequireDefault(require("../../json/group.json"));
 var _groupOfRow = _interopRequireDefault(require("../../json/groupOfRow.json"));
+var _actions = _interopRequireDefault(require("../../json/actions.json"));
+var _actionsNoSave = _interopRequireDefault(require("../../json/actionsNoSave.json"));
 var _models = require("../../models");
 var _setupTests = require("../../setupTests");
 var _utils = _interopRequireDefault(require("../../utils"));
@@ -673,12 +675,12 @@ describe('components', function () {
         }
       }, _callee26);
     })));
-    it('should render empty optional fields with a placeholder value when provided', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee28() {
-      var GROUP_PAGES, cya, namesGroup, firstNameRow, surname;
+    it('should show a conditional button', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee28() {
+      var GROUP_PAGES, cya, hodsButtonDiv, submitButton, saveButton;
       return _regeneratorRuntime().wrap(function _callee28$(_context28) {
         while (1) switch (_context28.prev = _context28.next) {
           case 0:
-            GROUP_PAGES = _utils.default.FormPage.getAll(_groupOfRow.default.pages, _groupOfRow.default.components, {});
+            GROUP_PAGES = _utils.default.FormPage.getAll(_groupOfRow.default.pages, _groupOfRow.default.components, _objectSpread({}, DATA));
             _context28.next = 3;
             return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee27() {
               return _regeneratorRuntime().wrap(function _callee27$(_context27) {
@@ -686,8 +688,10 @@ describe('components', function () {
                   case 0:
                     (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                       pages: GROUP_PAGES,
+                      onRowAction: ON_ROW_ACTION,
+                      onAction: ON_ACTION,
                       groups: _groupOfRow.default.cya.groups,
-                      optionalFieldPlaceholder: "Not entered"
+                      actions: _actions.default
                     }), container);
                   case 1:
                   case "end":
@@ -695,6 +699,83 @@ describe('components', function () {
                 }
               }, _callee27);
             })));
+          case 3:
+            cya = checkCYA(container);
+            hodsButtonDiv = cya.childNodes[7];
+            expect(hodsButtonDiv.classList).toContain('hods-button-group');
+            submitButton = hodsButtonDiv.childNodes[0];
+            expect(submitButton.tagName).toEqual('BUTTON');
+            expect(submitButton.textContent).toEqual('Submit');
+            saveButton = hodsButtonDiv.childNodes[1];
+            expect(saveButton.tagName).toEqual('BUTTON');
+            expect(saveButton.textContent).toEqual('Save and return later');
+          case 12:
+          case "end":
+            return _context28.stop();
+        }
+      }, _callee28);
+    })));
+    it('should not show a conditional button', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee30() {
+      var GROUP_PAGES, cya, hodsButtonDiv, submitButton, saveButton;
+      return _regeneratorRuntime().wrap(function _callee30$(_context30) {
+        while (1) switch (_context30.prev = _context30.next) {
+          case 0:
+            GROUP_PAGES = _utils.default.FormPage.getAll(_groupOfRow.default.pages, _groupOfRow.default.components, _objectSpread({}, DATA));
+            _context30.next = 3;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee29() {
+              return _regeneratorRuntime().wrap(function _callee29$(_context29) {
+                while (1) switch (_context29.prev = _context29.next) {
+                  case 0:
+                    (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
+                      pages: GROUP_PAGES,
+                      onRowAction: ON_ROW_ACTION,
+                      onAction: ON_ACTION,
+                      groups: _groupOfRow.default.cya.groups,
+                      actions: _actionsNoSave.default
+                    }), container);
+                  case 1:
+                  case "end":
+                    return _context29.stop();
+                }
+              }, _callee29);
+            })));
+          case 3:
+            cya = checkCYA(container);
+            hodsButtonDiv = cya.childNodes[7];
+            expect(hodsButtonDiv.classList).toContain('hods-button-group');
+            submitButton = hodsButtonDiv.childNodes[0];
+            expect(submitButton.tagName).toEqual('BUTTON');
+            expect(submitButton.textContent).toEqual('Submit');
+            saveButton = hodsButtonDiv.childNodes[1];
+            expect(saveButton).toEqual(undefined);
+          case 11:
+          case "end":
+            return _context30.stop();
+        }
+      }, _callee30);
+    })));
+    it('should render empty optional fields with a placeholder value when provided', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee32() {
+      var GROUP_PAGES, cya, namesGroup, firstNameRow, surname;
+      return _regeneratorRuntime().wrap(function _callee32$(_context32) {
+        while (1) switch (_context32.prev = _context32.next) {
+          case 0:
+            GROUP_PAGES = _utils.default.FormPage.getAll(_groupOfRow.default.pages, _groupOfRow.default.components, {});
+            _context32.next = 3;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee31() {
+              return _regeneratorRuntime().wrap(function _callee31$(_context31) {
+                while (1) switch (_context31.prev = _context31.next) {
+                  case 0:
+                    (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
+                      pages: GROUP_PAGES,
+                      groups: _groupOfRow.default.cya.groups,
+                      optionalFieldPlaceholder: "Not entered"
+                    }), container);
+                  case 1:
+                  case "end":
+                    return _context31.stop();
+                }
+              }, _callee31);
+            })));
           case 3:
             cya = checkCYA(container);
             namesGroup = cya.childNodes[2];
@@ -712,14 +793,14 @@ describe('components', function () {
             expect(surname.childNodes[1].tagName).toEqual('DD');
           case 17:
           case "end":
-            return _context28.stop();
+            return _context32.stop();
         }
-      }, _callee28);
+      }, _callee32);
     })));
-    it('should show page components corrently with interpolated title and cya_label, if label is missing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee30() {
+    it('should show page components corrently with interpolated title and cya_label, if label is missing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee34() {
       var _PAGES, _COMPONENTS, T_PAGES, cya, _cya$childNodes7, cyaTitle, cyaChildNode, names, _names$childNodes3, firstName, surname, _firstName$childNodes, label;
-      return _regeneratorRuntime().wrap(function _callee30$(_context30) {
-        while (1) switch (_context30.prev = _context30.next) {
+      return _regeneratorRuntime().wrap(function _callee34$(_context34) {
+        while (1) switch (_context34.prev = _context34.next) {
           case 0:
             _PAGES = [].concat(_userProfile.default.pages); // eslint-disable-next-line no-template-curly-in-string
             _PAGES[0] = _objectSpread(_objectSpread({}, _PAGES[0]), {}, {
@@ -733,10 +814,10 @@ describe('components', function () {
               cya_label: "Text ${currentUser.familyName}"
             });
             T_PAGES = _utils.default.FormPage.getAll(_PAGES, _COMPONENTS, DATA);
-            _context30.next = 7;
-            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee29() {
-              return _regeneratorRuntime().wrap(function _callee29$(_context29) {
-                while (1) switch (_context29.prev = _context29.next) {
+            _context34.next = 7;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee33() {
+              return _regeneratorRuntime().wrap(function _callee33$(_context33) {
+                while (1) switch (_context33.prev = _context33.next) {
                   case 0:
                     (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                       pages: T_PAGES,
@@ -745,9 +826,9 @@ describe('components', function () {
                     }), container);
                   case 1:
                   case "end":
-                    return _context29.stop();
+                    return _context33.stop();
                 }
-              }, _callee29);
+              }, _callee33);
             })));
           case 7:
             cya = checkCYA(container);
@@ -762,14 +843,14 @@ describe('components', function () {
             checkRow(surname, 'Last name', 'Smith', false);
           case 17:
           case "end":
-            return _context30.stop();
+            return _context34.stop();
         }
-      }, _callee30);
+      }, _callee34);
     })));
-    it('should show page components corrently with no label, if label and cya_label are missing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee32() {
+    it('should show page components corrently with no label, if label and cya_label are missing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee36() {
       var _PAGES, _COMPONENTS, T_PAGES, cya, _cya$childNodes8, cyaChildNode, names, _names$childNodes4, firstName, surname, _firstName$childNodes2, label;
-      return _regeneratorRuntime().wrap(function _callee32$(_context32) {
-        while (1) switch (_context32.prev = _context32.next) {
+      return _regeneratorRuntime().wrap(function _callee36$(_context36) {
+        while (1) switch (_context36.prev = _context36.next) {
           case 0:
             _PAGES = [].concat(_userProfile.default.pages);
             _COMPONENTS = [].concat(_userProfile.default.components);
@@ -779,10 +860,10 @@ describe('components', function () {
               cya_label: undefined
             });
             T_PAGES = _utils.default.FormPage.getAll(_PAGES, _COMPONENTS, _objectSpread({}, DATA));
-            _context32.next = 6;
-            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee31() {
-              return _regeneratorRuntime().wrap(function _callee31$(_context31) {
-                while (1) switch (_context31.prev = _context31.next) {
+            _context36.next = 6;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee35() {
+              return _regeneratorRuntime().wrap(function _callee35$(_context35) {
+                while (1) switch (_context35.prev = _context35.next) {
                   case 0:
                     (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                       pages: T_PAGES,
@@ -791,9 +872,9 @@ describe('components', function () {
                     }), container);
                   case 1:
                   case "end":
-                    return _context31.stop();
+                    return _context35.stop();
                 }
-              }, _callee31);
+              }, _callee35);
             })));
           case 6:
             cya = checkCYA(container);
@@ -807,14 +888,14 @@ describe('components', function () {
             checkRow(surname, 'Last name', 'Smith', false);
           case 15:
           case "end":
-            return _context32.stop();
+            return _context36.stop();
         }
-      }, _callee32);
+      }, _callee36);
     })));
-    it('should show task list in CYA style and hide pages from skipped tasks', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee34() {
+    it('should show task list in CYA style and hide pages from skipped tasks', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee38() {
       var sections, taskHeading1, namesPageHeading;
-      return _regeneratorRuntime().wrap(function _callee34$(_context34) {
-        while (1) switch (_context34.prev = _context34.next) {
+      return _regeneratorRuntime().wrap(function _callee38$(_context38) {
+        while (1) switch (_context38.prev = _context38.next) {
           case 0:
             sections = [{
               name: 'These are your tasks',
@@ -828,10 +909,10 @@ describe('components', function () {
                 pages: ['grade']
               }]
             }];
-            _context34.next = 3;
-            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee33() {
-              return _regeneratorRuntime().wrap(function _callee33$(_context33) {
-                while (1) switch (_context33.prev = _context33.next) {
+            _context38.next = 3;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee37() {
+              return _regeneratorRuntime().wrap(function _callee37$(_context37) {
+                while (1) switch (_context37.prev = _context37.next) {
                   case 0:
                     (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                       pages: PAGES,
@@ -843,9 +924,9 @@ describe('components', function () {
                     }), container);
                   case 1:
                   case "end":
-                    return _context33.stop();
+                    return _context37.stop();
                 }
-              }, _callee33);
+              }, _callee37);
             })));
           case 3:
             taskHeading1 = container.childNodes[0].childNodes[0];
@@ -859,21 +940,21 @@ describe('components', function () {
             expect(container.childNodes[0].childNodes.length).toEqual(2); // second task skipped so not shown 
           case 12:
           case "end":
-            return _context34.stop();
+            return _context38.stop();
         }
-      }, _callee34);
+      }, _callee38);
     })));
-    it('Show answers from multiple address fields into in one DL correctly when hideBlankRows is true', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee36() {
+    it('Show answers from multiple address fields into in one DL correctly when hideBlankRows is true', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee40() {
       var ADDRESS_DATA, GROUP_PAGES, cya, groupedComponent, keyGroup, valueGroup, changeButtonDiv, changeButton;
-      return _regeneratorRuntime().wrap(function _callee36$(_context36) {
-        while (1) switch (_context36.prev = _context36.next) {
+      return _regeneratorRuntime().wrap(function _callee40$(_context40) {
+        while (1) switch (_context40.prev = _context40.next) {
           case 0:
             ADDRESS_DATA = _utils.default.Data.setupForm(_group.default.pages, _group.default.components, _groupData.default);
             GROUP_PAGES = _utils.default.FormPage.getAll(_group.default.pages, _group.default.components, _objectSpread({}, ADDRESS_DATA));
-            _context36.next = 4;
-            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee35() {
-              return _regeneratorRuntime().wrap(function _callee35$(_context35) {
-                while (1) switch (_context35.prev = _context35.next) {
+            _context40.next = 4;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee39() {
+              return _regeneratorRuntime().wrap(function _callee39$(_context39) {
+                while (1) switch (_context39.prev = _context39.next) {
                   case 0:
                     (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
                       pages: GROUP_PAGES,
@@ -884,9 +965,9 @@ describe('components', function () {
                     }), container);
                   case 1:
                   case "end":
-                    return _context35.stop();
+                    return _context39.stop();
                 }
-              }, _callee35);
+              }, _callee39);
             })));
           case 4:
             cya = checkCYA(container);
@@ -908,9 +989,9 @@ describe('components', function () {
             expect(changeButton.textContent).toEqual('Change address details');
           case 21:
           case "end":
-            return _context36.stop();
+            return _context40.stop();
         }
-      }, _callee36);
+      }, _callee40);
     })));
   });
 });

package/dist/components/FormComponent/Collection.scss

@@ -21,4 +21,4 @@
       float: right;
     }
   }
-}
+}

package/dist/components/FormComponent/Container.js

@@ -12,8 +12,10 @@ var _models = require("../../models");
 var _utils = _interopRequireDefault(require("../../utils"));
 var _FormComponent = _interopRequireDefault(require("./FormComponent"));
 var _getSourceData = _interopRequireDefault(require("../../utils/Data/getSourceData"));
+require("./Container.scss");
 var _excluded = ["container", "value", "formData", "onChange", "wrap", "onTopLevelChange"]; // Global imports
 // Local imports
+// Styles
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 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; }

package/dist/components/FormComponent/Container.scss

@@ -0,0 +1,15 @@
+.horizonal {
+  flex-direction: row;
+  display: flex;
+  justify-content: space-between;
+  gap: 2rem;
+  .horizonal{
+    justify-content: space-around;
+  }
+}
+@media screen and (max-width: 640px) {
+  .horizonal {
+    flex-direction: column;
+    gap:0;
+  }
+}

package/dist/json/actions.json

@@ -0,0 +1,17 @@
+[
+    {
+        "type": "submit",
+        "label": "Submit",
+        "validate": true
+    },
+    {
+        "type": "saveAndReturn",
+        "show_when": {
+            "field": "areYouACivilServant",
+            "op": "nin",
+            "values": [
+                "no"
+            ]
+        }
+    }
+]

package/dist/json/actionsNoSave.json

@@ -0,0 +1,17 @@
+[
+    {
+        "type": "submit",
+        "label": "Submit",
+        "validate": true
+    },
+    {
+        "type": "saveAndReturn",
+        "show_when": {
+            "field": "areYouACivilServant",
+            "op": "nin",
+            "values": [
+                "yes"
+            ]
+        }
+    }
+]

package/dist/utils/Validate/additional/conditionallyPermittedChange.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/**
+ * Additional validator to not permit a value change if a specified item exists in formData.
+ * @param {object} data the changed value
+ * @param {object} config the config for the validation must contain 
+ * a property 'base' holding the value for checking
+ * a property 'check' holding the formData item name to check if exists
+ * @param {object} formData the form data
+ * @returns false if: 
+ * the 'base' value is not the same as the changed value AND
+ * the 'check' value exists in formData as an item
+ * otherwise returns true
+ */
+var conditionallyPermittedChange = function conditionallyPermittedChange(data, config, _, formData) {
+  if (data !== config.base && formData[config.check]) {
+    return false;
+  }
+  return true;
+};
+var _default = exports.default = conditionallyPermittedChange;

package/dist/utils/Validate/additional/conditionallyPermittedChange.test.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _conditionallyPermittedChange = _interopRequireDefault(require("./conditionallyPermittedChange"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+describe('utils', function () {
+  describe('Validate', function () {
+    describe('additional', function () {
+      describe('conditionallyPermittedChange', function () {
+        var CONFIG = {
+          base: 'Value1',
+          check: 'Item1'
+        };
+        test('should pass if the base value has same value as data parameter', function () {
+          var DATA = 'Value1';
+          var FORMDATA = {};
+          expect((0, _conditionallyPermittedChange.default)(DATA, CONFIG, null, FORMDATA)).toEqual(true);
+        });
+        test('should fail if the base value is different to data parameter and check item exists in form data', function () {
+          var DATA = 'Value2';
+          var FORMDATA = {
+            Item1: "any"
+          };
+          expect((0, _conditionallyPermittedChange.default)(DATA, CONFIG, null, FORMDATA)).toEqual(false);
+        });
+        test('should pass if the base value is different to data parameter and check item not exists in form data', function () {
+          var DATA = 'Value2';
+          var FORMDATA = {};
+          expect((0, _conditionallyPermittedChange.default)(DATA, CONFIG, null, FORMDATA)).toEqual(true);
+        });
+      });
+    });
+  });
+});

package/dist/utils/Validate/additional/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _conditionallyPermittedChange = _interopRequireDefault(require("./conditionallyPermittedChange"));
 var _conditionallyRequired = _interopRequireDefault(require("./conditionallyRequired"));
 var _mustBeAfter = _interopRequireDefault(require("./mustBeAfter"));
 var _mustBeBefore = _interopRequireDefault(require("./mustBeBefore"));
@@ -25,6 +26,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // Local imports
 
 var functions = {
+  conditionallyPermittedChange: _conditionallyPermittedChange.default,
   conditionallyRequired: _conditionallyRequired.default,
   mustBeAfter: _mustBeAfter.default,
   mustBeBefore: _mustBeBefore.default,

package/package.json

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