@ukhomeoffice/cop-react-form-renderer 1.0.0-gamma → 2.1.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';
@@ -12,15 +14,19 @@ var TYPE_INSET_TEXT = 'inset-text';
 var TYPE_PHONE_NUMBER = 'phone-number';
 var TYPE_RADIOS = 'radios';
 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,
   INSET_TEXT: TYPE_INSET_TEXT,
   PHONE_NUMBER: TYPE_PHONE_NUMBER,
   RADIOS: TYPE_RADIOS,
-  TEXT: TYPE_TEXT
+  TEXT: TYPE_TEXT,
+  TEXT_AREA: TYPE_TEXT_AREA
 };
 var _default = ComponentTypes;
 exports.default = _default;

package/dist/models/PageAction.js

@@ -9,19 +9,18 @@ var _DefaultPageActions;
 
 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 TYPE_SUBMIT = 'submit';
+var TYPE_NAVIGATE = 'navigate';
 var TYPE_SAVE_AND_CONTINUE = 'saveAndContinue';
 var TYPE_SAVE_AND_RETURN = 'saveAndReturn';
+var TYPE_SUBMIT = 'submit';
 var PageActionTypes = {
-  SUBMIT: TYPE_SUBMIT,
+  NAVIGATE: TYPE_NAVIGATE,
   SAVE_AND_CONTINUE: TYPE_SAVE_AND_CONTINUE,
-  SAVE_AND_RETURN: TYPE_SAVE_AND_RETURN
+  SAVE_AND_RETURN: TYPE_SAVE_AND_RETURN,
+  SUBMIT: TYPE_SUBMIT
 };
 exports.PageActionTypes = PageActionTypes;
-var DefaultPageActions = (_DefaultPageActions = {}, _defineProperty(_DefaultPageActions, TYPE_SUBMIT, {
-  type: TYPE_SUBMIT,
-  validate: true
-}), _defineProperty(_DefaultPageActions, TYPE_SAVE_AND_CONTINUE, {
+var DefaultPageActions = (_DefaultPageActions = {}, _defineProperty(_DefaultPageActions, TYPE_NAVIGATE, undefined), _defineProperty(_DefaultPageActions, TYPE_SAVE_AND_CONTINUE, {
   type: TYPE_SAVE_AND_CONTINUE,
   validate: true,
   label: 'Save and continue'
@@ -30,6 +29,9 @@ var DefaultPageActions = (_DefaultPageActions = {}, _defineProperty(_DefaultPage
   validate: false,
   label: 'Save and return later',
   classModifiers: 'secondary'
+}), _defineProperty(_DefaultPageActions, TYPE_SUBMIT, {
+  type: TYPE_SUBMIT,
+  validate: true
 }), _DefaultPageActions);
 exports.DefaultPageActions = DefaultPageActions;
 var PageAction = {

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);
@@ -67,6 +85,11 @@ var getRadios = function getRadios(config) {
   }));
 };
 
+var getTextArea = function getTextArea(config) {
+  var attrs = (0, _cleanAttributes.default)(config);
+  return /*#__PURE__*/_react.default.createElement(_copReactComponents.TextArea, attrs);
+};
+
 var getTextInput = function getTextInput(config) {
   var attrs = (0, _cleanAttributes.default)(config);
   return /*#__PURE__*/_react.default.createElement(_copReactComponents.TextInput, attrs);
@@ -88,12 +111,21 @@ var getComponentByType = function getComponentByType(config) {
     case _models.ComponentTypes.PHONE_NUMBER:
       return getTextInput(config);
 
+    case _models.ComponentTypes.TEXT_AREA:
+      return getTextArea(config);
+
     case _models.ComponentTypes.AUTOCOMPLETE:
       return getAutocomplete(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;