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

package/dist/components/CollectionSummary/CollectionSummary.test.js

@@ -73,6 +73,52 @@ describe('components.CollectionSummary.CollectionSummary', function () {
     expect(summary.children[0].id).toEqual("".concat(CONFIG.fieldId, ".summaryCard").concat(FORM_DATA.testCollection[0].id));
     expect(summary.children[1].id).toEqual("".concat(CONFIG.fieldId, ".summaryCard").concat(FORM_DATA.testCollection[1].id));
   });
+  it('should focus on the most recently duplicated item', function () {
+    var customConfig = {
+      id: 'testSummary',
+      fieldId: 'testSummary',
+      collectionName: 'testCollection',
+      card: {
+        title: 'Title',
+        deleteAction: {
+          label: 'Delete'
+        },
+        changeAction: {
+          label: 'Change label',
+          page: 'testPage',
+          aria_label: [{
+            text: 'testText'
+          }]
+        }
+      },
+      quickEdit: true,
+      focusOn: true
+    };
+    var customFormData = {
+      testCollectionActiveId: '001',
+      testCollection: [{
+        id: '000',
+        testText: 'value',
+        isDuplicate: true
+      }, {
+        id: '001',
+        isDuplicate: true
+      }]
+    };
+    var _renderWithValidation2 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
+        config: customConfig,
+        formData: customFormData,
+        onAction: ON_ACTION
+      })),
+      container = _renderWithValidation2.container;
+    var changeButtons = container.querySelectorAll('[data-testid="change-button"]');
+    var firstDuplicatedItem = changeButtons[0];
+    var lastDuplicatedItem = changeButtons[changeButtons.length - 1];
+    expect(lastDuplicatedItem).toBeDefined();
+    expect(document.activeElement).toEqual(lastDuplicatedItem);
+    expect(lastDuplicatedItem.id).toEqual('testSummary.summaryCard001.changeButton');
+    expect(document.activeElement).not.toEqual(firstDuplicatedItem);
+  });
   it('should correctly queue errors found when validating entries', function () {
     var ErrorCheckComponent = function ErrorCheckComponent() {
       var _useValidation = (0, _hooks.useValidation)(),
@@ -81,24 +127,24 @@ describe('components.CollectionSummary.CollectionSummary', function () {
         return e.error;
       }));
     };
-    var _renderWithValidation2 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ErrorCheckComponent, null), /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
+    var _renderWithValidation3 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ErrorCheckComponent, null), /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
         config: CONFIG,
         formData: FORM_DATA,
         onAction: ON_ACTION,
         pages: PAGES
       }))),
-      container = _renderWithValidation2.container;
+      container = _renderWithValidation3.container;
     var errorChecker = container.children[0];
     expect(errorChecker.textContent).toContain('queuedErrors is an array of length 1');
     expect(errorChecker.textContent).toContain('testText is required');
   });
   it('should render a confirmation when a SummaryCard\'s delete button is pressed', function () {
-    var _renderWithValidation3 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
+    var _renderWithValidation4 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
         config: CONFIG,
         formData: FORM_DATA,
         onAction: ON_ACTION
       })),
-      container = _renderWithValidation3.container;
+      container = _renderWithValidation4.container;
     var summary = checkSetup(container);
     expect(summary.children.length).toEqual(2);
     var card = summary.children[0];
@@ -122,12 +168,12 @@ describe('components.CollectionSummary.CollectionSummary', function () {
           title: 'Title'
         }
       };
-      var _renderWithValidation4 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
+      var _renderWithValidation5 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
           config: CONFIG_WITH_BUTTON,
           formData: FORM_DATA,
           onAction: ON_ACTION
         })),
-        container = _renderWithValidation4.container;
+        container = _renderWithValidation5.container;
       var summary = checkSetup(container);
       expect(summary.children.length).toEqual(3); // The button and a card for each item.
       expect(summary.children[0].id).toEqual("".concat(CONFIG_WITH_BUTTON.fieldId, ".addButton"));
@@ -146,12 +192,12 @@ describe('components.CollectionSummary.CollectionSummary', function () {
           title: 'Title'
         }
       };
-      var _renderWithValidation5 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
+      var _renderWithValidation6 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
           config: CONFIG_WITH_BUTTON,
           formData: FORM_DATA,
           onAction: ON_ACTION
         })),
-        container = _renderWithValidation5.container;
+        container = _renderWithValidation6.container;
       var summary = checkSetup(container);
       expect(summary.children.length).toEqual(3); // The button and a card for each item.
       expect(summary.children[0].id).toEqual("".concat(CONFIG_WITH_BUTTON.fieldId, ".addButton"));
