@ukhomeoffice/cop-react-form-renderer 6.0.0 → 6.0.1-peter

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

@@ -1231,14 +1231,30 @@ describe('components.CollectionSummary.SummaryCard', function () {
       expect(headerDetails.classList).toContain(classes('header-content-detail'));
       expect(headerDetails.textContent).toEqual(DETAILS);
     });
-    it('should not render details when they are empty', function () {
+    it('should render conditional details', function () {
       var CONFIG = {
         title: 'Title',
-        details: ''
+        details: [{
+          text: 'Details A',
+          show_when: [{
+            field: 'field',
+            op: '!=',
+            value: true
+          }]
+        }, {
+          text: 'Details B',
+          show_when: [{
+            field: 'field',
+            op: '=',
+            value: true
+          }]
+        }]
       };
       var _renderWithValidation31 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
           id: ID,
-          entryData: ENTRY,
+          entryData: _objectSpread(_objectSpread({}, ENTRY), {}, {
+            field: true
+          }),
           config: CONFIG,
           parentCollectionName: "parent",
           pages: [],
@@ -1250,6 +1266,30 @@ describe('components.CollectionSummary.SummaryCard', function () {
         container = _renderWithValidation31.container;
       var _checkSetup30 = checkSetup(container),
         headerContentDiv = _checkSetup30.headerContentDiv;
+      var headerDetails = headerContentDiv.children[1];
+      expect(headerDetails.tagName).toEqual('DIV');
+      expect(headerDetails.classList).toContain(classes('header-content-detail'));
+      expect(headerDetails.textContent).toEqual('Details B');
+    });
+    it('should not render details when they are empty', function () {
+      var CONFIG = {
+        title: 'Title',
+        details: ''
+      };
+      var _renderWithValidation32 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
+          id: ID,
+          entryData: ENTRY,
+          config: CONFIG,
+          parentCollectionName: "parent",
+          pages: [],
+          formData: {},
+          masterPage: {
+            childPages: []
+          }
+        })),
+        container = _renderWithValidation32.container;
+      var _checkSetup31 = checkSetup(container),
+        headerContentDiv = _checkSetup31.headerContentDiv;
       // If no details are provided, we expect only the header title to be rendered.
       expect(headerContentDiv.children.length).toEqual(1);
       var headerTitle = headerContentDiv.children[0];
@@ -1264,7 +1304,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
         title: 'Title',
         details: DETAILS
       };
-      var _renderWithValidation32 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
+      var _renderWithValidation33 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
           id: ID,
           entryData: INTERPOLATED_ENTRY,
           config: CONFIG,
@@ -1275,9 +1315,9 @@ describe('components.CollectionSummary.SummaryCard', function () {
             childPages: []
           }
         })),
-        container = _renderWithValidation32.container;
-      var _checkSetup31 = checkSetup(container),
-        headerContentDiv = _checkSetup31.headerContentDiv;
+        container = _renderWithValidation33.container;
+      var _checkSetup32 = checkSetup(container),
+        headerContentDiv = _checkSetup32.headerContentDiv;
       var headerDetails = headerContentDiv.children[1];
       var expectedInterpolatedString = _copReactComponents.Utils.interpolateString(DETAILS, INTERPOLATED_ENTRY);
       expect(headerDetails.textContent).toEqual(expectedInterpolatedString);
@@ -1286,7 +1326,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
       var CONFIG = {
         title: 'Title'
       };
-      var _renderWithValidation33 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
+      var _renderWithValidation34 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
           id: ID,
           entryData: ENTRY,
           config: CONFIG,
@@ -1297,9 +1337,9 @@ describe('components.CollectionSummary.SummaryCard', function () {
             childPages: []
           }
         })),
-        container = _renderWithValidation33.container;
-      var _checkSetup32 = checkSetup(container),
-        headerContentDiv = _checkSetup32.headerContentDiv;
+        container = _renderWithValidation34.container;
+      var _checkSetup33 = checkSetup(container),
+        headerContentDiv = _checkSetup33.headerContentDiv;
       var headerDetails = headerContentDiv.querySelector("#".concat(ID, ".titleDetail"));
       expect(headerDetails).toBeNull();
     });
