@ukhomeoffice/cop-react-form-renderer 6.6.1 → 6.11.1

package/dist/components/TaskList/TaskList.js

@@ -12,7 +12,7 @@ var _models = require("../../models");
 var _Task = _interopRequireDefault(require("./Task"));
 var _showComponent = _interopRequireDefault(require("../../utils/Component/showComponent"));
 require("./TaskList.scss");
-var _excluded = ["id", "refTitle", "refNumber", "notes", "incompleteTitle", "sections", "fieldId", "onTaskAction", "classBlock", "classModifiers", "className", "formData"];
+var _excluded = ["id", "refTitle", "refNumber", "notes", "incompleteTitle", "showCompletionOverview", "sections", "fieldId", "onTaskAction", "classBlock", "classModifiers", "className", "formData", "annotations"];
 /* eslint-disable import/no-duplicates */
 // Global Imports
 // Local Imports
@@ -36,6 +36,7 @@ var TaskList = function TaskList(_ref) {
     refNumber = _ref.refNumber,
     notes = _ref.notes,
     incompleteTitle = _ref.incompleteTitle,
+    showCompletionOverview = _ref.showCompletionOverview,
     sections = _ref.sections,
     fieldId = _ref.fieldId,
     onTaskAction = _ref.onTaskAction,
@@ -43,6 +44,7 @@ var TaskList = function TaskList(_ref) {
     classModifiers = _ref.classModifiers,
     className = _ref.className,
     formData = _ref.formData,
+    annotations = _ref.annotations,
     attrs = _objectWithoutProperties(_ref, _excluded);
   var classes = _copReactComponents.Utils.classBuilder(classBlock, classModifiers, className);
   var cleanedHtmlAttrs = _copReactComponents.Utils.cleanHtmlAttributes(attrs);
@@ -78,11 +80,19 @@ var TaskList = function TaskList(_ref) {
     className: "tasklist-summary"
   }, "".concat(refTitle))), /*#__PURE__*/_react.default.createElement("p", {
     className: "govuk-body govuk-!-font-weight-regular"
-  }, "".concat(refNumber))), totalSections !== completeSections && /*#__PURE__*/_react.default.createElement("p", {
+  }, "".concat(refNumber))), annotations.length > 0 && annotations.map(function (annotation) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classes('annotation')
+    }, /*#__PURE__*/_react.default.createElement("p", {
+      className: "".concat(classes('annotation-key'), " govuk-body")
+    }, _copReactComponents.Utils.interpolateString(annotation.key, formData)), /*#__PURE__*/_react.default.createElement("p", {
+      className: "".concat(classes('annotation-value'), " govuk-body")
+    }, _copReactComponents.Utils.interpolateString(annotation.value, formData)));
+  }), showCompletionOverview && totalSections !== completeSections && /*#__PURE__*/_react.default.createElement("p", {
     className: "govuk-body govuk-!-margin-bottom-0"
   }, /*#__PURE__*/_react.default.createElement("strong", {
     className: "tasklist-summary"
-  }, incompleteTitle)), /*#__PURE__*/_react.default.createElement("p", {
+  }, incompleteTitle)), showCompletionOverview && /*#__PURE__*/_react.default.createElement("p", {
     className: "govuk-body govuk-!-margin-bottom-7"
   }, "You have completed ".concat(completeSections, " of ").concat(totalSections, " sections")), notesTitle && notesText && (0, _showComponent.default)(notes, formData) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
     className: "govuk-body govuk-!-margin-bottom-0"
@@ -121,6 +131,7 @@ TaskList.propTypes = {
   formData: _propTypes.default.shape({}),
   id: _propTypes.default.string,
   incompleteTitle: _propTypes.default.string,
+  showCompletionOverview: _propTypes.default.bool,
   notes: _propTypes.default.shape({
     title: _propTypes.default.string,
     text: _propTypes.default.string
@@ -139,7 +150,11 @@ TaskList.propTypes = {
       firstPage: _propTypes.default.string,
       alwaysShowFirstPage: _propTypes.default.bool
     })).isRequired
-  })).isRequired
+  })).isRequired,
+  annotations: _propTypes.default.arrayOf(_propTypes.default.shape({
+    key: _propTypes.default.string,
+    value: _propTypes.default.string
+  }))
 };
 TaskList.defaultProps = {
   classBlock: DEFAULT_CLASS,
@@ -149,9 +164,11 @@ TaskList.defaultProps = {
   formData: {},
   id: '',
   incompleteTitle: DEFAULT_INCOMPLETE_TITLE,
+  showCompletionOverview: true,
   notes: {},
   onTaskAction: undefined,
   refNumber: undefined,
-  refTitle: undefined
+  refTitle: undefined,
+  annotations: []
 };
 var _default = exports.default = TaskList;

package/dist/components/TaskList/TaskList.scss

@@ -58,6 +58,30 @@
   }
 }
 
