@ukhomeoffice/cop-react-form-renderer 6.13.2 → 6.14.1

package/dist/components/CollectionSummary/SummaryCardButtons.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.actionShape = exports.SummaryCardButtons = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _copReactComponents = require("@ukhomeoffice/cop-react-components");
+var _SummaryCard = require("./SummaryCard");
+var _utils = _interopRequireDefault(require("../../utils"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const actionShape = exports.actionShape = {
+  label: _propTypes.default.string,
+  page: _propTypes.default.string.isRequired,
+  classModifiers: _propTypes.default.string,
+  aria_label: _propTypes.default.string
+};
+const SummaryCardButtons = _ref => {
+  let {
+    id,
+    "data-testid": testId,
+    actions,
+    onFullEdit,
+    entryData,
+    formData,
+    name,
+    autoFocus
+  } = _ref;
+  if (!Array.isArray(actions)) {
+    return /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
+      id: id,
+      "data-testid": testId,
+      onClick: () => onFullEdit(actions === null || actions === void 0 ? void 0 : actions.page, entryData.id),
+      classModifiers: (actions === null || actions === void 0 ? void 0 : actions.classModifiers) || _SummaryCard.DEFAULT_CHANGE_BUTTON_CLASS,
+      "aria-label": _utils.default.FormPage.getConditionalText(actions === null || actions === void 0 ? void 0 : actions.aria_label, entryData),
+      name: name,
+      autoFocus: autoFocus
+    }, (actions === null || actions === void 0 ? void 0 : actions.label) || _SummaryCard.DEFAULT_CHANGE_BUTTON_LABEL);
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, actions.filter(a => _utils.default.Component.show(a, formData)).map(action => /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
+    id: id,
+    key: id,
+    "data-testid": testId,
+    onClick: () => onFullEdit(action === null || action === void 0 ? void 0 : action.page, entryData.id),
+    classModifiers: (action === null || action === void 0 ? void 0 : action.classModifiers) || _SummaryCard.DEFAULT_CHANGE_BUTTON_CLASS,
+    "aria-label": _utils.default.FormPage.getConditionalText(action === null || action === void 0 ? void 0 : action.aria_label, entryData),
+    name: name,
+    autoFocus: autoFocus
+  }, (action === null || action === void 0 ? void 0 : action.label) || _SummaryCard.DEFAULT_CHANGE_BUTTON_LABEL)));
+};
+exports.SummaryCardButtons = SummaryCardButtons;
+SummaryCardButtons.propTypes = {
+  id: _propTypes.default.string.isRequired,
+  "data-testid": _propTypes.default.string,
+  entryData: _propTypes.default.shape({
+    id: _propTypes.default.string.isRequired,
+    index: _propTypes.default.number.isRequired
+  }).isRequired,
+  onFullEdit: _propTypes.default.func,
+  autoFocus: _propTypes.default.bool,
+  name: _propTypes.default.string,
+  actions: _propTypes.default.oneOfType([_propTypes.default.shape(actionShape), _propTypes.default.arrayOf(_propTypes.default.shape(actionShape))]).isRequired,
+  formData: _propTypes.default.shape({}).isRequired
+};
+SummaryCardButtons.defaultProps = {
+  onFullEdit: null,
+  "data-testid": null,
+  autoFocus: null,
+  name: null
+};

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

