@ukhomeoffice/cop-react-form-renderer 4.12.0 → 4.13.0

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/package.json

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