@ukhomeoffice/cop-react-form-renderer 6.7.0-alpha → 6.12.0

package/dist/components/CollectionSummary/SummaryCardDetails.js

@@ -8,50 +8,110 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _utils = _interopRequireDefault(require("../../utils"));
 var _models = require("../../models");
-var _getComponentRowForCYA = _interopRequireDefault(require("../../utils/CheckYourAnswers/getComponentRowForCYA"));
+var _getSummaryListRowForDetails = _interopRequireDefault(require("../../utils/CheckYourAnswers/getSummaryListRowForDetails"));
+var _getCYARowsForCollection = _interopRequireDefault(require("../../utils/CheckYourAnswers/getCYARowsForCollection"));
 var _getCYARowsForContainer = _interopRequireDefault(require("../../utils/CheckYourAnswers/getCYARowsForContainer"));
 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 (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; }
 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.
-
 // Styles.
-
-const DEFAULT_CLASS = exports.DEFAULT_CLASS = 'hods-form-summary-card-details';
-const SummaryCardDetails = _ref => {
+var DEFAULT_CLASS = exports.DEFAULT_CLASS = 'hods-form-summary-card-details';
+var SummaryCardDetails = function SummaryCardDetails(_ref) {
   var _masterPage$childPage;
-  let {
-    masterPage,
-    childCollections,
-    formData,
-    entryData,
-    classModifiers,
-    hideChildSectionTitles
-  } = _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 = (section, components, childPage) => {
-    let columnIndex = 0;
-    return section.columns.flatMap((column, index) => {
+  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) {
       var _column$fields;
-      let rowIndex = 0;
-      const columnContent = (_column$fields = column.fields) === null || _column$fields === void 0 ? void 0 : _column$fields.flatMap(fieldId => {
-        const component = components.find(comp => comp.fieldId === fieldId);
-        if (!component || !(0, _showComponent.default)(component, {
-          ...childPage.formData,
-          ...entryData
-        })) {
-          return null;
-        }
-        if (component.type === _models.ComponentTypes.CONTAINER) {
-          const containerRows = (0, _getCYARowsForContainer.default)(childPage, component, entryData);
+      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) {
+          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);
+            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, _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), {}, {
+              formData: _objectSpread(_objectSpread({}, childPage.formData), entryData)
+            }), component, entryData[component.id]);
+            rowIndex += 1;
+            var collectionHeadingIndex = 0;
+            return /*#__PURE__*/_react.default.createElement("div", {
+              key: fieldId,
+              className: classes('field'),
+              style: {
+                '--column': columnIndex + 1,
+                '--row': rowIndex
+              }
+            }, collectionRows.map(function (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), {
+                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
+              if (subComponent.type === 'title') {
+                collectionHeadingIndex += 1;
+                if (collectionHeadingIndex > 1) {
+                  return /*#__PURE__*/_react.default.createElement("div", {
+                    style: {
+                      marginTop: '40px'
+                    }
+                  }, rowContent);
+                }
+              }
+              return rowContent;
+            }));
+          }
           rowIndex += 1;
           return /*#__PURE__*/_react.default.createElement("div", {
             key: fieldId,
@@ -60,38 +120,16 @@ const SummaryCardDetails = _ref => {
               '--column': columnIndex + 1,
               '--row': rowIndex
             }
-          }, containerRows.map(subComponent => {
-            var _entryData$component$;
-            // Put value for current subcomponent at top level
-            const modEntry = {
-              ...entryData,
-              ...{
-                [subComponent.fieldId]: (_entryData$component$ = entryData[component.fieldId]) === null || _entryData$component$ === void 0 ? void 0 : _entryData$component$[subComponent.fieldId]
-              }
-            };
-            return (0, _getComponentRowForCYA.default)(childPage, {
-              ...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(e => !!e);
+          }, (0, _getSummaryListRowForDetails.default)(childPage, component, classes, entryData, optionalFieldPlaceholder));
+        });
+      }).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.
-      const lastColumn = index === section.columns.length - 1;
+      var lastColumn = index === columns.length - 1;
       if (!lastColumn && columnContent.length !== 0) {
         columnIndex += 2;
         return [].concat(columnContent, [/*#__PURE__*/_react.default.createElement("div", {
@@ -103,54 +141,58 @@ const SummaryCardDetails = _ref => {
         })]);
       }
       return columnContent;
-    }).filter(e => !!e);
+    }).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(p => _utils.default.FormPage.show(p, {
-    ...formData,
-    ...entryData
-  })).map(childPage => {
+  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;
-    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, {
-        ...formData,
-        ...entryData
-      })) {
+    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) {
+      if (section.show_when && !_utils.default.Condition.meetsAll(section.show_when, _objectSpread(_objectSpread({}, formData), entryData))) {
         return null;
       }
       if (section.type === 'childCollection') {
-        const childMasterPage = childMasterPages.find(p => p.collection.name === section.collectionName);
-        const childFormData = entryData[section.collectionName.split('.').pop()] || [];
+        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(entry => /*#__PURE__*/_react.default.createElement(SummaryCardDetails, {
-            masterPage: childMasterPage,
-            childMasterPages: [],
-            formData: {
-              ...formData,
-              ...entryData,
-              ...entry
-            },
-            entryData: entry,
-            hideChildSectionTitles: true
-          })));
+          }, 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
+            });
+          }));
         }
         return null;
       }
