@ukhomeoffice/cop-react-form-renderer 3.3.2-alpha → 3.3.4

package/dist/components/CheckYourAnswers/CheckYourAnswers.js

@@ -154,7 +154,7 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
     isGroup(page.id) ? hideActionButtons = true : hideActionButtons = noChangeAction;
     return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
       key: pageIndex
-    }, !hide_page_titles && page.title && !isGroup(page.id) && /*#__PURE__*/_react.default.createElement(_copReactComponents.MediumHeading, null, page.title), isGroup(page.id) && /*#__PURE__*/_react.default.createElement("div", {
+    }, !hide_page_titles && page.title && !isGroup(page.id) && /*#__PURE__*/_react.default.createElement(_copReactComponents.MediumHeading, null, _utils.default.interpolateString(page.title, page.formData)), isGroup(page.id) && /*#__PURE__*/_react.default.createElement("div", {
       className: "group-title"
     }, /*#__PURE__*/_react.default.createElement(_copReactComponents.MediumHeading, null, currentGroup.title || page.title)), /*#__PURE__*/_react.default.createElement(_SummaryList.default, {
       className: className,

package/dist/components/CheckYourAnswers/CheckYourAnswers.test.js

@@ -495,5 +495,117 @@ describe('components', function () {
         }
       }, _callee16);
     })));
+    it('should show page components corrently with interpolated title and cya_label, if label is missing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee18() {
+      var _PAGES, _COMPONENTS, T_PAGES, cya, _cya$childNodes5, cyaTitle, cyaChildNode, names, _names$childNodes3, firstName, surname, _firstName$childNodes, label, value;
+
+      return regeneratorRuntime.wrap(function _callee18$(_context18) {
+        while (1) {
+          switch (_context18.prev = _context18.next) {
+            case 0:
+              _PAGES = [].concat(_userProfile.default.pages); // eslint-disable-next-line no-template-curly-in-string
+
+              _PAGES[0] = _objectSpread(_objectSpread({}, _PAGES[0]), {}, {
+                title: 'Alpha ID: ${businessKey}'
+              });
+              _COMPONENTS = [].concat(_userProfile.default.components);
+              _COMPONENTS[0] = _objectSpread(_objectSpread({}, _COMPONENTS[0]), {}, {
+                label: undefined,
+                required: true,
+                // eslint-disable-next-line no-template-curly-in-string
+                cya_label: "Text ${currentUser.familyName}"
+              });
+              T_PAGES = _utils.default.FormPage.getAll(_PAGES, _COMPONENTS, DATA);
+              _context18.next = 7;
+              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee17() {
+                return regeneratorRuntime.wrap(function _callee17$(_context17) {
+                  while (1) {
+                    switch (_context17.prev = _context17.next) {
+                      case 0:
+                        (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
+                          pages: T_PAGES,
+                          onRowAction: ON_ROW_ACTION,
+                          onAction: ON_ACTION
+                        }), container);
+
+                      case 1:
+                      case "end":
+                        return _context17.stop();
+                    }
+                  }
+                }, _callee17);
+              })));
+
+            case 7:
+              cya = checkCYA(container);
+              _cya$childNodes5 = _slicedToArray(cya.childNodes, 3), cyaTitle = _cya$childNodes5[1], cyaChildNode = _cya$childNodes5[2];
+              expect(cyaTitle.textContent).toEqual('Alpha ID: 123456789');
+              names = cyaChildNode.childNodes[0];
+              expect(names.tagName).toEqual('DL');
+              expect(names.classList).toContain("govuk-!-margin-bottom-".concat(_CheckYourAnswers.DEFAULT_MARGIN_BOTTOM));
+              _names$childNodes3 = _slicedToArray(names.childNodes, 2), firstName = _names$childNodes3[0], surname = _names$childNodes3[1];
+              _firstName$childNodes = _slicedToArray(firstName.childNodes, 2), label = _firstName$childNodes[0], value = _firstName$childNodes[1];
+              expect(label.textContent).toEqual('Text Smith');
+              checkRow(surname, 'Last name', 'Smith', false);
+
+            case 17:
+            case "end":
+              return _context18.stop();
+          }
+        }
+      }, _callee18);
+    })));
+    it('should show page components corrently with no label, if label and cya_label are missing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee20() {
+      var _PAGES, _COMPONENTS, T_PAGES, cya, _cya$childNodes6, cyaChildNode, names, _names$childNodes4, firstName, surname, _firstName$childNodes2, label, value;
+
+      return regeneratorRuntime.wrap(function _callee20$(_context20) {
+        while (1) {
+          switch (_context20.prev = _context20.next) {
+            case 0:
+              _PAGES = [].concat(_userProfile.default.pages);
+              _COMPONENTS = [].concat(_userProfile.default.components);
+              _COMPONENTS[0] = _objectSpread(_objectSpread({}, _COMPONENTS[0]), {}, {
+                label: undefined,
+                required: true,
+                cya_label: undefined
+              });
+              T_PAGES = _utils.default.FormPage.getAll(_PAGES, _COMPONENTS, _objectSpread({}, DATA));
+              _context20.next = 6;
+              return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee19() {
+                return regeneratorRuntime.wrap(function _callee19$(_context19) {
+                  while (1) {
+                    switch (_context19.prev = _context19.next) {
+                      case 0:
+                        (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, {
+                          pages: T_PAGES,
+                          onRowAction: ON_ROW_ACTION,
+                          onAction: ON_ACTION
+                        }), container);
+
+                      case 1:
+                      case "end":
+                        return _context19.stop();
+                    }
+                  }
+                }, _callee19);
+              })));
+
+            case 6:
+              cya = checkCYA(container);
+              _cya$childNodes6 = _slicedToArray(cya.childNodes, 2), cyaChildNode = _cya$childNodes6[1];
+              names = cyaChildNode.childNodes[0];
+              expect(names.tagName).toEqual('DL');
+              expect(names.classList).toContain("govuk-!-margin-bottom-".concat(_CheckYourAnswers.DEFAULT_MARGIN_BOTTOM));
+              _names$childNodes4 = _slicedToArray(names.childNodes, 2), firstName = _names$childNodes4[0], surname = _names$childNodes4[1];
+              _firstName$childNodes2 = _slicedToArray(firstName.childNodes, 2), label = _firstName$childNodes2[0], value = _firstName$childNodes2[1];
+              expect(label.textContent).toEqual("");
+              checkRow(surname, 'Last name', 'Smith', false);
+
+            case 15:
+            case "end":
+              return _context20.stop();
+          }
+        }
+      }, _callee20);
+    })));
   });
 });

