@ukhomeoffice/cop-react-form-renderer 2.7.1 → 2.8.1

package/dist/models/TaskStates.js

@@ -22,16 +22,16 @@ var StateTypes = {
 exports.StateTypes = StateTypes;
 var StateDetails = (_StateDetails = {}, _defineProperty(_StateDetails, TYPE_COMPLETE, {
   label: 'Completed',
-  colour: ''
+  colour: 'dark-blue'
 }), _defineProperty(_StateDetails, TYPE_IN_PROGRESS, {
   label: 'In Progress',
-  colour: 'blue'
+  colour: 'white'
 }), _defineProperty(_StateDetails, TYPE_NOT_STARTED, {
   label: 'Not Started',
-  colour: 'grey'
+  colour: 'dark-grey'
 }), _defineProperty(_StateDetails, TYPE_CANNOT_START_YET, {
   label: 'Cannot Start Yet',
-  colour: 'grey'
+  colour: 'dark-grey'
 }), _StateDetails);
 var TaskStates = {
   TYPES: StateTypes,

package/dist/utils/CheckYourAnswers/getCYARow.js

@@ -31,6 +31,7 @@ var getCYARow = function getCYARow(page, component, onAction) {
 
   return {
     pageId: page.id,
+    id: component.id,
     fieldId: component.fieldId,
     key: component.label || component.cya_label,
     component: _Component.default.editable(component) ? component : undefined,

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

@@ -58,6 +58,7 @@ describe('utils', function () {
 
         expect((0, _getCYARow.default)(PAGE, COMPONENT, ON_ACTION)).toEqual({
           pageId: PAGE.id,
+          id: COMPONENT.id,
           fieldId: COMPONENT.fieldId,
           key: COMPONENT.label,
           value: '',
@@ -84,6 +85,7 @@ describe('utils', function () {
 
         expect((0, _getCYARow.default)(PAGE, COMPONENT, ON_ACTION)).toEqual({
           pageId: PAGE.id,
+          id: COMPONENT.id,
           fieldId: COMPONENT.fieldId,
           key: COMPONENT.label,
           value: 'BLAH',

package/dist/utils/CheckYourAnswers/getCYARowForGroup.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _FormComponent = _interopRequireDefault(require("../../components/FormComponent"));
+
+var _getCYAAction = _interopRequireDefault(require("./getCYAAction"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var getRowValue = function getRowValue(row) {
+  if (!row.value) {
+    return null;
+  }
+
+  if (!row.component) {
+    return row.value;
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    key: row.id
+  }, /*#__PURE__*/_react.default.createElement(_FormComponent.default, {
+    component: _objectSpread(_objectSpread({}, row.component), {}, {
+      readonly: true
+    }),
+    wrap: false,
+    value: row.value
+  }));
+};
+
+var getGroupValue = function getGroupValue(group, rows) {
+  var firstComponentIndex = -1;
+
+  var value = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, group.components.map(function (componentId) {
+    var rowIndex = rows.findIndex(function (r) {
+      return r.id === componentId;
+    });
+
+    if (firstComponentIndex < 0) {
+      firstComponentIndex = rowIndex;
+    }
+
+    return rowIndex > -1 ? getRowValue(rows[rowIndex]) : null;
+  }));
+
+  return {
+    value: value,
+    firstComponentIndex: firstComponentIndex
+  };
+};
+
+var getCYARowForGroup = function getCYARowForGroup(page, group, rows, onAction) {
+  var _getGroupValue = getGroupValue(group, rows),
+      value = _getGroupValue.value,
+      firstComponentIndex = _getGroupValue.firstComponentIndex;
+
+  var row = {
+    pageId: page.id,
+    fieldId: group.id,
+    key: group.label,
+    value: value,
+    action: (0, _getCYAAction.default)(false, page, onAction)
+  };
+  return {
+    row: row,
+    insertAt: firstComponentIndex
+  };
+};
+
+var _default = getCYARowForGroup;
+exports.default = _default;

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

@@ -0,0 +1,78 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+var _getCYARowForGroup = _interopRequireDefault(require("./getCYARowForGroup"));
+
+var _getCYARow = _interopRequireDefault(require("./getCYARow"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Global imports
+//local imports 
+describe('utils', function () {
+  describe('CheckYourAnswers', function () {
+    describe('getCYARowsForGroup', function () {
+      it('should check address values block', function () {
+        var COMPONENT_ADDRESS = {
+          id: 'firstLineOfTheAddress',
+          fieldId: 'firstLineOfTheAddress',
+          label: 'address',
+          type: 'text'
+        };
+        var COMPONENT_TOWN = {
+          id: 'town',
+          fieldId: 'town',
+          label: 'Town',
+          type: 'text'
+        };
+        var COMPONENT_CITY = {
+          id: 'city',
+          fieldId: 'city',
+          label: 'City',
+          type: 'text'
+        };
+        var COMPONENT_POSTCODE = {
+          id: 'postCode',
+          fieldId: 'postCode',
+          label: 'postCode',
+          type: 'text'
+        };
+        var PAGE = {
+          components: [COMPONENT_ADDRESS, COMPONENT_TOWN, COMPONENT_CITY, COMPONENT_POSTCODE],
+          id: 'addressDetails',
+          fieldId: 'UK address',
+          groups: [{
+            id: 'address',
+            label: 'Address details',
+            components: ['firstLineOfTheAddress', 'town', 'city', 'postCode']
+          }],
+          name: 'address-details',
+          title: 'Address details',
+          formData: {
+            firstLineOfTheAddress: '10 Downing Street',
+            town: 'City of Westminster',
+            city: 'London',
+            postCode: 'SW1A 2AA'
+          }
+        };
+
+        var ON_ACTION = function ON_ACTION() {};
+
+        var rows = PAGE.components.map(function (component) {
+          return (0, _getCYARow.default)(PAGE, component, ON_ACTION);
+        });
+
+        var _render = (0, _react.render)((0, _getCYARowForGroup.default)(PAGE, PAGE.groups[0], rows, ON_ACTION).row.value),
+            container = _render.container;
+
+        expect(container.childNodes.length).toEqual(4);
+        var addressValues = container.childNodes;
+        expect(addressValues[0].childNodes[0].textContent).toEqual('10 Downing Street');
+        expect(addressValues[1].childNodes[0].textContent).toEqual('City of Westminster');
+        expect(addressValues[2].childNodes[0].textContent).toEqual('London');
+        expect(addressValues[3].childNodes[0].textContent).toEqual('SW1A 2AA');
+      });
+    });
+  });
+});

package/dist/utils/CheckYourAnswers/getCYARowsForPage.js

@@ -11,6 +11,8 @@ var _FormPage = _interopRequireDefault(require("../FormPage"));
 
 var _getCYARow = _interopRequireDefault(require("./getCYARow"));
 
+var _getCYARowForGroup2 = _interopRequireDefault(require("./getCYARowForGroup"));
+
 var _getCYARowsForContainer = _interopRequireDefault(require("./getCYARowsForContainer"));
 
 var _showComponentCYA = _interopRequireDefault(require("./showComponentCYA"));
@@ -21,15 +23,17 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 /**
  * Gets an array of row objects, each configured appropriately for a Check your answers component.
- * 
+ *
  * @param {object} page The page to show components for.
  * @param {Function} onAction A function to invoke if the change link on any row is clicked.
- * 
+ *
  * @returns An array of configuration objects for Check your answers rows.
  */
 var getCYARowsForPage = function getCYARowsForPage(page, onAction) {
   if (_FormPage.default.show(page, page.formData)) {
-    return page.components.filter(function (c) {
+    var _page$groups;
+
+    var rows = page.components.filter(function (c) {
       return (0, _showComponentCYA.default)(c, page.formData);
     }).flatMap(function (component) {
       if (component.type === _models.ComponentTypes.CONTAINER) {
@@ -38,6 +42,28 @@ var getCYARowsForPage = function getCYARowsForPage(page, onAction) {
 
       return (0, _getCYARow.default)(page, component, onAction);
     });
+
+    if (((_page$groups = page.groups) === null || _page$groups === void 0 ? void 0 : _page$groups.length) > 0) {
+      page.groups.forEach(function (group) {
+        var _getCYARowForGroup = (0, _getCYARowForGroup2.default)(page, group, rows, onAction),
+            row = _getCYARowForGroup.row,
+            insertAt = _getCYARowForGroup.insertAt;
+
+        if (insertAt > -1) {
+          rows.splice(insertAt, 0, row);
+        } else {
+          rows.push(row);
+        }
+      });
+      var allReplacedIds = page.groups.flatMap(function (g) {
+        return g.components;
+      });
+      return rows.filter(function (r) {
+        return !allReplacedIds.includes(r.id);
+      });
+    }
+
+    return rows;
   }
 
   return [];

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

@@ -1,11 +1,14 @@
 "use strict";
 
+var _react = require("@testing-library/react");
+
 var _models = require("../../models");
 
 var _getCYARowsForPage = _interopRequireDefault(require("./getCYARowsForPage"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+// Global imports
 // Local imports
 describe('utils', function () {
   describe('CheckYourAnswers', function () {
@@ -173,6 +176,64 @@ describe('utils', function () {
           });
         });
       });
+      it('Add ability to display answers from multiple fields in a single row', function () {
+        var COMPONENT_ADDRESS = {
+          id: 'firstLineOfTheAddress',
+          fieldId: 'firstLineOfTheAddress',
+          label: 'address',
+          type: 'text'
+        };
+        var COMPONENT_TOWN = {
+          id: 'town',
+          fieldId: 'town',
+          label: 'Town',
+          type: 'text'
+        };
+        var COMPONENT_CITY = {
+          id: 'city',
+          fieldId: 'city',
+          label: 'City',
+          type: 'text'
+        };
+        var COMPONENT_POSTCODE = {
+          id: 'postCode',
+          fieldId: 'postCode',
+          label: 'postCode',
+          type: 'text'
+        };
+        var PAGE = {
+          components: [COMPONENT_ADDRESS, COMPONENT_TOWN, COMPONENT_CITY, COMPONENT_POSTCODE],
+          id: 'addressDetails',
+          fieldId: 'UK address',
+          groups: [{
+            id: 'address',
+            label: 'Address details',
+            components: ['firstLineOfTheAddress', 'town', 'city', 'postCode']
+          }],
+          name: 'address-details',
+          title: 'Address details',
+          formData: {
+            firstLineOfTheAddress: '10 Downing Street',
+            town: 'City of Westminster',
+            city: 'London',
+            postCode: 'SW1A 2AA'
+          }
+        };
+
+        var ON_ACTION = function ON_ACTION() {};
+
+        var _render = (0, _react.render)((0, _getCYARowsForPage.default)(PAGE, ON_ACTION).map(function (row) {
+          return row.value;
+        })),
+            container = _render.container;
+
+        expect(container.childNodes.length).toEqual(4);
+        var addressValues = container.childNodes;
+        expect(addressValues[0].childNodes[0].textContent).toEqual('10 Downing Street');
+        expect(addressValues[1].childNodes[0].textContent).toEqual('City of Westminster');
+        expect(addressValues[2].childNodes[0].textContent).toEqual('London');
+        expect(addressValues[3].childNodes[0].textContent).toEqual('SW1A 2AA');
+      });
     });
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "2.7.1",
+  "version": "2.8.1",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",
@@ -16,7 +16,7 @@
     "post-compile": "rimraf dist/*.test.* dist/**/*.test.* dist/**/*.stories.* dist/docs dist/assets"
   },
   "dependencies": {
-    "@ukhomeoffice/cop-react-components": "1.3.0",
+    "@ukhomeoffice/cop-react-components": "1.5.1",
     "axios": "^0.21.1",
     "dayjs": "^1.11.0",
     "govuk-frontend": "^3.13.0",