@ukhomeoffice/cop-react-form-renderer 5.92.0 → 5.94.0

package/dist/components/CollectionSummary/RenderListView.js

@@ -29,7 +29,7 @@ var DEFAULT_DELETE_BUTTON_LABEL = exports.DEFAULT_DELETE_BUTTON_LABEL = 'Delete'
 var DEFAULT_CHANGE_BUTTON_CLASS = exports.DEFAULT_CHANGE_BUTTON_CLASS = 'secondary';
 var DEFAULT_DELETE_BUTTON_CLASS = exports.DEFAULT_DELETE_BUTTON_CLASS = 'warning';
 var RenderListView = function RenderListView(_ref) {
-  var _config$changeAction, _config$deleteAction, _masterPage$childPage;
+  var _config$changeAction, _config$changeAction2, _config$changeAction3, _config$changeAction4, _config$deleteAction, _masterPage$childPage;
   var id = _ref.id,
     entryData = _ref.entryData,
     config = _ref.config,
@@ -59,16 +59,28 @@ var RenderListView = function RenderListView(_ref) {
     className: classes('actions')
   }, /*#__PURE__*/_react.default.createElement("li", {
     className: classes('action')
-  }, config.changeAction && typeof onFullEdit === 'function' && /*#__PURE__*/_react.default.createElement("button", {
+  }, config.changeAction && typeof onFullEdit === 'function' &&
+  // If passed a value for classModifiers, render a Button with those classModifiers applied - 
+  // otherwise, revert to the default GOVUK List View styling of rendering a Link button instead:
+  config.changeAction.classModifiers ? /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
+    id: "".concat(id, ".changeButton"),
+    onClick: function onClick() {
+      return onFullEdit(config.changeAction.page, entryData.id);
+    },
+    classModifiers: config.changeAction.classModifiers,
+    "aria-label": _copReactComponents.Utils.interpolateString("".concat(((_config$changeAction = config.changeAction) === null || _config$changeAction === void 0 ? void 0 : _config$changeAction.label) || DEFAULT_CHANGE_BUTTON_LABEL, " ").concat(config.title || DEFAULT_TITLE), _objectSpread(_objectSpread({}, entryData), {}, {
+      index: entryData.index + 1
+    }))
+  }, ((_config$changeAction2 = config.changeAction) === null || _config$changeAction2 === void 0 ? void 0 : _config$changeAction2.label) || DEFAULT_CHANGE_BUTTON_LABEL) : /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     className: "govuk-link govuk-link-button",
     onClick: function onClick() {
       return onFullEdit(config.changeAction.page, entryData.id);
     },
-    "aria-label": _copReactComponents.Utils.interpolateString("".concat(((_config$changeAction = config.changeAction) === null || _config$changeAction === void 0 ? void 0 : _config$changeAction.label) || DEFAULT_CHANGE_BUTTON_LABEL, " ").concat(config.title || DEFAULT_TITLE), _objectSpread(_objectSpread({}, entryData), {}, {
+    "aria-label": _copReactComponents.Utils.interpolateString("".concat(((_config$changeAction3 = config.changeAction) === null || _config$changeAction3 === void 0 ? void 0 : _config$changeAction3.label) || DEFAULT_CHANGE_BUTTON_LABEL, " ").concat(config.title || DEFAULT_TITLE), _objectSpread(_objectSpread({}, entryData), {}, {
       index: entryData.index + 1
     }))
-  }, config.changeAction.label || DEFAULT_CHANGE_BUTTON_LABEL)), /*#__PURE__*/_react.default.createElement("li", {
+  }, ((_config$changeAction4 = config.changeAction) === null || _config$changeAction4 === void 0 ? void 0 : _config$changeAction4.label) || DEFAULT_CHANGE_BUTTON_LABEL)), /*#__PURE__*/_react.default.createElement("li", {
     className: classes('action')
   }, config.deleteAction && typeof onDelete === 'function' && /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
     id: "".concat(id, ".deleteButton"),

package/dist/components/CollectionSummary/RenderListView.scss

@@ -289,3 +289,7 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
   background: none;
   border: none;
 }
+
+.hods-button {
+  margin: 0;
+}

package/dist/components/CollectionSummary/RenderListView.test.js

@@ -224,7 +224,7 @@ describe('components.CollectionSummary.RenderListView', function () {
       onDeleteArgs = [];
       onDeleteCalls = 0;
     });
