@ukhomeoffice/cop-react-form-renderer 5.42.0 → 5.44.0

package/dist/components/CheckYourAnswers/CheckYourAnswers.js

@@ -50,7 +50,8 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
     noGroupAction = _ref.noGroupAction,
     groups = _ref.groups,
     sections = _ref.sections,
-    type = _ref.type;
+    type = _ref.type,
+    hideBlankRows = _ref.hideBlankRows;
   var _useState = (0, _react.useState)([]),
     _useState2 = _slicedToArray(_useState, 2),
     pages = _useState2[0],
@@ -179,18 +180,25 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
       }));
     });
   }), type !== _models.FormTypes.TASK_CYA && pages && pages.map(function (page, pageIndex, array) {
-    var pageMarginBottom = isLastPage(pageIndex) || isGroup(array[pageIndex].id) || isGroup(array[pageIndex + 1].id) ? DEFAULT_MARGIN_BOTTOM : listMarginBottom;
+    var filteredRows = !hideBlankRows || page.collection ? page.rows : page.rows.filter(function (row) {
+      var _row$value;
+      return row === null || row === void 0 || (_row$value = row.value) === null || _row$value === void 0 || (_row$value = _row$value.props) === null || _row$value === void 0 ? void 0 : _row$value.value;
+    });
+    if (filteredRows.length === 0) {
+      return null;
+    }
+    var showPageTitle = !hide_page_titles && page.title && !isGroup(page.id);
+    var pageMarginBottom = isLastPage(pageIndex) || isGroup(array[pageIndex].id) || array.length > pageIndex + 1 && isGroup(array[pageIndex + 1].id) ? DEFAULT_MARGIN_BOTTOM : listMarginBottom;
     var currentGroup = isGroup(page.id) ? getGroupForPage(page.id) : undefined;
     var className = "govuk-!-margin-bottom-".concat(pageMarginBottom);
     var hideActionButtons = isGroup(page.id) || noChangeAction;
-    var showHeading = !hide_page_titles && page.title && !isGroup(page.id);
     return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
       key: pageIndex
-    }, showHeading && getPageHeading(page, 'm'), isGroup(page.id) && /*#__PURE__*/_react.default.createElement("div", {
+    }, showPageTitle && getPageHeading(page, 'm'), currentGroup && /*#__PURE__*/_react.default.createElement("div", {
       className: "group-title"
     }, /*#__PURE__*/_react.default.createElement(_copReactComponents.MediumHeading, null, currentGroup.title || _utils.default.FormPage.getTitle(page.title, page.formData))), /*#__PURE__*/_react.default.createElement(_SummaryList.default, {
       className: className,
-      rows: page.rows,
+      rows: filteredRows,
       classModifiers: summaryListClassModifiers,
       noChangeAction: hideActionButtons,
       noGroupAction: noGroupAction,
@@ -224,7 +232,8 @@ CheckYourAnswers.propTypes = {
   })),
   summaryListClassModifiers: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
   title: _propTypes.default.string,
-  type: _propTypes.default.string
+  type: _propTypes.default.string,
+  hideBlankRows: _propTypes.default.bool
 };
 CheckYourAnswers.defaultProps = {
   actions: [],
@@ -237,6 +246,7 @@ CheckYourAnswers.defaultProps = {
   sections: [],
   summaryListClassModifiers: null,
   title: DEFAULT_TITLE,
-  type: null
+  type: null,
+  hideBlankRows: false
 };
 var _default = exports.default = CheckYourAnswers;

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

@@ -771,5 +771,54 @@ describe('components', function () {
         }
       }, _callee30);
     })));
