@ukhomeoffice/cop-react-form-renderer 5.67.1 → 5.68.0

package/dist/components/CollectionSummary/RenderListView.js

@@ -80,8 +80,11 @@ var RenderListView = function RenderListView(_ref) {
       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) {
-      if (section.fields) {
-        return section.fields.flatMap(function (fieldId) {
+      var summaryFields = section.columns.flatMap(function (column) {
+        return column.fields || [];
+      });
+      if (summaryFields.length) {
+        return summaryFields.flatMap(function (fieldId) {
           var component = elevatedComponents.find(function (comp) {
             return comp.fieldId === fieldId;
           });

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

@@ -25,7 +25,9 @@ describe('components.CollectionSummary.RenderListView', function () {
     childPages: [{
       summaryLayout: {
         sections: [{
-          fields: ['item1', 'item2', 'item3']
+          columns: [{
+            fields: ['item1', 'item2', 'item3']
+          }]
         }]
       },
       components: [{

package/dist/components/CollectionSummary/SummaryCardDetails.js

@@ -42,13 +42,75 @@ var SummaryCardDetails = function SummaryCardDetails(_ref) {
       return !!e;
     });
   }, [masterPage, childCollections]);
+  var getSectionContent = function getSectionContent(section, components, childPage) {
+    var columnIndex = 0;
+    return section.columns.flatMap(function (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 component = components.find(function (comp) {
+          return comp.fieldId === fieldId;
+        });
+        if (!component) {
+          return null;
+        }
+        if (component.type === _models.ComponentTypes.CONTAINER) {
+          var containerRows = (0, _getCYARowsForContainer.default)(childPage, component, entryData);
+          rowIndex += 1;
+          return /*#__PURE__*/_react.default.createElement("div", {
+            key: fieldId,
+            className: classes('field'),
+            style: {
+              '--column': columnIndex + 1,
+              '--row': rowIndex
+            }
+          }, containerRows.map(function (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]));
+            return (0, _getComponentRowForCYA.default)(childPage, _objectSpread(_objectSpread({}, subComponent), {
+              label: subComponent.key
+            }), classes, modEntry);
+          }));
+        }
+        rowIndex += 1;
+        return /*#__PURE__*/_react.default.createElement("div", {
+          key: fieldId,
+          className: classes('field'),
+          style: {
+            '--column': columnIndex + 1,
+            '--row': rowIndex
+          }
+        }, (0, _getComponentRowForCYA.default)(childPage, component, classes, entryData));
+      }).filter(function (e) {
+        return !!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 === section.columns.length - 1;
+      if (!lastColumn && columnContent.length !== 0) {
+        columnIndex += 2;
+        return [].concat(columnContent, [/*#__PURE__*/_react.default.createElement("div", {
+          key: "divider".concat(columnIndex),
+          className: classes('divider'),
+          style: {
+            '--column': columnIndex
+          }
+        })]);
+      }
+      return columnContent;
+    }).filter(function (e) {
+      return !!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) {
     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;
       }
@@ -78,33 +140,11 @@ var SummaryCardDetails = function SummaryCardDetails(_ref) {
       }, !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;
-        });
-        if (!component) {
-          return null;
+        className: classes('section-content'),
+        style: {
+          '--dividers': section.columns.length - 1
         }
-        if (component.type === _models.ComponentTypes.CONTAINER) {
-          var containerRows = (0, _getCYARowsForContainer.default)(childPage, component, entryData);
-          return /*#__PURE__*/_react.default.createElement("div", {
-            key: fieldId,
-            className: classes('field')
-          }, containerRows.map(function (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]));
-            return (0, _getComponentRowForCYA.default)(childPage, _objectSpread(_objectSpread({}, subComponent), {
-              label: subComponent.key
-            }), classes, modEntry);
-          }));
-        }
-        return /*#__PURE__*/_react.default.createElement("div", {
-          key: fieldId,
-          className: classes('field')
-        }, (0, _getComponentRowForCYA.default)(childPage, component, classes, entryData));
-      })));
+      }, getSectionContent(section, allPageComponents, childPage)));
     });
   }).filter(function (e) {
     return !!e;

package/dist/components/CollectionSummary/SummaryCardDetails.scss

@@ -36,9 +36,12 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
     border-bottom: 2px solid #E9EBED;
 
     &-content {
-      display: flex;
-      flex-wrap: wrap;
+      display: grid;
+      grid-template-columns: repeat(var(--dividers), 1fr 2px) 1fr;
+      grid-auto-rows: minmax(100px, 1fr);
       gap: govuk-spacing(2);
+      position: relative;
+      margin-bottom: govuk-spacing(1);
 
       .hods-form-summary-card__field {
         box-sizing: border-box;
@@ -61,6 +64,7 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
         }
       }
 
+      /*
       &--columns-1,
       &--columns-2,
       &--columns-3 {
@@ -79,6 +83,9 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
       }
 
       &--columns-2 {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+
         &::after {
           content: "";
           position: absolute;
@@ -89,12 +96,13 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
           left: 50%;
         }
 
-        .hods-form-summary-card-details__field {
-          flex: 0 0 calc(50% - 10px);
-        }
+
       }
 
       &--columns-3 {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+
         &::after {
           content: "";
           position: absolute;
@@ -106,7 +114,10 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
         }
 
         .hods-form-summary-card-details__field {
-          flex: 0 0 calc(33.333% - 10px);
+          grid-column-start: var("--column");
+          grid-column-end: var("--column");
+          grid-row-start: var("--row");
+          grid-row-end: var("--row");
 
           &:nth-child(2)::after {
             content: "";
@@ -119,6 +130,23 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
           }
         }
       }
+      */
+
+      .hods-form-summary-card-details__field {
+        grid-column-start: var(--column);
+        grid-column-end: var(--column);
+        grid-row-start: var(--row);
+        grid-row-end: var(--row);
+      }
+
+      .hods-form-summary-card-details__divider {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        background-color: #E9EBED;
+        grid-column-start: var(--column);
+        grid-column-end: var(--column);
+      }
     }
   }
 }