-    it('should render and handle action buttons correctly', function () {
+    it('should render and handle action buttons correctly, including a GOVUK default Change Link when no classModifiers are passed in', function () {
       var _renderWithValidation4 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_RenderListView.default, {
           id: ID,
           entryData: ENTRY,
@@ -238,7 +238,7 @@ describe('components.CollectionSummary.RenderListView', function () {
       var listViewDiv = container.querySelector('.govuk-summary-card');
       expect(listViewDiv).not.toBeNull();
 
-      // Check for change button
+      // Check for change link
       var changeLink = listViewDiv.querySelector('.govuk-link');
       expect(changeLink.textContent).toEqual(CONFIG.changeAction.label);
       expect(changeLink.getAttribute('aria-label')).toEqual("".concat(CONFIG.changeAction.label, " ").concat(CONFIG.title));
@@ -257,5 +257,38 @@ describe('components.CollectionSummary.RenderListView', function () {
       expect(onDeleteCalls).toEqual(1);
       expect(onDeleteArgs[0]).toEqual(ENTRY);
     });
+    it('should render and handle an Update button instead of the GOVUK default Change link when classModifiers are passed in', function () {
+      var CONFIG_WITH_BUTTON = _objectSpread(_objectSpread({}, CONFIG), {}, {
+        changeAction: {
+          label: 'Update label',
+          page: 'testPage',
+          classModifiers: 'primary'
+        }
+      });
+      var _renderWithValidation5 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_RenderListView.default, {
+          id: ID,
+          entryData: ENTRY,
+          config: CONFIG_WITH_BUTTON,
+          onFullEdit: ON_CHANGE,
+          onDelete: ON_DELETE,
+          masterPage: MASTER_PAGE,
+          getComponentRow: getComponentRow
+        })),
+        container = _renderWithValidation5.container;
+      var listViewDiv = container.querySelector('.govuk-summary-card');
+      expect(listViewDiv).not.toBeNull();
+
+      // Check for update button
+      var changeButton = listViewDiv.querySelector('.hods-button');
+      expect(changeButton.classList).toContain('hods-button--primary');
+      expect(changeButton.textContent).toEqual(CONFIG_WITH_BUTTON.changeAction.label);
+      expect(changeButton.getAttribute('aria-label')).toEqual("".concat(CONFIG_WITH_BUTTON.changeAction.label, " ").concat(CONFIG_WITH_BUTTON.title));
+      _react.fireEvent.click(changeButton, {});
+      expect(onChangeCalls).toEqual(1);
+      expect(onChangeArgs[0]).toMatchObject({
+        page: CONFIG_WITH_BUTTON.changeAction.page,
+        id: ENTRY.id
+      });
+    });
   });
 });

package/dist/utils/Component/getComponent.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getChildrenJsx = exports.default = void 0;
 var _copReactComponents = require("@ukhomeoffice/cop-react-components");
 var _react = _interopRequireDefault(require("react"));
+var _Condition = _interopRequireDefault(require("../Condition"));
 var _models = require("../../models");
 var _Data = _interopRequireDefault(require("../Data"));
 var _cleanAttributes = _interopRequireDefault(require("./cleanAttributes"));
@@ -265,11 +266,14 @@ var getChildJsx = function getChildJsx(parent, paramChild) {
  * @param {*} childrenConfigs array of configurations for the child components
  */
 var getChildrenJsx = exports.getChildrenJsx = function getChildrenJsx(parentConfig, childrenConfigs) {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, childrenConfigs.map(function (config) {
+  var validChildren = childrenConfigs.filter(function (config) {
+    return !(config.show_when && !_Condition.default.meetsAll(config.show_when, parentConfig.formData));
+  }).map(function (config) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
       key: config.id
     }, getChildJsx(parentConfig, config));
-  }));
+  });
+  return validChildren.length > 0 ? validChildren : null;
 };
 /**
  * Get a renderable component, based on a configuration object.

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

@@ -180,4 +180,56 @@ describe('utils.Component.get', function () {
       }
     }, _callee4);
   })));
+  it('should correctly show nested component with show_when', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
+    var FIELD_ID, VALUE, VisibleComponent, HiddenComponent, PARENT_CONFIG, _renderWithValidation4, container, child, label, input;
+    return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          FIELD_ID = 'fieldId';
+          VALUE = 'nestedValue';
+          VisibleComponent = {
+            id: 'testId',
+            fieldId: FIELD_ID,
+            label: 'Test label',
+            type: 'text',
+            show_when: [{
+              field: FIELD_ID,
+              op: "=",
+              value: VALUE
+            }]
+          };
+          HiddenComponent = {
+            id: 'hiddenID',
+            fieldId: "hiddenFeild",
+            label: 'Hidden label',
+            type: 'text',
+            show_when: [{
+              field: FIELD_ID,
+              op: "!=",
+              value: VALUE
+            }]
+          };
+          PARENT_CONFIG = {
+            onChange: function onChange() {},
+            formData: _defineProperty({}, FIELD_ID, VALUE)
+          };
+          _renderWithValidation4 = (0, _setupTests.renderWithValidation)((0, _getComponent.getChildrenJsx)(PARENT_CONFIG, [VisibleComponent, HiddenComponent])), container = _renderWithValidation4.container;
+          expect(container.childNodes.length).toEqual(1);
+          child = container.childNodes[0];
+          expect(child.childNodes[0].childNodes.length).toEqual(2);
+          expect(child.classList).toContain('govuk-form-group');
+          label = child.childNodes[0];
+          expect(label).toBeDefined();
+          expect(label.innerHTML).toContain(VisibleComponent.label);
+          input = child.childNodes[2];
+          expect(input.tagName).toEqual('INPUT');
+          expect(input.classList).toContain('govuk-input');
+          expect(input.id).toEqual("".concat(VisibleComponent.id));
+          expect(input.value).toEqual(VALUE);
+        case 18:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee5);
+  })));
 });

package/dist/utils/Data/getOptions.js

@@ -26,6 +26,9 @@ var interpolateOptions = function interpolateOptions(config, options) {
     if (typeof opt === 'string') {
       return opt;
     }
+    if (!opt.value) {
+      return opt.label;
+    }
     if (config.alternativeHintField) {
       // eslint-disable-next-line no-param-reassign
       opt.hint = opt[config.alternativeHintField];

package/dist/utils/Data/getOptions.test.js

@@ -28,6 +28,16 @@ describe('utils', function () {
           expect(options).toEqual(CONFIG.options);
         });
       });
+      it('should handle stings in option and if no value is supplied treat it as a string', function () {
+        var CONFIG = {
+          options: ["or", {
+            label: "and"
+          }]
+        };
+        (0, _getOptions.default)(CONFIG, function (options) {
+          expect(options).toEqual(["or", "and"]);
+        });
+      });
       it('should get any specified options from the data property of the config', function () {
         var CONFIG = {
           data: {

package/package.json

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