@ukhomeoffice/cop-react-form-renderer 4.79.0 → 4.81.0

package/dist/components/CheckYourAnswers/CheckYourAnswers.js

@@ -9,6 +9,7 @@ var _copReactComponents = require("@ukhomeoffice/cop-react-components");
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _hooks = require("../../hooks");
+var _models = require("../../models");
 var _utils = _interopRequireDefault(require("../../utils"));
 var _PageActions = _interopRequireDefault(require("../PageActions"));
 var _SummaryList = _interopRequireDefault(require("../SummaryList"));
@@ -78,7 +79,7 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
     var pagesWithMergedCollections = _utils.default.CollectionPage.mergePages(_pages);
     var pagesWithRows = pagesWithMergedCollections.map(function (page, index) {
       var rows = getRows(page, index);
-      return rows.length > 0 ? _objectSpread(_objectSpread({}, page), {}, {
+      return rows !== null && rows !== void 0 && rows.length ? _objectSpread(_objectSpread({}, page), {}, {
         rows: rows
       }) : null;
     }).filter(function (p) {
@@ -92,17 +93,9 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
   };
   (0, _react.useEffect)(function () {
     var groupsList = function groupsList() {
-      var groupIds = [];
-      if (groups !== undefined) {
-        if (groups.length) {
-          groups.forEach(function (group) {
-            var groupedPageId = group.pageId;
-            groupIds.push(groupedPageId);
-          });
-        }
-        ;
-      }
-      ;
+      var groupIds = Array.isArray(groups) ? groups.map(function (group) {
+        return group.pageId;
+      }) : [];
       setListOfGroups(groupIds);
     };
     groupsList();
@@ -127,19 +120,13 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
   if (override) {
     return override;
   }
-  ;
   var isGroup = function isGroup(pageId) {
     return listOfGroups.includes(pageId);
   };
   var getGroupForPage = function getGroupForPage(pageId) {
-    var groupAnswer;
-    if (groups !== undefined) {
-      groupAnswer = groups.find(function (group) {
-        return group.pageId === pageId;
-      });
-    }
-    ;
-    return groupAnswer;
+    return groups === null || groups === void 0 ? void 0 : groups.find(function (group) {
+      return group.pageId === pageId;
+    });
   };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: DEFAULT_CLASS
@@ -147,22 +134,19 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
     key: "heading"
   }, title), errors && errors.length > 0 && /*#__PURE__*/_react.default.createElement(_copReactComponents.ErrorSummary, {
     errors: errors
-  }), type === 'task-list-cya' && pages.length > 0 && sections && sections.map(function (section) {
-    return section.tasks.map(function (task) {
+  }), type === _models.FormTypes.TASK_CYA && pages.length > 0 && sections && sections.map(function (section) {
+    return section.tasks.map(function (task, taskIndex) {
       var filterPages = pages.filter(function (page) {
         return task.pages.some(function (p) {
           return p === page.name;
         });
       });
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h3", {
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+        key: taskIndex
+      }, /*#__PURE__*/_react.default.createElement("h3", {
         className: "govuk-heading-m govuk-!-margin-top-8 govuk-!-margin-bottom-0"
       }, filterPages.length > 0 && task.name), filterPages.map(function (page, pageIndex) {
-        var hideActionButtons;
-        if (isGroup(page.id)) {
-          hideActionButtons = true;
-        } else {
-          hideActionButtons = noChangeAction;
-        }
+        var hideActionButtons = isGroup(page.id) || noChangeAction;
         return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
           key: pageIndex
         }, !hide_page_titles && page.title && !isGroup(page.id) && /*#__PURE__*/_react.default.createElement("h4", {
@@ -176,20 +160,11 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
         }));
       }));
     });
-  }), type !== 'task-list-cya' && pages && pages.map(function (page, pageIndex, array) {
+  }), type !== _models.FormTypes.TASK_CYA && pages && pages.map(function (page, pageIndex, array) {
     var pageMarginBottom = isLastPage(pageIndex) || isGroup(array[pageIndex].id) || isGroup(array[pageIndex + 1].id) ? DEFAULT_MARGIN_BOTTOM : listMarginBottom;
-    var currentGroup;
-    if (isGroup(page.id)) {
-      currentGroup = getGroupForPage(page.id);
-    }
-    ;
+    var currentGroup = isGroup(page.id) ? getGroupForPage(page.id) : undefined;
     var className = "govuk-!-margin-bottom-".concat(pageMarginBottom);
-    var hideActionButtons;
-    if (isGroup(page.id)) {
-      hideActionButtons = true;
-    } else {
-      hideActionButtons = noChangeAction;
-    }
+    var hideActionButtons = isGroup(page.id) || 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, _utils.default.interpolateString(page.title, page.formData)), isGroup(page.id) && /*#__PURE__*/_react.default.createElement("div", {
@@ -211,7 +186,7 @@ var CheckYourAnswers = function CheckYourAnswers(_ref) {
 };
 CheckYourAnswers.propTypes = {
   actions: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string])),
-  groups: _propTypes.default.shape([]),
+  groups: _propTypes.default.arrayOf(_propTypes.default.shape({})),
   hide_actions: _propTypes.default.bool,
   hide_page_titles: _propTypes.default.bool,
   hide_title: _propTypes.default.bool,
@@ -224,7 +199,7 @@ CheckYourAnswers.propTypes = {
     name: _propTypes.default.string.isRequired,
     tasks: _propTypes.default.arrayOf(_propTypes.default.shape({
       name: _propTypes.default.string.isRequired,
-      pages: _propTypes.default.shape([]).isRequired,
+      pages: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
       state: _propTypes.default.string.isRequired
     })).isRequired
   })),

