@simplybusiness/mobius 3.0.0 → 3.1.0
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/CHANGELOG.md +7 -0
- package/dist/cjs/components/Chopin/Actions/Actions.d.ts +3 -6
- package/dist/cjs/components/Chopin/Actions/Actions.js +5 -19
- package/dist/cjs/components/Chopin/Actions/Actions.js.map +1 -1
- package/dist/cjs/components/Chopin/Actions/Actions.test.js +24 -24
- package/dist/cjs/components/Chopin/Actions/Actions.test.js.map +1 -1
- package/dist/esm/components/Chopin/Actions/Actions.js +5 -19
- package/dist/esm/components/Chopin/Actions/Actions.js.map +1 -1
- package/dist/esm/components/Chopin/Actions/Actions.test.js +24 -24
- package/dist/esm/components/Chopin/Actions/Actions.test.js.map +1 -1
- package/dist/mobius.d.ts +2 -6
- package/package.json +1 -1
- package/src/components/Chopin/Actions/Actions.story.mdx +32 -19
- package/src/components/Chopin/Actions/Actions.test.tsx +57 -35
- package/src/components/Chopin/Actions/Actions.tsx +16 -32
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file, or link in
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|
6
6
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
7
|
|
|
8
|
+
## [3.1.0] - 2022-11-24
|
|
9
|
+
|
|
10
|
+
### Changed
|
|
11
|
+
|
|
12
|
+
- Refactored props in `Chopin.Actions` molecule to only require back/next labels and respective `LinkButton` props; this allows users to assign any link or button attributes to buttons, e.g. disabled state.
|
|
13
|
+
|
|
8
14
|
## [3.0.0] - 2022-11-23
|
|
9
15
|
|
|
10
16
|
### Breaking Changes
|
|
@@ -83,6 +89,7 @@ Additionally, mobius and themes are available on the public NPM registry and can
|
|
|
83
89
|
|
|
84
90
|
## Github Links
|
|
85
91
|
|
|
92
|
+
[3.1.0]: https://github.com/simplybusiness/mobius/releases/tag/v3.1.0
|
|
86
93
|
[3.0.0]: https://github.com/simplybusiness/mobius/releases/tag/v3.0.0
|
|
87
94
|
[2.18.6]: https://github.com/simplybusiness/mobius/releases/tag/v2.18.6
|
|
88
95
|
|
|
@@ -1,18 +1,15 @@
|
|
|
1
1
|
import { Ref } from "react";
|
|
2
2
|
import { DOMProps } from "@react-types/shared";
|
|
3
3
|
import { ForwardedRefComponent } from "../../../types/components";
|
|
4
|
+
import { type LinkButtonProps } from "../../LinkButton";
|
|
4
5
|
export declare type ActionsElementType = HTMLDivElement;
|
|
5
6
|
export interface ActionsProps extends DOMProps {
|
|
6
7
|
/** Custom class name for setting specific CSS */
|
|
7
8
|
className?: string;
|
|
9
|
+
backButton?: LinkButtonProps;
|
|
10
|
+
nextButton?: LinkButtonProps;
|
|
8
11
|
backLabel?: string;
|
|
9
|
-
backLink?: string;
|
|
10
12
|
nextLabel?: string;
|
|
11
|
-
nextLink?: string;
|
|
12
|
-
backElementType?: React.ElementType;
|
|
13
|
-
nextElementType?: React.ElementType;
|
|
14
|
-
onNextClick?: () => void;
|
|
15
|
-
onBackClick?: () => void;
|
|
16
13
|
}
|
|
17
14
|
export declare type ActionsRef = Ref<ActionsElementType>;
|
|
18
15
|
declare const Actions: ForwardedRefComponent<ActionsProps, ActionsElementType>;
|
|
@@ -21,28 +21,14 @@ const clsx_1 = __importDefault(require("clsx"));
|
|
|
21
21
|
const Flex_1 = require("../../Flex");
|
|
22
22
|
const LinkButton_1 = require("../../LinkButton");
|
|
23
23
|
const Actions = (0, react_1.forwardRef)((props, ref) => {
|
|
24
|
-
const {
|
|
24
|
+
const { className, backButton, nextButton, backLabel, nextLabel } = props, rest = __rest(props, ["className", "backButton", "nextButton", "backLabel", "nextLabel"]);
|
|
25
25
|
const classes = (0, clsx_1.default)("chopin", "chopin/Actions", className);
|
|
26
26
|
const nextButtonClasses = (0, clsx_1.default)("chopin/ActionsNext", {
|
|
27
|
-
"--single-action": !
|
|
27
|
+
"--single-action": !backButton,
|
|
28
28
|
});
|
|
29
|
-
const backButtonProps = {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
variant: "basic",
|
|
33
|
-
icon: "buttonArrowLeft",
|
|
34
|
-
href: backLink,
|
|
35
|
-
to: backLink,
|
|
36
|
-
elementType: backElementType,
|
|
37
|
-
};
|
|
38
|
-
const nextButtonProps = {
|
|
39
|
-
className: nextButtonClasses,
|
|
40
|
-
onClick: onNextClick,
|
|
41
|
-
href: nextLink,
|
|
42
|
-
to: nextLink,
|
|
43
|
-
elementType: nextElementType,
|
|
44
|
-
};
|
|
45
|
-
return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, Object.assign({ ref: ref, className: classes, justifyContent: "center" }, rest, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, Object.assign({ className: "chopin/ActionsContainer", justifyContent: "space-between", alignItems: "center" }, { children: [backLink && ((0, jsx_runtime_1.jsx)(LinkButton_1.LinkButton, Object.assign({}, backButtonProps, { children: backLabel }))), nextLink && ((0, jsx_runtime_1.jsx)(LinkButton_1.LinkButton, Object.assign({}, nextButtonProps, { children: nextLabel })))] })) })));
|
|
29
|
+
const backButtonProps = Object.assign(Object.assign({}, backButton), { className: "chopin/ActionsBack", variant: "basic", icon: "buttonArrowLeft" });
|
|
30
|
+
const nextButtonProps = Object.assign(Object.assign({}, nextButton), { className: nextButtonClasses });
|
|
31
|
+
return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, Object.assign({ ref: ref, className: classes, justifyContent: "center" }, rest, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, Object.assign({ className: "chopin/ActionsContainer", justifyContent: "space-between", alignItems: "center" }, { children: [(backButton === null || backButton === void 0 ? void 0 : backButton.href) && ((0, jsx_runtime_1.jsx)(LinkButton_1.LinkButton, Object.assign({}, backButtonProps, { href: backButtonProps.href }, { children: backLabel }))), (nextButton === null || nextButton === void 0 ? void 0 : nextButton.href) && ((0, jsx_runtime_1.jsx)(LinkButton_1.LinkButton, Object.assign({}, nextButtonProps, { href: nextButtonProps.href }, { children: nextLabel })))] })) })));
|
|
46
32
|
});
|
|
47
33
|
exports.Actions = Actions;
|
|
48
34
|
Actions.displayName = "Actions";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Actions.js","sourceRoot":"","sources":["../../../../../src/components/Chopin/Actions/Actions.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,iCAAwC;AAExC,gDAAwB;AAGxB,qCAAkC;AAElC,
|
|
1
|
+
{"version":3,"file":"Actions.js","sourceRoot":"","sources":["../../../../../src/components/Chopin/Actions/Actions.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,iCAAwC;AAExC,gDAAwB;AAGxB,qCAAkC;AAElC,iDAAoE;AAepE,MAAM,OAAO,GACX,IAAA,kBAAU,EAAC,CAAC,KAAmB,EAAE,GAAe,EAAE,EAAE;IAClD,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,KAC7D,KAAK,EAD6D,IAAI,UACtE,KAAK,EADD,mEAAoE,CACnE,CAAC;IAER,MAAM,OAAO,GAAG,IAAA,cAAI,EAAC,QAAQ,EAAE,gBAAgB,EAAE,SAAS,CAAC,CAAC;IAC5D,MAAM,iBAAiB,GAAG,IAAA,cAAI,EAAC,oBAAoB,EAAE;QACnD,iBAAiB,EAAE,CAAC,UAAU;KAC/B,CAAC,CAAC;IAEH,MAAM,eAAe,mCAChB,UAAU,KACb,SAAS,EAAE,oBAAoB,EAC/B,OAAO,EAAE,OAAkB,EAC3B,IAAI,EAAE,iBAA6B,GACpC,CAAC;IAEF,MAAM,eAAe,mCAChB,UAAU,KACb,SAAS,EAAE,iBAAiB,GAC7B,CAAC;IAEF,OAAO,CACL,uBAAC,WAAI,kBAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,cAAc,EAAC,QAAQ,IAAK,IAAI,cAClE,wBAAC,WAAI,kBACH,SAAS,EAAC,yBAAyB,EACnC,cAAc,EAAC,eAAe,EAC9B,UAAU,EAAC,QAAQ,iBAElB,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,KAAI,CACnB,uBAAC,uBAAU,oBAAK,eAAe,IAAE,IAAI,EAAE,eAAe,CAAC,IAAK,gBACzD,SAAS,IACC,CACd,EACA,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,KAAI,CACnB,uBAAC,uBAAU,oBAAK,eAAe,IAAE,IAAI,EAAE,eAAe,CAAC,IAAK,gBACzD,SAAS,IACC,CACd,KACI,IACF,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAGI,0BAAO;AADhB,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC"}
|
|
@@ -7,40 +7,33 @@ const ACTION_CLASS_NAME = "chopin/Actions";
|
|
|
7
7
|
const BACK_ACTION_CLASS_NAME = "chopin/ActionsBack";
|
|
8
8
|
const NEXT_ACTION_CLASS_NAME = "chopin/ActionsNext";
|
|
9
9
|
const NEXT_SINGLE_ACTION_CLASS_NAME = "--single-action";
|
|
10
|
-
const backLink = "https://test.com";
|
|
11
10
|
const backLabel = "Back";
|
|
12
|
-
const nextLabel = "Next step";
|
|
13
|
-
const nextLink = "https://test.com";
|
|
14
|
-
const mockOnNextClick = jest.fn();
|
|
15
11
|
const mockOnBackClick = jest.fn();
|
|
12
|
+
const BackButton = {
|
|
13
|
+
href: "https://test.com",
|
|
14
|
+
};
|
|
15
|
+
const mockOnNextClick = jest.fn();
|
|
16
|
+
const nextLabel = "Next step";
|
|
17
|
+
const NextButton = {
|
|
18
|
+
href: "https://test.com",
|
|
19
|
+
};
|
|
16
20
|
describe("Actions", () => {
|
|
17
|
-
it("should render without errors", () => {
|
|
18
|
-
const component = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Actions, {}));
|
|
19
|
-
expect(component).toBeTruthy();
|
|
20
|
-
});
|
|
21
21
|
describe("uses correct class names", () => {
|
|
22
|
-
it("uses Chopin class", () => {
|
|
23
|
-
(0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Actions, { "data-testid": "test-id" }));
|
|
24
|
-
expect(react_1.screen.getByTestId("test-id")).toHaveClass("chopin");
|
|
25
|
-
});
|
|
26
|
-
it("uses chopin/Actions class", () => {
|
|
27
|
-
(0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Actions, { "data-testid": "test-id" }));
|
|
28
|
-
expect(react_1.screen.getByTestId("test-id")).toHaveClass(ACTION_CLASS_NAME);
|
|
29
|
-
});
|
|
30
22
|
it("includes custom class name", () => {
|
|
31
|
-
(0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Actions, { "data-testid": "test-id", className: "my-class" }));
|
|
23
|
+
(0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Actions, { "data-testid": "test-id", className: "my-class", nextButton: Object.assign({}, NextButton), nextLabel: nextLabel, backButton: Object.assign({}, BackButton), backLabel: backLabel }));
|
|
24
|
+
expect(react_1.screen.getByTestId("test-id")).toHaveClass("chopin");
|
|
32
25
|
expect(react_1.screen.getByTestId("test-id")).toHaveClass("my-class");
|
|
33
26
|
expect(react_1.screen.getByTestId("test-id")).toHaveClass(ACTION_CLASS_NAME);
|
|
34
27
|
});
|
|
35
28
|
it("uses links class names", () => {
|
|
36
|
-
(0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Actions, {
|
|
29
|
+
(0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Actions, { backButton: Object.assign({}, BackButton), backLabel: backLabel, nextButton: Object.assign({}, NextButton), nextLabel: nextLabel }));
|
|
37
30
|
const nextLinkEl = react_1.screen.getByRole("link", { name: /next step/i });
|
|
38
31
|
expect(react_1.screen.getByRole("link", { name: /back/i })).toHaveClass(BACK_ACTION_CLASS_NAME);
|
|
39
32
|
expect(nextLinkEl).toHaveClass(NEXT_ACTION_CLASS_NAME);
|
|
40
33
|
expect(nextLinkEl).not.toHaveClass(NEXT_SINGLE_ACTION_CLASS_NAME);
|
|
41
34
|
});
|
|
42
35
|
it("uses --single-action class name with one action btn", () => {
|
|
43
|
-
(0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Actions, {
|
|
36
|
+
(0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Actions, { nextButton: Object.assign({}, NextButton), nextLabel: nextLabel }));
|
|
44
37
|
expect(react_1.screen.getByRole("link", { name: /next step/i })).toHaveClass(NEXT_SINGLE_ACTION_CLASS_NAME);
|
|
45
38
|
});
|
|
46
39
|
});
|
|
@@ -58,7 +51,7 @@ describe("Actions", () => {
|
|
|
58
51
|
})).not.toBeInTheDocument();
|
|
59
52
|
});
|
|
60
53
|
it("renders button elements if elementType is button", () => {
|
|
61
|
-
(0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Actions, {
|
|
54
|
+
(0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Actions, { backButton: Object.assign(Object.assign({}, BackButton), { elementType: "button" }), backLabel: backLabel, nextButton: Object.assign(Object.assign({}, NextButton), { elementType: "button" }), nextLabel: nextLabel }));
|
|
62
55
|
expect(react_1.screen.queryByRole("link", {
|
|
63
56
|
name: /back/i,
|
|
64
57
|
})).not.toBeInTheDocument();
|
|
@@ -73,21 +66,28 @@ describe("Actions", () => {
|
|
|
73
66
|
})).toBeInTheDocument();
|
|
74
67
|
});
|
|
75
68
|
it("fires onNextClick handler on click event", () => {
|
|
76
|
-
(0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Actions, {
|
|
69
|
+
(0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Actions, { backButton: Object.assign({}, BackButton), backLabel: backLabel, nextButton: Object.assign(Object.assign({}, NextButton), { elementType: "button", onClick: mockOnNextClick }), nextLabel: nextLabel }));
|
|
77
70
|
const nextActionBtn = react_1.screen.getByRole("button", {
|
|
78
|
-
name: /
|
|
71
|
+
name: /Next step/i,
|
|
79
72
|
});
|
|
80
73
|
react_1.fireEvent.click(nextActionBtn);
|
|
81
74
|
expect(mockOnNextClick).toHaveBeenCalledTimes(1);
|
|
82
75
|
});
|
|
83
76
|
it("fires onBackClick handler on click event", () => {
|
|
84
|
-
(0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Actions, {
|
|
77
|
+
(0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Actions, { backButton: Object.assign(Object.assign({}, BackButton), { elementType: "button", onClick: mockOnBackClick }), backLabel: backLabel, nextButton: Object.assign({}, NextButton), nextLabel: nextLabel }));
|
|
85
78
|
const backActionBtn = react_1.screen.getByRole("button", {
|
|
86
|
-
name: /
|
|
79
|
+
name: /Back/i,
|
|
87
80
|
});
|
|
88
81
|
react_1.fireEvent.click(backActionBtn);
|
|
89
82
|
expect(mockOnBackClick).toHaveBeenCalledTimes(1);
|
|
90
83
|
});
|
|
84
|
+
it("allows buttons to be disabled", () => {
|
|
85
|
+
(0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Actions, { nextButton: Object.assign(Object.assign({}, NextButton), { elementType: "button", isDisabled: true }), nextLabel: nextLabel }));
|
|
86
|
+
const nextActionBtn = react_1.screen.getByRole("button", {
|
|
87
|
+
name: /Next step/i,
|
|
88
|
+
});
|
|
89
|
+
expect(nextActionBtn).toHaveClass("--is-disabled");
|
|
90
|
+
});
|
|
91
91
|
});
|
|
92
92
|
});
|
|
93
93
|
//# sourceMappingURL=Actions.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Actions.test.js","sourceRoot":"","sources":["../../../../../src/components/Chopin/Actions/Actions.test.tsx"],"names":[],"mappings":";;;AAAA,kDAAmE;AACnE,wBAA4B;AAE5B,MAAM,iBAAiB,GAAG,gBAAgB,CAAC;AAC3C,MAAM,sBAAsB,GAAG,oBAAoB,CAAC;AACpD,MAAM,sBAAsB,GAAG,oBAAoB,CAAC;AACpD,MAAM,6BAA6B,GAAG,iBAAiB,CAAC;AAExD,MAAM,
|
|
1
|
+
{"version":3,"file":"Actions.test.js","sourceRoot":"","sources":["../../../../../src/components/Chopin/Actions/Actions.test.tsx"],"names":[],"mappings":"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"}
|
|
@@ -15,28 +15,14 @@ import clsx from "clsx";
|
|
|
15
15
|
import { Flex } from "../../Flex";
|
|
16
16
|
import { LinkButton } from "../../LinkButton";
|
|
17
17
|
const Actions = forwardRef((props, ref) => {
|
|
18
|
-
const {
|
|
18
|
+
const { className, backButton, nextButton, backLabel, nextLabel } = props, rest = __rest(props, ["className", "backButton", "nextButton", "backLabel", "nextLabel"]);
|
|
19
19
|
const classes = clsx("chopin", "chopin/Actions", className);
|
|
20
20
|
const nextButtonClasses = clsx("chopin/ActionsNext", {
|
|
21
|
-
"--single-action": !
|
|
21
|
+
"--single-action": !backButton,
|
|
22
22
|
});
|
|
23
|
-
const backButtonProps = {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
variant: "basic",
|
|
27
|
-
icon: "buttonArrowLeft",
|
|
28
|
-
href: backLink,
|
|
29
|
-
to: backLink,
|
|
30
|
-
elementType: backElementType,
|
|
31
|
-
};
|
|
32
|
-
const nextButtonProps = {
|
|
33
|
-
className: nextButtonClasses,
|
|
34
|
-
onClick: onNextClick,
|
|
35
|
-
href: nextLink,
|
|
36
|
-
to: nextLink,
|
|
37
|
-
elementType: nextElementType,
|
|
38
|
-
};
|
|
39
|
-
return (_jsx(Flex, Object.assign({ ref: ref, className: classes, justifyContent: "center" }, rest, { children: _jsxs(Flex, Object.assign({ className: "chopin/ActionsContainer", justifyContent: "space-between", alignItems: "center" }, { children: [backLink && (_jsx(LinkButton, Object.assign({}, backButtonProps, { children: backLabel }))), nextLink && (_jsx(LinkButton, Object.assign({}, nextButtonProps, { children: nextLabel })))] })) })));
|
|
23
|
+
const backButtonProps = Object.assign(Object.assign({}, backButton), { className: "chopin/ActionsBack", variant: "basic", icon: "buttonArrowLeft" });
|
|
24
|
+
const nextButtonProps = Object.assign(Object.assign({}, nextButton), { className: nextButtonClasses });
|
|
25
|
+
return (_jsx(Flex, Object.assign({ ref: ref, className: classes, justifyContent: "center" }, rest, { children: _jsxs(Flex, Object.assign({ className: "chopin/ActionsContainer", justifyContent: "space-between", alignItems: "center" }, { children: [(backButton === null || backButton === void 0 ? void 0 : backButton.href) && (_jsx(LinkButton, Object.assign({}, backButtonProps, { href: backButtonProps.href }, { children: backLabel }))), (nextButton === null || nextButton === void 0 ? void 0 : nextButton.href) && (_jsx(LinkButton, Object.assign({}, nextButtonProps, { href: nextButtonProps.href }, { children: nextLabel })))] })) })));
|
|
40
26
|
});
|
|
41
27
|
Actions.displayName = "Actions";
|
|
42
28
|
export { Actions };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Actions.js","sourceRoot":"","sources":["../../../../../src/components/Chopin/Actions/Actions.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAO,MAAM,OAAO,CAAC;AAExC,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAElC,OAAO,EAAE,UAAU,
|
|
1
|
+
{"version":3,"file":"Actions.js","sourceRoot":"","sources":["../../../../../src/components/Chopin/Actions/Actions.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAO,MAAM,OAAO,CAAC;AAExC,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAElC,OAAO,EAAE,UAAU,EAAwB,MAAM,kBAAkB,CAAC;AAepE,MAAM,OAAO,GACX,UAAU,CAAC,CAAC,KAAmB,EAAE,GAAe,EAAE,EAAE;IAClD,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,KAC7D,KAAK,EAD6D,IAAI,UACtE,KAAK,EADD,mEAAoE,CACnE,CAAC;IAER,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,EAAE,gBAAgB,EAAE,SAAS,CAAC,CAAC;IAC5D,MAAM,iBAAiB,GAAG,IAAI,CAAC,oBAAoB,EAAE;QACnD,iBAAiB,EAAE,CAAC,UAAU;KAC/B,CAAC,CAAC;IAEH,MAAM,eAAe,mCAChB,UAAU,KACb,SAAS,EAAE,oBAAoB,EAC/B,OAAO,EAAE,OAAkB,EAC3B,IAAI,EAAE,iBAA6B,GACpC,CAAC;IAEF,MAAM,eAAe,mCAChB,UAAU,KACb,SAAS,EAAE,iBAAiB,GAC7B,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,kBAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,cAAc,EAAC,QAAQ,IAAK,IAAI,cAClE,MAAC,IAAI,kBACH,SAAS,EAAC,yBAAyB,EACnC,cAAc,EAAC,eAAe,EAC9B,UAAU,EAAC,QAAQ,iBAElB,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,KAAI,CACnB,KAAC,UAAU,oBAAK,eAAe,IAAE,IAAI,EAAE,eAAe,CAAC,IAAK,gBACzD,SAAS,IACC,CACd,EACA,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,KAAI,CACnB,KAAC,UAAU,oBAAK,eAAe,IAAE,IAAI,EAAE,eAAe,CAAC,IAAK,gBACzD,SAAS,IACC,CACd,KACI,IACF,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEL,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC;AAChC,OAAO,EAAE,OAAO,EAAE,CAAC"}
|
|
@@ -5,40 +5,33 @@ const ACTION_CLASS_NAME = "chopin/Actions";
|
|
|
5
5
|
const BACK_ACTION_CLASS_NAME = "chopin/ActionsBack";
|
|
6
6
|
const NEXT_ACTION_CLASS_NAME = "chopin/ActionsNext";
|
|
7
7
|
const NEXT_SINGLE_ACTION_CLASS_NAME = "--single-action";
|
|
8
|
-
const backLink = "https://test.com";
|
|
9
8
|
const backLabel = "Back";
|
|
10
|
-
const nextLabel = "Next step";
|
|
11
|
-
const nextLink = "https://test.com";
|
|
12
|
-
const mockOnNextClick = jest.fn();
|
|
13
9
|
const mockOnBackClick = jest.fn();
|
|
10
|
+
const BackButton = {
|
|
11
|
+
href: "https://test.com",
|
|
12
|
+
};
|
|
13
|
+
const mockOnNextClick = jest.fn();
|
|
14
|
+
const nextLabel = "Next step";
|
|
15
|
+
const NextButton = {
|
|
16
|
+
href: "https://test.com",
|
|
17
|
+
};
|
|
14
18
|
describe("Actions", () => {
|
|
15
|
-
it("should render without errors", () => {
|
|
16
|
-
const component = render(_jsx(Actions, {}));
|
|
17
|
-
expect(component).toBeTruthy();
|
|
18
|
-
});
|
|
19
19
|
describe("uses correct class names", () => {
|
|
20
|
-
it("uses Chopin class", () => {
|
|
21
|
-
render(_jsx(Actions, { "data-testid": "test-id" }));
|
|
22
|
-
expect(screen.getByTestId("test-id")).toHaveClass("chopin");
|
|
23
|
-
});
|
|
24
|
-
it("uses chopin/Actions class", () => {
|
|
25
|
-
render(_jsx(Actions, { "data-testid": "test-id" }));
|
|
26
|
-
expect(screen.getByTestId("test-id")).toHaveClass(ACTION_CLASS_NAME);
|
|
27
|
-
});
|
|
28
20
|
it("includes custom class name", () => {
|
|
29
|
-
render(_jsx(Actions, { "data-testid": "test-id", className: "my-class" }));
|
|
21
|
+
render(_jsx(Actions, { "data-testid": "test-id", className: "my-class", nextButton: Object.assign({}, NextButton), nextLabel: nextLabel, backButton: Object.assign({}, BackButton), backLabel: backLabel }));
|
|
22
|
+
expect(screen.getByTestId("test-id")).toHaveClass("chopin");
|
|
30
23
|
expect(screen.getByTestId("test-id")).toHaveClass("my-class");
|
|
31
24
|
expect(screen.getByTestId("test-id")).toHaveClass(ACTION_CLASS_NAME);
|
|
32
25
|
});
|
|
33
26
|
it("uses links class names", () => {
|
|
34
|
-
render(_jsx(Actions, {
|
|
27
|
+
render(_jsx(Actions, { backButton: Object.assign({}, BackButton), backLabel: backLabel, nextButton: Object.assign({}, NextButton), nextLabel: nextLabel }));
|
|
35
28
|
const nextLinkEl = screen.getByRole("link", { name: /next step/i });
|
|
36
29
|
expect(screen.getByRole("link", { name: /back/i })).toHaveClass(BACK_ACTION_CLASS_NAME);
|
|
37
30
|
expect(nextLinkEl).toHaveClass(NEXT_ACTION_CLASS_NAME);
|
|
38
31
|
expect(nextLinkEl).not.toHaveClass(NEXT_SINGLE_ACTION_CLASS_NAME);
|
|
39
32
|
});
|
|
40
33
|
it("uses --single-action class name with one action btn", () => {
|
|
41
|
-
render(_jsx(Actions, {
|
|
34
|
+
render(_jsx(Actions, { nextButton: Object.assign({}, NextButton), nextLabel: nextLabel }));
|
|
42
35
|
expect(screen.getByRole("link", { name: /next step/i })).toHaveClass(NEXT_SINGLE_ACTION_CLASS_NAME);
|
|
43
36
|
});
|
|
44
37
|
});
|
|
@@ -56,7 +49,7 @@ describe("Actions", () => {
|
|
|
56
49
|
})).not.toBeInTheDocument();
|
|
57
50
|
});
|
|
58
51
|
it("renders button elements if elementType is button", () => {
|
|
59
|
-
render(_jsx(Actions, {
|
|
52
|
+
render(_jsx(Actions, { backButton: Object.assign(Object.assign({}, BackButton), { elementType: "button" }), backLabel: backLabel, nextButton: Object.assign(Object.assign({}, NextButton), { elementType: "button" }), nextLabel: nextLabel }));
|
|
60
53
|
expect(screen.queryByRole("link", {
|
|
61
54
|
name: /back/i,
|
|
62
55
|
})).not.toBeInTheDocument();
|
|
@@ -71,21 +64,28 @@ describe("Actions", () => {
|
|
|
71
64
|
})).toBeInTheDocument();
|
|
72
65
|
});
|
|
73
66
|
it("fires onNextClick handler on click event", () => {
|
|
74
|
-
render(_jsx(Actions, {
|
|
67
|
+
render(_jsx(Actions, { backButton: Object.assign({}, BackButton), backLabel: backLabel, nextButton: Object.assign(Object.assign({}, NextButton), { elementType: "button", onClick: mockOnNextClick }), nextLabel: nextLabel }));
|
|
75
68
|
const nextActionBtn = screen.getByRole("button", {
|
|
76
|
-
name: /
|
|
69
|
+
name: /Next step/i,
|
|
77
70
|
});
|
|
78
71
|
fireEvent.click(nextActionBtn);
|
|
79
72
|
expect(mockOnNextClick).toHaveBeenCalledTimes(1);
|
|
80
73
|
});
|
|
81
74
|
it("fires onBackClick handler on click event", () => {
|
|
82
|
-
render(_jsx(Actions, {
|
|
75
|
+
render(_jsx(Actions, { backButton: Object.assign(Object.assign({}, BackButton), { elementType: "button", onClick: mockOnBackClick }), backLabel: backLabel, nextButton: Object.assign({}, NextButton), nextLabel: nextLabel }));
|
|
83
76
|
const backActionBtn = screen.getByRole("button", {
|
|
84
|
-
name: /
|
|
77
|
+
name: /Back/i,
|
|
85
78
|
});
|
|
86
79
|
fireEvent.click(backActionBtn);
|
|
87
80
|
expect(mockOnBackClick).toHaveBeenCalledTimes(1);
|
|
88
81
|
});
|
|
82
|
+
it("allows buttons to be disabled", () => {
|
|
83
|
+
render(_jsx(Actions, { nextButton: Object.assign(Object.assign({}, NextButton), { elementType: "button", isDisabled: true }), nextLabel: nextLabel }));
|
|
84
|
+
const nextActionBtn = screen.getByRole("button", {
|
|
85
|
+
name: /Next step/i,
|
|
86
|
+
});
|
|
87
|
+
expect(nextActionBtn).toHaveClass("--is-disabled");
|
|
88
|
+
});
|
|
89
89
|
});
|
|
90
90
|
});
|
|
91
91
|
//# sourceMappingURL=Actions.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Actions.test.js","sourceRoot":"","sources":["../../../../../src/components/Chopin/Actions/Actions.test.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,OAAO,EAAE,MAAM,GAAG,CAAC;AAE5B,MAAM,iBAAiB,GAAG,gBAAgB,CAAC;AAC3C,MAAM,sBAAsB,GAAG,oBAAoB,CAAC;AACpD,MAAM,sBAAsB,GAAG,oBAAoB,CAAC;AACpD,MAAM,6BAA6B,GAAG,iBAAiB,CAAC;AAExD,MAAM,
|
|
1
|
+
{"version":3,"file":"Actions.test.js","sourceRoot":"","sources":["../../../../../src/components/Chopin/Actions/Actions.test.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,OAAO,EAAE,MAAM,GAAG,CAAC;AAE5B,MAAM,iBAAiB,GAAG,gBAAgB,CAAC;AAC3C,MAAM,sBAAsB,GAAG,oBAAoB,CAAC;AACpD,MAAM,sBAAsB,GAAG,oBAAoB,CAAC;AACpD,MAAM,6BAA6B,GAAG,iBAAiB,CAAC;AAExD,MAAM,SAAS,GAAG,MAAM,CAAC;AACzB,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;AAClC,MAAM,UAAU,GAAG;IACjB,IAAI,EAAE,kBAAkB;CACzB,CAAC;AACF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;AAClC,MAAM,SAAS,GAAG,WAAW,CAAC;AAC9B,MAAM,UAAU,GAAG;IACjB,IAAI,EAAE,kBAAkB;CACzB,CAAC;AAEF,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;IACvB,QAAQ,CAAC,0BAA0B,EAAE,GAAG,EAAE;QACxC,EAAE,CAAC,4BAA4B,EAAE,GAAG,EAAE;YACpC,MAAM,CACJ,KAAC,OAAO,mBACM,SAAS,EACrB,SAAS,EAAC,UAAU,EACpB,UAAU,oBAAO,UAAU,GAC3B,SAAS,EAAE,SAAS,EACpB,UAAU,oBAAO,UAAU,GAC3B,SAAS,EAAE,SAAS,GACpB,CACH,CAAC;YACF,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;YAC5D,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;YAC9D,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC;QACvE,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,wBAAwB,EAAE,GAAG,EAAE;YAChC,MAAM,CACJ,KAAC,OAAO,IACN,UAAU,oBAAO,UAAU,GAC3B,SAAS,EAAE,SAAS,EACpB,UAAU,oBAAO,UAAU,GAC3B,SAAS,EAAE,SAAS,GACpB,CACH,CAAC;YACF,MAAM,UAAU,GAAG,MAAM,CAAC,SAAS,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,CAAC;YACpE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,WAAW,CAC7D,sBAAsB,CACvB,CAAC;YACF,MAAM,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,sBAAsB,CAAC,CAAC;YACvD,MAAM,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,WAAW,CAAC,6BAA6B,CAAC,CAAC;QACpE,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,qDAAqD,EAAE,GAAG,EAAE;YAC7D,MAAM,CAAC,KAAC,OAAO,IAAC,UAAU,oBAAO,UAAU,GAAI,SAAS,EAAE,SAAS,GAAI,CAAC,CAAC;YACzE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,WAAW,CAClE,6BAA6B,CAC9B,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,gDAAgD,EAAE,GAAG,EAAE;QAC9D,EAAE,CAAC,wDAAwD,EAAE,GAAG,EAAE;YAChE,MAAM,CAAC,KAAC,OAAO,IAAC,SAAS,EAAE,SAAS,GAAI,CAAC,CAAC;YAC1C,MAAM,CACJ,MAAM,CAAC,WAAW,CAAC,MAAM,EAAE;gBACzB,IAAI,EAAE,OAAO;aACd,CAAC,CACH,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC;QAC5B,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,6DAA6D,EAAE,GAAG,EAAE;YACrE,MAAM,CAAC,KAAC,OAAO,IAAC,SAAS,EAAE,SAAS,GAAI,CAAC,CAAC;YAC1C,MAAM,CACJ,MAAM,CAAC,WAAW,CAAC,MAAM,EAAE;gBACzB,IAAI,EAAE,YAAY;aACnB,CAAC,CACH,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC;QAC5B,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,kDAAkD,EAAE,GAAG,EAAE;YAC1D,MAAM,CACJ,KAAC,OAAO,IACN,UAAU,kCAAO,UAAU,KAAE,WAAW,EAAE,QAAQ,KAClD,SAAS,EAAE,SAAS,EACpB,UAAU,kCAAO,UAAU,KAAE,WAAW,EAAE,QAAQ,KAClD,SAAS,EAAE,SAAS,GACpB,CACH,CAAC;YACF,MAAM,CACJ,MAAM,CAAC,WAAW,CAAC,MAAM,EAAE;gBACzB,IAAI,EAAE,OAAO;aACd,CAAC,CACH,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC;YAC1B,MAAM,CACJ,MAAM,CAAC,WAAW,CAAC,MAAM,EAAE;gBACzB,IAAI,EAAE,YAAY;aACnB,CAAC,CACH,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC;YAC1B,MAAM,CACJ,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE;gBACzB,IAAI,EAAE,OAAO;aACd,CAAC,CACH,CAAC,iBAAiB,EAAE,CAAC;YACtB,MAAM,CACJ,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE;gBACzB,IAAI,EAAE,YAAY;aACnB,CAAC,CACH,CAAC,iBAAiB,EAAE,CAAC;QACxB,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,0CAA0C,EAAE,GAAG,EAAE;YAClD,MAAM,CACJ,KAAC,OAAO,IACN,UAAU,oBAAO,UAAU,GAC3B,SAAS,EAAE,SAAS,EACpB,UAAU,kCACL,UAAU,KACb,WAAW,EAAE,QAAQ,EACrB,OAAO,EAAE,eAAe,KAE1B,SAAS,EAAE,SAAS,GACpB,CACH,CAAC;YACF,MAAM,aAAa,GAAG,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE;gBAC/C,IAAI,EAAE,YAAY;aACnB,CAAC,CAAC;YACH,SAAS,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;YAC/B,MAAM,CAAC,eAAe,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;QACnD,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,0CAA0C,EAAE,GAAG,EAAE;YAClD,MAAM,CACJ,KAAC,OAAO,IACN,UAAU,kCACL,UAAU,KACb,WAAW,EAAE,QAAQ,EACrB,OAAO,EAAE,eAAe,KAE1B,SAAS,EAAE,SAAS,EACpB,UAAU,oBAAO,UAAU,GAC3B,SAAS,EAAE,SAAS,GACpB,CACH,CAAC;YACF,MAAM,aAAa,GAAG,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE;gBAC/C,IAAI,EAAE,OAAO;aACd,CAAC,CAAC;YACH,SAAS,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;YAC/B,MAAM,CAAC,eAAe,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;QACnD,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,+BAA+B,EAAE,GAAG,EAAE;YACvC,MAAM,CACJ,KAAC,OAAO,IACN,UAAU,kCACL,UAAU,KACb,WAAW,EAAE,QAAQ,EACrB,UAAU,EAAE,IAAI,KAElB,SAAS,EAAE,SAAS,GACpB,CACH,CAAC;YACF,MAAM,aAAa,GAAG,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE;gBAC/C,IAAI,EAAE,YAAY;aACnB,CAAC,CAAC;YACH,MAAM,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;QACrD,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
package/dist/mobius.d.ts
CHANGED
|
@@ -80,14 +80,10 @@ declare type ActionsElementType = HTMLDivElement;
|
|
|
80
80
|
declare interface ActionsProps extends DOMProps {
|
|
81
81
|
/** Custom class name for setting specific CSS */
|
|
82
82
|
className?: string;
|
|
83
|
+
backButton?: LinkButtonProps;
|
|
84
|
+
nextButton?: LinkButtonProps;
|
|
83
85
|
backLabel?: string;
|
|
84
|
-
backLink?: string;
|
|
85
86
|
nextLabel?: string;
|
|
86
|
-
nextLink?: string;
|
|
87
|
-
backElementType?: React.ElementType;
|
|
88
|
-
nextElementType?: React.ElementType;
|
|
89
|
-
onNextClick?: () => void;
|
|
90
|
-
onBackClick?: () => void;
|
|
91
87
|
}
|
|
92
88
|
|
|
93
89
|
declare type ActionsRef = Ref<ActionsElementType>;
|
package/package.json
CHANGED
|
@@ -17,7 +17,7 @@ import { excludeControls } from "../../../utils/excludeControls";
|
|
|
17
17
|
|
|
18
18
|
# Actions
|
|
19
19
|
|
|
20
|
-
The `Actions` component includes `Back` and `Next` action buttons and is used within the questionnaire journey.
|
|
20
|
+
The `Actions` component includes `Back` and `Next` action buttons and is used within the questionnaire journey. The `backButton` and `nextButton` props take any of the props for [LinkButton](/docs/components-linkbutton--normal).
|
|
21
21
|
|
|
22
22
|
## Install
|
|
23
23
|
|
|
@@ -36,10 +36,10 @@ import { Chopin } from "@simplybusiness/mobius";
|
|
|
36
36
|
<Story
|
|
37
37
|
name="Normal"
|
|
38
38
|
args={{
|
|
39
|
-
backLink: "https://www.google.com",
|
|
40
|
-
nextLink: "https://www.google.com",
|
|
41
39
|
backLabel: "Back",
|
|
40
|
+
backButton: { href: "https://www.google.com" },
|
|
42
41
|
nextLabel: "Next Step",
|
|
42
|
+
nextButton: { href: "https://www.google.com" },
|
|
43
43
|
}}
|
|
44
44
|
>
|
|
45
45
|
{args => (
|
|
@@ -54,10 +54,10 @@ import { Chopin } from "@simplybusiness/mobius";
|
|
|
54
54
|
import { Chopin } from "@simplybusiness/mobius";
|
|
55
55
|
|
|
56
56
|
<Chopin.Actions
|
|
57
|
-
backLink="https://www.google.com"
|
|
58
|
-
nextLink="https://www.google.com"
|
|
59
57
|
backLabel="Back"
|
|
58
|
+
backButton={ href: "https://www.google.com" }
|
|
60
59
|
nextLabel="Next Step"
|
|
60
|
+
nextButton={ href: "https://www.google.com" }
|
|
61
61
|
/>
|
|
62
62
|
```
|
|
63
63
|
|
|
@@ -66,8 +66,8 @@ import { Chopin } from "@simplybusiness/mobius";
|
|
|
66
66
|
<Story
|
|
67
67
|
name="One Action"
|
|
68
68
|
args={{
|
|
69
|
-
nextLink: "https://www.google.com",
|
|
70
69
|
nextLabel: "Next Step",
|
|
70
|
+
nextButton: { href: "https://www.google.com" },
|
|
71
71
|
}}
|
|
72
72
|
argTypes={excludeControls("backLabel", "backLink")}
|
|
73
73
|
>
|
|
@@ -83,8 +83,8 @@ import { Chopin } from "@simplybusiness/mobius";
|
|
|
83
83
|
import { Chopin } from "@simplybusiness/mobius";
|
|
84
84
|
|
|
85
85
|
<Chopin.Actions
|
|
86
|
-
nextLink="https://www.google.com"
|
|
87
86
|
nextLabel="Next Step"
|
|
87
|
+
nextButton={ href: "https://www.google.com" }
|
|
88
88
|
/>
|
|
89
89
|
```
|
|
90
90
|
|
|
@@ -93,8 +93,8 @@ import { Chopin } from "@simplybusiness/mobius";
|
|
|
93
93
|
<Story
|
|
94
94
|
name="One Back Action"
|
|
95
95
|
args={{
|
|
96
|
-
backLink: "https://www.google.com",
|
|
97
96
|
backLabel: "Back",
|
|
97
|
+
backButton: { href: "https://www.google.com" },
|
|
98
98
|
}}
|
|
99
99
|
argTypes={excludeControls("nextLabel", "nextLink")}
|
|
100
100
|
>
|
|
@@ -110,23 +110,32 @@ import { Chopin } from "@simplybusiness/mobius";
|
|
|
110
110
|
import { Chopin } from "@simplybusiness/mobius";
|
|
111
111
|
|
|
112
112
|
<Chopin.Actions
|
|
113
|
-
backLink="https://www.google.com"
|
|
114
113
|
backLabel="Back"
|
|
114
|
+
backButton={
|
|
115
|
+
href: "https://www.google.com",
|
|
116
|
+
isDisabled: false,
|
|
117
|
+
}
|
|
115
118
|
/>
|
|
116
119
|
```
|
|
117
120
|
|
|
118
|
-
##
|
|
121
|
+
## Disable Actions
|
|
119
122
|
|
|
120
123
|
<Canvas>
|
|
121
124
|
<Story
|
|
122
|
-
name="
|
|
125
|
+
name="Disable Actions"
|
|
123
126
|
args={{
|
|
124
127
|
backLabel: "Back",
|
|
125
|
-
|
|
126
|
-
|
|
128
|
+
backButton: {
|
|
129
|
+
href: "https://www.google.com",
|
|
130
|
+
elementType: "button",
|
|
131
|
+
isDisabled: false,
|
|
132
|
+
},
|
|
127
133
|
nextLabel: "Next Step",
|
|
128
|
-
|
|
129
|
-
|
|
134
|
+
nextButton: {
|
|
135
|
+
href: "https://www.google.com",
|
|
136
|
+
elementType: "button",
|
|
137
|
+
isDisabled: true,
|
|
138
|
+
},
|
|
130
139
|
}}
|
|
131
140
|
>
|
|
132
141
|
{args => (
|
|
@@ -143,11 +152,15 @@ import { Chopin } from "@simplybusiness/mobius";
|
|
|
143
152
|
|
|
144
153
|
<Chopin.Actions
|
|
145
154
|
backLabel="Back"
|
|
146
|
-
|
|
147
|
-
|
|
155
|
+
backButton={
|
|
156
|
+
href: "https://www.google.com",
|
|
157
|
+
isDisabled: false,
|
|
158
|
+
}
|
|
148
159
|
nextLabel="Next Step"
|
|
149
|
-
|
|
150
|
-
|
|
160
|
+
nextButton={
|
|
161
|
+
href: "https://www.google.com",
|
|
162
|
+
isDisabled: true,
|
|
163
|
+
}
|
|
151
164
|
/>
|
|
152
165
|
```
|
|
153
166
|
|
|
@@ -6,32 +6,31 @@ const BACK_ACTION_CLASS_NAME = "chopin/ActionsBack";
|
|
|
6
6
|
const NEXT_ACTION_CLASS_NAME = "chopin/ActionsNext";
|
|
7
7
|
const NEXT_SINGLE_ACTION_CLASS_NAME = "--single-action";
|
|
8
8
|
|
|
9
|
-
const backLink = "https://test.com";
|
|
10
9
|
const backLabel = "Back";
|
|
11
|
-
const nextLabel = "Next step";
|
|
12
|
-
const nextLink = "https://test.com";
|
|
13
|
-
const mockOnNextClick = jest.fn();
|
|
14
10
|
const mockOnBackClick = jest.fn();
|
|
11
|
+
const BackButton = {
|
|
12
|
+
href: "https://test.com",
|
|
13
|
+
};
|
|
14
|
+
const mockOnNextClick = jest.fn();
|
|
15
|
+
const nextLabel = "Next step";
|
|
16
|
+
const NextButton = {
|
|
17
|
+
href: "https://test.com",
|
|
18
|
+
};
|
|
15
19
|
|
|
16
20
|
describe("Actions", () => {
|
|
17
|
-
it("should render without errors", () => {
|
|
18
|
-
const component = render(<Actions />);
|
|
19
|
-
expect(component).toBeTruthy();
|
|
20
|
-
});
|
|
21
|
-
|
|
22
21
|
describe("uses correct class names", () => {
|
|
23
|
-
it("uses Chopin class", () => {
|
|
24
|
-
render(<Actions data-testid="test-id" />);
|
|
25
|
-
expect(screen.getByTestId("test-id")).toHaveClass("chopin");
|
|
26
|
-
});
|
|
27
|
-
|
|
28
|
-
it("uses chopin/Actions class", () => {
|
|
29
|
-
render(<Actions data-testid="test-id" />);
|
|
30
|
-
expect(screen.getByTestId("test-id")).toHaveClass(ACTION_CLASS_NAME);
|
|
31
|
-
});
|
|
32
|
-
|
|
33
22
|
it("includes custom class name", () => {
|
|
34
|
-
render(
|
|
23
|
+
render(
|
|
24
|
+
<Actions
|
|
25
|
+
data-testid="test-id"
|
|
26
|
+
className="my-class"
|
|
27
|
+
nextButton={{ ...NextButton }}
|
|
28
|
+
nextLabel={nextLabel}
|
|
29
|
+
backButton={{ ...BackButton }}
|
|
30
|
+
backLabel={backLabel}
|
|
31
|
+
/>,
|
|
32
|
+
);
|
|
33
|
+
expect(screen.getByTestId("test-id")).toHaveClass("chopin");
|
|
35
34
|
expect(screen.getByTestId("test-id")).toHaveClass("my-class");
|
|
36
35
|
expect(screen.getByTestId("test-id")).toHaveClass(ACTION_CLASS_NAME);
|
|
37
36
|
});
|
|
@@ -39,9 +38,9 @@ describe("Actions", () => {
|
|
|
39
38
|
it("uses links class names", () => {
|
|
40
39
|
render(
|
|
41
40
|
<Actions
|
|
42
|
-
|
|
41
|
+
backButton={{ ...BackButton }}
|
|
43
42
|
backLabel={backLabel}
|
|
44
|
-
|
|
43
|
+
nextButton={{ ...NextButton }}
|
|
45
44
|
nextLabel={nextLabel}
|
|
46
45
|
/>,
|
|
47
46
|
);
|
|
@@ -54,7 +53,7 @@ describe("Actions", () => {
|
|
|
54
53
|
});
|
|
55
54
|
|
|
56
55
|
it("uses --single-action class name with one action btn", () => {
|
|
57
|
-
render(<Actions
|
|
56
|
+
render(<Actions nextButton={{ ...NextButton }} nextLabel={nextLabel} />);
|
|
58
57
|
expect(screen.getByRole("link", { name: /next step/i })).toHaveClass(
|
|
59
58
|
NEXT_SINGLE_ACTION_CLASS_NAME,
|
|
60
59
|
);
|
|
@@ -83,11 +82,9 @@ describe("Actions", () => {
|
|
|
83
82
|
it("renders button elements if elementType is button", () => {
|
|
84
83
|
render(
|
|
85
84
|
<Actions
|
|
85
|
+
backButton={{ ...BackButton, elementType: "button" }}
|
|
86
86
|
backLabel={backLabel}
|
|
87
|
-
|
|
88
|
-
backElementType="button"
|
|
89
|
-
nextElementType="button"
|
|
90
|
-
nextLink={nextLink}
|
|
87
|
+
nextButton={{ ...NextButton, elementType: "button" }}
|
|
91
88
|
nextLabel={nextLabel}
|
|
92
89
|
/>,
|
|
93
90
|
);
|
|
@@ -116,14 +113,18 @@ describe("Actions", () => {
|
|
|
116
113
|
it("fires onNextClick handler on click event", () => {
|
|
117
114
|
render(
|
|
118
115
|
<Actions
|
|
119
|
-
|
|
116
|
+
backButton={{ ...BackButton }}
|
|
117
|
+
backLabel={backLabel}
|
|
118
|
+
nextButton={{
|
|
119
|
+
...NextButton,
|
|
120
|
+
elementType: "button",
|
|
121
|
+
onClick: mockOnNextClick,
|
|
122
|
+
}}
|
|
120
123
|
nextLabel={nextLabel}
|
|
121
|
-
nextElementType="button"
|
|
122
|
-
onNextClick={mockOnNextClick}
|
|
123
124
|
/>,
|
|
124
125
|
);
|
|
125
126
|
const nextActionBtn = screen.getByRole("button", {
|
|
126
|
-
name: /
|
|
127
|
+
name: /Next step/i,
|
|
127
128
|
});
|
|
128
129
|
fireEvent.click(nextActionBtn);
|
|
129
130
|
expect(mockOnNextClick).toHaveBeenCalledTimes(1);
|
|
@@ -132,17 +133,38 @@ describe("Actions", () => {
|
|
|
132
133
|
it("fires onBackClick handler on click event", () => {
|
|
133
134
|
render(
|
|
134
135
|
<Actions
|
|
135
|
-
|
|
136
|
+
backButton={{
|
|
137
|
+
...BackButton,
|
|
138
|
+
elementType: "button",
|
|
139
|
+
onClick: mockOnBackClick,
|
|
140
|
+
}}
|
|
136
141
|
backLabel={backLabel}
|
|
137
|
-
|
|
138
|
-
|
|
142
|
+
nextButton={{ ...NextButton }}
|
|
143
|
+
nextLabel={nextLabel}
|
|
139
144
|
/>,
|
|
140
145
|
);
|
|
141
146
|
const backActionBtn = screen.getByRole("button", {
|
|
142
|
-
name: /
|
|
147
|
+
name: /Back/i,
|
|
143
148
|
});
|
|
144
149
|
fireEvent.click(backActionBtn);
|
|
145
150
|
expect(mockOnBackClick).toHaveBeenCalledTimes(1);
|
|
146
151
|
});
|
|
152
|
+
|
|
153
|
+
it("allows buttons to be disabled", () => {
|
|
154
|
+
render(
|
|
155
|
+
<Actions
|
|
156
|
+
nextButton={{
|
|
157
|
+
...NextButton,
|
|
158
|
+
elementType: "button",
|
|
159
|
+
isDisabled: true,
|
|
160
|
+
}}
|
|
161
|
+
nextLabel={nextLabel}
|
|
162
|
+
/>,
|
|
163
|
+
);
|
|
164
|
+
const nextActionBtn = screen.getByRole("button", {
|
|
165
|
+
name: /Next step/i,
|
|
166
|
+
});
|
|
167
|
+
expect(nextActionBtn).toHaveClass("--is-disabled");
|
|
168
|
+
});
|
|
147
169
|
});
|
|
148
170
|
});
|
|
@@ -5,61 +5,41 @@ import type { IconName } from "@simplybusiness/icons";
|
|
|
5
5
|
import { Variant } from "../../Button";
|
|
6
6
|
import { Flex } from "../../Flex";
|
|
7
7
|
import { ForwardedRefComponent } from "../../../types/components";
|
|
8
|
-
import { LinkButton } from "../../LinkButton";
|
|
8
|
+
import { LinkButton, type LinkButtonProps } from "../../LinkButton";
|
|
9
9
|
|
|
10
10
|
export type ActionsElementType = HTMLDivElement;
|
|
11
11
|
|
|
12
12
|
export interface ActionsProps extends DOMProps {
|
|
13
13
|
/** Custom class name for setting specific CSS */
|
|
14
14
|
className?: string;
|
|
15
|
+
backButton?: LinkButtonProps;
|
|
16
|
+
nextButton?: LinkButtonProps;
|
|
15
17
|
backLabel?: string;
|
|
16
|
-
backLink?: string;
|
|
17
18
|
nextLabel?: string;
|
|
18
|
-
nextLink?: string;
|
|
19
|
-
backElementType?: React.ElementType;
|
|
20
|
-
nextElementType?: React.ElementType;
|
|
21
|
-
onNextClick?: () => void;
|
|
22
|
-
onBackClick?: () => void;
|
|
23
19
|
}
|
|
24
20
|
|
|
25
21
|
export type ActionsRef = Ref<ActionsElementType>;
|
|
26
22
|
|
|
27
23
|
const Actions: ForwardedRefComponent<ActionsProps, ActionsElementType> =
|
|
28
24
|
forwardRef((props: ActionsProps, ref: ActionsRef) => {
|
|
29
|
-
const {
|
|
30
|
-
|
|
31
|
-
nextLink = "",
|
|
32
|
-
backLabel,
|
|
33
|
-
nextLabel,
|
|
34
|
-
className,
|
|
35
|
-
onNextClick,
|
|
36
|
-
onBackClick,
|
|
37
|
-
backElementType,
|
|
38
|
-
nextElementType,
|
|
39
|
-
...rest
|
|
40
|
-
} = props;
|
|
25
|
+
const { className, backButton, nextButton, backLabel, nextLabel, ...rest } =
|
|
26
|
+
props;
|
|
41
27
|
|
|
42
28
|
const classes = clsx("chopin", "chopin/Actions", className);
|
|
43
29
|
const nextButtonClasses = clsx("chopin/ActionsNext", {
|
|
44
|
-
"--single-action": !
|
|
30
|
+
"--single-action": !backButton,
|
|
45
31
|
});
|
|
46
32
|
|
|
47
33
|
const backButtonProps = {
|
|
34
|
+
...backButton,
|
|
48
35
|
className: "chopin/ActionsBack",
|
|
49
|
-
onClick: onBackClick,
|
|
50
36
|
variant: "basic" as Variant,
|
|
51
37
|
icon: "buttonArrowLeft" as IconName,
|
|
52
|
-
href: backLink,
|
|
53
|
-
to: backLink,
|
|
54
|
-
elementType: backElementType,
|
|
55
38
|
};
|
|
56
39
|
|
|
57
40
|
const nextButtonProps = {
|
|
41
|
+
...nextButton,
|
|
58
42
|
className: nextButtonClasses,
|
|
59
|
-
onClick: onNextClick,
|
|
60
|
-
href: nextLink,
|
|
61
|
-
to: nextLink,
|
|
62
|
-
elementType: nextElementType,
|
|
63
43
|
};
|
|
64
44
|
|
|
65
45
|
return (
|
|
@@ -69,11 +49,15 @@ const Actions: ForwardedRefComponent<ActionsProps, ActionsElementType> =
|
|
|
69
49
|
justifyContent="space-between"
|
|
70
50
|
alignItems="center"
|
|
71
51
|
>
|
|
72
|
-
{
|
|
73
|
-
<LinkButton {...backButtonProps}
|
|
52
|
+
{backButton?.href && (
|
|
53
|
+
<LinkButton {...backButtonProps} href={backButtonProps.href!}>
|
|
54
|
+
{backLabel}
|
|
55
|
+
</LinkButton>
|
|
74
56
|
)}
|
|
75
|
-
{
|
|
76
|
-
<LinkButton {...nextButtonProps}
|
|
57
|
+
{nextButton?.href && (
|
|
58
|
+
<LinkButton {...nextButtonProps} href={nextButtonProps.href!}>
|
|
59
|
+
{nextLabel}
|
|
60
|
+
</LinkButton>
|
|
77
61
|
)}
|
|
78
62
|
</Flex>
|
|
79
63
|
</Flex>
|