@@ -159,12 +205,12 @@ describe('components.CollectionSummary.CollectionSummary', function () {
       expect(summary.children[0].tagName).toEqual('BUTTON');
     });
     it('should apply the expected class name to the summary card when delete button is pressed', function () {
-      var _renderWithValidation6 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
+      var _renderWithValidation7 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
           config: CONFIG,
           formData: FORM_DATA,
           onAction: ON_ACTION
         })),
-        container = _renderWithValidation6.container;
+        container = _renderWithValidation7.container;
       var summary = checkSetup(container);
       expect(summary.children.length).toEqual(2);
       var card = summary.children[0];
@@ -175,12 +221,12 @@ describe('components.CollectionSummary.CollectionSummary', function () {
       expect(card.className).toContain('deleting-summary-card');
     });
     it('should focus on the delete button in the confirmation panel', function () {
-      var _renderWithValidation7 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
+      var _renderWithValidation8 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
           config: CONFIG,
           formData: FORM_DATA,
           onAction: ON_ACTION
         })),
-        container = _renderWithValidation7.container;
+        container = _renderWithValidation8.container;
       var summary = checkSetup(container);
       expect(summary.children.length).toEqual(2);
       var card = summary.children[0];
@@ -191,12 +237,12 @@ describe('components.CollectionSummary.CollectionSummary', function () {
       expect(document.activeElement).toEqual(confirmButton);
     });
     it('should have the role "alert" in the confirmation panel', function () {
-      var _renderWithValidation8 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
+      var _renderWithValidation9 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
           config: CONFIG,
           formData: FORM_DATA,
           onAction: ON_ACTION
         })),
-        container = _renderWithValidation8.container;
+        container = _renderWithValidation9.container;
       var summary = checkSetup(container);
       expect(summary.children.length).toEqual(2);
       var card = summary.children[0];
@@ -216,14 +262,14 @@ describe('components.CollectionSummary.CollectionSummary', function () {
           displayFields: ['testText']
         }
       });
-      var _renderWithValidation9 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
+      var _renderWithValidation10 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
           config: listViewConfig,
           formData: FORM_DATA,
           onAction: ON_ACTION,
           pages: PAGES
         })),
-        container = _renderWithValidation9.container,
-        getByText = _renderWithValidation9.getByText;
+        container = _renderWithValidation10.container,
+        getByText = _renderWithValidation10.getByText;
       var summary = checkSetup(container);
       expect(summary.children.length).toEqual(2);
       var card = summary.children[0];
@@ -248,14 +294,14 @@ describe('components.CollectionSummary.CollectionSummary', function () {
           message: 'Test confirmation message with index number ${index}'
         }
       });
-      var _renderWithValidation10 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
+      var _renderWithValidation11 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
           config: listViewConfig,
           formData: FORM_DATA,
           onAction: ON_ACTION,
           pages: PAGES
         })),
-        container = _renderWithValidation10.container,
-        getByText = _renderWithValidation10.getByText;
+        container = _renderWithValidation11.container,
+        getByText = _renderWithValidation11.getByText;
       var summary = checkSetup(container);
       expect(summary.children.length).toEqual(2);
       var card = summary.children[0];

package/dist/components/CollectionSummary/RenderListView.js

@@ -8,7 +8,7 @@ var _copReactComponents = require("@ukhomeoffice/cop-react-components");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 var _utils = _interopRequireDefault(require("../../utils"));
-var _getComponentRowForCYA = _interopRequireDefault(require("../../utils/CheckYourAnswers/getComponentRowForCYA"));
+var _getSummaryListRowForDetails = _interopRequireDefault(require("../../utils/CheckYourAnswers/getSummaryListRowForDetails"));
 var _Condition = _interopRequireDefault(require("../../utils/Condition"));
 require("./RenderListView.scss");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -95,7 +95,7 @@ var RenderListView = function RenderListView(_ref) {
           if (!component) {
             return null;
           }
-          return (0, _getComponentRowForCYA.default)(childPage, component, listClass, entryData);
+          return (0, _getSummaryListRowForDetails.default)(childPage, component, listClass, entryData);
         });
       }
       return null;

package/dist/components/CollectionSummary/SummaryCard.js

