@ukhomeoffice/cop-react-form-renderer 6.12.0 → 6.13.2

package/README.md

@@ -9,10 +9,18 @@ It uses components from [COP React Design System](https://github.com/UKHomeOffic
 - `@ukhomeoffice/cop-react-components` - and offers various styles of forms. These are showcased inside of
 a [yarn storybook](Storybook) within the project.
 
+To get started run `nvm use` to switch to currently supported node version (if your using node version manager). Otherwise, install node version specified in `.nvmrc`.
+
+This library uses the yarn package manager. To install this you will need to run `npm install --global yarn` on the supported version of node.
+
 ## Available Scripts
 
 In the project directory, you can run:
 
+### `yarn install`
+
+Installs the package.json dependencies.
+
 ### `yarn lint`
 
 Runs `eslint` against the project to check for coding issues.

package/dist/components/CollectionPage/CollectionPage.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.DEFAULT_CLASS = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
+var _uuid = require("uuid");
 var _utils = _interopRequireDefault(require("../../utils"));
 var _FormPage = _interopRequireDefault(require("../FormPage"));
 var _FormPage2 = require("../FormPage/FormPage");
@@ -104,7 +105,7 @@ var CollectionPage = function CollectionPage(_ref) {
       // If there is no active entry in the collection, we create
       // a new entry and generate a new ID for it.
       // This ID becomes the active ID for the collection.
-      var newId = Date.now().toString();
+      var newId = (0, _uuid.v4)();
       reportActiveIdChange(newId);
       reportChange([].concat(data, [_defineProperty({
         id: newId

package/dist/components/CollectionSummary/RenderListView.js

@@ -7,6 +7,7 @@ exports.default = exports.DEFAULT_TITLE = exports.DEFAULT_LIST_CLASS = exports.D
 var _copReactComponents = require("@ukhomeoffice/cop-react-components");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
+var _BannerStrip = _interopRequireDefault(require("./BannerStrip"));
 var _utils = _interopRequireDefault(require("../../utils"));
 var _getSummaryListRowForDetails = _interopRequireDefault(require("../../utils/CheckYourAnswers/getSummaryListRowForDetails"));
 var _Condition = _interopRequireDefault(require("../../utils/Condition"));
@@ -37,18 +38,24 @@ var RenderListView = function RenderListView(_ref) {
     masterPage = _ref.masterPage,
     classModifiers = _ref.classModifiers,
     optionalFieldPlaceholder = _ref.optionalFieldPlaceholder;
-  var classes = _copReactComponents.Utils.classBuilder(DEFAULT_CLASS, classModifiers);
+  var classes = _copReactComponents.Utils.classBuilder(DEFAULT_CLASS, classModifiers, config.className);
   var listClass = _copReactComponents.Utils.classBuilder(DEFAULT_LIST_CLASS);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes(),
     id: id
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: classes('title-wrapper', [], 'dark')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: classes('title-content')
   }, /*#__PURE__*/_react.default.createElement("h2", {
     className: classes('title')
   }, _copReactComponents.Utils.interpolateString(config.title || DEFAULT_TITLE, _objectSpread(_objectSpread({}, entryData), {}, {
     index: entryData.index + 1
-  }))), /*#__PURE__*/_react.default.createElement("ul", {
+  }))), config.banners && /*#__PURE__*/_react.default.createElement(_BannerStrip.default, {
+    id: "BannerStrip".concat(entryData.id),
+    banners: config.banners,
+    formData: entryData
+  })), /*#__PURE__*/_react.default.createElement("ul", {
     className: classes('actions')
   }, /*#__PURE__*/_react.default.createElement("li", {
     className: classes('action')
@@ -110,6 +117,8 @@ RenderListView.propTypes = {
     index: _propTypes.default.number.isRequired
   }).isRequired,
   config: _propTypes.default.shape({
+    className: _propTypes.default.string,
+    banners: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.shape({})])),
     title: _propTypes.default.string,
     changeAction: _propTypes.default.shape({
       label: _propTypes.default.string,

package/dist/components/CollectionSummary/RenderListView.scss

@@ -183,6 +183,10 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
   &--deleting-summary-card {
     background-color: #FCF0EE;
   }
+
+  &.error {
+    border-left: 7px solid red;
+  }
 }
 
 .govuk-summary-card__title-wrapper {
@@ -213,6 +217,11 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
   }
 }
 
+.govuk-summary-card__title-content {
+  display: flex;
+  flex-direction: column;
+}
+
 .govuk-summary-card__actions {
   @include govuk-typography-responsive($size: 19);
   @include govuk-typography-weight-bold;

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

@@ -6,10 +6,13 @@ var _setupTests = require("../../setupTests");
 var _RenderListView = _interopRequireDefault(require("./RenderListView"));
 var _models = require("../../models");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-// Global imports.
-
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } // Global imports.
 // Local imports.
-
 describe('components.CollectionSummary.RenderListView', function () {
   var ENTRY = {
     id: '001',
@@ -78,6 +81,13 @@ describe('components.CollectionSummary.RenderListView', function () {
       label: 'Delete label'
     }
   };
+  var CONFIG_ERROR = _objectSpread({
+    className: 'error',
+    banners: [{
+      "text": "MORE DETAILS NEEDED",
+      "classModifiers": ["red"]
+    }]
+  }, CONFIG);
   var ID = 'testListView';
   var onChangeArgs = [];
   var onChangeCalls = 0;
@@ -180,6 +190,33 @@ describe('components.CollectionSummary.RenderListView', function () {
     // Check if the index is rendered as expected in the title
     expect(title.textContent).toContain("Title text ".concat(ENTRY.index + 1));
   });
+  it('should render an Error Tag with Error className when passed an error in the Banner and ClassName', function () {
+    var _renderWithValidation3 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_RenderListView.default, {
+        id: ID,
+        entryData: ENTRY,
+        config: CONFIG_ERROR,
+        onFullEdit: ON_CHANGE,
+        onDelete: ON_DELETE,
+        masterPage: MASTER_PAGE,
+        getComponentRow: getComponentRow
+      })),
+      container = _renderWithValidation3.container;
+    var listViewDiv = checkSetup(container);
+
+    // Check className
+    expect(listViewDiv.classList).toContain('error');
+
+    // Check for presence of Banner Strip
+    var bannerStrip = listViewDiv.querySelector('.hods-form-banner-strip');
+    expect(bannerStrip).not.toBeNull();
+    expect(bannerStrip.id).toEqual('BannerStrip001');
+
+    // Check for presence of Error Tag with correct tagName, className, and Text content
+    var errorTag = listViewDiv.querySelector('.hods-form-banner-strip__tag--red');
+    expect(errorTag).not.toBeNull();
+    expect(errorTag.tagName).toBe('STRONG');
+    expect(errorTag.innerHTML).toContain('MORE DETAILS NEEDED');
+  });
   describe('Action buttons in RenderListView', function () {
     beforeEach(function () {
       onChangeArgs = [];
@@ -188,7 +225,7 @@ describe('components.CollectionSummary.RenderListView', function () {
       onDeleteCalls = 0;
     });
     it('should render and handle action buttons correctly', function () {
-      var _renderWithValidation3 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_RenderListView.default, {
+      var _renderWithValidation4 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_RenderListView.default, {
           id: ID,
           entryData: ENTRY,
           config: CONFIG,
@@ -197,7 +234,7 @@ describe('components.CollectionSummary.RenderListView', function () {
           masterPage: MASTER_PAGE,
           getComponentRow: getComponentRow
         })),
-        container = _renderWithValidation3.container;
+        container = _renderWithValidation4.container;
       var listViewDiv = container.querySelector('.govuk-summary-card');
       expect(listViewDiv).not.toBeNull();
 

package/dist/components/FormComponent/Collection.js

@@ -8,6 +8,7 @@ exports.default = exports.DEFAULT_CLASS = void 0;
 var _copReactComponents = require("@ukhomeoffice/cop-react-components");
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _uuid = require("uuid");
 var _models = require("../../models");
 var _utils = _interopRequireDefault(require("../../utils"));
 var _Container = _interopRequireDefault(require("./Container"));
@@ -78,7 +79,7 @@ var Collection = function Collection(_ref) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             reportChange([].concat(value, [{
-              id: Date.now().toString()
+              id: (0, _uuid.v4)()
             }]));
           case 1:
           case "end":

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/utils/CollectionPage/duplicateCollectionPageEntry.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _uuid = require("uuid");
 var _getCollectionPageData = _interopRequireDefault(require("./getCollectionPageData"));
 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); }
@@ -33,7 +34,7 @@ var duplicateCollectionPageEntry = function duplicateCollectionPageEntry(collect
   if (!entryToDuplicate) {
     return null;
   }
-  var newEntryId = Date.now().toString();
+  var newEntryId = (0, _uuid.v4)();
   var newEntry = _objectSpread(_objectSpread(_objectSpread({}, entryToDuplicate), fieldsToAdd), {}, {
     id: newEntryId
   });

package/dist/utils/CollectionPage/mergeCollectionPages.test.js

@@ -23,32 +23,6 @@ describe('utils.CollectionPage.mergeCollectionPages', function () {
     }];
     expect((0, _mergeCollectionPages.default)(PAGES)).toEqual(PAGES);
   });
-  it('should merge pages from the same collection into a single page', function () {
-    var PAGES = [{
-      id: 'page1',
-      collection: {
-        name: 'collection'
-      },
-      components: [TEXT_COMP]
-    }, {
-      id: 'page2',
-      collection: {
-        name: 'collection'
-      },
-      components: [DATE_COMP]
-    }];
-    var RESULT = (0, _mergeCollectionPages.default)(PAGES);
-    expect(RESULT.length).toEqual(1);
-    expect(RESULT[0]).toMatchObject({
-      id: 'page1',
-      collection: {
-        name: 'collection',
-        masterPage: true
-      },
-      formData: {},
-      childPages: PAGES
-    });
-  });
   it('should correctly merge and nest child collection pages under their parents', function () {
     var PAGES = [{
       id: 'page1',

package/dist/utils/CollectionPage/setCollectionPageData.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _uuid = require("uuid");
 var isValidIndex = function isValidIndex(value) {
   return typeof value === 'number' && value >= 0;
 };
@@ -36,7 +37,7 @@ var setCollectionPageData = function setCollectionPageData(collectionName, newDa
     if (!data[name].find(function (e) {
       return e.id === formData["".concat(name, "ActiveId")];
     })) {
-      var newEntryId = Date.now().toString();
+      var newEntryId = (0, _uuid.v4)();
       // eslint-disable-next-line no-param-reassign
       formData["".concat(name, "ActiveId")] = formData["".concat(name, "ActiveId")] || newEntryId;
       data[name].push({

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": "6.12.0",
+  "version": "6.13.2",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",
@@ -16,11 +16,12 @@
     "post-compile": "rimraf dist/*.test.* dist/**/*.test.* dist/**/*.stories.* dist/docs dist/assets"
   },
   "dependencies": {
-    "@ukhomeoffice/cop-react-components": "^4.0.0",
+    "@ukhomeoffice/cop-react-components": "4.7.2",
     "axios": "^0.23.0",
     "dayjs": "^1.11.0",
     "govuk-frontend": "^5.0.0",
-    "web-vitals": "^1.0.1"
+    "web-vitals": "^1.0.1",
+    "uuid": "^8.1.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.15.4",