@ukhomeoffice/cop-react-form-renderer 4.34.0 → 4.36.0

package/dist/components/CollectionPage/CollectionPage.test.js

@@ -153,7 +153,7 @@ describe('components.CollectionPage', function () {
       expect(label.textContent).toEqual(lbl);
       expect(label.getAttribute('for')).toEqual(fieldId);
       var hint = formGroup.childNodes[0].childNodes[1];
-      expect(hint.tagName).toEqual('SPAN');
+      expect(hint.tagName).toEqual('DIV');
       expect(hint.classList).toContain('govuk-hint');
       expect(hint.textContent).toEqual(hnt);
       var input = formGroup.childNodes[0].childNodes[2];
@@ -173,7 +173,7 @@ describe('components.CollectionPage', function () {
       expect(label.textContent).toEqual(lbl);
       expect(label.getAttribute('for')).toEqual(fieldId);
       var hint = formGroup.childNodes[0].childNodes[1];
-      expect(hint.tagName).toEqual('SPAN');
+      expect(hint.tagName).toEqual('DIV');
       expect(hint.classList).toContain('govuk-hint');
       expect(hint.textContent).toEqual(hnt);
       var outerWrapper = formGroup.childNodes[0].childNodes[2];

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

@@ -94,7 +94,7 @@ describe('components.FormComponent.Collection', function () {
             expect(label.textContent).toEqual("".concat(TEXT_COMPONENT.label, " (optional)"));
             expect(label.getAttribute('for')).toEqual("".concat(ID, "[0].").concat(TEXT_ID));
             hint = formGroup.childNodes[0].childNodes[1];
-            expect(hint.tagName).toEqual('SPAN');
+            expect(hint.tagName).toEqual('DIV');
             expect(hint.classList).toContain('govuk-hint');
             expect(hint.textContent).toEqual(TEXT_COMPONENT.hint);
             input = formGroup.childNodes[0].childNodes[2];
@@ -360,7 +360,7 @@ describe('components.FormComponent.Collection', function () {
             expect(label.textContent).toEqual("".concat(TEXT_COMPONENT.label, " (optional)"));
             expect(label.getAttribute('for')).toEqual("".concat(ID, "[0].").concat(TEXT_ID));
             hint = formGroup.childNodes[0].childNodes[1];
-            expect(hint.tagName).toEqual('SPAN');
+            expect(hint.tagName).toEqual('DIV');
             expect(hint.classList).toContain('govuk-hint');
             expect(hint.textContent).toEqual(TEXT_COMPONENT.hint);
             input = formGroup.childNodes[0].childNodes[2];

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

@@ -82,7 +82,7 @@ describe('components.FormComponent.Container', function () {
             expect(label.textContent).toEqual("".concat(TEXT_COMPONENT.label, " (optional)"));
             expect(label.getAttribute('for')).toEqual("".concat(ID, ".").concat(TEXT_ID));
             hint = formGroup.childNodes[0].childNodes[1];
-            expect(hint.tagName).toEqual('SPAN');
+            expect(hint.tagName).toEqual('DIV');
             expect(hint.classList).toContain('govuk-hint');
             expect(hint.textContent).toEqual(TEXT_COMPONENT.hint);
             input = formGroup.childNodes[0].childNodes[2];
@@ -139,7 +139,7 @@ describe('components.FormComponent.Container', function () {
             expect(label.textContent).toEqual("".concat(TEXT_COMPONENT.label, " (optional)"));
             expect(label.getAttribute('for')).toEqual("".concat(ID, ".").concat(NESTED_ID, ".").concat(TEXT_ID));
             hint = formGroup.childNodes[0].childNodes[1];
-            expect(hint.tagName).toEqual('SPAN');
+            expect(hint.tagName).toEqual('DIV');
             expect(hint.classList).toContain('govuk-hint');
             expect(hint.textContent).toEqual(TEXT_COMPONENT.hint);
             input = formGroup.childNodes[0].childNodes[2];
@@ -320,7 +320,7 @@ describe('components.FormComponent.Container', function () {
             expect(label.textContent).toEqual("".concat(TEXT_COMPONENT.label, " (optional)"));
             expect(label.getAttribute('for')).toEqual("".concat(ID, ".").concat(TEXT_ID));
             hint = formGroup.childNodes[0].childNodes[1];
-            expect(hint.tagName).toEqual('SPAN');
+            expect(hint.tagName).toEqual('DIV');
             expect(hint.classList).toContain('govuk-hint');
             expect(hint.textContent).toEqual(TEXT_COMPONENT.hint);
             input = formGroup.childNodes[0].childNodes[2];
@@ -402,7 +402,7 @@ describe('components.FormComponent.Container', function () {
             expect(label.textContent).toEqual("".concat(TEXT_COMPONENT.label, " (optional)"));
             expect(label.getAttribute('for')).toEqual("".concat(ID, ".").concat(TEXT_ID));
             hint = formGroup.childNodes[0].childNodes[1];
-            expect(hint.tagName).toEqual('SPAN');
+            expect(hint.tagName).toEqual('DIV');
             expect(hint.classList).toContain('govuk-hint');
             expect(hint.textContent).toEqual(TEXT_COMPONENT.hint);
             input = formGroup.childNodes[0].childNodes[2];

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

@@ -49,7 +49,7 @@ describe('components', function () {
               expect(label.textContent).toEqual("".concat(COMPONENT.label, " (optional)"));
               expect(label.getAttribute('for')).toEqual(ID);
               hint = formGroup.childNodes[0].childNodes[1];
-              expect(hint.tagName).toEqual('SPAN');
+              expect(hint.tagName).toEqual('DIV');
               expect(hint.classList).toContain('govuk-hint');
               expect(hint.textContent).toEqual(COMPONENT.hint);
               input = formGroup.childNodes[0].childNodes[2];
@@ -244,7 +244,7 @@ describe('components', function () {
               expect(label.textContent).toEqual('Interpolated Text component (optional)');
               expect(label.getAttribute('for')).toEqual(ID);
               hint = formGroup.childNodes[0].childNodes[1];
-              expect(hint.tagName).toEqual('SPAN');
+              expect(hint.tagName).toEqual('DIV');
               expect(hint.classList).toContain('govuk-hint');
               expect(hint.textContent).toEqual(COMPONENT.hint);
               input = formGroup.childNodes[0].childNodes[2];

package/dist/components/FormPage/FormPage.test.js

@@ -141,7 +141,7 @@ describe('components.FormPage', function () {
       expect(label.textContent).toEqual(lbl);
       expect(label.getAttribute('for')).toEqual(fieldId);
       var hint = formGroup.childNodes[0].childNodes[1];
-      expect(hint.tagName).toEqual('SPAN');
+      expect(hint.tagName).toEqual('DIV');
       expect(hint.classList).toContain('govuk-hint');
       expect(hint.textContent).toEqual(hnt);
       var input = formGroup.childNodes[0].childNodes[2];
@@ -161,7 +161,7 @@ describe('components.FormPage', function () {
       expect(label.textContent).toEqual(lbl);
       expect(label.getAttribute('for')).toEqual(fieldId);
       var hint = formGroup.childNodes[0].childNodes[1];
-      expect(hint.tagName).toEqual('SPAN');
+      expect(hint.tagName).toEqual('DIV');
       expect(hint.classList).toContain('govuk-hint');
       expect(hint.textContent).toEqual(hnt);
       var outerWrapper = formGroup.childNodes[0].childNodes[2];

package/dist/models/ComponentTypes.js

@@ -17,6 +17,8 @@ var TYPE_FILE = 'file';
 var TYPE_HEADING = 'heading';
 var TYPE_HTML = 'html';
 var TYPE_INSET_TEXT = 'inset-text';
+var TYPE_LIST = 'list';
+var TYPE_PARAGRAPH = 'paragraph';
 var TYPE_PHONE_NUMBER = 'phone-number';
 var TYPE_RADIOS = 'radios';
 var TYPE_SELECT = 'select';
@@ -38,6 +40,8 @@ var ComponentTypes = {
   HEADING: TYPE_HEADING,
   HTML: TYPE_HTML,
   INSET_TEXT: TYPE_INSET_TEXT,
+  LIST: TYPE_LIST,
+  PARAGRAPH: TYPE_PARAGRAPH,
   PHONE_NUMBER: TYPE_PHONE_NUMBER,
   RADIOS: TYPE_RADIOS,
   SELECT: TYPE_SELECT,

package/dist/utils/Component/getComponent.js

@@ -23,14 +23,23 @@ var _wrapInFormGroup = _interopRequireDefault(require("./wrapInFormGroup"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return 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); }
 
+var LIST_CLASS = 'govuk-list';
+var BODY_CLASS = 'govuk-body';
 /** 
  * 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 getAlert = function getAlert(config) {
   var attrs = (0, _cleanAttributes.default)(config);
 
@@ -118,6 +127,36 @@ var getInsetText = function getInsetText(config) {
   return /*#__PURE__*/_react.default.createElement(_copReactComponents.InsetText, attrs, config.content);
 };
 
+var getList = function getList(config) {
+  var _attrs$items;
+
+  var attrs = (0, _cleanAttributes.default)(config);
+  var tagName = attrs.ordered ? 'ol' : 'ul';
+  var bullet = attrs.ordered ? 'number' : 'bullet';
+
+  var classes = _copReactComponents.Utils.classBuilder(LIST_CLASS, bullet);
+
+  var content = (_attrs$items = attrs.items) === null || _attrs$items === void 0 ? void 0 : _attrs$items.map(function (item) {
+    return "<li>".concat(item, "</li>");
+  }).join('');
+  return getHTML(_objectSpread(_objectSpread({}, attrs), {}, {
+    className: classes(),
+    tagName: tagName,
+    content: content,
+    type: _models.ComponentTypes.HTML
+  }));
+};
+
+var getParagraph = function getParagraph(config) {
+  var attrs = (0, _cleanAttributes.default)(config);
+  return getHTML(_objectSpread(_objectSpread({
+    className: BODY_CLASS
+  }, attrs), {}, {
+    tagName: 'p',
+    type: _models.ComponentTypes.HTML
+  }));
+};
+
 var getRadios = function getRadios(config) {
   var options = [];
 
@@ -223,6 +262,12 @@ var getComponentByType = function getComponentByType(config) {
     case _models.ComponentTypes.ALERT:
       return getAlert(config);
 
+    case _models.ComponentTypes.PARAGRAPH:
+      return getParagraph(config);
+
+    case _models.ComponentTypes.LIST:
+      return getList(config);
+
     default:
       {
         return null;

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

@@ -0,0 +1,50 @@
+"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 ul tag and correct className for an unordered list component', function () {
+    var ID = 'test-id';
+    var ITEMS = ['paragraph content1', 'paragraph content2'];
+    var COMPONENT = {
+      type: _models.ComponentTypes.LIST,
+      ordered: false,
+      items: ITEMS,
+      'data-testid': ID
+    };
+
+    var _render = (0, _react.render)((0, _getComponent.default)(COMPONENT)),
+        container = _render.container;
+
+    var ul = (0, _react.getByTestId)(container, ID);
+    expect(ul.innerHTML).toContain('<li>paragraph content1</li><li>paragraph content2</li>');
+    expect(ul.tagName).toEqual('UL');
+    expect(ul.className).toEqual('govuk-list govuk-list--bullet');
+  });
+  it('should return a ol tag and correct className for an ordered list component', function () {
+    var ID = 'test-id';
+    var ITEMS = ['paragraph content1', 'paragraph content2'];
+    var COMPONENT = {
+      type: _models.ComponentTypes.LIST,
+      ordered: true,
+      items: ITEMS,
+      'data-testid': ID
+    };
+
+    var _render2 = (0, _react.render)((0, _getComponent.default)(COMPONENT)),
+        container = _render2.container;
+
+    var ol = (0, _react.getByTestId)(container, ID);
+    expect(ol.innerHTML).toContain('<li>paragraph content1</li><li>paragraph content2</li>');
+    expect(ol.tagName).toEqual('OL');
+    expect(ol.className).toEqual('govuk-list govuk-list--number');
+  });
+});

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

@@ -0,0 +1,49 @@
+"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 p tag and correct className for a paragraph component', function () {
+    var ID = 'test-id';
+    var CONTENT = 'paragraph content';
+    var COMPONENT = {
+      type: _models.ComponentTypes.PARAGRAPH,
+      content: CONTENT,
+      'data-testid': ID
+    };
+
+    var _render = (0, _react.render)((0, _getComponent.default)(COMPONENT)),
+        container = _render.container;
+
+    var p = (0, _react.getByTestId)(container, ID);
+    expect(p.innerHTML).toContain(CONTENT);
+    expect(p.tagName).toEqual('P');
+    expect(p.className).toEqual('govuk-body');
+  });
+  it('should override default className for a paragraph component', function () {
+    var ID = 'test-id';
+    var CONTENT = 'paragraph content';
+    var COMPONENT = {
+      type: _models.ComponentTypes.PARAGRAPH,
+      content: CONTENT,
+      'data-testid': ID,
+      className: 'govuk-body highlight'
+    };
+
+    var _render2 = (0, _react.render)((0, _getComponent.default)(COMPONENT)),
+        container = _render2.container;
+
+    var p = (0, _react.getByTestId)(container, ID);
+    expect(p.innerHTML).toContain(CONTENT);
+    expect(p.tagName).toEqual('P');
+    expect(p.className).toEqual('govuk-body highlight');
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "4.34.0",
+  "version": "4.36.0",
   "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.5.0",
+    "@ukhomeoffice/cop-react-components": "2.7.1",
     "axios": "^0.23.0",
     "dayjs": "^1.11.0",
     "govuk-frontend": "^4.3.1",