@madie/madie-design-system 1.2.55 → 1.2.57
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/MadieAlert/index.jsx +323 -168
- package/components/MadieDeleteDialog/MadieDeleteDialog.stories.js +24 -0
- package/components/MadieDeleteDialog/index.jsx +6 -4
- package/components/RichTextEditor/index.jsx +3 -3
- package/dist/browser.js +1 -1
- package/dist/index.js +1 -1
- package/dist/react/index.js +2 -2
- package/dist/react/index.js.map +1 -1
- package/package.json +1 -1
- package/styles/components/_madie-alert.scss +4 -1
- package/styles/components/_rich-text-editor.scss +160 -158
- package/styles/qppds/components/_rich-text-editor.scss +160 -159
- package/test/components/MadieAlert.test.js +312 -23
- package/test/components/MadieDeleteDialog.test.js +27 -0
package/package.json
CHANGED
|
@@ -19,6 +19,8 @@ $green-30: #7cb342;
|
|
|
19
19
|
align-items: center;
|
|
20
20
|
background-color: #fff;
|
|
21
21
|
position: relative;
|
|
22
|
+
margin-bottom: 10px; // Add spacing between multiple alerts
|
|
23
|
+
|
|
22
24
|
&.inactive {
|
|
23
25
|
display: none;
|
|
24
26
|
}
|
|
@@ -61,7 +63,8 @@ $green-30: #7cb342;
|
|
|
61
63
|
color: #4d7e23;
|
|
62
64
|
}
|
|
63
65
|
}
|
|
64
|
-
#content {
|
|
66
|
+
#content, [id^="content-"] {
|
|
67
|
+
flex: 1; // Ensure content takes available space
|
|
65
68
|
> ol,
|
|
66
69
|
> ul,
|
|
67
70
|
> li,
|
|
@@ -1,199 +1,201 @@
|
|
|
1
|
-
.
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
}
|
|
16
|
-
/* Basic editor styles */
|
|
17
|
-
.tiptap {
|
|
18
|
-
border: solid 1px #9c9c9c;
|
|
19
|
-
border-top: 0;
|
|
20
|
-
border-bottom-left-radius: 3px;
|
|
21
|
-
border-bottom-right-radius: 3px;
|
|
22
|
-
padding-left: 4px;
|
|
23
|
-
padding-right: 4px;
|
|
24
|
-
|
|
25
|
-
:first-child {
|
|
26
|
-
margin-top: 0;
|
|
1
|
+
.rich-text-editor {
|
|
2
|
+
.control-group {
|
|
3
|
+
border: solid 1px #9c9c9c;
|
|
4
|
+
border-top-left-radius: 3px;
|
|
5
|
+
border-top-right-radius: 3px;
|
|
6
|
+
background-color: #ededed;
|
|
7
|
+
padding-left: 4px;
|
|
8
|
+
padding-right: 4px;
|
|
9
|
+
|
|
10
|
+
.button-group > button {
|
|
11
|
+
padding: 18px;
|
|
12
|
+
border-radius: 0;
|
|
13
|
+
height: 24px;
|
|
14
|
+
width: 24px;
|
|
15
|
+
}
|
|
27
16
|
}
|
|
17
|
+
/* Basic editor styles */
|
|
18
|
+
.ProseMirror {
|
|
19
|
+
border: solid 1px #9c9c9c;
|
|
20
|
+
border-top: 0;
|
|
21
|
+
border-bottom-left-radius: 3px;
|
|
22
|
+
border-bottom-right-radius: 3px;
|
|
23
|
+
padding-left: 4px;
|
|
24
|
+
padding-right: 4px;
|
|
25
|
+
|
|
26
|
+
:first-child {
|
|
27
|
+
margin-top: 0;
|
|
28
|
+
}
|
|
28
29
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
30
|
+
/* List styles */
|
|
31
|
+
ul,
|
|
32
|
+
ol {
|
|
33
|
+
padding: 0 1rem;
|
|
34
|
+
margin: 1.25rem 1rem 1.25rem 0.4rem;
|
|
34
35
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
36
|
+
li p {
|
|
37
|
+
margin-top: 0.25em;
|
|
38
|
+
margin-bottom: 0.25em;
|
|
39
|
+
}
|
|
38
40
|
}
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
41
|
+
//unorder
|
|
42
|
+
ul {
|
|
43
|
+
list-style: disc;
|
|
44
|
+
li {
|
|
45
|
+
margin-bottom: 5px;
|
|
46
|
+
}
|
|
47
|
+
li:before {
|
|
48
|
+
margin-right: 10px;
|
|
49
|
+
color: #000;
|
|
50
|
+
text-align: center;
|
|
51
|
+
display: inline-block;
|
|
52
|
+
}
|
|
51
53
|
}
|
|
52
|
-
}
|
|
53
54
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
55
|
+
//order
|
|
56
|
+
ol {
|
|
57
|
+
counter-reset: item;
|
|
58
|
+
list-style: decimal;
|
|
59
|
+
li {
|
|
60
|
+
counter-increment: item;
|
|
61
|
+
margin-bottom: 5px;
|
|
62
|
+
}
|
|
61
63
|
}
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
/* Heading styles */
|
|
65
|
-
h1,
|
|
66
|
-
h2,
|
|
67
|
-
h3,
|
|
68
|
-
h4,
|
|
69
|
-
h5,
|
|
70
|
-
h6 {
|
|
71
|
-
line-height: 1.1;
|
|
72
|
-
margin-top: 2.5rem;
|
|
73
|
-
text-wrap: pretty;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
h1,
|
|
77
|
-
h2 {
|
|
78
|
-
margin-top: 3.5rem;
|
|
79
|
-
margin-bottom: 1.5rem;
|
|
80
|
-
}
|
|
81
64
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
65
|
+
/* Heading styles */
|
|
66
|
+
h1,
|
|
67
|
+
h2,
|
|
68
|
+
h3,
|
|
69
|
+
h4,
|
|
70
|
+
h5,
|
|
71
|
+
h6 {
|
|
72
|
+
line-height: 1.1;
|
|
73
|
+
margin-top: 2.5rem;
|
|
74
|
+
text-wrap: pretty;
|
|
75
|
+
}
|
|
85
76
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
77
|
+
h1,
|
|
78
|
+
h2 {
|
|
79
|
+
margin-top: 3.5rem;
|
|
80
|
+
margin-bottom: 1.5rem;
|
|
81
|
+
}
|
|
89
82
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
83
|
+
h1 {
|
|
84
|
+
font-size: 1.4rem;
|
|
85
|
+
}
|
|
93
86
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
font-size: 1rem;
|
|
98
|
-
}
|
|
87
|
+
h2 {
|
|
88
|
+
font-size: 1.2rem;
|
|
89
|
+
}
|
|
99
90
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
border-radius: 0.4rem;
|
|
104
|
-
color: var(--black);
|
|
105
|
-
font-size: 0.85rem;
|
|
106
|
-
padding: 0.25em 0.3em;
|
|
107
|
-
}
|
|
91
|
+
h3 {
|
|
92
|
+
font-size: 1.1rem;
|
|
93
|
+
}
|
|
108
94
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
margin: 1.5rem 0;
|
|
115
|
-
padding: 0.75rem 1rem;
|
|
95
|
+
h4,
|
|
96
|
+
h5,
|
|
97
|
+
h6 {
|
|
98
|
+
font-size: 1rem;
|
|
99
|
+
}
|
|
116
100
|
|
|
101
|
+
/* Code and preformatted text styles */
|
|
117
102
|
code {
|
|
118
|
-
background:
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
103
|
+
background-color: var(--purple-light);
|
|
104
|
+
border-radius: 0.4rem;
|
|
105
|
+
color: var(--black);
|
|
106
|
+
font-size: 0.85rem;
|
|
107
|
+
padding: 0.25em 0.3em;
|
|
122
108
|
}
|
|
123
|
-
}
|
|
124
109
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
110
|
+
pre {
|
|
111
|
+
background: var(--black);
|
|
112
|
+
border-radius: 0.5rem;
|
|
113
|
+
color: var(--white);
|
|
114
|
+
font-family: "JetBrainsMono", monospace;
|
|
115
|
+
margin: 1.5rem 0;
|
|
116
|
+
padding: 0.75rem 1rem;
|
|
117
|
+
|
|
118
|
+
code {
|
|
119
|
+
background: none;
|
|
120
|
+
color: inherit;
|
|
121
|
+
font-size: 0.8rem;
|
|
122
|
+
padding: 0;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
blockquote {
|
|
127
|
+
border-left: 3px solid var(--gray-3);
|
|
128
|
+
margin: 1.5rem 0;
|
|
129
|
+
padding-left: 1rem;
|
|
130
|
+
}
|
|
130
131
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
132
|
+
hr {
|
|
133
|
+
border: none;
|
|
134
|
+
border-top: 1px solid var(--gray-2);
|
|
135
|
+
margin: 2rem 0;
|
|
136
|
+
}
|
|
135
137
|
}
|
|
136
|
-
}
|
|
137
138
|
|
|
138
|
-
/* Bubble menu */
|
|
139
|
-
.bubble-menu {
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
139
|
+
/* Bubble menu */
|
|
140
|
+
.bubble-menu {
|
|
141
|
+
background-color: var(--white);
|
|
142
|
+
border: 1px solid var(--gray-1);
|
|
143
|
+
border-radius: 0.7rem;
|
|
144
|
+
box-shadow: var(--shadow);
|
|
145
|
+
display: flex;
|
|
146
|
+
padding: 0.2rem;
|
|
146
147
|
|
|
147
|
-
|
|
148
|
-
|
|
148
|
+
button {
|
|
149
|
+
background-color: unset;
|
|
149
150
|
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
151
|
+
&:hover {
|
|
152
|
+
background-color: var(--gray-3);
|
|
153
|
+
}
|
|
153
154
|
|
|
154
|
-
|
|
155
|
-
|
|
155
|
+
&.is-active {
|
|
156
|
+
background-color: var(--purple);
|
|
156
157
|
|
|
157
|
-
|
|
158
|
-
|
|
158
|
+
&:hover {
|
|
159
|
+
background-color: var(--purple-contrast);
|
|
160
|
+
}
|
|
159
161
|
}
|
|
160
162
|
}
|
|
161
163
|
}
|
|
162
|
-
}
|
|
163
164
|
|
|
164
|
-
/* Floating menu */
|
|
165
|
-
.floating-menu {
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
165
|
+
/* Floating menu */
|
|
166
|
+
.floating-menu {
|
|
167
|
+
display: flex;
|
|
168
|
+
background-color: var(--gray-3);
|
|
169
|
+
padding: 0.1rem;
|
|
170
|
+
border-radius: 0.5rem;
|
|
170
171
|
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
172
|
+
button {
|
|
173
|
+
background-color: unset;
|
|
174
|
+
padding: 0.275rem 0.425rem;
|
|
175
|
+
border-radius: 0.3rem;
|
|
175
176
|
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
177
|
+
&:hover {
|
|
178
|
+
background-color: var(--gray-3);
|
|
179
|
+
}
|
|
179
180
|
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
181
|
+
&.is-active {
|
|
182
|
+
background-color: var(--white);
|
|
183
|
+
color: var(--purple);
|
|
183
184
|
|
|
184
|
-
|
|
185
|
-
|
|
185
|
+
&:hover {
|
|
186
|
+
color: var(--purple-contrast);
|
|
187
|
+
}
|
|
186
188
|
}
|
|
187
189
|
}
|
|
188
190
|
}
|
|
189
|
-
}
|
|
190
191
|
|
|
191
|
-
table {
|
|
192
|
-
border: solid 1px #000;
|
|
193
|
-
tr {
|
|
192
|
+
table {
|
|
194
193
|
border: solid 1px #000;
|
|
195
|
-
|
|
194
|
+
tr {
|
|
196
195
|
border: solid 1px #000;
|
|
196
|
+
td {
|
|
197
|
+
border: solid 1px #000;
|
|
198
|
+
}
|
|
197
199
|
}
|
|
198
200
|
}
|
|
199
201
|
}
|