+.hods-task-list__annotation {
+  display: flex;
+  flex-flow: row wrap;
+  margin-bottom: govuk-spacing(2);
+
+  .hods-task-list__annotation-key {
+    font-weight: bold;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-right: govuk-spacing(1)
+  }
+
+  .hods-task-list__annotation-value {
+    font-weight: normal;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+}
+
+.hods-task-list__annotation:last-of-type {
+  margin-bottom: govuk-spacing(7)
+}
+
 .hods-task-list__task-name {
   display: block;
   cursor: auto;

package/dist/components/TaskList/TaskList.test.js

@@ -101,6 +101,150 @@ describe('components', function () {
       expect(subSectionTwoLabel.textContent).toEqual('This is the label for your extra tasks');
       expect(subSectionTwoList.childNodes.length).toEqual(3);
     });
+    it('should not render the incomplete title and message when showCompletionOverview is false', function () {
+      var COP_REF = '123';
+      var REF_TITLE = 'COP reference number';
+      var sections = [{
+        name: 'These are your tasks',
+        label: 'This is the label for your first tasks',
+        tasks: [{
+          name: 'Nice task',
+          state: 'complete',
+          pages: ['pageOne']
+        }, {
+          name: 'Ok task',
+          state: 'inProgress',
+          pages: ['pageTwo']
+        }, {
+          name: 'Terrible task',
+          state: 'notStarted',
+          pages: ['pageThree']
+        }]
+      }, {
+        name: 'These are your extra bonus tasks',
+        label: 'This is the label for your extra tasks',
+        tasks: [{
+          name: 'Nice task',
+          state: 'complete',
+          pages: ['pageFour']
+        }, {
+          name: 'Ok task',
+          state: 'cannotStartYet',
+          pages: ['pageFive']
+        }, {
+          name: 'Terrible task',
+          state: 'cannotStartYet',
+          pages: ['pageSix']
+        }]
+      }];
+      var _render2 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
+          refNumber: COP_REF,
+          refTitle: REF_TITLE,
+          sections: sections,
+          showCompletionOverview: false
+        })),
+        container = _render2.container;
+      var childNodes = container.childNodes;
+      expect(childNodes.length).toEqual(1);
+      expect(childNodes[0].childNodes.length).toEqual(8); // Without incomplete heading and message.
+
+      var _childNodes$0$childNo2 = _slicedToArray(childNodes[0].childNodes, 8),
+        referenceHeading = _childNodes$0$childNo2[0],
+        referenceNumber = _childNodes$0$childNo2[1],
+        subSectionOneHeading = _childNodes$0$childNo2[2],
+        subSectionOneLabel = _childNodes$0$childNo2[3],
+        subSectionOneList = _childNodes$0$childNo2[4],
+        subSectionTwoHeading = _childNodes$0$childNo2[5],
+        subSectionTwoLabel = _childNodes$0$childNo2[6],
+        subSectionTwoList = _childNodes$0$childNo2[7];
+      expect(referenceHeading).toMatchObject({
+        tagName: 'P',
+        textContent: 'COP reference number'
+      });
+      expect(referenceNumber).toMatchObject({
+        tagName: 'P',
+        textContent: '123'
+      });
+      expect(subSectionOneHeading).toMatchObject({
+        tagName: 'H2',
+        textContent: '1. These are your tasks'
+      });
+      expect(subSectionOneLabel.textContent).toEqual('This is the label for your first tasks');
+      expect(subSectionOneList.childNodes.length).toEqual(3);
+      expect(subSectionTwoHeading).toMatchObject({
+        tagName: 'H2',
+        textContent: '2. These are your extra bonus tasks'
+      });
+      expect(subSectionTwoLabel.textContent).toEqual('This is the label for your extra tasks');
+      expect(subSectionTwoList.childNodes.length).toEqual(3);
+    });
+    it('should render any provided annotations', function () {
+      var COP_REF = '123';
+      var REF_TITLE = 'COP reference number';
+      var sections = [{
+        name: 'These are your tasks',
+        label: 'This is the label for your first tasks',
+        tasks: [{
+          name: 'Nice task',
+          state: 'complete',
+          pages: ['pageOne']
+        }, {
+          name: 'Ok task',
+          state: 'inProgress',
+          pages: ['pageTwo']
+        }, {
+          name: 'Terrible task',
+          state: 'notStarted',
+          pages: ['pageThree']
+        }]
+      }, {
+        name: 'These are your extra bonus tasks',
+        label: 'This is the label for your extra tasks',
+        tasks: [{
+          name: 'Nice task',
+          state: 'complete',
+          pages: ['pageFour']
+        }, {
+          name: 'Ok task',
+          state: 'cannotStartYet',
+          pages: ['pageFive']
+        }, {
+          name: 'Terrible task',
+          state: 'cannotStartYet',
+          pages: ['pageSix']
+        }]
+      }];
+      var FORM_DATA = {
+        port: {
+          name: 'Heathrow Airport'
+        }
+      };
+      var ANNOTATIONS = [{
+        key: 'Port',
+        // eslint-disable-next-line no-template-curly-in-string
+        value: '${port.name}'
+      }];
+      var _render3 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
+          refNumber: COP_REF,
+          refTitle: REF_TITLE,
+          sections: sections,
+          annotations: ANNOTATIONS,
+          formData: FORM_DATA
+        })),
+        container = _render3.container;
+      var childNodes = container.childNodes;
+      expect(childNodes.length).toEqual(1);
+      expect(childNodes[0].childNodes.length).toEqual(11);
+      var annotation = childNodes[0].childNodes[2];
+      expect(annotation.children[0]).toMatchObject({
+        tagName: 'P',
+        textContent: 'Port'
+      });
+      expect(annotation.childNodes[1]).toMatchObject({
+        tagName: 'P',
+        textContent: 'Heathrow Airport'
+      });
+    });
     it('should not show incomplete title if form is complete', function () {
       var COP_REF = '123';
       var REF_TITLE = 'COP reference number';
@@ -135,18 +279,18 @@ describe('components', function () {
           pages: ['pageSix']
         }]
       }];