package/dist/components/CollectionPage/CollectionPage.js

@@ -109,7 +109,7 @@ CollectionPage.propTypes = {
       name: _propTypes.default.string.isRequired
     }).isRequired,
     components: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object])).isRequired,
-    actions: _propTypes.default.shape([]),
+    actions: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({}), _propTypes.default.string])),
     formData: _propTypes.default.shape({}).isRequired
   }).isRequired,
   onAction: _propTypes.default.func.isRequired,

package/dist/components/FormComponent/Collection.js

@@ -150,7 +150,7 @@ var Collection = function Collection(_ref) {
         full_path: fullPath,
         components: config.item.map(function (component) {
           return _objectSpread(_objectSpread({}, component), {}, {
-            readonly: config.readonly ? true : component.readonly,
+            readonly: !!(config !== null && config !== void 0 && config.readonly || component.readonly),
             label: _utils.default.interpolateString(component.label, _objectSpread(_objectSpread({}, item), {}, {
               index: labelCount
             })),
@@ -192,7 +192,7 @@ Collection.propTypes = {
       add: _propTypes.default.string,
       remove: _propTypes.default.string
     }),
-    minimumEntries: _propTypes.default.string,
+    minimumEntries: _propTypes.default.number,
     readonly: _propTypes.default.bool,
     removeLocation: _propTypes.default.string,
     required: _propTypes.default.bool
@@ -200,7 +200,11 @@ Collection.propTypes = {
   formData: _propTypes.default.shape({}),
   onChange: _propTypes.default.func,
   onTopLevelChange: _propTypes.default.func,
-  value: _propTypes.default.arrayOf(_propTypes.default.shape()),
+  value: _propTypes.default.oneOfType([_propTypes.default.node,
+  // not included in node
+  _propTypes.default.shape({
+    id: _propTypes.default.string
+  }), _propTypes.default.arrayOf(_propTypes.default.shape({}))]),
   wrap: _propTypes.default.bool
 };
 Collection.defaultProps = {

package/dist/components/FormComponent/Container.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _models = require("../../models");
 var _utils = _interopRequireDefault(require("../../utils"));
+var _cleanAttributes = _interopRequireDefault(require("../../utils/Component/cleanAttributes"));
 var _FormComponent = _interopRequireDefault(require("./FormComponent"));
 var _excluded = ["container", "value", "formData", "onChange", "wrap", "onTopLevelChange"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -60,7 +61,8 @@ var Container = function Container(_ref) {
     }), formData);
   };
   var classes = _utils.default.classBuilder(DEFAULT_CLASS, [], container.className);
-  return /*#__PURE__*/_react.default.createElement("div", _extends({}, attrs, {
+  var htmlAttrs = (0, _cleanAttributes.default)(attrs);
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, htmlAttrs, {
     className: classes(),
     id: container.id
   }), container.components && container.components.filter(shouldShow).map(function (component, index) {
@@ -72,7 +74,7 @@ var Container = function Container(_ref) {
     }, attrs, {
       component: _objectSpread(_objectSpread({}, component), {}, {
         full_path: fullPath,
-        readonly: container.readonly ? true : component.readonly
+        readonly: !!(container.readonly || component.readonly)
       }),
       formData: formData,
       value: val || defaultValue,
@@ -98,7 +100,11 @@ Container.propTypes = {
   fullPath: _propTypes.default.string,
   onChange: _propTypes.default.func,
   onTopLevelChange: _propTypes.default.func,
-  value: _propTypes.default.string,
+  value: _propTypes.default.oneOfType([_propTypes.default.node,
+  // not included in node
+  _propTypes.default.shape({
+    id: _propTypes.default.string
+  }), _propTypes.default.arrayOf(_propTypes.default.shape({}))]),
   wrap: _propTypes.default.bool
 };
 Container.defaultProps = {

package/dist/components/FormComponent/FormComponent.js

@@ -132,9 +132,9 @@ var FormComponent = function FormComponent(_ref) {
 };
 FormComponent.propTypes = {
   component: _propTypes.default.shape({
-    additionalValidation: _propTypes.default.shape([]),
+    additionalValidation: _propTypes.default.arrayOf(_propTypes.default.shape({})),
     allowMultiple: _propTypes.default.bool,
-    content: _propTypes.default.shape({}),
+    content: _propTypes.default.string,
     cya_label: _propTypes.default.string,
     data: _propTypes.default.shape({
       options: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object])),
@@ -149,7 +149,11 @@ FormComponent.propTypes = {
     suffix: _propTypes.default.string,
     type: _propTypes.default.string
   }).isRequired,
-  value: _propTypes.default.string,
+  value: _propTypes.default.oneOfType([_propTypes.default.node,
+  // not included in node
+  _propTypes.default.shape({
+    id: _propTypes.default.string
+  }), _propTypes.default.arrayOf(_propTypes.default.shape({}))]),
   formData: _propTypes.default.shape({}),
   wrap: _propTypes.default.bool,
   onChange: _propTypes.default.func,

package/dist/components/FormPage/FormPage.js

@@ -69,7 +69,6 @@ var FormPage = function FormPage(_ref) {
     if (typeof onChange === 'function') {
       onChange(page.formData);
     }
-    ;
   };
   (0, _react.useEffect)(function () {
     // eslint-disable-next-line no-useless-concat
@@ -115,7 +114,7 @@ FormPage.propTypes = {
   classBlock: _propTypes.default.string,
   classModifiers: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
   className: _propTypes.default.string,
-  hashLink: _propTypes.default.string,
+  hashLink: _propTypes.default.bool,
   onAction: _propTypes.default.func.isRequired,
   // If passed in, this function will override the default
   // onPageChange functionality. Useful for anything that
@@ -127,7 +126,7 @@ FormPage.propTypes = {
     id: _propTypes.default.string.isRequired,
     title: _propTypes.default.string,
     components: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.shape({})])).isRequired,
-    actions: _propTypes.default.shape([]),
+    actions: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({}), _propTypes.default.string])),
     formData: _propTypes.default.shape({}).isRequired
   }).isRequired
 };
@@ -135,7 +134,7 @@ FormPage.defaultProps = {
   classBlock: DEFAULT_CLASS,
   classModifiers: [],
   className: '',
-  hashLink: '',
+  hashLink: false,
   onChange: undefined,
   onTopLevelChange: undefined,
   onWrapperChange: undefined

package/dist/components/FormRenderer/FormRenderer.js

@@ -22,10 +22,13 @@ var _onCYAAction = _interopRequireDefault(require("./onCYAAction"));
 var _onPageAction = _interopRequireDefault(require("./onPageAction"));
 var _onTaskAction2 = _interopRequireDefault(require("./onTaskAction"));
 require("./FormRenderer.scss");
+var _excluded = ["noTaskCYAs", "nonSequential"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -218,8 +221,7 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
     setPagePoint(undefined);
     // In case of refresh the current task needs to be reset
     hooks.onFormLoad(function (currentTask) {
-      var task = currentTask;
-      setCurrentTask(task);
+      setCurrentTask(currentTask);
     });
   }, [hooks]);
   (0, _react.useEffect)(function () {
@@ -227,7 +229,7 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
   }, [_hub]);
 
   // Calling setData directly within the hooks.onSubmit success handler
-  // resulted in a sychronisation error. Handling it in a useEffect appears
+  // resulted in a synchronisation error. Handling it in a useEffect appears
   // to be the way to deal with this... and it certainly seems to work.
   (0, _react.useEffect)(function () {
     if (submitted !== null && submitted !== void 0 && submitted.data) {
@@ -302,7 +304,6 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
         });
       });
     }
-    ;
     if (page) {
       _handlers.default.cyaAction(page, pageId, onPageChange);
     }
@@ -312,6 +313,11 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
     var currentCYA = cya;
     currentCYA.actions = [_models.PageAction.TYPES.SAVE_AND_CONTINUE, _models.PageAction.TYPES.SAVE_AND_RETURN];
   }
+
+  // filter out invalid attribs
+  var _noCYA = hubDetails.noTaskCYAs,
+    _nonSeq = hubDetails.nonSequential,
+    taskDetails = _objectWithoutProperties(hubDetails, _excluded);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes()
   }, title && !hideTitle && pageId === _models.FormPages.HUB && /*#__PURE__*/_react.default.createElement(_copReactComponents.LargeHeading, null, title), formState.cya && /*#__PURE__*/_react.default.createElement(_CheckYourAnswers.default, _extends({
@@ -331,7 +337,7 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
     noGroupAction: (_formState$cya$hideGr = formState.cya.hideGroupActions) !== null && _formState$cya$hideGr !== void 0 ? _formState$cya$hideGr : false,
     sections: typeof hubDetails !== 'undefined' ? hubDetails.sections : [],
     type: type
-  })), hub === _models.HubFormats.TASK && formState.pageId === _models.FormPages.HUB && /*#__PURE__*/_react.default.createElement(_TaskList.default, _extends({}, hubDetails, {
+  })), hub === _models.HubFormats.TASK && formState.pageId === _models.FormPages.HUB && /*#__PURE__*/_react.default.createElement(_TaskList.default, _extends({}, taskDetails, {
     refNumber: data.businessKey,
     onTaskAction: function onTaskAction(task) {
       (0, _onTaskAction2.default)(task, pages, setCurrentTask, hubDetails, data, onPageChange);
@@ -357,7 +363,7 @@ var propTypes = {
   className: _propTypes.default.string,
   components: _propTypes.default.arrayOf(_propTypes.default.shape({})).isRequired,
   cya: _propTypes.default.shape({
-    actions: _propTypes.default.shape([])
+    actions: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({}), _propTypes.default.string]))
   }),
   data: _propTypes.default.shape({
     formStatus: _propTypes.default.shape({
@@ -369,7 +375,7 @@ var propTypes = {
   hooks: _propTypes.default.shape({}),
   hub: _propTypes.default.shape({
     nonSequential: _propTypes.default.bool,
-    sections: _propTypes.default.shape([])
+    sections: _propTypes.default.arrayOf(_propTypes.default.shape({}))
   }),
   newPageId: _propTypes.default.string,
   noChangeAction: _propTypes.default.bool,

package/dist/components/PageActions/PageActions.js

@@ -28,7 +28,7 @@ var PageActions = function PageActions(_ref) {
   }));
 };
 PageActions.propTypes = {
-  actions: _propTypes.default.shape([]).isRequired,
+  actions: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({}), _propTypes.default.string])).isRequired,
   onAction: _propTypes.default.func.isRequired
 };
 var _default = PageActions;

package/dist/components/SummaryList/SummaryList.js

@@ -34,7 +34,7 @@ var SummaryList = function SummaryList(_ref) {
     var rowActions = rows.filter(function (r) {
       return !!r.action;
     });
-    groupActionRow = rowActions.length > 0 ? rowActions[0] : null;
+    groupActionRow = rowActions !== null && rowActions !== void 0 && rowActions.length ? rowActions[0] : null;
   }
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "group-of-rows"
@@ -90,7 +90,7 @@ SummaryList.propTypes = {
     fieldId: _propTypes.default.string.isRequired,
     full_path: _propTypes.default.string,
     key: _propTypes.default.string.isRequired,
-    value: _propTypes.default.string,
+    value: _propTypes.default.node,
     action: _propTypes.default.shape({
       page: _propTypes.default.string,
       label: _propTypes.default.string,

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

@@ -83,19 +83,20 @@ describe('components', function () {
     it('should handle rows with no actions and string values', function () {
       var ID = 'test-id';
       var ROWS = [{
+        key: 'a',
         pageId: 'p1',
         fieldId: 'a',
-        key: 'Alpha',
         value: 'Alpha value'
       }, {
+        key: 'b',
         pageId: 'p2',
         fieldId: 'b',
-        key: 'Bravo',
         value: 'Bravo value'
       }];
       var _render2 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_SummaryList.default, {
           "data-testid": ID,
-          rows: ROWS
+          rows: ROWS,
+          noGroupAction: true
         })),
         container = _render2.container;
       var summaryList = checkSummaryList(container, ID);
@@ -114,19 +115,19 @@ describe('components', function () {
     it('should handle title rows', function () {
       var ID = 'test-id';
       var ROWS = [{
+        key: 'Title',
         pageId: 'p1',
         fieldId: 'a',
-        type: 'title',
-        key: 'Title'
+        type: 'title'
       }, {
+        key: 'b',
         pageId: 'p1',
-        fieldId: 'a',
-        key: 'Alpha',
+        fieldId: 'b',
         value: 'Alpha value'
       }, {
+        key: 'c',
         pageId: 'p2',
-        fieldId: 'b',
-        key: 'Bravo',
+        fieldId: 'c',
         value: 'Bravo value'
       }];
       var _render3 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_SummaryList.default, {
@@ -161,6 +162,7 @@ describe('components', function () {
     it('should handle action rows', function () {
       var ID = 'test-id';
       var ROWS = [{
+        key: 'a',
         pageId: 'p1',
         fieldId: 'a',
         type: 'action',
@@ -168,6 +170,7 @@ describe('components', function () {
           label: 'Do action'
         }
       }, {
+        key: 'b',
         pageId: 'p2',
         fieldId: 'b',
         type: 'action',
@@ -175,6 +178,7 @@ describe('components', function () {
           label: 'Do action'
         }
       }, {
+        key: 'c',
         pageId: 'p3',
         fieldId: 'c',
         type: 'action',
@@ -200,6 +204,7 @@ describe('components', function () {
     it('should hide actions rows if flag is given', function () {
       var ID = 'test-id';
       var ROWS = [{
+        key: 'a',
         pageId: 'p1',
         fieldId: 'a',
         type: 'action',
@@ -207,6 +212,7 @@ describe('components', function () {
           label: 'Do action'
         }
       }, {
+        key: 'b',
         pageId: 'p2',
         fieldId: 'b',
         type: 'action',
@@ -214,6 +220,7 @@ describe('components', function () {
           label: 'Do action'
         }
       }, {
+        key: 'c',
         pageId: 'p3',
         fieldId: 'c',
         type: 'action',
@@ -234,14 +241,14 @@ describe('components', function () {
       var ID = 'test-id';
       var VALUES = ['Alpha component value', 'Bravo component value'];
       var ROWS = [{
+        key: 'a',
         pageId: 'p1',
         fieldId: 'a',
-        key: 'Alpha',
         value: /*#__PURE__*/_react2.default.createElement("div", null, VALUES[0])
       }, {
+        key: 'b',
         pageId: 'p2',
         fieldId: 'b',
-        key: 'Bravo',
         value: /*#__PURE__*/_react2.default.createElement("div", null, VALUES[1])
       }];
       var _render6 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_SummaryList.default, {
@@ -272,18 +279,18 @@ describe('components', function () {
         ON_ACTION_CALLS.push(row);
       };
       var ROWS = [{
+        key: 'a',
         pageId: 'p1',
         fieldId: 'a',
-        key: 'Alpha',
         value: 'Alpha value',
         action: {
           label: 'Change A',
           onAction: ON_ACTION
         }
       }, {
+        key: 'b',
         pageId: 'p2',
         fieldId: 'b',
-        key: 'Bravo',
         value: 'Bravo value',
         action: {
           label: 'Change B',
@@ -316,14 +323,14 @@ describe('components', function () {
       var ID = 'test-id';
       var VALUES = ['Alpha component value', 'Bravo component value'];
       var ROWS = [{
+        key: 'a',
         pageId: 'p1',
         fieldId: 'a',
-        key: 'Alpha',
         value: /*#__PURE__*/_react2.default.createElement("div", null, VALUES[0])
       }, {
+        key: 'b',
         pageId: 'p2',
         fieldId: 'b',
-        key: 'Bravo',
         value: /*#__PURE__*/_react2.default.createElement("div", null, VALUES[1])
       }];
       var _render8 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_SummaryList.default, {
@@ -346,24 +353,27 @@ describe('components', function () {
         expect(valueDiv.textContent).toEqual(VALUES[index]);
       });
     });
-    it('should render groups of rows corretly', function () {
+    it('should render groups of rows correctly', function () {
       var ID = 'test-id';
       var VALUES = ['Alpha component value', 'Bravo component value', 'Charlie component value'];
       var ISGROUP = true;
       var ROWS = [{
+        key: 'a',
         pageId: 'p1',
         fieldId: 'a',
-        key: 'Alpha',
-        value: /*#__PURE__*/_react2.default.createElement("div", null, VALUES[0])
+        value: /*#__PURE__*/_react2.default.createElement("div", null, VALUES[0]),
+        action: {
+          label: 'action'
+        }
       }, {
+        key: 'b',
         pageId: 'p1',
         fieldId: 'b',
-        key: 'Bravo',
         value: /*#__PURE__*/_react2.default.createElement("div", null, VALUES[1])
       }, {
+        key: 'c',
         pageId: 'p1',
         fieldId: 'c',
-        key: 'Charlie',
         value: /*#__PURE__*/_react2.default.createElement("div", null, VALUES[2])
       }];
       var _render9 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_SummaryList.default, {

package/dist/components/SummaryList/SummaryListRow.js

@@ -33,7 +33,7 @@ SummaryListRow.propTypes = {
   row: _propTypes.default.shape({
     key: _propTypes.default.string.isRequired,
     required: _propTypes.default.bool,
-    value: _propTypes.default.string,
+    value: _propTypes.default.node,
     action: _propTypes.default.shape({
       page: _propTypes.default.string,
       label: _propTypes.default.string,

package/dist/components/TaskList/Task.js

@@ -59,7 +59,7 @@ var Task = function Task(_ref) {
 Task.propTypes = {
   task: _propTypes.default.shape({
     name: _propTypes.default.string.isRequired,
-    pages: _propTypes.default.shape([]).isRequired,
+    pages: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
     state: _propTypes.default.string,
     displayName: _propTypes.default.string
   }).isRequired,

package/dist/components/TaskList/TaskList.js

@@ -127,14 +127,14 @@ TaskList.propTypes = {
     text: _propTypes.default.string
   }),
   onTaskAction: _propTypes.default.func,
-  refTitle: _propTypes.default.string.isRequired,
-  refNumber: _propTypes.default.string.isRequired,
+  refTitle: _propTypes.default.string,
+  refNumber: _propTypes.default.string,
   sections: _propTypes.default.arrayOf(_propTypes.default.shape({
     name: _propTypes.default.string.isRequired,
     label: _propTypes.default.string,
     tasks: _propTypes.default.arrayOf(_propTypes.default.shape({
       name: _propTypes.default.string.isRequired,
-      pages: _propTypes.default.shape([]).isRequired,
+      pages: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
       state: _propTypes.default.string,
       displayName: _propTypes.default.string
     })).isRequired
@@ -149,7 +149,9 @@ TaskList.defaultProps = {
   id: '',
   incompleteTitle: DEFAULT_INCOMPLETE_TITLE,
   onTaskAction: undefined,
-  notes: ''
+  notes: {},
+  refTitle: undefined,
+  refNumber: undefined
 };
 var _default = TaskList;
 exports.default = _default;

package/dist/context/ValidationContext/ValidationContext.test.js

@@ -77,7 +77,7 @@ describe('context.ValidationContext', function () {
   })));
 });
 TestComponent.propTypes = {
-  customErrors: _propTypes.default.shape([])
+  customErrors: _propTypes.default.arrayOf(_propTypes.default.shape({}))
 };
 TestComponent.defaultProps = {
   customErrors: null

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

@@ -206,9 +206,13 @@ describe('utils', function () {
           }
         };
         var ON_ACTION = function ON_ACTION() {};
-        var _renderWithValidation = (0, _setupTests.renderWithValidation)((0, _getCYARowsForPage.default)(PAGE, ON_ACTION).map(function (row) {
-            return row.value;
-          })),
+        // rows do not have defined keys which means cannot pass them to render as an array,
+        // so just pass the single row instead of array containing single row
+        var cyaRow = (0, _getCYARowsForPage.default)(PAGE, ON_ACTION).map(function (row) {
+          return row.value;
+        });
+        expect(cyaRow.length).toEqual(1);
+        var _renderWithValidation = (0, _setupTests.renderWithValidation)(cyaRow[0]),
           container = _renderWithValidation.container;
         expect(container.childNodes.length).toEqual(4);
         var addressValues = container.childNodes;

package/dist/utils/Component/cleanAttributes.js

@@ -10,7 +10,7 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-var JSON_ONLY_PROPERTIES = ['source', 'use', 'show_when', 'options', 'additionalValidation', 'full_path', 'formData'];
+var JSON_ONLY_PROPERTIES = ['source', 'use', 'show_when', 'options', 'additionalValidation', 'full_path', 'fullPath', 'formData'];
 
 /**
  * This method removes and properties that are entirely specific to the JSON

package/dist/utils/Component/getComponent.js

@@ -22,8 +22,9 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 var LIST_CLASS = 'govuk-list';
 var BODY_CLASS = 'govuk-body';
+var INPUT_CLASS = 'govuk-input';
 
-/** 
+/**
  * Separate function for each component type for the sake of
  * code clarity - having the additional bits and pieces in the
  * switch statement increases the cyclomatic complexity and
@@ -85,7 +86,7 @@ var getDate = function getDate(config) {
   return /*#__PURE__*/_react.default.createElement(_copReactComponents.DateInput, attrs);
 };
 var getDetails = function getDetails(config) {
-  var attrs = (0, _cleanAttributes.default)(config);
+  var attrs = (0, _cleanAttributes.default)(config, ['tagName']);
   var html = getHTML(config);
   return /*#__PURE__*/_react.default.createElement(_copReactComponents.Details, attrs, html);
 };
@@ -111,9 +112,9 @@ var getInsetText = function getInsetText(config) {
 };
 var getList = function getList(config) {
   var _attrs$items;
-  var attrs = (0, _cleanAttributes.default)(config);
-  var tagName = attrs.ordered ? 'ol' : 'ul';
-  var bullet = attrs.ordered ? 'number' : 'bullet';
+  var attrs = (0, _cleanAttributes.default)(config, ['ordered']);
+  var tagName = config.ordered ? 'ol' : 'ul';
+  var bullet = config.ordered ? 'number' : 'bullet';
   var classes = _copReactComponents.Utils.classBuilder(LIST_CLASS, bullet);
   var content = (_attrs$items = attrs.items) === null || _attrs$items === void 0 ? void 0 : _attrs$items.map(function (item) {
     return "<li>".concat(item, "</li>");
@@ -158,7 +159,10 @@ var getTextArea = function getTextArea(config) {
 };
 var getTextInput = function getTextInput(config) {
   var attrs = (0, _cleanAttributes.default)(config);
-  return /*#__PURE__*/_react.default.createElement(_copReactComponents.TextInput, attrs);
+  var classes = _copReactComponents.Utils.classBuilder(INPUT_CLASS, attrs.fixedWidth ? [attrs.fixedWidth] : [], attrs.fluidWidth ? [attrs.fluidWidth] : undefined);
+  return /*#__PURE__*/_react.default.createElement(_copReactComponents.TextInput, _extends({}, attrs, {
+    className: classes()
+  }));
 };
 var getTime = function getTime(config) {
   var attrs = (0, _cleanAttributes.default)(config);

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

@@ -34,18 +34,20 @@ describe('utils.Component.get', function () {
       type: _models.ComponentTypes.DETAILS,
       content: CONTENT,
       summary: SUMMARY,
+      tagName: 'div',
       'data-testid': ID
     };
     var _render2 = (0, _react.render)((0, _getComponent.default)(COMPONENT)),
       container = _render2.container;
     var details = container.querySelector('details');
     expect(details.classList).toContain('hods-details');
-    expect(details.childNodes[1].childNodes[0].childNodes[0].textContent).toEqual('this is the content');
-    expect(details.childNodes[1].childNodes[0].childNodes[0].tagName).toEqual('P');
-    expect(details.childNodes[1].childNodes[0].childNodes[1].childNodes[0].textContent).toEqual('one');
-    expect(details.childNodes[1].childNodes[0].childNodes[1].childNodes[1].textContent).toEqual('two');
-    expect(details.childNodes[1].childNodes[0].childNodes[1].tagName).toEqual('OL');
-    expect(details.childNodes[1].childNodes[0].childNodes[2].textContent).toEqual('second section of content');
-    expect(details.childNodes[1].childNodes[0].childNodes[2].tagName).toEqual('P');
+    var content = details.childNodes[1].childNodes[0].childNodes;
+    expect(content[0].textContent).toEqual('this is the content');
+    expect(content[0].tagName).toEqual('P');
+    expect(content[1].childNodes[0].textContent).toEqual('one');
+    expect(content[1].childNodes[1].textContent).toEqual('two');
+    expect(content[1].tagName).toEqual('OL');
+    expect(content[2].textContent).toEqual('second section of content');
+    expect(content[2].tagName).toEqual('P');
   });
 });

package/dist/utils/Component/wrapInFormGroup.js

@@ -10,7 +10,7 @@ var _cleanAttributes = _interopRequireDefault(require("./cleanAttributes"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 var wrapInFormGroup = function wrapInFormGroup(config, children) {
-  var attrs = (0, _cleanAttributes.default)(config, ['fieldId', 'displayMenu']);
+  var attrs = (0, _cleanAttributes.default)(config, ['fieldId', 'displayMenu', 'showCharacterCount', 'readonly']);
   return /*#__PURE__*/_react.default.createElement(_copReactComponents.FormGroup, _extends({}, attrs, {
     onChange: null
   }), children);

package/package.json

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