package/dist/components/FormComponent/FormComponent.js

@@ -143,6 +143,7 @@ var FormComponent = function FormComponent(_ref) {
     label: _utils.default.interpolateString(component.label, formData),
     content: _utils.default.interpolateString(component.content, formData),
     hint: _utils.default.interpolateString(component.hint, formData),
+    cya_label: _utils.default.interpolateString(component.cya_label, formData),
     options: options,
     value: value || _utils.default.Component.defaultValue(component),
     onChange: onComponentChangeExtended,

package/dist/components/FormComponent/FormComponent.test.js

@@ -203,5 +203,62 @@ describe('components', function () {
         }
       }, _callee5);
     })));
+    it('should render a text component appropriately with interpolated label', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6() {
+      var ID, VALUE, COMPONENT, DATA, ON_CHANGE, _renderWithValidation6, container, formGroup, label, hint, input;
+
+      return regeneratorRuntime.wrap(function _callee6$(_context6) {
+        while (1) {
+          switch (_context6.prev = _context6.next) {
+            case 0:
+              ID = 'component';
+              VALUE = 'Text value'; // eslint-disable-next-line no-template-curly-in-string
+
+              COMPONENT = {
+                id: ID,
+                fieldId: ID,
+                type: 'text',
+                label: '${text} Text component',
+                cya_label: '${text} Text component',
+                hint: 'Text hint'
+              };
+              DATA = {
+                text: 'Interpolated'
+              };
+
+              ON_CHANGE = function ON_CHANGE() {};
+
+              _renderWithValidation6 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_FormComponent.default, {
+                "data-testid": ID,
+                component: COMPONENT,
+                value: VALUE,
+                onChange: ON_CHANGE,
+                formData: DATA
+              })), container = _renderWithValidation6.container; // text components are wrapper in a FormGroup by default.
+
+              formGroup = container.childNodes[0];
+              expect(formGroup.tagName).toEqual('DIV');
+              expect(formGroup.classList).toContain('govuk-form-group');
+              label = formGroup.childNodes[0];
+              expect(label.tagName).toEqual('LABEL');
+              expect(label.classList).toContain('govuk-label');
+              expect(label.textContent).toEqual('Interpolated Text component (optional)');
+              expect(label.getAttribute('for')).toEqual(ID);
+              hint = formGroup.childNodes[1];
+              expect(hint.tagName).toEqual('SPAN');
+              expect(hint.classList).toContain('govuk-hint');
+              expect(hint.textContent).toEqual(COMPONENT.hint);
+              input = formGroup.childNodes[2];
+              expect(input.tagName).toEqual('INPUT');
+              expect(input.classList).toContain('govuk-input');
+              expect(input.id).toEqual(ID);
+              expect(input.value).toEqual(VALUE);
+
+            case 23:
+            case "end":
+              return _context6.stop();
+          }
+        }
+      }, _callee6);
+    })));
   });
 });

