@ukhomeoffice/cop-react-form-renderer 1.0.0 → 2.2.0

package/dist/json/userProfile.data.json

@@ -0,0 +1,14 @@
+{
+  "urls": {
+    "refData": "/ref-data"
+  },
+  "currentUser": {
+    "givenName": "John",
+    "familyName": "Smith"
+  },
+  "areYouACivilServant": "yes",
+  "userDetails": {
+    "linemanagerEmail": "line.manager@digital.homeoffice.gov.uk",
+    "delegateEmails": "del.egate@digital.homeoffice.gov.uk"
+  }
+}

package/dist/json/userProfile.json

@@ -0,0 +1,276 @@
+{
+  "id": "userProfile",
+  "version": "1",
+  "name": "userProfile",
+  "title": "Your profile",
+  "type": "hub-and-spoke",
+  "components": [
+    {
+      "id": "firstName",
+      "fieldId": "firstName",
+      "label": "First name",
+      "type": "text",
+      "readonly": true,
+      "source": {
+        "field": "currentUser.givenName"
+      }
+    },
+    {
+      "id": "surname",
+      "fieldId": "surname",
+      "label": "Last name",
+      "type": "text",
+      "readonly": true,
+      "source": {
+        "field": "currentUser.familyName"
+      }
+    },
+    {
+      "id": "areYouACivilServant",
+      "fieldId": "areYouACivilServant",
+      "label": "Are you a civil servant?",
+      "type": "radios",
+      "required": true,
+      "data": {
+        "url": "${urls.refData}/areYouACivilServant"
+      }
+    },
+    {
+      "id": "staffGradeId",
+      "fieldId": "staffGradeId",
+      "label": "Grade",
+      "hint": "We use this to assign you tasks",
+      "type": "radios",
+      "required": true,
+      "data": {
+        "url": "${urls.refData}/grade"
+      },
+      "source": {
+        "field": "userDetails.gradeid"
+      },
+      "show_when": {
+        "field": "areYouACivilServant",
+        "op": "eq",
+        "value": "yes"
+      }
+    },
+    {
+      "id": "team",
+      "fieldId": "team",
+      "label": "Team",
+      "hint": "We use this to assign you tasks",
+      "type": "autocomplete",
+      "required": true,
+      "item": { "value": "id", "label": "name" },
+      "data": {
+        "url": "${urls.refData}/team"
+      },
+      "displayMenu": "inline",
+      "source": {
+        "field": "userDetails.defaultteam"
+      }
+    },
+    {
+      "id": "linemanagerEmail",
+      "fieldId": "linemanagerEmail",
+      "label": "Line manager email",
+      "hint": "Must be a homeoffice.gov.uk or digital.homeoffice.gov.uk address",
+      "type": "email",
+      "format": {
+        "type": "lowercase",
+        "on": "submit"
+      },
+      "required": true,
+      "source": {
+        "field": "userDetails.linemanagerEmail"
+      }
+    },
+    {
+      "id": "delegateEmails",
+      "fieldId": "delegateEmails",
+      "label": "Delegate email",
+      "hint": "Must be a homeoffice.gov.uk or digital.homeoffice.gov.uk address",
+      "type": "email",
+      "format": {
+        "type": "lowercase",
+        "on": "submit"
+      },
+      "required": true,
+      "source": {
+        "field": "userDetails.delegateEmails"
+      },
+      "show_when": [
+        {
+          "field": "areYouACivilServant",
+          "op": "eq",
+          "value": "yes"
+        },
+        {
+          "field": "staffGradeId",
+          "op": "in",
+          "values": [
+            "373979c1-2360-46be-b712-0409ac068059",
+            "36c80dfe-0aae-455b-9445-2e1c09dcafdc",
+            "1b041cda-b151-4769-b76a-d42d67b0b960",
+            "172de41d-f7b0-4be9-b7e8-0cf4f1a1342f",
+            "39e18b45-0358-4a45-83ec-5a70b74641e8"
+          ]
+        }
+      ]
+    }
+  ],
+  "pages": [
+    {
+      "id": "names",
+      "name": "names",
+      "components": [
+        { "use": "firstName" },
+        { "use": "surname" }
+      ]
+    },
+    {
+      "id": "civil-servant-status",
+      "name": "civil-servant-status",
+      "title": "Are you a civil servant?",
+      "components": [
+        {
+          "use": "areYouACivilServant",
+          "label": ""
+        }
+      ],
+      "actions": ["submit"],
+      "cya_link": {
+        "page": "civil-servant-status",
+        "aria_suffix": "civil servant status"
+      }
+    },
+    {
+      "id": "grade",
+      "name": "grade",
+      "title": "What's your grade?",
+      "components": [
+        {
+          "use": "staffGradeId",
+          "label": ""
+        }
+      ],
+      "actions": ["submit"],
+      "cya_link": {
+        "page": "grade",
+        "aria_suffix": "grade"
+      }
+    },
+    {
+      "id": "team-name",
+      "name": "team-name",
+      "title": "What's your team name?",
+      "components": [
+        {
+          "use": "team",
+          "label": ""
+        }
+      ],
+      "actions": ["submit"],
+      "cya_link": {
+        "page": "team-name",
+        "aria_suffix": "teams"
+      }
+    },
+    {
+      "id": "add-or-change-line-manager",
+      "name": "add-or-change-line-manager",
+      "title": "Add or change a line manager",
+      "components": [
+        "Your line manager will need to review some of your forms. It’s important to keep their details up-to-date.",
+        "An email will be sent to your line manager to ask if they want to approve your request to add them.",
+        {
+          "type": "inset-text",
+          "content": "The changes will show in your profile when they approve your request."
+        },
+        {
+          "type": "heading",
+          "size": "m",
+          "content": "Mandatory declarations"
+        },
+        "Mandatory declarations will not go to your line manager until they have approved your request."
+      ],
+      "actions": [
+        {
+          "type": "navigate",
+          "page": "line-manager-email"
+        }
+      ],
+      "show_on_cya": false
+    },
+    {
+      "id": "line-manager-email",
+      "name": "line-manager-email",
+      "title": "What’s your line manager’s email address?",
+      "components": [
+        {
+          "use": "linemanagerEmail"
+        }
+      ],
+      "actions": ["submit"],
+      "cya_link": {
+        "page": "add-or-change-line-manager",
+        "aria_suffix": "line manager email address"
+      }
+    },
+    {
+      "id": "add-or-change-delegate",
+      "name": "add-or-change-delegate",
+      "title": "Add or change a delegate",
+      "components": [
+        "A delegate can review a mandatory declaration on your behalf.",
+        "An email will be sent to the delegate to ask if they want to approve your request.",
+        {
+          "type": "inset-text",
+          "content": "The changes will show in your profile when they approve your request."
+        }
+      ],
+      "actions": [
+        {
+          "type": "navigate",
+          "page": "delegate-email"
+        }
+      ],
+      "show_on_cya": false
+    },
+    {
+      "id": "delegate-email",
+      "name": "delegate-email",
+      "title": "What’s your delegate's email address?",
+      "components": [
+        {
+          "use": "delegateEmails",
+          "label": "Delegate email address"
+        }
+      ],
+      "actions": ["submit"],
+      "cya_link": {
+        "page": "add-or-change-delegate"
+      },
+      "show_when": [
+        {
+          "field": "areYouACivilServant",
+          "op": "eq",
+          "value": "yes"
+        },
+        {
+          "field": "staffGradeId",
+          "op": "in",
+          "values": [
+            "373979c1-2360-46be-b712-0409ac068059",
+            "36c80dfe-0aae-455b-9445-2e1c09dcafdc",
+            "1b041cda-b151-4769-b76a-d42d67b0b960",
+            "172de41d-f7b0-4be9-b7e8-0cf4f1a1342f",
+            "39e18b45-0358-4a45-83ec-5a70b74641e8"
+          ]
+        }
+      ]
+    }
+  ],
+  "hub": { "format": "CYA" },
+  "cya": { "hide_page_titles": true, "hide_actions": true }
+}