-      var _render2 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
+      var _render4 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
           refNumber: COP_REF,
           refTitle: REF_TITLE,
           sections: sections
         })),
-        container = _render2.container;
+        container = _render4.container;
       var childNodes = container.childNodes;
       expect(childNodes[0].childNodes.length).toEqual(7);
-      var _childNodes$0$childNo2 = _slicedToArray(childNodes[0].childNodes, 3),
-        referenceHeading = _childNodes$0$childNo2[0],
-        referenceNumber = _childNodes$0$childNo2[1],
-        numComplete = _childNodes$0$childNo2[2];
+      var _childNodes$0$childNo3 = _slicedToArray(childNodes[0].childNodes, 3),
+        referenceHeading = _childNodes$0$childNo3[0],
+        referenceNumber = _childNodes$0$childNo3[1],
+        numComplete = _childNodes$0$childNo3[2];
       expect(referenceHeading).toMatchObject({
         tagName: 'P',
         textContent: 'COP reference number'
@@ -179,12 +323,12 @@ describe('components', function () {
           pages: ['pageThree']
         }]
       }];
-      var _render3 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
+      var _render5 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
           refNumber: COP_REF,
           refTitle: REF_TITLE,
           sections: sections
         })),
-        container = _render3.container;
+        container = _render5.container;
       var childNodes = container.childNodes;
       var subSectionOne = childNodes[0].childNodes[4];
       expect(subSectionOne.childNodes[0].textContent).toEqual('');
@@ -223,11 +367,11 @@ describe('components', function () {
           pages: ['pageSix']
         }]
       }];
-      var _render4 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
+      var _render6 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
           refNumber: COP_REF,
           sections: sections
         })),
-        container = _render4.container;
+        container = _render6.container;
       var childNodes = container.childNodes;
       expect(childNodes.length).toEqual(1);
       expect(childNodes[0].childNodes.length).toEqual(6);
@@ -273,12 +417,12 @@ describe('components', function () {
           pages: ['pageSix']
         }]
       }];
-      var _render5 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
+      var _render7 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
           refNumber: COP_REF,
           sections: sections,
           incompleteTitle: INCOMPLETE_TITLE
         })),