@@ -1309,7 +1349,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
         title: 'Title',
         details: DETAILS
       };
-      var _renderWithValidation34 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
+      var _renderWithValidation35 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
           id: ID,
           entryData: ENTRY,
           config: CONFIG,
@@ -1321,187 +1361,9 @@ describe('components.CollectionSummary.SummaryCard', function () {
             childPages: []
           }
         })),
-        container = _renderWithValidation34.container;
+        container = _renderWithValidation35.container;
       var detailsComponent = container.querySelector('.details');
       expect(detailsComponent).toBeNull();
     });
   });
-  describe('SummaryLayout config behavior', function () {
-    it('should render sections and fields based on summaryLayout config', function () {
-      var CHILD_PAGES = [{
-        summaryLayout: {
-          sections: [{
-            title: 'Section 1',
-            columns: 2,
-            fields: ['fieldA', 'fieldB']
-          }, {
-            title: 'Section 2',
-            columns: 1,
-            fields: ['fieldC']
-          }]
-        },
-        components: [{
-          fieldId: 'fieldA'
-        }, {
-          fieldId: 'fieldB'
-        }, {
-          fieldId: 'fieldC'
-        }]
-      }];
-      var CONFIG = {
-        title: 'Title'
-      };
-      var _renderWithValidation35 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
-          id: ID,
-          entryData: ENTRY,
-          config: CONFIG,
-          parentCollectionName: "parent",
-          pages: CHILD_PAGES,
-          formData: {},
-          masterPage: {
-            childPages: CHILD_PAGES
-          }
-        })),
-        container = _renderWithValidation35.container;
-
-      // Function to find an element by its text content
-      function getByTextContent(parent, text) {
-        return Array.from(parent.getElementsByClassName(classes('section-title'))).find(function (el) {
-          return el.textContent === text;
-        });
-      }
-
-      // Check for section titles
-      var section1Title = getByTextContent(container, 'Section 1');
-      var section2Title = getByTextContent(container, 'Section 2');
-      expect(section1Title).not.toBeUndefined();
-      expect(section2Title).not.toBeUndefined();
-      var section1Content = section1Title.parentNode.querySelector(".".concat(classes('section-content')));
-      expect(section1Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(2);
-      var section2Content = section2Title.parentNode.querySelector(".".concat(classes('section-content')));
-      expect(section2Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(1);
-    });
-    it('should render sections if they have show_when checks and pass them', function () {
-      var CHILD_PAGES = [{
-        summaryLayout: {
-          sections: [{
-            title: 'Section 1',
-            columns: 2,
-            fields: ['fieldA', 'fieldB'],
-            show_when: [{
-              field: 'showSection1',
-              op: "=",
-              value: true
-            }]
-          }, {
-            title: 'Section 2',
-            columns: 1,
-            fields: ['fieldC']
-          }]
-        },
-        components: [{
-          fieldId: 'fieldA'
-        }, {
-          fieldId: 'fieldB'
-        }, {
-          fieldId: 'fieldC'
-        }]
-      }];
-      var CONFIG = {
-        title: 'Title'
-      };
-      var CUSTOM_ENTRY = _objectSpread(_objectSpread({}, ENTRY), {}, {
-        showSection1: true
-      });
-      var _renderWithValidation36 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
-          id: ID,
-          entryData: CUSTOM_ENTRY,
-          config: CONFIG,
-          parentCollectionName: "parent",
-          pages: CHILD_PAGES,
-          formData: {},
-          masterPage: {
-            childPages: CHILD_PAGES
-          }
-        })),
-        container = _renderWithValidation36.container;
-
-      // Function to find an element by its text content
-      function getByTextContent(parent, text) {
-        return Array.from(parent.getElementsByClassName(classes('section-title'))).find(function (el) {
-          return el.textContent === text;
-        });
-      }
-
-      // Check for section titles
-      var section1Title = getByTextContent(container, 'Section 1');
-      var section2Title = getByTextContent(container, 'Section 2');
-      expect(section1Title).not.toBeUndefined();
-      expect(section2Title).not.toBeUndefined();
-      var section1Content = section1Title.parentNode.querySelector(".".concat(classes('section-content')));
-      expect(section1Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(2);
-      var section2Content = section2Title.parentNode.querySelector(".".concat(classes('section-content')));
-      expect(section2Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(1);
-    });
-    it('should not render sections if they have show_when checks and fail them', function () {
-      var CHILD_PAGES = [{
-        summaryLayout: {
-          sections: [{
-            title: 'Section 1',
-            columns: 2,
-            fields: ['fieldA', 'fieldB'],
-            show_when: [{
-              field: 'showSection1',
-              op: "=",
-              value: true
-            }]
-          }, {
-            title: 'Section 2',
-            columns: 1,
-            fields: ['fieldC']
-          }]
-        },
-        components: [{
-          fieldId: 'fieldA'
-        }, {
-          fieldId: 'fieldB'
-        }, {
-          fieldId: 'fieldC'
-        }]
-      }];
-      var CONFIG = {
-        title: 'Title'
-      };
-      var CUSTOM_ENTRY = _objectSpread(_objectSpread({}, ENTRY), {}, {
-        showSection1: false
-      });
-      var _renderWithValidation37 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
-          id: ID,
-          entryData: CUSTOM_ENTRY,
-          config: CONFIG,
-          parentCollectionName: "parent",
-          pages: CHILD_PAGES,
-          formData: {},
-          masterPage: {
-            childPages: CHILD_PAGES
-          }
-        })),
-        container = _renderWithValidation37.container;
-
-      // Function to find an element by its text content
-      function getByTextContent(parent, text) {
-        return Array.from(parent.getElementsByClassName(classes('section-title'))).find(function (el) {
-          return el.textContent === text;
-        });
-      }
-
-      // Check for section titles
-      var section1Title = getByTextContent(container, 'Section 1');
-      var section2Title = getByTextContent(container, 'Section 2');
-      expect(section1Title).toBeUndefined();
-      expect(section2Title).not.toBeUndefined();
-      var section2Content = section2Title.parentNode.querySelector(".".concat(classes('section-content')));
-      expect(section2Content.querySelectorAll(".".concat(classes('field'))).length).toEqual(1);
-    });
-  });
 });

