@meduza/ui-kit-2 0.1.21 → 0.1.23
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/dist/ui-kit-2.cjs.development.js +2 -1
- package/dist/ui-kit-2.cjs.development.js.map +1 -1
- package/dist/ui-kit-2.cjs.production.min.js +1 -1
- package/dist/ui-kit-2.cjs.production.min.js.map +1 -1
- package/dist/ui-kit-2.esm.js +2 -1
- package/dist/ui-kit-2.esm.js.map +1 -1
- package/dist/ui-kit.css +592 -554
- package/package.json +1 -1
- package/src/.DS_Store +0 -0
- package/src/Spoiler/Spoiler.module.css +54 -21
- package/src/Spoiler/index.tsx +3 -5
- package/src/Spoiler/mock.json +302 -1
package/package.json
CHANGED
package/src/.DS_Store
CHANGED
|
Binary file
|
|
@@ -1,22 +1,44 @@
|
|
|
1
1
|
@import '../vars.css';
|
|
2
2
|
|
|
3
3
|
.root {
|
|
4
|
+
position: relative;
|
|
5
|
+
|
|
4
6
|
width: 100%;
|
|
5
7
|
margin: $gapMedium 0;
|
|
6
|
-
padding:
|
|
7
|
-
|
|
8
|
-
border-top: 3px solid rgba(0, 0, 0, 0.1);
|
|
9
|
-
border-bottom: 3px solid rgba(0, 0, 0, 0.1);
|
|
8
|
+
padding: 24px 0 25px;
|
|
10
9
|
|
|
11
10
|
@media $mobile {
|
|
12
11
|
display: flex;
|
|
13
12
|
flex-flow: column nowrap;
|
|
14
13
|
|
|
15
14
|
margin: 25px auto 20px;
|
|
16
|
-
padding:
|
|
15
|
+
padding: 23px 0;
|
|
17
16
|
}
|
|
18
17
|
}
|
|
19
18
|
|
|
19
|
+
.root::before,
|
|
20
|
+
.root::after {
|
|
21
|
+
position: absolute;
|
|
22
|
+
left: 50%;
|
|
23
|
+
|
|
24
|
+
width: 100%;
|
|
25
|
+
max-width: 650px;
|
|
26
|
+
margin: 0 auto;
|
|
27
|
+
|
|
28
|
+
content: '';
|
|
29
|
+
transform: translateX(-50%);
|
|
30
|
+
|
|
31
|
+
border-top: 3px solid rgba(0, 0, 0, 0.1);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.root::before {
|
|
35
|
+
top: 0;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.root::after {
|
|
39
|
+
bottom: 0;
|
|
40
|
+
}
|
|
41
|
+
|
|
20
42
|
.root:last-child {
|
|
21
43
|
margin-bottom: 0;
|
|
22
44
|
}
|
|
@@ -29,16 +51,20 @@
|
|
|
29
51
|
display: flex;
|
|
30
52
|
flex-flow: column nowrap;
|
|
31
53
|
justify-content: center;
|
|
54
|
+
|
|
55
|
+
width: 100%;
|
|
56
|
+
max-width: 650px;
|
|
57
|
+
margin-right: auto;
|
|
58
|
+
margin-left: auto;
|
|
32
59
|
}
|
|
33
60
|
|
|
34
61
|
.header h3 {
|
|
35
62
|
margin-top: 0;
|
|
36
63
|
margin-bottom: 18px;
|
|
37
64
|
|
|
38
|
-
font-weight: 700;
|
|
39
|
-
font-size: 21px;
|
|
40
|
-
|
|
41
65
|
font-family: $secondaryFont;
|
|
66
|
+
font-size: 21px;
|
|
67
|
+
font-weight: 700;
|
|
42
68
|
line-height: 26px;
|
|
43
69
|
|
|
44
70
|
@media $mobile {
|
|
@@ -53,8 +79,6 @@
|
|
|
53
79
|
display: none;
|
|
54
80
|
|
|
55
81
|
width: 100%;
|
|
56
|
-
margin-right: auto;
|
|
57
|
-
margin-left: auto;
|
|
58
82
|
padding-bottom: 13px;
|
|
59
83
|
|
|
60
84
|
@media $mobile {
|
|
@@ -79,48 +103,57 @@
|
|
|
79
103
|
|
|
80
104
|
.footer {
|
|
81
105
|
position: static;
|
|
106
|
+
|
|
107
|
+
width: 100%;
|
|
108
|
+
max-width: 650px;
|
|
109
|
+
margin-right: auto;
|
|
110
|
+
margin-left: auto;
|
|
82
111
|
}
|
|
83
112
|
|
|
84
113
|
.spoiled .footer {
|
|
85
114
|
position: sticky;
|
|
86
|
-
bottom: 0;
|
|
87
115
|
z-index: 10;
|
|
116
|
+
bottom: 0;
|
|
88
117
|
|
|
118
|
+
width: auto;
|
|
89
119
|
margin-right: -20px;
|
|
90
120
|
margin-left: -20px;
|
|
91
121
|
padding: 12px 20px 20px;
|
|
92
122
|
|
|
93
|
-
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 64%);
|
|
94
|
-
|
|
95
123
|
animation: spoilerSticky 500ms ease both;
|
|
96
124
|
|
|
125
|
+
background-image: linear-gradient(
|
|
126
|
+
180deg,
|
|
127
|
+
rgba(255, 255, 255, 0) 0%,
|
|
128
|
+
#fff 64%
|
|
129
|
+
);
|
|
130
|
+
|
|
97
131
|
@media $mobile {
|
|
98
132
|
position: static;
|
|
99
133
|
|
|
100
|
-
margin-right:
|
|
101
|
-
margin-left:
|
|
134
|
+
margin-right: auto;
|
|
135
|
+
margin-left: auto;
|
|
102
136
|
padding: 0;
|
|
103
137
|
|
|
104
|
-
background-image: none;
|
|
105
|
-
|
|
106
138
|
animation: none;
|
|
139
|
+
|
|
140
|
+
background-image: none;
|
|
107
141
|
}
|
|
108
142
|
}
|
|
109
143
|
|
|
110
144
|
.spoiled .footer::after {
|
|
111
145
|
position: absolute;
|
|
146
|
+
z-index: -1;
|
|
112
147
|
top: 100%;
|
|
113
148
|
right: 0;
|
|
114
149
|
left: 0;
|
|
115
|
-
z-index: -1;
|
|
116
150
|
|
|
117
151
|
height: 16px;
|
|
118
152
|
|
|
119
|
-
|
|
120
|
-
|
|
153
|
+
content: '';
|
|
121
154
|
animation: spoilerStickyBg 1ms ease both 500ms;
|
|
122
155
|
|
|
123
|
-
|
|
156
|
+
background-color: #fff;
|
|
124
157
|
|
|
125
158
|
@media $mobile {
|
|
126
159
|
content: none;
|
package/src/Spoiler/index.tsx
CHANGED
|
@@ -45,6 +45,8 @@ export const Spoiler: React.FC<SpoilerProps> = ({
|
|
|
45
45
|
[[styles.spoiled], !!spoiled]
|
|
46
46
|
]
|
|
47
47
|
|
|
48
|
+
const context = ['center'].concat(styleContext)
|
|
49
|
+
|
|
48
50
|
if (styleContext) {
|
|
49
51
|
classNames = makeStyleContext(classNames, styleContext, styles)
|
|
50
52
|
}
|
|
@@ -57,11 +59,7 @@ export const Spoiler: React.FC<SpoilerProps> = ({
|
|
|
57
59
|
<div className={styles.header}>{title && <h3>{title}</h3>}</div>
|
|
58
60
|
<div className={styles.body}>
|
|
59
61
|
{blocks.map((item) => (
|
|
60
|
-
<RenderBlocks
|
|
61
|
-
key={item.id}
|
|
62
|
-
block={item}
|
|
63
|
-
styleContext={styleContext}
|
|
64
|
-
/>
|
|
62
|
+
<RenderBlocks key={item.id} block={item} styleContext={context} />
|
|
65
63
|
))}
|
|
66
64
|
</div>
|
|
67
65
|
<div className={styles.footer}>
|
package/src/Spoiler/mock.json
CHANGED
|
@@ -21,6 +21,307 @@
|
|
|
21
21
|
"length": 147,
|
|
22
22
|
"id": "2-39a95b2b3b5f5bb8dbd23576941020b54b4f5bfade9eac192aa48cc007ec25df"
|
|
23
23
|
},
|
|
24
|
+
{
|
|
25
|
+
"type": "table",
|
|
26
|
+
"table_credit": "кредит в таблице",
|
|
27
|
+
"rows": [
|
|
28
|
+
{
|
|
29
|
+
"key": "9ef452430882269f180f",
|
|
30
|
+
"cells": [
|
|
31
|
+
{
|
|
32
|
+
"val": "первая строка _1",
|
|
33
|
+
"key": "ptijzw",
|
|
34
|
+
"color": "#f4f0f8"
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"val": "первая строка _2",
|
|
38
|
+
"key": "kdns0e",
|
|
39
|
+
"color": "#f5f5f5"
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"val": "первая строка опять и снова",
|
|
43
|
+
"color": "#ffffff",
|
|
44
|
+
"key": "3xhcl4"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"val": "первая строка опять и снова",
|
|
48
|
+
"color": "#ffffff",
|
|
49
|
+
"key": "3xshdcl4"
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"val": "первая строка опять и снова",
|
|
53
|
+
"color": "#ffffff",
|
|
54
|
+
"key": "3xhdcl4"
|
|
55
|
+
}
|
|
56
|
+
]
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"key": "8d41ad87004eaa2efcba",
|
|
60
|
+
"cells": [
|
|
61
|
+
{
|
|
62
|
+
"val": "вторая <strong>строка</strong> _1",
|
|
63
|
+
"key": "uu2q3s",
|
|
64
|
+
"color": "#f4f0f8"
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
"val": "<a href=\"https://meduza.io/paragraph/2019/10/30/kak-margarita-simonyan-prishla-na-intervyu-k-ksenii-sobchak-uslyshala-neudobnye-voprosy-i-ushla-v-odnom-abzatse\" target=\"_blank\">вторая строка _3</a>",
|
|
68
|
+
"key": "qfy9e43",
|
|
69
|
+
"color": "#e6f3ff"
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"val": "ывывыв",
|
|
73
|
+
"color": "#ffffff",
|
|
74
|
+
"key": "flh2yh"
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"val": "<a href=\"https://meduza.io/paragraph/2019/10/30/kak-margarita-simonyan-prishla-na-intervyu-k-ksenii-sobchak-uslyshala-neudobnye-voprosy-i-ushla-v-odnom-abzatse\" target=\"_blank\">вторая строка _3</a>",
|
|
78
|
+
"key": "qfy943",
|
|
79
|
+
"color": "#e6df3ff"
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
"val": "ывывыв",
|
|
83
|
+
"color": "#ffffff",
|
|
84
|
+
"key": "flh2dyh"
|
|
85
|
+
}
|
|
86
|
+
]
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
"key": "1c4b6ce381f928aa2b57",
|
|
90
|
+
"cells": [
|
|
91
|
+
{
|
|
92
|
+
"val": "а тут <strong>болд</strong> с<em> италиком</em> и <a href=\"https://second.meduza.io/feature/2019/10/30/test-tablits-v-ficherah\" target=\"_blank\">ссылкой</a>",
|
|
93
|
+
"key": "cfnbc3",
|
|
94
|
+
"color": "#f4f0f8"
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
"val": "llllllll",
|
|
98
|
+
"key": "25yr97",
|
|
99
|
+
"color": "#FFFFFF"
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
"val": "2",
|
|
103
|
+
"color": "#ffffff",
|
|
104
|
+
"key": "q5ssyu"
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"val": "llllllll",
|
|
108
|
+
"key": "25yrd97",
|
|
109
|
+
"color": "#FFFFFF"
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
"val": "2",
|
|
113
|
+
"color": "#ffffff",
|
|
114
|
+
"key": "q5ssdyu"
|
|
115
|
+
}
|
|
116
|
+
]
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
"key": "2f7722300e13ba0d37b1",
|
|
120
|
+
"cells": [
|
|
121
|
+
{
|
|
122
|
+
"key": "swrdin",
|
|
123
|
+
"color": "#f4f0f8"
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
"val": "ии",
|
|
127
|
+
"key": "h9jg6z",
|
|
128
|
+
"color": "#ffffff"
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
"val": "3",
|
|
132
|
+
"color": "#ffffff",
|
|
133
|
+
"key": "ag23oa"
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
"val": "ии",
|
|
137
|
+
"key": "h9jdg6z",
|
|
138
|
+
"color": "#ffffff"
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
"val": "3",
|
|
142
|
+
"color": "#ffffff",
|
|
143
|
+
"key": "ag23doa"
|
|
144
|
+
}
|
|
145
|
+
]
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
"key": "dbb5a2c10886fea7ee41",
|
|
149
|
+
"cells": [
|
|
150
|
+
{
|
|
151
|
+
"val": "цццццц",
|
|
152
|
+
"color": "#ffffff",
|
|
153
|
+
"key": "3sd3uv"
|
|
154
|
+
},
|
|
155
|
+
{
|
|
156
|
+
"val": "пустая ячейка дальше",
|
|
157
|
+
"color": "#fffde6",
|
|
158
|
+
"key": "pjkssg"
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
"color": "#ffffff",
|
|
162
|
+
"key": "gtjnbr"
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
"val": "пустая ячейка дальше",
|
|
166
|
+
"color": "#fffde6",
|
|
167
|
+
"key": "pjksdsg"
|
|
168
|
+
},
|
|
169
|
+
{
|
|
170
|
+
"color": "#ffffff",
|
|
171
|
+
"key": "gtjdnbr"
|
|
172
|
+
}
|
|
173
|
+
]
|
|
174
|
+
},
|
|
175
|
+
{
|
|
176
|
+
"key": "dbb5a2c108f6f3a7ee41",
|
|
177
|
+
"cells": [
|
|
178
|
+
{
|
|
179
|
+
"val": "цццццц",
|
|
180
|
+
"color": "#ffffff",
|
|
181
|
+
"key": "3sd3uv"
|
|
182
|
+
},
|
|
183
|
+
{
|
|
184
|
+
"val": "пустая ячейка дальше",
|
|
185
|
+
"color": "#fffde6",
|
|
186
|
+
"key": "pjkssg"
|
|
187
|
+
},
|
|
188
|
+
{
|
|
189
|
+
"color": "#ffffff",
|
|
190
|
+
"key": "gtjnbr"
|
|
191
|
+
},
|
|
192
|
+
{
|
|
193
|
+
"val": "пустая ячейка дальше",
|
|
194
|
+
"color": "#fffde6",
|
|
195
|
+
"key": "pjksdsg"
|
|
196
|
+
},
|
|
197
|
+
{
|
|
198
|
+
"color": "#ffffff",
|
|
199
|
+
"key": "gtjdnbr"
|
|
200
|
+
}
|
|
201
|
+
]
|
|
202
|
+
},
|
|
203
|
+
{
|
|
204
|
+
"key": "dbb5a2c10886sea7ee41",
|
|
205
|
+
"cells": [
|
|
206
|
+
{
|
|
207
|
+
"val": "цццццц",
|
|
208
|
+
"color": "#ffffff",
|
|
209
|
+
"key": "3sd3uv"
|
|
210
|
+
},
|
|
211
|
+
{
|
|
212
|
+
"val": "пустая ячейка дальше",
|
|
213
|
+
"color": "#fffde6",
|
|
214
|
+
"key": "pjkssg"
|
|
215
|
+
},
|
|
216
|
+
{
|
|
217
|
+
"color": "#ffffff",
|
|
218
|
+
"key": "gtjnbr"
|
|
219
|
+
},
|
|
220
|
+
{
|
|
221
|
+
"val": "пустая ячейка дальше",
|
|
222
|
+
"color": "#fffde6",
|
|
223
|
+
"key": "pjksdsg"
|
|
224
|
+
},
|
|
225
|
+
{
|
|
226
|
+
"color": "#ffffff",
|
|
227
|
+
"key": "gtjdnbr"
|
|
228
|
+
}
|
|
229
|
+
]
|
|
230
|
+
},
|
|
231
|
+
{
|
|
232
|
+
"key": "dbb5s2cf0886fea7ee41",
|
|
233
|
+
"cells": [
|
|
234
|
+
{
|
|
235
|
+
"val": "цццццц",
|
|
236
|
+
"color": "#ffffff",
|
|
237
|
+
"key": "3sd3uv"
|
|
238
|
+
},
|
|
239
|
+
{
|
|
240
|
+
"val": "пустая ячейка дальше",
|
|
241
|
+
"color": "#fffde6",
|
|
242
|
+
"key": "pjkssg"
|
|
243
|
+
},
|
|
244
|
+
{
|
|
245
|
+
"color": "#ffffff",
|
|
246
|
+
"key": "gtjnbr"
|
|
247
|
+
},
|
|
248
|
+
{
|
|
249
|
+
"val": "пустая ячейка дальше",
|
|
250
|
+
"color": "#fffde6",
|
|
251
|
+
"key": "pjksdsg"
|
|
252
|
+
},
|
|
253
|
+
{
|
|
254
|
+
"color": "#ffffff",
|
|
255
|
+
"key": "gtjdnbr"
|
|
256
|
+
}
|
|
257
|
+
]
|
|
258
|
+
},
|
|
259
|
+
{
|
|
260
|
+
"key": "dcb5a2d108f6f3a7ee41",
|
|
261
|
+
"cells": [
|
|
262
|
+
{
|
|
263
|
+
"val": "цццццц",
|
|
264
|
+
"color": "#ffffff",
|
|
265
|
+
"key": "3sd3uv"
|
|
266
|
+
},
|
|
267
|
+
{
|
|
268
|
+
"val": "пустая ячейка дальше",
|
|
269
|
+
"color": "#fffde6",
|
|
270
|
+
"key": "pjkssg"
|
|
271
|
+
},
|
|
272
|
+
{
|
|
273
|
+
"color": "#ffffff",
|
|
274
|
+
"key": "gtjnbr"
|
|
275
|
+
},
|
|
276
|
+
{
|
|
277
|
+
"val": "пустая ячейка дальше",
|
|
278
|
+
"color": "#fffde6",
|
|
279
|
+
"key": "pjksdsg"
|
|
280
|
+
},
|
|
281
|
+
{
|
|
282
|
+
"color": "#ffffff",
|
|
283
|
+
"key": "gtjdnbr"
|
|
284
|
+
}
|
|
285
|
+
]
|
|
286
|
+
},
|
|
287
|
+
{
|
|
288
|
+
"key": "dbb5a2c1088ssea7ee41",
|
|
289
|
+
"cells": [
|
|
290
|
+
{
|
|
291
|
+
"val": "цццццц",
|
|
292
|
+
"color": "#ffffff",
|
|
293
|
+
"key": "3sd3uv"
|
|
294
|
+
},
|
|
295
|
+
{
|
|
296
|
+
"val": "пустая ячейка дальше",
|
|
297
|
+
"color": "#fffde6",
|
|
298
|
+
"key": "pjkssg"
|
|
299
|
+
},
|
|
300
|
+
{
|
|
301
|
+
"color": "#ffffff",
|
|
302
|
+
"key": "gtjnbr"
|
|
303
|
+
},
|
|
304
|
+
{
|
|
305
|
+
"val": "пустая ячейка дальше",
|
|
306
|
+
"color": "#fffde6",
|
|
307
|
+
"key": "pjksdsg"
|
|
308
|
+
},
|
|
309
|
+
{
|
|
310
|
+
"color": "#ffffff",
|
|
311
|
+
"key": "gtjdnbr"
|
|
312
|
+
}
|
|
313
|
+
]
|
|
314
|
+
}
|
|
315
|
+
],
|
|
316
|
+
"columns_widths": [200, 405, 300, 200, 200],
|
|
317
|
+
"options": {
|
|
318
|
+
"num_fixed_rows": 2,
|
|
319
|
+
"num_fixed_columns": 1,
|
|
320
|
+
"header": false
|
|
321
|
+
},
|
|
322
|
+
"display": "full",
|
|
323
|
+
"id": "2-84f2dfff359c2d021666431d5a565e0cf7954ede74cd1fa340771d4c229f6fbd"
|
|
324
|
+
},
|
|
24
325
|
{
|
|
25
326
|
"type": "p",
|
|
26
327
|
"data": "<strong>Андрей Карепов</strong> — бывший сотрудник Фургала. Задержан 19 ноября, находится в СИЗО. Вину не признает. В конце августа, как сообщала его защита, был избит по дороге в следственный комитет. Избившие его люди требовали дать показания на Фургала. ",
|
|
@@ -44,6 +345,6 @@
|
|
|
44
345
|
"expand": "Обвиняемые и свидетели ",
|
|
45
346
|
"collapse": "Свернуть"
|
|
46
347
|
},
|
|
47
|
-
"display": "
|
|
348
|
+
"display": "full",
|
|
48
349
|
"id": "4-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855"
|
|
49
350
|
}
|