-        container = _render5.container;
+        container = _render7.container;
       var childNodes = container.childNodes;
       // The first child is now the incomplete text.
       var incompleteForm = childNodes[0].childNodes[0];
@@ -319,12 +463,12 @@ describe('components', function () {
           pages: ['pageSix']
         }]
       }];
-      var _render6 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
+      var _render8 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
           refNumber: COP_REF,
           sections: sections,
           incompleteTitle: INCOMPLETE_TITLE
         })),
-        container = _render6.container;
+        container = _render8.container;
       var childNodes = container.childNodes;
       expect(childNodes.length).toEqual(1);
       var children = childNodes[0].childNodes;
@@ -357,13 +501,13 @@ describe('components', function () {
         pages: ['pageThree']
       }]
     }];
-    var _render7 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
+    var _render9 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_TaskList.default, {
         refNumber: COP_REF,
         refTitle: REF_TITLE,
         sections: sections,
         onTaskAction: ON_CLICK
       })),
-      container = _render7.container;
+      container = _render9.container;
     var taskList = container.childNodes[0].childNodes[5].childNodes;
     var firstTask = taskList[0].childNodes[0].childNodes[0];
     var secondTask = taskList[1].childNodes[0].childNodes[0];

package/dist/utils/CheckYourAnswers/getCYARowsForCollectionPage.js

@@ -56,7 +56,7 @@ var getTitleRowForItem = function getTitleRowForItem(page, item, pageId, labelCo
     size: page.collection.titleSize || 's'
   };
 };
