@madie/madie-design-system 1.2.51 → 1.2.53
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/MadieDialog/MadieDialog.stories.js +97 -0
- package/components/MadieDialog/index.jsx +19 -11
- package/dist/browser.js +1 -1
- package/dist/index.js +1 -1
- package/dist/react/index.js +1 -1
- package/dist/react/index.js.map +1 -1
- package/package.json +1 -1
- package/test/components/MadieDialog.test.js +241 -0
|
@@ -184,6 +184,103 @@ export const DialogWithActionButtons = () => {
|
|
|
184
184
|
);
|
|
185
185
|
};
|
|
186
186
|
|
|
187
|
+
export const DialogWithActionButtonsHideContinueButton = () => {
|
|
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 With Hide Continue Button
|
|
197
|
+
</Button>
|
|
198
|
+
<MadieDialog
|
|
199
|
+
title="Human Readable"
|
|
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
|
+
}}
|
|
213
|
+
cancelButtonProps={{
|
|
214
|
+
variant: "secondary",
|
|
215
|
+
cancelText: "Cancel",
|
|
216
|
+
"data-testid": "cancel-button",
|
|
217
|
+
}}
|
|
218
|
+
continueButtonProps={""}
|
|
219
|
+
>
|
|
220
|
+
<DialogContent>
|
|
221
|
+
<div data-testid="view-modal">
|
|
222
|
+
<Typography>
|
|
223
|
+
<div>Some Text</div>
|
|
224
|
+
</Typography>
|
|
225
|
+
</div>
|
|
226
|
+
</DialogContent>
|
|
227
|
+
</MadieDialog>
|
|
228
|
+
</>
|
|
229
|
+
);
|
|
230
|
+
};
|
|
231
|
+
|
|
232
|
+
export const DialogWithActionButtonsContinueButtonDisabledWithTooltip = () => {
|
|
233
|
+
const [open, setOpen] = useState(false);
|
|
234
|
+
const onClose = () => {
|
|
235
|
+
setOpen(false);
|
|
236
|
+
};
|
|
237
|
+
|
|
238
|
+
return (
|
|
239
|
+
<>
|
|
240
|
+
<Button variant="cyan" onClick={() => setOpen(true)}>
|
|
241
|
+
open Dialog
|
|
242
|
+
</Button>
|
|
243
|
+
<MadieDialog
|
|
244
|
+
title="Human Readable"
|
|
245
|
+
sx={{
|
|
246
|
+
"#modal-body": {
|
|
247
|
+
h2: {
|
|
248
|
+
borderTop: "1px solid black",
|
|
249
|
+
},
|
|
250
|
+
},
|
|
251
|
+
}}
|
|
252
|
+
dialogProps={{
|
|
253
|
+
onClose,
|
|
254
|
+
open,
|
|
255
|
+
maxWidth: "lg",
|
|
256
|
+
fullWidth: true,
|
|
257
|
+
}}
|
|
258
|
+
cancelButtonProps={{
|
|
259
|
+
variant: "secondary",
|
|
260
|
+
cancelText: "Cancel",
|
|
261
|
+
"data-testid": "cancel-button",
|
|
262
|
+
}}
|
|
263
|
+
continueButtonProps={{
|
|
264
|
+
variant: "cyan",
|
|
265
|
+
type: "submit",
|
|
266
|
+
"data-testid": "continue-button",
|
|
267
|
+
continueText: "Continue",
|
|
268
|
+
disabled: true,
|
|
269
|
+
tooltipText: "Continue button is disabled",
|
|
270
|
+
}}
|
|
271
|
+
>
|
|
272
|
+
<DialogContent>
|
|
273
|
+
<div data-testid="view-modal">
|
|
274
|
+
<Typography>
|
|
275
|
+
<div>Some Text</div>
|
|
276
|
+
</Typography>
|
|
277
|
+
</div>
|
|
278
|
+
</DialogContent>
|
|
279
|
+
</MadieDialog>
|
|
280
|
+
</>
|
|
281
|
+
);
|
|
282
|
+
};
|
|
283
|
+
|
|
187
284
|
export const DialogWithPopoverActionButtons = () => {
|
|
188
285
|
const [open, setOpen] = useState(false);
|
|
189
286
|
const onClose = () => {
|
|
@@ -10,6 +10,7 @@ import {
|
|
|
10
10
|
Divider,
|
|
11
11
|
IconButton,
|
|
12
12
|
Typography,
|
|
13
|
+
Tooltip,
|
|
13
14
|
} from "@mui/material";
|
|
14
15
|
import { Box } from "@mui/system";
|
|
15
16
|
import Button from "../Button";
|
|
@@ -37,6 +38,8 @@ const Actions = ({ onClose, cancelButtonProps, continueButtonProps }) => {
|
|
|
37
38
|
continueText,
|
|
38
39
|
continueIcon,
|
|
39
40
|
popoverOptions,
|
|
41
|
+
disabled,
|
|
42
|
+
tooltipText,
|
|
40
43
|
...otherContinueButtonProps
|
|
41
44
|
} = continueButtonProps;
|
|
42
45
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
@@ -93,19 +96,24 @@ const Actions = ({ onClose, cancelButtonProps, continueButtonProps }) => {
|
|
|
93
96
|
additionalSelectOptionProps={popoverOptions}
|
|
94
97
|
/>
|
|
95
98
|
</>
|
|
96
|
-
) : (
|
|
97
|
-
<
|
|
98
|
-
className="qpp-c-button--cyan"
|
|
99
|
-
type="submit"
|
|
100
|
-
style={{ marginTop: 0 }}
|
|
101
|
-
{...otherContinueButtonProps}
|
|
102
|
-
>
|
|
99
|
+
) : continueButtonProps ? (
|
|
100
|
+
<Tooltip title={disabled && tooltipText ? tooltipText : ""}>
|
|
103
101
|
<span>
|
|
104
|
-
|
|
105
|
-
|
|
102
|
+
<Button
|
|
103
|
+
className="qpp-c-button--cyan"
|
|
104
|
+
type="submit"
|
|
105
|
+
style={{ marginTop: 0 }}
|
|
106
|
+
{...otherContinueButtonProps}
|
|
107
|
+
disabled={disabled}
|
|
108
|
+
>
|
|
109
|
+
<span>
|
|
110
|
+
{continueText}
|
|
111
|
+
{continueIcon}
|
|
112
|
+
</span>
|
|
113
|
+
</Button>
|
|
106
114
|
</span>
|
|
107
|
-
</
|
|
108
|
-
)}
|
|
115
|
+
</Tooltip>
|
|
116
|
+
) : null}
|
|
109
117
|
</DialogActions>
|
|
110
118
|
</>
|
|
111
119
|
);
|