@@ -137,6 +165,15 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
           display: none;
         }
 
+        .hods-form-summary-card-details__divider {
+          position: absolute;
+          height: 0%;
+          width: 0%;
+          background-color: #E9EBED;
+          grid-column-start: var(--column);
+          grid-column-end: var(--column);
+        }
+
         &--columns-2,
         &--columns-3 {
           position: relative;

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

@@ -38,12 +38,16 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
       summaryLayout: {
         sections: [{
           title: 'Section 1',
-          columns: 2,
-          fields: ['fieldA', 'fieldB']
+          columns: [{
+            fields: ['fieldA']
+          }, {
+            fields: ['fieldB']
+          }]
         }, {
           title: 'Section 2',
-          columns: 1,
-          fields: ['fieldC']
+          columns: [{
+            fields: ['fieldC']
+          }]
         }]
       },
       components: [{
@@ -87,8 +91,9 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
       summaryLayout: {
         sections: [{
           title: 'Section 1',
-          columns: 1,
-          fields: ['containerComponent']
+          columns: [{
+            fields: ['containerComponent']
+          }]
         }]
       },
       components: [{
@@ -156,8 +161,11 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
       summaryLayout: {
         sections: [{
           title: 'Section 1',
-          columns: 2,
-          fields: ['fieldA', 'fieldB'],
+          columns: [{
+            fields: ['fieldA']
+          }, {
+            fields: ['fieldB']
+          }],
           show_when: [{
             field: 'showSection1',
             op: "=",
@@ -165,8 +173,9 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
           }]
         }, {
           title: 'Section 2',
-          columns: 1,
-          fields: ['fieldC']
+          columns: [{
+            fields: ['fieldC']
+          }]
         }]
       },
       components: [{
@@ -213,8 +222,11 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
       summaryLayout: {
         sections: [{
           title: 'Section 1',
-          columns: 2,
-          fields: ['fieldA', 'fieldB'],
+          columns: [{
+            fields: ['fieldA']
+          }, {
+            fields: ['fieldB']
+          }],
           show_when: [{
             field: 'showSection1',
             op: "=",
@@ -222,8 +234,9 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
           }]
         }, {
           title: 'Section 2',
-          columns: 1,
-          fields: ['fieldC']
+          columns: [{
+            fields: ['fieldC']
+          }]
         }]
       },
       components: [{
@@ -273,8 +286,11 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
       summaryLayout: {
         sections: [{
           title: 'Section 1',
-          columns: 2,
-          fields: ['fieldA', 'fieldB'],
+          columns: [{
+            fields: ['fieldA']
+          }, {
+            fields: ['fieldB']
+          }],
           show_when: [{
             field: 'showSection1',
             op: "=",
@@ -282,8 +298,9 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
           }]
         }, {
           title: 'Section 2',
-          columns: 1,
-          fields: ['fieldC']
+          columns: [{
+            fields: ['fieldC']
+          }]
         }]
       },
       components: [{
@@ -337,8 +354,11 @@ describe('components.CollectionSummary.SummaryCardDetails', function () {
         summaryLayout: {
           sections: [{
             title: 'Hidden Title',
-            columns: 2,
-            fields: ['childfield1', 'childfield2']
+            columns: [{
+              fields: ['childfield1']
+            }, {
+              fields: ['childfield2']
+            }]
           }]
         }
       }]

package/package.json

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