@@ -0,0 +1,85 @@
+"use strict";
+
+require("@testing-library/jest-dom/extend-expect");
+var _react = _interopRequireDefault(require("react"));
+var _setupTests = require("../../setupTests");
+var _SummaryCardButtons = require("./SummaryCardButtons");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Global imports.
+
+// Local imports.
+
+describe('components.CollectionSummary.SummaryCardButtons', () => {
+  const ID = 'summaryCardId';
+  const ENTRY = {
+    id: '001',
+    bannerText: 'A banner',
+    titleText: 'A title',
+    detailsText: 'Some details',
+    index: 0,
+    summaryText: 'Full details'
+  };
+  it('should correctly render a SummaryCardButtons component', () => {
+    const CONFIG = {
+      changeAction: {
+        label: 'Change label',
+        page: 'testPage',
+        aria_label: [{
+          text: 'testText'
+        }]
+      }
+    };
+    const {
+      container
+    } = (0, _setupTests.renderWithValidation)(/*#__PURE__*/_react.default.createElement(_SummaryCardButtons.SummaryCardButtons, {
+      id: "".concat(ID, ".changeButton"),
+      "data-testid": "change-button",
+      actions: CONFIG.changeAction,
+      name: "Change",
+      entryData: ENTRY,
+      formData: {}
+    }));
+    const changeButton = container.children[0];
+    expect(changeButton.name).toEqual('Change');
+    expect(changeButton.tagName).toEqual('BUTTON');
+    expect(changeButton.textContent).toEqual(CONFIG.changeAction.label);
+    expect(changeButton.getAttribute('aria-label')).toEqual(CONFIG.changeAction.aria_label[0].text);
+  });
+  it('should correctly render a SummaryCardButtons component when array of buttons', () => {
+    const CONFIG = {
+      changeAction: [{
+        label: 'Change label',
+        page: 'testPage',
+        aria_label: [{
+          text: 'testText'
+        }]
+      }, {
+        label: 'Invalid label',
+        page: 'testPage',
+        aria_label: [{
+          text: 'testText'
+        }],
+        show_when: {
+          field: "test",
+          op: "=",
+          value: true
+        }
+      }]
+    };
+    const {
+      container
+    } = (0, _setupTests.renderWithValidation)(/*#__PURE__*/_react.default.createElement(_SummaryCardButtons.SummaryCardButtons, {
+      id: "".concat(ID, ".changeButton"),
+      "data-testid": "change-button",
+      actions: CONFIG.changeAction,
+      name: "Change",
+      entryData: ENTRY,
+      formData: {}
+    }));
+    const changeButton = container.children[0];
+    expect(changeButton.name).toEqual('Change');
+    expect(changeButton.tagName).toEqual('BUTTON');
+    expect(changeButton.textContent).toEqual(CONFIG.changeAction[0].label);
+    expect(changeButton.getAttribute('aria-label')).toEqual(CONFIG.changeAction[0].aria_label[0].text);
+  });
+});

package/dist/components/CollectionSummary/SummaryCardDetails.js

@@ -14,53 +14,46 @@ var _getCYARowsForContainer = _interopRequireDefault(require("../../utils/CheckY
 var _showComponent = _interopRequireDefault(require("../../utils/Component/showComponent"));
 var _Condition = _interopRequireDefault(require("../../utils/Condition"));
 require("./SummaryCardDetails.scss");
-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); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } // Global imports.
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } // Global imports.
 // Local imports.
 // Styles.