package/dist/components/CollectionSummary/SummaryCardDetails.js

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DEFAULT_CLASS = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _utils = _interopRequireDefault(require("../../utils"));
+var _FormComponent = _interopRequireDefault(require("../FormComponent"));
+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 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.
+var DEFAULT_CLASS = exports.DEFAULT_CLASS = 'hods-form-summary-card-details';
+var SummaryCardDetails = function SummaryCardDetails(_ref) {
+  var _masterPage$childPage;
+  var masterPage = _ref.masterPage,
+    childCollections = _ref.childCollections,
+    formData = _ref.formData,
+    entryData = _ref.entryData,
+    classModifiers = _ref.classModifiers,
+    hideChildSectionTitles = _ref.hideChildSectionTitles;
+  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]);
+  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) {
+    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) {
+      var _section$fields;
+      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()] || [];
+        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
+            });
+          }));
+        }
+        return null;
+      }
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: section.title,
+        className: classes('section')
+      }, !hideChildSectionTitles && /*#__PURE__*/_react.default.createElement("h3", {
+        className: classes('section-title')
+      }, section.title), /*#__PURE__*/_react.default.createElement("div", {
+        className: classes('section-content', "columns-".concat(section.columns))
+      }, (_section$fields = section.fields) === null || _section$fields === void 0 ? void 0 : _section$fields.map(function (fieldId) {
+        var component = allPageComponents.find(function (comp) {
+          return comp.fieldId === fieldId;
+        });
+        return /*#__PURE__*/_react.default.createElement("div", {
+          key: fieldId,
+          className: classes('field')
+        }, /*#__PURE__*/_react.default.createElement(_FormComponent.default, {
+          component: _objectSpread(_objectSpread({}, component), {}, {
+            hint: ''
+          }),
+          value: entryData[component === null || component === void 0 ? void 0 : component.fieldId],
+          formData: entryData,
+          wrap: true,
+          readonly: true
+        }));
+      })));
+    });
+  }).filter(function (e) {
+    return !!e;
+  })) || null;
+};
+SummaryCardDetails.propTypes = {
+  childCollections: _propTypes.default.arrayOf(_propTypes.default.string),
+  masterPage: _propTypes.default.shape({
+    childPages: _propTypes.default.arrayOf(_propTypes.default.shape({})).isRequired
+  }).isRequired,
+  formData: _propTypes.default.shape({}).isRequired,
+  entryData: _propTypes.default.shape({}).isRequired,
+  classModifiers: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  hideChildSectionTitles: _propTypes.default.bool
+};
+SummaryCardDetails.defaultProps = {
+  childCollections: [],
+  classModifiers: null,
+  hideChildSectionTitles: false
+};
+var _default = exports.default = SummaryCardDetails;

