@ukhomeoffice/cop-react-form-renderer 4.12.0 → 4.13.1-alpha

package/dist/components/FormComponent/Collection.js

@@ -184,6 +184,7 @@ var Collection = function Collection(_ref) {
         full_path: full_path,
         components: config.item.map(function (component) {
           return _objectSpread(_objectSpread({}, component), {}, {
+            readonly: config.readonly ? true : component.readonly,
             label: _utils.default.interpolateString(component.label, _objectSpread(_objectSpread({}, item), {}, {
               index: labelCount
             })),

package/dist/components/FormComponent/Collection.test.js

@@ -319,4 +319,63 @@ describe('components.FormComponent.Collection', function () {
       }
     }, _callee6);
   })));
+  it('should appropriately make child components of items readonly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7() {
+    var COLLECTION, _renderWithValidation5, container, c, item, _item$childNodes2, title, itemContainer, formGroup, label, hint, input;
+
+    return regeneratorRuntime.wrap(function _callee7$(_context7) {
+      while (1) {
+        switch (_context7.prev = _context7.next) {
+          case 0:
+            COLLECTION = {
+              id: ID,
+              fieldId: ID,
+              type: _models.ComponentTypes.COLLECTION,
+              item: [TEXT_COMPONENT],
+              readonly: true
+            };
+            _renderWithValidation5 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+              component: COLLECTION,
+              value: FORM_DATA[ID],
+              formData: FORM_DATA
+            })), container = _renderWithValidation5.container; // Check the container itself.
+
+            c = container.childNodes[0];
+            expect(c.tagName).toEqual('DIV');
+            expect(c.classList).toContain(_Collection.DEFAULT_CLASS); // And now check the single text component within it.
+
+            item = c.childNodes[0];
+            expect(item.tagName).toEqual('DIV');
+            expect(item.classList).toContain("".concat(_Collection.DEFAULT_CLASS, "__item"));
+            _item$childNodes2 = _slicedToArray(item.childNodes, 2), title = _item$childNodes2[0], itemContainer = _item$childNodes2[1];
+            expect(title.tagName).toEqual('LABEL');
+            expect(title.classList).toContain("".concat(_Collection.DEFAULT_CLASS, "__item-title"));
+            expect(itemContainer.tagName).toEqual('DIV');
+            expect(itemContainer.classList).toContain(_Container.DEFAULT_CLASS);
+            formGroup = itemContainer.childNodes[0];
+            expect(formGroup.tagName).toEqual('DIV');
+            expect(formGroup.classList).toContain('govuk-form-group');
+            label = formGroup.childNodes[0];
+            expect(label.tagName).toEqual('LABEL');
+            expect(label.classList).toContain('govuk-label');
+            expect(label.textContent).toEqual("".concat(TEXT_COMPONENT.label, " (optional)"));
+            expect(label.getAttribute('for')).toEqual("".concat(ID, "[0].").concat(TEXT_ID));
+            hint = formGroup.childNodes[1];
+            expect(hint.tagName).toEqual('SPAN');
+            expect(hint.classList).toContain('govuk-hint');
+            expect(hint.textContent).toEqual(TEXT_COMPONENT.hint);
+            input = formGroup.childNodes[2];
+            expect(input.tagName).toEqual('DIV'); // Now readonly, so a DIV.
+
+            expect(input.classList).toContain('hods-readonly'); // Now readonly, so hods-readonly
+
+            expect(input.id).toEqual("".concat(ID, "[0].").concat(TEXT_ID));
+            expect(input.textContent).toEqual(TEXT_VALUE);
+
+          case 30:
+          case "end":
+            return _context7.stop();
+        }
+      }
+    }, _callee7);
+  })));
 });

package/dist/components/FormComponent/Container.js

@@ -82,7 +82,9 @@ var Container = function Container(_ref) {
     return /*#__PURE__*/_react.default.createElement(_FormComponent.default, _extends({
       key: index
     }, attrs, {
-      component: component,
+      component: _objectSpread(_objectSpread({}, component), {}, {
+        readonly: container.readonly ? true : component.readonly
+      }),
       formData: formData,
       value: val || defaultValue,
       wrap: wrap,

package/dist/components/FormComponent/Container.test.js

@@ -359,4 +359,55 @@ describe('components.FormComponent.Container', function () {
       }
     }, _callee6);
   })));
+  it('should appropriately make child components readonly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7() {
+    var CONTAINER, _renderWithValidation7, container, c, formGroup, label, hint, input;
+
+    return regeneratorRuntime.wrap(function _callee7$(_context7) {
+      while (1) {
+        switch (_context7.prev = _context7.next) {
+          case 0:
+            CONTAINER = {
+              id: ID,
+              fieldId: ID,
+              type: _models.ComponentTypes.CONTAINER,
+              components: [TEXT_COMPONENT],
+              readonly: true
+            };
+            _renderWithValidation7 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+              component: CONTAINER,
+              value: FORM_DATA[ID],
+              formData: FORM_DATA
+            })), container = _renderWithValidation7.container; // Check the container itself.
+
+            c = container.childNodes[0];
+            expect(c.tagName).toEqual('DIV');
+            expect(c.classList).toContain(_Container.DEFAULT_CLASS); // And now check the single text component within it.
+
+            formGroup = c.childNodes[0];
+            expect(formGroup.tagName).toEqual('DIV');
+            expect(formGroup.classList).toContain('govuk-form-group');
+            label = formGroup.childNodes[0];
+            expect(label.tagName).toEqual('LABEL');
+            expect(label.classList).toContain('govuk-label');
+            expect(label.textContent).toEqual("".concat(TEXT_COMPONENT.label, " (optional)"));
+            expect(label.getAttribute('for')).toEqual(TEXT_ID);
+            hint = formGroup.childNodes[1];
+            expect(hint.tagName).toEqual('SPAN');
+            expect(hint.classList).toContain('govuk-hint');
+            expect(hint.textContent).toEqual(TEXT_COMPONENT.hint);
+            input = formGroup.childNodes[2];
+            expect(input.tagName).toEqual('DIV'); // Now readonly, so a DIV.
+
+            expect(input.classList).toContain('hods-readonly'); // Now readonly, so hods-readonly
+
+            expect(input.id).toEqual(TEXT_ID);
+            expect(input.textContent).toEqual(TEXT_VALUE);
+
+          case 22:
+          case "end":
+            return _context7.stop();
+        }
+      }
+    }, _callee7);
+  })));
 });

