@zohodesk/components 1.2.32 → 1.2.34
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/.cli/propValidation_report.html +1 -1
- package/README.md +8 -0
- package/es/AppContainer/__tests__/AppContainer.spec.js +82 -0
- package/es/AppContainer/__tests__/__snapshots__/AppContainer.spec.js.snap +201 -0
- package/es/Button/__tests__/Button.spec.js +8 -21
- package/es/Button/__tests__/__snapshots__/Button.spec.js.snap +0 -28
- package/es/CheckBox/__tests__/CheckBox.spec.js +240 -0
- package/es/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +1878 -0
- package/es/MultiSelect/AdvancedMultiSelect.js +6 -2
- package/es/MultiSelect/props/defaultProps.js +2 -1
- package/es/MultiSelect/props/propTypes.js +2 -1
- package/es/Radio/__tests__/Radio.spec.js +6 -9
- package/es/Radio/__tests__/__snapshots__/Radio.spec.js.snap +128 -49
- package/es/RippleEffect/__tests__/RippleEffect.spec.js +1 -1
- package/es/RippleEffect/__tests__/__snapshots__/RippleEffect.spec.js.snap +0 -10
- package/es/Select/GroupSelect.js +2 -2
- package/es/Tag/__tests__/Tag.spec.js +235 -0
- package/es/Tag/__tests__/__snapshots__/Tag.spec.js.snap +3054 -0
- package/es/TextBox/__tests__/TextBox.spec.js +327 -0
- package/es/TextBox/__tests__/__snapshots__/TextBox.spec.js.snap +615 -0
- package/es/TextBox/props/propTypes.js +0 -3
- package/es/TextBoxIcon/__tests__/TextBoxIcon.spec.js +268 -0
- package/es/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +1784 -0
- package/es/TextBoxIcon/props/propTypes.js +1 -1
- package/es/Textarea/__tests__/Textarea.spec.js +228 -0
- package/es/Textarea/__tests__/__snapshots__/Textarea.spec.js.snap +476 -0
- package/es/utils/dropDownUtils.js +4 -1
- package/es/v1/MultiSelect/AdvancedMultiSelect.js +6 -2
- package/es/v1/MultiSelect/props/defaultProps.js +2 -1
- package/es/v1/MultiSelect/props/propTypes.js +2 -1
- package/es/v1/Select/GroupSelect.js +2 -2
- package/lib/AppContainer/__tests__/AppContainer.spec.js +90 -0
- package/lib/AppContainer/__tests__/__snapshots__/AppContainer.spec.js.snap +201 -0
- package/lib/Button/__tests__/Button.spec.js +8 -21
- package/lib/Button/__tests__/__snapshots__/Button.spec.js.snap +0 -28
- package/lib/CheckBox/__tests__/CheckBox.spec.js +248 -0
- package/lib/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +1878 -0
- package/lib/MultiSelect/AdvancedMultiSelect.js +5 -2
- package/lib/MultiSelect/props/defaultProps.js +2 -1
- package/lib/MultiSelect/props/propTypes.js +2 -1
- package/lib/Radio/__tests__/Radio.spec.js +9 -13
- package/lib/Radio/__tests__/__snapshots__/Radio.spec.js.snap +128 -49
- package/lib/RippleEffect/__tests__/RippleEffect.spec.js +1 -1
- package/lib/RippleEffect/__tests__/__snapshots__/RippleEffect.spec.js.snap +0 -10
- package/lib/Select/GroupSelect.js +12 -12
- package/lib/Tag/__tests__/Tag.spec.js +252 -0
- package/lib/Tag/__tests__/__snapshots__/Tag.spec.js.snap +3054 -0
- package/lib/TextBox/__tests__/TextBox.spec.js +334 -0
- package/lib/TextBox/__tests__/__snapshots__/TextBox.spec.js.snap +615 -0
- package/lib/TextBox/props/propTypes.js +53 -51
- package/lib/TextBoxIcon/__tests__/TextBoxIcon.spec.js +279 -0
- package/lib/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +1784 -0
- package/lib/TextBoxIcon/props/propTypes.js +1 -1
- package/lib/Textarea/__tests__/Textarea.spec.js +235 -0
- package/lib/Textarea/__tests__/__snapshots__/Textarea.spec.js.snap +476 -0
- package/lib/utils/dropDownUtils.js +14 -2
- package/lib/v1/MultiSelect/AdvancedMultiSelect.js +5 -2
- package/lib/v1/MultiSelect/props/defaultProps.js +2 -1
- package/lib/v1/MultiSelect/props/propTypes.js +2 -1
- package/lib/v1/Select/GroupSelect.js +12 -12
- package/package.json +1 -1
- package/result.json +1 -1
|
@@ -0,0 +1,3054 @@
|
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
+
|
|
3
|
+
exports[`Tag component Should be render closeTitle 1`] = `
|
|
4
|
+
<DocumentFragment>
|
|
5
|
+
<div
|
|
6
|
+
aria-labelledby="1"
|
|
7
|
+
class="container effect medium lgRadius default "
|
|
8
|
+
data-id="tag_Tag"
|
|
9
|
+
data-selector-id="tag"
|
|
10
|
+
data-test-id="tag_Tag"
|
|
11
|
+
tabindex="0"
|
|
12
|
+
>
|
|
13
|
+
<div
|
|
14
|
+
aria-hidden="true"
|
|
15
|
+
class="text mediumtext"
|
|
16
|
+
id="1"
|
|
17
|
+
/>
|
|
18
|
+
<button
|
|
19
|
+
aria-label="Delete"
|
|
20
|
+
class="buttonReset close
|
|
21
|
+
lgRadiusClose
|
|
22
|
+
closedanger"
|
|
23
|
+
data-id="tag_RemoveTag"
|
|
24
|
+
data-test-id="tag_RemoveTag"
|
|
25
|
+
data-title="TagCloseTitle"
|
|
26
|
+
type="button"
|
|
27
|
+
value="text"
|
|
28
|
+
>
|
|
29
|
+
<div
|
|
30
|
+
class="flex cover coldir both"
|
|
31
|
+
data-id="containerComponent"
|
|
32
|
+
data-selector-id="container"
|
|
33
|
+
data-test-id="containerComponent"
|
|
34
|
+
>
|
|
35
|
+
<i
|
|
36
|
+
aria-hidden="true"
|
|
37
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
38
|
+
data-id="fontIcon"
|
|
39
|
+
data-selector-id="fontIcon"
|
|
40
|
+
data-test-id="fontIcon"
|
|
41
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
42
|
+
/>
|
|
43
|
+
</div>
|
|
44
|
+
</button>
|
|
45
|
+
</div>
|
|
46
|
+
</DocumentFragment>
|
|
47
|
+
`;
|
|
48
|
+
|
|
49
|
+
exports[`Tag component Should be render dataId when active if false 1`] = `
|
|
50
|
+
<DocumentFragment>
|
|
51
|
+
<div
|
|
52
|
+
aria-labelledby="1"
|
|
53
|
+
class="container effect medium lgRadius default "
|
|
54
|
+
data-id="TagdataId_Tag"
|
|
55
|
+
data-selector-id="tag"
|
|
56
|
+
data-test-id="TagdataId_Tag"
|
|
57
|
+
tabindex="0"
|
|
58
|
+
>
|
|
59
|
+
<div
|
|
60
|
+
aria-hidden="true"
|
|
61
|
+
class="text mediumtext"
|
|
62
|
+
id="1"
|
|
63
|
+
/>
|
|
64
|
+
<button
|
|
65
|
+
aria-label="Delete"
|
|
66
|
+
class="buttonReset close
|
|
67
|
+
lgRadiusClose
|
|
68
|
+
closedanger"
|
|
69
|
+
data-id="TagdataId_RemoveTag"
|
|
70
|
+
data-test-id="TagdataId_RemoveTag"
|
|
71
|
+
type="button"
|
|
72
|
+
value="text"
|
|
73
|
+
>
|
|
74
|
+
<div
|
|
75
|
+
class="flex cover coldir both"
|
|
76
|
+
data-id="containerComponent"
|
|
77
|
+
data-selector-id="container"
|
|
78
|
+
data-test-id="containerComponent"
|
|
79
|
+
>
|
|
80
|
+
<i
|
|
81
|
+
aria-hidden="true"
|
|
82
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
83
|
+
data-id="fontIcon"
|
|
84
|
+
data-selector-id="fontIcon"
|
|
85
|
+
data-test-id="fontIcon"
|
|
86
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
87
|
+
/>
|
|
88
|
+
</div>
|
|
89
|
+
</button>
|
|
90
|
+
</div>
|
|
91
|
+
</DocumentFragment>
|
|
92
|
+
`;
|
|
93
|
+
|
|
94
|
+
exports[`Tag component Should be render dataId when active if true 1`] = `
|
|
95
|
+
<DocumentFragment>
|
|
96
|
+
<div
|
|
97
|
+
aria-labelledby="1"
|
|
98
|
+
class="container effect selected activedefault activemediumEffect medium lgRadius default "
|
|
99
|
+
data-id="TagdataId_TagSelected"
|
|
100
|
+
data-selector-id="tag"
|
|
101
|
+
data-test-id="TagdataId_TagSelected"
|
|
102
|
+
tabindex="0"
|
|
103
|
+
>
|
|
104
|
+
<div
|
|
105
|
+
aria-hidden="true"
|
|
106
|
+
class="text mediumtext"
|
|
107
|
+
id="1"
|
|
108
|
+
/>
|
|
109
|
+
<button
|
|
110
|
+
aria-label="Delete"
|
|
111
|
+
class="buttonReset close activedangerClose
|
|
112
|
+
lgRadiusClose
|
|
113
|
+
closedanger"
|
|
114
|
+
data-id="TagdataId_RemoveTag"
|
|
115
|
+
data-test-id="TagdataId_RemoveTag"
|
|
116
|
+
type="button"
|
|
117
|
+
value="text"
|
|
118
|
+
>
|
|
119
|
+
<div
|
|
120
|
+
class="flex cover coldir both"
|
|
121
|
+
data-id="containerComponent"
|
|
122
|
+
data-selector-id="container"
|
|
123
|
+
data-test-id="containerComponent"
|
|
124
|
+
>
|
|
125
|
+
<i
|
|
126
|
+
aria-hidden="true"
|
|
127
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
128
|
+
data-id="fontIcon"
|
|
129
|
+
data-selector-id="fontIcon"
|
|
130
|
+
data-test-id="fontIcon"
|
|
131
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
132
|
+
/>
|
|
133
|
+
</div>
|
|
134
|
+
</button>
|
|
135
|
+
</div>
|
|
136
|
+
</DocumentFragment>
|
|
137
|
+
`;
|
|
138
|
+
|
|
139
|
+
exports[`Tag component Should be render disabled is false 1`] = `
|
|
140
|
+
<DocumentFragment>
|
|
141
|
+
<div
|
|
142
|
+
aria-labelledby="1"
|
|
143
|
+
class="container effect medium lgRadius default "
|
|
144
|
+
data-id="tag_Tag"
|
|
145
|
+
data-selector-id="tag"
|
|
146
|
+
data-test-id="tag_Tag"
|
|
147
|
+
tabindex="0"
|
|
148
|
+
>
|
|
149
|
+
<div
|
|
150
|
+
aria-hidden="true"
|
|
151
|
+
class="text mediumtext"
|
|
152
|
+
id="1"
|
|
153
|
+
/>
|
|
154
|
+
</div>
|
|
155
|
+
</DocumentFragment>
|
|
156
|
+
`;
|
|
157
|
+
|
|
158
|
+
exports[`Tag component Should be render disabled is true 1`] = `
|
|
159
|
+
<DocumentFragment>
|
|
160
|
+
<div
|
|
161
|
+
aria-labelledby="1"
|
|
162
|
+
class="container effect medium lgRadius default disabled "
|
|
163
|
+
data-id="tag_Tag"
|
|
164
|
+
data-selector-id="tag"
|
|
165
|
+
data-test-id="tag_Tag"
|
|
166
|
+
tabindex="-1"
|
|
167
|
+
>
|
|
168
|
+
<div
|
|
169
|
+
aria-hidden="true"
|
|
170
|
+
class="text mediumtext"
|
|
171
|
+
id="1"
|
|
172
|
+
/>
|
|
173
|
+
</div>
|
|
174
|
+
</DocumentFragment>
|
|
175
|
+
`;
|
|
176
|
+
|
|
177
|
+
exports[`Tag component Should be render iconName and iconSize 1`] = `
|
|
178
|
+
<DocumentFragment>
|
|
179
|
+
<div
|
|
180
|
+
aria-labelledby="1"
|
|
181
|
+
class="container effect medium lgRadius default "
|
|
182
|
+
data-id="tag_Tag"
|
|
183
|
+
data-selector-id="tag"
|
|
184
|
+
data-test-id="tag_Tag"
|
|
185
|
+
tabindex="0"
|
|
186
|
+
>
|
|
187
|
+
<div
|
|
188
|
+
aria-hidden="true"
|
|
189
|
+
class="icon "
|
|
190
|
+
>
|
|
191
|
+
<i
|
|
192
|
+
aria-hidden="true"
|
|
193
|
+
class="zd_font_icons basic icon-androidd "
|
|
194
|
+
data-id="fontIcon"
|
|
195
|
+
data-selector-id="fontIcon"
|
|
196
|
+
data-test-id="fontIcon"
|
|
197
|
+
style="--zd-iconfont-size: var(--zd_font_size15);"
|
|
198
|
+
/>
|
|
199
|
+
</div>
|
|
200
|
+
<div
|
|
201
|
+
aria-hidden="true"
|
|
202
|
+
class="text mediumtext"
|
|
203
|
+
id="1"
|
|
204
|
+
/>
|
|
205
|
+
</div>
|
|
206
|
+
</DocumentFragment>
|
|
207
|
+
`;
|
|
208
|
+
|
|
209
|
+
exports[`Tag component Should be render imageURL and hasAvatar 1`] = `
|
|
210
|
+
<DocumentFragment>
|
|
211
|
+
<div
|
|
212
|
+
aria-labelledby="1"
|
|
213
|
+
class="container effect medium lgRadius default "
|
|
214
|
+
data-id="tag_Tag"
|
|
215
|
+
data-selector-id="tag"
|
|
216
|
+
data-test-id="tag_Tag"
|
|
217
|
+
tabindex="0"
|
|
218
|
+
>
|
|
219
|
+
<div
|
|
220
|
+
class="avatar"
|
|
221
|
+
>
|
|
222
|
+
<div
|
|
223
|
+
class="avatar small small circle primary black "
|
|
224
|
+
data-id="Avatar"
|
|
225
|
+
data-selector-id="avatar"
|
|
226
|
+
data-test-id="Avatar"
|
|
227
|
+
>
|
|
228
|
+
<img
|
|
229
|
+
class="image animate "
|
|
230
|
+
data-id="Avatar_AvatarImg"
|
|
231
|
+
data-selector-id="avatar_AvatarImg"
|
|
232
|
+
data-test-id="Avatar_AvatarImg"
|
|
233
|
+
src="https://www.w3schools.com/images/w3schools_green.jpg"
|
|
234
|
+
/>
|
|
235
|
+
<span
|
|
236
|
+
class="shadow black "
|
|
237
|
+
/>
|
|
238
|
+
</div>
|
|
239
|
+
</div>
|
|
240
|
+
<div
|
|
241
|
+
aria-hidden="true"
|
|
242
|
+
class="text mediumtext"
|
|
243
|
+
id="1"
|
|
244
|
+
/>
|
|
245
|
+
</div>
|
|
246
|
+
</DocumentFragment>
|
|
247
|
+
`;
|
|
248
|
+
|
|
249
|
+
exports[`Tag component Should be render initial 1`] = `
|
|
250
|
+
<DocumentFragment>
|
|
251
|
+
<div
|
|
252
|
+
aria-labelledby="1"
|
|
253
|
+
class="container effect medium lgRadius default "
|
|
254
|
+
data-id="tag_Tag"
|
|
255
|
+
data-selector-id="tag"
|
|
256
|
+
data-test-id="tag_Tag"
|
|
257
|
+
tabindex="0"
|
|
258
|
+
>
|
|
259
|
+
<div
|
|
260
|
+
class="avatar"
|
|
261
|
+
>
|
|
262
|
+
<div
|
|
263
|
+
class="avatar small small circle primary black border "
|
|
264
|
+
data-id="Avatar"
|
|
265
|
+
data-selector-id="avatar"
|
|
266
|
+
data-test-id="Avatar"
|
|
267
|
+
data-title="avatarIntial"
|
|
268
|
+
>
|
|
269
|
+
<span
|
|
270
|
+
class="initial"
|
|
271
|
+
data-id="Avatar_AvatarInitial"
|
|
272
|
+
data-selector-id="avatar_AvatarInitial"
|
|
273
|
+
data-test-id="Avatar_AvatarInitial"
|
|
274
|
+
>
|
|
275
|
+
AV
|
|
276
|
+
</span>
|
|
277
|
+
</div>
|
|
278
|
+
</div>
|
|
279
|
+
<div
|
|
280
|
+
aria-hidden="true"
|
|
281
|
+
class="text mediumtext"
|
|
282
|
+
id="1"
|
|
283
|
+
/>
|
|
284
|
+
</div>
|
|
285
|
+
</DocumentFragment>
|
|
286
|
+
`;
|
|
287
|
+
|
|
288
|
+
exports[`Tag component Should be render isReadOnly is true 1`] = `
|
|
289
|
+
<DocumentFragment>
|
|
290
|
+
<div
|
|
291
|
+
aria-labelledby="1"
|
|
292
|
+
class="container readonly medium lgRadius default "
|
|
293
|
+
data-id="tag_Tag"
|
|
294
|
+
data-selector-id="tag"
|
|
295
|
+
data-test-id="tag_Tag"
|
|
296
|
+
tabindex="0"
|
|
297
|
+
>
|
|
298
|
+
<div
|
|
299
|
+
aria-hidden="true"
|
|
300
|
+
class="text mediumtext"
|
|
301
|
+
id="1"
|
|
302
|
+
/>
|
|
303
|
+
</div>
|
|
304
|
+
</DocumentFragment>
|
|
305
|
+
`;
|
|
306
|
+
|
|
307
|
+
exports[`Tag component Should be render needEffect is false 1`] = `
|
|
308
|
+
<DocumentFragment>
|
|
309
|
+
<div
|
|
310
|
+
aria-labelledby="1"
|
|
311
|
+
class="container readonly medium lgRadius default "
|
|
312
|
+
data-id="tag_Tag"
|
|
313
|
+
data-selector-id="tag"
|
|
314
|
+
data-test-id="tag_Tag"
|
|
315
|
+
tabindex="0"
|
|
316
|
+
>
|
|
317
|
+
<div
|
|
318
|
+
aria-hidden="true"
|
|
319
|
+
class="text mediumtext"
|
|
320
|
+
id="1"
|
|
321
|
+
/>
|
|
322
|
+
</div>
|
|
323
|
+
</DocumentFragment>
|
|
324
|
+
`;
|
|
325
|
+
|
|
326
|
+
exports[`Tag component Should be render onSelectTag 1`] = `
|
|
327
|
+
<DocumentFragment>
|
|
328
|
+
<div
|
|
329
|
+
aria-labelledby="1"
|
|
330
|
+
class="container effect medium lgRadius default pointer "
|
|
331
|
+
data-id="tag_Tag"
|
|
332
|
+
data-selector-id="tag"
|
|
333
|
+
data-test-id="tag_Tag"
|
|
334
|
+
tabindex="0"
|
|
335
|
+
>
|
|
336
|
+
<div
|
|
337
|
+
aria-hidden="true"
|
|
338
|
+
class="text mediumtext"
|
|
339
|
+
id="1"
|
|
340
|
+
/>
|
|
341
|
+
</div>
|
|
342
|
+
</DocumentFragment>
|
|
343
|
+
`;
|
|
344
|
+
|
|
345
|
+
exports[`Tag component Should be render rounded is false 1`] = `
|
|
346
|
+
<DocumentFragment>
|
|
347
|
+
<div
|
|
348
|
+
aria-labelledby="1"
|
|
349
|
+
class="container effect medium smRadius default "
|
|
350
|
+
data-id="tag_Tag"
|
|
351
|
+
data-selector-id="tag"
|
|
352
|
+
data-test-id="tag_Tag"
|
|
353
|
+
tabindex="0"
|
|
354
|
+
>
|
|
355
|
+
<div
|
|
356
|
+
aria-hidden="true"
|
|
357
|
+
class="text mediumtext"
|
|
358
|
+
id="1"
|
|
359
|
+
/>
|
|
360
|
+
<button
|
|
361
|
+
aria-label="Delete"
|
|
362
|
+
class="buttonReset close
|
|
363
|
+
smRadiusClose
|
|
364
|
+
closedanger"
|
|
365
|
+
data-id="tag_RemoveTag"
|
|
366
|
+
data-test-id="tag_RemoveTag"
|
|
367
|
+
type="button"
|
|
368
|
+
value="text"
|
|
369
|
+
>
|
|
370
|
+
<div
|
|
371
|
+
class="flex cover coldir both"
|
|
372
|
+
data-id="containerComponent"
|
|
373
|
+
data-selector-id="container"
|
|
374
|
+
data-test-id="containerComponent"
|
|
375
|
+
>
|
|
376
|
+
<i
|
|
377
|
+
aria-hidden="true"
|
|
378
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
379
|
+
data-id="fontIcon"
|
|
380
|
+
data-selector-id="fontIcon"
|
|
381
|
+
data-test-id="fontIcon"
|
|
382
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
383
|
+
/>
|
|
384
|
+
</div>
|
|
385
|
+
</button>
|
|
386
|
+
</div>
|
|
387
|
+
</DocumentFragment>
|
|
388
|
+
`;
|
|
389
|
+
|
|
390
|
+
exports[`Tag component Should be render text 1`] = `
|
|
391
|
+
<DocumentFragment>
|
|
392
|
+
<div
|
|
393
|
+
aria-labelledby="1"
|
|
394
|
+
class="container effect medium lgRadius default "
|
|
395
|
+
data-id="tag_Tag"
|
|
396
|
+
data-selector-id="tag"
|
|
397
|
+
data-test-id="tag_Tag"
|
|
398
|
+
data-title="TagTest"
|
|
399
|
+
tabindex="0"
|
|
400
|
+
>
|
|
401
|
+
<div
|
|
402
|
+
aria-hidden="true"
|
|
403
|
+
class="text mediumtext"
|
|
404
|
+
id="1"
|
|
405
|
+
>
|
|
406
|
+
TagTest
|
|
407
|
+
</div>
|
|
408
|
+
</div>
|
|
409
|
+
</DocumentFragment>
|
|
410
|
+
`;
|
|
411
|
+
|
|
412
|
+
exports[`Tag component Should be render tooltip 1`] = `
|
|
413
|
+
<DocumentFragment>
|
|
414
|
+
<div
|
|
415
|
+
aria-labelledby="1"
|
|
416
|
+
class="container effect medium lgRadius default "
|
|
417
|
+
data-id="tag_Tag"
|
|
418
|
+
data-selector-id="tag"
|
|
419
|
+
data-test-id="tag_Tag"
|
|
420
|
+
data-title="Tagtooltip"
|
|
421
|
+
tabindex="0"
|
|
422
|
+
>
|
|
423
|
+
<div
|
|
424
|
+
aria-hidden="true"
|
|
425
|
+
class="text mediumtext"
|
|
426
|
+
id="1"
|
|
427
|
+
/>
|
|
428
|
+
</div>
|
|
429
|
+
</DocumentFragment>
|
|
430
|
+
`;
|
|
431
|
+
|
|
432
|
+
exports[`Tag component Should be render with the basic set of default props 1`] = `
|
|
433
|
+
<DocumentFragment>
|
|
434
|
+
<div
|
|
435
|
+
aria-labelledby="1"
|
|
436
|
+
class="container effect medium lgRadius default "
|
|
437
|
+
data-id="tag_Tag"
|
|
438
|
+
data-selector-id="tag"
|
|
439
|
+
data-test-id="tag_Tag"
|
|
440
|
+
tabindex="0"
|
|
441
|
+
>
|
|
442
|
+
<div
|
|
443
|
+
aria-hidden="true"
|
|
444
|
+
class="text mediumtext"
|
|
445
|
+
id="1"
|
|
446
|
+
/>
|
|
447
|
+
</div>
|
|
448
|
+
</DocumentFragment>
|
|
449
|
+
`;
|
|
450
|
+
|
|
451
|
+
exports[`Tag component Should render active - danger 1`] = `
|
|
452
|
+
<DocumentFragment>
|
|
453
|
+
<div
|
|
454
|
+
aria-labelledby="1"
|
|
455
|
+
class="container effect selected activedanger activesmallEffect small lgRadius danger "
|
|
456
|
+
data-id="tag_TagSelected"
|
|
457
|
+
data-selector-id="tag"
|
|
458
|
+
data-test-id="tag_TagSelected"
|
|
459
|
+
tabindex="0"
|
|
460
|
+
>
|
|
461
|
+
<div
|
|
462
|
+
aria-hidden="true"
|
|
463
|
+
class="text smalltext"
|
|
464
|
+
id="1"
|
|
465
|
+
/>
|
|
466
|
+
<button
|
|
467
|
+
aria-label="Delete"
|
|
468
|
+
class="buttonReset close activedangerClose
|
|
469
|
+
lgRadiusClose
|
|
470
|
+
closedanger"
|
|
471
|
+
data-id="tag_RemoveTag"
|
|
472
|
+
data-test-id="tag_RemoveTag"
|
|
473
|
+
type="button"
|
|
474
|
+
value="text"
|
|
475
|
+
>
|
|
476
|
+
<div
|
|
477
|
+
class="flex cover coldir both"
|
|
478
|
+
data-id="containerComponent"
|
|
479
|
+
data-selector-id="container"
|
|
480
|
+
data-test-id="containerComponent"
|
|
481
|
+
>
|
|
482
|
+
<i
|
|
483
|
+
aria-hidden="true"
|
|
484
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
485
|
+
data-id="fontIcon"
|
|
486
|
+
data-selector-id="fontIcon"
|
|
487
|
+
data-test-id="fontIcon"
|
|
488
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
489
|
+
/>
|
|
490
|
+
</div>
|
|
491
|
+
</button>
|
|
492
|
+
</div>
|
|
493
|
+
</DocumentFragment>
|
|
494
|
+
`;
|
|
495
|
+
|
|
496
|
+
exports[`Tag component Should render active - danger 2`] = `
|
|
497
|
+
<DocumentFragment>
|
|
498
|
+
<div
|
|
499
|
+
aria-labelledby="2"
|
|
500
|
+
class="container effect selected activedanger activesmallEffect small lgRadius danger "
|
|
501
|
+
data-id="tag_TagSelected"
|
|
502
|
+
data-selector-id="tag"
|
|
503
|
+
data-test-id="tag_TagSelected"
|
|
504
|
+
tabindex="0"
|
|
505
|
+
>
|
|
506
|
+
<div
|
|
507
|
+
aria-hidden="true"
|
|
508
|
+
class="text smalltext"
|
|
509
|
+
id="2"
|
|
510
|
+
/>
|
|
511
|
+
<button
|
|
512
|
+
aria-label="Delete"
|
|
513
|
+
class="buttonReset close activeprimaryClose
|
|
514
|
+
lgRadiusClose
|
|
515
|
+
closeprimary"
|
|
516
|
+
data-id="tag_RemoveTag"
|
|
517
|
+
data-test-id="tag_RemoveTag"
|
|
518
|
+
type="button"
|
|
519
|
+
value="text"
|
|
520
|
+
>
|
|
521
|
+
<div
|
|
522
|
+
class="flex cover coldir both"
|
|
523
|
+
data-id="containerComponent"
|
|
524
|
+
data-selector-id="container"
|
|
525
|
+
data-test-id="containerComponent"
|
|
526
|
+
>
|
|
527
|
+
<i
|
|
528
|
+
aria-hidden="true"
|
|
529
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
530
|
+
data-id="fontIcon"
|
|
531
|
+
data-selector-id="fontIcon"
|
|
532
|
+
data-test-id="fontIcon"
|
|
533
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
534
|
+
/>
|
|
535
|
+
</div>
|
|
536
|
+
</button>
|
|
537
|
+
</div>
|
|
538
|
+
</DocumentFragment>
|
|
539
|
+
`;
|
|
540
|
+
|
|
541
|
+
exports[`Tag component Should render active - danger 3`] = `
|
|
542
|
+
<DocumentFragment>
|
|
543
|
+
<div
|
|
544
|
+
aria-labelledby="3"
|
|
545
|
+
class="container effect selected activedanger activemediumEffect medium lgRadius danger "
|
|
546
|
+
data-id="tag_TagSelected"
|
|
547
|
+
data-selector-id="tag"
|
|
548
|
+
data-test-id="tag_TagSelected"
|
|
549
|
+
tabindex="0"
|
|
550
|
+
>
|
|
551
|
+
<div
|
|
552
|
+
aria-hidden="true"
|
|
553
|
+
class="text mediumtext"
|
|
554
|
+
id="3"
|
|
555
|
+
/>
|
|
556
|
+
<button
|
|
557
|
+
aria-label="Delete"
|
|
558
|
+
class="buttonReset close activedangerClose
|
|
559
|
+
lgRadiusClose
|
|
560
|
+
closedanger"
|
|
561
|
+
data-id="tag_RemoveTag"
|
|
562
|
+
data-test-id="tag_RemoveTag"
|
|
563
|
+
type="button"
|
|
564
|
+
value="text"
|
|
565
|
+
>
|
|
566
|
+
<div
|
|
567
|
+
class="flex cover coldir both"
|
|
568
|
+
data-id="containerComponent"
|
|
569
|
+
data-selector-id="container"
|
|
570
|
+
data-test-id="containerComponent"
|
|
571
|
+
>
|
|
572
|
+
<i
|
|
573
|
+
aria-hidden="true"
|
|
574
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
575
|
+
data-id="fontIcon"
|
|
576
|
+
data-selector-id="fontIcon"
|
|
577
|
+
data-test-id="fontIcon"
|
|
578
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
579
|
+
/>
|
|
580
|
+
</div>
|
|
581
|
+
</button>
|
|
582
|
+
</div>
|
|
583
|
+
</DocumentFragment>
|
|
584
|
+
`;
|
|
585
|
+
|
|
586
|
+
exports[`Tag component Should render active - danger 4`] = `
|
|
587
|
+
<DocumentFragment>
|
|
588
|
+
<div
|
|
589
|
+
aria-labelledby="4"
|
|
590
|
+
class="container effect selected activedanger activemediumEffect medium lgRadius danger "
|
|
591
|
+
data-id="tag_TagSelected"
|
|
592
|
+
data-selector-id="tag"
|
|
593
|
+
data-test-id="tag_TagSelected"
|
|
594
|
+
tabindex="0"
|
|
595
|
+
>
|
|
596
|
+
<div
|
|
597
|
+
aria-hidden="true"
|
|
598
|
+
class="text mediumtext"
|
|
599
|
+
id="4"
|
|
600
|
+
/>
|
|
601
|
+
<button
|
|
602
|
+
aria-label="Delete"
|
|
603
|
+
class="buttonReset close activeprimaryClose
|
|
604
|
+
lgRadiusClose
|
|
605
|
+
closeprimary"
|
|
606
|
+
data-id="tag_RemoveTag"
|
|
607
|
+
data-test-id="tag_RemoveTag"
|
|
608
|
+
type="button"
|
|
609
|
+
value="text"
|
|
610
|
+
>
|
|
611
|
+
<div
|
|
612
|
+
class="flex cover coldir both"
|
|
613
|
+
data-id="containerComponent"
|
|
614
|
+
data-selector-id="container"
|
|
615
|
+
data-test-id="containerComponent"
|
|
616
|
+
>
|
|
617
|
+
<i
|
|
618
|
+
aria-hidden="true"
|
|
619
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
620
|
+
data-id="fontIcon"
|
|
621
|
+
data-selector-id="fontIcon"
|
|
622
|
+
data-test-id="fontIcon"
|
|
623
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
624
|
+
/>
|
|
625
|
+
</div>
|
|
626
|
+
</button>
|
|
627
|
+
</div>
|
|
628
|
+
</DocumentFragment>
|
|
629
|
+
`;
|
|
630
|
+
|
|
631
|
+
exports[`Tag component Should render active - dark 1`] = `
|
|
632
|
+
<DocumentFragment>
|
|
633
|
+
<div
|
|
634
|
+
aria-labelledby="1"
|
|
635
|
+
class="container effect selected undefined activesmallEffect small lgRadius dark "
|
|
636
|
+
data-id="tag_TagSelected"
|
|
637
|
+
data-selector-id="tag"
|
|
638
|
+
data-test-id="tag_TagSelected"
|
|
639
|
+
tabindex="0"
|
|
640
|
+
>
|
|
641
|
+
<div
|
|
642
|
+
aria-hidden="true"
|
|
643
|
+
class="text smalltext"
|
|
644
|
+
id="1"
|
|
645
|
+
/>
|
|
646
|
+
<button
|
|
647
|
+
aria-label="Delete"
|
|
648
|
+
class="buttonReset close activedangerClose
|
|
649
|
+
lgRadiusClose darkTagClose
|
|
650
|
+
closedanger"
|
|
651
|
+
data-id="tag_RemoveTag"
|
|
652
|
+
data-test-id="tag_RemoveTag"
|
|
653
|
+
type="button"
|
|
654
|
+
value="text"
|
|
655
|
+
>
|
|
656
|
+
<div
|
|
657
|
+
class="flex cover coldir both"
|
|
658
|
+
data-id="containerComponent"
|
|
659
|
+
data-selector-id="container"
|
|
660
|
+
data-test-id="containerComponent"
|
|
661
|
+
>
|
|
662
|
+
<i
|
|
663
|
+
aria-hidden="true"
|
|
664
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
665
|
+
data-id="fontIcon"
|
|
666
|
+
data-selector-id="fontIcon"
|
|
667
|
+
data-test-id="fontIcon"
|
|
668
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
669
|
+
/>
|
|
670
|
+
</div>
|
|
671
|
+
</button>
|
|
672
|
+
</div>
|
|
673
|
+
</DocumentFragment>
|
|
674
|
+
`;
|
|
675
|
+
|
|
676
|
+
exports[`Tag component Should render active - dark 2`] = `
|
|
677
|
+
<DocumentFragment>
|
|
678
|
+
<div
|
|
679
|
+
aria-labelledby="2"
|
|
680
|
+
class="container effect selected undefined activesmallEffect small lgRadius dark "
|
|
681
|
+
data-id="tag_TagSelected"
|
|
682
|
+
data-selector-id="tag"
|
|
683
|
+
data-test-id="tag_TagSelected"
|
|
684
|
+
tabindex="0"
|
|
685
|
+
>
|
|
686
|
+
<div
|
|
687
|
+
aria-hidden="true"
|
|
688
|
+
class="text smalltext"
|
|
689
|
+
id="2"
|
|
690
|
+
/>
|
|
691
|
+
<button
|
|
692
|
+
aria-label="Delete"
|
|
693
|
+
class="buttonReset close activeprimaryClose
|
|
694
|
+
lgRadiusClose darkTagClose
|
|
695
|
+
closeprimary"
|
|
696
|
+
data-id="tag_RemoveTag"
|
|
697
|
+
data-test-id="tag_RemoveTag"
|
|
698
|
+
type="button"
|
|
699
|
+
value="text"
|
|
700
|
+
>
|
|
701
|
+
<div
|
|
702
|
+
class="flex cover coldir both"
|
|
703
|
+
data-id="containerComponent"
|
|
704
|
+
data-selector-id="container"
|
|
705
|
+
data-test-id="containerComponent"
|
|
706
|
+
>
|
|
707
|
+
<i
|
|
708
|
+
aria-hidden="true"
|
|
709
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
710
|
+
data-id="fontIcon"
|
|
711
|
+
data-selector-id="fontIcon"
|
|
712
|
+
data-test-id="fontIcon"
|
|
713
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
714
|
+
/>
|
|
715
|
+
</div>
|
|
716
|
+
</button>
|
|
717
|
+
</div>
|
|
718
|
+
</DocumentFragment>
|
|
719
|
+
`;
|
|
720
|
+
|
|
721
|
+
exports[`Tag component Should render active - dark 3`] = `
|
|
722
|
+
<DocumentFragment>
|
|
723
|
+
<div
|
|
724
|
+
aria-labelledby="3"
|
|
725
|
+
class="container effect selected undefined activemediumEffect medium lgRadius dark "
|
|
726
|
+
data-id="tag_TagSelected"
|
|
727
|
+
data-selector-id="tag"
|
|
728
|
+
data-test-id="tag_TagSelected"
|
|
729
|
+
tabindex="0"
|
|
730
|
+
>
|
|
731
|
+
<div
|
|
732
|
+
aria-hidden="true"
|
|
733
|
+
class="text mediumtext"
|
|
734
|
+
id="3"
|
|
735
|
+
/>
|
|
736
|
+
<button
|
|
737
|
+
aria-label="Delete"
|
|
738
|
+
class="buttonReset close activedangerClose
|
|
739
|
+
lgRadiusClose darkTagClose
|
|
740
|
+
closedanger"
|
|
741
|
+
data-id="tag_RemoveTag"
|
|
742
|
+
data-test-id="tag_RemoveTag"
|
|
743
|
+
type="button"
|
|
744
|
+
value="text"
|
|
745
|
+
>
|
|
746
|
+
<div
|
|
747
|
+
class="flex cover coldir both"
|
|
748
|
+
data-id="containerComponent"
|
|
749
|
+
data-selector-id="container"
|
|
750
|
+
data-test-id="containerComponent"
|
|
751
|
+
>
|
|
752
|
+
<i
|
|
753
|
+
aria-hidden="true"
|
|
754
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
755
|
+
data-id="fontIcon"
|
|
756
|
+
data-selector-id="fontIcon"
|
|
757
|
+
data-test-id="fontIcon"
|
|
758
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
759
|
+
/>
|
|
760
|
+
</div>
|
|
761
|
+
</button>
|
|
762
|
+
</div>
|
|
763
|
+
</DocumentFragment>
|
|
764
|
+
`;
|
|
765
|
+
|
|
766
|
+
exports[`Tag component Should render active - dark 4`] = `
|
|
767
|
+
<DocumentFragment>
|
|
768
|
+
<div
|
|
769
|
+
aria-labelledby="4"
|
|
770
|
+
class="container effect selected undefined activemediumEffect medium lgRadius dark "
|
|
771
|
+
data-id="tag_TagSelected"
|
|
772
|
+
data-selector-id="tag"
|
|
773
|
+
data-test-id="tag_TagSelected"
|
|
774
|
+
tabindex="0"
|
|
775
|
+
>
|
|
776
|
+
<div
|
|
777
|
+
aria-hidden="true"
|
|
778
|
+
class="text mediumtext"
|
|
779
|
+
id="4"
|
|
780
|
+
/>
|
|
781
|
+
<button
|
|
782
|
+
aria-label="Delete"
|
|
783
|
+
class="buttonReset close activeprimaryClose
|
|
784
|
+
lgRadiusClose darkTagClose
|
|
785
|
+
closeprimary"
|
|
786
|
+
data-id="tag_RemoveTag"
|
|
787
|
+
data-test-id="tag_RemoveTag"
|
|
788
|
+
type="button"
|
|
789
|
+
value="text"
|
|
790
|
+
>
|
|
791
|
+
<div
|
|
792
|
+
class="flex cover coldir both"
|
|
793
|
+
data-id="containerComponent"
|
|
794
|
+
data-selector-id="container"
|
|
795
|
+
data-test-id="containerComponent"
|
|
796
|
+
>
|
|
797
|
+
<i
|
|
798
|
+
aria-hidden="true"
|
|
799
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
800
|
+
data-id="fontIcon"
|
|
801
|
+
data-selector-id="fontIcon"
|
|
802
|
+
data-test-id="fontIcon"
|
|
803
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
804
|
+
/>
|
|
805
|
+
</div>
|
|
806
|
+
</button>
|
|
807
|
+
</div>
|
|
808
|
+
</DocumentFragment>
|
|
809
|
+
`;
|
|
810
|
+
|
|
811
|
+
exports[`Tag component Should render active - darkPrimaryDotted 1`] = `
|
|
812
|
+
<DocumentFragment>
|
|
813
|
+
<div
|
|
814
|
+
aria-labelledby="1"
|
|
815
|
+
class="container effect selected undefined activesmallEffect small lgRadius darkPrimaryDotted "
|
|
816
|
+
data-id="tag_TagSelected"
|
|
817
|
+
data-selector-id="tag"
|
|
818
|
+
data-test-id="tag_TagSelected"
|
|
819
|
+
tabindex="0"
|
|
820
|
+
>
|
|
821
|
+
<div
|
|
822
|
+
aria-hidden="true"
|
|
823
|
+
class="text smalltext"
|
|
824
|
+
id="1"
|
|
825
|
+
/>
|
|
826
|
+
<button
|
|
827
|
+
aria-label="Delete"
|
|
828
|
+
class="buttonReset close activedangerClose
|
|
829
|
+
lgRadiusClose
|
|
830
|
+
closedanger"
|
|
831
|
+
data-id="tag_RemoveTag"
|
|
832
|
+
data-test-id="tag_RemoveTag"
|
|
833
|
+
type="button"
|
|
834
|
+
value="text"
|
|
835
|
+
>
|
|
836
|
+
<div
|
|
837
|
+
class="flex cover coldir both"
|
|
838
|
+
data-id="containerComponent"
|
|
839
|
+
data-selector-id="container"
|
|
840
|
+
data-test-id="containerComponent"
|
|
841
|
+
>
|
|
842
|
+
<i
|
|
843
|
+
aria-hidden="true"
|
|
844
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
845
|
+
data-id="fontIcon"
|
|
846
|
+
data-selector-id="fontIcon"
|
|
847
|
+
data-test-id="fontIcon"
|
|
848
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
849
|
+
/>
|
|
850
|
+
</div>
|
|
851
|
+
</button>
|
|
852
|
+
</div>
|
|
853
|
+
</DocumentFragment>
|
|
854
|
+
`;
|
|
855
|
+
|
|
856
|
+
exports[`Tag component Should render active - darkPrimaryDotted 2`] = `
|
|
857
|
+
<DocumentFragment>
|
|
858
|
+
<div
|
|
859
|
+
aria-labelledby="2"
|
|
860
|
+
class="container effect selected undefined activesmallEffect small lgRadius darkPrimaryDotted "
|
|
861
|
+
data-id="tag_TagSelected"
|
|
862
|
+
data-selector-id="tag"
|
|
863
|
+
data-test-id="tag_TagSelected"
|
|
864
|
+
tabindex="0"
|
|
865
|
+
>
|
|
866
|
+
<div
|
|
867
|
+
aria-hidden="true"
|
|
868
|
+
class="text smalltext"
|
|
869
|
+
id="2"
|
|
870
|
+
/>
|
|
871
|
+
<button
|
|
872
|
+
aria-label="Delete"
|
|
873
|
+
class="buttonReset close activeprimaryClose
|
|
874
|
+
lgRadiusClose
|
|
875
|
+
closeprimary"
|
|
876
|
+
data-id="tag_RemoveTag"
|
|
877
|
+
data-test-id="tag_RemoveTag"
|
|
878
|
+
type="button"
|
|
879
|
+
value="text"
|
|
880
|
+
>
|
|
881
|
+
<div
|
|
882
|
+
class="flex cover coldir both"
|
|
883
|
+
data-id="containerComponent"
|
|
884
|
+
data-selector-id="container"
|
|
885
|
+
data-test-id="containerComponent"
|
|
886
|
+
>
|
|
887
|
+
<i
|
|
888
|
+
aria-hidden="true"
|
|
889
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
890
|
+
data-id="fontIcon"
|
|
891
|
+
data-selector-id="fontIcon"
|
|
892
|
+
data-test-id="fontIcon"
|
|
893
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
894
|
+
/>
|
|
895
|
+
</div>
|
|
896
|
+
</button>
|
|
897
|
+
</div>
|
|
898
|
+
</DocumentFragment>
|
|
899
|
+
`;
|
|
900
|
+
|
|
901
|
+
exports[`Tag component Should render active - darkPrimaryDotted 3`] = `
|
|
902
|
+
<DocumentFragment>
|
|
903
|
+
<div
|
|
904
|
+
aria-labelledby="3"
|
|
905
|
+
class="container effect selected undefined activemediumEffect medium lgRadius darkPrimaryDotted "
|
|
906
|
+
data-id="tag_TagSelected"
|
|
907
|
+
data-selector-id="tag"
|
|
908
|
+
data-test-id="tag_TagSelected"
|
|
909
|
+
tabindex="0"
|
|
910
|
+
>
|
|
911
|
+
<div
|
|
912
|
+
aria-hidden="true"
|
|
913
|
+
class="text mediumtext"
|
|
914
|
+
id="3"
|
|
915
|
+
/>
|
|
916
|
+
<button
|
|
917
|
+
aria-label="Delete"
|
|
918
|
+
class="buttonReset close activedangerClose
|
|
919
|
+
lgRadiusClose
|
|
920
|
+
closedanger"
|
|
921
|
+
data-id="tag_RemoveTag"
|
|
922
|
+
data-test-id="tag_RemoveTag"
|
|
923
|
+
type="button"
|
|
924
|
+
value="text"
|
|
925
|
+
>
|
|
926
|
+
<div
|
|
927
|
+
class="flex cover coldir both"
|
|
928
|
+
data-id="containerComponent"
|
|
929
|
+
data-selector-id="container"
|
|
930
|
+
data-test-id="containerComponent"
|
|
931
|
+
>
|
|
932
|
+
<i
|
|
933
|
+
aria-hidden="true"
|
|
934
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
935
|
+
data-id="fontIcon"
|
|
936
|
+
data-selector-id="fontIcon"
|
|
937
|
+
data-test-id="fontIcon"
|
|
938
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
939
|
+
/>
|
|
940
|
+
</div>
|
|
941
|
+
</button>
|
|
942
|
+
</div>
|
|
943
|
+
</DocumentFragment>
|
|
944
|
+
`;
|
|
945
|
+
|
|
946
|
+
exports[`Tag component Should render active - darkPrimaryDotted 4`] = `
|
|
947
|
+
<DocumentFragment>
|
|
948
|
+
<div
|
|
949
|
+
aria-labelledby="4"
|
|
950
|
+
class="container effect selected undefined activemediumEffect medium lgRadius darkPrimaryDotted "
|
|
951
|
+
data-id="tag_TagSelected"
|
|
952
|
+
data-selector-id="tag"
|
|
953
|
+
data-test-id="tag_TagSelected"
|
|
954
|
+
tabindex="0"
|
|
955
|
+
>
|
|
956
|
+
<div
|
|
957
|
+
aria-hidden="true"
|
|
958
|
+
class="text mediumtext"
|
|
959
|
+
id="4"
|
|
960
|
+
/>
|
|
961
|
+
<button
|
|
962
|
+
aria-label="Delete"
|
|
963
|
+
class="buttonReset close activeprimaryClose
|
|
964
|
+
lgRadiusClose
|
|
965
|
+
closeprimary"
|
|
966
|
+
data-id="tag_RemoveTag"
|
|
967
|
+
data-test-id="tag_RemoveTag"
|
|
968
|
+
type="button"
|
|
969
|
+
value="text"
|
|
970
|
+
>
|
|
971
|
+
<div
|
|
972
|
+
class="flex cover coldir both"
|
|
973
|
+
data-id="containerComponent"
|
|
974
|
+
data-selector-id="container"
|
|
975
|
+
data-test-id="containerComponent"
|
|
976
|
+
>
|
|
977
|
+
<i
|
|
978
|
+
aria-hidden="true"
|
|
979
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
980
|
+
data-id="fontIcon"
|
|
981
|
+
data-selector-id="fontIcon"
|
|
982
|
+
data-test-id="fontIcon"
|
|
983
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
984
|
+
/>
|
|
985
|
+
</div>
|
|
986
|
+
</button>
|
|
987
|
+
</div>
|
|
988
|
+
</DocumentFragment>
|
|
989
|
+
`;
|
|
990
|
+
|
|
991
|
+
exports[`Tag component Should render active - default 1`] = `
|
|
992
|
+
<DocumentFragment>
|
|
993
|
+
<div
|
|
994
|
+
aria-labelledby="1"
|
|
995
|
+
class="container effect selected activedefault activesmallEffect small lgRadius default "
|
|
996
|
+
data-id="tag_TagSelected"
|
|
997
|
+
data-selector-id="tag"
|
|
998
|
+
data-test-id="tag_TagSelected"
|
|
999
|
+
tabindex="0"
|
|
1000
|
+
>
|
|
1001
|
+
<div
|
|
1002
|
+
aria-hidden="true"
|
|
1003
|
+
class="text smalltext"
|
|
1004
|
+
id="1"
|
|
1005
|
+
/>
|
|
1006
|
+
<button
|
|
1007
|
+
aria-label="Delete"
|
|
1008
|
+
class="buttonReset close activedangerClose
|
|
1009
|
+
lgRadiusClose
|
|
1010
|
+
closedanger"
|
|
1011
|
+
data-id="tag_RemoveTag"
|
|
1012
|
+
data-test-id="tag_RemoveTag"
|
|
1013
|
+
type="button"
|
|
1014
|
+
value="text"
|
|
1015
|
+
>
|
|
1016
|
+
<div
|
|
1017
|
+
class="flex cover coldir both"
|
|
1018
|
+
data-id="containerComponent"
|
|
1019
|
+
data-selector-id="container"
|
|
1020
|
+
data-test-id="containerComponent"
|
|
1021
|
+
>
|
|
1022
|
+
<i
|
|
1023
|
+
aria-hidden="true"
|
|
1024
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
1025
|
+
data-id="fontIcon"
|
|
1026
|
+
data-selector-id="fontIcon"
|
|
1027
|
+
data-test-id="fontIcon"
|
|
1028
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
1029
|
+
/>
|
|
1030
|
+
</div>
|
|
1031
|
+
</button>
|
|
1032
|
+
</div>
|
|
1033
|
+
</DocumentFragment>
|
|
1034
|
+
`;
|
|
1035
|
+
|
|
1036
|
+
exports[`Tag component Should render active - default 2`] = `
|
|
1037
|
+
<DocumentFragment>
|
|
1038
|
+
<div
|
|
1039
|
+
aria-labelledby="2"
|
|
1040
|
+
class="container effect selected activedefault activesmallEffect small lgRadius default "
|
|
1041
|
+
data-id="tag_TagSelected"
|
|
1042
|
+
data-selector-id="tag"
|
|
1043
|
+
data-test-id="tag_TagSelected"
|
|
1044
|
+
tabindex="0"
|
|
1045
|
+
>
|
|
1046
|
+
<div
|
|
1047
|
+
aria-hidden="true"
|
|
1048
|
+
class="text smalltext"
|
|
1049
|
+
id="2"
|
|
1050
|
+
/>
|
|
1051
|
+
<button
|
|
1052
|
+
aria-label="Delete"
|
|
1053
|
+
class="buttonReset close activeprimaryClose
|
|
1054
|
+
lgRadiusClose
|
|
1055
|
+
closeprimary"
|
|
1056
|
+
data-id="tag_RemoveTag"
|
|
1057
|
+
data-test-id="tag_RemoveTag"
|
|
1058
|
+
type="button"
|
|
1059
|
+
value="text"
|
|
1060
|
+
>
|
|
1061
|
+
<div
|
|
1062
|
+
class="flex cover coldir both"
|
|
1063
|
+
data-id="containerComponent"
|
|
1064
|
+
data-selector-id="container"
|
|
1065
|
+
data-test-id="containerComponent"
|
|
1066
|
+
>
|
|
1067
|
+
<i
|
|
1068
|
+
aria-hidden="true"
|
|
1069
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
1070
|
+
data-id="fontIcon"
|
|
1071
|
+
data-selector-id="fontIcon"
|
|
1072
|
+
data-test-id="fontIcon"
|
|
1073
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
1074
|
+
/>
|
|
1075
|
+
</div>
|
|
1076
|
+
</button>
|
|
1077
|
+
</div>
|
|
1078
|
+
</DocumentFragment>
|
|
1079
|
+
`;
|
|
1080
|
+
|
|
1081
|
+
exports[`Tag component Should render active - default 3`] = `
|
|
1082
|
+
<DocumentFragment>
|
|
1083
|
+
<div
|
|
1084
|
+
aria-labelledby="3"
|
|
1085
|
+
class="container effect selected activedefault activemediumEffect medium lgRadius default "
|
|
1086
|
+
data-id="tag_TagSelected"
|
|
1087
|
+
data-selector-id="tag"
|
|
1088
|
+
data-test-id="tag_TagSelected"
|
|
1089
|
+
tabindex="0"
|
|
1090
|
+
>
|
|
1091
|
+
<div
|
|
1092
|
+
aria-hidden="true"
|
|
1093
|
+
class="text mediumtext"
|
|
1094
|
+
id="3"
|
|
1095
|
+
/>
|
|
1096
|
+
<button
|
|
1097
|
+
aria-label="Delete"
|
|
1098
|
+
class="buttonReset close activedangerClose
|
|
1099
|
+
lgRadiusClose
|
|
1100
|
+
closedanger"
|
|
1101
|
+
data-id="tag_RemoveTag"
|
|
1102
|
+
data-test-id="tag_RemoveTag"
|
|
1103
|
+
type="button"
|
|
1104
|
+
value="text"
|
|
1105
|
+
>
|
|
1106
|
+
<div
|
|
1107
|
+
class="flex cover coldir both"
|
|
1108
|
+
data-id="containerComponent"
|
|
1109
|
+
data-selector-id="container"
|
|
1110
|
+
data-test-id="containerComponent"
|
|
1111
|
+
>
|
|
1112
|
+
<i
|
|
1113
|
+
aria-hidden="true"
|
|
1114
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
1115
|
+
data-id="fontIcon"
|
|
1116
|
+
data-selector-id="fontIcon"
|
|
1117
|
+
data-test-id="fontIcon"
|
|
1118
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
1119
|
+
/>
|
|
1120
|
+
</div>
|
|
1121
|
+
</button>
|
|
1122
|
+
</div>
|
|
1123
|
+
</DocumentFragment>
|
|
1124
|
+
`;
|
|
1125
|
+
|
|
1126
|
+
exports[`Tag component Should render active - default 4`] = `
|
|
1127
|
+
<DocumentFragment>
|
|
1128
|
+
<div
|
|
1129
|
+
aria-labelledby="4"
|
|
1130
|
+
class="container effect selected activedefault activemediumEffect medium lgRadius default "
|
|
1131
|
+
data-id="tag_TagSelected"
|
|
1132
|
+
data-selector-id="tag"
|
|
1133
|
+
data-test-id="tag_TagSelected"
|
|
1134
|
+
tabindex="0"
|
|
1135
|
+
>
|
|
1136
|
+
<div
|
|
1137
|
+
aria-hidden="true"
|
|
1138
|
+
class="text mediumtext"
|
|
1139
|
+
id="4"
|
|
1140
|
+
/>
|
|
1141
|
+
<button
|
|
1142
|
+
aria-label="Delete"
|
|
1143
|
+
class="buttonReset close activeprimaryClose
|
|
1144
|
+
lgRadiusClose
|
|
1145
|
+
closeprimary"
|
|
1146
|
+
data-id="tag_RemoveTag"
|
|
1147
|
+
data-test-id="tag_RemoveTag"
|
|
1148
|
+
type="button"
|
|
1149
|
+
value="text"
|
|
1150
|
+
>
|
|
1151
|
+
<div
|
|
1152
|
+
class="flex cover coldir both"
|
|
1153
|
+
data-id="containerComponent"
|
|
1154
|
+
data-selector-id="container"
|
|
1155
|
+
data-test-id="containerComponent"
|
|
1156
|
+
>
|
|
1157
|
+
<i
|
|
1158
|
+
aria-hidden="true"
|
|
1159
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
1160
|
+
data-id="fontIcon"
|
|
1161
|
+
data-selector-id="fontIcon"
|
|
1162
|
+
data-test-id="fontIcon"
|
|
1163
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
1164
|
+
/>
|
|
1165
|
+
</div>
|
|
1166
|
+
</button>
|
|
1167
|
+
</div>
|
|
1168
|
+
</DocumentFragment>
|
|
1169
|
+
`;
|
|
1170
|
+
|
|
1171
|
+
exports[`Tag component Should render active - defaultLink 1`] = `
|
|
1172
|
+
<DocumentFragment>
|
|
1173
|
+
<div
|
|
1174
|
+
aria-labelledby="1"
|
|
1175
|
+
class="container effect selected activedefaultLink activesmallEffect small lgRadius defaultLink "
|
|
1176
|
+
data-id="tag_TagSelected"
|
|
1177
|
+
data-selector-id="tag"
|
|
1178
|
+
data-test-id="tag_TagSelected"
|
|
1179
|
+
tabindex="0"
|
|
1180
|
+
>
|
|
1181
|
+
<div
|
|
1182
|
+
aria-hidden="true"
|
|
1183
|
+
class="text smalltext"
|
|
1184
|
+
id="1"
|
|
1185
|
+
/>
|
|
1186
|
+
<button
|
|
1187
|
+
aria-label="Delete"
|
|
1188
|
+
class="buttonReset close activedangerClose
|
|
1189
|
+
lgRadiusClose
|
|
1190
|
+
closedanger"
|
|
1191
|
+
data-id="tag_RemoveTag"
|
|
1192
|
+
data-test-id="tag_RemoveTag"
|
|
1193
|
+
type="button"
|
|
1194
|
+
value="text"
|
|
1195
|
+
>
|
|
1196
|
+
<div
|
|
1197
|
+
class="flex cover coldir both"
|
|
1198
|
+
data-id="containerComponent"
|
|
1199
|
+
data-selector-id="container"
|
|
1200
|
+
data-test-id="containerComponent"
|
|
1201
|
+
>
|
|
1202
|
+
<i
|
|
1203
|
+
aria-hidden="true"
|
|
1204
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
1205
|
+
data-id="fontIcon"
|
|
1206
|
+
data-selector-id="fontIcon"
|
|
1207
|
+
data-test-id="fontIcon"
|
|
1208
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
1209
|
+
/>
|
|
1210
|
+
</div>
|
|
1211
|
+
</button>
|
|
1212
|
+
</div>
|
|
1213
|
+
</DocumentFragment>
|
|
1214
|
+
`;
|
|
1215
|
+
|
|
1216
|
+
exports[`Tag component Should render active - defaultLink 2`] = `
|
|
1217
|
+
<DocumentFragment>
|
|
1218
|
+
<div
|
|
1219
|
+
aria-labelledby="2"
|
|
1220
|
+
class="container effect selected activedefaultLink activesmallEffect small lgRadius defaultLink "
|
|
1221
|
+
data-id="tag_TagSelected"
|
|
1222
|
+
data-selector-id="tag"
|
|
1223
|
+
data-test-id="tag_TagSelected"
|
|
1224
|
+
tabindex="0"
|
|
1225
|
+
>
|
|
1226
|
+
<div
|
|
1227
|
+
aria-hidden="true"
|
|
1228
|
+
class="text smalltext"
|
|
1229
|
+
id="2"
|
|
1230
|
+
/>
|
|
1231
|
+
<button
|
|
1232
|
+
aria-label="Delete"
|
|
1233
|
+
class="buttonReset close activeprimaryClose
|
|
1234
|
+
lgRadiusClose
|
|
1235
|
+
closeprimary"
|
|
1236
|
+
data-id="tag_RemoveTag"
|
|
1237
|
+
data-test-id="tag_RemoveTag"
|
|
1238
|
+
type="button"
|
|
1239
|
+
value="text"
|
|
1240
|
+
>
|
|
1241
|
+
<div
|
|
1242
|
+
class="flex cover coldir both"
|
|
1243
|
+
data-id="containerComponent"
|
|
1244
|
+
data-selector-id="container"
|
|
1245
|
+
data-test-id="containerComponent"
|
|
1246
|
+
>
|
|
1247
|
+
<i
|
|
1248
|
+
aria-hidden="true"
|
|
1249
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
1250
|
+
data-id="fontIcon"
|
|
1251
|
+
data-selector-id="fontIcon"
|
|
1252
|
+
data-test-id="fontIcon"
|
|
1253
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
1254
|
+
/>
|
|
1255
|
+
</div>
|
|
1256
|
+
</button>
|
|
1257
|
+
</div>
|
|
1258
|
+
</DocumentFragment>
|
|
1259
|
+
`;
|
|
1260
|
+
|
|
1261
|
+
exports[`Tag component Should render active - defaultLink 3`] = `
|
|
1262
|
+
<DocumentFragment>
|
|
1263
|
+
<div
|
|
1264
|
+
aria-labelledby="3"
|
|
1265
|
+
class="container effect selected activedefaultLink activemediumEffect medium lgRadius defaultLink "
|
|
1266
|
+
data-id="tag_TagSelected"
|
|
1267
|
+
data-selector-id="tag"
|
|
1268
|
+
data-test-id="tag_TagSelected"
|
|
1269
|
+
tabindex="0"
|
|
1270
|
+
>
|
|
1271
|
+
<div
|
|
1272
|
+
aria-hidden="true"
|
|
1273
|
+
class="text mediumtext"
|
|
1274
|
+
id="3"
|
|
1275
|
+
/>
|
|
1276
|
+
<button
|
|
1277
|
+
aria-label="Delete"
|
|
1278
|
+
class="buttonReset close activedangerClose
|
|
1279
|
+
lgRadiusClose
|
|
1280
|
+
closedanger"
|
|
1281
|
+
data-id="tag_RemoveTag"
|
|
1282
|
+
data-test-id="tag_RemoveTag"
|
|
1283
|
+
type="button"
|
|
1284
|
+
value="text"
|
|
1285
|
+
>
|
|
1286
|
+
<div
|
|
1287
|
+
class="flex cover coldir both"
|
|
1288
|
+
data-id="containerComponent"
|
|
1289
|
+
data-selector-id="container"
|
|
1290
|
+
data-test-id="containerComponent"
|
|
1291
|
+
>
|
|
1292
|
+
<i
|
|
1293
|
+
aria-hidden="true"
|
|
1294
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
1295
|
+
data-id="fontIcon"
|
|
1296
|
+
data-selector-id="fontIcon"
|
|
1297
|
+
data-test-id="fontIcon"
|
|
1298
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
1299
|
+
/>
|
|
1300
|
+
</div>
|
|
1301
|
+
</button>
|
|
1302
|
+
</div>
|
|
1303
|
+
</DocumentFragment>
|
|
1304
|
+
`;
|
|
1305
|
+
|
|
1306
|
+
exports[`Tag component Should render active - defaultLink 4`] = `
|
|
1307
|
+
<DocumentFragment>
|
|
1308
|
+
<div
|
|
1309
|
+
aria-labelledby="4"
|
|
1310
|
+
class="container effect selected activedefaultLink activemediumEffect medium lgRadius defaultLink "
|
|
1311
|
+
data-id="tag_TagSelected"
|
|
1312
|
+
data-selector-id="tag"
|
|
1313
|
+
data-test-id="tag_TagSelected"
|
|
1314
|
+
tabindex="0"
|
|
1315
|
+
>
|
|
1316
|
+
<div
|
|
1317
|
+
aria-hidden="true"
|
|
1318
|
+
class="text mediumtext"
|
|
1319
|
+
id="4"
|
|
1320
|
+
/>
|
|
1321
|
+
<button
|
|
1322
|
+
aria-label="Delete"
|
|
1323
|
+
class="buttonReset close activeprimaryClose
|
|
1324
|
+
lgRadiusClose
|
|
1325
|
+
closeprimary"
|
|
1326
|
+
data-id="tag_RemoveTag"
|
|
1327
|
+
data-test-id="tag_RemoveTag"
|
|
1328
|
+
type="button"
|
|
1329
|
+
value="text"
|
|
1330
|
+
>
|
|
1331
|
+
<div
|
|
1332
|
+
class="flex cover coldir both"
|
|
1333
|
+
data-id="containerComponent"
|
|
1334
|
+
data-selector-id="container"
|
|
1335
|
+
data-test-id="containerComponent"
|
|
1336
|
+
>
|
|
1337
|
+
<i
|
|
1338
|
+
aria-hidden="true"
|
|
1339
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
1340
|
+
data-id="fontIcon"
|
|
1341
|
+
data-selector-id="fontIcon"
|
|
1342
|
+
data-test-id="fontIcon"
|
|
1343
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
1344
|
+
/>
|
|
1345
|
+
</div>
|
|
1346
|
+
</button>
|
|
1347
|
+
</div>
|
|
1348
|
+
</DocumentFragment>
|
|
1349
|
+
`;
|
|
1350
|
+
|
|
1351
|
+
exports[`Tag component Should render active - primaryDotted 1`] = `
|
|
1352
|
+
<DocumentFragment>
|
|
1353
|
+
<div
|
|
1354
|
+
aria-labelledby="1"
|
|
1355
|
+
class="container effect selected activeprimaryDotted activesmallEffect small lgRadius primaryDotted "
|
|
1356
|
+
data-id="tag_TagSelected"
|
|
1357
|
+
data-selector-id="tag"
|
|
1358
|
+
data-test-id="tag_TagSelected"
|
|
1359
|
+
tabindex="0"
|
|
1360
|
+
>
|
|
1361
|
+
<div
|
|
1362
|
+
aria-hidden="true"
|
|
1363
|
+
class="text smalltext"
|
|
1364
|
+
id="1"
|
|
1365
|
+
/>
|
|
1366
|
+
<button
|
|
1367
|
+
aria-label="Delete"
|
|
1368
|
+
class="buttonReset close activedangerClose
|
|
1369
|
+
lgRadiusClose
|
|
1370
|
+
closedanger"
|
|
1371
|
+
data-id="tag_RemoveTag"
|
|
1372
|
+
data-test-id="tag_RemoveTag"
|
|
1373
|
+
type="button"
|
|
1374
|
+
value="text"
|
|
1375
|
+
>
|
|
1376
|
+
<div
|
|
1377
|
+
class="flex cover coldir both"
|
|
1378
|
+
data-id="containerComponent"
|
|
1379
|
+
data-selector-id="container"
|
|
1380
|
+
data-test-id="containerComponent"
|
|
1381
|
+
>
|
|
1382
|
+
<i
|
|
1383
|
+
aria-hidden="true"
|
|
1384
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
1385
|
+
data-id="fontIcon"
|
|
1386
|
+
data-selector-id="fontIcon"
|
|
1387
|
+
data-test-id="fontIcon"
|
|
1388
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
1389
|
+
/>
|
|
1390
|
+
</div>
|
|
1391
|
+
</button>
|
|
1392
|
+
</div>
|
|
1393
|
+
</DocumentFragment>
|
|
1394
|
+
`;
|
|
1395
|
+
|
|
1396
|
+
exports[`Tag component Should render active - primaryDotted 2`] = `
|
|
1397
|
+
<DocumentFragment>
|
|
1398
|
+
<div
|
|
1399
|
+
aria-labelledby="2"
|
|
1400
|
+
class="container effect selected activeprimaryDotted activesmallEffect small lgRadius primaryDotted "
|
|
1401
|
+
data-id="tag_TagSelected"
|
|
1402
|
+
data-selector-id="tag"
|
|
1403
|
+
data-test-id="tag_TagSelected"
|
|
1404
|
+
tabindex="0"
|
|
1405
|
+
>
|
|
1406
|
+
<div
|
|
1407
|
+
aria-hidden="true"
|
|
1408
|
+
class="text smalltext"
|
|
1409
|
+
id="2"
|
|
1410
|
+
/>
|
|
1411
|
+
<button
|
|
1412
|
+
aria-label="Delete"
|
|
1413
|
+
class="buttonReset close activeprimaryClose
|
|
1414
|
+
lgRadiusClose
|
|
1415
|
+
closeprimary"
|
|
1416
|
+
data-id="tag_RemoveTag"
|
|
1417
|
+
data-test-id="tag_RemoveTag"
|
|
1418
|
+
type="button"
|
|
1419
|
+
value="text"
|
|
1420
|
+
>
|
|
1421
|
+
<div
|
|
1422
|
+
class="flex cover coldir both"
|
|
1423
|
+
data-id="containerComponent"
|
|
1424
|
+
data-selector-id="container"
|
|
1425
|
+
data-test-id="containerComponent"
|
|
1426
|
+
>
|
|
1427
|
+
<i
|
|
1428
|
+
aria-hidden="true"
|
|
1429
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
1430
|
+
data-id="fontIcon"
|
|
1431
|
+
data-selector-id="fontIcon"
|
|
1432
|
+
data-test-id="fontIcon"
|
|
1433
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
1434
|
+
/>
|
|
1435
|
+
</div>
|
|
1436
|
+
</button>
|
|
1437
|
+
</div>
|
|
1438
|
+
</DocumentFragment>
|
|
1439
|
+
`;
|
|
1440
|
+
|
|
1441
|
+
exports[`Tag component Should render active - primaryDotted 3`] = `
|
|
1442
|
+
<DocumentFragment>
|
|
1443
|
+
<div
|
|
1444
|
+
aria-labelledby="3"
|
|
1445
|
+
class="container effect selected activeprimaryDotted activemediumEffect medium lgRadius primaryDotted "
|
|
1446
|
+
data-id="tag_TagSelected"
|
|
1447
|
+
data-selector-id="tag"
|
|
1448
|
+
data-test-id="tag_TagSelected"
|
|
1449
|
+
tabindex="0"
|
|
1450
|
+
>
|
|
1451
|
+
<div
|
|
1452
|
+
aria-hidden="true"
|
|
1453
|
+
class="text mediumtext"
|
|
1454
|
+
id="3"
|
|
1455
|
+
/>
|
|
1456
|
+
<button
|
|
1457
|
+
aria-label="Delete"
|
|
1458
|
+
class="buttonReset close activedangerClose
|
|
1459
|
+
lgRadiusClose
|
|
1460
|
+
closedanger"
|
|
1461
|
+
data-id="tag_RemoveTag"
|
|
1462
|
+
data-test-id="tag_RemoveTag"
|
|
1463
|
+
type="button"
|
|
1464
|
+
value="text"
|
|
1465
|
+
>
|
|
1466
|
+
<div
|
|
1467
|
+
class="flex cover coldir both"
|
|
1468
|
+
data-id="containerComponent"
|
|
1469
|
+
data-selector-id="container"
|
|
1470
|
+
data-test-id="containerComponent"
|
|
1471
|
+
>
|
|
1472
|
+
<i
|
|
1473
|
+
aria-hidden="true"
|
|
1474
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
1475
|
+
data-id="fontIcon"
|
|
1476
|
+
data-selector-id="fontIcon"
|
|
1477
|
+
data-test-id="fontIcon"
|
|
1478
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
1479
|
+
/>
|
|
1480
|
+
</div>
|
|
1481
|
+
</button>
|
|
1482
|
+
</div>
|
|
1483
|
+
</DocumentFragment>
|
|
1484
|
+
`;
|
|
1485
|
+
|
|
1486
|
+
exports[`Tag component Should render active - primaryDotted 4`] = `
|
|
1487
|
+
<DocumentFragment>
|
|
1488
|
+
<div
|
|
1489
|
+
aria-labelledby="4"
|
|
1490
|
+
class="container effect selected activeprimaryDotted activemediumEffect medium lgRadius primaryDotted "
|
|
1491
|
+
data-id="tag_TagSelected"
|
|
1492
|
+
data-selector-id="tag"
|
|
1493
|
+
data-test-id="tag_TagSelected"
|
|
1494
|
+
tabindex="0"
|
|
1495
|
+
>
|
|
1496
|
+
<div
|
|
1497
|
+
aria-hidden="true"
|
|
1498
|
+
class="text mediumtext"
|
|
1499
|
+
id="4"
|
|
1500
|
+
/>
|
|
1501
|
+
<button
|
|
1502
|
+
aria-label="Delete"
|
|
1503
|
+
class="buttonReset close activeprimaryClose
|
|
1504
|
+
lgRadiusClose
|
|
1505
|
+
closeprimary"
|
|
1506
|
+
data-id="tag_RemoveTag"
|
|
1507
|
+
data-test-id="tag_RemoveTag"
|
|
1508
|
+
type="button"
|
|
1509
|
+
value="text"
|
|
1510
|
+
>
|
|
1511
|
+
<div
|
|
1512
|
+
class="flex cover coldir both"
|
|
1513
|
+
data-id="containerComponent"
|
|
1514
|
+
data-selector-id="container"
|
|
1515
|
+
data-test-id="containerComponent"
|
|
1516
|
+
>
|
|
1517
|
+
<i
|
|
1518
|
+
aria-hidden="true"
|
|
1519
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
1520
|
+
data-id="fontIcon"
|
|
1521
|
+
data-selector-id="fontIcon"
|
|
1522
|
+
data-test-id="fontIcon"
|
|
1523
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
1524
|
+
/>
|
|
1525
|
+
</div>
|
|
1526
|
+
</button>
|
|
1527
|
+
</div>
|
|
1528
|
+
</DocumentFragment>
|
|
1529
|
+
`;
|
|
1530
|
+
|
|
1531
|
+
exports[`Tag component Should render active - pureDarkDotted 1`] = `
|
|
1532
|
+
<DocumentFragment>
|
|
1533
|
+
<div
|
|
1534
|
+
aria-labelledby="1"
|
|
1535
|
+
class="container effect selected undefined activesmallEffect small lgRadius pureDarkDotted "
|
|
1536
|
+
data-id="tag_TagSelected"
|
|
1537
|
+
data-selector-id="tag"
|
|
1538
|
+
data-test-id="tag_TagSelected"
|
|
1539
|
+
tabindex="0"
|
|
1540
|
+
>
|
|
1541
|
+
<div
|
|
1542
|
+
aria-hidden="true"
|
|
1543
|
+
class="text smalltext"
|
|
1544
|
+
id="1"
|
|
1545
|
+
/>
|
|
1546
|
+
<button
|
|
1547
|
+
aria-label="Delete"
|
|
1548
|
+
class="buttonReset close activedangerClose
|
|
1549
|
+
lgRadiusClose
|
|
1550
|
+
closedanger"
|
|
1551
|
+
data-id="tag_RemoveTag"
|
|
1552
|
+
data-test-id="tag_RemoveTag"
|
|
1553
|
+
type="button"
|
|
1554
|
+
value="text"
|
|
1555
|
+
>
|
|
1556
|
+
<div
|
|
1557
|
+
class="flex cover coldir both"
|
|
1558
|
+
data-id="containerComponent"
|
|
1559
|
+
data-selector-id="container"
|
|
1560
|
+
data-test-id="containerComponent"
|
|
1561
|
+
>
|
|
1562
|
+
<i
|
|
1563
|
+
aria-hidden="true"
|
|
1564
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
1565
|
+
data-id="fontIcon"
|
|
1566
|
+
data-selector-id="fontIcon"
|
|
1567
|
+
data-test-id="fontIcon"
|
|
1568
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
1569
|
+
/>
|
|
1570
|
+
</div>
|
|
1571
|
+
</button>
|
|
1572
|
+
</div>
|
|
1573
|
+
</DocumentFragment>
|
|
1574
|
+
`;
|
|
1575
|
+
|
|
1576
|
+
exports[`Tag component Should render active - pureDarkDotted 2`] = `
|
|
1577
|
+
<DocumentFragment>
|
|
1578
|
+
<div
|
|
1579
|
+
aria-labelledby="2"
|
|
1580
|
+
class="container effect selected undefined activesmallEffect small lgRadius pureDarkDotted "
|
|
1581
|
+
data-id="tag_TagSelected"
|
|
1582
|
+
data-selector-id="tag"
|
|
1583
|
+
data-test-id="tag_TagSelected"
|
|
1584
|
+
tabindex="0"
|
|
1585
|
+
>
|
|
1586
|
+
<div
|
|
1587
|
+
aria-hidden="true"
|
|
1588
|
+
class="text smalltext"
|
|
1589
|
+
id="2"
|
|
1590
|
+
/>
|
|
1591
|
+
<button
|
|
1592
|
+
aria-label="Delete"
|
|
1593
|
+
class="buttonReset close activeprimaryClose
|
|
1594
|
+
lgRadiusClose
|
|
1595
|
+
closeprimary"
|
|
1596
|
+
data-id="tag_RemoveTag"
|
|
1597
|
+
data-test-id="tag_RemoveTag"
|
|
1598
|
+
type="button"
|
|
1599
|
+
value="text"
|
|
1600
|
+
>
|
|
1601
|
+
<div
|
|
1602
|
+
class="flex cover coldir both"
|
|
1603
|
+
data-id="containerComponent"
|
|
1604
|
+
data-selector-id="container"
|
|
1605
|
+
data-test-id="containerComponent"
|
|
1606
|
+
>
|
|
1607
|
+
<i
|
|
1608
|
+
aria-hidden="true"
|
|
1609
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
1610
|
+
data-id="fontIcon"
|
|
1611
|
+
data-selector-id="fontIcon"
|
|
1612
|
+
data-test-id="fontIcon"
|
|
1613
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
1614
|
+
/>
|
|
1615
|
+
</div>
|
|
1616
|
+
</button>
|
|
1617
|
+
</div>
|
|
1618
|
+
</DocumentFragment>
|
|
1619
|
+
`;
|
|
1620
|
+
|
|
1621
|
+
exports[`Tag component Should render active - pureDarkDotted 3`] = `
|
|
1622
|
+
<DocumentFragment>
|
|
1623
|
+
<div
|
|
1624
|
+
aria-labelledby="3"
|
|
1625
|
+
class="container effect selected undefined activemediumEffect medium lgRadius pureDarkDotted "
|
|
1626
|
+
data-id="tag_TagSelected"
|
|
1627
|
+
data-selector-id="tag"
|
|
1628
|
+
data-test-id="tag_TagSelected"
|
|
1629
|
+
tabindex="0"
|
|
1630
|
+
>
|
|
1631
|
+
<div
|
|
1632
|
+
aria-hidden="true"
|
|
1633
|
+
class="text mediumtext"
|
|
1634
|
+
id="3"
|
|
1635
|
+
/>
|
|
1636
|
+
<button
|
|
1637
|
+
aria-label="Delete"
|
|
1638
|
+
class="buttonReset close activedangerClose
|
|
1639
|
+
lgRadiusClose
|
|
1640
|
+
closedanger"
|
|
1641
|
+
data-id="tag_RemoveTag"
|
|
1642
|
+
data-test-id="tag_RemoveTag"
|
|
1643
|
+
type="button"
|
|
1644
|
+
value="text"
|
|
1645
|
+
>
|
|
1646
|
+
<div
|
|
1647
|
+
class="flex cover coldir both"
|
|
1648
|
+
data-id="containerComponent"
|
|
1649
|
+
data-selector-id="container"
|
|
1650
|
+
data-test-id="containerComponent"
|
|
1651
|
+
>
|
|
1652
|
+
<i
|
|
1653
|
+
aria-hidden="true"
|
|
1654
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
1655
|
+
data-id="fontIcon"
|
|
1656
|
+
data-selector-id="fontIcon"
|
|
1657
|
+
data-test-id="fontIcon"
|
|
1658
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
1659
|
+
/>
|
|
1660
|
+
</div>
|
|
1661
|
+
</button>
|
|
1662
|
+
</div>
|
|
1663
|
+
</DocumentFragment>
|
|
1664
|
+
`;
|
|
1665
|
+
|
|
1666
|
+
exports[`Tag component Should render active - pureDarkDotted 4`] = `
|
|
1667
|
+
<DocumentFragment>
|
|
1668
|
+
<div
|
|
1669
|
+
aria-labelledby="4"
|
|
1670
|
+
class="container effect selected undefined activemediumEffect medium lgRadius pureDarkDotted "
|
|
1671
|
+
data-id="tag_TagSelected"
|
|
1672
|
+
data-selector-id="tag"
|
|
1673
|
+
data-test-id="tag_TagSelected"
|
|
1674
|
+
tabindex="0"
|
|
1675
|
+
>
|
|
1676
|
+
<div
|
|
1677
|
+
aria-hidden="true"
|
|
1678
|
+
class="text mediumtext"
|
|
1679
|
+
id="4"
|
|
1680
|
+
/>
|
|
1681
|
+
<button
|
|
1682
|
+
aria-label="Delete"
|
|
1683
|
+
class="buttonReset close activeprimaryClose
|
|
1684
|
+
lgRadiusClose
|
|
1685
|
+
closeprimary"
|
|
1686
|
+
data-id="tag_RemoveTag"
|
|
1687
|
+
data-test-id="tag_RemoveTag"
|
|
1688
|
+
type="button"
|
|
1689
|
+
value="text"
|
|
1690
|
+
>
|
|
1691
|
+
<div
|
|
1692
|
+
class="flex cover coldir both"
|
|
1693
|
+
data-id="containerComponent"
|
|
1694
|
+
data-selector-id="container"
|
|
1695
|
+
data-test-id="containerComponent"
|
|
1696
|
+
>
|
|
1697
|
+
<i
|
|
1698
|
+
aria-hidden="true"
|
|
1699
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
1700
|
+
data-id="fontIcon"
|
|
1701
|
+
data-selector-id="fontIcon"
|
|
1702
|
+
data-test-id="fontIcon"
|
|
1703
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
1704
|
+
/>
|
|
1705
|
+
</div>
|
|
1706
|
+
</button>
|
|
1707
|
+
</div>
|
|
1708
|
+
</DocumentFragment>
|
|
1709
|
+
`;
|
|
1710
|
+
|
|
1711
|
+
exports[`Tag component Should render active - pureDotted 1`] = `
|
|
1712
|
+
<DocumentFragment>
|
|
1713
|
+
<div
|
|
1714
|
+
aria-labelledby="1"
|
|
1715
|
+
class="container effect selected activepureDotted activesmallEffect small lgRadius pureDotted "
|
|
1716
|
+
data-id="tag_TagSelected"
|
|
1717
|
+
data-selector-id="tag"
|
|
1718
|
+
data-test-id="tag_TagSelected"
|
|
1719
|
+
tabindex="0"
|
|
1720
|
+
>
|
|
1721
|
+
<div
|
|
1722
|
+
aria-hidden="true"
|
|
1723
|
+
class="text smalltext"
|
|
1724
|
+
id="1"
|
|
1725
|
+
/>
|
|
1726
|
+
<button
|
|
1727
|
+
aria-label="Delete"
|
|
1728
|
+
class="buttonReset close activedangerClose
|
|
1729
|
+
lgRadiusClose
|
|
1730
|
+
closedanger"
|
|
1731
|
+
data-id="tag_RemoveTag"
|
|
1732
|
+
data-test-id="tag_RemoveTag"
|
|
1733
|
+
type="button"
|
|
1734
|
+
value="text"
|
|
1735
|
+
>
|
|
1736
|
+
<div
|
|
1737
|
+
class="flex cover coldir both"
|
|
1738
|
+
data-id="containerComponent"
|
|
1739
|
+
data-selector-id="container"
|
|
1740
|
+
data-test-id="containerComponent"
|
|
1741
|
+
>
|
|
1742
|
+
<i
|
|
1743
|
+
aria-hidden="true"
|
|
1744
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
1745
|
+
data-id="fontIcon"
|
|
1746
|
+
data-selector-id="fontIcon"
|
|
1747
|
+
data-test-id="fontIcon"
|
|
1748
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
1749
|
+
/>
|
|
1750
|
+
</div>
|
|
1751
|
+
</button>
|
|
1752
|
+
</div>
|
|
1753
|
+
</DocumentFragment>
|
|
1754
|
+
`;
|
|
1755
|
+
|
|
1756
|
+
exports[`Tag component Should render active - pureDotted 2`] = `
|
|
1757
|
+
<DocumentFragment>
|
|
1758
|
+
<div
|
|
1759
|
+
aria-labelledby="2"
|
|
1760
|
+
class="container effect selected activepureDotted activesmallEffect small lgRadius pureDotted "
|
|
1761
|
+
data-id="tag_TagSelected"
|
|
1762
|
+
data-selector-id="tag"
|
|
1763
|
+
data-test-id="tag_TagSelected"
|
|
1764
|
+
tabindex="0"
|
|
1765
|
+
>
|
|
1766
|
+
<div
|
|
1767
|
+
aria-hidden="true"
|
|
1768
|
+
class="text smalltext"
|
|
1769
|
+
id="2"
|
|
1770
|
+
/>
|
|
1771
|
+
<button
|
|
1772
|
+
aria-label="Delete"
|
|
1773
|
+
class="buttonReset close activeprimaryClose
|
|
1774
|
+
lgRadiusClose
|
|
1775
|
+
closeprimary"
|
|
1776
|
+
data-id="tag_RemoveTag"
|
|
1777
|
+
data-test-id="tag_RemoveTag"
|
|
1778
|
+
type="button"
|
|
1779
|
+
value="text"
|
|
1780
|
+
>
|
|
1781
|
+
<div
|
|
1782
|
+
class="flex cover coldir both"
|
|
1783
|
+
data-id="containerComponent"
|
|
1784
|
+
data-selector-id="container"
|
|
1785
|
+
data-test-id="containerComponent"
|
|
1786
|
+
>
|
|
1787
|
+
<i
|
|
1788
|
+
aria-hidden="true"
|
|
1789
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
1790
|
+
data-id="fontIcon"
|
|
1791
|
+
data-selector-id="fontIcon"
|
|
1792
|
+
data-test-id="fontIcon"
|
|
1793
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
1794
|
+
/>
|
|
1795
|
+
</div>
|
|
1796
|
+
</button>
|
|
1797
|
+
</div>
|
|
1798
|
+
</DocumentFragment>
|
|
1799
|
+
`;
|
|
1800
|
+
|
|
1801
|
+
exports[`Tag component Should render active - pureDotted 3`] = `
|
|
1802
|
+
<DocumentFragment>
|
|
1803
|
+
<div
|
|
1804
|
+
aria-labelledby="3"
|
|
1805
|
+
class="container effect selected activepureDotted activemediumEffect medium lgRadius pureDotted "
|
|
1806
|
+
data-id="tag_TagSelected"
|
|
1807
|
+
data-selector-id="tag"
|
|
1808
|
+
data-test-id="tag_TagSelected"
|
|
1809
|
+
tabindex="0"
|
|
1810
|
+
>
|
|
1811
|
+
<div
|
|
1812
|
+
aria-hidden="true"
|
|
1813
|
+
class="text mediumtext"
|
|
1814
|
+
id="3"
|
|
1815
|
+
/>
|
|
1816
|
+
<button
|
|
1817
|
+
aria-label="Delete"
|
|
1818
|
+
class="buttonReset close activedangerClose
|
|
1819
|
+
lgRadiusClose
|
|
1820
|
+
closedanger"
|
|
1821
|
+
data-id="tag_RemoveTag"
|
|
1822
|
+
data-test-id="tag_RemoveTag"
|
|
1823
|
+
type="button"
|
|
1824
|
+
value="text"
|
|
1825
|
+
>
|
|
1826
|
+
<div
|
|
1827
|
+
class="flex cover coldir both"
|
|
1828
|
+
data-id="containerComponent"
|
|
1829
|
+
data-selector-id="container"
|
|
1830
|
+
data-test-id="containerComponent"
|
|
1831
|
+
>
|
|
1832
|
+
<i
|
|
1833
|
+
aria-hidden="true"
|
|
1834
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
1835
|
+
data-id="fontIcon"
|
|
1836
|
+
data-selector-id="fontIcon"
|
|
1837
|
+
data-test-id="fontIcon"
|
|
1838
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
1839
|
+
/>
|
|
1840
|
+
</div>
|
|
1841
|
+
</button>
|
|
1842
|
+
</div>
|
|
1843
|
+
</DocumentFragment>
|
|
1844
|
+
`;
|
|
1845
|
+
|
|
1846
|
+
exports[`Tag component Should render active - pureDotted 4`] = `
|
|
1847
|
+
<DocumentFragment>
|
|
1848
|
+
<div
|
|
1849
|
+
aria-labelledby="4"
|
|
1850
|
+
class="container effect selected activepureDotted activemediumEffect medium lgRadius pureDotted "
|
|
1851
|
+
data-id="tag_TagSelected"
|
|
1852
|
+
data-selector-id="tag"
|
|
1853
|
+
data-test-id="tag_TagSelected"
|
|
1854
|
+
tabindex="0"
|
|
1855
|
+
>
|
|
1856
|
+
<div
|
|
1857
|
+
aria-hidden="true"
|
|
1858
|
+
class="text mediumtext"
|
|
1859
|
+
id="4"
|
|
1860
|
+
/>
|
|
1861
|
+
<button
|
|
1862
|
+
aria-label="Delete"
|
|
1863
|
+
class="buttonReset close activeprimaryClose
|
|
1864
|
+
lgRadiusClose
|
|
1865
|
+
closeprimary"
|
|
1866
|
+
data-id="tag_RemoveTag"
|
|
1867
|
+
data-test-id="tag_RemoveTag"
|
|
1868
|
+
type="button"
|
|
1869
|
+
value="text"
|
|
1870
|
+
>
|
|
1871
|
+
<div
|
|
1872
|
+
class="flex cover coldir both"
|
|
1873
|
+
data-id="containerComponent"
|
|
1874
|
+
data-selector-id="container"
|
|
1875
|
+
data-test-id="containerComponent"
|
|
1876
|
+
>
|
|
1877
|
+
<i
|
|
1878
|
+
aria-hidden="true"
|
|
1879
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
1880
|
+
data-id="fontIcon"
|
|
1881
|
+
data-selector-id="fontIcon"
|
|
1882
|
+
data-test-id="fontIcon"
|
|
1883
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
1884
|
+
/>
|
|
1885
|
+
</div>
|
|
1886
|
+
</button>
|
|
1887
|
+
</div>
|
|
1888
|
+
</DocumentFragment>
|
|
1889
|
+
`;
|
|
1890
|
+
|
|
1891
|
+
exports[`Tag component Should render active - secondary 1`] = `
|
|
1892
|
+
<DocumentFragment>
|
|
1893
|
+
<div
|
|
1894
|
+
aria-labelledby="1"
|
|
1895
|
+
class="container effect selected activesecondary activesmallEffect small lgRadius secondary "
|
|
1896
|
+
data-id="tag_TagSelected"
|
|
1897
|
+
data-selector-id="tag"
|
|
1898
|
+
data-test-id="tag_TagSelected"
|
|
1899
|
+
tabindex="0"
|
|
1900
|
+
>
|
|
1901
|
+
<div
|
|
1902
|
+
aria-hidden="true"
|
|
1903
|
+
class="text smalltext"
|
|
1904
|
+
id="1"
|
|
1905
|
+
/>
|
|
1906
|
+
<button
|
|
1907
|
+
aria-label="Delete"
|
|
1908
|
+
class="buttonReset close activedangerClose
|
|
1909
|
+
lgRadiusClose
|
|
1910
|
+
closedanger"
|
|
1911
|
+
data-id="tag_RemoveTag"
|
|
1912
|
+
data-test-id="tag_RemoveTag"
|
|
1913
|
+
type="button"
|
|
1914
|
+
value="text"
|
|
1915
|
+
>
|
|
1916
|
+
<div
|
|
1917
|
+
class="flex cover coldir both"
|
|
1918
|
+
data-id="containerComponent"
|
|
1919
|
+
data-selector-id="container"
|
|
1920
|
+
data-test-id="containerComponent"
|
|
1921
|
+
>
|
|
1922
|
+
<i
|
|
1923
|
+
aria-hidden="true"
|
|
1924
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
1925
|
+
data-id="fontIcon"
|
|
1926
|
+
data-selector-id="fontIcon"
|
|
1927
|
+
data-test-id="fontIcon"
|
|
1928
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
1929
|
+
/>
|
|
1930
|
+
</div>
|
|
1931
|
+
</button>
|
|
1932
|
+
</div>
|
|
1933
|
+
</DocumentFragment>
|
|
1934
|
+
`;
|
|
1935
|
+
|
|
1936
|
+
exports[`Tag component Should render active - secondary 2`] = `
|
|
1937
|
+
<DocumentFragment>
|
|
1938
|
+
<div
|
|
1939
|
+
aria-labelledby="2"
|
|
1940
|
+
class="container effect selected activesecondary activesmallEffect small lgRadius secondary "
|
|
1941
|
+
data-id="tag_TagSelected"
|
|
1942
|
+
data-selector-id="tag"
|
|
1943
|
+
data-test-id="tag_TagSelected"
|
|
1944
|
+
tabindex="0"
|
|
1945
|
+
>
|
|
1946
|
+
<div
|
|
1947
|
+
aria-hidden="true"
|
|
1948
|
+
class="text smalltext"
|
|
1949
|
+
id="2"
|
|
1950
|
+
/>
|
|
1951
|
+
<button
|
|
1952
|
+
aria-label="Delete"
|
|
1953
|
+
class="buttonReset close activeprimaryClose
|
|
1954
|
+
lgRadiusClose
|
|
1955
|
+
closeprimary"
|
|
1956
|
+
data-id="tag_RemoveTag"
|
|
1957
|
+
data-test-id="tag_RemoveTag"
|
|
1958
|
+
type="button"
|
|
1959
|
+
value="text"
|
|
1960
|
+
>
|
|
1961
|
+
<div
|
|
1962
|
+
class="flex cover coldir both"
|
|
1963
|
+
data-id="containerComponent"
|
|
1964
|
+
data-selector-id="container"
|
|
1965
|
+
data-test-id="containerComponent"
|
|
1966
|
+
>
|
|
1967
|
+
<i
|
|
1968
|
+
aria-hidden="true"
|
|
1969
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
1970
|
+
data-id="fontIcon"
|
|
1971
|
+
data-selector-id="fontIcon"
|
|
1972
|
+
data-test-id="fontIcon"
|
|
1973
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
1974
|
+
/>
|
|
1975
|
+
</div>
|
|
1976
|
+
</button>
|
|
1977
|
+
</div>
|
|
1978
|
+
</DocumentFragment>
|
|
1979
|
+
`;
|
|
1980
|
+
|
|
1981
|
+
exports[`Tag component Should render active - secondary 3`] = `
|
|
1982
|
+
<DocumentFragment>
|
|
1983
|
+
<div
|
|
1984
|
+
aria-labelledby="3"
|
|
1985
|
+
class="container effect selected activesecondary activemediumEffect medium lgRadius secondary "
|
|
1986
|
+
data-id="tag_TagSelected"
|
|
1987
|
+
data-selector-id="tag"
|
|
1988
|
+
data-test-id="tag_TagSelected"
|
|
1989
|
+
tabindex="0"
|
|
1990
|
+
>
|
|
1991
|
+
<div
|
|
1992
|
+
aria-hidden="true"
|
|
1993
|
+
class="text mediumtext"
|
|
1994
|
+
id="3"
|
|
1995
|
+
/>
|
|
1996
|
+
<button
|
|
1997
|
+
aria-label="Delete"
|
|
1998
|
+
class="buttonReset close activedangerClose
|
|
1999
|
+
lgRadiusClose
|
|
2000
|
+
closedanger"
|
|
2001
|
+
data-id="tag_RemoveTag"
|
|
2002
|
+
data-test-id="tag_RemoveTag"
|
|
2003
|
+
type="button"
|
|
2004
|
+
value="text"
|
|
2005
|
+
>
|
|
2006
|
+
<div
|
|
2007
|
+
class="flex cover coldir both"
|
|
2008
|
+
data-id="containerComponent"
|
|
2009
|
+
data-selector-id="container"
|
|
2010
|
+
data-test-id="containerComponent"
|
|
2011
|
+
>
|
|
2012
|
+
<i
|
|
2013
|
+
aria-hidden="true"
|
|
2014
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
2015
|
+
data-id="fontIcon"
|
|
2016
|
+
data-selector-id="fontIcon"
|
|
2017
|
+
data-test-id="fontIcon"
|
|
2018
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
2019
|
+
/>
|
|
2020
|
+
</div>
|
|
2021
|
+
</button>
|
|
2022
|
+
</div>
|
|
2023
|
+
</DocumentFragment>
|
|
2024
|
+
`;
|
|
2025
|
+
|
|
2026
|
+
exports[`Tag component Should render active - secondary 4`] = `
|
|
2027
|
+
<DocumentFragment>
|
|
2028
|
+
<div
|
|
2029
|
+
aria-labelledby="4"
|
|
2030
|
+
class="container effect selected activesecondary activemediumEffect medium lgRadius secondary "
|
|
2031
|
+
data-id="tag_TagSelected"
|
|
2032
|
+
data-selector-id="tag"
|
|
2033
|
+
data-test-id="tag_TagSelected"
|
|
2034
|
+
tabindex="0"
|
|
2035
|
+
>
|
|
2036
|
+
<div
|
|
2037
|
+
aria-hidden="true"
|
|
2038
|
+
class="text mediumtext"
|
|
2039
|
+
id="4"
|
|
2040
|
+
/>
|
|
2041
|
+
<button
|
|
2042
|
+
aria-label="Delete"
|
|
2043
|
+
class="buttonReset close activeprimaryClose
|
|
2044
|
+
lgRadiusClose
|
|
2045
|
+
closeprimary"
|
|
2046
|
+
data-id="tag_RemoveTag"
|
|
2047
|
+
data-test-id="tag_RemoveTag"
|
|
2048
|
+
type="button"
|
|
2049
|
+
value="text"
|
|
2050
|
+
>
|
|
2051
|
+
<div
|
|
2052
|
+
class="flex cover coldir both"
|
|
2053
|
+
data-id="containerComponent"
|
|
2054
|
+
data-selector-id="container"
|
|
2055
|
+
data-test-id="containerComponent"
|
|
2056
|
+
>
|
|
2057
|
+
<i
|
|
2058
|
+
aria-hidden="true"
|
|
2059
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
2060
|
+
data-id="fontIcon"
|
|
2061
|
+
data-selector-id="fontIcon"
|
|
2062
|
+
data-test-id="fontIcon"
|
|
2063
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
2064
|
+
/>
|
|
2065
|
+
</div>
|
|
2066
|
+
</button>
|
|
2067
|
+
</div>
|
|
2068
|
+
</DocumentFragment>
|
|
2069
|
+
`;
|
|
2070
|
+
|
|
2071
|
+
exports[`Tag component Should render avatarPalette - danger 1`] = `
|
|
2072
|
+
<DocumentFragment>
|
|
2073
|
+
<div
|
|
2074
|
+
aria-labelledby="1"
|
|
2075
|
+
class="container effect medium lgRadius danger "
|
|
2076
|
+
data-id="tag_Tag"
|
|
2077
|
+
data-selector-id="tag"
|
|
2078
|
+
data-test-id="tag_Tag"
|
|
2079
|
+
tabindex="0"
|
|
2080
|
+
>
|
|
2081
|
+
<div
|
|
2082
|
+
class="avatar"
|
|
2083
|
+
>
|
|
2084
|
+
<div
|
|
2085
|
+
class="avatar small small circle primary black border "
|
|
2086
|
+
data-id="Avatar"
|
|
2087
|
+
data-selector-id="avatar"
|
|
2088
|
+
data-test-id="Avatar"
|
|
2089
|
+
>
|
|
2090
|
+
<span
|
|
2091
|
+
class="initial"
|
|
2092
|
+
data-id="Avatar_AvatarInitial"
|
|
2093
|
+
data-selector-id="avatar_AvatarInitial"
|
|
2094
|
+
data-test-id="Avatar_AvatarInitial"
|
|
2095
|
+
/>
|
|
2096
|
+
</div>
|
|
2097
|
+
</div>
|
|
2098
|
+
<div
|
|
2099
|
+
aria-hidden="true"
|
|
2100
|
+
class="text mediumtext"
|
|
2101
|
+
id="1"
|
|
2102
|
+
/>
|
|
2103
|
+
</div>
|
|
2104
|
+
</DocumentFragment>
|
|
2105
|
+
`;
|
|
2106
|
+
|
|
2107
|
+
exports[`Tag component Should render avatarPalette - dark 1`] = `
|
|
2108
|
+
<DocumentFragment>
|
|
2109
|
+
<div
|
|
2110
|
+
aria-labelledby="1"
|
|
2111
|
+
class="container effect medium lgRadius dark "
|
|
2112
|
+
data-id="tag_Tag"
|
|
2113
|
+
data-selector-id="tag"
|
|
2114
|
+
data-test-id="tag_Tag"
|
|
2115
|
+
tabindex="0"
|
|
2116
|
+
>
|
|
2117
|
+
<div
|
|
2118
|
+
class="avatar"
|
|
2119
|
+
>
|
|
2120
|
+
<div
|
|
2121
|
+
class="avatar small small circle info white border "
|
|
2122
|
+
data-id="Avatar"
|
|
2123
|
+
data-selector-id="avatar"
|
|
2124
|
+
data-test-id="Avatar"
|
|
2125
|
+
>
|
|
2126
|
+
<span
|
|
2127
|
+
class="initial"
|
|
2128
|
+
data-id="Avatar_AvatarInitial"
|
|
2129
|
+
data-selector-id="avatar_AvatarInitial"
|
|
2130
|
+
data-test-id="Avatar_AvatarInitial"
|
|
2131
|
+
/>
|
|
2132
|
+
</div>
|
|
2133
|
+
</div>
|
|
2134
|
+
<div
|
|
2135
|
+
aria-hidden="true"
|
|
2136
|
+
class="text mediumtext"
|
|
2137
|
+
id="1"
|
|
2138
|
+
/>
|
|
2139
|
+
</div>
|
|
2140
|
+
</DocumentFragment>
|
|
2141
|
+
`;
|
|
2142
|
+
|
|
2143
|
+
exports[`Tag component Should render avatarPalette - darkPrimaryDotted 1`] = `
|
|
2144
|
+
<DocumentFragment>
|
|
2145
|
+
<div
|
|
2146
|
+
aria-labelledby="1"
|
|
2147
|
+
class="container effect medium lgRadius darkPrimaryDotted "
|
|
2148
|
+
data-id="tag_Tag"
|
|
2149
|
+
data-selector-id="tag"
|
|
2150
|
+
data-test-id="tag_Tag"
|
|
2151
|
+
tabindex="0"
|
|
2152
|
+
>
|
|
2153
|
+
<div
|
|
2154
|
+
class="avatar"
|
|
2155
|
+
>
|
|
2156
|
+
<div
|
|
2157
|
+
class="avatar small small circle primary black border "
|
|
2158
|
+
data-id="Avatar"
|
|
2159
|
+
data-selector-id="avatar"
|
|
2160
|
+
data-test-id="Avatar"
|
|
2161
|
+
>
|
|
2162
|
+
<span
|
|
2163
|
+
class="initial"
|
|
2164
|
+
data-id="Avatar_AvatarInitial"
|
|
2165
|
+
data-selector-id="avatar_AvatarInitial"
|
|
2166
|
+
data-test-id="Avatar_AvatarInitial"
|
|
2167
|
+
/>
|
|
2168
|
+
</div>
|
|
2169
|
+
</div>
|
|
2170
|
+
<div
|
|
2171
|
+
aria-hidden="true"
|
|
2172
|
+
class="text mediumtext"
|
|
2173
|
+
id="1"
|
|
2174
|
+
/>
|
|
2175
|
+
</div>
|
|
2176
|
+
</DocumentFragment>
|
|
2177
|
+
`;
|
|
2178
|
+
|
|
2179
|
+
exports[`Tag component Should render avatarPalette - default 1`] = `
|
|
2180
|
+
<DocumentFragment>
|
|
2181
|
+
<div
|
|
2182
|
+
aria-labelledby="1"
|
|
2183
|
+
class="container effect medium lgRadius default "
|
|
2184
|
+
data-id="tag_Tag"
|
|
2185
|
+
data-selector-id="tag"
|
|
2186
|
+
data-test-id="tag_Tag"
|
|
2187
|
+
tabindex="0"
|
|
2188
|
+
>
|
|
2189
|
+
<div
|
|
2190
|
+
class="avatar"
|
|
2191
|
+
>
|
|
2192
|
+
<div
|
|
2193
|
+
class="avatar small small circle primary black border "
|
|
2194
|
+
data-id="Avatar"
|
|
2195
|
+
data-selector-id="avatar"
|
|
2196
|
+
data-test-id="Avatar"
|
|
2197
|
+
>
|
|
2198
|
+
<span
|
|
2199
|
+
class="initial"
|
|
2200
|
+
data-id="Avatar_AvatarInitial"
|
|
2201
|
+
data-selector-id="avatar_AvatarInitial"
|
|
2202
|
+
data-test-id="Avatar_AvatarInitial"
|
|
2203
|
+
/>
|
|
2204
|
+
</div>
|
|
2205
|
+
</div>
|
|
2206
|
+
<div
|
|
2207
|
+
aria-hidden="true"
|
|
2208
|
+
class="text mediumtext"
|
|
2209
|
+
id="1"
|
|
2210
|
+
/>
|
|
2211
|
+
</div>
|
|
2212
|
+
</DocumentFragment>
|
|
2213
|
+
`;
|
|
2214
|
+
|
|
2215
|
+
exports[`Tag component Should render avatarPalette - defaultLink 1`] = `
|
|
2216
|
+
<DocumentFragment>
|
|
2217
|
+
<div
|
|
2218
|
+
aria-labelledby="1"
|
|
2219
|
+
class="container effect medium lgRadius defaultLink "
|
|
2220
|
+
data-id="tag_Tag"
|
|
2221
|
+
data-selector-id="tag"
|
|
2222
|
+
data-test-id="tag_Tag"
|
|
2223
|
+
tabindex="0"
|
|
2224
|
+
>
|
|
2225
|
+
<div
|
|
2226
|
+
class="avatar"
|
|
2227
|
+
>
|
|
2228
|
+
<div
|
|
2229
|
+
class="avatar small small circle primary black border "
|
|
2230
|
+
data-id="Avatar"
|
|
2231
|
+
data-selector-id="avatar"
|
|
2232
|
+
data-test-id="Avatar"
|
|
2233
|
+
>
|
|
2234
|
+
<span
|
|
2235
|
+
class="initial"
|
|
2236
|
+
data-id="Avatar_AvatarInitial"
|
|
2237
|
+
data-selector-id="avatar_AvatarInitial"
|
|
2238
|
+
data-test-id="Avatar_AvatarInitial"
|
|
2239
|
+
/>
|
|
2240
|
+
</div>
|
|
2241
|
+
</div>
|
|
2242
|
+
<div
|
|
2243
|
+
aria-hidden="true"
|
|
2244
|
+
class="text mediumtext"
|
|
2245
|
+
id="1"
|
|
2246
|
+
/>
|
|
2247
|
+
</div>
|
|
2248
|
+
</DocumentFragment>
|
|
2249
|
+
`;
|
|
2250
|
+
|
|
2251
|
+
exports[`Tag component Should render avatarPalette - primaryDotted 1`] = `
|
|
2252
|
+
<DocumentFragment>
|
|
2253
|
+
<div
|
|
2254
|
+
aria-labelledby="1"
|
|
2255
|
+
class="container effect medium lgRadius primaryDotted "
|
|
2256
|
+
data-id="tag_Tag"
|
|
2257
|
+
data-selector-id="tag"
|
|
2258
|
+
data-test-id="tag_Tag"
|
|
2259
|
+
tabindex="0"
|
|
2260
|
+
>
|
|
2261
|
+
<div
|
|
2262
|
+
class="avatar"
|
|
2263
|
+
>
|
|
2264
|
+
<div
|
|
2265
|
+
class="avatar small small circle primary black border "
|
|
2266
|
+
data-id="Avatar"
|
|
2267
|
+
data-selector-id="avatar"
|
|
2268
|
+
data-test-id="Avatar"
|
|
2269
|
+
>
|
|
2270
|
+
<span
|
|
2271
|
+
class="initial"
|
|
2272
|
+
data-id="Avatar_AvatarInitial"
|
|
2273
|
+
data-selector-id="avatar_AvatarInitial"
|
|
2274
|
+
data-test-id="Avatar_AvatarInitial"
|
|
2275
|
+
/>
|
|
2276
|
+
</div>
|
|
2277
|
+
</div>
|
|
2278
|
+
<div
|
|
2279
|
+
aria-hidden="true"
|
|
2280
|
+
class="text mediumtext"
|
|
2281
|
+
id="1"
|
|
2282
|
+
/>
|
|
2283
|
+
</div>
|
|
2284
|
+
</DocumentFragment>
|
|
2285
|
+
`;
|
|
2286
|
+
|
|
2287
|
+
exports[`Tag component Should render avatarPalette - pureDarkDotted 1`] = `
|
|
2288
|
+
<DocumentFragment>
|
|
2289
|
+
<div
|
|
2290
|
+
aria-labelledby="1"
|
|
2291
|
+
class="container effect medium lgRadius pureDarkDotted "
|
|
2292
|
+
data-id="tag_Tag"
|
|
2293
|
+
data-selector-id="tag"
|
|
2294
|
+
data-test-id="tag_Tag"
|
|
2295
|
+
tabindex="0"
|
|
2296
|
+
>
|
|
2297
|
+
<div
|
|
2298
|
+
class="avatar"
|
|
2299
|
+
>
|
|
2300
|
+
<div
|
|
2301
|
+
class="avatar small small circle primary black border "
|
|
2302
|
+
data-id="Avatar"
|
|
2303
|
+
data-selector-id="avatar"
|
|
2304
|
+
data-test-id="Avatar"
|
|
2305
|
+
>
|
|
2306
|
+
<span
|
|
2307
|
+
class="initial"
|
|
2308
|
+
data-id="Avatar_AvatarInitial"
|
|
2309
|
+
data-selector-id="avatar_AvatarInitial"
|
|
2310
|
+
data-test-id="Avatar_AvatarInitial"
|
|
2311
|
+
/>
|
|
2312
|
+
</div>
|
|
2313
|
+
</div>
|
|
2314
|
+
<div
|
|
2315
|
+
aria-hidden="true"
|
|
2316
|
+
class="text mediumtext"
|
|
2317
|
+
id="1"
|
|
2318
|
+
/>
|
|
2319
|
+
</div>
|
|
2320
|
+
</DocumentFragment>
|
|
2321
|
+
`;
|
|
2322
|
+
|
|
2323
|
+
exports[`Tag component Should render avatarPalette - pureDotted 1`] = `
|
|
2324
|
+
<DocumentFragment>
|
|
2325
|
+
<div
|
|
2326
|
+
aria-labelledby="1"
|
|
2327
|
+
class="container effect medium lgRadius pureDotted "
|
|
2328
|
+
data-id="tag_Tag"
|
|
2329
|
+
data-selector-id="tag"
|
|
2330
|
+
data-test-id="tag_Tag"
|
|
2331
|
+
tabindex="0"
|
|
2332
|
+
>
|
|
2333
|
+
<div
|
|
2334
|
+
class="avatar"
|
|
2335
|
+
>
|
|
2336
|
+
<div
|
|
2337
|
+
class="avatar small small circle primary black border "
|
|
2338
|
+
data-id="Avatar"
|
|
2339
|
+
data-selector-id="avatar"
|
|
2340
|
+
data-test-id="Avatar"
|
|
2341
|
+
>
|
|
2342
|
+
<span
|
|
2343
|
+
class="initial"
|
|
2344
|
+
data-id="Avatar_AvatarInitial"
|
|
2345
|
+
data-selector-id="avatar_AvatarInitial"
|
|
2346
|
+
data-test-id="Avatar_AvatarInitial"
|
|
2347
|
+
/>
|
|
2348
|
+
</div>
|
|
2349
|
+
</div>
|
|
2350
|
+
<div
|
|
2351
|
+
aria-hidden="true"
|
|
2352
|
+
class="text mediumtext"
|
|
2353
|
+
id="1"
|
|
2354
|
+
/>
|
|
2355
|
+
</div>
|
|
2356
|
+
</DocumentFragment>
|
|
2357
|
+
`;
|
|
2358
|
+
|
|
2359
|
+
exports[`Tag component Should render avatarPalette - secondary 1`] = `
|
|
2360
|
+
<DocumentFragment>
|
|
2361
|
+
<div
|
|
2362
|
+
aria-labelledby="1"
|
|
2363
|
+
class="container effect medium lgRadius secondary "
|
|
2364
|
+
data-id="tag_Tag"
|
|
2365
|
+
data-selector-id="tag"
|
|
2366
|
+
data-test-id="tag_Tag"
|
|
2367
|
+
tabindex="0"
|
|
2368
|
+
>
|
|
2369
|
+
<div
|
|
2370
|
+
class="avatar"
|
|
2371
|
+
>
|
|
2372
|
+
<div
|
|
2373
|
+
class="avatar small small circle primary black border "
|
|
2374
|
+
data-id="Avatar"
|
|
2375
|
+
data-selector-id="avatar"
|
|
2376
|
+
data-test-id="Avatar"
|
|
2377
|
+
>
|
|
2378
|
+
<span
|
|
2379
|
+
class="initial"
|
|
2380
|
+
data-id="Avatar_AvatarInitial"
|
|
2381
|
+
data-selector-id="avatar_AvatarInitial"
|
|
2382
|
+
data-test-id="Avatar_AvatarInitial"
|
|
2383
|
+
/>
|
|
2384
|
+
</div>
|
|
2385
|
+
</div>
|
|
2386
|
+
<div
|
|
2387
|
+
aria-hidden="true"
|
|
2388
|
+
class="text mediumtext"
|
|
2389
|
+
id="1"
|
|
2390
|
+
/>
|
|
2391
|
+
</div>
|
|
2392
|
+
</DocumentFragment>
|
|
2393
|
+
`;
|
|
2394
|
+
|
|
2395
|
+
exports[`Tag component Should render closePalette - danger 1`] = `
|
|
2396
|
+
<DocumentFragment>
|
|
2397
|
+
<div
|
|
2398
|
+
aria-labelledby="1"
|
|
2399
|
+
class="container effect selected activedefault activemediumEffect medium lgRadius default "
|
|
2400
|
+
data-id="tag_TagSelected"
|
|
2401
|
+
data-selector-id="tag"
|
|
2402
|
+
data-test-id="tag_TagSelected"
|
|
2403
|
+
tabindex="0"
|
|
2404
|
+
>
|
|
2405
|
+
<div
|
|
2406
|
+
aria-hidden="true"
|
|
2407
|
+
class="text mediumtext"
|
|
2408
|
+
id="1"
|
|
2409
|
+
/>
|
|
2410
|
+
<button
|
|
2411
|
+
aria-label="Delete"
|
|
2412
|
+
class="buttonReset close activedangerClose
|
|
2413
|
+
lgRadiusClose
|
|
2414
|
+
closedanger"
|
|
2415
|
+
data-id="tag_RemoveTag"
|
|
2416
|
+
data-test-id="tag_RemoveTag"
|
|
2417
|
+
type="button"
|
|
2418
|
+
value="text"
|
|
2419
|
+
>
|
|
2420
|
+
<div
|
|
2421
|
+
class="flex cover coldir both"
|
|
2422
|
+
data-id="containerComponent"
|
|
2423
|
+
data-selector-id="container"
|
|
2424
|
+
data-test-id="containerComponent"
|
|
2425
|
+
>
|
|
2426
|
+
<i
|
|
2427
|
+
aria-hidden="true"
|
|
2428
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
2429
|
+
data-id="fontIcon"
|
|
2430
|
+
data-selector-id="fontIcon"
|
|
2431
|
+
data-test-id="fontIcon"
|
|
2432
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
2433
|
+
/>
|
|
2434
|
+
</div>
|
|
2435
|
+
</button>
|
|
2436
|
+
</div>
|
|
2437
|
+
</DocumentFragment>
|
|
2438
|
+
`;
|
|
2439
|
+
|
|
2440
|
+
exports[`Tag component Should render closePalette - primary 1`] = `
|
|
2441
|
+
<DocumentFragment>
|
|
2442
|
+
<div
|
|
2443
|
+
aria-labelledby="1"
|
|
2444
|
+
class="container effect selected activedefault activemediumEffect medium lgRadius default "
|
|
2445
|
+
data-id="tag_TagSelected"
|
|
2446
|
+
data-selector-id="tag"
|
|
2447
|
+
data-test-id="tag_TagSelected"
|
|
2448
|
+
tabindex="0"
|
|
2449
|
+
>
|
|
2450
|
+
<div
|
|
2451
|
+
aria-hidden="true"
|
|
2452
|
+
class="text mediumtext"
|
|
2453
|
+
id="1"
|
|
2454
|
+
/>
|
|
2455
|
+
<button
|
|
2456
|
+
aria-label="Delete"
|
|
2457
|
+
class="buttonReset close activeprimaryClose
|
|
2458
|
+
lgRadiusClose
|
|
2459
|
+
closeprimary"
|
|
2460
|
+
data-id="tag_RemoveTag"
|
|
2461
|
+
data-test-id="tag_RemoveTag"
|
|
2462
|
+
type="button"
|
|
2463
|
+
value="text"
|
|
2464
|
+
>
|
|
2465
|
+
<div
|
|
2466
|
+
class="flex cover coldir both"
|
|
2467
|
+
data-id="containerComponent"
|
|
2468
|
+
data-selector-id="container"
|
|
2469
|
+
data-test-id="containerComponent"
|
|
2470
|
+
>
|
|
2471
|
+
<i
|
|
2472
|
+
aria-hidden="true"
|
|
2473
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
2474
|
+
data-id="fontIcon"
|
|
2475
|
+
data-selector-id="fontIcon"
|
|
2476
|
+
data-test-id="fontIcon"
|
|
2477
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
2478
|
+
/>
|
|
2479
|
+
</div>
|
|
2480
|
+
</button>
|
|
2481
|
+
</div>
|
|
2482
|
+
</DocumentFragment>
|
|
2483
|
+
`;
|
|
2484
|
+
|
|
2485
|
+
exports[`Tag component Should render onRemove - medium 1`] = `
|
|
2486
|
+
<DocumentFragment>
|
|
2487
|
+
<div
|
|
2488
|
+
aria-labelledby="1"
|
|
2489
|
+
class="container effect selected activedefault activemediumEffect medium lgRadius default "
|
|
2490
|
+
data-id="tag_TagSelected"
|
|
2491
|
+
data-selector-id="tag"
|
|
2492
|
+
data-test-id="tag_TagSelected"
|
|
2493
|
+
tabindex="0"
|
|
2494
|
+
>
|
|
2495
|
+
<div
|
|
2496
|
+
aria-hidden="true"
|
|
2497
|
+
class="text mediumtext"
|
|
2498
|
+
id="1"
|
|
2499
|
+
/>
|
|
2500
|
+
<button
|
|
2501
|
+
aria-label="Delete"
|
|
2502
|
+
class="buttonReset close activedangerClose
|
|
2503
|
+
lgRadiusClose
|
|
2504
|
+
closedanger"
|
|
2505
|
+
data-id="tag_RemoveTag"
|
|
2506
|
+
data-test-id="tag_RemoveTag"
|
|
2507
|
+
type="button"
|
|
2508
|
+
value="text"
|
|
2509
|
+
>
|
|
2510
|
+
<div
|
|
2511
|
+
class="flex cover coldir both"
|
|
2512
|
+
data-id="containerComponent"
|
|
2513
|
+
data-selector-id="container"
|
|
2514
|
+
data-test-id="containerComponent"
|
|
2515
|
+
>
|
|
2516
|
+
<i
|
|
2517
|
+
aria-hidden="true"
|
|
2518
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
2519
|
+
data-id="fontIcon"
|
|
2520
|
+
data-selector-id="fontIcon"
|
|
2521
|
+
data-test-id="fontIcon"
|
|
2522
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
2523
|
+
/>
|
|
2524
|
+
</div>
|
|
2525
|
+
</button>
|
|
2526
|
+
</div>
|
|
2527
|
+
</DocumentFragment>
|
|
2528
|
+
`;
|
|
2529
|
+
|
|
2530
|
+
exports[`Tag component Should render onRemove - small 1`] = `
|
|
2531
|
+
<DocumentFragment>
|
|
2532
|
+
<div
|
|
2533
|
+
aria-labelledby="1"
|
|
2534
|
+
class="container effect selected activedefault activesmallEffect small lgRadius default "
|
|
2535
|
+
data-id="tag_TagSelected"
|
|
2536
|
+
data-selector-id="tag"
|
|
2537
|
+
data-test-id="tag_TagSelected"
|
|
2538
|
+
tabindex="0"
|
|
2539
|
+
>
|
|
2540
|
+
<div
|
|
2541
|
+
aria-hidden="true"
|
|
2542
|
+
class="text smalltext"
|
|
2543
|
+
id="1"
|
|
2544
|
+
/>
|
|
2545
|
+
<button
|
|
2546
|
+
aria-label="Delete"
|
|
2547
|
+
class="buttonReset close activedangerClose
|
|
2548
|
+
lgRadiusClose
|
|
2549
|
+
closedanger"
|
|
2550
|
+
data-id="tag_RemoveTag"
|
|
2551
|
+
data-test-id="tag_RemoveTag"
|
|
2552
|
+
type="button"
|
|
2553
|
+
value="text"
|
|
2554
|
+
>
|
|
2555
|
+
<div
|
|
2556
|
+
class="flex cover coldir both"
|
|
2557
|
+
data-id="containerComponent"
|
|
2558
|
+
data-selector-id="container"
|
|
2559
|
+
data-test-id="containerComponent"
|
|
2560
|
+
>
|
|
2561
|
+
<i
|
|
2562
|
+
aria-hidden="true"
|
|
2563
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
2564
|
+
data-id="fontIcon"
|
|
2565
|
+
data-selector-id="fontIcon"
|
|
2566
|
+
data-test-id="fontIcon"
|
|
2567
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
2568
|
+
/>
|
|
2569
|
+
</div>
|
|
2570
|
+
</button>
|
|
2571
|
+
</div>
|
|
2572
|
+
</DocumentFragment>
|
|
2573
|
+
`;
|
|
2574
|
+
|
|
2575
|
+
exports[`Tag component Should render palette - danger 1`] = `
|
|
2576
|
+
<DocumentFragment>
|
|
2577
|
+
<div
|
|
2578
|
+
aria-labelledby="1"
|
|
2579
|
+
class="container effect selected activedanger medium lgRadius danger "
|
|
2580
|
+
data-id="tag_TagSelected"
|
|
2581
|
+
data-selector-id="tag"
|
|
2582
|
+
data-test-id="tag_TagSelected"
|
|
2583
|
+
tabindex="0"
|
|
2584
|
+
>
|
|
2585
|
+
<div
|
|
2586
|
+
class="avatar"
|
|
2587
|
+
>
|
|
2588
|
+
<div
|
|
2589
|
+
class="avatar small small circle primary black border "
|
|
2590
|
+
data-id="Avatar"
|
|
2591
|
+
data-selector-id="avatar"
|
|
2592
|
+
data-test-id="Avatar"
|
|
2593
|
+
>
|
|
2594
|
+
<span
|
|
2595
|
+
class="initial"
|
|
2596
|
+
data-id="Avatar_AvatarInitial"
|
|
2597
|
+
data-selector-id="avatar_AvatarInitial"
|
|
2598
|
+
data-test-id="Avatar_AvatarInitial"
|
|
2599
|
+
/>
|
|
2600
|
+
</div>
|
|
2601
|
+
</div>
|
|
2602
|
+
<div
|
|
2603
|
+
aria-hidden="true"
|
|
2604
|
+
class="text mediumtext"
|
|
2605
|
+
id="1"
|
|
2606
|
+
/>
|
|
2607
|
+
</div>
|
|
2608
|
+
</DocumentFragment>
|
|
2609
|
+
`;
|
|
2610
|
+
|
|
2611
|
+
exports[`Tag component Should render palette - dark 1`] = `
|
|
2612
|
+
<DocumentFragment>
|
|
2613
|
+
<div
|
|
2614
|
+
aria-labelledby="1"
|
|
2615
|
+
class="container effect selected undefined medium lgRadius dark "
|
|
2616
|
+
data-id="tag_TagSelected"
|
|
2617
|
+
data-selector-id="tag"
|
|
2618
|
+
data-test-id="tag_TagSelected"
|
|
2619
|
+
tabindex="0"
|
|
2620
|
+
>
|
|
2621
|
+
<div
|
|
2622
|
+
class="avatar"
|
|
2623
|
+
>
|
|
2624
|
+
<div
|
|
2625
|
+
class="avatar small small circle info white border "
|
|
2626
|
+
data-id="Avatar"
|
|
2627
|
+
data-selector-id="avatar"
|
|
2628
|
+
data-test-id="Avatar"
|
|
2629
|
+
>
|
|
2630
|
+
<span
|
|
2631
|
+
class="initial"
|
|
2632
|
+
data-id="Avatar_AvatarInitial"
|
|
2633
|
+
data-selector-id="avatar_AvatarInitial"
|
|
2634
|
+
data-test-id="Avatar_AvatarInitial"
|
|
2635
|
+
/>
|
|
2636
|
+
</div>
|
|
2637
|
+
</div>
|
|
2638
|
+
<div
|
|
2639
|
+
aria-hidden="true"
|
|
2640
|
+
class="text mediumtext"
|
|
2641
|
+
id="1"
|
|
2642
|
+
/>
|
|
2643
|
+
</div>
|
|
2644
|
+
</DocumentFragment>
|
|
2645
|
+
`;
|
|
2646
|
+
|
|
2647
|
+
exports[`Tag component Should render palette - darkPrimaryDotted 1`] = `
|
|
2648
|
+
<DocumentFragment>
|
|
2649
|
+
<div
|
|
2650
|
+
aria-labelledby="1"
|
|
2651
|
+
class="container effect selected undefined medium lgRadius darkPrimaryDotted "
|
|
2652
|
+
data-id="tag_TagSelected"
|
|
2653
|
+
data-selector-id="tag"
|
|
2654
|
+
data-test-id="tag_TagSelected"
|
|
2655
|
+
tabindex="0"
|
|
2656
|
+
>
|
|
2657
|
+
<div
|
|
2658
|
+
class="avatar"
|
|
2659
|
+
>
|
|
2660
|
+
<div
|
|
2661
|
+
class="avatar small small circle primary black border "
|
|
2662
|
+
data-id="Avatar"
|
|
2663
|
+
data-selector-id="avatar"
|
|
2664
|
+
data-test-id="Avatar"
|
|
2665
|
+
>
|
|
2666
|
+
<span
|
|
2667
|
+
class="initial"
|
|
2668
|
+
data-id="Avatar_AvatarInitial"
|
|
2669
|
+
data-selector-id="avatar_AvatarInitial"
|
|
2670
|
+
data-test-id="Avatar_AvatarInitial"
|
|
2671
|
+
/>
|
|
2672
|
+
</div>
|
|
2673
|
+
</div>
|
|
2674
|
+
<div
|
|
2675
|
+
aria-hidden="true"
|
|
2676
|
+
class="text mediumtext"
|
|
2677
|
+
id="1"
|
|
2678
|
+
/>
|
|
2679
|
+
</div>
|
|
2680
|
+
</DocumentFragment>
|
|
2681
|
+
`;
|
|
2682
|
+
|
|
2683
|
+
exports[`Tag component Should render palette - default 1`] = `
|
|
2684
|
+
<DocumentFragment>
|
|
2685
|
+
<div
|
|
2686
|
+
aria-labelledby="1"
|
|
2687
|
+
class="container effect selected activedefault medium lgRadius default "
|
|
2688
|
+
data-id="tag_TagSelected"
|
|
2689
|
+
data-selector-id="tag"
|
|
2690
|
+
data-test-id="tag_TagSelected"
|
|
2691
|
+
tabindex="0"
|
|
2692
|
+
>
|
|
2693
|
+
<div
|
|
2694
|
+
class="avatar"
|
|
2695
|
+
>
|
|
2696
|
+
<div
|
|
2697
|
+
class="avatar small small circle primary black border "
|
|
2698
|
+
data-id="Avatar"
|
|
2699
|
+
data-selector-id="avatar"
|
|
2700
|
+
data-test-id="Avatar"
|
|
2701
|
+
>
|
|
2702
|
+
<span
|
|
2703
|
+
class="initial"
|
|
2704
|
+
data-id="Avatar_AvatarInitial"
|
|
2705
|
+
data-selector-id="avatar_AvatarInitial"
|
|
2706
|
+
data-test-id="Avatar_AvatarInitial"
|
|
2707
|
+
/>
|
|
2708
|
+
</div>
|
|
2709
|
+
</div>
|
|
2710
|
+
<div
|
|
2711
|
+
aria-hidden="true"
|
|
2712
|
+
class="text mediumtext"
|
|
2713
|
+
id="1"
|
|
2714
|
+
/>
|
|
2715
|
+
</div>
|
|
2716
|
+
</DocumentFragment>
|
|
2717
|
+
`;
|
|
2718
|
+
|
|
2719
|
+
exports[`Tag component Should render palette - defaultLink 1`] = `
|
|
2720
|
+
<DocumentFragment>
|
|
2721
|
+
<div
|
|
2722
|
+
aria-labelledby="1"
|
|
2723
|
+
class="container effect selected activedefaultLink medium lgRadius defaultLink "
|
|
2724
|
+
data-id="tag_TagSelected"
|
|
2725
|
+
data-selector-id="tag"
|
|
2726
|
+
data-test-id="tag_TagSelected"
|
|
2727
|
+
tabindex="0"
|
|
2728
|
+
>
|
|
2729
|
+
<div
|
|
2730
|
+
class="avatar"
|
|
2731
|
+
>
|
|
2732
|
+
<div
|
|
2733
|
+
class="avatar small small circle primary black border "
|
|
2734
|
+
data-id="Avatar"
|
|
2735
|
+
data-selector-id="avatar"
|
|
2736
|
+
data-test-id="Avatar"
|
|
2737
|
+
>
|
|
2738
|
+
<span
|
|
2739
|
+
class="initial"
|
|
2740
|
+
data-id="Avatar_AvatarInitial"
|
|
2741
|
+
data-selector-id="avatar_AvatarInitial"
|
|
2742
|
+
data-test-id="Avatar_AvatarInitial"
|
|
2743
|
+
/>
|
|
2744
|
+
</div>
|
|
2745
|
+
</div>
|
|
2746
|
+
<div
|
|
2747
|
+
aria-hidden="true"
|
|
2748
|
+
class="text mediumtext"
|
|
2749
|
+
id="1"
|
|
2750
|
+
/>
|
|
2751
|
+
</div>
|
|
2752
|
+
</DocumentFragment>
|
|
2753
|
+
`;
|
|
2754
|
+
|
|
2755
|
+
exports[`Tag component Should render palette - primaryDotted 1`] = `
|
|
2756
|
+
<DocumentFragment>
|
|
2757
|
+
<div
|
|
2758
|
+
aria-labelledby="1"
|
|
2759
|
+
class="container effect selected activeprimaryDotted medium lgRadius primaryDotted "
|
|
2760
|
+
data-id="tag_TagSelected"
|
|
2761
|
+
data-selector-id="tag"
|
|
2762
|
+
data-test-id="tag_TagSelected"
|
|
2763
|
+
tabindex="0"
|
|
2764
|
+
>
|
|
2765
|
+
<div
|
|
2766
|
+
class="avatar"
|
|
2767
|
+
>
|
|
2768
|
+
<div
|
|
2769
|
+
class="avatar small small circle primary black border "
|
|
2770
|
+
data-id="Avatar"
|
|
2771
|
+
data-selector-id="avatar"
|
|
2772
|
+
data-test-id="Avatar"
|
|
2773
|
+
>
|
|
2774
|
+
<span
|
|
2775
|
+
class="initial"
|
|
2776
|
+
data-id="Avatar_AvatarInitial"
|
|
2777
|
+
data-selector-id="avatar_AvatarInitial"
|
|
2778
|
+
data-test-id="Avatar_AvatarInitial"
|
|
2779
|
+
/>
|
|
2780
|
+
</div>
|
|
2781
|
+
</div>
|
|
2782
|
+
<div
|
|
2783
|
+
aria-hidden="true"
|
|
2784
|
+
class="text mediumtext"
|
|
2785
|
+
id="1"
|
|
2786
|
+
/>
|
|
2787
|
+
</div>
|
|
2788
|
+
</DocumentFragment>
|
|
2789
|
+
`;
|
|
2790
|
+
|
|
2791
|
+
exports[`Tag component Should render palette - pureDarkDotted 1`] = `
|
|
2792
|
+
<DocumentFragment>
|
|
2793
|
+
<div
|
|
2794
|
+
aria-labelledby="1"
|
|
2795
|
+
class="container effect selected undefined medium lgRadius pureDarkDotted "
|
|
2796
|
+
data-id="tag_TagSelected"
|
|
2797
|
+
data-selector-id="tag"
|
|
2798
|
+
data-test-id="tag_TagSelected"
|
|
2799
|
+
tabindex="0"
|
|
2800
|
+
>
|
|
2801
|
+
<div
|
|
2802
|
+
class="avatar"
|
|
2803
|
+
>
|
|
2804
|
+
<div
|
|
2805
|
+
class="avatar small small circle primary black border "
|
|
2806
|
+
data-id="Avatar"
|
|
2807
|
+
data-selector-id="avatar"
|
|
2808
|
+
data-test-id="Avatar"
|
|
2809
|
+
>
|
|
2810
|
+
<span
|
|
2811
|
+
class="initial"
|
|
2812
|
+
data-id="Avatar_AvatarInitial"
|
|
2813
|
+
data-selector-id="avatar_AvatarInitial"
|
|
2814
|
+
data-test-id="Avatar_AvatarInitial"
|
|
2815
|
+
/>
|
|
2816
|
+
</div>
|
|
2817
|
+
</div>
|
|
2818
|
+
<div
|
|
2819
|
+
aria-hidden="true"
|
|
2820
|
+
class="text mediumtext"
|
|
2821
|
+
id="1"
|
|
2822
|
+
/>
|
|
2823
|
+
</div>
|
|
2824
|
+
</DocumentFragment>
|
|
2825
|
+
`;
|
|
2826
|
+
|
|
2827
|
+
exports[`Tag component Should render palette - pureDotted 1`] = `
|
|
2828
|
+
<DocumentFragment>
|
|
2829
|
+
<div
|
|
2830
|
+
aria-labelledby="1"
|
|
2831
|
+
class="container effect selected activepureDotted medium lgRadius pureDotted "
|
|
2832
|
+
data-id="tag_TagSelected"
|
|
2833
|
+
data-selector-id="tag"
|
|
2834
|
+
data-test-id="tag_TagSelected"
|
|
2835
|
+
tabindex="0"
|
|
2836
|
+
>
|
|
2837
|
+
<div
|
|
2838
|
+
class="avatar"
|
|
2839
|
+
>
|
|
2840
|
+
<div
|
|
2841
|
+
class="avatar small small circle primary black border "
|
|
2842
|
+
data-id="Avatar"
|
|
2843
|
+
data-selector-id="avatar"
|
|
2844
|
+
data-test-id="Avatar"
|
|
2845
|
+
>
|
|
2846
|
+
<span
|
|
2847
|
+
class="initial"
|
|
2848
|
+
data-id="Avatar_AvatarInitial"
|
|
2849
|
+
data-selector-id="avatar_AvatarInitial"
|
|
2850
|
+
data-test-id="Avatar_AvatarInitial"
|
|
2851
|
+
/>
|
|
2852
|
+
</div>
|
|
2853
|
+
</div>
|
|
2854
|
+
<div
|
|
2855
|
+
aria-hidden="true"
|
|
2856
|
+
class="text mediumtext"
|
|
2857
|
+
id="1"
|
|
2858
|
+
/>
|
|
2859
|
+
</div>
|
|
2860
|
+
</DocumentFragment>
|
|
2861
|
+
`;
|
|
2862
|
+
|
|
2863
|
+
exports[`Tag component Should render palette - secondary 1`] = `
|
|
2864
|
+
<DocumentFragment>
|
|
2865
|
+
<div
|
|
2866
|
+
aria-labelledby="1"
|
|
2867
|
+
class="container effect selected activesecondary medium lgRadius secondary "
|
|
2868
|
+
data-id="tag_TagSelected"
|
|
2869
|
+
data-selector-id="tag"
|
|
2870
|
+
data-test-id="tag_TagSelected"
|
|
2871
|
+
tabindex="0"
|
|
2872
|
+
>
|
|
2873
|
+
<div
|
|
2874
|
+
class="avatar"
|
|
2875
|
+
>
|
|
2876
|
+
<div
|
|
2877
|
+
class="avatar small small circle primary black border "
|
|
2878
|
+
data-id="Avatar"
|
|
2879
|
+
data-selector-id="avatar"
|
|
2880
|
+
data-test-id="Avatar"
|
|
2881
|
+
>
|
|
2882
|
+
<span
|
|
2883
|
+
class="initial"
|
|
2884
|
+
data-id="Avatar_AvatarInitial"
|
|
2885
|
+
data-selector-id="avatar_AvatarInitial"
|
|
2886
|
+
data-test-id="Avatar_AvatarInitial"
|
|
2887
|
+
/>
|
|
2888
|
+
</div>
|
|
2889
|
+
</div>
|
|
2890
|
+
<div
|
|
2891
|
+
aria-hidden="true"
|
|
2892
|
+
class="text mediumtext"
|
|
2893
|
+
id="1"
|
|
2894
|
+
/>
|
|
2895
|
+
</div>
|
|
2896
|
+
</DocumentFragment>
|
|
2897
|
+
`;
|
|
2898
|
+
|
|
2899
|
+
exports[`Tag component Should render size - medium 1`] = `
|
|
2900
|
+
<DocumentFragment>
|
|
2901
|
+
<div
|
|
2902
|
+
aria-labelledby="1"
|
|
2903
|
+
class="container effect medium lgRadius default "
|
|
2904
|
+
data-id="tag_Tag"
|
|
2905
|
+
data-selector-id="tag"
|
|
2906
|
+
data-test-id="tag_Tag"
|
|
2907
|
+
tabindex="0"
|
|
2908
|
+
>
|
|
2909
|
+
<div
|
|
2910
|
+
aria-hidden="true"
|
|
2911
|
+
class="text mediumtext"
|
|
2912
|
+
id="1"
|
|
2913
|
+
/>
|
|
2914
|
+
</div>
|
|
2915
|
+
</DocumentFragment>
|
|
2916
|
+
`;
|
|
2917
|
+
|
|
2918
|
+
exports[`Tag component Should render size - small 1`] = `
|
|
2919
|
+
<DocumentFragment>
|
|
2920
|
+
<div
|
|
2921
|
+
aria-labelledby="1"
|
|
2922
|
+
class="container effect small lgRadius default "
|
|
2923
|
+
data-id="tag_Tag"
|
|
2924
|
+
data-selector-id="tag"
|
|
2925
|
+
data-test-id="tag_Tag"
|
|
2926
|
+
tabindex="0"
|
|
2927
|
+
>
|
|
2928
|
+
<div
|
|
2929
|
+
aria-hidden="true"
|
|
2930
|
+
class="text smalltext"
|
|
2931
|
+
id="1"
|
|
2932
|
+
/>
|
|
2933
|
+
</div>
|
|
2934
|
+
</DocumentFragment>
|
|
2935
|
+
`;
|
|
2936
|
+
|
|
2937
|
+
exports[`Tag component rendering ally clearLabel 1`] = `
|
|
2938
|
+
<DocumentFragment>
|
|
2939
|
+
<div
|
|
2940
|
+
aria-labelledby="1"
|
|
2941
|
+
class="container effect medium lgRadius default "
|
|
2942
|
+
data-id="tag_Tag"
|
|
2943
|
+
data-selector-id="tag"
|
|
2944
|
+
data-test-id="tag_Tag"
|
|
2945
|
+
tabindex="0"
|
|
2946
|
+
>
|
|
2947
|
+
<div
|
|
2948
|
+
aria-hidden="true"
|
|
2949
|
+
class="text mediumtext"
|
|
2950
|
+
id="1"
|
|
2951
|
+
/>
|
|
2952
|
+
<button
|
|
2953
|
+
aria-label="TagClearLabel"
|
|
2954
|
+
class="buttonReset close
|
|
2955
|
+
lgRadiusClose
|
|
2956
|
+
closedanger"
|
|
2957
|
+
data-id="tag_RemoveTag"
|
|
2958
|
+
data-test-id="tag_RemoveTag"
|
|
2959
|
+
type="button"
|
|
2960
|
+
value="text"
|
|
2961
|
+
>
|
|
2962
|
+
<div
|
|
2963
|
+
class="flex cover coldir both"
|
|
2964
|
+
data-id="containerComponent"
|
|
2965
|
+
data-selector-id="container"
|
|
2966
|
+
data-test-id="containerComponent"
|
|
2967
|
+
>
|
|
2968
|
+
<i
|
|
2969
|
+
aria-hidden="true"
|
|
2970
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
2971
|
+
data-id="fontIcon"
|
|
2972
|
+
data-selector-id="fontIcon"
|
|
2973
|
+
data-test-id="fontIcon"
|
|
2974
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
2975
|
+
/>
|
|
2976
|
+
</div>
|
|
2977
|
+
</button>
|
|
2978
|
+
</div>
|
|
2979
|
+
</DocumentFragment>
|
|
2980
|
+
`;
|
|
2981
|
+
|
|
2982
|
+
exports[`Tag component rendering the Custom class 1`] = `
|
|
2983
|
+
<DocumentFragment>
|
|
2984
|
+
<div
|
|
2985
|
+
aria-labelledby="1"
|
|
2986
|
+
class="container effect medium lgRadius default customCustomTag"
|
|
2987
|
+
data-id="tag_Tag"
|
|
2988
|
+
data-selector-id="tag"
|
|
2989
|
+
data-test-id="tag_Tag"
|
|
2990
|
+
tabindex="0"
|
|
2991
|
+
>
|
|
2992
|
+
<div
|
|
2993
|
+
class="avatar"
|
|
2994
|
+
>
|
|
2995
|
+
<div
|
|
2996
|
+
class="avatar small small circle primary black border customCustomAvatar"
|
|
2997
|
+
data-id="Avatar"
|
|
2998
|
+
data-selector-id="avatar"
|
|
2999
|
+
data-test-id="Avatar"
|
|
3000
|
+
>
|
|
3001
|
+
<span
|
|
3002
|
+
class="initial"
|
|
3003
|
+
data-id="Avatar_AvatarInitial"
|
|
3004
|
+
data-selector-id="avatar_AvatarInitial"
|
|
3005
|
+
data-test-id="Avatar_AvatarInitial"
|
|
3006
|
+
/>
|
|
3007
|
+
</div>
|
|
3008
|
+
</div>
|
|
3009
|
+
<div
|
|
3010
|
+
aria-hidden="true"
|
|
3011
|
+
class="icon customCustomTagIcon"
|
|
3012
|
+
>
|
|
3013
|
+
<i
|
|
3014
|
+
aria-hidden="true"
|
|
3015
|
+
class="zd_font_icons basic icon-androidd "
|
|
3016
|
+
data-id="fontIcon"
|
|
3017
|
+
data-selector-id="fontIcon"
|
|
3018
|
+
data-test-id="fontIcon"
|
|
3019
|
+
/>
|
|
3020
|
+
</div>
|
|
3021
|
+
<div
|
|
3022
|
+
aria-hidden="true"
|
|
3023
|
+
class="text mediumtext"
|
|
3024
|
+
id="1"
|
|
3025
|
+
/>
|
|
3026
|
+
<button
|
|
3027
|
+
aria-label="Delete"
|
|
3028
|
+
class="buttonReset close
|
|
3029
|
+
lgRadiusClose
|
|
3030
|
+
customCustomTagClose closedanger"
|
|
3031
|
+
data-id="tag_RemoveTag"
|
|
3032
|
+
data-test-id="tag_RemoveTag"
|
|
3033
|
+
type="button"
|
|
3034
|
+
value="text"
|
|
3035
|
+
>
|
|
3036
|
+
<div
|
|
3037
|
+
class="flex cover coldir both"
|
|
3038
|
+
data-id="containerComponent"
|
|
3039
|
+
data-selector-id="container"
|
|
3040
|
+
data-test-id="containerComponent"
|
|
3041
|
+
>
|
|
3042
|
+
<i
|
|
3043
|
+
aria-hidden="true"
|
|
3044
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
3045
|
+
data-id="fontIcon"
|
|
3046
|
+
data-selector-id="fontIcon"
|
|
3047
|
+
data-test-id="fontIcon"
|
|
3048
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
3049
|
+
/>
|
|
3050
|
+
</div>
|
|
3051
|
+
</button>
|
|
3052
|
+
</div>
|
|
3053
|
+
</DocumentFragment>
|
|
3054
|
+
`;
|