-var getHeadingRow = function getHeadingRow(config, pageId, labelCount) {
+var getHeadingRow = function getHeadingRow(config, pageId, labelCount, changeAction, item) {
   if (config.text === '') {
     return null;
   }
@@ -64,19 +64,27 @@ var getHeadingRow = function getHeadingRow(config, pageId, labelCount) {
     pageId: pageId,
     fieldId: "heading".concat(labelCount),
     full_path: "heading".concat(labelCount),
-    key: config.text,
-    type: 'heading',
-    size: config.size || 's'
+    key: _copReactComponents.Utils.interpolateString(config.text, item),
+    type: changeAction === null ? 'heading' : 'headingWithAction',
+    size: config.size || 's',
+    action: changeAction === null ? null : {
+      onAction: changeAction,
+      label: 'Change'
+    }
   };
 };
-var getCollectionNameHeading = function getCollectionNameHeading(page, titleName) {
+var getCollectionNameHeading = function getCollectionNameHeading(page, titleName, config, changeAction) {
   return {
     pageId: page.id,
     fieldId: "".concat(page.collection.name, "Title"),
     full_path: "".concat(page.collection.name, "Title"),
-    key: titleName.charAt(0).toUpperCase() + titleName.slice(1),
-    type: 'heading',
-    size: 'm'
+    key: (config === null || config === void 0 ? void 0 : config.text) || titleName.charAt(0).toUpperCase() + titleName.slice(1),
+    type: changeAction == null ? 'heading' : 'headingWithAction',
+    size: (config === null || config === void 0 ? void 0 : config.size) || 'm',
+    action: changeAction === null ? null : {
+      onAction: changeAction,
+      label: 'Change'
+    }
   };
 };
 var getActionRows = function getActionRows(page, item, onAction, labelCount) {
@@ -152,13 +160,16 @@ var getCYARowsForChildPages = function getCYARowsForChildPages(childPages, item,
       // to be done here as the show_when checks could rely upon item-level
       // data.
       if ((0, _showFormPageCYA.default)(childPage, _objectSpread(_objectSpread({}, childPage.formData), item))) {
+        var changeAction = getChangeActionForPage(childPage, onAction, activeIds);
         if (childPage.collection.heading) {
-          var headingRow = getHeadingRow(childPage.collection.heading, childPage.id, labelCount);
+          var headingAction = childPage.collection.heading.changeLink ? changeAction : null;
+          var headingRow = getHeadingRow(childPage.collection.heading, childPage.id, labelCount, headingAction, item);
           rows = rows.concat(headingRow);
         }
         var container = getContainerForPage(childPage, item, labelCount, fullPath);
-        var rowChangeAction = getChangeActionForPage(childPage, onAction, activeIds);
-        var containerRows = (0, _getCYARowsForContainer.default)(childPage, container, _objectSpread(_objectSpread({}, childPage.formData), item), rowChangeAction, fnOverride);
+        var containerRows = (0, _getCYARowsForContainer.default)(_objectSpread(_objectSpread({}, childPage), {}, {
+          formData: _objectSpread(_objectSpread({}, childPage.formData), item)
+        }), container, _objectSpread(_objectSpread({}, childPage.formData), item), changeAction, fnOverride);
         rows = rows.concat(containerRows);
       }
     }
@@ -186,7 +197,11 @@ var getCYARowsForCollectionPage = function getCYARowsForCollectionPage(page, onA
   }
   var rows = [];
   if (!page.collection.hideNameFromCYA) {
-    rows.push(getCollectionNameHeading(page, collectionName));
+    var _page$collection$coll;
+    var headingChangeAction = (_page$collection$coll = page.collection.collectionHeading) !== null && _page$collection$coll !== void 0 && _page$collection$coll.changeLinkPage ? getChangeActionForPage({
+      id: page.collection.collectionHeading.changeLinkPage
+    }, onAction, activeIds) : null;
+    rows.push(getCollectionNameHeading(page, collectionName, page.collection.collectionHeading, headingChangeAction));
   }
   var itemIndex = 0;
   var result = Array.isArray(page.collection.onlyShowActiveEntryOnCYA) ? (0, _meetsAllConditions.default)(page.collection.onlyShowActiveEntryOnCYA, data) : page.collection.onlyShowActiveEntryOnCYA;

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

@@ -415,6 +415,75 @@ describe('utils.CheckYourAnswers.getCYARowsForCollectionPage', function () {
       key: 'Test text'
     });
   });
+  it('should allow interpolation of custom headings', function () {
+    var FORM_DATA = {
+      collection: [{
+        id: '01',
+        testText: 'value'
+      }]
+    };
+    var PAGE = _objectSpread(_objectSpread({}, MASTER_PAGE), {}, {
+      formData: FORM_DATA,
+      childPages: [_objectSpread(_objectSpread({}, PAGES[0]), {}, {
+        collection: _objectSpread(_objectSpread({}, PAGES[0].collection), {}, {
+          // eslint-disable-next-line no-template-curly-in-string
+          heading: {
+            size: 'm',
+            text: 'interpolated text: ${testText}'
+          }
+        })
+      })]
+    });
+    var ROWS = (0, _getCYARowsForCollectionPage.default)(PAGE, null, null, FORM_DATA);
+    expect(ROWS.length).toEqual(7);
+    expect(ROWS[0]).toMatchObject({
+      type: 'heading',
+      key: 'Collection'
+    });
+    expect(ROWS[1]).toMatchObject({
+      type: 'heading',
+      key: 'Collection entry 1'
+    });
+    expect(ROWS[2].action.label).toEqual('Change');
+    expect(ROWS[3].action.label).toEqual('custom remove label');
+    expect(ROWS[4].action.label).toEqual('custom change label');
+    expect(ROWS[5]).toMatchObject({
+      type: 'heading',
+      key: 'interpolated text: value',
+      size: 'm'
+    });
+    expect(ROWS[6]).toMatchObject({
+      value: 'value',
+      key: 'Test text'
+    });
+  });
+  it('should alow configuration of collection name headings', function () {
+    var FORM_DATA = {
+      collection: [{
+        id: '01',
+        testText: 'value'
+      }]
+    };
+    var PAGE = _objectSpread(_objectSpread({}, MASTER_PAGE), {}, {
+      formData: FORM_DATA,
+      collection: _objectSpread(_objectSpread({}, MASTER_PAGE.collection), {}, {
+        collectionHeading: {
+          text: 'Custom collection heading',
+          size: 'm',
+          changeLinkPage: PAGES[0].id
+        }
+      }),
+      childPages: [_objectSpread(_objectSpread({}, PAGES[0]), {}, {
+        collection: _objectSpread({}, PAGES[0].collection)
+      })]
+    });
+    var ROWS = (0, _getCYARowsForCollectionPage.default)(PAGE, null, null, FORM_DATA);
+    expect(ROWS.length).toEqual(6);
+    expect(ROWS[0]).toMatchObject({
+      type: 'headingWithAction',
+      key: 'Custom collection heading'
+    });
+  });
   it('should default to a title size of small if one is not specified', function () {
     var FORM_DATA = {
       collection: [{
@@ -612,4 +681,80 @@ describe('utils.CheckYourAnswers.getCYARowsForCollectionPage', function () {
       key: 'Test text'
     });
   });
+  it('should create rows for the Collection component correctly', function () {
+    var FORM_DATA = {
+      collection: [{
+        id: '01',
+        testCollection: [{
+          testText: 'collection value'
+        }],
+        otherComp: 'one'
+      }]
+    };
+    var COLLECTION_COMP = {
+      id: 'testCollection',
+      fieldId: 'testCollection',
+      label: 'Test collection',
+      type: 'collection',
+      item: [{
+        id: 'testText',
+        fieldId: 'testText',
+        type: 'text',
+        label: 'Some nice text'
+      }],
+      show_when: [{
+        field: 'otherComp',
+        op: 'eq',
+        value: 'one'
+      }]
+    };
+    var MASTER_PAGE_WITH_COLLECTION = {
+      id: 'page1',
+      collection: {
+        name: 'collection',
+        labels: {
+          // eslint-disable-next-line no-template-curly-in-string
+          item: 'Collection entry ${index}'
+        },
+        actions: [{
+          type: 'change'
+        }, {
+          type: 'remove',
+          label: 'custom remove label'
+        }, {
+          type: 'change',
+          label: 'custom change label',
+          page: 'confirmDelete'
+        }]
+      },
+      childPages: [{
+        id: 'page1',
+        collection: {
+          name: 'collection'
+        },
+        components: [COLLECTION_COMP]
+      }],
+      formData: FORM_DATA
+    };
+    var ROWS = (0, _getCYARowsForCollectionPage.default)(MASTER_PAGE_WITH_COLLECTION, null, null, FORM_DATA);
+    expect(ROWS.length).toEqual(7); // Title row + component row for each item
+    expect(ROWS[0]).toMatchObject({
+      type: 'heading',
+      key: 'Collection'
+    });
+    expect(ROWS[1]).toMatchObject({
+      type: 'heading',
+      key: 'Collection entry 1'
+    });
+    expect(ROWS[2].action.label).toEqual('Change');
+    expect(ROWS[3].action.label).toEqual('custom remove label');
+    expect(ROWS[4].action.label).toEqual('custom change label');
+    expect(ROWS[5]).toMatchObject({
+      key: 'Item 1'
+    });
+    expect(ROWS[6]).toMatchObject({
+      value: 'collection value',
+      key: 'Some nice text'
+    });
+  });
 });

package/dist/utils/CheckYourAnswers/{getComponentRowForCYA.js → getSummaryListRowForDetails.js}

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Answer = _interopRequireDefault(require("../../components/CheckYourAnswers/Answer"));
 var _SummaryListRow = _interopRequireDefault(require("../../components/SummaryList/SummaryListRow"));
+var _SummaryListTitleRow = _interopRequireDefault(require("../../components/SummaryList/SummaryListTitleRow"));
 var _getCYARow = _interopRequireDefault(require("./getCYARow"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
@@ -15,23 +16,27 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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; }
 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); } // Local imports
-var getComponentRowForCYA = function getComponentRowForCYA(page, component, customClasses, entryData) {
+var getSummaryListRowForDetails = function getSummaryListRowForDetails(page, component, customClasses, entryData, optionalFieldPlaceholder) {
   var modifiedPage = _objectSpread(_objectSpread({}, page), {}, {
     formData: _objectSpread(_objectSpread({}, page.formData), entryData)
   });
   var row = (0, _getCYARow.default)(modifiedPage, component);
-  return /*#__PURE__*/_react.default.createElement(_SummaryListRow.default, {
+  return component.type === 'title' ? /*#__PURE__*/_react.default.createElement(_SummaryListTitleRow.default, {
+    title: component.key,
+    classes: customClasses
+  }) : /*#__PURE__*/_react.default.createElement(_SummaryListRow.default, {
     key: "".concat(row.fieldId),
     row: {
       key: row.key,
       value: /*#__PURE__*/_react.default.createElement(_Answer.default, {
-        value: row.value,
+        value: row.value || component.value,
         component: row.component,
-        formData: modifiedPage.formData
+        formData: modifiedPage.formData,
+        placeholder: optionalFieldPlaceholder
       }),
       required: row.required
     },
     classes: customClasses
   });
 };
-var _default = exports.default = getComponentRowForCYA;
+var _default = exports.default = getSummaryListRowForDetails;