@thecb/components 6.0.3-beta.0 → 6.0.6
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/package.json
CHANGED
|
@@ -34,6 +34,7 @@ const Modal = ({
|
|
|
34
34
|
useDangerButton = false,
|
|
35
35
|
defaultWrapper = true,
|
|
36
36
|
onlyCloseButton = false,
|
|
37
|
+
noButtons = false, // for instances where modal is closed automatically
|
|
37
38
|
maxHeight,
|
|
38
39
|
underlayClickExits = true,
|
|
39
40
|
noBorder,
|
|
@@ -98,69 +99,81 @@ const Modal = ({
|
|
|
98
99
|
align="center"
|
|
99
100
|
childGap="0rem"
|
|
100
101
|
>
|
|
101
|
-
{!
|
|
102
|
-
|
|
103
|
-
{
|
|
104
|
-
<
|
|
105
|
-
|
|
106
|
-
<
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
102
|
+
{!noButtons && (
|
|
103
|
+
<>
|
|
104
|
+
{!onlyCloseButton ? (
|
|
105
|
+
<Fragment>
|
|
106
|
+
{isMobile ? (
|
|
107
|
+
<Stack childGap="1rem" direction="row">
|
|
108
|
+
<Box width="100%" padding="0">
|
|
109
|
+
<ButtonWithAction
|
|
110
|
+
variant="secondary"
|
|
111
|
+
action={
|
|
112
|
+
cancelAction ? cancelAction : hideModal
|
|
113
|
+
}
|
|
114
|
+
text={cancelButtonText}
|
|
115
|
+
dataQa={cancelButtonText}
|
|
116
|
+
extraStyles={buttonExtraStyles}
|
|
117
|
+
className="modal-cancel-button"
|
|
118
|
+
/>
|
|
119
|
+
</Box>
|
|
120
|
+
<Box width="100%" padding="0">
|
|
121
|
+
<ButtonWithAction
|
|
122
|
+
variant={
|
|
123
|
+
useDangerButton ? "danger" : "primary"
|
|
124
|
+
}
|
|
125
|
+
action={continueAction}
|
|
126
|
+
text={continueButtonText}
|
|
127
|
+
dataQa={continueButtonText}
|
|
128
|
+
isLoading={isLoading}
|
|
129
|
+
extraStyles={buttonExtraStyles}
|
|
130
|
+
className="modal-continue-button"
|
|
131
|
+
/>
|
|
132
|
+
</Box>
|
|
133
|
+
</Stack>
|
|
134
|
+
) : (
|
|
135
|
+
<Stack
|
|
136
|
+
childGap="1rem"
|
|
137
|
+
direction="row"
|
|
138
|
+
justify="flex-end"
|
|
139
|
+
>
|
|
140
|
+
<ButtonWithAction
|
|
141
|
+
variant="secondary"
|
|
142
|
+
action={
|
|
143
|
+
cancelAction ? cancelAction : hideModal
|
|
144
|
+
}
|
|
145
|
+
text={cancelButtonText}
|
|
146
|
+
dataQa={cancelButtonText}
|
|
147
|
+
extraStyles={buttonExtraStyles}
|
|
148
|
+
className="modal-cancel-button"
|
|
149
|
+
/>
|
|
150
|
+
<ButtonWithAction
|
|
151
|
+
variant={
|
|
152
|
+
useDangerButton ? "danger" : "primary"
|
|
153
|
+
}
|
|
154
|
+
action={continueAction}
|
|
155
|
+
text={continueButtonText}
|
|
156
|
+
dataQa={continueButtonText}
|
|
157
|
+
isLoading={isLoading}
|
|
158
|
+
extraStyles={buttonExtraStyles}
|
|
159
|
+
className="modal-continue-button"
|
|
160
|
+
/>
|
|
161
|
+
</Stack>
|
|
162
|
+
)}
|
|
163
|
+
</Fragment>
|
|
127
164
|
) : (
|
|
128
|
-
<
|
|
129
|
-
childGap="1rem"
|
|
130
|
-
direction="row"
|
|
131
|
-
justify="flex-end"
|
|
132
|
-
>
|
|
165
|
+
<Box padding="0.5rem">
|
|
133
166
|
<ButtonWithAction
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
text=
|
|
137
|
-
dataQa=
|
|
167
|
+
action={hideModal}
|
|
168
|
+
variant="primary"
|
|
169
|
+
text="Close"
|
|
170
|
+
dataQa="Close"
|
|
138
171
|
extraStyles={buttonExtraStyles}
|
|
139
172
|
className="modal-cancel-button"
|
|
140
173
|
/>
|
|
141
|
-
|
|
142
|
-
variant={useDangerButton ? "danger" : "primary"}
|
|
143
|
-
action={continueAction}
|
|
144
|
-
text={continueButtonText}
|
|
145
|
-
dataQa={continueButtonText}
|
|
146
|
-
isLoading={isLoading}
|
|
147
|
-
extraStyles={buttonExtraStyles}
|
|
148
|
-
className="modal-continue-button"
|
|
149
|
-
/>
|
|
150
|
-
</Stack>
|
|
174
|
+
</Box>
|
|
151
175
|
)}
|
|
152
|
-
|
|
153
|
-
) : (
|
|
154
|
-
<Box padding="0.5rem">
|
|
155
|
-
<ButtonWithAction
|
|
156
|
-
action={hideModal}
|
|
157
|
-
variant="primary"
|
|
158
|
-
text="Close"
|
|
159
|
-
dataQa="Close"
|
|
160
|
-
extraStyles={buttonExtraStyles}
|
|
161
|
-
className="modal-cancel-button"
|
|
162
|
-
/>
|
|
163
|
-
</Box>
|
|
176
|
+
</>
|
|
164
177
|
)}
|
|
165
178
|
</Stack>
|
|
166
179
|
</Box>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from "react";
|
|
1
|
+
import React, { useEffect, useState } from "react";
|
|
2
2
|
import { text, boolean } from "@storybook/addon-knobs";
|
|
3
3
|
import Modal from "./Modal";
|
|
4
4
|
|
|
@@ -6,7 +6,8 @@ import page from "../../../../.storybook/page";
|
|
|
6
6
|
|
|
7
7
|
import Text from "../../atoms/text";
|
|
8
8
|
import { noop } from "../../../util/general";
|
|
9
|
-
|
|
9
|
+
import Spinner from "../../atoms/spinner/Spinner";
|
|
10
|
+
import { Center } from "../../atoms/layouts";
|
|
10
11
|
const groupId = "props";
|
|
11
12
|
export const modal = () => (
|
|
12
13
|
<Modal
|
|
@@ -23,7 +24,7 @@ export const modal = () => (
|
|
|
23
24
|
)}
|
|
24
25
|
hideModal={noop}
|
|
25
26
|
continueAction={noop}
|
|
26
|
-
modalOpen={boolean("modalOpen",
|
|
27
|
+
modalOpen={boolean("modalOpen", true, groupId)}
|
|
27
28
|
modalHeaderText={text("modalHeaderText", "Modal Header Text", groupId)}
|
|
28
29
|
modalBodyText={text("modalBodyText", "Modal Body Text", groupId)}
|
|
29
30
|
cancelButtonText={text("cancelButtonText", "Cancel", groupId)}
|
|
@@ -37,6 +38,54 @@ export const modal = () => (
|
|
|
37
38
|
/>
|
|
38
39
|
);
|
|
39
40
|
|
|
41
|
+
modal.storyName = "Standard Modal";
|
|
42
|
+
|
|
43
|
+
export const modalWithoutButtons = () => {
|
|
44
|
+
const [isModalOpen, setIsModalOpen] = useState(true);
|
|
45
|
+
useEffect(() => {
|
|
46
|
+
setTimeout(() => {
|
|
47
|
+
// some async action or timer closes the modal instead
|
|
48
|
+
setIsModalOpen(false);
|
|
49
|
+
}, 3000);
|
|
50
|
+
}, []);
|
|
51
|
+
return (
|
|
52
|
+
<Modal
|
|
53
|
+
ModalLink={() => (
|
|
54
|
+
<Text
|
|
55
|
+
tabIndex={0}
|
|
56
|
+
onClick={noop}
|
|
57
|
+
color={"#347BB2"}
|
|
58
|
+
fontSize="18px"
|
|
59
|
+
lineHeight="2rem"
|
|
60
|
+
extraStyles={`cursor: pointer;`}
|
|
61
|
+
>
|
|
62
|
+
Modal Link
|
|
63
|
+
</Text>
|
|
64
|
+
)}
|
|
65
|
+
hideModal={noop}
|
|
66
|
+
continueAction={noop}
|
|
67
|
+
modalOpen={isModalOpen}
|
|
68
|
+
modalHeaderText={text(
|
|
69
|
+
"modalHeaderText",
|
|
70
|
+
"Modal Without Buttons",
|
|
71
|
+
groupId
|
|
72
|
+
)}
|
|
73
|
+
modalBodyText={
|
|
74
|
+
<Center tabIndex={0}>
|
|
75
|
+
<Spinner size="100" />
|
|
76
|
+
</Center>
|
|
77
|
+
}
|
|
78
|
+
modalHeaderBg={text("modalHeaderBg", "white", groupId)}
|
|
79
|
+
modalBodyBg={text("modalBodyBg", "#F6F6F9", groupId)}
|
|
80
|
+
defaultWrapper={boolean("defaultWrapper", true, groupId)}
|
|
81
|
+
noButtons={boolean("noButtons", true, groupId)}
|
|
82
|
+
maxHeight={text("maxHeight", null, groupId)}
|
|
83
|
+
/>
|
|
84
|
+
);
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
modalWithoutButtons.storyName = "Modal Without Buttons";
|
|
88
|
+
|
|
40
89
|
const story = page({
|
|
41
90
|
title: "Components|Molecules/Modal",
|
|
42
91
|
Component: Modal
|