package/dist/utils/Component/getComponent.js

@@ -25,12 +25,23 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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); }
 
+var setupChildrenJSX = function setupChildrenJSX(options, config) {
+  options.forEach(function (option) {
+    if (!Array.isArray(option.nested)) {
+      return;
+    }
+
+    option.children = getChildrenJsx(config, option.nested);
+  });
+};
 /** 
  * Separate function for each component type for the sake of
  * code clarity - having the additional bits and pieces in the
  * switch statement increases the cyclomatic complexity and
  * makes it much harder to follow what's going on.
  */
+
+
 var getAutocomplete = function getAutocomplete(config) {
   var attrs = (0, _cleanAttributes.default)(config);
 
@@ -48,6 +59,7 @@ var getCheckboxes = function getCheckboxes(config) {
     options = val;
   });
 
+  setupChildrenJSX(options, config);
   var attrs = (0, _cleanAttributes.default)(config);
   return /*#__PURE__*/_react.default.createElement(_copReactComponents.Checkboxes, _extends({}, attrs, {
     options: options
@@ -106,13 +118,7 @@ var getRadios = function getRadios(config) {
     options = val;
   });
 
-  options.forEach(function (option) {
-    if (!Array.isArray(option.nested)) {
-      return;
-    }
-
-    option.children = getChildrenJsx(config, option.nested);
-  });
+  setupChildrenJSX(options, config);
   var attrs = (0, _cleanAttributes.default)(config);
   return /*#__PURE__*/_react.default.createElement(_copReactComponents.Radios, _extends({}, attrs, {
     options: options

package/dist/utils/Validate/validateComponent.js

@@ -79,6 +79,7 @@ var validateComponent = function validateComponent(component, outerData, formDat
         error = message;
         break;
 
+      case _models.ComponentTypes.CHECKBOXES:
       case _models.ComponentTypes.RADIOS:
         var nestedErrors = [];
         (_component$data$optio = component.data.options) === null || _component$data$optio === void 0 ? void 0 : _component$data$optio.forEach(function (option) {

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

@@ -200,19 +200,19 @@ describe('utils.Validate.Component', function () {
     });
   });
   describe('when the component has a nested component', function () {
-    it('should return no error when the radio component contains nested components without errors', function () {
+    it.each([['radios', 'text'], ['checkboxes', 'text']])('should return no error when the radio component contains nested components without errors', function (parentType, nestedType) {
       var NESTED_ID = 'nestedId';
       var NESTED_VALUE = 'nestedValue';
 
       var FORMDATA = _defineProperty({}, NESTED_ID, NESTED_VALUE);
 
       var COMPONENT = {
-        type: 'radios',
+        type: parentType,
         id: 'a',
         data: {
           options: [{
             nested: [{
-              type: 'text',
+              type: nestedType,
               fieldId: NESTED_ID,
               id: NESTED_ID,
               required: true
@@ -222,16 +222,16 @@ describe('utils.Validate.Component', function () {
       };
       expect((0, _validateComponent.default)(COMPONENT, undefined, FORMDATA)).toBeUndefined();
     });
-    it('should return an error when the radio component contains nested components with errors', function () {
+    it.each([['radios', 'text'], ['checkboxes', 'text']])('should return an error when the radio component contains nested components with errors', function (parentType, nestedType) {
       var NESTED_ID = 'nestedId';
       var FORMDATA = {};
       var COMPONENT = {
-        type: 'radios',
+        type: parentType,
         id: 'a',
         data: {
           options: [{
             nested: [{
-              type: 'text',
+              type: nestedType,
               fieldId: NESTED_ID,
               id: NESTED_ID,
               required: true
@@ -244,10 +244,10 @@ describe('utils.Validate.Component', function () {
         error: "Field is required"
       }]);
     });
-    it('should return no error when a non selected radio component contains nested components with errors', function () {
+    it.each([['radios'], ['checkboxes']])('should return no error when a non selected radio component contains nested components with errors', function (type) {
       var NESTED_ID = 'nestedId';
       var COMPONENT = {
-        type: 'radios',
+        type: type,
         id: 'a',
         data: {
           options: [{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "4.12.0",
+  "version": "4.13.1-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": "2.2.2",
+    "@ukhomeoffice/cop-react-components": "2.2.3-alpha",
     "axios": "^0.23.0",
     "dayjs": "^1.11.0",
     "govuk-frontend": "^4.3.1",