+    it('Show answers from multiple address fields into in one DL correctly when hideBlankRows is true', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee32() {
+      var ADDRESS_DATA, GROUP_PAGES, cya, groupedComponent, keyGroup, valueGroup, changeButtonDiv, changeButton;
+      return _regeneratorRuntime().wrap(function _callee32$(_context32) {
+        while (1) switch (_context32.prev = _context32.next) {
+          case 0:
+            ADDRESS_DATA = _utils.default.Data.setupForm(_group.default.pages, _group.default.components, _groupData.default);
+            GROUP_PAGES = _utils.default.FormPage.getAll(_group.default.pages, _group.default.components, _objectSpread({}, ADDRESS_DATA));
+            _context32.next = 4;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee31() {
+              return _regeneratorRuntime().wrap(function _callee31$(_context31) {
+                while (1) switch (_context31.prev = _context31.next) {
+                  case 0:
+                    (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
+                      pages: GROUP_PAGES,
+                      onRowAction: ON_ROW_ACTION,
+                      onAction: ON_ACTION,
+                      hide_title: true,
+                      hideBlankRows: true
+                    }), container);
+                  case 1:
+                  case "end":
+                    return _context31.stop();
+                }
+              }, _callee31);
+            })));
+          case 4:
+            cya = checkCYA(container);
+            groupedComponent = cya.childNodes[6];
+            keyGroup = groupedComponent.childNodes[0].childNodes[0].childNodes[0];
+            expect(keyGroup.tagName).toEqual('DT');
+            expect(keyGroup.textContent).toEqual('Address details');
+            valueGroup = groupedComponent.childNodes[0].childNodes[0].childNodes[1];
+            expect(valueGroup.childNodes.length).toEqual(4);
+            expect(valueGroup.tagName).toEqual('DD');
+            expect(valueGroup.childNodes[0].textContent).toContain('10 Downing Street');
+            expect(valueGroup.childNodes[1].textContent).toContain('City of Westminster');
+            expect(valueGroup.childNodes[2].textContent).toContain('London');
+            expect(valueGroup.childNodes[3].textContent).toContain('SW1A 2AA');
+            changeButtonDiv = groupedComponent.childNodes[0].childNodes[0].childNodes[2];
+            expect(changeButtonDiv.classList).toContain('govuk-summary-list__actions');
+            changeButton = changeButtonDiv.childNodes[0];
+            expect(changeButton.tagName).toEqual('A');
+            expect(changeButton.textContent).toEqual('Change address details');
+          case 21:
+          case "end":
+            return _context32.stop();
+        }
+      }, _callee32);
+    })));
   });
 });

package/dist/components/CollectionPage/CollectionPage.js

@@ -35,7 +35,8 @@ var CollectionPage = function CollectionPage(_ref) {
     hashLink = _ref.hashLink,
     classBlock = _ref.classBlock,
     classModifiers = _ref.classModifiers,
-    className = _ref.className;
+    className = _ref.className,
+    submitting = _ref.submitting;
   var _useState = (0, _react.useState)({}),
     _useState2 = _slicedToArray(_useState, 2),
     patch = _useState2[0],
@@ -123,7 +124,8 @@ var CollectionPage = function CollectionPage(_ref) {
     hashLink: hashLink,
     classBlock: classBlock,
     classModifiers: classModifiers,
-    className: className
+    className: className,
+    submitting: submitting
   });
 };
 CollectionPage.propTypes = {
@@ -142,13 +144,15 @@ CollectionPage.propTypes = {
   hashLink: _propTypes.default.bool,
   classBlock: _propTypes.default.string,
   classModifiers: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
-  className: _propTypes.default.string
+  className: _propTypes.default.string,
+  submitting: _propTypes.default.bool
 };
 CollectionPage.defaultProps = {
   onCollectionChange: undefined,
   hashLink: false,
   classBlock: DEFAULT_CLASS,
   classModifiers: [],
-  className: ''
+  className: '',
+  submitting: false
 };
 var _default = exports.default = CollectionPage;

package/dist/components/FormComponent/FormComponent.js

@@ -15,7 +15,7 @@ var _CollectionSummary = _interopRequireDefault(require("../CollectionSummary"))
 var _Collection = _interopRequireDefault(require("./Collection"));
 var _Container = _interopRequireDefault(require("./Container"));
 var _helpers = require("./helpers");
-var _excluded = ["component", "value", "formData", "wrap", "onAction", "onChange", "onTopLevelChange", "pages"]; // Global imports
+var _excluded = ["component", "value", "formData", "wrap", "onAction", "onChange", "onTopLevelChange", "pages", "submitting"]; // Global imports
 // Local imports
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -43,6 +43,7 @@ var FormComponent = function FormComponent(_ref) {
     onChange = _ref.onChange,
     onTopLevelChange = _ref.onTopLevelChange,
     pages = _ref.pages,
+    submitting = _ref.submitting,
     attrs = _objectWithoutProperties(_ref, _excluded);
   var _useHooks = (0, _hooks.useHooks)(),
     hooks = _useHooks.hooks;
@@ -166,7 +167,8 @@ var FormComponent = function FormComponent(_ref) {
     value: value,
     onChange: onComponentChangeExtended,
     formData: formData,
-    onAction: onAction
+    onAction: onAction,
+    submitting: submitting
   }), wrap, hooks.onGetComponent);
 };
 FormComponent.propTypes = {
@@ -201,7 +203,8 @@ FormComponent.propTypes = {
   onAction: _propTypes.default.func,
   onChange: _propTypes.default.func,
   onTopLevelChange: _propTypes.default.func,
-  pages: _propTypes.default.arrayOf(_propTypes.default.shape({}))
+  pages: _propTypes.default.arrayOf(_propTypes.default.shape({})),
+  submitting: _propTypes.default.bool
 };
 FormComponent.defaultProps = {
   formData: null,
@@ -210,6 +213,7 @@ FormComponent.defaultProps = {
   onTopLevelChange: undefined,
   value: null,
   wrap: true,
-  pages: []
+  pages: [],
+  submitting: false
 };
 var _default = exports.default = FormComponent;

package/dist/components/FormPage/FormPage.js

@@ -41,7 +41,8 @@ var FormPage = function FormPage(_ref) {
     hashLink = _ref.hashLink,
     classBlock = _ref.classBlock,
     classModifiers = _ref.classModifiers,
-    className = _ref.className;
+    className = _ref.className,
+    submitting = _ref.submitting;
   var _useState = (0, _react.useState)({}),
     _useState2 = _slicedToArray(_useState, 2),
     patch = _useState2[0],
@@ -104,7 +105,8 @@ var FormPage = function FormPage(_ref) {
       onTopLevelChange: onTopLevelChange || onPageChange,
       value: page.formData[component.fieldId] || patch[component.fieldId],
       formData: page.formData,
-      pages: pages
+      pages: pages,
+      submitting: submitting
     });
   });
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -150,7 +152,8 @@ FormPage.propTypes = {
     actions: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({}), _propTypes.default.string])),
     formData: _propTypes.default.shape({}).isRequired
   }).isRequired,
