@ukhomeoffice/cop-react-form-renderer 3.3.3 → 3.4.1-alpha

package/dist/components/CheckYourAnswers/CheckYourAnswers.js

@@ -154,7 +154,7 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
     isGroup(page.id) ? hideActionButtons = true : hideActionButtons = noChangeAction;
     return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
       key: pageIndex
-    }, !hide_page_titles && page.title && !isGroup(page.id) && /*#__PURE__*/_react.default.createElement(_copReactComponents.MediumHeading, null, page.title), isGroup(page.id) && /*#__PURE__*/_react.default.createElement("div", {
+    }, !hide_page_titles && page.title && !isGroup(page.id) && /*#__PURE__*/_react.default.createElement(_copReactComponents.MediumHeading, null, _utils.default.interpolateString(page.title, page.formData)), isGroup(page.id) && /*#__PURE__*/_react.default.createElement("div", {
       className: "group-title"
     }, /*#__PURE__*/_react.default.createElement(_copReactComponents.MediumHeading, null, currentGroup.title || page.title)), /*#__PURE__*/_react.default.createElement(_SummaryList.default, {
       className: className,

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

@@ -495,5 +495,117 @@ 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;
+
+      return regeneratorRuntime.wrap(function _callee18$(_context18) {
+        while (1) {
+          switch (_context18.prev = _context18.next) {
+            case 0:
+              _PAGES = [].concat(_userProfile.default.pages); // eslint-disable-next-line no-template-curly-in-string
+
+              _PAGES[0] = _objectSpread(_objectSpread({}, _PAGES[0]), {}, {
+                title: 'Alpha ID: ${businessKey}'
+              });
+              _COMPONENTS = [].concat(_userProfile.default.components);
+              _COMPONENTS[0] = _objectSpread(_objectSpread({}, _COMPONENTS[0]), {}, {
+                label: undefined,
+                required: true,
+                // eslint-disable-next-line no-template-curly-in-string
+                cya_label: "Text ${currentUser.familyName}"
+              });
+              T_PAGES = _utils.default.FormPage.getAll(_PAGES, _COMPONENTS, DATA);
+              _context18.next = 7;
+              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee17() {
+                return regeneratorRuntime.wrap(function _callee17$(_context17) {
+                  while (1) {
+                    switch (_context17.prev = _context17.next) {
+                      case 0:
+                        (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
+                          pages: T_PAGES,
+                          onRowAction: ON_ROW_ACTION,
+                          onAction: ON_ACTION
+                        }), container);
+
+                      case 1:
+                      case "end":
+                        return _context17.stop();
+                    }
+                  }
+                }, _callee17);
+              })));
+
+            case 7:
+              cya = checkCYA(container);
+              _cya$childNodes5 = _slicedToArray(cya.childNodes, 3), cyaTitle = _cya$childNodes5[1], cyaChildNode = _cya$childNodes5[2];
+              expect(cyaTitle.textContent).toEqual('Alpha ID: 123456789');
+              names = cyaChildNode.childNodes[0];
+              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];
+              expect(label.textContent).toEqual('Text Smith');
+              checkRow(surname, 'Last name', 'Smith', false);
+
+            case 17:
+            case "end":
+              return _context18.stop();
+          }
+        }
+      }, _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;
+
+      return regeneratorRuntime.wrap(function _callee20$(_context20) {
+        while (1) {
+          switch (_context20.prev = _context20.next) {
+            case 0:
+              _PAGES = [].concat(_userProfile.default.pages);
+              _COMPONENTS = [].concat(_userProfile.default.components);
+              _COMPONENTS[0] = _objectSpread(_objectSpread({}, _COMPONENTS[0]), {}, {
+                label: undefined,
+                required: true,
+                cya_label: undefined
+              });
+              T_PAGES = _utils.default.FormPage.getAll(_PAGES, _COMPONENTS, _objectSpread({}, DATA));
+              _context20.next = 6;
+              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee19() {
+                return regeneratorRuntime.wrap(function _callee19$(_context19) {
+                  while (1) {
+                    switch (_context19.prev = _context19.next) {
+                      case 0:
+                        (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
+                          pages: T_PAGES,
+                          onRowAction: ON_ROW_ACTION,
+                          onAction: ON_ACTION
+                        }), container);
+
+                      case 1:
+                      case "end":
+                        return _context19.stop();
+                    }
+                  }
+                }, _callee19);
+              })));
+
+            case 6:
+              cya = checkCYA(container);
+              _cya$childNodes6 = _slicedToArray(cya.childNodes, 2), cyaChildNode = _cya$childNodes6[1];
+              names = cyaChildNode.childNodes[0];
+              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];
+              expect(label.textContent).toEqual("");
+              checkRow(surname, 'Last name', 'Smith', false);
+
+            case 15:
+            case "end":
+              return _context20.stop();
+          }
+        }
+      }, _callee20);
+    })));
   });
 });