package/dist/hooks/useRefData.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.STATUS_LOADING = exports.STATUS_COMPLETE = void 0;
 
+var _copReactComponents = require("@ukhomeoffice/cop-react-components");
+
 var _react = require("react");
 
 var _Data = _interopRequireDefault(require("../utils/Data"));
@@ -40,7 +42,7 @@ var getRefDataUrl = function getRefDataUrl(component) {
   var data = component.data;
 
   if (data && !data.options) {
-    return data.url;
+    return _copReactComponents.Utils.interpolateString(data.url, component.formData);
   }
 
   return undefined;
@@ -66,13 +68,13 @@ var useRefData = function useRefData(component) {
   (0, _react.useEffect)(function () {
     if (!url) {
       if (component.data && component.data.options) {
-        setData(_Data.default.refData.toOptions(component.data.options));
+        setData(_Data.default.refData.toOptions(component.data.options, component.item));
       }
 
       setStatus(STATUS_COMPLETE);
     } else if (_status === _useGetRequest2.STATUS_FETCHED) {
       if (_data) {
-        setData(_Data.default.refData.toOptions(_data.data));
+        setData(_Data.default.refData.toOptions(_data.data, component.item));
       }
 
       setStatus(STATUS_COMPLETE);

package/dist/utils/CheckYourAnswers/getCYARow.js

@@ -5,12 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _copReactComponents = require("@ukhomeoffice/cop-react-components");
+
 var _Component = _interopRequireDefault(require("../Component"));
 
 var _getCYAAction = _interopRequireDefault(require("./getCYAAction"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+// Global imports
 // Local imports
 
 /**
@@ -35,7 +38,7 @@ var getCYARow = function getCYARow(page, component, onAction) {
     id: component.id,
     fieldId: component.fieldId,
     full_path: component.full_path,
-    key: component.label || component.cya_label,
+    key: _copReactComponents.Utils.interpolateString(component.label || component.cya_label, page.formData),
     required: component.required,
     component: _Component.default.editable(component) ? component : undefined,
     value: value || '',

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

@@ -195,6 +195,62 @@ describe('utils', function () {
         var ROW = (0, _getCYARow.default)(PAGE, COMPONENT, function () {});
         expect(ROW.component.data.options[0].nested[0].value).toBeUndefined();
       });
+      it('should get an appropriate row for a readonly text component with no value and interpolated label', function () {
+        var PAGE = {
+          id: 'page',
+          formData: {
+            text: 'Smith'
+          }
+        }; // eslint-disable-next-line no-template-curly-in-string
+
+        var COMPONENT = {
+          type: 'text',
+          readonly: true,
+          id: 'a',
+          fieldId: 'a',
+          label: 'Alpha ${text}'
+        };
+
+        var ON_ACTION = function ON_ACTION() {};
+
+        expect((0, _getCYARow.default)(PAGE, COMPONENT, ON_ACTION)).toEqual({
+          pageId: PAGE.id,
+          id: COMPONENT.id,
+          fieldId: COMPONENT.fieldId,
+          key: 'Alpha Smith',
+          value: '',
+          component: COMPONENT,
+          action: null
+        });
+      });
+      it('should use the interolated cya_label where there is no label', function () {
+        var PAGE = {
+          id: 'page',
+          formData: {
+            a: 'Bravo'
+          }
+        }; // eslint-disable-next-line no-template-curly-in-string
+
+        var COMPONENT = {
+          type: 'text',
+          readonly: true,
+          id: 'a',
+          fieldId: 'a',
+          cya_label: 'CYA Alpha ${a}'
+        };
+
+        var ON_ACTION = function ON_ACTION() {};
+
+        var ROW = (0, _getCYARow.default)(PAGE, COMPONENT, ON_ACTION);
+        (0, _setupTests.expectObjectLike)(ROW, {
+          pageId: PAGE.id,
+          fieldId: COMPONENT.fieldId,
+          key: 'CYA Alpha Bravo',
+          action: null,
+          component: COMPONENT,
+          value: 'Bravo'
+        });
+      });
     });
   });
 });

package/dist/utils/Data/refDataToOptions.js

@@ -11,22 +11,38 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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 getValueAndLabel = function getValueAndLabel(opt, itemStructure) {
+  var _value;
+
+  var value = opt.value || opt.id;
+  var label = opt.label || opt.name;
+
+  if (itemStructure) {
+    value = opt[itemStructure.value] || value;
+    label = opt[itemStructure.label] || label;
+  }
+
+  return {
+    value: (_value = value) === null || _value === void 0 ? void 0 : _value.toString(),
+    label: label
+  };
+};
 /**
  * Converts ref data items to options.
  * @param {Array} refDataItems An array of ref data items.
+ * @param {Object} itemStructure The structure of the item.
  * @returns An array of options.
  */
-var refDataToOptions = function refDataToOptions(refDataItems) {
+
+
+var refDataToOptions = function refDataToOptions(refDataItems, itemStructure) {
   if (Array.isArray(refDataItems)) {
     return refDataItems.map(function (opt) {
       if (typeof opt === 'string') {
         return opt;
       }
 
-      return _objectSpread(_objectSpread({}, opt), {}, {
-        value: opt.id || opt.value,
-        label: opt.name || opt.label
-      });
+      return _objectSpread(_objectSpread({}, opt), getValueAndLabel(opt, itemStructure));
     });
   }
 

package/dist/utils/Data/refDataToOptions.test.js

@@ -124,6 +124,74 @@ describe('utils', function () {
           type: 'Delta'
         }]);
       });
+      it('can handle refData with custom value and label properties', function () {
+        var REF_DATA = [{
+          id: 1,
+          displayName: 'Alpha'
+        }, {
+          id: 2,
+          displayName: 'Bravo'
+        }, {
+          id: 3,
+          displayName: 'Charlie'
+        }];
+        var ITEM_STRUCTURE = {
+          value: 'id',
+          label: 'displayName'
+        };
+        expect((0, _refDataToOptions.default)(REF_DATA, ITEM_STRUCTURE)).toEqual([{
+          id: 1,
+          displayName: 'Alpha',
+          value: '1',
+          label: 'Alpha'
+        }, {
+          id: 2,
+          displayName: 'Bravo',
+          value: '2',
+          label: 'Bravo'
+        }, {
+          id: 3,
+          displayName: 'Charlie',
+          value: '3',
+          label: 'Charlie'
+        }]);
+      });
+      it('can handle refData with missing custom value and label properties', function () {
+        var REF_DATA = [{
+          id: 1,
+          name: 'Alpha'
+        }, {
+          id: 2,
+          name: 'Bravo',
+          displayName: 'Bravo Zulu'
+        }, {
+          id: 3,
+          objId: 'chaz',
+          name: 'Charlie'
+        }];
+        var ITEM_STRUCTURE = {
+          value: 'objId',
+          label: 'displayName'
+        };
+        expect((0, _refDataToOptions.default)(REF_DATA, ITEM_STRUCTURE)).toEqual([{
+          id: 1,
+          name: 'Alpha',
+          value: '1',
+          label: 'Alpha'
+        }, {
+          id: 2,
+          name: 'Bravo',
+          displayName: 'Bravo Zulu',
+          value: '2',
+          label: 'Bravo Zulu'
+        }, {
+          id: 3,
+          objId: 'chaz',
+          name: 'Charlie',
+          value: 'chaz',
+          label: 'Charlie'
+        }]);
+      });
     });
   });
 });