-  pages: _propTypes.default.arrayOf(_propTypes.default.shape({}))
+  pages: _propTypes.default.arrayOf(_propTypes.default.shape({})),
+  submitting: _propTypes.default.bool
 };
 FormPage.defaultProps = {
   classBlock: DEFAULT_CLASS,
@@ -160,6 +163,7 @@ FormPage.defaultProps = {
   onChange: undefined,
   onTopLevelChange: undefined,
   onWrapperChange: undefined,
-  pages: []
+  pages: [],
+  submitting: false
 };
 var _default = exports.default = FormPage;

package/dist/components/FormRenderer/FormRenderer.js

@@ -59,7 +59,8 @@ var FormRenderer = function FormRenderer(_ref) {
     summaryListClassModifiers = _ref.summaryListClassModifiers,
     noChangeAction = _ref.noChangeAction,
     newPageId = _ref.newPageId,
-    viewOnly = _ref.viewOnly;
+    viewOnly = _ref.viewOnly,
+    hideBlankRows = _ref.hideBlankRows;
   return /*#__PURE__*/_react.default.createElement(_context.HooksContextProvider, {
     overrides: hooks
   }, /*#__PURE__*/_react.default.createElement(_context.ValidationContextProvider, null, /*#__PURE__*/_react.default.createElement(InternalFormRenderer, {
@@ -78,7 +79,8 @@ var FormRenderer = function FormRenderer(_ref) {
     summaryListClassModifiers: summaryListClassModifiers,
     noChangeAction: noChangeAction,
     newPageId: newPageId,
-    viewOnly: viewOnly
+    viewOnly: viewOnly,
+    hideBlankRows: hideBlankRows
   })));
 };
 var DEFAULT_CLASS = exports.DEFAULT_CLASS = 'hods-form';
@@ -99,7 +101,8 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
     summaryListClassModifiers = _ref2.summaryListClassModifiers,
     noChangeAction = _ref2.noChangeAction,
     newPageId = _ref2.newPageId,
-    viewOnly = _ref2.viewOnly;
+    viewOnly = _ref2.viewOnly,
+    hideBlankRows = _ref2.hideBlankRows;
   // Set up the initial states.
   var _useState = (0, _react.useState)({}),
     _useState2 = _slicedToArray(_useState, 2),
@@ -341,7 +344,8 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
     noChangeAction: (_formState$cya$hideCh = formState.cya.hideChangeActions) !== null && _formState$cya$hideCh !== void 0 ? _formState$cya$hideCh : noChangeAction,
     noGroupAction: (_formState$cya$hideGr = formState.cya.hideGroupActions) !== null && _formState$cya$hideGr !== void 0 ? _formState$cya$hideGr : false,
     sections: typeof hubDetails !== 'undefined' ? hubDetails.sections : [],
-    type: type
+    type: type,
+    hideBlankRows: hideBlankRows
   })), hub === _models.HubFormats.TASK && formState.pageId === _models.FormPages.HUB && /*#__PURE__*/_react.default.createElement(_TaskList.default, _extends({}, taskDetails, {
     refNumber: data.businessKey,
     onTaskAction: function onTaskAction(task) {
@@ -357,7 +361,8 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
     onChange: onChange,
     hashLink: hashLink,
     classModifiers: formState.page.classModifiers,
-    className: formState.page.className
+    className: formState.page.className,
+    submitting: submitting
   }), formState.page && !formState.cya && formState.page.collection && /*#__PURE__*/_react.default.createElement(_CollectionPage.default, {
     page: formState.page,
     onCollectionChange: onChange,
@@ -366,7 +371,8 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
     },
     hashLink: hashLink,
     classModifiers: formState.page.classModifiers,
-    className: formState.page.className
+    className: formState.page.className,
+    submitting: submitting
   }));
 };
 var propTypes = {
@@ -396,7 +402,8 @@ var propTypes = {
   title: _propTypes.default.string,
   /** See <a href="/?path=/docs/f-json--page#formtypes">FormTypes</a>. */
   type: _propTypes.default.oneOf([_models.FormTypes.CYA, _models.FormTypes.FORM, _models.FormTypes.HUB, _models.FormTypes.TASK, _models.FormTypes.WIZARD, _models.FormTypes.TASK_CYA, _models.FormTypes.FORM_WITH_TASK]).isRequired,
-  viewOnly: _propTypes.default.bool
+  viewOnly: _propTypes.default.bool,
+  hideBlankRows: _propTypes.default.bool
 };
 var defaultProps = {
   classBlock: DEFAULT_CLASS,
@@ -417,7 +424,8 @@ var defaultProps = {
   noChangeAction: false,
   summaryListClassModifiers: [],
   title: '',
-  viewOnly: true
+  viewOnly: true,
+  hideBlankRows: false
 };
 FormRenderer.propTypes = propTypes;
 InternalFormRenderer.propTypes = propTypes;

package/dist/components/FormRenderer/FormRenderer.test.js

@@ -1119,5 +1119,63 @@ describe('components', function () {
         }
       }, _callee38);
     })));