package/dist/models/ComponentTypes.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var TYPE_AUTOCOMPLETE = 'autocomplete';
+var TYPE_CHECKBOXES = 'checkboxes';
+var TYPE_DATE = 'date';
 var TYPE_EMAIL = 'email';
 var TYPE_HEADING = 'heading';
 var TYPE_HTML = 'html';
@@ -15,6 +17,8 @@ var TYPE_TEXT = 'text';
 var TYPE_TEXT_AREA = 'textarea';
 var ComponentTypes = {
   AUTOCOMPLETE: TYPE_AUTOCOMPLETE,
+  CHECKBOXES: TYPE_CHECKBOXES,
+  DATE: TYPE_DATE,
   EMAIL: TYPE_EMAIL,
   HEADING: TYPE_HEADING,
   HTML: TYPE_HTML,

package/dist/utils/CheckYourAnswers/getCYAAction.js

@@ -5,19 +5,40 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var getPageFromCYALink = function getPageFromCYALink(link) {
+  if (link.page) {
+    return link.page;
+  }
+
+  var url = link.href || link.url;
+
+  if (url) {
+    return url.split('/').pop();
+  }
+
+  return undefined;
+};
 /**
  * Gets an action object, configured appropriately for a Check your answers component.
  * 
  * @param {boolean} readonly Whether or not the component is readonly.
- * @param {object} cya_link A configuration object for any link to show.
+ * @param {object} page A configuration object for the page to link to.
  * @param {Function} onAction A function to invoke if the link is clicked.
  * 
  * @returns An action object for a Check your answers row.
+ * @description
+ * `cya_link.href` and `cya_link.url` have been deprecated in favour of `cya_link.page` but this
+ * method will convert both by taking the final part of the relative path:
+ * - `href: '/bravo'` => `page: 'bravo'`
  */
-var getCYAAction = function getCYAAction(readonly, cya_link, onAction) {
+
+
+var getCYAAction = function getCYAAction(readonly, page, onAction) {
+  var cya_link = page === null || page === void 0 ? void 0 : page.cya_link;
+
   if (readonly !== true && cya_link) {
     return {
-      href: cya_link.url || '#',
+      page: getPageFromCYALink(cya_link) || page.id || '#',
       label: cya_link.label || 'Change',
       aria_suffix: cya_link.aria_suffix,
       onAction: onAction

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

@@ -8,33 +8,80 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 describe('utils', function () {
   describe('CheckYourAnswers', function () {
     describe('getCYAAction', function () {
+      var getPage = function getPage(cya_link, id) {
+        return {
+          cya_link: cya_link,
+          id: id
+        };
+      };
+
       it('should return null if readonly', function () {
         expect((0, _getCYAAction.default)(true, {}, function () {})).toBeNull();
       });
       it('should return null if there is no cya_link', function () {
         expect((0, _getCYAAction.default)(false, null, function () {})).toBeNull();
       });
-      it('should return a default action if the cya_link is empty', function () {
+      it('should return a default action if the cya_link is empty and the page has no id', function () {
+        var CYA_LINK = {};
+
+        var ON_ACTION = function ON_ACTION() {};
+
+        expect((0, _getCYAAction.default)(false, getPage(CYA_LINK), ON_ACTION)).toEqual({
+          page: '#',
+          label: 'Change',
+          onAction: ON_ACTION
+        });
+      });
+      it('should return a default action if the cya_link is empty but the page has an id', function () {
+        var PAGE_ID = 'page-id';
         var CYA_LINK = {};
 
         var ON_ACTION = function ON_ACTION() {};
 
-        expect((0, _getCYAAction.default)(false, CYA_LINK, ON_ACTION)).toEqual({
-          href: '#',
+        expect((0, _getCYAAction.default)(false, getPage(CYA_LINK, PAGE_ID), ON_ACTION)).toEqual({
+          page: PAGE_ID,
+          label: 'Change',
+          onAction: ON_ACTION
+        });
+      });
+      it('should use page specified in cya_link', function () {
+        var PAGE = 'alpha';
+        var CYA_LINK = {
+          page: PAGE
+        };
+
+        var ON_ACTION = function ON_ACTION() {};
+
+        expect((0, _getCYAAction.default)(false, getPage(CYA_LINK), ON_ACTION)).toEqual({
+          page: PAGE,
+          label: 'Change',
+          onAction: ON_ACTION
+        });
+      });
+      it('should convert an href specified in cya_link', function () {
+        var HREF = '/alpha/bravo';
+        var CYA_LINK = {
+          href: HREF
+        };
+
+        var ON_ACTION = function ON_ACTION() {};
+
+        expect((0, _getCYAAction.default)(false, getPage(CYA_LINK), ON_ACTION)).toEqual({
+          page: 'bravo',
           label: 'Change',
           onAction: ON_ACTION
         });
       });
-      it('should use url specified in cya_link', function () {
-        var URL = 'https://fake.url.com/something';
+      it('should convert a url specified in cya_link', function () {
+        var URL = '/alpha/bravo';
         var CYA_LINK = {
           url: URL
         };
 
         var ON_ACTION = function ON_ACTION() {};
 
-        expect((0, _getCYAAction.default)(false, CYA_LINK, ON_ACTION)).toEqual({
-          href: URL,
+        expect((0, _getCYAAction.default)(false, getPage(CYA_LINK), ON_ACTION)).toEqual({
+          page: 'bravo',
           label: 'Change',
           onAction: ON_ACTION
         });
@@ -47,8 +94,8 @@ describe('utils', function () {
 
         var ON_ACTION = function ON_ACTION() {};
 
-        expect((0, _getCYAAction.default)(false, CYA_LINK, ON_ACTION)).toEqual({
-          href: '#',
+        expect((0, _getCYAAction.default)(false, getPage(CYA_LINK), ON_ACTION)).toEqual({
+          page: '#',
           label: LABEL,
           onAction: ON_ACTION
         });
@@ -61,27 +108,27 @@ describe('utils', function () {
 
         var ON_ACTION = function ON_ACTION() {};
 
-        expect((0, _getCYAAction.default)(false, CYA_LINK, ON_ACTION)).toEqual({
-          href: '#',
+        expect((0, _getCYAAction.default)(false, getPage(CYA_LINK), ON_ACTION)).toEqual({
+          page: '#',
           label: 'Change',
           aria_suffix: ARIA_SUFFIX,
           onAction: ON_ACTION
         });
       });
       it('should use all properties specified in cya_link', function () {
-        var URL = 'https://fake.url.com/something';
+        var PAGE = 'alpha';
         var LABEL = 'Alpha Bravo Charlie';
         var ARIA_SUFFIX = 'This is hidden text';
         var CYA_LINK = {
           label: LABEL,
-          url: URL,
+          page: PAGE,
           aria_suffix: ARIA_SUFFIX
         };
 
         var ON_ACTION = function ON_ACTION() {};
 
-        expect((0, _getCYAAction.default)(false, CYA_LINK, ON_ACTION)).toEqual({
-          href: URL,
+        expect((0, _getCYAAction.default)(false, getPage(CYA_LINK), ON_ACTION)).toEqual({
+          page: PAGE,
           label: LABEL,
           aria_suffix: ARIA_SUFFIX,
           onAction: ON_ACTION

package/dist/utils/CheckYourAnswers/getCYARow.js

@@ -23,13 +23,19 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @returns A configuration object for a Check your answers row.
  */
 var getCYARow = function getCYARow(page, component, onAction) {
+  var value = '';
+
+  if (page.formData && component.fieldId) {
+    value = page.formData[component.fieldId];
+  }
+
   return {
     pageId: page.id,
     fieldId: component.fieldId,
     key: component.label || component.cya_label,
     component: _Component.default.editable(component) ? component : undefined,
-    value: page.formData[component.fieldId] || '',
-    action: (0, _getCYAAction.default)(component.readonly, page.cya_link, onAction)
+    value: value || '',
+    action: (0, _getCYAAction.default)(component.readonly, page, onAction)
   };
 };
 

package/dist/utils/CheckYourAnswers/getCYARowsForPage.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _FormPage = _interopRequireDefault(require("../FormPage"));
+
 var _getCYARow = _interopRequireDefault(require("./getCYARow"));
 
 var _showComponentCYA = _interopRequireDefault(require("./showComponentCYA"));
@@ -22,11 +24,15 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @returns An array of configuration objects for Check your answers rows.
  */
 var getCYARowsForPage = function getCYARowsForPage(page, onAction) {
-  return page.components.filter(function (c) {
-    return (0, _showComponentCYA.default)(c, page.formData);
-  }).map(function (component) {
-    return (0, _getCYARow.default)(page, component, onAction);
-  });
+  if (_FormPage.default.show(page, page.formData)) {
+    return page.components.filter(function (c) {
+      return (0, _showComponentCYA.default)(c, page.formData);
+    }).map(function (component) {
+      return (0, _getCYARow.default)(page, component, onAction);
+    });
+  }
+
+  return [];
 };
 
 var _default = getCYARowsForPage;

package/dist/utils/Component/getComponent.js

@@ -39,6 +39,24 @@ var getAutocomplete = function getAutocomplete(config) {
   }));
 };
 
+var getCheckboxes = function getCheckboxes(config) {
+  var options = [];
+
+  _Data.default.getOptions(config, function (val) {
+    options = val;
+  });
+
+  var attrs = (0, _cleanAttributes.default)(config);
+  return /*#__PURE__*/_react.default.createElement(_copReactComponents.Checkboxes, _extends({}, attrs, {
+    options: options
+  }));
+};
+
+var getDate = function getDate(config) {
+  var attrs = (0, _cleanAttributes.default)(config);
+  return /*#__PURE__*/_react.default.createElement(_copReactComponents.DateInput, attrs);
+};
+
 var getHeading = function getHeading(config) {
   var attrs = (0, _cleanAttributes.default)(config);
   return /*#__PURE__*/_react.default.createElement(_copReactComponents.Heading, attrs, config.content);
@@ -102,15 +120,39 @@ var getComponentByType = function getComponentByType(config) {
     case _models.ComponentTypes.RADIOS:
       return getRadios(config);
 
+    case _models.ComponentTypes.DATE:
+      return getDate(config);
+
+    case _models.ComponentTypes.CHECKBOXES:
+      return getCheckboxes(config);
+
     default:
       {
         return null;
       }
   }
 };
+/**
+ * Get a renderable component, based on a configuration object.
+ * @param {object} config The configuration object for the component.
+ * @param {boolean} wrap Indicates whether or not the component should be wrapped.
+ * @param {Function} fnOverride An optional override function for component rendering.
+ * @returns A renderable component.
+ */
+
 
 var getComponent = function getComponent(config) {
   var wrap = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  var fnOverride = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
+
+  if (typeof fnOverride === 'function') {
+    var overrideComponent = fnOverride(config, wrap);
+
+    if (overrideComponent) {
+      return overrideComponent;
+    }
+  }
+
   var component = getComponentByType(config);
 
   if (component && wrap && (0, _isEditable.default)(config)) {

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

@@ -0,0 +1,75 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+var _models = require("../../../models");
+
+var _getComponent = _interopRequireDefault(require("../getComponent"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Global imports
+// Local imports
+describe('utils.Component.get', function () {
+  it('should return an appropriately rendered autocomplete component', function () {
+    var ID = 'test-id';
+    var FIELD_ID = 'field-id';
+    var LABEL = 'label';
+    var OPTIONS = [];
+    var COMPONENT = {
+      type: _models.ComponentTypes.AUTOCOMPLETE,
+      id: ID,
+      fieldId: FIELD_ID,
+      label: LABEL,
+      data: {
+        options: OPTIONS
+      },
+      'data-testid': ID
+    };
+
+    var _render = (0, _react.render)((0, _getComponent.default)(COMPONENT)),
+        container = _render.container;
+
+    var formGroup = (0, _react.getByTestId)(container, ID);
+    expect(formGroup.tagName).toEqual('DIV');
+    expect(formGroup.classList).toContain('govuk-form-group');
+    var label = undefined;
+    var autocompleteWrapper = undefined;
+    var autocomplete = undefined;
+    var autocompleteInput = undefined;
+    formGroup.childNodes.forEach(function (node) {
+      // Check if it's an element.
+      if (node instanceof Element) {
+        if (node.tagName === 'LABEL') {
+          label = node;
+        } else if (node.classList.contains('hods-autocomplete__outer-wrapper')) {
+          autocompleteWrapper = node;
+          var autocompleteInner = node.childNodes[0];
+
+          if (autocompleteInner instanceof Element) {
+            autocomplete = autocompleteInner;
+            autocomplete.childNodes.forEach(function (grandchild) {
+              if (grandchild instanceof Element) {
+                if (grandchild.tagName === 'INPUT') {
+                  autocompleteInput = grandchild;
+                }
+              }
+            });
+          }
+
+          ;
+        }
+      }
+    });
+    expect(label).toBeDefined();
+    expect(label.innerHTML).toContain(LABEL);
+    expect(label.getAttribute('for')).toEqual(ID);
+    expect(autocompleteWrapper).toBeDefined();
+    expect(autocompleteWrapper.tagName).toEqual('DIV');
+    expect(autocomplete).toBeDefined();
+    expect(autocomplete.tagName).toEqual('DIV');
+    expect(autocompleteInput).toBeDefined();
+    expect(autocompleteInput.id).toEqual(ID); // TODO: Ensure that the onChange handler is fired.
+    // Not sure quite what this looks like yet so I'll address it later.
+  });
+});