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

package/dist/components/CollectionSummary/RenderListView.js

@@ -7,6 +7,7 @@ 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"));
@@ -37,18 +38,24 @@ var RenderListView = function RenderListView(_ref) {
     masterPage = _ref.masterPage,
     classModifiers = _ref.classModifiers,
     optionalFieldPlaceholder = _ref.optionalFieldPlaceholder;
-  var classes = _copReactComponents.Utils.classBuilder(DEFAULT_CLASS, classModifiers);
+  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, _objectSpread(_objectSpread({}, entryData), {}, {
     index: entryData.index + 1
-  }))), /*#__PURE__*/_react.default.createElement("ul", {
+  }))), 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", {
     className: classes('action')
@@ -110,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;

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

@@ -6,10 +6,13 @@ var _setupTests = require("../../setupTests");
 var _RenderListView = _interopRequireDefault(require("./RenderListView"));
 var _models = require("../../models");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-// Global imports.
-
+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.
-
 describe('components.CollectionSummary.RenderListView', function () {
   var ENTRY = {
     id: '001',
@@ -78,6 +81,13 @@ describe('components.CollectionSummary.RenderListView', function () {
       label: 'Delete label'
     }
   };
+  var CONFIG_ERROR = _objectSpread({
+    className: 'error',
+    banners: [{
+      "text": "MORE DETAILS NEEDED",
+      "classModifiers": ["red"]
+    }]
+  }, CONFIG);
   var ID = 'testListView';
   var onChangeArgs = [];
   var onChangeCalls = 0;
@@ -180,6 +190,33 @@ describe('components.CollectionSummary.RenderListView', function () {
     // Check if the index is rendered as expected in the title
     expect(title.textContent).toContain("Title text ".concat(ENTRY.index + 1));
   });
+  it('should render an Error Tag with Error className when passed an error in the Banner and ClassName', function () {
+    var _renderWithValidation3 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_RenderListView.default, {
+        id: ID,
+        entryData: ENTRY,
+        config: CONFIG_ERROR,
+        onFullEdit: ON_CHANGE,
+        onDelete: ON_DELETE,
+        masterPage: MASTER_PAGE,
+        getComponentRow: getComponentRow
+      })),
+      container = _renderWithValidation3.container;
+    var listViewDiv = checkSetup(container);
+
+    // Check className
+    expect(listViewDiv.classList).toContain('error');
+
+    // Check for presence of Banner Strip
+    var bannerStrip = listViewDiv.querySelector('.hods-form-banner-strip');
+    expect(bannerStrip).not.toBeNull();
+    expect(bannerStrip.id).toEqual('BannerStrip001');
+
+    // Check for presence of Error Tag with correct tagName, className, and Text content
+    var errorTag = listViewDiv.querySelector('.hods-form-banner-strip__tag--red');
+    expect(errorTag).not.toBeNull();
+    expect(errorTag.tagName).toBe('STRONG');
+    expect(errorTag.innerHTML).toContain('MORE DETAILS NEEDED');
+  });
   describe('Action buttons in RenderListView', function () {
     beforeEach(function () {
       onChangeArgs = [];
@@ -188,7 +225,7 @@ describe('components.CollectionSummary.RenderListView', function () {
       onDeleteCalls = 0;
     });
     it('should render and handle action buttons correctly', function () {
-      var _renderWithValidation3 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_RenderListView.default, {
+      var _renderWithValidation4 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_RenderListView.default, {
           id: ID,
           entryData: ENTRY,
           config: CONFIG,
@@ -197,7 +234,7 @@ describe('components.CollectionSummary.RenderListView', function () {
           masterPage: MASTER_PAGE,
           getComponentRow: getComponentRow
         })),
-        container = _renderWithValidation3.container;
+        container = _renderWithValidation4.container;
       var listViewDiv = container.querySelector('.govuk-summary-card');
       expect(listViewDiv).not.toBeNull();
 

package/package.json

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