@madie/madie-design-system 1.2.5 → 1.2.7
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 +105 -0
- package/components/MadieDialog/index.jsx +21 -2
- package/components/ReadOnlyTextField/index.jsx +45 -2
- package/components/TextField/index.jsx +3 -1
- 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/storybook-static/iframe.html +1 -1
- package/storybook-static/main.4051ebc5.iframe.bundle.js +1 -0
- package/storybook-static/project.json +1 -1
- package/storybook-static/main.9774363f.iframe.bundle.js +0 -1
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import PropTypes from "prop-types";
|
|
3
|
+
import { withKnobs } from "@storybook/addon-knobs";
|
|
4
|
+
import MadieDialog from "./index";
|
|
5
|
+
import TextArea from '../TextArea/index';
|
|
6
|
+
import Select from '../Select/index';
|
|
7
|
+
import Button from "../Button";
|
|
8
|
+
import { Switch, FormGroup, FormControlLabel } from '@mui/material';
|
|
9
|
+
|
|
10
|
+
export default {
|
|
11
|
+
title: "MadieDialog",
|
|
12
|
+
component: MadieDialog,
|
|
13
|
+
decorators: [withKnobs],
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
const Wrapper = ({ children }) => (
|
|
17
|
+
<div className="qpp-u-padding--16" style={{ width: 300 }}>
|
|
18
|
+
{children}
|
|
19
|
+
</div>
|
|
20
|
+
);
|
|
21
|
+
Wrapper.propTypes = {
|
|
22
|
+
className: PropTypes.string,
|
|
23
|
+
children: PropTypes.node,
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
export const Dialog = () => {
|
|
27
|
+
const [open, setOpen] = useState(false);
|
|
28
|
+
const onClose = () => {
|
|
29
|
+
setOpen(false);
|
|
30
|
+
};
|
|
31
|
+
const onContinue = () => {
|
|
32
|
+
setOpen(false);
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
const [form, setForm] = useState(false);
|
|
36
|
+
const [required, setRequired] = useState(false);
|
|
37
|
+
return (
|
|
38
|
+
<div className="qpp-u-padding--16" style={{ width: 300 }}>
|
|
39
|
+
<FormGroup>
|
|
40
|
+
<FormControlLabel
|
|
41
|
+
control={
|
|
42
|
+
<Switch checked={form} onChange={(e) => setForm(e.target.checked)} name="Form" />
|
|
43
|
+
}
|
|
44
|
+
label="Form"
|
|
45
|
+
/>
|
|
46
|
+
<FormControlLabel
|
|
47
|
+
control={
|
|
48
|
+
<Switch checked={required} onChange={(e) => setRequired(e.target.checked)} name="Required" />
|
|
49
|
+
}
|
|
50
|
+
label="Required"
|
|
51
|
+
/>
|
|
52
|
+
</FormGroup>
|
|
53
|
+
<Button variant="cyan" onClick={() => setOpen(true)}>
|
|
54
|
+
open Dialog
|
|
55
|
+
</Button>
|
|
56
|
+
<MadieDialog
|
|
57
|
+
form={form}
|
|
58
|
+
required={required}
|
|
59
|
+
title="Madie Dialog"
|
|
60
|
+
dialogProps={{
|
|
61
|
+
open,
|
|
62
|
+
onClose,
|
|
63
|
+
onSubmit: onContinue
|
|
64
|
+
}}
|
|
65
|
+
cancelButtonProps={{
|
|
66
|
+
cancelText: "Discard Changes",
|
|
67
|
+
"data-testid": "cancel-button",
|
|
68
|
+
}}
|
|
69
|
+
continueButtonProps={{
|
|
70
|
+
continueText: "Save",
|
|
71
|
+
"data-testid": "save-button",
|
|
72
|
+
}}
|
|
73
|
+
>
|
|
74
|
+
<div>
|
|
75
|
+
<Select
|
|
76
|
+
id={`measure-referenceType`}
|
|
77
|
+
label="Type"
|
|
78
|
+
placeHolder={{ name: "Select", value: "" }}
|
|
79
|
+
inputProps={{
|
|
80
|
+
"data-testid": `measure-referenceType-input`,
|
|
81
|
+
}}
|
|
82
|
+
data-testid={`measure-referenceType`}
|
|
83
|
+
required
|
|
84
|
+
SelectDisplayProps={{
|
|
85
|
+
"aria-required": "true",
|
|
86
|
+
}}
|
|
87
|
+
/>
|
|
88
|
+
|
|
89
|
+
<TextArea
|
|
90
|
+
required
|
|
91
|
+
label="Reference"
|
|
92
|
+
placeholder="Enter"
|
|
93
|
+
id="measure-referenceText"
|
|
94
|
+
data-testid="measure-referenceText"
|
|
95
|
+
inputProps={{
|
|
96
|
+
"data-testid": "measure-referenceText-input",
|
|
97
|
+
"aria-describedby": "measure-referenceText-helper-text",
|
|
98
|
+
}}
|
|
99
|
+
|
|
100
|
+
/>
|
|
101
|
+
</div>
|
|
102
|
+
</MadieDialog>
|
|
103
|
+
</div>
|
|
104
|
+
);
|
|
105
|
+
};
|
|
@@ -36,6 +36,7 @@ const MadieDialog = ({
|
|
|
36
36
|
}
|
|
37
37
|
*/
|
|
38
38
|
form,
|
|
39
|
+
required,
|
|
39
40
|
title,
|
|
40
41
|
dialogProps,
|
|
41
42
|
cancelButtonProps,
|
|
@@ -96,11 +97,28 @@ const MadieDialog = ({
|
|
|
96
97
|
>
|
|
97
98
|
{title}
|
|
98
99
|
</DialogTitle>
|
|
100
|
+
{required && (
|
|
101
|
+
<Box sx={{
|
|
102
|
+
display: 'flex',
|
|
103
|
+
flexDirection: 'row',
|
|
104
|
+
flexGrow: 1,
|
|
105
|
+
alignSelf: 'center',
|
|
106
|
+
marginBottom: '-4px',
|
|
107
|
+
marginLeft: '15px'
|
|
108
|
+
}}>
|
|
109
|
+
<Typography
|
|
110
|
+
style={{ fontSize: 16, fontWeight: 400, fontFamily: "Rubik", color: "#515151" }}
|
|
111
|
+
>
|
|
112
|
+
<span style={{ color: "#D92F2F", marginRight: 3 }}>*</span>
|
|
113
|
+
Indicates required field
|
|
114
|
+
</Typography>
|
|
115
|
+
</Box>
|
|
116
|
+
)}
|
|
99
117
|
<div>
|
|
100
118
|
<IconButton onClick={onClose} aria-label="Close">
|
|
101
119
|
<CloseIcon
|
|
102
120
|
sx={{
|
|
103
|
-
color: "#
|
|
121
|
+
color: "#D92F2F",
|
|
104
122
|
}}
|
|
105
123
|
data-testid="close-button"
|
|
106
124
|
/>
|
|
@@ -197,7 +215,7 @@ const MadieDialog = ({
|
|
|
197
215
|
<IconButton onClick={onClose} aria-label="Close">
|
|
198
216
|
<CloseIcon
|
|
199
217
|
sx={{
|
|
200
|
-
color: "#
|
|
218
|
+
color: "#D92F2F",
|
|
201
219
|
}}
|
|
202
220
|
data-testid="close-button"
|
|
203
221
|
/>
|
|
@@ -246,6 +264,7 @@ const MadieDialog = ({
|
|
|
246
264
|
};
|
|
247
265
|
|
|
248
266
|
MadieDialog.propTypes = {
|
|
267
|
+
required: PropTypes.bool,
|
|
249
268
|
form: PropTypes.bool,
|
|
250
269
|
title: PropTypes.string,
|
|
251
270
|
dialogProps: PropTypes.object,
|
|
@@ -16,12 +16,54 @@ const ReadOnlyTextField = ({
|
|
|
16
16
|
}) => {
|
|
17
17
|
return (
|
|
18
18
|
<FormControl fullWidth error={error}>
|
|
19
|
+
<div
|
|
20
|
+
style={{
|
|
21
|
+
width: 1,
|
|
22
|
+
display: "flex",
|
|
23
|
+
flexDirection: "column",
|
|
24
|
+
flexGrow: 1,
|
|
25
|
+
}}
|
|
26
|
+
/>
|
|
19
27
|
<InputLabel
|
|
20
28
|
disabled={disabled}
|
|
21
29
|
shrink
|
|
22
30
|
required={required}
|
|
23
31
|
error={error}
|
|
24
32
|
htmlFor={id}
|
|
33
|
+
sx={[
|
|
34
|
+
{
|
|
35
|
+
backgroundColor: "transparent",
|
|
36
|
+
display: "flex",
|
|
37
|
+
flexDirection: "row-reverse",
|
|
38
|
+
alignSelf: "baseline",
|
|
39
|
+
textTransform: "none",
|
|
40
|
+
// force it outside the select box
|
|
41
|
+
position: "initial",
|
|
42
|
+
transform: "translateX(0px) translateY(0px)",
|
|
43
|
+
fontFamily: "Rubik",
|
|
44
|
+
fontWeight: 500,
|
|
45
|
+
fontSize: 14,
|
|
46
|
+
color: "#333",
|
|
47
|
+
"& .MuiInputLabel-asterisk": {
|
|
48
|
+
color: "#AE1C1C !important",
|
|
49
|
+
marginRight: "3px !important",
|
|
50
|
+
},
|
|
51
|
+
},
|
|
52
|
+
required && {
|
|
53
|
+
transform: "translateX(-12px) translateY(0px)",
|
|
54
|
+
"& .MuiInputLabel-asterisk": {
|
|
55
|
+
color: "#D92F2",
|
|
56
|
+
marginRight: "3px !important", //this was
|
|
57
|
+
},
|
|
58
|
+
},
|
|
59
|
+
disabled && {
|
|
60
|
+
color: "rgba(0,0,0,0.6)",
|
|
61
|
+
},
|
|
62
|
+
error && {
|
|
63
|
+
color: "#AE1C1C !important",
|
|
64
|
+
},
|
|
65
|
+
]}
|
|
66
|
+
|
|
25
67
|
>
|
|
26
68
|
{label}
|
|
27
69
|
</InputLabel>
|
|
@@ -47,14 +89,15 @@ const ReadOnlyTextField = ({
|
|
|
47
89
|
)}
|
|
48
90
|
<MUITextField
|
|
49
91
|
sx={{
|
|
50
|
-
height: 40, //there's a .13 coming from somewhere.
|
|
51
92
|
border: "none",
|
|
52
93
|
"& .MuiOutlinedInput-root": {
|
|
53
94
|
"& > fieldset": {
|
|
54
95
|
border: "none",
|
|
55
96
|
},
|
|
56
97
|
},
|
|
57
|
-
|
|
98
|
+
"& .MuiInputBase-root": {
|
|
99
|
+
height: '40px',
|
|
100
|
+
},
|
|
58
101
|
"& .MuiInputBase-input": {
|
|
59
102
|
lineHeight: "19px",
|
|
60
103
|
fontFamily: "Rubik",
|
|
@@ -93,7 +93,6 @@ const TextField = ({
|
|
|
93
93
|
sx={[
|
|
94
94
|
{
|
|
95
95
|
borderRadius: "3px",
|
|
96
|
-
height: 40, //there's a .13 coming from somewhere.
|
|
97
96
|
border: "none",
|
|
98
97
|
marginTop: "8px",
|
|
99
98
|
"& .MuiOutlinedInput-notchedOutline": {
|
|
@@ -103,6 +102,9 @@ const TextField = ({
|
|
|
103
102
|
width: 0,
|
|
104
103
|
},
|
|
105
104
|
},
|
|
105
|
+
"& .MuiInputBase-root": {
|
|
106
|
+
height: '40px',
|
|
107
|
+
},
|
|
106
108
|
"& .MuiOutlinedInput-root": {
|
|
107
109
|
"&&": {
|
|
108
110
|
borderRadius: "3px",
|