@ukhomeoffice/cop-react-form-renderer 5.90.1 → 5.91.0

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

@@ -1,65 +1,64 @@
 "use strict";
 
+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); }
 var _react = require("@testing-library/react");
 var _Confirmation = _interopRequireWildcard(require("./Confirmation"));
-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 _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; }
 // Global imports.
 
 // Local imports.
 
 /* eslint-disable no-plusplus */
 
-describe('components.CollectionSummary.Confirmation', () => {
-  let onConfirmCalls = 0;
-  const ON_CONFIRM = () => {
+describe('components.CollectionSummary.Confirmation', function () {
+  var onConfirmCalls = 0;
+  var ON_CONFIRM = function ON_CONFIRM() {
     onConfirmCalls += 1;
   };
-  let onCancelCalls = 0;
-  const ON_CANCEL = () => {
+  var onCancelCalls = 0;
+  var ON_CANCEL = function ON_CANCEL() {
     onCancelCalls += 1;
   };
-  beforeEach(() => {
+  beforeEach(function () {
     onConfirmCalls = 0;
     onCancelCalls = 0;
   });
-  const ID = 'testId';
-  const MESSAGE = 'Confirmation message';
-  const LABEL = 'Confirmation label';
-  const checkSetup = function (container) {
-    let withChildren = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    let childIndex = 0;
-    const confirmation = container.children[0];
+  var ID = 'testId';
+  var MESSAGE = 'Confirmation message';
+  var LABEL = 'Confirmation label';
+  var checkSetup = function checkSetup(container) {
+    var withChildren = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var childIndex = 0;
+    var confirmation = container.children[0];
     expect(confirmation.classList).toContain(_Confirmation.DEFAULT_CLASS);
-    const heading = confirmation.children[childIndex++];
+    var heading = confirmation.children[childIndex++];
     expect(heading.tagName).toEqual('H2');
-    const children = withChildren ? confirmation.children[childIndex++] : null;
-    const confirmButton = confirmation.children[childIndex++];
+    var children = withChildren ? confirmation.children[childIndex++] : null;
+    var confirmButton = confirmation.children[childIndex++];
     expect(confirmButton.tagName).toEqual('BUTTON');
-    const cancelButton = confirmation.children[childIndex++];
+    var cancelButton = confirmation.children[childIndex++];
     expect(cancelButton.tagName).toEqual('BUTTON');
     return {
-      heading,
-      confirmButton,
-      cancelButton,
-      children
+      heading: heading,
+      confirmButton: confirmButton,
+      cancelButton: cancelButton,
+      children: children
     };
   };
-  it('should render correctly', () => {
-    const {
-      container
-    } = (0, _react.render)( /*#__PURE__*/React.createElement(_Confirmation.default, {
-      id: ID,
-      message: MESSAGE,
-      confirmLabel: LABEL,
-      onConfirm: ON_CONFIRM,
-      onCancel: ON_CANCEL
-    }));
-    const {
-      heading,
-      confirmButton,
-      cancelButton
-    } = checkSetup(container);
+  it('should render correctly', function () {
+    var _render = (0, _react.render)( /*#__PURE__*/React.createElement(_Confirmation.default, {
+        id: ID,
+        message: MESSAGE,
+        confirmLabel: LABEL,
+        onConfirm: ON_CONFIRM,
+        onCancel: ON_CANCEL
+      })),
+      container = _render.container;
+    var _checkSetup = checkSetup(container),
+      heading = _checkSetup.heading,
+      confirmButton = _checkSetup.confirmButton,
+      cancelButton = _checkSetup.cancelButton;
     expect(heading.textContent).toEqual(MESSAGE);
     expect(confirmButton.textContent).toEqual(LABEL);
     _react.fireEvent.click(confirmButton, {});
@@ -67,40 +66,36 @@ describe('components.CollectionSummary.Confirmation', () => {
     _react.fireEvent.click(cancelButton, {});
     expect(onCancelCalls).toEqual(1);
   });
-  it('should use the default message if one is not provided', () => {
-    const {
-      container
-    } = (0, _react.render)( /*#__PURE__*/React.createElement(_Confirmation.default, {
-      id: ID,
-      confirmLabel: LABEL,
-      onConfirm: ON_CONFIRM,
-      onCancel: ON_CANCEL
-    }));
-    const {
-      heading
-    } = checkSetup(container);
+  it('should use the default message if one is not provided', function () {
+    var _render2 = (0, _react.render)( /*#__PURE__*/React.createElement(_Confirmation.default, {
+        id: ID,
+        confirmLabel: LABEL,
+        onConfirm: ON_CONFIRM,
+        onCancel: ON_CANCEL
+      })),
+      container = _render2.container;
+    var _checkSetup2 = checkSetup(container),
+      heading = _checkSetup2.heading;
     expect(heading.textContent).toEqual(_Confirmation.DEFAULT_MESSAGE);
   });
-  it('should use the default label if one is not provided', () => {
-    const {
-      container
-    } = (0, _react.render)( /*#__PURE__*/React.createElement(_Confirmation.default, {
-      id: ID,
-      onConfirm: ON_CONFIRM,
-      onCancel: ON_CANCEL
-    }));
-    const confirmButton = checkSetup(container).confirmButton;
+  it('should use the default label if one is not provided', function () {
+    var _render3 = (0, _react.render)( /*#__PURE__*/React.createElement(_Confirmation.default, {
+        id: ID,
+        onConfirm: ON_CONFIRM,
+        onCancel: ON_CANCEL
+      })),
+      container = _render3.container;
+    var confirmButton = checkSetup(container).confirmButton;
     expect(confirmButton.textContent).toEqual(_Confirmation.DEFAULT_CONFIRM_LABEL);
   });
-  it('should render children correctly', () => {
-    const {
-      container
-    } = (0, _react.render)( /*#__PURE__*/React.createElement(_Confirmation.default, {
-      id: ID,
-      onConfirm: ON_CONFIRM,
-      onCancel: ON_CANCEL
-    }, /*#__PURE__*/React.createElement("p", null, "A child")));
-    const child = checkSetup(container, true).children;
+  it('should render children correctly', function () {
+    var _render4 = (0, _react.render)( /*#__PURE__*/React.createElement(_Confirmation.default, {
+        id: ID,
+        onConfirm: ON_CONFIRM,
+        onCancel: ON_CANCEL
+      }, /*#__PURE__*/React.createElement("p", null, "A child"))),
+      container = _render4.container;
+    var child = checkSetup(container, true).children;
     expect(child.tagName).toEqual('P');
     expect(child.textContent).toEqual('A child');
   });

package/dist/components/CollectionSummary/RenderListView.js

@@ -7,47 +7,54 @@ exports.default = exports.DEFAULT_TITLE = exports.DEFAULT_LIST_CLASS = exports.D
 var _copReactComponents = require("@ukhomeoffice/cop-react-components");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
+var _BannerStrip = _interopRequireDefault(require("./BannerStrip"));
 var _utils = _interopRequireDefault(require("../../utils"));
 var _getSummaryListRowForDetails = _interopRequireDefault(require("../../utils/CheckYourAnswers/getSummaryListRowForDetails"));
 var _Condition = _interopRequireDefault(require("../../utils/Condition"));
 require("./RenderListView.scss");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-// Global imports.
-
+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 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.
 // Local imports.
-
 // Styles.
-
-const DEFAULT_CLASS = exports.DEFAULT_CLASS = 'govuk-summary-card';
-const DEFAULT_LIST_CLASS = exports.DEFAULT_LIST_CLASS = 'govuk-summary-list';
-const DEFAULT_TITLE = exports.DEFAULT_TITLE = 'Item';
-const DEFAULT_CHANGE_BUTTON_LABEL = exports.DEFAULT_CHANGE_BUTTON_LABEL = 'Change';
-const DEFAULT_DELETE_BUTTON_LABEL = exports.DEFAULT_DELETE_BUTTON_LABEL = 'Delete';
-const DEFAULT_CHANGE_BUTTON_CLASS = exports.DEFAULT_CHANGE_BUTTON_CLASS = 'secondary';
-const DEFAULT_DELETE_BUTTON_CLASS = exports.DEFAULT_DELETE_BUTTON_CLASS = 'warning';
-const RenderListView = _ref => {
-  let {
-    id,
-    entryData,
-    config,
-    onFullEdit,
-    onDelete,
-    masterPage,
-    classModifiers,
-    optionalFieldPlaceholder
-  } = _ref;
-  const classes = _copReactComponents.Utils.classBuilder(DEFAULT_CLASS, classModifiers);
-  const listClass = _copReactComponents.Utils.classBuilder(DEFAULT_LIST_CLASS);
+var DEFAULT_CLASS = exports.DEFAULT_CLASS = 'govuk-summary-card';
+var DEFAULT_LIST_CLASS = exports.DEFAULT_LIST_CLASS = 'govuk-summary-list';
+var DEFAULT_TITLE = exports.DEFAULT_TITLE = 'Item';
+var DEFAULT_CHANGE_BUTTON_LABEL = exports.DEFAULT_CHANGE_BUTTON_LABEL = 'Change';
+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 id = _ref.id,
+    entryData = _ref.entryData,
+    config = _ref.config,
+    onFullEdit = _ref.onFullEdit,
+    onDelete = _ref.onDelete,
+    masterPage = _ref.masterPage,
+    classModifiers = _ref.classModifiers,
+    optionalFieldPlaceholder = _ref.optionalFieldPlaceholder;
+  var classes = _copReactComponents.Utils.classBuilder(DEFAULT_CLASS, classModifiers, config.className);
+  var listClass = _copReactComponents.Utils.classBuilder(DEFAULT_LIST_CLASS);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes(),
     id: id
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: classes('title-wrapper', [], 'dark')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: classes('title-content')
   }, /*#__PURE__*/_react.default.createElement("h2", {
     className: classes('title')
-  }, _copReactComponents.Utils.interpolateString(config.title || DEFAULT_TITLE, {
-    ...entryData,
+  }, _copReactComponents.Utils.interpolateString(config.title || DEFAULT_TITLE, _objectSpread(_objectSpread({}, entryData), {}, {
     index: entryData.index + 1
+  }))), config.banners && /*#__PURE__*/_react.default.createElement(_BannerStrip.default, {
+    id: "BannerStrip".concat(entryData.id),
+    banners: config.banners,
+    formData: entryData
   })), /*#__PURE__*/_react.default.createElement("ul", {
     className: classes('actions')
   }, /*#__PURE__*/_react.default.createElement("li", {
@@ -55,36 +62,44 @@ const RenderListView = _ref => {
   }, config.changeAction && typeof onFullEdit === 'function' && /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     className: "govuk-link govuk-link-button",
-    onClick: () => onFullEdit(config.changeAction.page, entryData.id),
-    "aria-label": _copReactComponents.Utils.interpolateString(`${config.changeAction?.label || DEFAULT_CHANGE_BUTTON_LABEL} ${config.title || DEFAULT_TITLE}`, {
-      ...entryData,
+    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), {}, {
       index: entryData.index + 1
-    })
+    }))
   }, config.changeAction.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: `${id}.deleteButton`,
-    onClick: () => onDelete(entryData),
+    id: "".concat(id, ".deleteButton"),
+    onClick: function onClick() {
+      return onDelete(entryData);
+    },
     classModifiers: config.deleteAction.classModifiers || DEFAULT_DELETE_BUTTON_CLASS,
-    "aria-label": _copReactComponents.Utils.interpolateString(`${config.deleteAction?.label || DEFAULT_DELETE_BUTTON_LABEL} ${config.title || DEFAULT_TITLE}`, {
-      ...entryData,
+    "aria-label": _copReactComponents.Utils.interpolateString("".concat(((_config$deleteAction = config.deleteAction) === null || _config$deleteAction === void 0 ? void 0 : _config$deleteAction.label) || DEFAULT_DELETE_BUTTON_LABEL, " ").concat(config.title || DEFAULT_TITLE), _objectSpread(_objectSpread({}, entryData), {}, {
       index: entryData.index + 1
-    })
+    }))
   }, config.deleteAction.label || DEFAULT_DELETE_BUTTON_LABEL)))), /*#__PURE__*/_react.default.createElement("div", {
     className: classes('content')
   }, /*#__PURE__*/_react.default.createElement("dl", {
     className: listClass()
-  }, masterPage?.childPages?.flatMap(childPage => {
-    const elevatedComponents = childPage.components.map(component => _utils.default.Component.elevateNested([component], entryData)).flat().filter(Boolean);
-    return childPage.summaryLayout?.sections?.flatMap(section => {
-      const filteredColumns = section.columns.filter(column => _Condition.default.meetsAll(column, {
-        ...childPage.formData,
-        ...entryData
-      }));
-      const summaryFields = filteredColumns.flatMap(column => column.fields || []);
+  }, masterPage === null || masterPage === void 0 || (_masterPage$childPage = masterPage.childPages) === null || _masterPage$childPage === void 0 ? void 0 : _masterPage$childPage.flatMap(function (childPage) {
+    var _childPage$summaryLay;
+    var elevatedComponents = childPage.components.map(function (component) {
+      return _utils.default.Component.elevateNested([component], entryData);
+    }).flat().filter(Boolean);
+    return (_childPage$summaryLay = childPage.summaryLayout) === null || _childPage$summaryLay === void 0 || (_childPage$summaryLay = _childPage$summaryLay.sections) === null || _childPage$summaryLay === void 0 ? void 0 : _childPage$summaryLay.flatMap(function (section) {
+      var filteredColumns = section.columns.filter(function (column) {
+        return _Condition.default.meetsAll(column, _objectSpread(_objectSpread({}, childPage.formData), entryData));
+      });
+      var summaryFields = filteredColumns.flatMap(function (column) {
+        return column.fields || [];
+      });
       if (summaryFields.length) {
-        return summaryFields.flatMap(fieldId => {
-          const component = elevatedComponents.find(comp => comp.fieldId === fieldId);
+        return summaryFields.flatMap(function (fieldId) {
+          var component = elevatedComponents.find(function (comp) {
+            return comp.fieldId === fieldId;
+          });
           if (!component) {
             return null;
           }
@@ -102,6 +117,8 @@ RenderListView.propTypes = {
     index: _propTypes.default.number.isRequired
   }).isRequired,
   config: _propTypes.default.shape({
+    className: _propTypes.default.string,
+    banners: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.shape({})])),
     title: _propTypes.default.string,
     changeAction: _propTypes.default.shape({
       label: _propTypes.default.string,

package/dist/components/CollectionSummary/RenderListView.scss

@@ -183,6 +183,10 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
   &--deleting-summary-card {
     background-color: #FCF0EE;
   }
+
+  &.error {
+    border-left: 7px solid red;
+  }
 }
 
 .govuk-summary-card__title-wrapper {
@@ -213,6 +217,11 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
   }
 }
 
+.govuk-summary-card__title-content {
+  display: flex;
+  flex-direction: column;
+}
+
 .govuk-summary-card__actions {
   @include govuk-typography-responsive($size: 19);
   @include govuk-typography-weight-bold;