package/dist/components/FormComponent/FormComponent.js

@@ -143,6 +143,7 @@ var FormComponent = function FormComponent(_ref) {
     label: _utils.default.interpolateString(component.label, formData),
     content: _utils.default.interpolateString(component.content, formData),
     hint: _utils.default.interpolateString(component.hint, formData),
+    cya_label: _utils.default.interpolateString(component.cya_label, formData),
     options: options,
     value: value || _utils.default.Component.defaultValue(component),
     onChange: onComponentChangeExtended,

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

@@ -203,5 +203,62 @@ describe('components', function () {
         }
       }, _callee5);
     })));
+    it('should render a text component appropriately with interpolated label', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6() {
+      var ID, VALUE, COMPONENT, DATA, ON_CHANGE, _renderWithValidation6, container, formGroup, label, hint, input;
+
+      return regeneratorRuntime.wrap(function _callee6$(_context6) {
+        while (1) {
+          switch (_context6.prev = _context6.next) {
+            case 0:
+              ID = 'component';
+              VALUE = 'Text value'; // eslint-disable-next-line no-template-curly-in-string
+
+              COMPONENT = {
+                id: ID,
+                fieldId: ID,
+                type: 'text',
+                label: '${text} Text component',
+                cya_label: '${text} Text component',
+                hint: 'Text hint'
+              };
+              DATA = {
+                text: 'Interpolated'
+              };
+
+              ON_CHANGE = function ON_CHANGE() {};
+
+              _renderWithValidation6 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_FormComponent.default, {
+                "data-testid": ID,
+                component: COMPONENT,
+                value: VALUE,
+                onChange: ON_CHANGE,
+                formData: DATA
+              })), container = _renderWithValidation6.container; // text components are wrapper in a FormGroup by default.
+
+              formGroup = container.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('Interpolated Text component (optional)');
+              expect(label.getAttribute('for')).toEqual(ID);
+              hint = formGroup.childNodes[1];
+              expect(hint.tagName).toEqual('SPAN');
+              expect(hint.classList).toContain('govuk-hint');
+              expect(hint.textContent).toEqual(COMPONENT.hint);
+              input = formGroup.childNodes[2];
+              expect(input.tagName).toEqual('INPUT');
+              expect(input.classList).toContain('govuk-input');
+              expect(input.id).toEqual(ID);
+              expect(input.value).toEqual(VALUE);
+
+            case 23:
+            case "end":
+              return _context6.stop();
+          }
+        }
+      }, _callee6);
+    })));
   });
 });

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) {

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';
@@ -26,6 +27,7 @@ var ComponentTypes = {
   COLLECTION: TYPE_COLLECTION,
   CONTAINER: TYPE_CONTAINER,
   DATE: TYPE_DATE,
+  DETAILS: TYPE_DETAILS,
   EMAIL: TYPE_EMAIL,
   FILE: TYPE_FILE,
   HEADING: TYPE_HEADING,

package/dist/utils/CheckYourAnswers/getCYARow.js

@@ -5,12 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _copReactComponents = require("@ukhomeoffice/cop-react-components");
+
 var _Component = _interopRequireDefault(require("../Component"));
 
 var _getCYAAction = _interopRequireDefault(require("./getCYAAction"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+// Global imports
 // Local imports
 
 /**
@@ -35,7 +38,7 @@ var getCYARow = function getCYARow(page, component, onAction) {
     id: component.id,
     fieldId: component.fieldId,
     full_path: component.full_path,
-    key: component.label || component.cya_label,
+    key: _copReactComponents.Utils.interpolateString(component.label || component.cya_label, page.formData),
     required: component.required,
     component: _Component.default.editable(component) ? component : undefined,
     value: value || '',

package/dist/utils/CheckYourAnswers/getCYARow.test.js

@@ -195,6 +195,62 @@ describe('utils', function () {
         var ROW = (0, _getCYARow.default)(PAGE, COMPONENT, function () {});
         expect(ROW.component.data.options[0].nested[0].value).toBeUndefined();
       });
+      it('should get an appropriate row for a readonly text component with no value and interpolated label', function () {
+        var PAGE = {
+          id: 'page',
+          formData: {
+            text: 'Smith'
+          }
+        }; // eslint-disable-next-line no-template-curly-in-string
+
+        var COMPONENT = {
+          type: 'text',
+          readonly: true,
+          id: 'a',
+          fieldId: 'a',
+          label: 'Alpha ${text}'
+        };
+
+        var ON_ACTION = function ON_ACTION() {};
+
+        expect((0, _getCYARow.default)(PAGE, COMPONENT, ON_ACTION)).toEqual({
+          pageId: PAGE.id,
+          id: COMPONENT.id,
+          fieldId: COMPONENT.fieldId,
+          key: 'Alpha Smith',
+          value: '',
+          component: COMPONENT,
+          action: null
+        });
+      });
+      it('should use the interolated cya_label where there is no label', function () {
+        var PAGE = {
+          id: 'page',
+          formData: {
+            a: 'Bravo'
+          }
+        }; // eslint-disable-next-line no-template-curly-in-string
+
+        var COMPONENT = {
+          type: 'text',
+          readonly: true,
+          id: 'a',
+          fieldId: 'a',
+          cya_label: 'CYA Alpha ${a}'
+        };
+
+        var ON_ACTION = function ON_ACTION() {};
+
+        var ROW = (0, _getCYARow.default)(PAGE, COMPONENT, ON_ACTION);
+        (0, _setupTests.expectObjectLike)(ROW, {
+          pageId: PAGE.id,
+          fieldId: COMPONENT.fieldId,
+          key: 'CYA Alpha Bravo',
+          action: null,
+          component: COMPONENT,
+          value: 'Bravo'
+        });
+      });
     });
   });
 });

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);
@@ -159,6 +165,9 @@ var getComponentByType = function getComponentByType(config) {
     case _models.ComponentTypes.WARNING:
       return getWarningText(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/FormPage/useComponent.js

@@ -26,7 +26,7 @@ var useComponent = function useComponent(toUse, formComponents) {
   if (formComponent) {
     var fieldId = toUse.fieldId || formComponent.fieldId;
     return _objectSpread(_objectSpread(_objectSpread({}, formComponent), toUse), {}, {
-      cya_label: formComponent.label,
+      cya_label: formComponent.label || formComponent.cya_label,
       fieldId: fieldId
     });
   }

package/dist/utils/FormPage/useComponent.test.js

@@ -28,6 +28,11 @@ describe('utils', function () {
         fieldId: 'c',
         label: 'Charlie',
         type: 'text'
+      }, {
+        id: 'd',
+        fieldId: 'd',
+        cya_label: 'Delta',
+        type: 'text'
       }];
       it('should handle a null toUse configuration', function () {
         var TO_USE = null;
@@ -35,8 +40,8 @@ describe('utils', function () {
       });
       it('should handle an unrecognised component reference', function () {
         var TO_USE = {
-          use: 'd',
-          label: 'Delta'
+          use: 'e',
+          label: 'Echo'
         };
         expect((0, _useComponent.default)(TO_USE, FORM_COMPONENTS)).toEqual(TO_USE);
       });
@@ -77,6 +82,31 @@ describe('utils', function () {
           label: TO_USE.label
         }));
       });
+      it('should allow the form component cya_label, if label is empty', function () {
+        var TO_USE = {
+          use: 'd',
+          label: ''
+        };
+        var A = FORM_COMPONENTS[3];
+        expect((0, _useComponent.default)(TO_USE, FORM_COMPONENTS)).toEqual(_objectSpread(_objectSpread({
+          use: 'd'
+        }, A), {}, {
+          cya_label: A.cya_label,
+          label: TO_USE.label
+        }));
+      });
+      it('should allow the form component cya_label, if label is not given', function () {
+        var TO_USE = {
+          use: 'd'
+        };
+        var A = FORM_COMPONENTS[3];
+        expect((0, _useComponent.default)(TO_USE, FORM_COMPONENTS)).toEqual(_objectSpread(_objectSpread({
+          use: 'd'
+        }, A), {}, {
+          cya_label: A.cya_label,
+          label: TO_USE.label
+        }));
+      });
     });
   });
 });

package/package.json

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