package/dist/utils/Data/setupRefDataUrlForComponent.js

@@ -7,19 +7,49 @@ exports.default = void 0;
 
 var _copReactComponents = require("@ukhomeoffice/cop-react-components");
 
+var _models = require("../../models");
+
 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 setupRefDataForContainer = function setupRefDataForContainer(container, data) {
+  return _objectSpread(_objectSpread({}, container), {}, {
+    components: setupRefDataUrlForComponents(container.components, data)
+  });
+};
+
+var setupRefDataForCollection = function setupRefDataForCollection(collection, data) {
+  return _objectSpread(_objectSpread({}, collection), {}, {
+    item: setupRefDataUrlForComponents(collection.item, data)
+  });
+};
+
+var setupRefDataUrlForComponents = function setupRefDataUrlForComponents(components, data) {
+  return components.map(function (component) {
+    return setupRefDataUrlForComponent(component, data);
+  });
+};
+
 var setupRefDataUrlForComponent = function setupRefDataUrlForComponent(component, data) {
-  if (component && component.data && component.data.url) {
-    return _objectSpread(_objectSpread({}, component), {}, {
-      data: _objectSpread(_objectSpread({}, component.data), {}, {
-        url: _copReactComponents.Utils.interpolateString(component.data.url, data)
-      })
-    });
+  if (component) {
+    if (component.type === _models.ComponentTypes.CONTAINER) {
+      return setupRefDataForContainer(component, data);
+    }
+
+    if (component.type === _models.ComponentTypes.COLLECTION) {
+      return setupRefDataForCollection(component, data);
+    }
+
+    if (component.data && component.data.url) {
+      return _objectSpread(_objectSpread({}, component), {}, {
+        data: _objectSpread(_objectSpread({}, component.data), {}, {
+          url: _copReactComponents.Utils.interpolateString(component.data.url, data)
+        })
+      });
+    }
   }
 
   return component;

package/dist/utils/Data/setupRefDataUrlForComponent.test.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _models = require("../../models");
+
 var _setupRefDataUrlForComponent = _interopRequireDefault(require("./setupRefDataUrlForComponent"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -34,7 +36,7 @@ describe('utils', function () {
         };
         expect((0, _setupRefDataUrlForComponent.default)(COMPONENT, DATA)).toEqual(COMPONENT);
       });
-      it('should appropriately updates the component URL', function () {
+      it('should appropriately update the component URL', function () {
         var COMPONENT = {
           id: 'component',
           // eslint-disable-next-line no-template-curly-in-string
@@ -78,6 +80,54 @@ describe('utils', function () {
           }
         });
       });
+      it('should appropriately update the component URLs within a container', function () {
+        var COMPONENT = {
+          id: 'component',
+          // eslint-disable-next-line no-template-curly-in-string
+          data: {
+            url: '${urls.refData}/v1/teams'
+          }
+        };
+        var CONTAINER = {
+          id: 'container',
+          type: _models.ComponentTypes.CONTAINER,
+          components: [COMPONENT]
+        };
+        expect((0, _setupRefDataUrlForComponent.default)(CONTAINER, DATA)).toEqual({
+          id: CONTAINER.id,
+          type: CONTAINER.type,
+          components: [{
+            id: COMPONENT.id,
+            data: {
+              url: "".concat(DATA.urls.refData, "/v1/teams")
+            }
+          }]
+        });
+      });
+      it('should appropriately update the component URLs within a collection', function () {
+        var COMPONENT = {
+          id: 'component',
+          // eslint-disable-next-line no-template-curly-in-string
+          data: {
+            url: '${urls.refData}/v1/teams'
+          }
+        };
+        var COLLECTION = {
+          id: 'container',
+          type: _models.ComponentTypes.COLLECTION,
+          item: [COMPONENT]
+        };
+        expect((0, _setupRefDataUrlForComponent.default)(COLLECTION, DATA)).toEqual({
+          id: COLLECTION.id,
+          type: COLLECTION.type,
+          item: [{
+            id: COMPONENT.id,
+            data: {
+              url: "".concat(DATA.urls.refData, "/v1/teams")
+            }
+          }]
+        });
+      });
     });
   });
 });

