@ukhomeoffice/cop-react-form-renderer 0.1.0-beta → 1.0.0-gamma
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/CheckYourAnswers/Answer.js +48 -0
- package/dist/components/CheckYourAnswers/Answer.test.js +94 -0
- package/dist/components/CheckYourAnswers/CheckYourAnswers.js +94 -23
- package/dist/components/CheckYourAnswers/CheckYourAnswers.scss +0 -7
- package/dist/components/CheckYourAnswers/CheckYourAnswers.stories.mdx +149 -0
- package/dist/components/CheckYourAnswers/CheckYourAnswers.test.js +332 -0
- package/dist/components/FormComponent/FormComponent.js +7 -7
- package/dist/components/FormComponent/FormComponent.stories.mdx +167 -0
- package/dist/components/FormComponent/FormComponent.test.js +137 -0
- package/dist/components/FormPage/FormPage.js +12 -11
- package/dist/components/FormPage/FormPage.stories.mdx +118 -0
- package/dist/components/FormPage/FormPage.test.js +255 -0
- package/dist/components/FormRenderer/FormRenderer.js +95 -54
- package/dist/components/FormRenderer/FormRenderer.stories.mdx +115 -0
- package/dist/components/FormRenderer/FormRenderer.test.js +471 -0
- package/dist/components/FormRenderer/handlers/cyaAction.js +28 -0
- package/dist/components/FormRenderer/handlers/getPageId.js +28 -0
- package/dist/components/FormRenderer/handlers/getPageId.test.js +61 -0
- package/dist/components/FormRenderer/handlers/handlers.test.js +97 -0
- package/dist/components/FormRenderer/handlers/index.js +23 -0
- package/dist/components/FormRenderer/handlers/navigate.js +28 -0
- package/dist/components/FormRenderer/handlers/submissionError.js +20 -0
- package/dist/components/FormRenderer/helpers/canActionProceed.js +35 -0
- package/dist/components/FormRenderer/helpers/canActionProceed.test.js +73 -0
- package/dist/components/FormRenderer/helpers/canCYASubmit.js +42 -0
- package/dist/components/FormRenderer/helpers/canCYASubmit.test.js +155 -0
- package/dist/components/FormRenderer/helpers/getCYA.js +31 -0
- package/dist/components/FormRenderer/helpers/getCYA.test.js +38 -0
- package/dist/components/FormRenderer/helpers/getFormState.js +32 -0
- package/dist/components/FormRenderer/helpers/getFormState.test.js +61 -0
- package/dist/components/FormRenderer/helpers/getNextPageId.js +65 -0
- package/dist/components/FormRenderer/helpers/getNextPageId.test.js +90 -0
- package/dist/components/FormRenderer/helpers/getPage.js +34 -0
- package/dist/components/FormRenderer/helpers/getPage.test.js +46 -0
- package/dist/components/FormRenderer/helpers/index.js +27 -0
- package/dist/components/PageActions/ActionButton.js +58 -0
- package/dist/components/PageActions/ActionButton.test.js +116 -0
- package/dist/components/PageActions/PageActions.js +18 -25
- package/dist/components/PageActions/PageActions.stories.mdx +74 -0
- package/dist/components/PageActions/PageActions.test.js +157 -0
- package/dist/components/SummaryList/RowAction.js +13 -22
- package/dist/components/SummaryList/RowAction.test.js +94 -0
- package/dist/components/SummaryList/SummaryList.js +6 -20
- package/dist/components/SummaryList/SummaryList.scss +7 -0
- package/dist/components/SummaryList/SummaryList.stories.mdx +36 -0
- package/dist/components/SummaryList/SummaryList.test.js +197 -0
- package/dist/components/SummaryList/helpers/getRowActionAttributes.js +27 -0
- package/dist/components/SummaryList/helpers/getRowActionAttributes.test.js +77 -0
- package/dist/components/SummaryList/helpers/index.js +15 -0
- package/dist/components/index.js +8 -0
- package/dist/hooks/useGetRequest.js +16 -1
- package/dist/hooks/useHooks.js +16 -5
- package/dist/index.js +3 -1
- package/dist/index.test.js +18 -0
- package/dist/models/EventTypes.js +14 -0
- package/dist/models/FormPages.js +14 -0
- package/dist/models/PageAction.js +40 -0
- package/dist/models/index.js +24 -0
- package/dist/utils/CheckYourAnswers/getCYAAction.js +9 -0
- package/dist/utils/CheckYourAnswers/getCYARow.js +10 -0
- package/dist/utils/CheckYourAnswers/getCYARowsForPage.js +9 -0
- package/dist/utils/CheckYourAnswers/showComponentCYA.js +6 -5
- package/dist/utils/Component/getComponent.js +2 -2
- package/dist/utils/Component/getComponent.test.js +1 -1
- package/dist/utils/Data/setupFormData.js +3 -3
- package/dist/utils/Data/setupFormData.test.js +6 -6
- package/dist/utils/Data/setupRefDataUrlForComponent.test.js +4 -4
- package/dist/utils/FormPage/getFormPage.js +12 -1
- package/dist/utils/FormPage/getFormPage.test.js +178 -0
- package/dist/utils/FormPage/getFormPages.js +11 -6
- package/dist/utils/FormPage/getFormPages.test.js +95 -0
- package/dist/utils/FormPage/getParagraphFromText.js +6 -0
- package/dist/utils/FormPage/getParagraphFromText.test.js +29 -0
- package/dist/utils/FormPage/useComponent.js +9 -2
- package/dist/utils/FormPage/useComponent.test.js +82 -0
- package/dist/utils/Format/formatData.js +32 -0
- package/dist/utils/Format/formatData.test.js +46 -0
- package/dist/utils/Format/formatDataForComponent.js +41 -0
- package/dist/utils/Format/formatDataForComponent.test.js +161 -0
- package/dist/utils/Format/formatDataForForm.js +33 -0
- package/dist/utils/Format/formatDataForForm.test.js +78 -0
- package/dist/utils/Format/formatDataForPage.js +37 -0
- package/dist/utils/Format/formatDataForPage.test.js +96 -0
- package/dist/utils/Format/index.js +26 -0
- package/dist/utils/Hub/getFormHub.js +18 -4
- package/dist/utils/Hub/getFormHub.test.js +96 -0
- package/dist/utils/Hub/index.js +0 -3
- package/dist/utils/Validate/validatePage.test.js +1 -1
- package/dist/utils/index.js +3 -0
- package/package.json +6 -3
- package/dist/components/FormRenderer/helpers.js +0 -66
- package/dist/components/FormRenderer/helpers.test.js +0 -158
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _models = require("../../../models");
|
|
4
|
+
|
|
5
|
+
var _getNextPageId = _interopRequireDefault(require("./getNextPageId"));
|
|
6
|
+
|
|
7
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
8
|
+
|
|
9
|
+
// Local imports
|
|
10
|
+
describe('components', function () {
|
|
11
|
+
describe('FormRenderer', function () {
|
|
12
|
+
describe('helpers', function () {
|
|
13
|
+
describe('getNextPageId', function () {
|
|
14
|
+
var PAGES = [{
|
|
15
|
+
id: 'alpha'
|
|
16
|
+
}, {
|
|
17
|
+
id: 'bravo'
|
|
18
|
+
}];
|
|
19
|
+
describe("when the form type is '".concat(_models.FormTypes.HUB, "'"), function () {
|
|
20
|
+
var FORM_TYPE = _models.FormTypes.HUB;
|
|
21
|
+
it("should return '".concat(_models.FormPages.HUB, "' by default"), function () {
|
|
22
|
+
expect((0, _getNextPageId.default)(FORM_TYPE, PAGES)).toEqual(_models.FormPages.HUB);
|
|
23
|
+
});
|
|
24
|
+
it("should return '".concat(_models.FormPages.HUB, "' if the action is '").concat(_models.PageAction.TYPES.SAVE_AND_RETURN, "'"), function () {
|
|
25
|
+
var ACTION = _models.PageAction.DEFAULTS.saveAndReturn;
|
|
26
|
+
expect((0, _getNextPageId.default)(FORM_TYPE, PAGES, PAGES[0].id, ACTION)).toEqual(_models.FormPages.HUB);
|
|
27
|
+
});
|
|
28
|
+
it('should return action.nextPageId if specified', function () {
|
|
29
|
+
var ACTION = {
|
|
30
|
+
nextPageId: 'bob'
|
|
31
|
+
};
|
|
32
|
+
expect((0, _getNextPageId.default)(FORM_TYPE, PAGES, undefined, ACTION)).toEqual(ACTION.nextPageId);
|
|
33
|
+
});
|
|
34
|
+
});
|
|
35
|
+
describe("when the form type is '".concat(_models.FormTypes.CYA, "'"), function () {
|
|
36
|
+
var FORM_TYPE = _models.FormTypes.CYA;
|
|
37
|
+
it('should return the first page by default', function () {
|
|
38
|
+
expect((0, _getNextPageId.default)(FORM_TYPE, PAGES)).toEqual(PAGES[0].id);
|
|
39
|
+
});
|
|
40
|
+
it('should return the second page when on the first page', function () {
|
|
41
|
+
expect((0, _getNextPageId.default)(FORM_TYPE, PAGES, PAGES[0].id)).toEqual(PAGES[1].id);
|
|
42
|
+
});
|
|
43
|
+
it("should return '".concat(_models.FormPages.CYA, "' when on the last page"), function () {
|
|
44
|
+
expect((0, _getNextPageId.default)(FORM_TYPE, PAGES, PAGES[PAGES.length - 1].id)).toEqual(_models.FormPages.CYA);
|
|
45
|
+
});
|
|
46
|
+
it("should return undefined if the action is '".concat(_models.PageAction.TYPES.SAVE_AND_RETURN, "'"), function () {
|
|
47
|
+
var ACTION = _models.PageAction.DEFAULTS.saveAndReturn;
|
|
48
|
+
expect((0, _getNextPageId.default)(FORM_TYPE, PAGES, PAGES[0].id, ACTION)).toBeUndefined();
|
|
49
|
+
});
|
|
50
|
+
});
|
|
51
|
+
describe("when the form type is '".concat(_models.FormTypes.WIZARD, "'"), function () {
|
|
52
|
+
var FORM_TYPE = _models.FormTypes.WIZARD;
|
|
53
|
+
it('should return the first page by default', function () {
|
|
54
|
+
expect((0, _getNextPageId.default)(FORM_TYPE, PAGES)).toEqual(PAGES[0].id);
|
|
55
|
+
});
|
|
56
|
+
it('should return the second page when on the first page', function () {
|
|
57
|
+
expect((0, _getNextPageId.default)(FORM_TYPE, PAGES, PAGES[0].id)).toEqual(PAGES[1].id);
|
|
58
|
+
});
|
|
59
|
+
it('should return undefined when on the last page', function () {
|
|
60
|
+
expect((0, _getNextPageId.default)(FORM_TYPE, PAGES, PAGES[PAGES.length - 1].id)).toBeUndefined();
|
|
61
|
+
});
|
|
62
|
+
it("should return undefined if the action is '".concat(_models.PageAction.TYPES.SAVE_AND_RETURN, "'"), function () {
|
|
63
|
+
var ACTION = _models.PageAction.DEFAULTS.saveAndReturn;
|
|
64
|
+
expect((0, _getNextPageId.default)(FORM_TYPE, PAGES, PAGES[0].id, ACTION)).toBeUndefined();
|
|
65
|
+
});
|
|
66
|
+
});
|
|
67
|
+
describe("when the form type is '".concat(_models.FormTypes.FORM, "'"), function () {
|
|
68
|
+
var FORM_TYPE = _models.FormTypes.FORM;
|
|
69
|
+
it("should always return the first page if there any pages and the action is not '".concat(_models.PageAction.TYPES.SAVE_AND_RETURN, "'"), function () {
|
|
70
|
+
var ACTION = {
|
|
71
|
+
type: _models.PageAction.TYPES.SUBMIT,
|
|
72
|
+
nextPageId: 'bob'
|
|
73
|
+
};
|
|
74
|
+
expect((0, _getNextPageId.default)(FORM_TYPE, PAGES)).toEqual(PAGES[0].id);
|
|
75
|
+
expect((0, _getNextPageId.default)(FORM_TYPE, PAGES, PAGES[0].id)).toEqual(PAGES[0].id);
|
|
76
|
+
expect((0, _getNextPageId.default)(FORM_TYPE, PAGES, PAGES[1].id)).toEqual(PAGES[0].id);
|
|
77
|
+
expect((0, _getNextPageId.default)(FORM_TYPE, PAGES, PAGES[0].id, ACTION)).toEqual(PAGES[0].id);
|
|
78
|
+
});
|
|
79
|
+
it("should return undefined if the action is '".concat(_models.PageAction.TYPES.SAVE_AND_RETURN, "'"), function () {
|
|
80
|
+
var ACTION = _models.PageAction.DEFAULTS.saveAndReturn;
|
|
81
|
+
expect((0, _getNextPageId.default)(FORM_TYPE, PAGES, PAGES[0].id, ACTION)).toBeUndefined();
|
|
82
|
+
});
|
|
83
|
+
it('should return undefined if there are no pages', function () {
|
|
84
|
+
expect((0, _getNextPageId.default)(FORM_TYPE, [])).toBeUndefined();
|
|
85
|
+
});
|
|
86
|
+
});
|
|
87
|
+
});
|
|
88
|
+
});
|
|
89
|
+
});
|
|
90
|
+
});
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _models = require("../../../models");
|
|
9
|
+
|
|
10
|
+
// Local imports
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Gets the current page to render, which may be undefined if the current page is the "hub".
|
|
14
|
+
* @param {string} pageId The current page identifier.
|
|
15
|
+
* @param {Array} pages All of the pages in the form.
|
|
16
|
+
* @param {object} hub The hub, if there is one.
|
|
17
|
+
* @returns The current page to render.
|
|
18
|
+
*/
|
|
19
|
+
var getPage = function getPage(pageId, pages, hub) {
|
|
20
|
+
if (pageId) {
|
|
21
|
+
if (pageId === _models.FormPages.HUB) {
|
|
22
|
+
return hub === _models.HubFormats.CYA ? undefined : hub;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
return pages.find(function (p) {
|
|
26
|
+
return p.id === pageId;
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
return undefined;
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
var _default = getPage;
|
|
34
|
+
exports.default = _default;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _models = require("../../../models");
|
|
4
|
+
|
|
5
|
+
var _getPage = _interopRequireDefault(require("./getPage"));
|
|
6
|
+
|
|
7
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
8
|
+
|
|
9
|
+
// Local imports
|
|
10
|
+
describe('components', function () {
|
|
11
|
+
describe('FormRenderer', function () {
|
|
12
|
+
describe('helpers', function () {
|
|
13
|
+
var HUB = {
|
|
14
|
+
id: _models.FormPages.HUB,
|
|
15
|
+
components: []
|
|
16
|
+
};
|
|
17
|
+
var PAGES = [{
|
|
18
|
+
id: 'alpha',
|
|
19
|
+
components: ['x']
|
|
20
|
+
}, {
|
|
21
|
+
id: 'bravo',
|
|
22
|
+
components: ['y', 'z']
|
|
23
|
+
}, HUB];
|
|
24
|
+
describe('getPage', function () {
|
|
25
|
+
it('should give undefined if the pageId is undefined', function () {
|
|
26
|
+
expect((0, _getPage.default)(undefined, PAGES, _models.HubFormats.CYA)).toBeUndefined();
|
|
27
|
+
});
|
|
28
|
+
it('should give undefined if the pageId is "hub" but the hub is the CYA', function () {
|
|
29
|
+
expect((0, _getPage.default)(_models.FormPages.HUB, PAGES, _models.HubFormats.CYA)).toBeUndefined();
|
|
30
|
+
});
|
|
31
|
+
it('should give hub if the pageId is "hub" and the hub is NOT the CYA', function () {
|
|
32
|
+
expect((0, _getPage.default)(_models.FormPages.HUB, PAGES, HUB)).toEqual(HUB);
|
|
33
|
+
});
|
|
34
|
+
it('should give find the appropriate page if the pageId is not "hub"', function () {
|
|
35
|
+
expect((0, _getPage.default)('alpha', PAGES, HUB)).toEqual({
|
|
36
|
+
id: 'alpha',
|
|
37
|
+
components: ['x']
|
|
38
|
+
});
|
|
39
|
+
});
|
|
40
|
+
it('should give undefined if the pageId is not "hub" and not found in the pages collection', function () {
|
|
41
|
+
expect((0, _getPage.default)('charlie', PAGES, HUB)).toBeUndefined();
|
|
42
|
+
});
|
|
43
|
+
});
|
|
44
|
+
});
|
|
45
|
+
});
|
|
46
|
+
});
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.helpers = exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _canActionProceed = _interopRequireDefault(require("./canActionProceed"));
|
|
9
|
+
|
|
10
|
+
var _canCYASubmit = _interopRequireDefault(require("./canCYASubmit"));
|
|
11
|
+
|
|
12
|
+
var _getFormState = _interopRequireDefault(require("./getFormState"));
|
|
13
|
+
|
|
14
|
+
var _getNextPageId = _interopRequireDefault(require("./getNextPageId"));
|
|
15
|
+
|
|
16
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
|
+
|
|
18
|
+
// Local imports
|
|
19
|
+
var helpers = {
|
|
20
|
+
canActionProceed: _canActionProceed.default,
|
|
21
|
+
canCYASubmit: _canCYASubmit.default,
|
|
22
|
+
getFormState: _getFormState.default,
|
|
23
|
+
getNextPageId: _getNextPageId.default
|
|
24
|
+
};
|
|
25
|
+
exports.helpers = helpers;
|
|
26
|
+
var _default = helpers;
|
|
27
|
+
exports.default = _default;
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = exports.DEFAULT_LABEL = void 0;
|
|
7
|
+
|
|
8
|
+
var _copReactComponents = require("@ukhomeoffice/cop-react-components");
|
|
9
|
+
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
|
|
12
|
+
var _react = _interopRequireDefault(require("react"));
|
|
13
|
+
|
|
14
|
+
var _models = require("../../models");
|
|
15
|
+
|
|
16
|
+
var _excluded = ["action", "onAction"];
|
|
17
|
+
|
|
18
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
+
|
|
20
|
+
function _extends() { _extends = Object.assign || 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); }
|
|
21
|
+
|
|
22
|
+
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; }
|
|
23
|
+
|
|
24
|
+
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; }
|
|
25
|
+
|
|
26
|
+
var DEFAULT_LABEL = 'Continue';
|
|
27
|
+
exports.DEFAULT_LABEL = DEFAULT_LABEL;
|
|
28
|
+
|
|
29
|
+
var ActionButton = function ActionButton(_ref) {
|
|
30
|
+
var _action = _ref.action,
|
|
31
|
+
onAction = _ref.onAction,
|
|
32
|
+
attrs = _objectWithoutProperties(_ref, _excluded);
|
|
33
|
+
|
|
34
|
+
var action = typeof _action === 'string' ? _models.PageAction.DEFAULTS[_action] : _action;
|
|
35
|
+
|
|
36
|
+
if (!action) {
|
|
37
|
+
return null;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
return /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, _extends({}, attrs, {
|
|
41
|
+
className: action.className,
|
|
42
|
+
classModifiers: action.classModifiers,
|
|
43
|
+
start: action.start || false,
|
|
44
|
+
onClick: function onClick() {
|
|
45
|
+
return onAction(action);
|
|
46
|
+
}
|
|
47
|
+
}), action.label || DEFAULT_LABEL);
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
ActionButton.propTypes = {
|
|
51
|
+
action: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]).isRequired,
|
|
52
|
+
onAction: _propTypes.default.func.isRequired
|
|
53
|
+
};
|
|
54
|
+
ActionButton.defaultProps = {
|
|
55
|
+
action: ''
|
|
56
|
+
};
|
|
57
|
+
var _default = ActionButton;
|
|
58
|
+
exports.default = _default;
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
4
|
+
|
|
5
|
+
var _react = require("@testing-library/react");
|
|
6
|
+
|
|
7
|
+
var _react2 = _interopRequireDefault(require("react"));
|
|
8
|
+
|
|
9
|
+
var _models = require("../../models");
|
|
10
|
+
|
|
11
|
+
var _ActionButton = _interopRequireWildcard(require("./ActionButton"));
|
|
12
|
+
|
|
13
|
+
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); }
|
|
14
|
+
|
|
15
|
+
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; }
|
|
16
|
+
|
|
17
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
18
|
+
|
|
19
|
+
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
|
|
20
|
+
|
|
21
|
+
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
|
|
22
|
+
|
|
23
|
+
describe('components', function () {
|
|
24
|
+
describe('PageActions.ActionButton', function () {
|
|
25
|
+
var ON_ACTION_CALLS = [];
|
|
26
|
+
|
|
27
|
+
var ON_ACTION = function ON_ACTION(action) {
|
|
28
|
+
ON_ACTION_CALLS.push(action);
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
beforeEach(function () {
|
|
32
|
+
ON_ACTION_CALLS.length = 0;
|
|
33
|
+
});
|
|
34
|
+
it('should handle an unknown action identifier', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
|
|
35
|
+
var ACTION, _render, container;
|
|
36
|
+
|
|
37
|
+
return regeneratorRuntime.wrap(function _callee$(_context) {
|
|
38
|
+
while (1) {
|
|
39
|
+
switch (_context.prev = _context.next) {
|
|
40
|
+
case 0:
|
|
41
|
+
ACTION = 'unknown';
|
|
42
|
+
_render = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_ActionButton.default, {
|
|
43
|
+
action: ACTION,
|
|
44
|
+
onAction: ON_ACTION
|
|
45
|
+
})), container = _render.container;
|
|
46
|
+
expect(container.childNodes.length).toEqual(0);
|
|
47
|
+
|
|
48
|
+
case 3:
|
|
49
|
+
case "end":
|
|
50
|
+
return _context.stop();
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}, _callee);
|
|
54
|
+
})));
|
|
55
|
+
it('should appropriately display a submit action', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
|
|
56
|
+
var ACTION, _render2, container, button;
|
|
57
|
+
|
|
58
|
+
return regeneratorRuntime.wrap(function _callee2$(_context2) {
|
|
59
|
+
while (1) {
|
|
60
|
+
switch (_context2.prev = _context2.next) {
|
|
61
|
+
case 0:
|
|
62
|
+
ACTION = 'submit';
|
|
63
|
+
_render2 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_ActionButton.default, {
|
|
64
|
+
action: ACTION,
|
|
65
|
+
onAction: ON_ACTION
|
|
66
|
+
})), container = _render2.container;
|
|
67
|
+
button = container.childNodes[0];
|
|
68
|
+
expect(button.tagName).toEqual('BUTTON');
|
|
69
|
+
expect(button.textContent).toEqual(_ActionButton.DEFAULT_LABEL); // Click the button and make sure it fires the onAction handler.
|
|
70
|
+
|
|
71
|
+
_react.fireEvent.click(button, {});
|
|
72
|
+
|
|
73
|
+
expect(ON_ACTION_CALLS.length).toEqual(1);
|
|
74
|
+
expect(ON_ACTION_CALLS[0]).toEqual(_models.PageAction.DEFAULTS.submit);
|
|
75
|
+
|
|
76
|
+
case 8:
|
|
77
|
+
case "end":
|
|
78
|
+
return _context2.stop();
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
}, _callee2);
|
|
82
|
+
})));
|
|
83
|
+
it('should appropriately display a custom action', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
|
|
84
|
+
var ACTION, _render3, container, button;
|
|
85
|
+
|
|
86
|
+
return regeneratorRuntime.wrap(function _callee3$(_context3) {
|
|
87
|
+
while (1) {
|
|
88
|
+
switch (_context3.prev = _context3.next) {
|
|
89
|
+
case 0:
|
|
90
|
+
ACTION = {
|
|
91
|
+
type: 'navigate',
|
|
92
|
+
url: '/alpha',
|
|
93
|
+
label: 'Alpha'
|
|
94
|
+
};
|
|
95
|
+
_render3 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_ActionButton.default, {
|
|
96
|
+
action: ACTION,
|
|
97
|
+
onAction: ON_ACTION
|
|
98
|
+
})), container = _render3.container;
|
|
99
|
+
button = container.childNodes[0];
|
|
100
|
+
expect(button.tagName).toEqual('BUTTON');
|
|
101
|
+
expect(button.textContent).toEqual(ACTION.label); // Click the button and make sure it fires the onAction handler.
|
|
102
|
+
|
|
103
|
+
_react.fireEvent.click(button, {});
|
|
104
|
+
|
|
105
|
+
expect(ON_ACTION_CALLS.length).toEqual(1);
|
|
106
|
+
expect(ON_ACTION_CALLS[0]).toEqual(ACTION);
|
|
107
|
+
|
|
108
|
+
case 8:
|
|
109
|
+
case "end":
|
|
110
|
+
return _context3.stop();
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
}, _callee3);
|
|
114
|
+
})));
|
|
115
|
+
});
|
|
116
|
+
});
|
|
@@ -3,47 +3,40 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default =
|
|
6
|
+
exports.default = void 0;
|
|
7
7
|
|
|
8
|
-
var
|
|
8
|
+
var _copReactComponents = require("@ukhomeoffice/cop-react-components");
|
|
9
9
|
|
|
10
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var _react = _interopRequireDefault(require("react"));
|
|
13
|
+
|
|
14
|
+
var _ActionButton = _interopRequireDefault(require("./ActionButton"));
|
|
13
15
|
|
|
14
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
17
|
|
|
16
18
|
// Global imports
|
|
17
|
-
|
|
18
|
-
exports.DEFAULT_LABEL = DEFAULT_LABEL;
|
|
19
|
-
var DEFAULT_ACTIONS = {
|
|
20
|
-
submit: {
|
|
21
|
-
type: 'submit',
|
|
22
|
-
validate: true
|
|
23
|
-
}
|
|
24
|
-
};
|
|
25
|
-
exports.DEFAULT_ACTIONS = DEFAULT_ACTIONS;
|
|
26
|
-
|
|
19
|
+
// Local imports
|
|
27
20
|
var PageActions = function PageActions(_ref) {
|
|
28
21
|
var actions = _ref.actions,
|
|
29
22
|
onAction = _ref.onAction;
|
|
30
23
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
24
|
+
if (!actions || actions.length === 0) {
|
|
25
|
+
return null;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
return /*#__PURE__*/_react.default.createElement(_copReactComponents.ButtonGroup, null, actions.map(function (action, index) {
|
|
29
|
+
return /*#__PURE__*/_react.default.createElement(_ActionButton.default, {
|
|
34
30
|
key: index,
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
}, props.label || DEFAULT_LABEL);
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
return /*#__PURE__*/_react.default.createElement(_copReactComponents.ButtonGroup, null, actions.map(getAction));
|
|
31
|
+
action: action,
|
|
32
|
+
onAction: onAction
|
|
33
|
+
});
|
|
34
|
+
}));
|
|
43
35
|
};
|
|
44
36
|
|
|
45
37
|
PageActions.propTypes = {
|
|
46
|
-
actions: _propTypes.default.array
|
|
38
|
+
actions: _propTypes.default.array,
|
|
39
|
+
onAction: _propTypes.default.func.isRequired
|
|
47
40
|
};
|
|
48
41
|
var _default = PageActions;
|
|
49
42
|
exports.default = _default;
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
<!-- Global imports -->
|
|
2
|
+
import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
|
|
3
|
+
import { Details, Heading, Link } from '@ukhomeoffice/cop-react-components';
|
|
4
|
+
|
|
5
|
+
<!-- Local imports -->
|
|
6
|
+
import Utils from '../../utils';
|
|
7
|
+
import PageActions from './PageActions';
|
|
8
|
+
|
|
9
|
+
<!-- JSON documents -->
|
|
10
|
+
import CIVIL_SERVANT from '../../json/areYouACivilServant.json';
|
|
11
|
+
import GRADE from '../../json/grade.json';
|
|
12
|
+
import TEAMS from '../../json/team.json';
|
|
13
|
+
import USER_PROFILE_DATA from '../../json/userProfile.data.json';
|
|
14
|
+
import USER_PROFILE from '../../json/userProfile.json';
|
|
15
|
+
|
|
16
|
+
<Meta title="Components/Page actions" id="D-PageActions" component={ PageActions } />
|
|
17
|
+
|
|
18
|
+
<Heading size="xl" caption="Components">Page actions</Heading>
|
|
19
|
+
|
|
20
|
+
Renders the buttons at the bottom of a Page.
|
|
21
|
+
|
|
22
|
+
<Canvas withToolbar>
|
|
23
|
+
<Story name="Default">
|
|
24
|
+
{() => {
|
|
25
|
+
const ACTIONS = ['submit'];
|
|
26
|
+
const ON_ACTION = (action, patch, onError) => {
|
|
27
|
+
console.log('action invoked', action, patch);
|
|
28
|
+
};
|
|
29
|
+
return (
|
|
30
|
+
<PageActions actions={ACTIONS} onAction={ON_ACTION} />
|
|
31
|
+
);
|
|
32
|
+
}}
|
|
33
|
+
</Story>
|
|
34
|
+
</Canvas>
|
|
35
|
+
|
|
36
|
+
<Details summary="Properties" className="no-indent">
|
|
37
|
+
<ArgsTable of={ PageActions } />
|
|
38
|
+
</Details>
|
|
39
|
+
|
|
40
|
+
## Variations
|
|
41
|
+
### Custom action
|
|
42
|
+
|
|
43
|
+
<Canvas>
|
|
44
|
+
<Story name="Custom action">
|
|
45
|
+
{() => {
|
|
46
|
+
const ACTIONS = [{ type: 'navigate', url: '/profile', label: 'Go to profile' }];
|
|
47
|
+
const ON_ACTION = (action, patch, onError) => {
|
|
48
|
+
console.log('action invoked', action, patch);
|
|
49
|
+
};
|
|
50
|
+
return (
|
|
51
|
+
<PageActions actions={ACTIONS} onAction={ON_ACTION} />
|
|
52
|
+
);
|
|
53
|
+
}}
|
|
54
|
+
</Story>
|
|
55
|
+
</Canvas>
|
|
56
|
+
|
|
57
|
+
### Multiple actions
|
|
58
|
+
|
|
59
|
+
<Canvas>
|
|
60
|
+
<Story name="Multiple actions">
|
|
61
|
+
{() => {
|
|
62
|
+
const ACTIONS = [
|
|
63
|
+
{ type: 'navigate', label: 'Previous' },
|
|
64
|
+
{ type: 'submit', label: 'Next', validate: true }
|
|
65
|
+
];
|
|
66
|
+
const ON_ACTION = (action, patch, onError) => {
|
|
67
|
+
console.log('action invoked', action, patch);
|
|
68
|
+
};
|
|
69
|
+
return (
|
|
70
|
+
<PageActions actions={ACTIONS} onAction={ON_ACTION} />
|
|
71
|
+
);
|
|
72
|
+
}}
|
|
73
|
+
</Story>
|
|
74
|
+
</Canvas>
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _react = require("@testing-library/react");
|
|
4
|
+
|
|
5
|
+
var _react2 = _interopRequireDefault(require("react"));
|
|
6
|
+
|
|
7
|
+
var _models = require("../../models");
|
|
8
|
+
|
|
9
|
+
var _ActionButton = require("./ActionButton");
|
|
10
|
+
|
|
11
|
+
var _PageActions = _interopRequireDefault(require("./PageActions"));
|
|
12
|
+
|
|
13
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
|
+
|
|
15
|
+
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
|
|
16
|
+
|
|
17
|
+
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
|
|
18
|
+
|
|
19
|
+
describe('components', function () {
|
|
20
|
+
describe('PageActions', function () {
|
|
21
|
+
var ON_ACTION_CALLS = [];
|
|
22
|
+
|
|
23
|
+
var ON_ACTION = function ON_ACTION(action) {
|
|
24
|
+
ON_ACTION_CALLS.push(action);
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
beforeEach(function () {
|
|
28
|
+
ON_ACTION_CALLS.length = 0;
|
|
29
|
+
});
|
|
30
|
+
it('should handle an empty array of actions', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
|
|
31
|
+
var ACTIONS, _render, container;
|
|
32
|
+
|
|
33
|
+
return regeneratorRuntime.wrap(function _callee$(_context) {
|
|
34
|
+
while (1) {
|
|
35
|
+
switch (_context.prev = _context.next) {
|
|
36
|
+
case 0:
|
|
37
|
+
ACTIONS = [];
|
|
38
|
+
_render = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_PageActions.default, {
|
|
39
|
+
actions: ACTIONS,
|
|
40
|
+
onAction: ON_ACTION
|
|
41
|
+
})), container = _render.container;
|
|
42
|
+
expect(container.childNodes.length).toEqual(0);
|
|
43
|
+
|
|
44
|
+
case 3:
|
|
45
|
+
case "end":
|
|
46
|
+
return _context.stop();
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}, _callee);
|
|
50
|
+
})));
|
|
51
|
+
it('should appropriately display a single submit action', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
|
|
52
|
+
var ACTIONS, _render2, container, buttonGroup, submit;
|
|
53
|
+
|
|
54
|
+
return regeneratorRuntime.wrap(function _callee2$(_context2) {
|
|
55
|
+
while (1) {
|
|
56
|
+
switch (_context2.prev = _context2.next) {
|
|
57
|
+
case 0:
|
|
58
|
+
ACTIONS = ['submit'];
|
|
59
|
+
_render2 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_PageActions.default, {
|
|
60
|
+
actions: ACTIONS,
|
|
61
|
+
onAction: ON_ACTION
|
|
62
|
+
})), container = _render2.container;
|
|
63
|
+
buttonGroup = container.childNodes[0];
|
|
64
|
+
expect(buttonGroup.childNodes.length).toEqual(ACTIONS.length);
|
|
65
|
+
submit = buttonGroup.childNodes[0];
|
|
66
|
+
expect(submit.tagName).toEqual('BUTTON');
|
|
67
|
+
expect(submit.textContent).toEqual(_ActionButton.DEFAULT_LABEL); // Click the button and make sure it fires the onAction handler.
|
|
68
|
+
|
|
69
|
+
_react.fireEvent.click(submit, {});
|
|
70
|
+
|
|
71
|
+
expect(ON_ACTION_CALLS.length).toEqual(1);
|
|
72
|
+
expect(ON_ACTION_CALLS[0]).toEqual(_models.PageAction.DEFAULTS.submit);
|
|
73
|
+
|
|
74
|
+
case 10:
|
|
75
|
+
case "end":
|
|
76
|
+
return _context2.stop();
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}, _callee2);
|
|
80
|
+
})));
|
|
81
|
+
it('should appropriately display a custom action', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
|
|
82
|
+
var ACTIONS, _render3, container, buttonGroup, navigate;
|
|
83
|
+
|
|
84
|
+
return regeneratorRuntime.wrap(function _callee3$(_context3) {
|
|
85
|
+
while (1) {
|
|
86
|
+
switch (_context3.prev = _context3.next) {
|
|
87
|
+
case 0:
|
|
88
|
+
ACTIONS = [{
|
|
89
|
+
type: 'navigate',
|
|
90
|
+
url: '/alpha',
|
|
91
|
+
label: 'Alpha'
|
|
92
|
+
}];
|
|
93
|
+
_render3 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_PageActions.default, {
|
|
94
|
+
actions: ACTIONS,
|
|
95
|
+
onAction: ON_ACTION
|
|
96
|
+
})), container = _render3.container;
|
|
97
|
+
buttonGroup = container.childNodes[0];
|
|
98
|
+
expect(buttonGroup.childNodes.length).toEqual(1);
|
|
99
|
+
navigate = buttonGroup.childNodes[0];
|
|
100
|
+
expect(navigate.tagName).toEqual('BUTTON');
|
|
101
|
+
expect(buttonGroup.childNodes.length).toEqual(ACTIONS.length); // Click the button and make sure it fires the onAction handler.
|
|
102
|
+
|
|
103
|
+
_react.fireEvent.click(navigate, {});
|
|
104
|
+
|
|
105
|
+
expect(ON_ACTION_CALLS.length).toEqual(1);
|
|
106
|
+
expect(ON_ACTION_CALLS[0]).toEqual(ACTIONS[0]);
|
|
107
|
+
|
|
108
|
+
case 10:
|
|
109
|
+
case "end":
|
|
110
|
+
return _context3.stop();
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
}, _callee3);
|
|
114
|
+
})));
|
|
115
|
+
it('should appropriately display multiple actions', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
|
|
116
|
+
var NAVIGATE, ACTIONS, _render4, container, buttonGroup, navigate, submit;
|
|
117
|
+
|
|
118
|
+
return regeneratorRuntime.wrap(function _callee4$(_context4) {
|
|
119
|
+
while (1) {
|
|
120
|
+
switch (_context4.prev = _context4.next) {
|
|
121
|
+
case 0:
|
|
122
|
+
NAVIGATE = {
|
|
123
|
+
type: 'navigate',
|
|
124
|
+
url: '/alpha',
|
|
125
|
+
label: 'Alpha'
|
|
126
|
+
};
|
|
127
|
+
ACTIONS = [NAVIGATE, 'submit'];
|
|
128
|
+
_render4 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_PageActions.default, {
|
|
129
|
+
actions: ACTIONS,
|
|
130
|
+
onAction: ON_ACTION
|
|
131
|
+
})), container = _render4.container;
|
|
132
|
+
buttonGroup = container.childNodes[0];
|
|
133
|
+
expect(buttonGroup.childNodes.length).toEqual(ACTIONS.length);
|
|
134
|
+
navigate = buttonGroup.childNodes[0];
|
|
135
|
+
expect(navigate.tagName).toEqual('BUTTON');
|
|
136
|
+
expect(navigate.textContent).toEqual(NAVIGATE.label);
|
|
137
|
+
submit = buttonGroup.childNodes[1];
|
|
138
|
+
expect(submit.tagName).toEqual('BUTTON');
|
|
139
|
+
expect(submit.textContent).toEqual(_ActionButton.DEFAULT_LABEL); // Click each button in turn button and make sure it fires the onAction handler.
|
|
140
|
+
|
|
141
|
+
_react.fireEvent.click(navigate, {});
|
|
142
|
+
|
|
143
|
+
_react.fireEvent.click(submit, {});
|
|
144
|
+
|
|
145
|
+
expect(ON_ACTION_CALLS.length).toEqual(2);
|
|
146
|
+
expect(ON_ACTION_CALLS[0]).toEqual(NAVIGATE);
|
|
147
|
+
expect(ON_ACTION_CALLS[1]).toEqual(_models.PageAction.DEFAULTS.submit);
|
|
148
|
+
|
|
149
|
+
case 16:
|
|
150
|
+
case "end":
|
|
151
|
+
return _context4.stop();
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
}, _callee4);
|
|
155
|
+
})));
|
|
156
|
+
});
|
|
157
|
+
});
|