@ukhomeoffice/cop-react-form-renderer 3.3.4 → 3.5.2-alpha

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

@@ -496,7 +496,7 @@ describe('components', function () {
       }, _callee16);
     })));
     it('should show page components corrently with interpolated title and cya_label, if label is missing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee18() {
-      var _PAGES, _COMPONENTS, T_PAGES, cya, _cya$childNodes5, cyaTitle, cyaChildNode, names, _names$childNodes3, firstName, surname, _firstName$childNodes, label, value;
+      var _PAGES, _COMPONENTS, T_PAGES, cya, _cya$childNodes5, cyaTitle, cyaChildNode, names, _names$childNodes3, firstName, surname, _firstName$childNodes, label;
 
       return regeneratorRuntime.wrap(function _callee18$(_context18) {
         while (1) {
@@ -543,7 +543,7 @@ describe('components', function () {
               expect(names.tagName).toEqual('DL');
               expect(names.classList).toContain("govuk-!-margin-bottom-".concat(_CheckYourAnswers.DEFAULT_MARGIN_BOTTOM));
               _names$childNodes3 = _slicedToArray(names.childNodes, 2), firstName = _names$childNodes3[0], surname = _names$childNodes3[1];
-              _firstName$childNodes = _slicedToArray(firstName.childNodes, 2), label = _firstName$childNodes[0], value = _firstName$childNodes[1];
+              _firstName$childNodes = _slicedToArray(firstName.childNodes, 1), label = _firstName$childNodes[0];
               expect(label.textContent).toEqual('Text Smith');
               checkRow(surname, 'Last name', 'Smith', false);
 
@@ -555,7 +555,7 @@ describe('components', function () {
       }, _callee18);
     })));
     it('should show page components corrently with no label, if label and cya_label are missing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee20() {
-      var _PAGES, _COMPONENTS, T_PAGES, cya, _cya$childNodes6, cyaChildNode, names, _names$childNodes4, firstName, surname, _firstName$childNodes2, label, value;
+      var _PAGES, _COMPONENTS, T_PAGES, cya, _cya$childNodes6, cyaChildNode, names, _names$childNodes4, firstName, surname, _firstName$childNodes2, label;
 
       return regeneratorRuntime.wrap(function _callee20$(_context20) {
         while (1) {
@@ -596,7 +596,7 @@ describe('components', function () {
               expect(names.tagName).toEqual('DL');
               expect(names.classList).toContain("govuk-!-margin-bottom-".concat(_CheckYourAnswers.DEFAULT_MARGIN_BOTTOM));
               _names$childNodes4 = _slicedToArray(names.childNodes, 2), firstName = _names$childNodes4[0], surname = _names$childNodes4[1];
-              _firstName$childNodes2 = _slicedToArray(firstName.childNodes, 2), label = _firstName$childNodes2[0], value = _firstName$childNodes2[1];
+              _firstName$childNodes2 = _slicedToArray(firstName.childNodes, 1), label = _firstName$childNodes2[0];
               expect(label.textContent).toEqual("");
               checkRow(surname, 'Last name', 'Smith', false);
 

package/dist/components/FormPage/FormPage.js

@@ -100,7 +100,7 @@ var FormPage = function FormPage(_ref) {
       key: index,
       component: component,
       onChange: onPageChange,
-      value: page.formData[component.fieldId],
+      value: page.formData[component.fieldId] || patch[component.fieldId],
       formData: page.formData
     });
   }), /*#__PURE__*/_react.default.createElement(_PageActions.default, {

package/dist/components/FormRenderer/FormRenderer.js

@@ -73,7 +73,8 @@ var FormRenderer = function FormRenderer(_ref) {
       className = _ref.className,
       hide_title = _ref.hide_title,
       summaryListClassModifiers = _ref.summaryListClassModifiers,
-      noChangeAction = _ref.noChangeAction;
+      noChangeAction = _ref.noChangeAction,
+      newPageId = _ref.newPageId;
   return /*#__PURE__*/_react.default.createElement(_context.HooksContextProvider, {
     overrides: hooks
   }, /*#__PURE__*/_react.default.createElement(_context.ValidationContextProvider, null, /*#__PURE__*/_react.default.createElement(InternalFormRenderer, {
@@ -89,7 +90,8 @@ var FormRenderer = function FormRenderer(_ref) {
     className: className,
     hide_title: hide_title,
     summaryListClassModifiers: summaryListClassModifiers,
-    noChangeAction: noChangeAction
+    noChangeAction: noChangeAction,
+    newPageId: newPageId
   })));
 };
 
@@ -109,7 +111,8 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
       className = _ref2.className,
       hide_title = _ref2.hide_title,
       summaryListClassModifiers = _ref2.summaryListClassModifiers,
-      noChangeAction = _ref2.noChangeAction;
+      noChangeAction = _ref2.noChangeAction,
+      newPageId = _ref2.newPageId;
 
   // Set up the initial states.
   var _useState = (0, _react.useState)({}),
@@ -177,7 +180,10 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
 
   (0, _react.useEffect)(function () {
     setPages(_utils.default.FormPage.getAll(_pages, components, _objectSpread({}, data)));
-  }, [components, _pages, data, setPages]); // Setup initial pageId.
+  }, [components, _pages, data, setPages]);
+  (0, _react.useEffect)(function () {
+    if (newPageId !== undefined) onPageChange(newPageId);
+  }, [newPageId]); // Setup initial pageId.
 
   (0, _react.useEffect)(function () {
     setPageId(function (prev) {
@@ -244,8 +250,12 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
 
 
   var onPageAction = function onPageAction(action, patch) {
-    // Check to see whether the action is able to proceed, which in
+    // Re-apply the patch to the page's formData.
+    // This should normally have no effect but will prevent issues 
+    // with validation if formData happens to have been wiped.
+    formState.page.formData = _objectSpread(_objectSpread({}, formState.page.formData), patch); // Check to see whether the action is able to proceed, which in
     // in the case of a submission will validate the fields in the page.
+
     if (_helpers.default.canActionProceed(action, formState.page, validate.page)) {
       patch = _helpers.default.cleanHiddenNestedData(patch, formState.page);
 

package/dist/models/ComponentTypes.js

@@ -9,6 +9,7 @@ var TYPE_CHECKBOXES = 'checkboxes';
 var TYPE_COLLECTION = 'collection';
 var TYPE_CONTAINER = 'container';
 var TYPE_DATE = 'date';
+var TYPE_DETAILS = 'details';
 var TYPE_EMAIL = 'email';
 var TYPE_FILE = 'file';
 var TYPE_HEADING = 'heading';
@@ -16,6 +17,7 @@ var TYPE_HTML = 'html';
 var TYPE_INSET_TEXT = 'inset-text';
 var TYPE_PHONE_NUMBER = 'phone-number';
 var TYPE_RADIOS = 'radios';
+var TYPE_SELECT = 'select';
 var TYPE_TEXT = 'text';
 var TYPE_TEXT_AREA = 'textarea';
 var TYPE_TIME = 'time';
@@ -26,6 +28,7 @@ var ComponentTypes = {
   COLLECTION: TYPE_COLLECTION,
   CONTAINER: TYPE_CONTAINER,
   DATE: TYPE_DATE,
+  DETAILS: TYPE_DETAILS,
   EMAIL: TYPE_EMAIL,
   FILE: TYPE_FILE,
   HEADING: TYPE_HEADING,
@@ -33,6 +36,7 @@ var ComponentTypes = {
   INSET_TEXT: TYPE_INSET_TEXT,
   PHONE_NUMBER: TYPE_PHONE_NUMBER,
   RADIOS: TYPE_RADIOS,
+  SELECT: TYPE_SELECT,
   TEXT: TYPE_TEXT,
   TEXT_AREA: TYPE_TEXT_AREA,
   TIME: TYPE_TIME,

package/dist/utils/Component/getComponent.js

@@ -59,6 +59,12 @@ var getDate = function getDate(config) {
   return /*#__PURE__*/_react.default.createElement(_copReactComponents.DateInput, attrs);
 };
 
+var getDetails = function getDetails(config) {
+  var attrs = (0, _cleanAttributes.default)(config);
+  var html = getHTML(config);
+  return /*#__PURE__*/_react.default.createElement(_copReactComponents.Details, attrs, html);
+};
+
 var getFileUpload = function getFileUpload(config) {
   var attrs = (0, _cleanAttributes.default)(config);
   return /*#__PURE__*/_react.default.createElement(_copReactComponents.FileUpload, attrs);
@@ -114,6 +120,19 @@ var getTime = function getTime(config) {
   return /*#__PURE__*/_react.default.createElement(_copReactComponents.TimeInput, attrs);
 };
 
+var getSelect = function getSelect(config) {
+  var options = [];
+
+  _Data.default.getOptions(config, function (val) {
+    options = val;
+  });
+
+  var attrs = (0, _cleanAttributes.default)(config);
+  return /*#__PURE__*/_react.default.createElement(_copReactComponents.Select, _extends({}, attrs, {
+    options: options
+  }));
+};
+
 var getWarningText = function getWarningText(config) {
   var attrs = (0, _cleanAttributes.default)(config);
   return /*#__PURE__*/_react.default.createElement(_copReactComponents.WarningText, attrs, config.content);
@@ -159,6 +178,12 @@ var getComponentByType = function getComponentByType(config) {
     case _models.ComponentTypes.WARNING:
       return getWarningText(config);
 
+    case _models.ComponentTypes.SELECT:
+      return getSelect(config);
+
+    case _models.ComponentTypes.DETAILS:
+      return getDetails(config);
+
     default:
       {
         return null;

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

@@ -0,0 +1,57 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+var _models = require("../../../models");
+
+var _getComponent = _interopRequireDefault(require("../getComponent"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Global imports
+// Local imports
+describe('utils.Component.get', function () {
+  it('should return a details component containing basic text', function () {
+    var ID = 'test-id';
+    var CONTENT = 'Details content';
+    var SUMMARY = 'Details Summary';
+    var COMPONENT = {
+      type: _models.ComponentTypes.DETAILS,
+      content: CONTENT,
+      summary: SUMMARY,
+      'data-testid': ID
+    };
+
+    var _render = (0, _react.render)((0, _getComponent.default)(COMPONENT)),
+        container = _render.container;
+
+    var details = container.querySelector('details');
+    expect(details.classList).toContain('hods-details');
+    expect(details.childNodes[0].textContent).toEqual(SUMMARY);
+    expect(details.childNodes[1].textContent).toEqual(CONTENT);
+  });
+  it('should return a details component containing multiple html components', function () {
+    var ID = 'test-id';
+    var CONTENT = '<p>this is the content</p><ol><li>one</li><li>two</li></ol><p>second section of content</p>';
+    var SUMMARY = 'Details Summary';
+    var COMPONENT = {
+      type: _models.ComponentTypes.DETAILS,
+      content: CONTENT,
+      summary: SUMMARY,
+      'data-testid': ID
+    };
+
+    var _render2 = (0, _react.render)((0, _getComponent.default)(COMPONENT)),
+        container = _render2.container;
+
+    var details = container.querySelector('details');
+    expect(details.classList).toContain('hods-details');
+    expect(details.childNodes[1].childNodes[0].childNodes[0].textContent).toEqual('this is the content');
+    expect(details.childNodes[1].childNodes[0].childNodes[0].tagName).toEqual('P');
+    expect(details.childNodes[1].childNodes[0].childNodes[1].childNodes[0].textContent).toEqual('one');
+    expect(details.childNodes[1].childNodes[0].childNodes[1].childNodes[1].textContent).toEqual('two');
+    expect(details.childNodes[1].childNodes[0].childNodes[1].tagName).toEqual('OL');
+    expect(details.childNodes[1].childNodes[0].childNodes[2].textContent).toEqual('second section of content');
+    expect(details.childNodes[1].childNodes[0].childNodes[2].tagName).toEqual('P');
+  });
+});

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

@@ -0,0 +1,88 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+var _models = require("../../../models");
+
+var _getComponent = _interopRequireDefault(require("../getComponent"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+describe('utils.Component.get', function () {
+  it('should return an appropriately rendered select component', function () {
+    var ID = 'test-id';
+    var FIELD_ID = 'field-id';
+    var LABEL = 'label';
+    var NEW_VALUE = 'option2';
+    var ON_CHANGE_CALLS = [];
+
+    var ON_CHANGE = function ON_CHANGE(e) {
+      ON_CHANGE_CALLS.push(e.target);
+    };
+
+    var COMPONENT = {
+      type: _models.ComponentTypes.SELECT,
+      id: ID,
+      fieldId: FIELD_ID,
+      label: LABEL,
+      onChange: ON_CHANGE,
+      options: [{
+        label: 'Option 1',
+        value: 'option1'
+      }, {
+        label: 'Option 2',
+        value: NEW_VALUE
+      }],
+      'data-testid': ID
+    };
+
+    var _render = (0, _react.render)((0, _getComponent.default)(COMPONENT)),
+        container = _render.container;
+
+    var _getAllByTestId = (0, _react.getAllByTestId)(container, ID),
+        _getAllByTestId2 = _slicedToArray(_getAllByTestId, 2),
+        formGroup = _getAllByTestId2[0],
+        select = _getAllByTestId2[1];
+
+    expect(formGroup.tagName).toEqual('DIV');
+    expect(formGroup.classList).toContain('govuk-form-group');
+    var label = undefined;
+    formGroup.childNodes.forEach(function (node) {
+      // Check if it's an element.
+      if (node instanceof Element && node.tagName === 'LABEL') {
+        label = node;
+      }
+    });
+    expect(label).toBeDefined();
+    expect(label.innerHTML).toContain(LABEL);
+    expect(label.getAttribute('for')).toEqual(ID);
+    expect(select.tagName).toEqual('SELECT');
+    expect(select.classList).toContain('govuk-select');
+    expect(select.id).toEqual(ID);
+
+    _react.fireEvent.change(select, {
+      target: {
+        name: FIELD_ID,
+        value: NEW_VALUE
+      }
+    });
+
+    expect(ON_CHANGE_CALLS.length).toEqual(1);
+    expect(ON_CHANGE_CALLS[0]).toMatchObject({
+      name: FIELD_ID,
+      value: NEW_VALUE
+    });
+  });
+});

package/dist/utils/Component/isEditable.js

@@ -8,7 +8,7 @@ exports.default = exports.EDITABLE_TYPES = void 0;
 var _models = require("../../models");
 
 // Local imports
-var EDITABLE_TYPES = [_models.ComponentTypes.AUTOCOMPLETE, _models.ComponentTypes.CHECKBOXES, _models.ComponentTypes.DATE, _models.ComponentTypes.EMAIL, _models.ComponentTypes.FILE, _models.ComponentTypes.PHONE_NUMBER, _models.ComponentTypes.RADIOS, _models.ComponentTypes.TEXT, _models.ComponentTypes.TEXT_AREA, _models.ComponentTypes.TIME];
+var EDITABLE_TYPES = [_models.ComponentTypes.AUTOCOMPLETE, _models.ComponentTypes.CHECKBOXES, _models.ComponentTypes.DATE, _models.ComponentTypes.EMAIL, _models.ComponentTypes.FILE, _models.ComponentTypes.PHONE_NUMBER, _models.ComponentTypes.RADIOS, _models.ComponentTypes.SELECT, _models.ComponentTypes.TEXT, _models.ComponentTypes.TEXT_AREA, _models.ComponentTypes.TIME];
 exports.EDITABLE_TYPES = EDITABLE_TYPES;
 
 var isEditable = function isEditable(options) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "3.3.4",
+  "version": "3.5.2-alpha",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",
@@ -16,7 +16,7 @@
     "post-compile": "rimraf dist/*.test.* dist/**/*.test.* dist/**/*.stories.* dist/docs dist/assets"
   },
   "dependencies": {
-    "@ukhomeoffice/cop-react-components": "1.8.0",
+    "@ukhomeoffice/cop-react-components": "1.9.0",
     "axios": "^0.21.1",
     "dayjs": "^1.11.0",
     "govuk-frontend": "^3.13.0",