@ukhomeoffice/cop-react-form-renderer 5.74.5 → 5.75.0

package/dist/components/SummaryList/SummaryList.js

@@ -10,6 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _GroupAction = _interopRequireDefault(require("./GroupAction"));
 var _SummaryListRow = _interopRequireDefault(require("./SummaryListRow"));
 var _SummaryListHeadingRow = _interopRequireDefault(require("./SummaryListHeadingRow"));
+var _SummaryListHeadingRowWithAction = _interopRequireDefault(require("./SummaryListHeadingRowWithAction"));
 var _SummaryListTitleRow = _interopRequireDefault(require("./SummaryListTitleRow"));
 require("./SummaryList.scss");
 var _excluded = ["rows", "noChangeAction", "noGroupAction", "isGroup", "classBlock", "classModifiers", "className"]; // Global imports
@@ -59,6 +60,12 @@ var SummaryList = function SummaryList(_ref) {
         classes: classes
       });
     }
+    if (row.type === 'headingWithAction') {
+      return /*#__PURE__*/_react.default.createElement(_SummaryListHeadingRowWithAction.default, {
+        row: row,
+        classes: classes
+      });
+    }
     if (row.type === 'action') {
       return noChangeAction ? null : /*#__PURE__*/_react.default.createElement("div", {
         key: "".concat(key, "-actions")

package/dist/components/SummaryList/SummaryList.scss

@@ -33,6 +33,21 @@
   }
 }
 
+.govuk-summary-list__headingWithAction {
+  display: table-row;
+  width: 100%;
+  white-space: nowrap;
+  .heading-text, .heading-action {
+    padding-bottom: 10px;
+  }
+
+  &:not(:first-child) {
+    .heading-text, .heading-action {
+      padding-top: 20px;
+    }
+  }
+}
+
 .changeRow {
   .govuk-link {
     float: right;

package/dist/components/SummaryList/SummaryList.test.js

@@ -56,13 +56,26 @@ describe('components', function () {
       expect(actions.classList).toContain("".concat(_SummaryList.DEFAULT_CLASS, "__actions"));
       return [key, value, actions];
     };
-    var checkRowNoChangeActions = function checkRowNoChangeActions(summaryList, index) {
+    var checkHeadingRowWithAction = function checkHeadingRowWithAction(summaryList, index) {
       var row = summaryList.childNodes[index];
       expect(row.tagName).toEqual('DIV');
-      expect(row.classList).toContain("".concat(_SummaryList.DEFAULT_CLASS, "__row"));
+      expect(row.classList).toContain("".concat(_SummaryList.DEFAULT_CLASS, "__headingWithAction"));
       var _row$childNodes3 = _slicedToArray(row.childNodes, 2),
         key = _row$childNodes3[0],
-        value = _row$childNodes3[1];
+        action = _row$childNodes3[1];
+      expect(key.tagName).toEqual('TD');
+      expect(key.classList).toContain('heading-text');
+      expect(action.tagName).toEqual('TD');
+      expect(action.classList).toContain('heading-action');
+      return [key, action];
+    };
+    var checkRowNoChangeActions = function checkRowNoChangeActions(summaryList, index) {
+      var row = summaryList.childNodes[index];
+      expect(row.tagName).toEqual('DIV');
+      expect(row.classList).toContain("".concat(_SummaryList.DEFAULT_CLASS, "__row"));
+      var _row$childNodes4 = _slicedToArray(row.childNodes, 2),
+        key = _row$childNodes4[0],
+        value = _row$childNodes4[1];
       expect(key.tagName).toEqual('DT');
       expect(key.classList).toContain("".concat(_SummaryList.DEFAULT_CLASS, "__key"));
       expect(value.tagName).toEqual('DD');
@@ -320,6 +333,53 @@ describe('components', function () {
         expect(ON_ACTION_CALLS[index]).toEqual(row);
       });
     });
+    it('should handle heading rows with actions', function () {
+      var ID = 'test-id';
+      var ON_ACTION_CALLS = [];
+      var ON_ACTION = function ON_ACTION(row) {
+        ON_ACTION_CALLS.push(row);
+      };
+      var ROWS = [{
+        key: 'a',
+        pageId: 'p1',
+        type: 'headingWithAction',
+        size: 'm',
+        action: {
+          label: 'Change A',
+          onAction: ON_ACTION
+        }
+      }, {
+        key: 'b',
+        pageId: 'p2',
+        type: 'headingWithAction',
+        size: 'm',
+        action: {
+          label: 'Change B',
+          onAction: ON_ACTION
+        }
+      }];
+      var _render8 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_SummaryList.default, {
+          "data-testid": ID,
+          rows: ROWS
+        })),
+        container = _render8.container;
+      var summaryList = checkSummaryList(container, ID);
+      expect(summaryList.childNodes.length).toEqual(ROWS.length);
+      ROWS.forEach(function (row, index) {
+        var _checkHeadingRowWithA = checkHeadingRowWithAction(summaryList, index),
+          _checkHeadingRowWithA2 = _slicedToArray(_checkHeadingRowWithA, 2),
+          key = _checkHeadingRowWithA2[0],
+          actions = _checkHeadingRowWithA2[1];
+        expect(key.textContent).toEqual("".concat(row.key));
+        var a = actions.childNodes[0];
+        expect(a.textContent).toEqual(row.action.label);
+        _react.fireEvent.click(a, {});
+        expect(ON_ACTION_CALLS.length).toEqual(index + 1);
+        expect(ON_ACTION_CALLS[index]).toEqual({
+          action: row.action
+        });
+      });
+    });
     it('should handle rows with component values and actions set to hidden', function () {
       var ID = 'test-id';
       var VALUES = ['Alpha component value', 'Bravo component value'];
@@ -334,12 +394,12 @@ describe('components', function () {
         fieldId: 'b',
         value: /*#__PURE__*/_react2.default.createElement("div", null, VALUES[1])
       }];
-      var _render8 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_SummaryList.default, {
+      var _render9 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_SummaryList.default, {
           "data-testid": ID,
           rows: ROWS,
           noChangeAction: true
         })),
-        container = _render8.container;
+        container = _render9.container;
       var summaryList = checkSummaryList(container, ID);
       expect(summaryList.childNodes.length).toEqual(ROWS.length);
       ROWS.forEach(function (row, index) {
@@ -377,12 +437,12 @@ describe('components', function () {
         fieldId: 'c',
         value: /*#__PURE__*/_react2.default.createElement("div", null, VALUES[2])
       }];
-      var _render9 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_SummaryList.default, {
+      var _render10 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_SummaryList.default, {
           "data-testid": ID,
           rows: ROWS,
           isGroup: ISGROUP
         })),
-        container = _render9.container;
+        container = _render10.container;
       var summaryList = checkSummaryList(container, ID);
       expect(summaryList.childNodes.length).toEqual(ROWS.length + 1);
       ROWS.forEach(function (row, index) {

package/dist/components/SummaryList/SummaryListHeadingRowWithAction.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _copReactComponents = require("@ukhomeoffice/cop-react-components");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+var _RowAction = _interopRequireDefault(require("./RowAction"));
+require("./SummaryListHeadingRowWithAction.scss");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// Global imports
+
+// Local imports
+
+// Styles
+
+var SummaryListHeadingRowWithAction = function SummaryListHeadingRowWithAction(_ref) {
+  var row = _ref.row,
+    classes = _ref.classes;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes('headingWithAction')
+  }, /*#__PURE__*/_react.default.createElement("td", {
+    className: "heading-text",
+    colSpan: "2"
+  }, row.size === 's' && /*#__PURE__*/_react.default.createElement(_copReactComponents.SmallHeading, null, row.key), row.size === 'm' && /*#__PURE__*/_react.default.createElement(_copReactComponents.MediumHeading, null, row.key)), /*#__PURE__*/_react.default.createElement("td", {
+    className: "heading-action"
+  }, /*#__PURE__*/_react.default.createElement(_RowAction.default, {
+    row: {
+      action: row.action
+    }
+  })));
+};
+SummaryListHeadingRowWithAction.propTypes = {
+  classes: _propTypes.default.func.isRequired,
+  row: _propTypes.default.shape({
+    key: _propTypes.default.string.isRequired,
+    size: _propTypes.default.string,
+    action: _propTypes.default.shape({
+      page: _propTypes.default.string,
+      label: _propTypes.default.string,
+      aria_suffix: _propTypes.default.string,
+      onAction: _propTypes.default.func
+    })
+  }).isRequired
+};
+var _default = exports.default = SummaryListHeadingRowWithAction;

package/dist/components/SummaryList/SummaryListHeadingRowWithAction.scss

@@ -0,0 +1,38 @@
+.heading-with-action {
+  flex-direction: row;
+  width: 100%;
+}
+
+.heading-text {
+  display: table-cell;
+  column-span: 2;
+  width: 80%;
+
+  .govuk-heading-m, .govuk-heading-s {
+    margin-bottom: 0;
+  }
+}
+
+.heading-action {
+  display: table-cell;
+  width: 20%;
+  text-align: right;
+}
+
+@media screen and (max-width: 640px) {
+  .heading-with-action {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+  
+  .heading-text {
+    width: 100%
+  }
+  
+  .heading-action {
+    margin-bottom: govuk-spacing(3);
+    width: 20%;
+    text-align: left;
+  }
+}

package/dist/utils/CheckYourAnswers/getCYARowsForCollectionPage.js

@@ -56,7 +56,7 @@ var getTitleRowForItem = function getTitleRowForItem(page, item, pageId, labelCo
     size: page.collection.titleSize || 's'
   };
 };
-var getHeadingRow = function getHeadingRow(config, pageId, labelCount) {
+var getHeadingRow = function getHeadingRow(config, pageId, labelCount, changeAction) {
   if (config.text === '') {
     return null;
   }
@@ -65,8 +65,12 @@ var getHeadingRow = function getHeadingRow(config, pageId, labelCount) {
     fieldId: "heading".concat(labelCount),
     full_path: "heading".concat(labelCount),
     key: config.text,
-    type: 'heading',
-    size: config.size || 's'
+    type: changeAction === null ? 'heading' : 'headingWithAction',
+    size: config.size || 's',
+    action: changeAction === null ? null : {
+      onAction: changeAction,
+      label: 'Change'
+    }
   };
 };
 var getCollectionNameHeading = function getCollectionNameHeading(page, titleName) {
@@ -152,13 +156,14 @@ var getCYARowsForChildPages = function getCYARowsForChildPages(childPages, item,
       // to be done here as the show_when checks could rely upon item-level
       // data.
       if ((0, _showFormPageCYA.default)(childPage, _objectSpread(_objectSpread({}, childPage.formData), item))) {
+        var changeAction = getChangeActionForPage(childPage, onAction, activeIds);
         if (childPage.collection.heading) {
-          var headingRow = getHeadingRow(childPage.collection.heading, childPage.id, labelCount);
+          var headingAction = childPage.collection.heading.changeLink ? changeAction : null;
+          var headingRow = getHeadingRow(childPage.collection.heading, childPage.id, labelCount, headingAction);
           rows = rows.concat(headingRow);
         }
         var container = getContainerForPage(childPage, item, labelCount, fullPath);
-        var rowChangeAction = getChangeActionForPage(childPage, onAction, activeIds);
-        var containerRows = (0, _getCYARowsForContainer.default)(childPage, container, _objectSpread(_objectSpread({}, childPage.formData), item), rowChangeAction, fnOverride);
+        var containerRows = (0, _getCYARowsForContainer.default)(childPage, container, _objectSpread(_objectSpread({}, childPage.formData), item), changeAction, fnOverride);
         rows = rows.concat(containerRows);
       }
     }

package/dist/utils/Component/optionIsSelected.js

@@ -14,6 +14,11 @@ exports.default = void 0;
  */
 var optionIsSelected = function optionIsSelected(componentValue, option) {
   if (Array.isArray(componentValue)) {
+    if (option.refdata_match) {
+      return componentValue.some(function (v) {
+        return v.id === option.refdata_match.id;
+      });
+    }
     return componentValue.includes(option.value);
   }
   return componentValue === option.value;

package/dist/utils/Component/optionIsSelected.test.js

@@ -11,6 +11,20 @@ describe('utils.Component.isSelected', function () {
     value: SELECTED_VALUE
   }, {
     value: NOT_SELECTED_VALUE
+  }, {
+    refdata_match: {
+      id: 99
+    },
+    nested: {
+      value: true
+    }
+  }, {
+    refdata_match: {
+      id: 100
+    },
+    nested: {
+      value: true
+    }
   }];
   var COMPONENT = {
     id: 'a',
@@ -29,6 +43,18 @@ describe('utils.Component.isSelected', function () {
     expect((0, _optionIsSelected.default)(PAGE.formData[COMPONENT.id], OPTIONS[0])).toEqual(true);
     expect((0, _optionIsSelected.default)(PAGE.formData[COMPONENT.id], OPTIONS[1])).toEqual(false);
   });
+  it('should properly identify which option is selected for checkboxes using refdata_match', function () {
+    var PAGE = {
+      formData: {
+        a: [{
+          id: 99
+        }]
+      }
+    };
+    COMPONENT.type = 'checkboxes';
+    expect((0, _optionIsSelected.default)(PAGE.formData[COMPONENT.id], OPTIONS[2])).toEqual(true);
+    expect((0, _optionIsSelected.default)(PAGE.formData[COMPONENT.id], OPTIONS[3])).toEqual(false);
+  });
   it('should properly identify which option is selected for radios', function () {
     var PAGE = {
       formData: {

package/package.json

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