@madie/madie-design-system 1.2.43 → 1.2.46
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/components/AutoComplete/AutoComplete.jsx +1 -0
- package/components/MadieDialog/MadieDialog.stories.js +119 -0
- package/components/MadieDialog/index.jsx +40 -4
- package/components/Popover/index.js +2 -1
- package/dist/browser.js +1 -1
- package/dist/index.js +1 -1
- package/dist/react/index.js +92 -90
- package/dist/react/index.js.LICENSE.txt +5 -13
- package/dist/react/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -6,6 +6,7 @@ import TextArea from "../TextArea/index";
|
|
|
6
6
|
import Select from "../Select/index";
|
|
7
7
|
import Button from "../Button";
|
|
8
8
|
import { Switch, FormGroup, FormControlLabel } from "@mui/material";
|
|
9
|
+
import { DialogContent, Typography } from "@mui/material";
|
|
9
10
|
|
|
10
11
|
export default {
|
|
11
12
|
title: "MadieDialog",
|
|
@@ -132,3 +133,121 @@ export const Dialog = () => {
|
|
|
132
133
|
</div>
|
|
133
134
|
);
|
|
134
135
|
};
|
|
136
|
+
|
|
137
|
+
export const DialogWithActionButtons = () => {
|
|
138
|
+
const [open, setOpen] = useState(false);
|
|
139
|
+
const onClose = () => {
|
|
140
|
+
setOpen(false);
|
|
141
|
+
};
|
|
142
|
+
|
|
143
|
+
return (
|
|
144
|
+
<>
|
|
145
|
+
<Button variant="cyan" onClick={() => setOpen(true)}>
|
|
146
|
+
open Dialog
|
|
147
|
+
</Button>
|
|
148
|
+
<MadieDialog
|
|
149
|
+
title="Human Readable"
|
|
150
|
+
sx={{
|
|
151
|
+
"#modal-body": {
|
|
152
|
+
h2: {
|
|
153
|
+
borderTop: "1px solid black",
|
|
154
|
+
},
|
|
155
|
+
},
|
|
156
|
+
}}
|
|
157
|
+
dialogProps={{
|
|
158
|
+
onClose,
|
|
159
|
+
open,
|
|
160
|
+
maxWidth: "lg",
|
|
161
|
+
fullWidth: true,
|
|
162
|
+
}}
|
|
163
|
+
cancelButtonProps={{
|
|
164
|
+
variant: "secondary",
|
|
165
|
+
cancelText: "Cancel",
|
|
166
|
+
"data-testid": "cancel-button",
|
|
167
|
+
}}
|
|
168
|
+
continueButtonProps={{
|
|
169
|
+
variant: "cyan",
|
|
170
|
+
type: "submit",
|
|
171
|
+
"data-testid": "continue-button",
|
|
172
|
+
continueText: "Continue",
|
|
173
|
+
}}
|
|
174
|
+
>
|
|
175
|
+
<DialogContent>
|
|
176
|
+
<div data-testid="view-modal">
|
|
177
|
+
<Typography>
|
|
178
|
+
<div>Some Text</div>
|
|
179
|
+
</Typography>
|
|
180
|
+
</div>
|
|
181
|
+
</DialogContent>
|
|
182
|
+
</MadieDialog>
|
|
183
|
+
</>
|
|
184
|
+
);
|
|
185
|
+
};
|
|
186
|
+
|
|
187
|
+
export const DialogWithPopoverActionButtons = () => {
|
|
188
|
+
const [open, setOpen] = useState(false);
|
|
189
|
+
const onClose = () => {
|
|
190
|
+
setOpen(false);
|
|
191
|
+
};
|
|
192
|
+
|
|
193
|
+
return (
|
|
194
|
+
<>
|
|
195
|
+
<Button variant="cyan" onClick={() => setOpen(true)}>
|
|
196
|
+
open Dialog
|
|
197
|
+
</Button>
|
|
198
|
+
<MadieDialog
|
|
199
|
+
title="Dialog with popover action buttons"
|
|
200
|
+
sx={{
|
|
201
|
+
"#modal-body": {
|
|
202
|
+
h2: {
|
|
203
|
+
borderTop: "1px solid black",
|
|
204
|
+
},
|
|
205
|
+
},
|
|
206
|
+
}}
|
|
207
|
+
dialogProps={{
|
|
208
|
+
onClose,
|
|
209
|
+
open,
|
|
210
|
+
maxWidth: "lg",
|
|
211
|
+
fullWidth: true,
|
|
212
|
+
onSubmit: () => {
|
|
213
|
+
console.log("Submitted");
|
|
214
|
+
setOpen(false);
|
|
215
|
+
},
|
|
216
|
+
}}
|
|
217
|
+
cancelButtonProps={{
|
|
218
|
+
variant: "secondary",
|
|
219
|
+
cancelText: "Cancel",
|
|
220
|
+
"data-testid": "cancel-button",
|
|
221
|
+
}}
|
|
222
|
+
continueButtonProps={{
|
|
223
|
+
variant: "cyan",
|
|
224
|
+
type: "submit",
|
|
225
|
+
"data-testid": "continue-button",
|
|
226
|
+
continueText: "Continue",
|
|
227
|
+
popoverOptions: [
|
|
228
|
+
{
|
|
229
|
+
label: "Export",
|
|
230
|
+
dataTestId: "export-option",
|
|
231
|
+
toImplementFunction: () =>
|
|
232
|
+
console.log("Export clicked"),
|
|
233
|
+
},
|
|
234
|
+
{
|
|
235
|
+
label: "Export for Publishing",
|
|
236
|
+
dataTestId: "export-publishing-option",
|
|
237
|
+
toImplementFunction: () =>
|
|
238
|
+
console.log("Export for Publishing clicked"),
|
|
239
|
+
},
|
|
240
|
+
],
|
|
241
|
+
}}
|
|
242
|
+
>
|
|
243
|
+
<DialogContent>
|
|
244
|
+
<div data-testid="view-modal">
|
|
245
|
+
<Typography>
|
|
246
|
+
<div>Some Text displayed here</div>
|
|
247
|
+
</Typography>
|
|
248
|
+
</div>
|
|
249
|
+
</DialogContent>
|
|
250
|
+
</MadieDialog>
|
|
251
|
+
</>
|
|
252
|
+
);
|
|
253
|
+
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from "react";
|
|
1
|
+
import React, { useState } from "react";
|
|
2
2
|
import PropTypes from "prop-types";
|
|
3
3
|
import Draggable from "react-draggable";
|
|
4
4
|
import CloseIcon from "@mui/icons-material/Close";
|
|
@@ -13,6 +13,7 @@ import {
|
|
|
13
13
|
} from "@mui/material";
|
|
14
14
|
import { Box } from "@mui/system";
|
|
15
15
|
import Button from "../Button";
|
|
16
|
+
import Popover from "../Popover";
|
|
16
17
|
|
|
17
18
|
const DraggablePaper = (props) => {
|
|
18
19
|
const { children, ...rest } = props;
|
|
@@ -32,8 +33,23 @@ const DraggablePaper = (props) => {
|
|
|
32
33
|
const Actions = ({ onClose, cancelButtonProps, continueButtonProps }) => {
|
|
33
34
|
const { cancelText, cancelIcon, ...otherCancelButtonProps } =
|
|
34
35
|
cancelButtonProps;
|
|
35
|
-
const {
|
|
36
|
-
|
|
36
|
+
const {
|
|
37
|
+
continueText,
|
|
38
|
+
continueIcon,
|
|
39
|
+
popoverOptions,
|
|
40
|
+
...otherContinueButtonProps
|
|
41
|
+
} = continueButtonProps;
|
|
42
|
+
const [anchorEl, setAnchorEl] = useState(null);
|
|
43
|
+
|
|
44
|
+
const openPopOverMenu = (event) => {
|
|
45
|
+
setAnchorEl(event.currentTarget);
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
const closePopOverMenu = () => {
|
|
49
|
+
setAnchorEl(null);
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
const open = Boolean(anchorEl);
|
|
37
53
|
return (
|
|
38
54
|
<>
|
|
39
55
|
<Divider sx={{ borderColor: "#8c8c8c" }} />
|
|
@@ -57,7 +73,27 @@ const Actions = ({ onClose, cancelButtonProps, continueButtonProps }) => {
|
|
|
57
73
|
</span>
|
|
58
74
|
</Button>
|
|
59
75
|
)}
|
|
60
|
-
{
|
|
76
|
+
{popoverOptions ? (
|
|
77
|
+
<>
|
|
78
|
+
<Button
|
|
79
|
+
className="qpp-c-button--cyan"
|
|
80
|
+
onClick={openPopOverMenu}
|
|
81
|
+
style={{ marginTop: 0 }}
|
|
82
|
+
{...otherContinueButtonProps}
|
|
83
|
+
>
|
|
84
|
+
<span>
|
|
85
|
+
{continueText}
|
|
86
|
+
{continueIcon}
|
|
87
|
+
</span>
|
|
88
|
+
</Button>
|
|
89
|
+
<Popover
|
|
90
|
+
optionsOpen={open}
|
|
91
|
+
anchorEl={anchorEl}
|
|
92
|
+
handleClose={closePopOverMenu}
|
|
93
|
+
additionalSelectOptionProps={popoverOptions}
|
|
94
|
+
/>
|
|
95
|
+
</>
|
|
96
|
+
) : (
|
|
61
97
|
<Button
|
|
62
98
|
className="qpp-c-button--cyan"
|
|
63
99
|
type="submit"
|
|
@@ -22,10 +22,11 @@ const MadiePopover = ({
|
|
|
22
22
|
}}
|
|
23
23
|
transformOrigin={{
|
|
24
24
|
vertical: "top",
|
|
25
|
-
horizontal: "
|
|
25
|
+
horizontal: "center",
|
|
26
26
|
}}
|
|
27
27
|
sx={{
|
|
28
28
|
".MuiPopover-paper": {
|
|
29
|
+
background: "none",
|
|
29
30
|
boxShadow: "none",
|
|
30
31
|
overflow: "visible",
|
|
31
32
|
".popover-content": {
|