@@ -47,7 +47,7 @@ var DEFAULT_DUPLICATE_BUTTON_LABEL = exports.DEFAULT_DUPLICATE_BUTTON_LABEL = 'D
 var DEFAULT_DETAILS_TITLE = exports.DEFAULT_DETAILS_TITLE = 'Full details';
 var DEFAULT_CHANGE_BUTTON_CLASS = exports.DEFAULT_CHANGE_BUTTON_CLASS = 'secondary';
 var SummaryCard = function SummaryCard(_ref) {
-  var _config$changeAction2, _config$changeAction3, _config$changeAction4, _config$deleteAction, _config$deleteAction2, _config$duplicateActi, _config$duplicateActi2;
+  var _config$changeAction2, _config$changeAction3, _config$changeAction4, _config$deleteAction, _config$deleteAction2, _config$duplicateActi, _config$duplicateActi2, _config$fullDetails;
   var id = _ref.id,
     entryData = _ref.entryData,
     config = _ref.config,
@@ -178,6 +178,7 @@ var SummaryCard = function SummaryCard(_ref) {
   }, _utils.default.FormPage.getConditionalText(config.details, entryData))), /*#__PURE__*/_react.default.createElement("div", {
     className: classes('header-actions')
   }, config.quickEdit && /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
+    "data-testid": "quickedit-button",
     id: "".concat(id, ".quickEditButton"),
     onClick: function onClick() {
       return setQuickEdit(function (prevState) {
@@ -186,16 +187,19 @@ var SummaryCard = function SummaryCard(_ref) {
     },
     classModifiers: "primary",
     disabled: quickEdit,
-    name: "QuickEdit"
+    name: "QuickEdit",
+    autoFocus: config.focusOn
   }, DEFAULT_EDIT_LABEL), config.changeAction && typeof onFullEdit === 'function' && /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
     id: "".concat(id, ".changeButton"),
+    "data-testid": "change-button",
     onClick: function onClick() {
       var _config$changeAction;
       return onFullEdit((_config$changeAction = config.changeAction) === null || _config$changeAction === void 0 ? void 0 : _config$changeAction.page, entryData.id);
     },
     classModifiers: ((_config$changeAction2 = config.changeAction) === null || _config$changeAction2 === void 0 ? void 0 : _config$changeAction2.classModifiers) || DEFAULT_CHANGE_BUTTON_CLASS,
     "aria-label": _utils.default.FormPage.getConditionalText((_config$changeAction3 = config.changeAction) === null || _config$changeAction3 === void 0 ? void 0 : _config$changeAction3.aria_label, entryData),
-    name: "Change"
+    name: "Change",
+    autoFocus: config.focusOn
   }, ((_config$changeAction4 = config.changeAction) === null || _config$changeAction4 === void 0 ? void 0 : _config$changeAction4.label) || DEFAULT_CHANGE_BUTTON_LABEL), config.deleteAction && typeof onDelete === 'function' && /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
     id: "".concat(id, ".deleteButton"),
     onClick: function onClick() {
@@ -205,13 +209,15 @@ var SummaryCard = function SummaryCard(_ref) {
     "aria-label": _utils.default.FormPage.getConditionalText((_config$deleteAction = config.deleteAction) === null || _config$deleteAction === void 0 ? void 0 : _config$deleteAction.aria_label, entryData),
     name: "Delete"
   }, ((_config$deleteAction2 = config.deleteAction) === null || _config$deleteAction2 === void 0 ? void 0 : _config$deleteAction2.label) || DEFAULT_DELETE_BUTTON_LABEL), config.duplicateAction && typeof onDuplicate === 'function' && /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
+    "data-testid": "duplicate-button",
     id: "".concat(id, ".duplicateButton"),
     onClick: function onClick() {
       onDuplicate(entryData);
     },
     classModifiers: "secondary",
     "aria-label": _utils.default.FormPage.getConditionalText((_config$duplicateActi = config.duplicateAction) === null || _config$duplicateActi === void 0 ? void 0 : _config$duplicateActi.aria_label, entryData),
-    name: "Duplicate"
+    name: "Duplicate",
+    autoFocus: config.focusOn
   }, ((_config$duplicateActi2 = config.duplicateAction) === null || _config$duplicateActi2 === void 0 ? void 0 : _config$duplicateActi2.label) || DEFAULT_DUPLICATE_BUTTON_LABEL))), quickEdit && quickEditPage && /*#__PURE__*/_react.default.createElement(_FormPage.default, {
     page: quickEditPage,
     onAction: function onAction(action, patch) {
@@ -227,7 +233,8 @@ var SummaryCard = function SummaryCard(_ref) {
     masterPage: masterPage,
     childCollections: childCollections,
     formData: formData,
-    entryData: entryData
+    entryData: entryData,
+    optionalFieldPlaceholder: ((_config$fullDetails = config.fullDetails) === null || _config$fullDetails === void 0 ? void 0 : _config$fullDetails.optionalFieldPlaceholder) || ''
   }))));
 };
 SummaryCard.propTypes = {
@@ -261,7 +268,11 @@ SummaryCard.propTypes = {
       }))
     }),
     detailsTitle: _propTypes.default.string,
-    listView: _propTypes.default.bool
+    listView: _propTypes.default.bool,
+    focusOn: _propTypes.default.bool,
+    fullDetails: _propTypes.default.shape({
+      optionalFieldPlaceholder: _propTypes.default.string
+    })
   }).isRequired,
   masterPage: _propTypes.default.shape({
     childPages: _propTypes.default.arrayOf(_propTypes.default.shape({