package/dist/components/CollectionSummary/SummaryCardDetails.scss

@@ -0,0 +1,158 @@
+$govuk-font-family: 'Roboto', arial, sans-serif;
+
+@import "node_modules/govuk-frontend/govuk/_base";
+
+.govuk-grid-column-two-thirds:has(.hods-form-summary-card-details) {
+  width: 100% !important;
+}
+
+.hods-form-summary-card-details {
+  &__section {
+    border-bottom: 2px solid #E9EBED;
+
+    &-title {
+      font-weight: bold;
+      margin: govuk-spacing(2) 0 govuk-spacing(6) 0;
+    }
+
+    &-content {
+      display: flex;
+      flex-wrap: wrap;
+      gap: govuk-spacing(2);
+
+      .hods-form-summary-card-details__field {
+        box-sizing: border-box;
+        margin-bottom: govuk-spacing(4);
+
+        .govuk-label,
+        .govuk-fieldset__legend {
+          font-weight: bold;
+          margin-bottom: govuk-spacing(1) !important;
+
+          &::after {
+            content: " :";
+          }
+        }
+
+        div.govuk-form-group div:has(img){
+          display: flex;
+          flex-wrap: wrap;
+
+          .hods-readonly.hods-readonly--success {
+            font-size: 0;
+            line-height: 0;
+
+            .cop-upload-preview__thumb {
+              display: inline-block;
+              margin-right: govuk-spacing(1);
+            }
+          }
+
+        }
+      }
+
+      &--columns-1,
+      &--columns-2,
+      &--columns-3 {
+        position: relative;
+        margin-bottom: govuk-spacing(1);
+
+        &::before {
+          content: "";
+          position: absolute;
+          top: 0;
+          width: 2px;
+          height: 100%;
+          background-color: #E9EBED;
+          left: 0;
+        }
+      }
+
+      &--columns-2 {
+        &::after {
+          content: "";
+          position: absolute;
+          top: 0;
+          width: 2px;
+          height: 100%;
+          background-color: #E9EBED;
+          left: 50%;
+        }
+
+        .hods-form-summary-card-details__field {
+          flex: 0 0 calc(50% - 10px);
+        }
+      }
+
+      &--columns-3 {
+        &::after {
+          content: "";
+          position: absolute;
+          top: 0;
+          left: 33.333%;
+          width: 2px;
+          height: 100%;
+          background-color: #E9EBED;
+        }
+
+        .hods-form-summary-card-details__field {
+          flex: 0 0 calc(33.333% - 10px);
+
+          &:nth-child(2)::after {
+            content: "";
+            position: absolute;
+            top: 0;
+            right: 33.333%;
+            width: 2px;
+            height: 100%;
+            background-color: #E9EBED;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 640px) {
+  .hods-form-summary-card-details {
+    &__section {
+      &-content {
+        display: block;
+
+        .hods-form-summary-card-details__field {
+          width: 100%;
+        }
+
+        .hods-form-summary-card-details__field:nth-child(2)::after {
+          display: none;
+        }
+
+        &--columns-2,
+        &--columns-3 {
+          position: relative;
+          margin-bottom: govuk-spacing(1);
+
+          &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            width: 2px;
+            height: 100%;
+            background-color: #A9A9A9;
+            left: 0;
+          }
+
+          &::after {
+            display: none;
+          }
+        }
+
+        &--columns-3 {
+          .hods-form-summary-card-details__field:nth-child(2)::after {
+            content: none;
+          }
+        }
+      }
+    }
+  }
+}