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

package/dist/components/SummaryList/SummaryList.js

@@ -11,11 +11,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
 
+var _GroupAction = _interopRequireDefault(require("./GroupAction"));
+
 var _RowAction = _interopRequireDefault(require("./RowAction"));
 
 require("./SummaryList.scss");
 
-var _excluded = ["rows", "noChangeAction", "classBlock", "classModifiers", "className"];
+var _excluded = ["rows", "noChangeAction", "isGroup", "classBlock", "classModifiers", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -31,6 +33,7 @@ exports.DEFAULT_CLASS = DEFAULT_CLASS;
 var SummaryList = function SummaryList(_ref) {
   var rows = _ref.rows,
       noChangeAction = _ref.noChangeAction,
+      isGroup = _ref.isGroup,
       classBlock = _ref.classBlock,
       classModifiers = _ref.classModifiers,
       className = _ref.className,
@@ -38,22 +41,30 @@ var SummaryList = function SummaryList(_ref) {
 
   var classes = _copReactComponents.Utils.classBuilder(classBlock, classModifiers, className);
 
-  return /*#__PURE__*/_react.default.createElement("dl", _extends({}, attrs, {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "group-of-rows"
+  }, /*#__PURE__*/_react.default.createElement("dl", _extends({}, attrs, {
     className: classes()
   }), rows.map(function (row) {
+    var _row$component;
+
     return /*#__PURE__*/_react.default.createElement("div", {
       key: "".concat(row.pageId, "_").concat(row.fieldId),
       className: classes('row')
     }, /*#__PURE__*/_react.default.createElement("dt", {
       className: classes('key')
-    }, row.key), /*#__PURE__*/_react.default.createElement("dd", {
+    }, row.key, !((_row$component = row.component) !== null && _row$component !== void 0 && _row$component.required) && " (optional)"), /*#__PURE__*/_react.default.createElement("dd", {
       className: classes('value')
     }, row.value), !noChangeAction && /*#__PURE__*/_react.default.createElement("dd", {
       className: classes('actions')
     }, row.action && /*#__PURE__*/_react.default.createElement(_RowAction.default, {
       row: row
     })));
-  }));
+  }), isGroup && /*#__PURE__*/_react.default.createElement("div", {
+    className: "change-group-button"
+  }, /*#__PURE__*/_react.default.createElement(_GroupAction.default, {
+    group: rows[0]
+  }))));
 };
 
 SummaryList.propTypes = {

package/dist/components/SummaryList/SummaryList.scss

@@ -1,17 +1,41 @@
 @import 'node_modules/govuk-frontend/govuk/_base';
 @import 'node_modules/govuk-frontend/govuk/components/summary-list/_summary-list';
 
-.govuk-summary-list__actions {
+// .govuk-summary-list__actions {
+//   .govuk-link {
+//     float: right;
+//     color: govuk-colour('blue');
+//     cursor: pointer;
+//   }
+// }
+
+.changeRow {
   .govuk-link {
+    float: right;
     color: govuk-colour('blue');
     cursor: pointer;
   }
 }
 
-.caseview__key {
-  font-weight: normal;
+.group-of-rows {
+  position:relative;
+}
+ 
+.mobile-text{
+  text-transform: lowercase;
 }
 
-.caseview__value {
-  @include govuk-typography-weight-bold;
+@media screen and (min-width: 640px) {
+   .change-group-button {
+    position: absolute;
+    top: -47px;
+    right: 0;
+  }
+
+  .mobile-text{
+    display:none; 
+  }
+
+
 }
+

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

@@ -113,7 +113,7 @@ describe('components', function () {
             value = _checkRow2[1],
             actions = _checkRow2[2];
 
-        expect(key.textContent).toEqual(row.key);
+        expect(key.textContent).toEqual("".concat(row.key, " (optional)"));
         expect(value.textContent).toEqual(row.value);
         expect(actions.childNodes.length).toEqual(0);
       });
@@ -148,7 +148,7 @@ describe('components', function () {
             value = _checkRow4[1],
             actions = _checkRow4[2];
 
-        expect(key.textContent).toEqual(row.key);
+        expect(key.textContent).toEqual("".concat(row.key, " (optional)"));
         expect(value.childNodes.length).toEqual(1);
         var valueDiv = value.childNodes[0];
         expect(valueDiv.tagName).toEqual('DIV');
@@ -199,7 +199,7 @@ describe('components', function () {
             value = _checkRow6[1],
             actions = _checkRow6[2];
 
-        expect(key.textContent).toEqual(row.key);
+        expect(key.textContent).toEqual("".concat(row.key, " (optional)"));
         expect(value.textContent).toEqual(row.value);
         var a = actions.childNodes[0];
         expect(a.textContent).toEqual(row.action.label);
@@ -240,7 +240,50 @@ describe('components', function () {
             key = _checkRowNoChangeActi2[0],
             value = _checkRowNoChangeActi2[1];
 
-        expect(key.textContent).toEqual(row.key);
+        expect(key.textContent).toEqual("".concat(row.key, " (optional)"));
+        expect(value.childNodes.length).toEqual(1);
+        var valueDiv = value.childNodes[0];
+        expect(valueDiv.tagName).toEqual('DIV');
+        expect(valueDiv.textContent).toEqual(VALUES[index]);
+      });
+    });
+    it('should render groups of rows corretly', function () {
+      var ID = 'test-id';
+      var VALUES = ['Alpha component value', 'Bravo component value', 'Charlie component value'];
+      var ISGROUP = true;
+      var ROWS = [{
+        pageId: 'p1',
+        fieldId: 'a',
+        key: 'Alpha',
+        value: /*#__PURE__*/_react2.default.createElement("div", null, VALUES[0])
+      }, {
+        pageId: 'p1',
+        fieldId: 'b',
+        key: 'Bravo',
+        value: /*#__PURE__*/_react2.default.createElement("div", null, VALUES[1])
+      }, {
+        pageId: 'p1',
+        fieldId: 'c',
+        key: 'Charlie',
+        value: /*#__PURE__*/_react2.default.createElement("div", null, VALUES[2])
+      }];
+
+      var _render6 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_SummaryList.default, {
+        "data-testid": ID,
+        rows: ROWS,
+        isGroup: ISGROUP
+      })),
+          container = _render6.container;
+
+      var summaryList = checkSummaryList(container, ID);
+      expect(summaryList.childNodes.length).toEqual(ROWS.length + 1);
+      ROWS.forEach(function (row, index) {
+        var _checkRow7 = checkRow(summaryList, index),
+            _checkRow8 = _slicedToArray(_checkRow7, 2),
+            key = _checkRow8[0],
+            value = _checkRow8[1];
+
+        expect(key.textContent).toEqual("".concat(row.key, " (optional)"));
         expect(value.childNodes.length).toEqual(1);
         var valueDiv = value.childNodes[0];
         expect(valueDiv.tagName).toEqual('DIV');

package/dist/components/SummaryList/helpers/getGroupActionAttributes.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var getGroupActionAttributes = function getGroupActionAttributes(groupRow) {
+  if (groupRow && Object.prototype.hasOwnProperty.call(groupRow, 'action')) {
+    if (typeof groupRow.action.onAction === 'function') {
+      return {
+        onClick: function onClick() {
+          return groupRow.action.onAction(groupRow);
+        }
+      };
+    } else if (groupRow.action.page) {
+      return {
+        href: "/".concat(groupRow.action.page)
+      };
+    }
+  }
+
+  return {};
+};
+
+var _default = getGroupActionAttributes;
+exports.default = _default;

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

@@ -0,0 +1,77 @@
+"use strict";
+
+var _getGroupActionAttributes = _interopRequireDefault(require("./getGroupActionAttributes"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('components', function () {
+  describe('SummaryList', function () {
+    describe('helpers', function () {
+      describe('getGroupActionAttributes', function () {
+        it('should handle a null row', function () {
+          expect((0, _getGroupActionAttributes.default)(null)).toEqual({});
+        });
+        it('should handle a row without an action', function () {
+          expect((0, _getGroupActionAttributes.default)({})).toEqual({});
+        });
+        it('should handle a row with an empty action', function () {
+          var ROW = {
+            action: {}
+          };
+          expect((0, _getGroupActionAttributes.default)(ROW)).toEqual({});
+        });
+        it('should handle a row with a page', function () {
+          var PAGE = 'alpha';
+          var ROW = {
+            action: {
+              page: PAGE
+            }
+          };
+          expect((0, _getGroupActionAttributes.default)(ROW)).toEqual({
+            href: "/".concat(PAGE)
+          });
+        });
+        it('should handle a row with an onAction function', function () {
+          var ON_ACTION_CALLS = [];
+
+          var ON_ACTION = function ON_ACTION(row) {
+            ON_ACTION_CALLS.push(row);
+          };
+
+          var ROW = {
+            action: {
+              onAction: ON_ACTION
+            }
+          };
+          var ATTRS = (0, _getGroupActionAttributes.default)(ROW);
+          expect(ATTRS.onClick).toBeDefined();
+          expect(ATTRS.href).not.toBeDefined();
+          ATTRS.onClick();
+          expect(ON_ACTION_CALLS.length).toEqual(1);
+          expect(ON_ACTION_CALLS[0]).toEqual(ROW);
+        });
+        it('should favour onAction over href', function () {
+          var ON_ACTION_CALLS = [];
+
+          var ON_ACTION = function ON_ACTION(row) {
+            ON_ACTION_CALLS.push(row);
+          };
+
+          var HREF = 'http://alpha.homeoffice.gov.uk';
+          var ROW = {
+            action: {
+              href: HREF,
+              onAction: ON_ACTION
+            }
+          };
+          var ATTRS = (0, _getGroupActionAttributes.default)(ROW);
+          expect(ATTRS.onClick).toBeDefined();
+          expect(ATTRS.href).not.toBeDefined();
+          ATTRS.onClick();
+          expect(ON_ACTION_CALLS.length).toEqual(1);
+          expect(ON_ACTION_CALLS[0]).toEqual(ROW);
+        });
+      });
+    });
+  });
+});

package/dist/json/groupOfRow.json

@@ -0,0 +1,158 @@
+{
+  "id": "userProfile",
+  "version": "1",
+  "name": "userProfile",
+  "title": "Your profile",
+  "type": "cya",
+  "components": [
+    {
+      "id": "firstName",
+      "fieldId": "firstName",
+      "label": "First name",
+      "type": "text",
+      "readonly": false,
+      "source": {
+        "field": "currentUser.givenName"
+      }
+    },
+    {
+      "id": "surname",
+      "fieldId": "surname",
+      "label": "Last name",
+      "type": "text",
+      "readonly": false,
+      "source": {
+        "field": "currentUser.familyName"
+      }
+    },
+    {
+      "id": "dateGroup",
+      "fieldId": "dateGroup",
+      "label": "Date",
+      "type": "date",
+      "required": true,
+      "readonly": false,
+      "source": {
+        "field": "dateGroupField"
+      }
+    },
+    {
+      "id": "timeGroup",
+      "fieldId": "timeGroup",
+      "label": "Time",
+      "type": "time",
+      "required": true,
+      "readonly": false,
+      "source": {
+        "field": "timeGroupField"
+      }
+    },
+    {
+      "id": "portGroup",
+      "fieldId": "portGroup",
+      "label": "Port",
+      "type": "text",
+      "required": true,
+      "readonly": false,
+      "source": {
+        "field": "portGroupField"
+      }
+    },
+    {
+      "id": "whereGroup",
+      "fieldId": "whereGroup",
+      "label": "Where did you see the incident take place",
+      "type": "text",
+      "required": true,
+      "readonly": false,
+      "source": {
+        "field": "whereGroupField"
+      }
+    },
+    {
+      "id": "extraDetails",
+      "fieldId": "extraDetails",
+      "label": "Extra details",
+      "type": "textarea",
+      "readonly": false
+    }
+  ],
+  "pages": [
+    {
+      "id": "names",
+      "name": "names",
+      "title": "Name",
+      "components": [
+        {
+          "use": "firstName"
+        },
+        {
+          "use": "surname"
+        }
+      ],
+      "cya_link": {
+        "page": "names",
+        "aria_suffix": "names"
+      },
+      "actions": [
+        "submit"
+      ]
+    },
+    {
+      "id": "dateLocDet",
+      "name": "dateLocDetName",
+      "title": "Date and location details",
+      "components": [
+        {
+          "use": "dateGroup"
+        },
+        {
+          "use": "timeGroup"
+        },
+        {
+          "use": "portGroup"
+        },
+        {
+          "use": "whereGroup"
+        }
+      ],
+      "cya_link": {
+        "page": "dateLocDet",
+        "aria_suffix": "Date and location details"
+      },
+      "actions": [
+        "submit"
+      ]
+    },
+    {
+      "id": "additional-info",
+      "name": "additional-info",
+      "title": "Additional Information",
+      "components": [
+        {
+          "use": "extraDetails"
+        }
+      ],
+      "cya_link": {
+        "page": "additional-info",
+        "aria_suffix": "Additional Information"
+      },
+      "actions": [
+        "submit"
+      ]
+    }
+  ],
+  "cya": {
+    "hide_page_titles": true,
+    "hide_actions": true,
+    "groups": [
+      {
+        "pageId": "dateLocDet"
+      },
+      {
+        "pageId": "names",
+        "title": "Names"
+      }
+    ]
+  }
+}

package/dist/json/groupOfRowData.json

@@ -0,0 +1,15 @@
+{
+  "currentUser": {
+    "givenName": "John",
+    "familyName": "Smith"
+  },
+  "businessKey": "123456789",
+  "dateGroupField": "01-01-2022",
+  "timeGroupField": "14:57",
+  "portGroupField": "Glasgow",
+  "whereGroupField": "terminal",
+  "firstName": "sample",
+  "surname": "test",
+  "age": "12",
+  "extraDetails": "extra notes here"
+}

package/dist/models/ComponentTypes.js

@@ -9,6 +9,7 @@ var TYPE_CHECKBOXES = 'checkboxes';
 var TYPE_CONTAINER = 'container';
 var TYPE_DATE = 'date';
 var TYPE_EMAIL = 'email';
+var TYPE_FILE = 'file';
 var TYPE_HEADING = 'heading';
 var TYPE_HTML = 'html';
 var TYPE_INSET_TEXT = 'inset-text';
@@ -23,6 +24,7 @@ var ComponentTypes = {
   CONTAINER: TYPE_CONTAINER,
   DATE: TYPE_DATE,
   EMAIL: TYPE_EMAIL,
+  FILE: TYPE_FILE,
   HEADING: TYPE_HEADING,
   HTML: TYPE_HTML,
   INSET_TEXT: TYPE_INSET_TEXT,

package/dist/utils/Component/getComponent.js

@@ -5,16 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _copReactComponents = require("@ukhomeoffice/cop-react-components");
 
-var _cleanAttributes = _interopRequireDefault(require("./cleanAttributes"));
+var _react = _interopRequireDefault(require("react"));
 
 var _models = require("../../models");
 
 var _Data = _interopRequireDefault(require("../Data"));
 
+var _cleanAttributes = _interopRequireDefault(require("./cleanAttributes"));
+
 var _isEditable = _interopRequireDefault(require("./isEditable"));
 
 var _wrapInFormGroup = _interopRequireDefault(require("./wrapInFormGroup"));
@@ -57,6 +57,11 @@ var getDate = function getDate(config) {
   return /*#__PURE__*/_react.default.createElement(_copReactComponents.DateInput, attrs);
 };
 
+var getFileUpload = function getFileUpload(config) {
+  var attrs = (0, _cleanAttributes.default)(config);
+  return /*#__PURE__*/_react.default.createElement(_copReactComponents.FileUpload, attrs);
+};
+
 var getHeading = function getHeading(config) {
   var attrs = (0, _cleanAttributes.default)(config);
   return /*#__PURE__*/_react.default.createElement(_copReactComponents.Heading, attrs, config.content);
@@ -125,14 +130,17 @@ var getComponentByType = function getComponentByType(config) {
     case _models.ComponentTypes.RADIOS:
       return getRadios(config);
 
+    case _models.ComponentTypes.CHECKBOXES:
+      return getCheckboxes(config);
+
     case _models.ComponentTypes.DATE:
       return getDate(config);
 
     case _models.ComponentTypes.TIME:
       return getTime(config);
 
-    case _models.ComponentTypes.CHECKBOXES:
-      return getCheckboxes(config);
+    case _models.ComponentTypes.FILE:
+      return getFileUpload(config);
 
     default:
       {

package/dist/utils/Component/getComponentTests/getComponent.file.test.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _models = require("../../../models");
+
+var _getComponent = _interopRequireDefault(require("../getComponent"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+describe('utils.Component.get', function () {
+  it('should return an appropriately rendered file component', function () {
+    var ID = 'test-id';
+    var FIELD_ID = 'field-id';
+    var LABEL = 'label';
+    var ON_CHANGE_CALLS = [];
+
+    var ON_CHANGE = function ON_CHANGE(e) {
+      ON_CHANGE_CALLS.push(e.target);
+    };
+
+    var COMPONENT = {
+      type: _models.ComponentTypes.FILE,
+      id: ID,
+      fieldId: FIELD_ID,
+      label: LABEL,
+      onChange: ON_CHANGE,
+      'data-testid': ID
+    };
+
+    var _render = (0, _react.render)((0, _getComponent.default)(COMPONENT)),
+        container = _render.container;
+
+    var _getAllByTestId = (0, _react.getAllByTestId)(container, ID),
+        _getAllByTestId2 = _slicedToArray(_getAllByTestId, 2),
+        formGroup = _getAllByTestId2[0],
+        input = _getAllByTestId2[1];
+
+    expect(formGroup.tagName).toEqual('DIV');
+    expect(formGroup.classList).toContain('govuk-form-group');
+    var label = undefined;
+    formGroup.childNodes.forEach(function (node) {
+      // Check if it's an element.
+      if (node instanceof Element && node.tagName === 'LABEL') {
+        label = node;
+      }
+    });
+    expect(label).toBeDefined();
+    expect(label.innerHTML).toContain(LABEL);
+    expect(label.getAttribute('for')).toEqual(ID);
+    expect(input.tagName).toEqual('INPUT');
+    expect(input.classList).toContain('hods-file-upload__select');
+    expect(input.id).toEqual("".concat(ID, "-select"));
+    var str = JSON.stringify({
+      alpha: 'bravo'
+    });
+    var blob = new Blob([str]);
+    var FILE = new File([blob], 'test.json', {
+      type: 'application/JSON'
+    });
+
+    _userEvent.default.upload(input, FILE);
+
+    expect(ON_CHANGE_CALLS.length).toEqual(1);
+    expect(input.files.length).toEqual(1);
+  });
+});

package/dist/utils/Component/isEditable.js

@@ -8,7 +8,7 @@ exports.default = exports.EDITABLE_TYPES = void 0;
 var _models = require("../../models");
 
 // Local imports
-var EDITABLE_TYPES = [_models.ComponentTypes.AUTOCOMPLETE, _models.ComponentTypes.CHECKBOXES, _models.ComponentTypes.DATE, _models.ComponentTypes.EMAIL, _models.ComponentTypes.PHONE_NUMBER, _models.ComponentTypes.RADIOS, _models.ComponentTypes.TEXT, _models.ComponentTypes.TEXT_AREA, _models.ComponentTypes.TIME];
+var EDITABLE_TYPES = [_models.ComponentTypes.AUTOCOMPLETE, _models.ComponentTypes.CHECKBOXES, _models.ComponentTypes.DATE, _models.ComponentTypes.EMAIL, _models.ComponentTypes.FILE, _models.ComponentTypes.PHONE_NUMBER, _models.ComponentTypes.RADIOS, _models.ComponentTypes.TEXT, _models.ComponentTypes.TEXT_AREA, _models.ComponentTypes.TIME];
 exports.EDITABLE_TYPES = EDITABLE_TYPES;
 
 var isEditable = function isEditable(options) {

package/dist/utils/Data/index.js

@@ -15,6 +15,8 @@ var _getSourceData = _interopRequireDefault(require("./getSourceData"));
 
 var _refDataToOptions = _interopRequireDefault(require("./refDataToOptions"));
 
+var _setDataItem = _interopRequireDefault(require("./setDataItem"));
+
 var _setupFormData = _interopRequireDefault(require("./setupFormData"));
 
 var _setupRefDataUrlForComponent = _interopRequireDefault(require("./setupRefDataUrlForComponent"));
@@ -31,6 +33,7 @@ var Data = {
     setupUrl: _setupRefDataUrlForComponent.default,
     toOptions: _refDataToOptions.default
   },
+  setDataItem: _setDataItem.default,
   setupForm: _setupFormData.default
 };
 var _default = Data;

package/dist/utils/Data/setDataItem.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+var setDataItem = function setDataItem(data, fieldId, value) {
+  if (fieldId && data) {
+    var parts = fieldId.split('.');
+    var leaf = parts.pop();
+    var node = data;
+    parts.forEach(function (part) {
+      if (!node[part] || _typeof(node[part]) !== 'object') {
+        node[part] = {};
+      }
+
+      node = node[part];
+    });
+    node[leaf] = value;
+  }
+
+  return data;
+};
+
+var _default = setDataItem;
+exports.default = _default;