@ukhomeoffice/cop-react-form-renderer 6.11.1 → 6.12.0

package/dist/components/CollectionSummary/SummaryCard.scss

@@ -44,6 +44,12 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
         margin-right: govuk-spacing(2);
       }
 
+      &-title {
+        margin-block-start: 0;
+        margin-block-end: 0;
+        font-size: 1em;
+      }
+
       &-detail {
         font-weight: normal;
       }

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

@@ -81,7 +81,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
     expect(headerBanners.tagName).toEqual('DIV');
     expect(headerBanners.classList).toContain(_BannerStrip.DEFAULT_CLASS);
     var headerTitle = headerContentDiv.children[1];
-    expect(headerTitle.tagName).toEqual('DIV');
+    expect(headerTitle.tagName).toEqual('H2');
     expect(headerTitle.classList).toContain(classes('header-content-title'));
     expect(headerTitle.textContent).toEqual(CONFIG.title);
     var headerDetails = headerContentDiv.children[2];
@@ -113,7 +113,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
     // and the details.
 
     var headerTitle = headerContentDiv.children[0];
-    expect(headerTitle.tagName).toEqual('DIV');
+    expect(headerTitle.tagName).toEqual('H2');
     expect(headerTitle.classList).toContain(classes('header-content-title'));
     expect(headerTitle.textContent).toEqual(CONFIG.title);
     var headerDetails = headerContentDiv.children[1];
@@ -148,7 +148,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
     // the title.
 
     var headerTitle = headerContentDiv.children[1];
-    expect(headerTitle.tagName).toEqual('DIV');
+    expect(headerTitle.tagName).toEqual('H2');
     expect(headerTitle.classList).toContain(classes('header-content-title'));
     expect(headerTitle.textContent).toEqual(CONFIG.title);
   });
@@ -171,7 +171,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
     var _checkSetup4 = checkSetup(container),
       headerContentDiv = _checkSetup4.headerContentDiv;
     var headerTitle = headerContentDiv.children[0];
-    expect(headerTitle.tagName).toEqual('DIV');
+    expect(headerTitle.tagName).toEqual('H2');
     expect(headerTitle.classList).toContain(classes('header-content-title'));
     expect(headerTitle.textContent).toEqual("".concat(ENTRY.titleText, " that is interpolated"));
   });
@@ -211,7 +211,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
     var _checkSetup5 = checkSetup(container),
       headerContentDiv = _checkSetup5.headerContentDiv;
     var headerTitle = headerContentDiv.children[0];
-    expect(headerTitle.tagName).toEqual('DIV');
+    expect(headerTitle.tagName).toEqual('H2');
     expect(headerTitle.classList).toContain(classes('header-content-title'));
     expect(headerTitle.textContent).toEqual("".concat(ENTRY.titleText, " that is interpolated"));
   });

package/dist/components/CollectionSummary/SummaryCardDetails.js

@@ -168,7 +168,8 @@ var SummaryCardDetails = function SummaryCardDetails(_ref) {
               childMasterPages: [],
               formData: _objectSpread(_objectSpread(_objectSpread({}, formData), entryData), entry),
               entryData: entry,
-              hideChildSectionTitles: true
+              hideChildSectionTitles: true,
+              optionalFieldPlaceholder: optionalFieldPlaceholder
             });
           }));
         }