-var DEFAULT_CLASS = exports.DEFAULT_CLASS = 'hods-form-summary-card-details';
-var SummaryCardDetails = function SummaryCardDetails(_ref) {
+const DEFAULT_CLASS = exports.DEFAULT_CLASS = 'hods-form-summary-card-details';
+const SummaryCardDetails = _ref => {
   var _masterPage$childPage;
-  var masterPage = _ref.masterPage,
-    childCollections = _ref.childCollections,
-    formData = _ref.formData,
-    entryData = _ref.entryData,
-    classModifiers = _ref.classModifiers,
-    hideChildSectionTitles = _ref.hideChildSectionTitles,
-    optionalFieldPlaceholder = _ref.optionalFieldPlaceholder;
-  var classes = _utils.default.classBuilder(DEFAULT_CLASS, classModifiers);
-  var childMasterPages = (0, _react.useMemo)(function () {
-    return childCollections.map(function (childName) {
-      return masterPage.childPages.find(function (page) {
-        var _page$collection;
-        return ((_page$collection = page.collection) === null || _page$collection === void 0 ? void 0 : _page$collection.name) === childName;
-      });
-    }).filter(function (e) {
-      return !!e;
-    });
-  }, [masterPage, childCollections]);
-  var getSectionContent = function getSectionContent(columns, components, childPage) {
-    var columnIndex = 0;
-    return columns.flatMap(function (column, index) {
+  let {
+    masterPage,
+    childCollections,
+    formData,
+    entryData,
+    classModifiers,
+    hideChildSectionTitles,
+    optionalFieldPlaceholder
+  } = _ref;
+  const classes = _utils.default.classBuilder(DEFAULT_CLASS, classModifiers);
+  const childMasterPages = (0, _react.useMemo)(() => childCollections.map(childName => masterPage.childPages.find(page => {
+    var _page$collection;
+    return ((_page$collection = page.collection) === null || _page$collection === void 0 ? void 0 : _page$collection.name) === childName;
+  })).filter(e => !!e), [masterPage, childCollections]);
+  const getSectionContent = (columns, components, childPage) => {
+    let columnIndex = 0;
+    return columns.flatMap((column, index) => {
       var _column$fields;
-      var rowIndex = 0;
-      var columnContent = (_column$fields = column.fields) === null || _column$fields === void 0 ? void 0 : _column$fields.flatMap(function (fieldId) {
-        var componentMatches = components.filter(function (comp) {
-          return comp.fieldId === fieldId;
-        });
-        return componentMatches.map(function (component) {
+      let rowIndex = 0;
+      const columnContent = (_column$fields = column.fields) === null || _column$fields === void 0 ? void 0 : _column$fields.flatMap(fieldId => {
+        const componentMatches = components.filter(comp => comp.fieldId === fieldId);
+        return componentMatches.map(component => {
           if (!component || !(0, _showComponent.default)(component, _objectSpread(_objectSpread({}, childPage.formData), entryData))) {
             return null;
           }
           if (component.type === _models.ComponentTypes.CONTAINER) {
-            var containerRows = (0, _getCYARowsForContainer.default)(childPage, component, entryData);
+            const containerRows = (0, _getCYARowsForContainer.default)(childPage, component, entryData);
             rowIndex += 1;
             return /*#__PURE__*/_react.default.createElement("div", {
               key: fieldId,
@@ -69,21 +62,23 @@ var SummaryCardDetails = function SummaryCardDetails(_ref) {
                 '--column': columnIndex + 1,
                 '--row': rowIndex
               }
-            }, containerRows.map(function (subComponent) {
+            }, containerRows.map(subComponent => {
               var _entryData$component$;
               // Put value for current subcomponent at top level
-              var modEntry = _objectSpread(_objectSpread({}, entryData), _defineProperty({}, subComponent.fieldId, (_entryData$component$ = entryData[component.fieldId]) === null || _entryData$component$ === void 0 ? void 0 : _entryData$component$[subComponent.fieldId]));
+              const modEntry = _objectSpread(_objectSpread({}, entryData), {
+                [subComponent.fieldId]: (_entryData$component$ = entryData[component.fieldId]) === null || _entryData$component$ === void 0 ? void 0 : _entryData$component$[subComponent.fieldId]
+              });
               return (0, _getSummaryListRowForDetails.default)(childPage, _objectSpread(_objectSpread({}, subComponent), {
                 label: subComponent.key
               }), classes, modEntry, optionalFieldPlaceholder);
             }));
           }
           if (component.type === _models.ComponentTypes.COLLECTION) {
-            var collectionRows = (0, _getCYARowsForCollection.default)(_objectSpread(_objectSpread({}, childPage), {}, {
+            const collectionRows = (0, _getCYARowsForCollection.default)(_objectSpread(_objectSpread({}, childPage), {}, {
               formData: _objectSpread(_objectSpread({}, childPage.formData), entryData)
             }), component, entryData[component.id]);
             rowIndex += 1;
-            var collectionHeadingIndex = 0;
+            let collectionHeadingIndex = 0;
             return /*#__PURE__*/_react.default.createElement("div", {
               key: fieldId,
               className: classes('field'),
@@ -91,11 +86,13 @@ var SummaryCardDetails = function SummaryCardDetails(_ref) {
                 '--column': columnIndex + 1,
                 '--row': rowIndex
               }
-            }, collectionRows.map(function (subComponent) {
+            }, collectionRows.map(subComponent => {
               var _entryData$component$2;
               // Put value for current subComponent at the top level
-              var modEntry = _objectSpread(_objectSpread({}, entryData), _defineProperty({}, subComponent.fieldId, (_entryData$component$2 = entryData[component.fieldId]) === null || _entryData$component$2 === void 0 ? void 0 : _entryData$component$2[subComponent.fieldId]));
-              var rowContent = (0, _getSummaryListRowForDetails.default)(childPage, _objectSpread(_objectSpread({}, subComponent), {
+              const modEntry = _objectSpread(_objectSpread({}, entryData), {
+                [subComponent.fieldId]: (_entryData$component$2 = entryData[component.fieldId]) === null || _entryData$component$2 === void 0 ? void 0 : _entryData$component$2[subComponent.fieldId]
+              });
+              const rowContent = (0, _getSummaryListRowForDetails.default)(childPage, _objectSpread(_objectSpread({}, subComponent), {
                 label: subComponent.key
               }), classes, modEntry, optionalFieldPlaceholder);
               // Because collections are flat, we need to identify the subsequent titles (2, 3, 4... etc) in order to apply appropriate spacing
@@ -122,14 +119,12 @@ var SummaryCardDetails = function SummaryCardDetails(_ref) {
             }
           }, (0, _getSummaryListRowForDetails.default)(childPage, component, classes, entryData, optionalFieldPlaceholder));
         });
-      }).filter(function (e) {
-        return !!e;
-      });
+      }).filter(e => !!e);
       // If the column that's just been generated has anything in it
       // then we stick a divider on it's right side. The divider isn't
       // passed rowIndex as it spans all rows. columnIndex is incremented
       // twice to account for the divider column too.
-      var lastColumn = index === columns.length - 1;
+      const lastColumn = index === columns.length - 1;
       if (!lastColumn && columnContent.length !== 0) {
         columnIndex += 2;
         return [].concat(columnContent, [/*#__PURE__*/_react.default.createElement("div", {
@@ -141,43 +136,33 @@ var SummaryCardDetails = function SummaryCardDetails(_ref) {
         })]);
       }
       return columnContent;
-    }).filter(function (e) {
-      return !!e;
-    });
+    }).filter(e => !!e);
   };
-  return (masterPage === null || masterPage === void 0 || (_masterPage$childPage = masterPage.childPages) === null || _masterPage$childPage === void 0 ? void 0 : _masterPage$childPage.filter(function (p) {
-    return _utils.default.FormPage.show(p, _objectSpread(_objectSpread({}, formData), entryData));
-  }).map(function (childPage) {
+  return (masterPage === null || masterPage === void 0 || (_masterPage$childPage = masterPage.childPages) === null || _masterPage$childPage === void 0 ? void 0 : _masterPage$childPage.filter(p => _utils.default.FormPage.show(p, _objectSpread(_objectSpread({}, formData), entryData))).map(childPage => {
     var _childPage$summaryLay;
-    var allPageComponents = _utils.default.Component.elevateNested(childPage === null || childPage === void 0 ? void 0 : childPage.components, entryData);
-    return (_childPage$summaryLay = childPage.summaryLayout) === null || _childPage$summaryLay === void 0 ? void 0 : _childPage$summaryLay.sections.map(function (section) {
+    const allPageComponents = _utils.default.Component.elevateNested(childPage === null || childPage === void 0 ? void 0 : childPage.components, entryData);
+    return (_childPage$summaryLay = childPage.summaryLayout) === null || _childPage$summaryLay === void 0 ? void 0 : _childPage$summaryLay.sections.map(section => {
       if (section.show_when && !_utils.default.Condition.meetsAll(section.show_when, _objectSpread(_objectSpread({}, formData), entryData))) {
         return null;
       }
       if (section.type === 'childCollection') {
-        var childMasterPage = childMasterPages.find(function (p) {
-          return p.collection.name === section.collectionName;
-        });
-        var childFormData = entryData[section.collectionName.split('.').pop()] || [];
+        const childMasterPage = childMasterPages.find(p => p.collection.name === section.collectionName);
+        const childFormData = entryData[section.collectionName.split('.').pop()] || [];
         if (childMasterPage && childFormData.length > 0) {
           return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h3", {
             className: classes('section-title')
-          }, section.title), childFormData.map(function (entry) {
-            return /*#__PURE__*/_react.default.createElement(SummaryCardDetails, {
-              masterPage: childMasterPage,
-              childMasterPages: [],
-              formData: _objectSpread(_objectSpread(_objectSpread({}, formData), entryData), entry),
-              entryData: entry,
-              hideChildSectionTitles: true,
-              optionalFieldPlaceholder: optionalFieldPlaceholder
-            });
-          }));
+          }, section.title), childFormData.map(entry => /*#__PURE__*/_react.default.createElement(SummaryCardDetails, {
+            masterPage: childMasterPage,
+            childMasterPages: [],
+            formData: _objectSpread(_objectSpread(_objectSpread({}, formData), entryData), entry),
+            entryData: entry,
+            hideChildSectionTitles: true,
+            optionalFieldPlaceholder: optionalFieldPlaceholder
+          })));
         }
         return null;
       }
-      var columns = section.columns.filter(function (column) {
-        return _Condition.default.meetsAll(column, _objectSpread(_objectSpread({}, childPage.formData), entryData));
-      });
+      const columns = section.columns.filter(column => _Condition.default.meetsAll(column, _objectSpread(_objectSpread({}, childPage.formData), entryData)));
       return /*#__PURE__*/_react.default.createElement("div", {
         key: section.title,
         className: classes('section')
@@ -190,9 +175,7 @@ var SummaryCardDetails = function SummaryCardDetails(_ref) {
         }
       }, getSectionContent(columns, allPageComponents, childPage)));
     });
-  }).filter(function (e) {
-    return !!e;
-  })) || null;
+  }).filter(e => !!e)) || null;
 };
 SummaryCardDetails.propTypes = {
   childCollections: _propTypes.default.arrayOf(_propTypes.default.string),