@ukhomeoffice/cop-react-form-renderer 4.16.1-alpha → 4.16.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/FormComponent/Container.js +2 -10
- package/dist/components/FormComponent/Container.test.js +8 -8
- package/dist/components/FormRenderer/FormRenderer.js +4 -1
- package/dist/components/FormRenderer/FormRenderer.test.js +66 -11
- package/dist/components/FormRenderer/helpers/getSubmissionStatus.js +25 -1
- package/dist/components/FormRenderer/helpers/getSubmissionStatus.test.js +21 -0
- package/dist/components/TaskList/TaskList.js +4 -1
- package/dist/components/TaskList/TaskList.stories.mdx +55 -0
- package/dist/components/TaskList/TaskList.test.js +12 -6
- package/dist/json/taskList.json +1 -1
- package/dist/utils/Validate/validateContainer.js +2 -4
- package/package.json +1 -1
- package/dist/utils/Validate/errors/elevateErrors.js +0 -79
- package/dist/utils/Validate/errors/elevateErrors.test.js +0 -34
- package/dist/utils/Validate/errors/index.js +0 -16
|
@@ -65,17 +65,11 @@ var Container = function Container(_ref) {
|
|
|
65
65
|
};
|
|
66
66
|
|
|
67
67
|
var shouldShow = function shouldShow(options) {
|
|
68
|
-
var full_path = "".concat(container.full_path || container.fieldId, ".").concat(options.fieldId);
|
|
69
|
-
|
|
70
68
|
if (options.type === _models.ComponentTypes.CONTAINER) {
|
|
71
|
-
return _utils.default.Container.show(
|
|
72
|
-
full_path: full_path
|
|
73
|
-
}), formData);
|
|
69
|
+
return _utils.default.Container.show(options, formData);
|
|
74
70
|
}
|
|
75
71
|
|
|
76
|
-
return _utils.default.Component.show(
|
|
77
|
-
full_path: full_path
|
|
78
|
-
}), formData);
|
|
72
|
+
return _utils.default.Component.show(options, formData);
|
|
79
73
|
};
|
|
80
74
|
|
|
81
75
|
var classes = _utils.default.classBuilder(DEFAULT_CLASS, [], container.className);
|
|
@@ -86,12 +80,10 @@ var Container = function Container(_ref) {
|
|
|
86
80
|
}), container.components && container.components.filter(shouldShow).map(function (component, index) {
|
|
87
81
|
var defaultValue = component.type === _models.ComponentTypes.FILE ? {} : '';
|
|
88
82
|
var val = value ? value[component.fieldId] : defaultValue;
|
|
89
|
-
var full_path = "".concat(container.full_path || container.fieldId, ".").concat(component.fieldId);
|
|
90
83
|
return /*#__PURE__*/_react.default.createElement(_FormComponent.default, _extends({
|
|
91
84
|
key: index
|
|
92
85
|
}, attrs, {
|
|
93
86
|
component: _objectSpread(_objectSpread({}, component), {}, {
|
|
94
|
-
full_path: full_path,
|
|
95
87
|
readonly: container.readonly ? true : component.readonly
|
|
96
88
|
}),
|
|
97
89
|
formData: formData,
|
|
@@ -80,7 +80,7 @@ describe('components.FormComponent.Container', function () {
|
|
|
80
80
|
expect(label.tagName).toEqual('LABEL');
|
|
81
81
|
expect(label.classList).toContain('govuk-label');
|
|
82
82
|
expect(label.textContent).toEqual("".concat(TEXT_COMPONENT.label, " (optional)"));
|
|
83
|
-
expect(label.getAttribute('for')).toEqual(
|
|
83
|
+
expect(label.getAttribute('for')).toEqual(TEXT_ID);
|
|
84
84
|
hint = formGroup.childNodes[1];
|
|
85
85
|
expect(hint.tagName).toEqual('SPAN');
|
|
86
86
|
expect(hint.classList).toContain('govuk-hint');
|
|
@@ -88,7 +88,7 @@ describe('components.FormComponent.Container', function () {
|
|
|
88
88
|
input = formGroup.childNodes[2];
|
|
89
89
|
expect(input.tagName).toEqual('INPUT');
|
|
90
90
|
expect(input.classList).toContain('govuk-input');
|
|
91
|
-
expect(input.id).toEqual(
|
|
91
|
+
expect(input.id).toEqual(TEXT_ID);
|
|
92
92
|
expect(input.value).toEqual(TEXT_VALUE);
|
|
93
93
|
|
|
94
94
|
case 22:
|
|
@@ -137,7 +137,7 @@ describe('components.FormComponent.Container', function () {
|
|
|
137
137
|
expect(label.tagName).toEqual('LABEL');
|
|
138
138
|
expect(label.classList).toContain('govuk-label');
|
|
139
139
|
expect(label.textContent).toEqual("".concat(TEXT_COMPONENT.label, " (optional)"));
|
|
140
|
-
expect(label.getAttribute('for')).toEqual(
|
|
140
|
+
expect(label.getAttribute('for')).toEqual(TEXT_ID);
|
|
141
141
|
hint = formGroup.childNodes[1];
|
|
142
142
|
expect(hint.tagName).toEqual('SPAN');
|
|
143
143
|
expect(hint.classList).toContain('govuk-hint');
|
|
@@ -145,7 +145,7 @@ describe('components.FormComponent.Container', function () {
|
|
|
145
145
|
input = formGroup.childNodes[2];
|
|
146
146
|
expect(input.tagName).toEqual('INPUT');
|
|
147
147
|
expect(input.classList).toContain('govuk-input');
|
|
148
|
-
expect(input.id).toEqual(
|
|
148
|
+
expect(input.id).toEqual(TEXT_ID);
|
|
149
149
|
expect(input.value).toEqual(NESTED_TEXT_VALUE);
|
|
150
150
|
|
|
151
151
|
case 25:
|
|
@@ -318,7 +318,7 @@ describe('components.FormComponent.Container', function () {
|
|
|
318
318
|
expect(label.tagName).toEqual('LABEL');
|
|
319
319
|
expect(label.classList).toContain('govuk-label');
|
|
320
320
|
expect(label.textContent).toEqual("".concat(TEXT_COMPONENT.label, " (optional)"));
|
|
321
|
-
expect(label.getAttribute('for')).toEqual(
|
|
321
|
+
expect(label.getAttribute('for')).toEqual(TEXT_ID);
|
|
322
322
|
hint = formGroup.childNodes[1];
|
|
323
323
|
expect(hint.tagName).toEqual('SPAN');
|
|
324
324
|
expect(hint.classList).toContain('govuk-hint');
|
|
@@ -326,7 +326,7 @@ describe('components.FormComponent.Container', function () {
|
|
|
326
326
|
input = formGroup.childNodes[2];
|
|
327
327
|
expect(input.tagName).toEqual('INPUT');
|
|
328
328
|
expect(input.classList).toContain('govuk-input');
|
|
329
|
-
expect(input.id).toEqual(
|
|
329
|
+
expect(input.id).toEqual(TEXT_ID);
|
|
330
330
|
expect(input.value).toEqual('');
|
|
331
331
|
|
|
332
332
|
case 22:
|
|
@@ -400,7 +400,7 @@ describe('components.FormComponent.Container', function () {
|
|
|
400
400
|
expect(label.tagName).toEqual('LABEL');
|
|
401
401
|
expect(label.classList).toContain('govuk-label');
|
|
402
402
|
expect(label.textContent).toEqual("".concat(TEXT_COMPONENT.label, " (optional)"));
|
|
403
|
-
expect(label.getAttribute('for')).toEqual(
|
|
403
|
+
expect(label.getAttribute('for')).toEqual(TEXT_ID);
|
|
404
404
|
hint = formGroup.childNodes[1];
|
|
405
405
|
expect(hint.tagName).toEqual('SPAN');
|
|
406
406
|
expect(hint.classList).toContain('govuk-hint');
|
|
@@ -410,7 +410,7 @@ describe('components.FormComponent.Container', function () {
|
|
|
410
410
|
|
|
411
411
|
expect(input.classList).toContain('hods-readonly'); // Now readonly, so hods-readonly
|
|
412
412
|
|
|
413
|
-
expect(input.id).toEqual(
|
|
413
|
+
expect(input.id).toEqual(TEXT_ID);
|
|
414
414
|
expect(input.textContent).toEqual(TEXT_VALUE);
|
|
415
415
|
|
|
416
416
|
case 22:
|
|
@@ -369,7 +369,7 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
|
|
|
369
369
|
components: components
|
|
370
370
|
}, _objectSpread(_objectSpread(_objectSpread({}, data), patch), formState.page.formData), _models.EventTypes.SUBMIT);
|
|
371
371
|
|
|
372
|
-
submissionData.formStatus = _helpers.default.getSubmissionStatus(type, pages, pageId, action, submissionData, currentTask, true);
|
|
372
|
+
submissionData.formStatus = _helpers.default.getSubmissionStatus(type, pages, pageId, action, submissionData, currentTask, true, hubDetails === null || hubDetails === void 0 ? void 0 : hubDetails.sections);
|
|
373
373
|
|
|
374
374
|
if (patch) {
|
|
375
375
|
setData(submissionData);
|
|
@@ -439,6 +439,9 @@ var InternalFormRenderer = function InternalFormRenderer(_ref2) {
|
|
|
439
439
|
} else if (currentTask.state === _models.TaskStates.TYPES.IN_PROGRESS) {
|
|
440
440
|
var _currentPage = data.formStatus.tasks[currentTask.name].currentPage;
|
|
441
441
|
onPageChange(_currentPage || currentTask.pages[0]);
|
|
442
|
+
} else if (currentTask.firstPage) {
|
|
443
|
+
var _currentPage2 = currentTask.firstPage;
|
|
444
|
+
onPageChange(_currentPage2 || currentTask.pages[0]);
|
|
442
445
|
} else {
|
|
443
446
|
onPageChange(currentTask.pages[0]);
|
|
444
447
|
}
|
|
@@ -618,14 +618,14 @@ describe('components', function () {
|
|
|
618
618
|
})));
|
|
619
619
|
|
|
620
620
|
case 5:
|
|
621
|
-
taskList = container.childNodes[0].childNodes[1]; //Check
|
|
621
|
+
taskList = container.childNodes[0].childNodes[1]; //Check statuses are correct
|
|
622
622
|
|
|
623
|
-
firstTaskStatus = taskList.childNodes[3].childNodes[
|
|
623
|
+
firstTaskStatus = taskList.childNodes[3].childNodes[1].childNodes[1];
|
|
624
624
|
expect(firstTaskStatus.textContent).toEqual(_models.TaskStates.DETAILS[_models.TaskStates.TYPES.NOT_STARTED].label);
|
|
625
|
-
secondTaskStatus = taskList.childNodes[3].childNodes[
|
|
625
|
+
secondTaskStatus = taskList.childNodes[3].childNodes[2].childNodes[1];
|
|
626
626
|
expect(secondTaskStatus.textContent).toEqual(_models.TaskStates.DETAILS[_models.TaskStates.TYPES.CANNOT_START_YET].label); //Launch first task
|
|
627
627
|
|
|
628
|
-
firstTask = taskList.childNodes[3].childNodes[
|
|
628
|
+
firstTask = taskList.childNodes[3].childNodes[1].childNodes[0].childNodes[0];
|
|
629
629
|
expect(firstTask.textContent).toEqual('Date, location and mode details');
|
|
630
630
|
|
|
631
631
|
_react.fireEvent.click(firstTask, {}); //Fill first page and navigate
|
|
@@ -694,11 +694,11 @@ describe('components', function () {
|
|
|
694
694
|
_react.fireEvent.click(cyaPage.childNodes[5].childNodes[0], {}); //Should be back at task list
|
|
695
695
|
|
|
696
696
|
|
|
697
|
-
expect(container.childNodes[0].childNodes[0].textContent).toEqual('Task List Form'); //Check
|
|
697
|
+
expect(container.childNodes[0].childNodes[0].textContent).toEqual('Task List Form'); //Check statuses are correct
|
|
698
698
|
|
|
699
|
-
firstTaskStatus = container.childNodes[0].childNodes[1].childNodes[3].childNodes[
|
|
699
|
+
firstTaskStatus = container.childNodes[0].childNodes[1].childNodes[3].childNodes[1].childNodes[1];
|
|
700
700
|
expect(firstTaskStatus.textContent).toEqual(_models.TaskStates.DETAILS[_models.TaskStates.TYPES.COMPLETE].label);
|
|
701
|
-
secondTaskStatus = container.childNodes[0].childNodes[1].childNodes[3].childNodes[
|
|
701
|
+
secondTaskStatus = container.childNodes[0].childNodes[1].childNodes[3].childNodes[2].childNodes[1];
|
|
702
702
|
expect(secondTaskStatus.textContent).toEqual(_models.TaskStates.DETAILS[_models.TaskStates.TYPES.NOT_STARTED].label); //Check final data submitted to backend is as expected
|
|
703
703
|
|
|
704
704
|
finalSubmit = ON_SUBMIT_CALLS[ON_SUBMIT_CALLS.length - 1];
|
|
@@ -747,7 +747,7 @@ describe('components', function () {
|
|
|
747
747
|
case 4:
|
|
748
748
|
taskList = container.childNodes[0].childNodes[1]; //Launch first task
|
|
749
749
|
|
|
750
|
-
_react.fireEvent.click(taskList.childNodes[3].childNodes[
|
|
750
|
+
_react.fireEvent.click(taskList.childNodes[3].childNodes[1].childNodes[0].childNodes[0], {}); //Fill first page and navigate
|
|
751
751
|
|
|
752
752
|
|
|
753
753
|
newPage = container.childNodes[0].childNodes[0];
|
|
@@ -786,7 +786,7 @@ describe('components', function () {
|
|
|
786
786
|
_react.fireEvent.click(container.childNodes[0].childNodes[0].childNodes[5].childNodes[0], {}); //Launch same task again
|
|
787
787
|
|
|
788
788
|
|
|
789
|
-
_react.fireEvent.click(container.childNodes[0].childNodes[1].childNodes[3].childNodes[
|
|
789
|
+
_react.fireEvent.click(container.childNodes[0].childNodes[1].childNodes[3].childNodes[1].childNodes[0].childNodes[0], {}); //Should be at CYA page
|
|
790
790
|
|
|
791
791
|
|
|
792
792
|
expect(container.childNodes[0].childNodes[0].childNodes[0].textContent).toEqual('Check your answers');
|
|
@@ -838,7 +838,7 @@ describe('components', function () {
|
|
|
838
838
|
case 7:
|
|
839
839
|
taskList = container.childNodes[0].childNodes[1]; // Launch first task
|
|
840
840
|
|
|
841
|
-
_react.fireEvent.click(taskList.childNodes[3].childNodes[
|
|
841
|
+
_react.fireEvent.click(taskList.childNodes[3].childNodes[1].childNodes[0].childNodes[0], {}); // Fill first page and navigate
|
|
842
842
|
|
|
843
843
|
|
|
844
844
|
newPage = container.childNodes[0].childNodes[0];
|
|
@@ -874,7 +874,7 @@ describe('components', function () {
|
|
|
874
874
|
_react.fireEvent.click(newPage.childNodes[2].childNodes[0], {}); // Launch same task again
|
|
875
875
|
|
|
876
876
|
|
|
877
|
-
_react.fireEvent.click(container.childNodes[0].childNodes[1].childNodes[3].childNodes[
|
|
877
|
+
_react.fireEvent.click(container.childNodes[0].childNodes[1].childNodes[3].childNodes[1].childNodes[0].childNodes[0], {}); // Should be on the second page
|
|
878
878
|
|
|
879
879
|
|
|
880
880
|
expect(container.childNodes[0].childNodes[0].childNodes[0].textContent).toEqual('Event Mode');
|
|
@@ -947,5 +947,60 @@ describe('components', function () {
|
|
|
947
947
|
}
|
|
948
948
|
}, _callee26);
|
|
949
949
|
})));
|
|
950
|
+
it('should navigate to a specific page at the beginning of a task if it is set as the firstPage of a task', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee28() {
|
|
951
|
+
var ON_SUBMIT_CALLS, ON_SUBMIT, HOOKS, TASK_LIST_NON_SEQUENTIAL, taskList, firstTask, newPage;
|
|
952
|
+
return regeneratorRuntime.wrap(function _callee28$(_context28) {
|
|
953
|
+
while (1) {
|
|
954
|
+
switch (_context28.prev = _context28.next) {
|
|
955
|
+
case 0:
|
|
956
|
+
ON_SUBMIT_CALLS = [];
|
|
957
|
+
|
|
958
|
+
ON_SUBMIT = function ON_SUBMIT(type, payload, onSuccess, onError) {
|
|
959
|
+
ON_SUBMIT_CALLS.push(payload);
|
|
960
|
+
onSuccess();
|
|
961
|
+
};
|
|
962
|
+
|
|
963
|
+
HOOKS = {
|
|
964
|
+
onSubmit: ON_SUBMIT
|
|
965
|
+
};
|
|
966
|
+
TASK_LIST_NON_SEQUENTIAL = JSON.parse(JSON.stringify(_taskList.default));
|
|
967
|
+
TASK_LIST_NON_SEQUENTIAL.hub.nonSequential = true;
|
|
968
|
+
_context28.next = 7;
|
|
969
|
+
return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee27() {
|
|
970
|
+
return regeneratorRuntime.wrap(function _callee27$(_context27) {
|
|
971
|
+
while (1) {
|
|
972
|
+
switch (_context27.prev = _context27.next) {
|
|
973
|
+
case 0:
|
|
974
|
+
(0, _reactDom.render)( /*#__PURE__*/_react2.default.createElement(_FormRenderer.default, _extends({}, TASK_LIST_NON_SEQUENTIAL, {
|
|
975
|
+
hooks: HOOKS
|
|
976
|
+
})), container);
|
|
977
|
+
|
|
978
|
+
case 1:
|
|
979
|
+
case "end":
|
|
980
|
+
return _context27.stop();
|
|
981
|
+
}
|
|
982
|
+
}
|
|
983
|
+
}, _callee27);
|
|
984
|
+
})));
|
|
985
|
+
|
|
986
|
+
case 7:
|
|
987
|
+
taskList = container.childNodes[0].childNodes[1]; // Launch first task of second section
|
|
988
|
+
|
|
989
|
+
firstTask = taskList.childNodes[5].childNodes[1].childNodes[0].childNodes[0];
|
|
990
|
+
expect(firstTask.textContent).toEqual('People details');
|
|
991
|
+
|
|
992
|
+
_react.fireEvent.click(firstTask, {}); // Should be at Surname page
|
|
993
|
+
|
|
994
|
+
|
|
995
|
+
newPage = container.childNodes[0].childNodes[0];
|
|
996
|
+
expect(newPage.childNodes[0].textContent).toEqual('Surname');
|
|
997
|
+
|
|
998
|
+
case 13:
|
|
999
|
+
case "end":
|
|
1000
|
+
return _context28.stop();
|
|
1001
|
+
}
|
|
1002
|
+
}
|
|
1003
|
+
}, _callee28);
|
|
1004
|
+
})));
|
|
950
1005
|
});
|
|
951
1006
|
});
|
|
@@ -11,7 +11,7 @@ var _getNextPageId = _interopRequireDefault(require("./getNextPageId"));
|
|
|
11
11
|
|
|
12
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
13
|
|
|
14
|
-
var getSubmissionStatus = function getSubmissionStatus(formType, pages, currentPageId, action, formData, currentTask, isCompleted) {
|
|
14
|
+
var getSubmissionStatus = function getSubmissionStatus(formType, pages, currentPageId, action, formData, currentTask, isCompleted, sections) {
|
|
15
15
|
if (formType === _models.FormTypes.TASK || formType === _models.FormTypes.FORM_WITH_TASK) {
|
|
16
16
|
var formStatus = formData.formStatus || {};
|
|
17
17
|
formStatus.tasks = formStatus.tasks || {};
|
|
@@ -19,6 +19,30 @@ var getSubmissionStatus = function getSubmissionStatus(formType, pages, currentP
|
|
|
19
19
|
|
|
20
20
|
if (currentPageId === (_models.FormPages.CYA || 'submitForm') && isCompleted) {
|
|
21
21
|
formStatus.tasks[currentTask.name].complete = true;
|
|
22
|
+
} else if (!currentTask.name) {
|
|
23
|
+
// undefined means that the currentTask isn't set because onTaskAction hasn't been called
|
|
24
|
+
// so the user is in the pre-task-list section of the form
|
|
25
|
+
// in this case check whether the page is part of a section defined in the hub sections
|
|
26
|
+
// if it is, set the section to complete as long as isCompleted == true
|
|
27
|
+
if (sections) {
|
|
28
|
+
sections.forEach(function (section) {
|
|
29
|
+
section.tasks.forEach(function (task) {
|
|
30
|
+
var lastPage = task.pages[task.pages.length - 1];
|
|
31
|
+
|
|
32
|
+
if ((lastPage === currentPageId || lastPage.id === currentPageId) && isCompleted) {
|
|
33
|
+
formStatus.tasks[task.name] = {
|
|
34
|
+
complete: isCompleted,
|
|
35
|
+
currentPage: currentPageId
|
|
36
|
+
};
|
|
37
|
+
} else if (task.pages.includes(currentPageId)) {
|
|
38
|
+
formStatus.tasks[task.name] = {
|
|
39
|
+
complete: false,
|
|
40
|
+
currentPage: currentPageId
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
});
|
|
45
|
+
}
|
|
22
46
|
} else if ((action === null || action === void 0 ? void 0 : action.type) === _models.PageAction.TYPES.SAVE_AND_NAVIGATE) {
|
|
23
47
|
formStatus.tasks[currentTask.name] = {
|
|
24
48
|
complete: false,
|
|
@@ -255,6 +255,27 @@ describe('components', function () {
|
|
|
255
255
|
})
|
|
256
256
|
});
|
|
257
257
|
});
|
|
258
|
+
it("should mark the current task as complete if the current task is 'undefined' i.e. it is a pre-task-list task", function () {
|
|
259
|
+
var CURRENT_PAGE_ID = PAGES[PAGES.length - 1].id;
|
|
260
|
+
var TASK_NAME = undefined;
|
|
261
|
+
var CURRENT_TASK = {
|
|
262
|
+
name: TASK_NAME
|
|
263
|
+
};
|
|
264
|
+
var ACTION = {
|
|
265
|
+
complete: true
|
|
266
|
+
};
|
|
267
|
+
var TASKS = [{
|
|
268
|
+
pages: PAGES
|
|
269
|
+
}];
|
|
270
|
+
var SECTIONS = [{
|
|
271
|
+
tasks: TASKS
|
|
272
|
+
}];
|
|
273
|
+
expect((0, _getSubmissionStatus.default)(FORM_TYPE, PAGES, CURRENT_PAGE_ID, ACTION, {}, CURRENT_TASK, true, SECTIONS)).toMatchObject({
|
|
274
|
+
tasks: _defineProperty({}, TASK_NAME, {
|
|
275
|
+
complete: true
|
|
276
|
+
})
|
|
277
|
+
});
|
|
278
|
+
});
|
|
258
279
|
});
|
|
259
280
|
});
|
|
260
281
|
});
|
|
@@ -13,6 +13,8 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
13
13
|
|
|
14
14
|
var _copReactComponents = require("@ukhomeoffice/cop-react-components");
|
|
15
15
|
|
|
16
|
+
var _dist = require("@ukhomeoffice/cop-react-components/dist");
|
|
17
|
+
|
|
16
18
|
var _models = require("../../models");
|
|
17
19
|
|
|
18
20
|
var _Task = _interopRequireDefault(require("./Task"));
|
|
@@ -89,7 +91,7 @@ var TaskList = function TaskList(_ref) {
|
|
|
89
91
|
className: classes('section')
|
|
90
92
|
}, sections.length > 1 ? "".concat(index + 1, ". ") : '', section.name), /*#__PURE__*/_react.default.createElement("ol", {
|
|
91
93
|
className: classes('items')
|
|
92
|
-
}, section.tasks.map(function (task) {
|
|
94
|
+
}, /*#__PURE__*/_react.default.createElement(_dist.Hint, null, section.label ? section.label : ''), section.tasks.map(function (task) {
|
|
93
95
|
return /*#__PURE__*/_react.default.createElement(_Task.default, {
|
|
94
96
|
key: "".concat(section.name, "-").concat(task.name),
|
|
95
97
|
task: task,
|
|
@@ -105,6 +107,7 @@ TaskList.propTypes = {
|
|
|
105
107
|
incompleteTitle: _propTypes.default.string,
|
|
106
108
|
sections: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
107
109
|
name: _propTypes.default.string.isRequired,
|
|
110
|
+
label: _propTypes.default.string,
|
|
108
111
|
tasks: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
109
112
|
name: _propTypes.default.string.isRequired,
|
|
110
113
|
pages: _propTypes.default.array.isRequired,
|
|
@@ -107,3 +107,58 @@ This can be specified within the `hub` portion of the form JSON:
|
|
|
107
107
|
}}
|
|
108
108
|
</Story>
|
|
109
109
|
</Canvas>
|
|
110
|
+
|
|
111
|
+
## With labels on tasks
|
|
112
|
+
This is a non-required property of the individual `tasks` fields of the form JSON:
|
|
113
|
+
```
|
|
114
|
+
{
|
|
115
|
+
...
|
|
116
|
+
tasks: [
|
|
117
|
+
{
|
|
118
|
+
...
|
|
119
|
+
label: 'This is a label'
|
|
120
|
+
}
|
|
121
|
+
...
|
|
122
|
+
}
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
<Canvas withToolbar>
|
|
126
|
+
<Story name="With labels on tasks">
|
|
127
|
+
{() => {
|
|
128
|
+
const onAction = (row) => {
|
|
129
|
+
console.log('action clicked', row);
|
|
130
|
+
};
|
|
131
|
+
const COP_REF = '123';
|
|
132
|
+
const REF_TITLE = 'COP reference number';
|
|
133
|
+
const SECTIONS = [
|
|
134
|
+
{
|
|
135
|
+
name: 'Add event details',
|
|
136
|
+
label: 'Task 1 label',
|
|
137
|
+
tasks: [
|
|
138
|
+
{ name: 'Date, location and mode details', state: 'complete' },
|
|
139
|
+
{ name: 'Officer and agency details', state: 'inProgress' },
|
|
140
|
+
],
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
name: 'Add people details',
|
|
144
|
+
tasks: [
|
|
145
|
+
{ name: 'People details', state: 'complete' },
|
|
146
|
+
{ name: 'Immigration details', state: 'inProgress' },
|
|
147
|
+
{ name: 'Journey details', state: 'notStarted' },
|
|
148
|
+
],
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
name: 'Add item details',
|
|
152
|
+
label: 'Task 3 label',
|
|
153
|
+
tasks: [
|
|
154
|
+
{ name: 'Item details', state: 'cannotStartYet' },
|
|
155
|
+
{ name: 'Search and interception details', state: 'cannotStartYet' },
|
|
156
|
+
],
|
|
157
|
+
},
|
|
158
|
+
];
|
|
159
|
+
return (
|
|
160
|
+
<TaskList refNumber={COP_REF} refTitle={REF_TITLE} sections={SECTIONS} />
|
|
161
|
+
);
|
|
162
|
+
}}
|
|
163
|
+
</Story>
|
|
164
|
+
</Canvas>
|
|
@@ -23,6 +23,7 @@ describe('components', function () {
|
|
|
23
23
|
var REF_TITLE = 'COP reference number';
|
|
24
24
|
var sections = [{
|
|
25
25
|
name: 'These are your tasks',
|
|
26
|
+
label: 'This is the label for your first tasks',
|
|
26
27
|
tasks: [{
|
|
27
28
|
name: 'Nice task',
|
|
28
29
|
state: 'complete',
|
|
@@ -38,6 +39,7 @@ describe('components', function () {
|
|
|
38
39
|
}]
|
|
39
40
|
}, {
|
|
40
41
|
name: 'These are your extra bonus tasks',
|
|
42
|
+
label: 'This is the label for your extra tasks',
|
|
41
43
|
tasks: [{
|
|
42
44
|
name: 'Nice task',
|
|
43
45
|
state: 'complete',
|
|
@@ -78,12 +80,16 @@ describe('components', function () {
|
|
|
78
80
|
expect(subSectionOneHeading.tagName).toEqual('H2');
|
|
79
81
|
expect(subSectionOneHeading.textContent).toEqual('1. These are your tasks');
|
|
80
82
|
var subSectionOneList = container.childNodes[0].childNodes[5];
|
|
81
|
-
expect(subSectionOneList.childNodes.length).toEqual(
|
|
83
|
+
expect(subSectionOneList.childNodes.length).toEqual(4);
|
|
82
84
|
var subSectionTwoHeading = container.childNodes[0].childNodes[6];
|
|
83
85
|
expect(subSectionTwoHeading.tagName).toEqual('H2');
|
|
84
86
|
expect(subSectionTwoHeading.textContent).toEqual('2. These are your extra bonus tasks');
|
|
85
87
|
var subSectionTwoList = container.childNodes[0].childNodes[7];
|
|
86
|
-
expect(subSectionTwoList.childNodes.length).toEqual(
|
|
88
|
+
expect(subSectionTwoList.childNodes.length).toEqual(4);
|
|
89
|
+
var subSectionOneLabel = container.childNodes[0].childNodes[5].firstChild;
|
|
90
|
+
expect(subSectionOneLabel.textContent).toEqual('This is the label for your first tasks');
|
|
91
|
+
var subSectionTwoLabel = container.childNodes[0].childNodes[7].firstChild;
|
|
92
|
+
expect(subSectionTwoLabel.textContent).toEqual('This is the label for your extra tasks');
|
|
87
93
|
});
|
|
88
94
|
it('should not show incomplete title if form is complete', function () {
|
|
89
95
|
var COP_REF = '123';
|
|
@@ -263,7 +269,7 @@ describe('components', function () {
|
|
|
263
269
|
expect(incompleteForm.textContent).toEqual(INCOMPLETE_TITLE);
|
|
264
270
|
});
|
|
265
271
|
});
|
|
266
|
-
it('should pass the
|
|
272
|
+
it('should pass the selected task to the given onTaskAction function', function () {
|
|
267
273
|
var COP_REF = '123';
|
|
268
274
|
var REF_TITLE = 'COP reference number';
|
|
269
275
|
var ON_CLICK_CALLS = [];
|
|
@@ -297,9 +303,9 @@ describe('components', function () {
|
|
|
297
303
|
})),
|
|
298
304
|
container = _render6.container;
|
|
299
305
|
|
|
300
|
-
var firstTask = container.childNodes[0].childNodes[5].childNodes[
|
|
301
|
-
var secondTask = container.childNodes[0].childNodes[5].childNodes[
|
|
302
|
-
var thirdTask = container.childNodes[0].childNodes[5].childNodes[
|
|
306
|
+
var firstTask = container.childNodes[0].childNodes[5].childNodes[1].childNodes[0].childNodes[0];
|
|
307
|
+
var secondTask = container.childNodes[0].childNodes[5].childNodes[2].childNodes[0].childNodes[0];
|
|
308
|
+
var thirdTask = container.childNodes[0].childNodes[5].childNodes[3].childNodes[0].childNodes[0];
|
|
303
309
|
|
|
304
310
|
_react.fireEvent.click(firstTask.childNodes[0]);
|
|
305
311
|
|
package/dist/json/taskList.json
CHANGED
|
@@ -238,12 +238,12 @@
|
|
|
238
238
|
"tasks": [
|
|
239
239
|
{
|
|
240
240
|
"name": "People details",
|
|
241
|
+
"firstPage": "surname",
|
|
241
242
|
"pages": ["firstName", "surname"],
|
|
242
243
|
"state": "complete"
|
|
243
244
|
},
|
|
244
245
|
{
|
|
245
246
|
"name": "Immigration details",
|
|
246
|
-
"firstPage": "immigrationDate",
|
|
247
247
|
"pages": ["immigrationDate"],
|
|
248
248
|
"state": "inProgress"
|
|
249
249
|
},
|
|
@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
|
|
8
|
-
var _elevateErrors = _interopRequireDefault(require("./errors/elevateErrors"));
|
|
9
|
-
|
|
10
8
|
var _validateComponent = _interopRequireDefault(require("./validateComponent"));
|
|
11
9
|
|
|
12
10
|
var _additional = _interopRequireDefault(require("./additional"));
|
|
@@ -46,9 +44,9 @@ var validateContainer = function validateContainer(container, outerData, formDat
|
|
|
46
44
|
});
|
|
47
45
|
}
|
|
48
46
|
|
|
49
|
-
return
|
|
47
|
+
return errors.filter(function (e) {
|
|
50
48
|
return !!e;
|
|
51
|
-
})
|
|
49
|
+
});
|
|
52
50
|
};
|
|
53
51
|
|
|
54
52
|
var _default = validateContainer;
|
package/package.json
CHANGED
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
|
|
8
|
-
/**
|
|
9
|
-
* Iterates over an array of errors and brings any nested
|
|
10
|
-
* error that should be displayed into the top level array.
|
|
11
|
-
*
|
|
12
|
-
* e.g.
|
|
13
|
-
* [
|
|
14
|
-
* null,
|
|
15
|
-
* null,
|
|
16
|
-
* [
|
|
17
|
-
* { error },
|
|
18
|
-
* { error },
|
|
19
|
-
* { error },
|
|
20
|
-
* ]
|
|
21
|
-
* ]
|
|
22
|
-
*
|
|
23
|
-
* This allows us to have containers components, whose components are children
|
|
24
|
-
* containers and those children container components are also made up of
|
|
25
|
-
* containers.
|
|
26
|
-
*
|
|
27
|
-
* e.g.
|
|
28
|
-
* {
|
|
29
|
-
* "type": "container",
|
|
30
|
-
* "components": [
|
|
31
|
-
* {
|
|
32
|
-
* "type": "any-type"
|
|
33
|
-
* },
|
|
34
|
-
* {
|
|
35
|
-
* "type": "container",
|
|
36
|
-
* "components": [
|
|
37
|
-
* {
|
|
38
|
-
* "type": "any-type"
|
|
39
|
-
* },
|
|
40
|
-
* {
|
|
41
|
-
* "type": "container",
|
|
42
|
-
* "components": [
|
|
43
|
-
* {
|
|
44
|
-
* "type": "container",
|
|
45
|
-
* "components":[]
|
|
46
|
-
* }
|
|
47
|
-
* ]
|
|
48
|
-
* }
|
|
49
|
-
* ]
|
|
50
|
-
* }
|
|
51
|
-
* ]
|
|
52
|
-
* }
|
|
53
|
-
*
|
|
54
|
-
*
|
|
55
|
-
* @param {*} errors A array of nested arrays containing errors.
|
|
56
|
-
* @returns An array containing error objects or an empty array when no errors are found.
|
|
57
|
-
*/
|
|
58
|
-
var elevateErrors = function elevateErrors(errors) {
|
|
59
|
-
var nestedErrors = [];
|
|
60
|
-
|
|
61
|
-
var getError = function getError(errors) {
|
|
62
|
-
errors.forEach(function (error) {
|
|
63
|
-
if (error) {
|
|
64
|
-
if (Array.isArray(error)) {
|
|
65
|
-
getError(error);
|
|
66
|
-
} else {
|
|
67
|
-
// Must be an error if not an array
|
|
68
|
-
nestedErrors.push(error);
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
});
|
|
72
|
-
};
|
|
73
|
-
|
|
74
|
-
getError(errors);
|
|
75
|
-
return nestedErrors;
|
|
76
|
-
};
|
|
77
|
-
|
|
78
|
-
var _default = elevateErrors;
|
|
79
|
-
exports.default = _default;
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _elevateErrors = _interopRequireDefault(require("./elevateErrors"));
|
|
4
|
-
|
|
5
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
6
|
-
|
|
7
|
-
describe('utils.Validate.ElevateErrors', function () {
|
|
8
|
-
it('should get nested errors wrapped within multiple arrays', function () {
|
|
9
|
-
var nestedErrors = [[undefined, undefined, [[{
|
|
10
|
-
"type": 'This Alpha error is required'
|
|
11
|
-
}, [{
|
|
12
|
-
"type": 'This Bravo error is required'
|
|
13
|
-
}, [[], {
|
|
14
|
-
"type": 'This Charlie error is required'
|
|
15
|
-
}]]]]]];
|
|
16
|
-
expect((0, _elevateErrors.default)(nestedErrors)).toHaveLength(3);
|
|
17
|
-
expect((0, _elevateErrors.default)(nestedErrors)).toMatchObject([{
|
|
18
|
-
"type": 'This Alpha error is required'
|
|
19
|
-
}, {
|
|
20
|
-
"type": 'This Bravo error is required'
|
|
21
|
-
}, {
|
|
22
|
-
"type": 'This Charlie error is required'
|
|
23
|
-
}]);
|
|
24
|
-
});
|
|
25
|
-
it('should get the single error within an array', function () {
|
|
26
|
-
var nestedErrors = [[{
|
|
27
|
-
"type": 'This Alpha error is required'
|
|
28
|
-
}]];
|
|
29
|
-
expect((0, _elevateErrors.default)(nestedErrors)).toHaveLength(1);
|
|
30
|
-
expect((0, _elevateErrors.default)(nestedErrors)).toMatchObject([{
|
|
31
|
-
"type": 'This Alpha error is required'
|
|
32
|
-
}]);
|
|
33
|
-
});
|
|
34
|
-
});
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
|
|
8
|
-
var _elevateErrors = _interopRequireDefault(require("./elevateErrors"));
|
|
9
|
-
|
|
10
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
-
|
|
12
|
-
var Errors = {
|
|
13
|
-
elevate: _elevateErrors.default
|
|
14
|
-
};
|
|
15
|
-
var _default = Errors;
|
|
16
|
-
exports.default = _default;
|