package/dist/utils/FormPage/getFormPage.js

@@ -48,7 +48,7 @@ var getFormPage = function getFormPage(pageOptions, formComponents, formData) {
       ret = _objectSpread({}, componentOptions);
     }
 
-    return formData && formData.urls ? _Data.default.refData.setupUrl(ret, formData) : ret;
+    return formData ? _Data.default.refData.setupUrl(ret, formData) : ret;
   });
   var actions = (0, _getPageActions.default)(pageOptions);
   return _Container.default.setup(_objectSpread(_objectSpread({}, pageOptions), {}, {

package/dist/utils/FormPage/getFormPage.test.js

@@ -194,7 +194,7 @@ describe('utils', function () {
             cya_label: C.label,
             full_path: C.fieldId,
             data: {
-              url: '${urls.refData}/v3/charlies'
+              url: '/v3/charlies'
             }
           })],
           formData: {}

package/dist/utils/FormPage/useComponent.js

@@ -26,7 +26,7 @@ var useComponent = function useComponent(toUse, formComponents) {
   if (formComponent) {
     var fieldId = toUse.fieldId || formComponent.fieldId;
     return _objectSpread(_objectSpread(_objectSpread({}, formComponent), toUse), {}, {
-      cya_label: formComponent.label,
+      cya_label: formComponent.label || formComponent.cya_label,
       fieldId: fieldId
     });
   }

package/dist/utils/FormPage/useComponent.test.js

@@ -28,6 +28,11 @@ describe('utils', function () {
         fieldId: 'c',
         label: 'Charlie',
         type: 'text'
+      }, {
+        id: 'd',
+        fieldId: 'd',
+        cya_label: 'Delta',
+        type: 'text'
       }];
       it('should handle a null toUse configuration', function () {
         var TO_USE = null;
@@ -35,8 +40,8 @@ describe('utils', function () {
       });
       it('should handle an unrecognised component reference', function () {
         var TO_USE = {
-          use: 'd',
-          label: 'Delta'
+          use: 'e',
+          label: 'Echo'
         };
         expect((0, _useComponent.default)(TO_USE, FORM_COMPONENTS)).toEqual(TO_USE);
       });
@@ -77,6 +82,31 @@ describe('utils', function () {
           label: TO_USE.label
         }));
       });
+      it('should allow the form component cya_label, if label is empty', function () {
+        var TO_USE = {
+          use: 'd',
+          label: ''
+        };
+        var A = FORM_COMPONENTS[3];
+        expect((0, _useComponent.default)(TO_USE, FORM_COMPONENTS)).toEqual(_objectSpread(_objectSpread({
+          use: 'd'
+        }, A), {}, {
+          cya_label: A.cya_label,
+          label: TO_USE.label
+        }));
+      });
+      it('should allow the form component cya_label, if label is not given', function () {
+        var TO_USE = {
+          use: 'd'
+        };
+        var A = FORM_COMPONENTS[3];
+        expect((0, _useComponent.default)(TO_USE, FORM_COMPONENTS)).toEqual(_objectSpread(_objectSpread({
+          use: 'd'
+        }, A), {}, {
+          cya_label: A.cya_label,
+          label: TO_USE.label
+        }));
+      });
     });
   });
 });

package/package.json

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