+      var columns = section.columns.filter(function (column) {
+        return _Condition.default.meetsAll(column, _objectSpread(_objectSpread({}, childPage.formData), entryData));
+      });
       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", {
+      }, _utils.default.FormPage.getConditionalText(section.title, _objectSpread(_objectSpread({}, childPage.formData), entryData))), /*#__PURE__*/_react.default.createElement("dl", {
         className: classes('section-content'),
         style: {
-          '--dividers': section.columns.length - 1
+          '--dividers': columns.length - 1
         }
-      }, getSectionContent(section, allPageComponents, childPage)));
+      }, getSectionContent(columns, allPageComponents, childPage)));
     });
-  }).filter(e => !!e)) || null;
+  }).filter(function (e) {
+    return !!e;
+  })) || null;
 };
 SummaryCardDetails.propTypes = {
   childCollections: _propTypes.default.arrayOf(_propTypes.default.string),
@@ -160,11 +202,13 @@ SummaryCardDetails.propTypes = {
   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
+  hideChildSectionTitles: _propTypes.default.bool,
+  optionalFieldPlaceholder: _propTypes.default.string
 };
 SummaryCardDetails.defaultProps = {
   childCollections: [],
   classModifiers: null,
-  hideChildSectionTitles: false
+  hideChildSectionTitles: false,
+  optionalFieldPlaceholder: null
 };
 var _default = exports.default = SummaryCardDetails;

package/dist/components/CollectionSummary/SummaryCardDetails.scss

@@ -1,6 +1,6 @@
 $govuk-font-family: 'Roboto', arial, sans-serif;
 
-@import "node_modules/govuk-frontend/govuk/_base";
+@import 'govuk-frontend/dist/govuk/_base';
 
 .govuk-grid-column-two-thirds:has(.hods-form-summary-card-details) {
   width: 100% !important;
@@ -15,6 +15,10 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
     }
   }
 
+  &__field {
+    margin-bottom: govuk-spacing(6);
+  }
+
   &__key {
     font-weight: bold;
     margin: govuk-spacing(2) 0 govuk-spacing(1) 0;
@@ -24,7 +28,7 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
     margin: 0;
 
     .hods-form-container .govuk-form-group {
-      margin-bottom: 0px;
+      margin-bottom: 0;
 
       label {
         display: none;
@@ -137,6 +141,8 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
         grid-column-end: var(--column);
         grid-row-start: var(--row);
         grid-row-end: var(--row);
+        margin-block-start: 0;
+        margin-block-end: 0;
       }
 
       .hods-form-summary-card-details__divider {
@@ -153,6 +159,11 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
 
 @media (max-width: 640px) {
   .hods-form-summary-card-details {
+
+    &__title {
+      margin-top: govuk-spacing(8)
+    }
+
     &__section {
       &-content {
         display: block;
@@ -167,8 +178,8 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
 
         .hods-form-summary-card-details__divider {
           position: absolute;
-          height: 0%;
-          width: 0%;
+          height: 0;
+          width: 0;
           background-color: #E9EBED;
           grid-column-start: var(--column);
           grid-column-end: var(--column);