@@ -182,7 +183,7 @@ var SummaryCardDetails = function SummaryCardDetails(_ref) {
         className: classes('section')
       }, !hideChildSectionTitles && /*#__PURE__*/_react.default.createElement("h3", {
         className: classes('section-title')
-      }, _utils.default.FormPage.getConditionalText(section.title, _objectSpread(_objectSpread({}, childPage.formData), entryData))), /*#__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': columns.length - 1

package/dist/components/CollectionSummary/SummaryCardDetails.scss

@@ -141,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 {

package/dist/components/FormComponent/FormComponent.js

@@ -89,7 +89,7 @@ var FormComponent = function FormComponent(_ref) {
   };
   (0, _react.useEffect)(function () {
     var defaultValue = _utils.default.Component.defaultValue(component, formData);
-    if (!value && defaultValue) {
+    if (!value && !(formData !== null && formData !== void 0 && formData[component.fieldId]) && defaultValue) {
       if (typeof onComponentChange === 'function') {
         onComponentChange({
           target: {

package/dist/components/FormPage/FormPage.js

@@ -62,13 +62,25 @@ var FormPage = function FormPage(_ref) {
   var onPageChange = function onPageChange(_ref2) {
     var target = _ref2.target;
     var formPage = page;
-    formPage.formData[target.name] = target.value;
-    setPatch(function (prev) {
-      return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, target.name, target.value));
-    });
-    setPatchLabel(function (prev) {
-      return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, target.component, target.label));
-    });
+    if (target.value == null) {
+      delete formPage.formData[target.name];
+      setPatch(function (prev) {
+        var data = prev;
+        return delete data[target.name];
+      });
+      setPatchLabel(function (prev) {
+        var data = prev;
+        return delete data[target.component];
+      });
+    } else {
+      formPage.formData[target.name] = target.value;
+      setPatch(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, target.name, target.value));
+      });
+      setPatchLabel(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, target.component, target.label));
+      });
+    }
     if (typeof onChange === 'function') {
       onChange(page.formData);
     }

package/dist/components/FormRenderer/helpers/cleanHiddenNestedData.js

@@ -5,6 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _optionIsSelected = _interopRequireDefault(require("../../../utils/Component/optionIsSelected"));
+var _getCollectionPageActiveId = _interopRequireDefault(require("../../../utils/CollectionPage/getCollectionPageActiveId"));
+var _getCollectionPageData = _interopRequireDefault(require("../../../utils/CollectionPage/getCollectionPageData"));
+var _setCollectionPageData = _interopRequireDefault(require("../../../utils/CollectionPage/setCollectionPageData"));
 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; }
@@ -13,6 +16,14 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 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); } // Local imports
 var parentComponents = ['radios', 'checkboxes'];
+var getActiveIds = function getActiveIds(collectionName, formData) {
+  var nameParts = collectionName.split('.');
+  var result = {};
+  nameParts.forEach(function (part) {
+    result["".concat(part, "ActiveId")] = formData["".concat(part, "ActiveId")];
+  });
+  return result;
+};
 function getIdsToDelete(component, selectedValue) {
   var _component$data;
   var idsToDelete = [];
@@ -25,29 +36,30 @@ function getIdsToDelete(component, selectedValue) {
   });
   return idsToDelete;
 }
-;
 var cleanHiddenNestedData = function cleanHiddenNestedData(patch, page) {
+  var _patch = patch;
   page.components.forEach(function (component) {
     if (!parentComponents.includes(component.type)) {
       return;
     }
-    var _patch = patch;
     var idsToDelete = getIdsToDelete(component, _patch[component.id]);
     idsToDelete.forEach(function (id) {
       delete _patch[id];
     });
   });
-  if (page.collection && patch[page.collection.name]) {
-    var _page$formData;
-    var activeId = patch["".concat(page.collection.name, "ActiveId")] || ((_page$formData = page.formData) === null || _page$formData === void 0 ? void 0 : _page$formData["".concat(page.collection.name, "ActiveId")]);
-    var _patch = patch;
-    _patch[page.collection.name] = _patch[page.collection.name].map(function (entry) {
-      return entry.id === activeId ? cleanHiddenNestedData(entry, _objectSpread(_objectSpread({}, page), {}, {
-        collection: undefined
-      })) : entry;
-    });
+  if (page.collection) {
+    _patch = _objectSpread(_objectSpread({}, getActiveIds(page.collection.name, page.formData)), _patch);
+    var collectionData = (0, _getCollectionPageData.default)(page.collection.name, _patch);
+    if (collectionData) {
+      var activeId = (0, _getCollectionPageActiveId.default)(page.collection.name, _patch);
+      var modifiedCollection = collectionData.map(function (entry) {
+        return entry.id === activeId ? cleanHiddenNestedData(entry, _objectSpread(_objectSpread({}, page), {}, {
+          collection: undefined
+        })) : entry;
+      });
+      (0, _setCollectionPageData.default)(page.collection.name, modifiedCollection, _patch);
+    }
   }
-  ;
-  return patch;
+  return _patch;
 };
 var _default = exports.default = cleanHiddenNestedData;

package/dist/components/FormRenderer/helpers/cleanHiddenNestedData.test.js

@@ -78,7 +78,7 @@ describe('components', function () {
           expect(updatedPatchCheckboxes.nested1).toBeFalsy();
           expect(updatedPatchCheckboxes.nested2).toBeTruthy();
         });
-        it('remove data corresponding to hidden nested components within the active collection entry', function () {
+        it('should remove data corresponding to hidden nested components within the active collection entry', function () {
           var patch = {
             collectionNameActiveId: '456',
             collectionName: [{
@@ -100,6 +100,9 @@ describe('components', function () {
             collection: {
               name: 'collectionName'
             },
+            formData: {
+              collectionNameActiveId: '456'
+            },
             components: [{
               id: 'parent',
               type: 'radios',
@@ -126,6 +129,61 @@ describe('components', function () {
           expect(updatedPatch.collectionName[1].nested1).toBeFalsy();
           expect(updatedPatch.collectionName[1].nested2).toBeTruthy();
         });
+        it('should remove data corresponding to hidden nested components when collection is nested within an entity', function () {
+          var patch = {
+            collectionNameActiveId: '456',
+            entities: [{
+              id: '777',
+              collectionName: [{
+                id: '123',
+                parent: 'option1',
+                nested1: 'should be included',
+                nested2: 'should be included'
+              }, {
+                id: '456',
+                parent: 'option2',
+                nested1: 'should not be included',
+                nested2: 'should be included'
+              }]
+            }]
+          };
+          var page = {
+            id: 'page',
+            name: 'page',
+            title: 'Page',
+            collection: {
+              name: 'entities.collectionName'
+            },
+            formData: {
+              collectionNameActiveId: '456',
+              entitiesActiveId: '777'
+            },
+            components: [{
+              id: 'parent',
+              type: 'radios',
+              data: {
+                options: [{
+                  value: 'option1',
+                  nested: [{
+                    id: 'nested1',
+                    fieldId: 'nested1'
+                  }]
+                }, {
+                  value: 'option2',
+                  nested: [{
+                    id: 'nested2',
+                    fieldId: 'nested2'
+                  }]
+                }]
+              }
+            }]
+          };
+          var updatedPatch = (0, _cleanHiddenNestedData.default)(patch, page);
+          expect(updatedPatch.entities[0].collectionName[0].nested1).toBeTruthy();
+          expect(updatedPatch.entities[0].collectionName[0].nested2).toBeTruthy();
+          expect(updatedPatch.entities[0].collectionName[1].nested1).toBeFalsy();
+          expect(updatedPatch.entities[0].collectionName[1].nested2).toBeTruthy();
+        });
       });
     });
   });

package/dist/components/FormRenderer/onPageAction.js

@@ -100,7 +100,11 @@ var onPageAction = function onPageAction(action, patch, patchLabel, hooks, data,
           break;
       }
       ;
-      /* eslint-enable no-case-declarations */
+
+      // If a value has been deleted from formData,
+      // also delete it from data before doing object spread,
+      // or else it will reappear in submissionData.
+      _utils.default.Data.deleteValues(data, formState.page.formData);
 
       // Save draft or submit.
       var submissionData = _utils.default.Format.form({

package/dist/json/actions.json

@@ -0,0 +1,17 @@
+[
+    {
+        "type": "submit",
+        "label": "Submit",
+        "validate": true
+    },
+    {
+        "type": "saveAndReturn",
+        "show_when": {
+            "field": "areYouACivilServant",
+            "op": "nin",
+            "values": [
+                "no"
+            ]
+        }
+    }
+]

package/dist/json/actionsNoSave.json

@@ -0,0 +1,17 @@
+[
+    {
+        "type": "submit",
+        "label": "Submit",
+        "validate": true
+    },
+    {
+        "type": "saveAndReturn",
+        "show_when": {
+            "field": "areYouACivilServant",
+            "op": "nin",
+            "values": [
+                "yes"
+            ]
+        }
+    }
+]

package/dist/utils/CheckYourAnswers/getCYARowsForCollectionPage.js

@@ -204,8 +204,9 @@ var getCYARowsForCollectionPage = function getCYARowsForCollectionPage(page, onA
     rows.push(getCollectionNameHeading(page, collectionName, page.collection.collectionHeading, headingChangeAction));
   }
   var itemIndex = 0;
-  var result = Array.isArray(page.collection.onlyShowActiveEntryOnCYA) ? (0, _meetsAllConditions.default)(page.collection.onlyShowActiveEntryOnCYA, data) : page.collection.onlyShowActiveEntryOnCYA;
-  if (result) {
+  var hideItemTitles = Array.isArray(page.collection.hideItemTitles) ? (0, _meetsAllConditions.default)(page.collection.hideItemTitles, data) : page.collection.hideItemTitles;
+  var onlyShowActiveEntry = Array.isArray(page.collection.onlyShowActiveEntryOnCYA) ? (0, _meetsAllConditions.default)(page.collection.onlyShowActiveEntryOnCYA, data) : page.collection.onlyShowActiveEntryOnCYA;
+  if (onlyShowActiveEntry) {
     var activeEntry = collectionData.find(function (entry, index) {
       itemIndex = index;
       return entry.id === activeId;
@@ -222,9 +223,11 @@ var getCYARowsForCollectionPage = function getCYARowsForCollectionPage(page, onA
     var labelCount = itemIndex + 1;
     var actionPosition = ((_page$collection2 = page.collection) === null || _page$collection2 === void 0 ? void 0 : _page$collection2.actionPosition) || 'top';
     var fullPath = "".concat(page.collection.name, "[").concat(itemIndex, "]");
-    var titleRow = getTitleRowForItem(page, item, page.id, labelCount, fullPath);
     var actionRows = getActionRows(page, item, onAction, labelCount, activeIds);
-    rows = rows.concat(titleRow);
+    if (!hideItemTitles) {
+      var titleRow = getTitleRowForItem(page, item, page.id, labelCount, fullPath);
+      rows = rows.concat(titleRow);
+    }
     if (actionPosition === 'top') {
       rows = rows.concat(actionRows);
     }

package/dist/utils/CheckYourAnswers/getCYARowsForCollectionPage.test.js

@@ -103,6 +103,45 @@ describe('utils.CheckYourAnswers.getCYARowsForCollectionPage', function () {
     expect(ROWS.length).toEqual(7); // Collection title, item title, action rows & component rows
     expect(ROWS[1].key).toEqual('Collection entry 1');
   });
+  it('should hide titles when hideItemTitles is true', function () {
+    var FORM_DATA = {
+      collection: [{
+        id: '01',
+        testText: 'value'
+      }]
+    };
+    var PAGE = _objectSpread(_objectSpread({}, MASTER_PAGE), {}, {
+      formData: FORM_DATA,
+      collection: _objectSpread(_objectSpread({}, MASTER_PAGE.collection), {}, {
+        hideItemTitles: true
+      })
+    });
+    var ROWS = (0, _getCYARowsForCollectionPage.default)(PAGE, null, null, FORM_DATA);
+    expect(ROWS.length).toEqual(6); // Collection title, NO item title, action rows & component rows
+  });
+
+  it('should hide titles when hideItemTitles is a show_when that is true', function () {
+    var FORM_DATA = {
+      shouldShow: false,
+      collection: [{
+        id: '01',
+        testText: 'value'
+      }]
+    };
+    var PAGE = _objectSpread(_objectSpread({}, MASTER_PAGE), {}, {
+      formData: FORM_DATA,
+      collection: _objectSpread(_objectSpread({}, MASTER_PAGE.collection), {}, {
+        hideItemTitles: [{
+          field: 'shouldShow',
+          op: '=',
+          value: false
+        }]
+      })
+    });
+    var ROWS = (0, _getCYARowsForCollectionPage.default)(PAGE, null, null, FORM_DATA);
+    expect(ROWS.length).toEqual(6); // Collection title, NO item title, action rows & component rows
+  });
+
   it('should provide default titles if collection.labels.item is not specified', function () {
     var FORM_DATA = {
       collection: [{

package/dist/utils/CheckYourAnswers/showComponentCYA.js

@@ -33,7 +33,7 @@ var showComponentCYA = function showComponentCYA(options, data) {
   }
   if (options.hideOnCyaWhenEmpty) {
     if (options.type === _models.ComponentTypes.COLLECTION) {
-      var itemCollectionsData = (0, _getSourceData.default)(data, options.full_path);
+      var itemCollectionsData = (0, _getSourceData.default)(data, options.full_path || options.fieldId);
       if (!(itemCollectionsData !== null && itemCollectionsData !== void 0 && itemCollectionsData.length)) {
         return false;
       }

package/dist/utils/Data/deleteValues.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/**
+ * Find values in data not in formData
+ * and delete them from data.
+ * @param {object} data The page's data.
+ * @param {object} formData The page's formData.
+ */
+var deleteValues = function deleteValues(data, formData) {
+  var deletedValues = Object.keys(data).filter(function (k) {
+    return !(k in formData);
+  });
+  var node = data;
+  deletedValues.forEach(function (i) {
+    return delete node[i];
+  });
+};
+var _default = exports.default = deleteValues;

package/dist/utils/Data/deleteValues.test.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _deleteValues = _interopRequireDefault(require("./deleteValues"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+describe('Utils.Data.deleteValues', function () {
+  it('Should delete values from data', function () {
+    var DATA = {
+      a: '1',
+      b: '2',
+      c: '3'
+    };
+    var FORMDATA = {
+      a: '1'
+    };
+    (0, _deleteValues.default)(DATA, FORMDATA);
+    expect(DATA).toEqual({
+      a: '1'
+    });
+  });
+  it('Should leave data unchanged if no differences', function () {
+    var DATA = {
+      a: '1',
+      b: '2',
+      c: '3'
+    };
+    var FORMDATA = {
+      a: '1',
+      b: '2',
+      c: '3'
+    };
+    (0, _deleteValues.default)(DATA, FORMDATA);
+    expect(DATA).toEqual({
+      a: '1',
+      b: '2',
+      c: '3'
+    });
+  });
+  it('Should leave data unchanged if form data has additional fields', function () {
+    var DATA = {
+      a: '1',
+      b: '2',
+      c: '3'
+    };
+    var FORMDATA = {
+      a: '1',
+      b: '2',
+      c: '3',
+      d: '4'
+    };
+    (0, _deleteValues.default)(DATA, FORMDATA);
+    expect(DATA).toEqual({
+      a: '1',
+      b: '2',
+      c: '3'
+    });
+  });
+});

package/dist/utils/Data/getAutocompleteSource.test.js

@@ -14,6 +14,7 @@ describe('utils', function () {
     var gbCurrency = {
       currencyName: 'Great British Pounds',
       currencyCode: 'GBP',
+      hint: 'hint',
       value: 'GBP',
       label: 'GBP',
       slangTerm: 'quid'
@@ -21,6 +22,7 @@ describe('utils', function () {
     var usCurrency = {
       currencyName: 'United States Dollars',
       currencyCode: 'USD',
+      hint: 'hint',
       value: 'USD',
       label: 'USD',
       slangTerm: 'bucks',
@@ -29,19 +31,23 @@ describe('utils', function () {
     var options = {
       alpha: {
         value: 'a',
-        label: 'Alpha'
+        label: 'Alpha',
+        hint: 'hint'
       },
       bravo: {
         value: 'b',
-        label: 'Bravo'
+        label: 'Bravo',
+        hint: 'hint'
       },
       alIncluded: {
         value: 'c',
-        label: 'Call me alan'
+        label: 'Call me alan',
+        hint: 'hint'
       },
       alStart: {
         value: 'd',
-        label: 'Word Alphabet'
+        label: 'Word Alphabet',
+        hint: 'hint'
       }
     };
     var testCurrencies = [gbCurrency, usCurrency];
@@ -71,7 +77,8 @@ describe('utils', function () {
             expect(results.length).toEqual(1);
             expect(results).toEqual([{
               value: 'a',
-              label: 'Alpha'
+              label: 'Alpha',
+              hint: 'hint'
             }]);
           });
         });
@@ -249,6 +256,7 @@ describe('utils', function () {
               options: [gbCurrency, {
                 currencyName: 'United States Dollars',
                 currencyCode: 'USD',
+                hint: 'hint',
                 value: 'USD'
               }]
             }
@@ -263,6 +271,7 @@ describe('utils', function () {
             expect(results).toEqual([gbCurrency, {
               currencyName: 'United States Dollars',
               currencyCode: 'USD',
+              hint: 'hint',
               value: 'USD',
               label: ''
             }]);

package/dist/utils/Data/getOptions.js

@@ -32,7 +32,8 @@ var interpolateOptions = function interpolateOptions(config, options) {
     }
     return _objectSpread(_objectSpread({}, opt), {}, {
       value: _copReactComponents.Utils.interpolateString(opt.value, config.formData),
-      label: _copReactComponents.Utils.interpolateString(opt.label, config.formData)
+      label: _copReactComponents.Utils.interpolateString(opt.label, config.formData),
+      hint: _copReactComponents.Utils.interpolateString(opt.hint, config.formData)
     });
   }).filter(function (n) {
     return n;