Skip to content

Commit 738aacb

Browse files
vyncent-tvyncent-t
committed
frontend: ConfirmDialog: Add update to confirm dialog story
Signed-off-by: Vincent T <[email protected]>
1 parent d1e0c79 commit 738aacb

4 files changed

+156
-0
lines changed

‎frontend/src/components/common/ConfirmDialog.stories.tsx

+16
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,19 @@ ConfirmDialogClosed.args = {
2626
title: 'A fine title',
2727
description: 'A really good description.',
2828
};
29+
30+
export const ConfirmDialogWithCheckbox = Template.bind({});
31+
ConfirmDialogWithCheckbox.args = {
32+
open: true,
33+
title: 'A fine title',
34+
description: 'A really good description, only now we are using a checkbox.',
35+
checkboxDescription: 'Click the checkbox.',
36+
};
37+
38+
export const ConfirmDialogWithCheckboxClosed = Template.bind({});
39+
ConfirmDialogWithCheckboxClosed.args = {
40+
open: false,
41+
title: 'A fine title',
42+
description: 'A really good description, only now we are using a checkbox.',
43+
checkboxDescription: 'Click the checkbox.',
44+
};

‎frontend/src/components/common/ConfirmDialog.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,18 @@ import { useTranslation } from 'react-i18next';
1010
import { DialogTitle } from './Dialog';
1111

1212
export interface ConfirmDialogProps extends MuiDialogProps {
13+
/**
14+
* Title of the dialog box
15+
*/
1316
title: string;
17+
/**
18+
* Description of the dialog box
19+
*/
1420
description: string | React.ReactNode;
21+
/*
22+
* Description of the checkbox
23+
* Note: If this is provided, an additional description will be rendered under the original and will require the checkbox to continue action.
24+
*/
1525
checkboxDescription?: string;
1626
onConfirm: () => void;
1727
handleClose: () => void;

‎frontend/src/components/common/__snapshots__/ConfirmDialog.ConfirmDialogWithCheckbox.stories.storyshot

+125
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
<body>
2+
<div
3+
aria-hidden="true"
4+
>
5+
<div />
6+
</div>
7+
<div
8+
class="MuiDialog-root MuiModal-root css-zw3mfo-MuiModal-root-MuiDialog-root"
9+
role="presentation"
10+
>
11+
<div
12+
aria-hidden="true"
13+
class="MuiBackdrop-root MuiModal-backdrop css-yiavyu-MuiBackdrop-root-MuiDialog-backdrop"
14+
style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
15+
/>
16+
<div
17+
data-testid="sentinelStart"
18+
tabindex="0"
19+
/>
20+
<div
21+
class="MuiDialog-container MuiDialog-scrollPaper css-hz1bth-MuiDialog-container"
22+
role="presentation"
23+
style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
24+
tabindex="-1"
25+
>
26+
<div
27+
aria-describedby="alert-dialog-description"
28+
aria-labelledby="alert-dialog-title"
29+
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation24 MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm css-1t1j96h-MuiPaper-root-MuiDialog-paper"
30+
role="dialog"
31+
>
32+
<h2
33+
class="MuiTypography-root MuiTypography-h6 MuiDialogTitle-root css-8yphvn-MuiTypography-root-MuiDialogTitle-root"
34+
id="alert-dialog-title"
35+
style="display: flex;"
36+
>
37+
<div
38+
class="MuiGrid-root MuiGrid-container css-9cyib4-MuiGrid-root"
39+
>
40+
<div
41+
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
42+
>
43+
<h1
44+
class="MuiTypography-root MuiTypography-h1 css-1kazmbo-MuiTypography-root"
45+
style="font-size: 1.25rem; font-weight: 500; line-height: 1.6;"
46+
>
47+
A fine title
48+
</h1>
49+
</div>
50+
</div>
51+
</h2>
52+
<div
53+
class="MuiDialogContent-root css-ypiqx9-MuiDialogContent-root"
54+
tabindex="-1"
55+
>
56+
<p
57+
class="MuiTypography-root MuiDialogContentText-root MuiTypography-body1 MuiDialogContentText-root css-1tmyuhs-MuiTypography-root-MuiDialogContentText-root"
58+
id="alert-dialog-description"
59+
>
60+
A really good description, only now we are using a checkbox.
61+
</p>
62+
<div
63+
class="MuiBox-root css-vprdb1"
64+
>
65+
<p
66+
class="MuiTypography-root MuiDialogContentText-root MuiTypography-body1 MuiDialogContentText-root css-1tmyuhs-MuiTypography-root-MuiDialogContentText-root"
67+
id="alert-dialog-description"
68+
>
69+
Click the checkbox.
70+
</p>
71+
<span
72+
class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium css-qytiei-MuiButtonBase-root-MuiCheckbox-root"
73+
>
74+
<input
75+
class="PrivateSwitchBase-input css-1m9pwf3"
76+
data-indeterminate="false"
77+
type="checkbox"
78+
/>
79+
<svg
80+
aria-hidden="true"
81+
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
82+
data-testid="CheckBoxOutlineBlankIcon"
83+
focusable="false"
84+
viewBox="0 0 24 24"
85+
>
86+
<path
87+
d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
88+
/>
89+
</svg>
90+
<span
91+
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
92+
/>
93+
</span>
94+
</div>
95+
</div>
96+
<div
97+
class="MuiDialogActions-root MuiDialogActions-spacing css-knqc4i-MuiDialogActions-root"
98+
>
99+
<button
100+
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1gp6czg-MuiButtonBase-root-MuiButton-root"
101+
tabindex="0"
102+
type="button"
103+
>
104+
No
105+
<span
106+
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
107+
/>
108+
</button>
109+
<button
110+
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1gp6czg-MuiButtonBase-root-MuiButton-root"
111+
disabled=""
112+
tabindex="-1"
113+
type="button"
114+
>
115+
I Agree
116+
</button>
117+
</div>
118+
</div>
119+
</div>
120+
<div
121+
data-testid="sentinelEnd"
122+
tabindex="0"
123+
/>
124+
</div>
125+
</body>

‎frontend/src/components/common/__snapshots__/ConfirmDialog.ConfirmDialogWithCheckboxClosed.stories.storyshot

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<body>
2+
<div>
3+
<div />
4+
</div>
5+
</body>

0 commit comments

Comments
 (0)