+    it('should handle page navigation correctly when hideBlankRows is true', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee40() {
+      var ON_PAGE_CHANGE_CALLS, ON_PAGE_CHANGE, HOOKS, form, hub, _hub$childNodes7, lineManagerList, link, page, pageHeading, continueButton, newPageHeading;
+      return _regeneratorRuntime().wrap(function _callee40$(_context40) {
+        while (1) switch (_context40.prev = _context40.next) {
+          case 0:
+            ON_PAGE_CHANGE_CALLS = [];
+            ON_PAGE_CHANGE = function ON_PAGE_CHANGE(pageId) {
+              ON_PAGE_CHANGE_CALLS.push(pageId);
+            };
+            HOOKS = {
+              onPageChange: ON_PAGE_CHANGE
+            };
+            _context40.next = 5;
+            return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee39() {
+              return _regeneratorRuntime().wrap(function _callee39$(_context39) {
+                while (1) switch (_context39.prev = _context39.next) {
+                  case 0:
+                    (0, _reactDom.render)( /*#__PURE__*/_react2.default.createElement(_FormRenderer.default, _extends({}, _userProfile.default, {
+                      data: _userProfileData.default,
+                      hooks: HOOKS,
+                      hideBlankRows: true
+                    })), container);
+                  case 1:
+                  case "end":
+                    return _context39.stop();
+                }
+              }, _callee39);
+            })));
+          case 5:
+            form = checkForm(container); // Navigate to the "Add or change a line manager" page.
+            hub = form.childNodes[1]; // Hub = CYA
+            _hub$childNodes7 = _slicedToArray(hub.childNodes, 4), lineManagerList = _hub$childNodes7[3];
+            link = getChangeLink(lineManagerList);
+            expect(ON_PAGE_CHANGE_CALLS.length).toEqual(0);
+            _react.fireEvent.click(link, {});
+            expect(ON_PAGE_CHANGE_CALLS[0]).toEqual(_userProfile.default.pages[4].id);
+
+            // Should be on the page explaining what changing the line manager means.
+            page = form.childNodes[0];
+            pageHeading = page.childNodes[0];
+            expect(pageHeading.tagName).toEqual('H1');
+            expect(pageHeading.textContent).toEqual(_userProfile.default.pages[4].title);
+
+            // Now click on the "Continue" button on here.
+            continueButton = getContinueButton(page);
+            expect(ON_PAGE_CHANGE_CALLS.length).toEqual(1);
+            _react.fireEvent.click(continueButton, {});
+            expect(ON_PAGE_CHANGE_CALLS.length).toEqual(2);
+            expect(ON_PAGE_CHANGE_CALLS[1]).toEqual(_userProfile.default.pages[5].id);
+            newPageHeading = form.childNodes[0].childNodes[0];
+            expect(newPageHeading.tagName).toEqual('H1');
+            expect(newPageHeading.textContent).toEqual(_userProfile.default.pages[5].title);
+          case 24:
+          case "end":
+            return _context40.stop();
+        }
+      }, _callee40);
+    })));
   });
 });

package/package.json

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