@zohodesk/dot 1.9.15 → 1.9.16

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.
Files changed (62) hide show
  1. package/README.md +16 -0
  2. package/es/Drawer/Drawer.js +5 -1
  3. package/es/Drawer/props/propTypes.js +2 -0
  4. package/es/FormAction/FormAction.js +18 -5
  5. package/es/FormAction/__tests__/FormAction.spec.js +97 -3
  6. package/es/FormAction/__tests__/__snapshots__/FormAction.spec.js.snap +536 -1
  7. package/es/FormAction/props/propTypes.js +2 -0
  8. package/es/lookup/Lookup/Lookup.js +47 -18
  9. package/es/lookup/Lookup/Lookup.module.css +19 -0
  10. package/es/lookup/Lookup/__tests__/Lookup.spec.js +120 -4
  11. package/es/lookup/Lookup/__tests__/__snapshots__/Lookup.spec.js.snap +284 -2
  12. package/es/lookup/Lookup/props/defaultProps.js +3 -2
  13. package/es/lookup/Lookup/props/propTypes.js +12 -2
  14. package/es/lookup/Section/Section.js +14 -5
  15. package/es/lookup/Section/__tests__/Section.spec.js +41 -2
  16. package/es/lookup/Section/__tests__/__snapshots__/Section.spec.js.snap +131 -1
  17. package/es/lookup/Section/props/defaultProps.js +4 -0
  18. package/es/lookup/Section/props/propTypes.js +5 -0
  19. package/es/lookup/header/ModuleHeader/ModuleHeader.js +47 -18
  20. package/es/lookup/header/ModuleHeader/__tests__/ModuleHeader.spec.js +172 -3
  21. package/es/lookup/header/ModuleHeader/__tests__/__snapshots__/ModuleHeader.spec.js.snap +779 -3
  22. package/es/lookup/header/ModuleHeader/props/defaultProps.js +4 -0
  23. package/es/lookup/header/ModuleHeader/props/propTypes.js +21 -1
  24. package/es/lookup/header/Title/Title.js +3 -1
  25. package/es/lookup/header/Title/props/propTypes.js +1 -0
  26. package/es/version2/lookup/AlertHeader/AlertHeader.js +16 -7
  27. package/es/version2/lookup/AlertHeader/__tests__/AlertHeader.spec.js +114 -3
  28. package/es/version2/lookup/AlertHeader/__tests__/__snapshots__/AlertHeader.spec.js.snap +1695 -8
  29. package/es/version2/lookup/AlertHeader/css/cssJSLogic.js +8 -3
  30. package/es/version2/lookup/AlertHeader/props/defaultProps.js +3 -0
  31. package/es/version2/lookup/AlertHeader/props/propTypes.js +9 -0
  32. package/lib/Drawer/Drawer.js +5 -1
  33. package/lib/Drawer/props/propTypes.js +2 -0
  34. package/lib/FormAction/FormAction.js +18 -5
  35. package/lib/FormAction/__tests__/FormAction.spec.js +102 -2
  36. package/lib/FormAction/__tests__/__snapshots__/FormAction.spec.js.snap +536 -1
  37. package/lib/FormAction/props/propTypes.js +2 -0
  38. package/lib/lookup/Lookup/Lookup.js +50 -18
  39. package/lib/lookup/Lookup/Lookup.module.css +19 -0
  40. package/lib/lookup/Lookup/__tests__/Lookup.spec.js +120 -4
  41. package/lib/lookup/Lookup/__tests__/__snapshots__/Lookup.spec.js.snap +284 -2
  42. package/lib/lookup/Lookup/props/defaultProps.js +3 -2
  43. package/lib/lookup/Lookup/props/propTypes.js +15 -2
  44. package/lib/lookup/Section/Section.js +13 -5
  45. package/lib/lookup/Section/__tests__/Section.spec.js +40 -1
  46. package/lib/lookup/Section/__tests__/__snapshots__/Section.spec.js.snap +131 -1
  47. package/lib/lookup/Section/props/defaultProps.js +13 -0
  48. package/lib/lookup/Section/props/propTypes.js +6 -0
  49. package/lib/lookup/header/ModuleHeader/ModuleHeader.js +46 -24
  50. package/lib/lookup/header/ModuleHeader/__tests__/ModuleHeader.spec.js +177 -2
  51. package/lib/lookup/header/ModuleHeader/__tests__/__snapshots__/ModuleHeader.spec.js.snap +779 -3
  52. package/lib/lookup/header/ModuleHeader/props/defaultProps.js +6 -0
  53. package/lib/lookup/header/ModuleHeader/props/propTypes.js +25 -1
  54. package/lib/lookup/header/Title/Title.js +3 -1
  55. package/lib/lookup/header/Title/props/propTypes.js +1 -0
  56. package/lib/version2/lookup/AlertHeader/AlertHeader.js +18 -8
  57. package/lib/version2/lookup/AlertHeader/__tests__/AlertHeader.spec.js +113 -2
  58. package/lib/version2/lookup/AlertHeader/__tests__/__snapshots__/AlertHeader.spec.js.snap +1695 -8
  59. package/lib/version2/lookup/AlertHeader/css/cssJSLogic.js +7 -3
  60. package/lib/version2/lookup/AlertHeader/props/defaultProps.js +5 -0
  61. package/lib/version2/lookup/AlertHeader/props/propTypes.js +9 -0
  62. package/package.json +1 -1
@@ -1,28 +1,244 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- exports[`AlertHeader does not render custom renderAlertIcon when needIcon is false 1`] = `
3
+ exports[`AlertHeader snapshot - Render with breakChildren=true 1`] = `
4
4
  <DocumentFragment>
5
5
  <div
6
- class="container danger flex rowdir wrap vCenter"
6
+ class="container headerLayout danger flex rowdir wrap vCenter"
7
7
  data-drag-hook="true"
8
8
  data-id="containerComponent"
9
9
  data-selector-id="container"
10
10
  data-test-id="containerComponent"
11
- />
11
+ >
12
+ <div
13
+ class="iconContainer "
14
+ >
15
+ <div
16
+ class="iconContainer"
17
+ data-selector-id="alertIcons"
18
+ >
19
+ <svg
20
+ class="danger"
21
+ viewBox="0 0 100 100"
22
+ xmlns="http://www.w3.org/2000/svg"
23
+ >
24
+ <path
25
+ class="danger_primary"
26
+ d="M34.89,23.86s27.19-17.79,41-12.44S99,61.81,60.74,82,5.16,58.27,5,50.48C4.87,42.94,5,25,34.89,23.86Z"
27
+ />
28
+ <polygon
29
+ class="outer_cls2"
30
+ points="95 49.42 94.18 48.61 92.98 49.79 91.79 48.61 90.97 49.42 92.16 50.6 90.97 51.78 91.79 52.59 92.98 51.41 94.18 52.59 95 51.78 93.81 50.6 95 49.42"
31
+ />
32
+ <rect
33
+ class="outer_cls2"
34
+ height="2.18"
35
+ width="1.16"
36
+ x="10"
37
+ y="21.46"
38
+ />
39
+ <rect
40
+ class="outer_cls2"
41
+ height="1.15"
42
+ width="2.21"
43
+ x="11.8"
44
+ y="24.27"
45
+ />
46
+ <rect
47
+ class="outer_cls2"
48
+ height="2.18"
49
+ width="1.16"
50
+ x="10"
51
+ y="26.05"
52
+ />
53
+ <rect
54
+ class="outer_cls2"
55
+ height="1.15"
56
+ width="2.21"
57
+ x="7.15"
58
+ y="24.27"
59
+ />
60
+ <path
61
+ class="outer_cls3"
62
+ d="M11.8,82.6a2.76,2.76,0,1,1,2.8-2.76A2.78,2.78,0,0,1,11.8,82.6Zm0-4.37a1.61,1.61,0,1,0,1.63,1.61A1.62,1.62,0,0,0,11.8,78.23Z"
63
+ />
64
+ <ellipse
65
+ class="outer_cls4"
66
+ cx="50.21"
67
+ cy="11.21"
68
+ rx="1.22"
69
+ ry="1.21"
70
+ />
71
+ <polygon
72
+ class="outer_cls4"
73
+ points="59.77 90 61.8 87.28 63.69 90 59.77 90"
74
+ />
75
+ <path
76
+ class="outer_cls5"
77
+ d="M52.28,43.16s-13.79-9-20.78-6.31S19.75,62.42,39.17,72.67s28.2-12.05,28.28-16S67.45,43.72,52.28,43.16Z"
78
+ />
79
+ <path
80
+ class="outer_cls6"
81
+ d="M61.28,46.39a1.15,1.15,0,1,1-1.15-1.13A1.13,1.13,0,0,1,61.28,46.39ZM71.63,69.28a5.37,5.37,0,0,0,0-5.4L63,48.91a1,1,0,0,0-1.74,1l8.65,15A3.39,3.39,0,0,1,67,70H30.05a3.39,3.39,0,0,1-2.94-5.09l18.46-32a3.39,3.39,0,0,1,5.87,0l4.74,8.2H48a2.54,2.54,0,0,0-1.85.8,2.57,2.57,0,0,0-.69,1.91l.92,12.67a2.54,2.54,0,0,0,5.08,0l.76-9.85a1,1,0,0,0-.92-1.08,1,1,0,0,0-1.07.92l-.76,9.87a.55.55,0,0,1-1.1,0L47.46,43.7a.51.51,0,0,1,.14-.41.58.58,0,0,1,.4-.17h9.91a1,1,0,0,0,.86-1.5l-5.6-9.7a5.39,5.39,0,0,0-9.33,0l-18.46,32A5.39,5.39,0,0,0,30.05,72H67A5.35,5.35,0,0,0,71.63,69.28ZM49,61.34a2.61,2.61,0,1,0,2.6,2.6A2.6,2.6,0,0,0,49,61.34Z"
82
+ />
83
+ </svg>
84
+ </div>
85
+ </div>
86
+ <div
87
+ class="grow basis shrinkOff"
88
+ data-id="boxComponent"
89
+ data-selector-id="box"
90
+ data-test-id="boxComponent"
91
+ >
92
+ <div
93
+ class="flex cover rowdir wrap"
94
+ data-id="containerComponent"
95
+ data-selector-id="container"
96
+ data-test-id="containerComponent"
97
+ >
98
+ <div
99
+ class="title shrinkOn"
100
+ data-id="boxComponent"
101
+ data-selector-id="box"
102
+ data-test-id="boxComponent"
103
+ >
104
+ Alert Title
105
+ </div>
106
+ </div>
107
+ </div>
108
+ </div>
12
109
  </DocumentFragment>
13
110
  `;
14
111
 
15
- exports[`AlertHeader rendering the defult props 1`] = `
112
+ exports[`AlertHeader snapshot - Render with children 1`] = `
16
113
  <DocumentFragment>
17
114
  <div
18
- class="container danger flex rowdir wrap vCenter"
115
+ class="container headerLayout danger flex rowdir wrap vCenter"
116
+ data-drag-hook="true"
117
+ data-id="containerComponent"
118
+ data-selector-id="container"
119
+ data-test-id="containerComponent"
120
+ >
121
+ <div
122
+ class="iconContainer "
123
+ >
124
+ <div
125
+ class="iconContainer"
126
+ data-selector-id="alertIcons"
127
+ >
128
+ <svg
129
+ class="danger"
130
+ viewBox="0 0 100 100"
131
+ xmlns="http://www.w3.org/2000/svg"
132
+ >
133
+ <path
134
+ class="danger_primary"
135
+ d="M34.89,23.86s27.19-17.79,41-12.44S99,61.81,60.74,82,5.16,58.27,5,50.48C4.87,42.94,5,25,34.89,23.86Z"
136
+ />
137
+ <polygon
138
+ class="outer_cls2"
139
+ points="95 49.42 94.18 48.61 92.98 49.79 91.79 48.61 90.97 49.42 92.16 50.6 90.97 51.78 91.79 52.59 92.98 51.41 94.18 52.59 95 51.78 93.81 50.6 95 49.42"
140
+ />
141
+ <rect
142
+ class="outer_cls2"
143
+ height="2.18"
144
+ width="1.16"
145
+ x="10"
146
+ y="21.46"
147
+ />
148
+ <rect
149
+ class="outer_cls2"
150
+ height="1.15"
151
+ width="2.21"
152
+ x="11.8"
153
+ y="24.27"
154
+ />
155
+ <rect
156
+ class="outer_cls2"
157
+ height="2.18"
158
+ width="1.16"
159
+ x="10"
160
+ y="26.05"
161
+ />
162
+ <rect
163
+ class="outer_cls2"
164
+ height="1.15"
165
+ width="2.21"
166
+ x="7.15"
167
+ y="24.27"
168
+ />
169
+ <path
170
+ class="outer_cls3"
171
+ d="M11.8,82.6a2.76,2.76,0,1,1,2.8-2.76A2.78,2.78,0,0,1,11.8,82.6Zm0-4.37a1.61,1.61,0,1,0,1.63,1.61A1.62,1.62,0,0,0,11.8,78.23Z"
172
+ />
173
+ <ellipse
174
+ class="outer_cls4"
175
+ cx="50.21"
176
+ cy="11.21"
177
+ rx="1.22"
178
+ ry="1.21"
179
+ />
180
+ <polygon
181
+ class="outer_cls4"
182
+ points="59.77 90 61.8 87.28 63.69 90 59.77 90"
183
+ />
184
+ <path
185
+ class="outer_cls5"
186
+ d="M52.28,43.16s-13.79-9-20.78-6.31S19.75,62.42,39.17,72.67s28.2-12.05,28.28-16S67.45,43.72,52.28,43.16Z"
187
+ />
188
+ <path
189
+ class="outer_cls6"
190
+ d="M61.28,46.39a1.15,1.15,0,1,1-1.15-1.13A1.13,1.13,0,0,1,61.28,46.39ZM71.63,69.28a5.37,5.37,0,0,0,0-5.4L63,48.91a1,1,0,0,0-1.74,1l8.65,15A3.39,3.39,0,0,1,67,70H30.05a3.39,3.39,0,0,1-2.94-5.09l18.46-32a3.39,3.39,0,0,1,5.87,0l4.74,8.2H48a2.54,2.54,0,0,0-1.85.8,2.57,2.57,0,0,0-.69,1.91l.92,12.67a2.54,2.54,0,0,0,5.08,0l.76-9.85a1,1,0,0,0-.92-1.08,1,1,0,0,0-1.07.92l-.76,9.87a.55.55,0,0,1-1.1,0L47.46,43.7a.51.51,0,0,1,.14-.41.58.58,0,0,1,.4-.17h9.91a1,1,0,0,0,.86-1.5l-5.6-9.7a5.39,5.39,0,0,0-9.33,0l-18.46,32A5.39,5.39,0,0,0,30.05,72H67A5.35,5.35,0,0,0,71.63,69.28ZM49,61.34a2.61,2.61,0,1,0,2.6,2.6A2.6,2.6,0,0,0,49,61.34Z"
191
+ />
192
+ </svg>
193
+ </div>
194
+ </div>
195
+ <div
196
+ class="grow basis shrinkOff"
197
+ data-id="boxComponent"
198
+ data-selector-id="box"
199
+ data-test-id="boxComponent"
200
+ >
201
+ <div
202
+ class="flex cover rowdir"
203
+ data-id="containerComponent"
204
+ data-selector-id="container"
205
+ data-test-id="containerComponent"
206
+ >
207
+ <div
208
+ class="title shrinkOn"
209
+ data-id="boxComponent"
210
+ data-selector-id="box"
211
+ data-test-id="boxComponent"
212
+ >
213
+ Alert Title
214
+ </div>
215
+ <div
216
+ class="grow basisAuto shrinkOff"
217
+ data-id="boxComponent"
218
+ data-selector-id="box"
219
+ data-test-id="boxComponent"
220
+ >
221
+ <span>
222
+ Child content
223
+ </span>
224
+ </div>
225
+ </div>
226
+ </div>
227
+ </div>
228
+ </DocumentFragment>
229
+ `;
230
+
231
+ exports[`AlertHeader snapshot - Render with customClass 1`] = `
232
+ <DocumentFragment>
233
+ <div
234
+ class="container headerLayout danger custom-container-class flex rowdir wrap vCenter"
19
235
  data-drag-hook="true"
20
236
  data-id="containerComponent"
21
237
  data-selector-id="container"
22
238
  data-test-id="containerComponent"
23
239
  >
24
240
  <div
25
- class="iconContainer"
241
+ class="iconContainer custom-icon-class"
26
242
  >
27
243
  <div
28
244
  class="iconContainer"
@@ -95,11 +311,1482 @@ exports[`AlertHeader rendering the defult props 1`] = `
95
311
  </svg>
96
312
  </div>
97
313
  </div>
314
+ <div
315
+ class="grow basis shrinkOff"
316
+ data-id="boxComponent"
317
+ data-selector-id="box"
318
+ data-test-id="boxComponent"
319
+ >
320
+ <div
321
+ class="flex cover rowdir"
322
+ data-id="containerComponent"
323
+ data-selector-id="container"
324
+ data-test-id="containerComponent"
325
+ >
326
+ <div
327
+ class="title custom-title-class shrinkOn"
328
+ data-id="boxComponent"
329
+ data-selector-id="box"
330
+ data-test-id="boxComponent"
331
+ >
332
+ Alert Title
333
+ </div>
334
+ </div>
335
+ </div>
336
+ <div
337
+ class="close custom-close-class shrinkOff"
338
+ data-id="boxComponent"
339
+ data-selector-id="box"
340
+ data-test-id="boxComponent"
341
+ >
342
+ <div
343
+ class="close light inflex rowdir both"
344
+ data-id="alertHeader_close"
345
+ data-selector-id="container"
346
+ data-test-id="alertHeader_close"
347
+ tabindex="0"
348
+ >
349
+ <div
350
+ class="shrinkOff"
351
+ data-id="boxComponent"
352
+ data-selector-id="box"
353
+ data-test-id="boxComponent"
354
+ >
355
+ <i
356
+ aria-hidden="true"
357
+ class="zd_font_icons basic icon-Cross fbold closeIcon "
358
+ data-id="fontIcon"
359
+ data-selector-id="fontIcon"
360
+ data-test-id="fontIcon"
361
+ style="--zd-iconfont-size: var(--zd_font_size12);"
362
+ />
363
+ </div>
364
+ </div>
365
+ </div>
98
366
  </div>
99
367
  </DocumentFragment>
100
368
  `;
101
369
 
102
- exports[`AlertHeader renders custom renderAlertIcon when needIcon is true 1`] = `
370
+ exports[`AlertHeader snapshot - Render with dataId and htmlId 1`] = `
371
+ <DocumentFragment>
372
+ <div
373
+ class="container headerLayout danger flex rowdir wrap vCenter"
374
+ data-drag-hook="true"
375
+ data-id="containerComponent"
376
+ data-selector-id="container"
377
+ data-test-id="containerComponent"
378
+ >
379
+ <div
380
+ class="iconContainer "
381
+ >
382
+ <div
383
+ class="iconContainer"
384
+ data-selector-id="alertIcons"
385
+ >
386
+ <svg
387
+ class="danger"
388
+ viewBox="0 0 100 100"
389
+ xmlns="http://www.w3.org/2000/svg"
390
+ >
391
+ <path
392
+ class="danger_primary"
393
+ d="M34.89,23.86s27.19-17.79,41-12.44S99,61.81,60.74,82,5.16,58.27,5,50.48C4.87,42.94,5,25,34.89,23.86Z"
394
+ />
395
+ <polygon
396
+ class="outer_cls2"
397
+ points="95 49.42 94.18 48.61 92.98 49.79 91.79 48.61 90.97 49.42 92.16 50.6 90.97 51.78 91.79 52.59 92.98 51.41 94.18 52.59 95 51.78 93.81 50.6 95 49.42"
398
+ />
399
+ <rect
400
+ class="outer_cls2"
401
+ height="2.18"
402
+ width="1.16"
403
+ x="10"
404
+ y="21.46"
405
+ />
406
+ <rect
407
+ class="outer_cls2"
408
+ height="1.15"
409
+ width="2.21"
410
+ x="11.8"
411
+ y="24.27"
412
+ />
413
+ <rect
414
+ class="outer_cls2"
415
+ height="2.18"
416
+ width="1.16"
417
+ x="10"
418
+ y="26.05"
419
+ />
420
+ <rect
421
+ class="outer_cls2"
422
+ height="1.15"
423
+ width="2.21"
424
+ x="7.15"
425
+ y="24.27"
426
+ />
427
+ <path
428
+ class="outer_cls3"
429
+ d="M11.8,82.6a2.76,2.76,0,1,1,2.8-2.76A2.78,2.78,0,0,1,11.8,82.6Zm0-4.37a1.61,1.61,0,1,0,1.63,1.61A1.62,1.62,0,0,0,11.8,78.23Z"
430
+ />
431
+ <ellipse
432
+ class="outer_cls4"
433
+ cx="50.21"
434
+ cy="11.21"
435
+ rx="1.22"
436
+ ry="1.21"
437
+ />
438
+ <polygon
439
+ class="outer_cls4"
440
+ points="59.77 90 61.8 87.28 63.69 90 59.77 90"
441
+ />
442
+ <path
443
+ class="outer_cls5"
444
+ d="M52.28,43.16s-13.79-9-20.78-6.31S19.75,62.42,39.17,72.67s28.2-12.05,28.28-16S67.45,43.72,52.28,43.16Z"
445
+ />
446
+ <path
447
+ class="outer_cls6"
448
+ d="M61.28,46.39a1.15,1.15,0,1,1-1.15-1.13A1.13,1.13,0,0,1,61.28,46.39ZM71.63,69.28a5.37,5.37,0,0,0,0-5.4L63,48.91a1,1,0,0,0-1.74,1l8.65,15A3.39,3.39,0,0,1,67,70H30.05a3.39,3.39,0,0,1-2.94-5.09l18.46-32a3.39,3.39,0,0,1,5.87,0l4.74,8.2H48a2.54,2.54,0,0,0-1.85.8,2.57,2.57,0,0,0-.69,1.91l.92,12.67a2.54,2.54,0,0,0,5.08,0l.76-9.85a1,1,0,0,0-.92-1.08,1,1,0,0,0-1.07.92l-.76,9.87a.55.55,0,0,1-1.1,0L47.46,43.7a.51.51,0,0,1,.14-.41.58.58,0,0,1,.4-.17h9.91a1,1,0,0,0,.86-1.5l-5.6-9.7a5.39,5.39,0,0,0-9.33,0l-18.46,32A5.39,5.39,0,0,0,30.05,72H67A5.35,5.35,0,0,0,71.63,69.28ZM49,61.34a2.61,2.61,0,1,0,2.6,2.6A2.6,2.6,0,0,0,49,61.34Z"
449
+ />
450
+ </svg>
451
+ </div>
452
+ </div>
453
+ <div
454
+ class="grow basis shrinkOff"
455
+ data-id="boxComponent"
456
+ data-selector-id="box"
457
+ data-test-id="boxComponent"
458
+ >
459
+ <div
460
+ class="flex cover rowdir"
461
+ data-id="containerComponent"
462
+ data-selector-id="container"
463
+ data-test-id="containerComponent"
464
+ >
465
+ <div
466
+ class="title shrinkOn"
467
+ data-id="boxComponent"
468
+ data-selector-id="box"
469
+ data-test-id="boxComponent"
470
+ id="alert-header-title"
471
+ >
472
+ Alert Title
473
+ </div>
474
+ </div>
475
+ </div>
476
+ <div
477
+ class="close shrinkOff"
478
+ data-id="boxComponent"
479
+ data-selector-id="box"
480
+ data-test-id="boxComponent"
481
+ >
482
+ <div
483
+ class="close light inflex rowdir both"
484
+ data-id="alert-header_close"
485
+ data-selector-id="container"
486
+ data-test-id="alert-header_close"
487
+ tabindex="0"
488
+ >
489
+ <div
490
+ class="shrinkOff"
491
+ data-id="boxComponent"
492
+ data-selector-id="box"
493
+ data-test-id="boxComponent"
494
+ >
495
+ <i
496
+ aria-hidden="true"
497
+ class="zd_font_icons basic icon-Cross fbold closeIcon "
498
+ data-id="fontIcon"
499
+ data-selector-id="fontIcon"
500
+ data-test-id="fontIcon"
501
+ style="--zd-iconfont-size: var(--zd_font_size12);"
502
+ />
503
+ </div>
504
+ </div>
505
+ </div>
506
+ </div>
507
+ </DocumentFragment>
508
+ `;
509
+
510
+ exports[`AlertHeader snapshot - Render with default props 1`] = `
511
+ <DocumentFragment>
512
+ <div
513
+ class="container danger flex rowdir wrap vCenter"
514
+ data-drag-hook="true"
515
+ data-id="containerComponent"
516
+ data-selector-id="container"
517
+ data-test-id="containerComponent"
518
+ >
519
+ <div
520
+ class="iconContainer "
521
+ >
522
+ <div
523
+ class="iconContainer"
524
+ data-selector-id="alertIcons"
525
+ >
526
+ <svg
527
+ class="danger"
528
+ viewBox="0 0 100 100"
529
+ xmlns="http://www.w3.org/2000/svg"
530
+ >
531
+ <path
532
+ class="danger_primary"
533
+ d="M34.89,23.86s27.19-17.79,41-12.44S99,61.81,60.74,82,5.16,58.27,5,50.48C4.87,42.94,5,25,34.89,23.86Z"
534
+ />
535
+ <polygon
536
+ class="outer_cls2"
537
+ points="95 49.42 94.18 48.61 92.98 49.79 91.79 48.61 90.97 49.42 92.16 50.6 90.97 51.78 91.79 52.59 92.98 51.41 94.18 52.59 95 51.78 93.81 50.6 95 49.42"
538
+ />
539
+ <rect
540
+ class="outer_cls2"
541
+ height="2.18"
542
+ width="1.16"
543
+ x="10"
544
+ y="21.46"
545
+ />
546
+ <rect
547
+ class="outer_cls2"
548
+ height="1.15"
549
+ width="2.21"
550
+ x="11.8"
551
+ y="24.27"
552
+ />
553
+ <rect
554
+ class="outer_cls2"
555
+ height="2.18"
556
+ width="1.16"
557
+ x="10"
558
+ y="26.05"
559
+ />
560
+ <rect
561
+ class="outer_cls2"
562
+ height="1.15"
563
+ width="2.21"
564
+ x="7.15"
565
+ y="24.27"
566
+ />
567
+ <path
568
+ class="outer_cls3"
569
+ d="M11.8,82.6a2.76,2.76,0,1,1,2.8-2.76A2.78,2.78,0,0,1,11.8,82.6Zm0-4.37a1.61,1.61,0,1,0,1.63,1.61A1.62,1.62,0,0,0,11.8,78.23Z"
570
+ />
571
+ <ellipse
572
+ class="outer_cls4"
573
+ cx="50.21"
574
+ cy="11.21"
575
+ rx="1.22"
576
+ ry="1.21"
577
+ />
578
+ <polygon
579
+ class="outer_cls4"
580
+ points="59.77 90 61.8 87.28 63.69 90 59.77 90"
581
+ />
582
+ <path
583
+ class="outer_cls5"
584
+ d="M52.28,43.16s-13.79-9-20.78-6.31S19.75,62.42,39.17,72.67s28.2-12.05,28.28-16S67.45,43.72,52.28,43.16Z"
585
+ />
586
+ <path
587
+ class="outer_cls6"
588
+ d="M61.28,46.39a1.15,1.15,0,1,1-1.15-1.13A1.13,1.13,0,0,1,61.28,46.39ZM71.63,69.28a5.37,5.37,0,0,0,0-5.4L63,48.91a1,1,0,0,0-1.74,1l8.65,15A3.39,3.39,0,0,1,67,70H30.05a3.39,3.39,0,0,1-2.94-5.09l18.46-32a3.39,3.39,0,0,1,5.87,0l4.74,8.2H48a2.54,2.54,0,0,0-1.85.8,2.57,2.57,0,0,0-.69,1.91l.92,12.67a2.54,2.54,0,0,0,5.08,0l.76-9.85a1,1,0,0,0-.92-1.08,1,1,0,0,0-1.07.92l-.76,9.87a.55.55,0,0,1-1.1,0L47.46,43.7a.51.51,0,0,1,.14-.41.58.58,0,0,1,.4-.17h9.91a1,1,0,0,0,.86-1.5l-5.6-9.7a5.39,5.39,0,0,0-9.33,0l-18.46,32A5.39,5.39,0,0,0,30.05,72H67A5.35,5.35,0,0,0,71.63,69.28ZM49,61.34a2.61,2.61,0,1,0,2.6,2.6A2.6,2.6,0,0,0,49,61.34Z"
589
+ />
590
+ </svg>
591
+ </div>
592
+ </div>
593
+ </div>
594
+ </DocumentFragment>
595
+ `;
596
+
597
+ exports[`AlertHeader snapshot - Render with isDraggable=false 1`] = `
598
+ <DocumentFragment>
599
+ <div
600
+ class="container headerLayout danger flex rowdir wrap vCenter"
601
+ data-drag-hook="false"
602
+ data-id="containerComponent"
603
+ data-selector-id="container"
604
+ data-test-id="containerComponent"
605
+ >
606
+ <div
607
+ class="iconContainer "
608
+ >
609
+ <div
610
+ class="iconContainer"
611
+ data-selector-id="alertIcons"
612
+ >
613
+ <svg
614
+ class="danger"
615
+ viewBox="0 0 100 100"
616
+ xmlns="http://www.w3.org/2000/svg"
617
+ >
618
+ <path
619
+ class="danger_primary"
620
+ d="M34.89,23.86s27.19-17.79,41-12.44S99,61.81,60.74,82,5.16,58.27,5,50.48C4.87,42.94,5,25,34.89,23.86Z"
621
+ />
622
+ <polygon
623
+ class="outer_cls2"
624
+ points="95 49.42 94.18 48.61 92.98 49.79 91.79 48.61 90.97 49.42 92.16 50.6 90.97 51.78 91.79 52.59 92.98 51.41 94.18 52.59 95 51.78 93.81 50.6 95 49.42"
625
+ />
626
+ <rect
627
+ class="outer_cls2"
628
+ height="2.18"
629
+ width="1.16"
630
+ x="10"
631
+ y="21.46"
632
+ />
633
+ <rect
634
+ class="outer_cls2"
635
+ height="1.15"
636
+ width="2.21"
637
+ x="11.8"
638
+ y="24.27"
639
+ />
640
+ <rect
641
+ class="outer_cls2"
642
+ height="2.18"
643
+ width="1.16"
644
+ x="10"
645
+ y="26.05"
646
+ />
647
+ <rect
648
+ class="outer_cls2"
649
+ height="1.15"
650
+ width="2.21"
651
+ x="7.15"
652
+ y="24.27"
653
+ />
654
+ <path
655
+ class="outer_cls3"
656
+ d="M11.8,82.6a2.76,2.76,0,1,1,2.8-2.76A2.78,2.78,0,0,1,11.8,82.6Zm0-4.37a1.61,1.61,0,1,0,1.63,1.61A1.62,1.62,0,0,0,11.8,78.23Z"
657
+ />
658
+ <ellipse
659
+ class="outer_cls4"
660
+ cx="50.21"
661
+ cy="11.21"
662
+ rx="1.22"
663
+ ry="1.21"
664
+ />
665
+ <polygon
666
+ class="outer_cls4"
667
+ points="59.77 90 61.8 87.28 63.69 90 59.77 90"
668
+ />
669
+ <path
670
+ class="outer_cls5"
671
+ d="M52.28,43.16s-13.79-9-20.78-6.31S19.75,62.42,39.17,72.67s28.2-12.05,28.28-16S67.45,43.72,52.28,43.16Z"
672
+ />
673
+ <path
674
+ class="outer_cls6"
675
+ d="M61.28,46.39a1.15,1.15,0,1,1-1.15-1.13A1.13,1.13,0,0,1,61.28,46.39ZM71.63,69.28a5.37,5.37,0,0,0,0-5.4L63,48.91a1,1,0,0,0-1.74,1l8.65,15A3.39,3.39,0,0,1,67,70H30.05a3.39,3.39,0,0,1-2.94-5.09l18.46-32a3.39,3.39,0,0,1,5.87,0l4.74,8.2H48a2.54,2.54,0,0,0-1.85.8,2.57,2.57,0,0,0-.69,1.91l.92,12.67a2.54,2.54,0,0,0,5.08,0l.76-9.85a1,1,0,0,0-.92-1.08,1,1,0,0,0-1.07.92l-.76,9.87a.55.55,0,0,1-1.1,0L47.46,43.7a.51.51,0,0,1,.14-.41.58.58,0,0,1,.4-.17h9.91a1,1,0,0,0,.86-1.5l-5.6-9.7a5.39,5.39,0,0,0-9.33,0l-18.46,32A5.39,5.39,0,0,0,30.05,72H67A5.35,5.35,0,0,0,71.63,69.28ZM49,61.34a2.61,2.61,0,1,0,2.6,2.6A2.6,2.6,0,0,0,49,61.34Z"
676
+ />
677
+ </svg>
678
+ </div>
679
+ </div>
680
+ <div
681
+ class="grow basis shrinkOff"
682
+ data-id="boxComponent"
683
+ data-selector-id="box"
684
+ data-test-id="boxComponent"
685
+ >
686
+ <div
687
+ class="flex cover rowdir"
688
+ data-id="containerComponent"
689
+ data-selector-id="container"
690
+ data-test-id="containerComponent"
691
+ >
692
+ <div
693
+ class="title shrinkOn"
694
+ data-id="boxComponent"
695
+ data-selector-id="box"
696
+ data-test-id="boxComponent"
697
+ >
698
+ Alert Title
699
+ </div>
700
+ </div>
701
+ </div>
702
+ </div>
703
+ </DocumentFragment>
704
+ `;
705
+
706
+ exports[`AlertHeader snapshot - Render with needIcon=false 1`] = `
707
+ <DocumentFragment>
708
+ <div
709
+ class="container headerLayout danger flex rowdir wrap vCenter"
710
+ data-drag-hook="true"
711
+ data-id="containerComponent"
712
+ data-selector-id="container"
713
+ data-test-id="containerComponent"
714
+ >
715
+ <div
716
+ class="grow basis shrinkOff"
717
+ data-id="boxComponent"
718
+ data-selector-id="box"
719
+ data-test-id="boxComponent"
720
+ >
721
+ <div
722
+ class="flex cover rowdir"
723
+ data-id="containerComponent"
724
+ data-selector-id="container"
725
+ data-test-id="containerComponent"
726
+ >
727
+ <div
728
+ class="title shrinkOn"
729
+ data-id="boxComponent"
730
+ data-selector-id="box"
731
+ data-test-id="boxComponent"
732
+ >
733
+ Alert Title
734
+ </div>
735
+ </div>
736
+ </div>
737
+ </div>
738
+ </DocumentFragment>
739
+ `;
740
+
741
+ exports[`AlertHeader snapshot - Render with onClose 1`] = `
742
+ <DocumentFragment>
743
+ <div
744
+ class="container headerLayout danger flex rowdir wrap vCenter"
745
+ data-drag-hook="true"
746
+ data-id="containerComponent"
747
+ data-selector-id="container"
748
+ data-test-id="containerComponent"
749
+ >
750
+ <div
751
+ class="iconContainer "
752
+ >
753
+ <div
754
+ class="iconContainer"
755
+ data-selector-id="alertIcons"
756
+ >
757
+ <svg
758
+ class="danger"
759
+ viewBox="0 0 100 100"
760
+ xmlns="http://www.w3.org/2000/svg"
761
+ >
762
+ <path
763
+ class="danger_primary"
764
+ d="M34.89,23.86s27.19-17.79,41-12.44S99,61.81,60.74,82,5.16,58.27,5,50.48C4.87,42.94,5,25,34.89,23.86Z"
765
+ />
766
+ <polygon
767
+ class="outer_cls2"
768
+ points="95 49.42 94.18 48.61 92.98 49.79 91.79 48.61 90.97 49.42 92.16 50.6 90.97 51.78 91.79 52.59 92.98 51.41 94.18 52.59 95 51.78 93.81 50.6 95 49.42"
769
+ />
770
+ <rect
771
+ class="outer_cls2"
772
+ height="2.18"
773
+ width="1.16"
774
+ x="10"
775
+ y="21.46"
776
+ />
777
+ <rect
778
+ class="outer_cls2"
779
+ height="1.15"
780
+ width="2.21"
781
+ x="11.8"
782
+ y="24.27"
783
+ />
784
+ <rect
785
+ class="outer_cls2"
786
+ height="2.18"
787
+ width="1.16"
788
+ x="10"
789
+ y="26.05"
790
+ />
791
+ <rect
792
+ class="outer_cls2"
793
+ height="1.15"
794
+ width="2.21"
795
+ x="7.15"
796
+ y="24.27"
797
+ />
798
+ <path
799
+ class="outer_cls3"
800
+ d="M11.8,82.6a2.76,2.76,0,1,1,2.8-2.76A2.78,2.78,0,0,1,11.8,82.6Zm0-4.37a1.61,1.61,0,1,0,1.63,1.61A1.62,1.62,0,0,0,11.8,78.23Z"
801
+ />
802
+ <ellipse
803
+ class="outer_cls4"
804
+ cx="50.21"
805
+ cy="11.21"
806
+ rx="1.22"
807
+ ry="1.21"
808
+ />
809
+ <polygon
810
+ class="outer_cls4"
811
+ points="59.77 90 61.8 87.28 63.69 90 59.77 90"
812
+ />
813
+ <path
814
+ class="outer_cls5"
815
+ d="M52.28,43.16s-13.79-9-20.78-6.31S19.75,62.42,39.17,72.67s28.2-12.05,28.28-16S67.45,43.72,52.28,43.16Z"
816
+ />
817
+ <path
818
+ class="outer_cls6"
819
+ d="M61.28,46.39a1.15,1.15,0,1,1-1.15-1.13A1.13,1.13,0,0,1,61.28,46.39ZM71.63,69.28a5.37,5.37,0,0,0,0-5.4L63,48.91a1,1,0,0,0-1.74,1l8.65,15A3.39,3.39,0,0,1,67,70H30.05a3.39,3.39,0,0,1-2.94-5.09l18.46-32a3.39,3.39,0,0,1,5.87,0l4.74,8.2H48a2.54,2.54,0,0,0-1.85.8,2.57,2.57,0,0,0-.69,1.91l.92,12.67a2.54,2.54,0,0,0,5.08,0l.76-9.85a1,1,0,0,0-.92-1.08,1,1,0,0,0-1.07.92l-.76,9.87a.55.55,0,0,1-1.1,0L47.46,43.7a.51.51,0,0,1,.14-.41.58.58,0,0,1,.4-.17h9.91a1,1,0,0,0,.86-1.5l-5.6-9.7a5.39,5.39,0,0,0-9.33,0l-18.46,32A5.39,5.39,0,0,0,30.05,72H67A5.35,5.35,0,0,0,71.63,69.28ZM49,61.34a2.61,2.61,0,1,0,2.6,2.6A2.6,2.6,0,0,0,49,61.34Z"
820
+ />
821
+ </svg>
822
+ </div>
823
+ </div>
824
+ <div
825
+ class="grow basis shrinkOff"
826
+ data-id="boxComponent"
827
+ data-selector-id="box"
828
+ data-test-id="boxComponent"
829
+ >
830
+ <div
831
+ class="flex cover rowdir"
832
+ data-id="containerComponent"
833
+ data-selector-id="container"
834
+ data-test-id="containerComponent"
835
+ >
836
+ <div
837
+ class="title shrinkOn"
838
+ data-id="boxComponent"
839
+ data-selector-id="box"
840
+ data-test-id="boxComponent"
841
+ >
842
+ Alert Title
843
+ </div>
844
+ </div>
845
+ </div>
846
+ <div
847
+ class="close shrinkOff"
848
+ data-id="boxComponent"
849
+ data-selector-id="box"
850
+ data-test-id="boxComponent"
851
+ >
852
+ <div
853
+ class="close light inflex rowdir both"
854
+ data-id="alertHeader_close"
855
+ data-selector-id="container"
856
+ data-test-id="alertHeader_close"
857
+ tabindex="0"
858
+ >
859
+ <div
860
+ class="shrinkOff"
861
+ data-id="boxComponent"
862
+ data-selector-id="box"
863
+ data-test-id="boxComponent"
864
+ >
865
+ <i
866
+ aria-hidden="true"
867
+ class="zd_font_icons basic icon-Cross fbold closeIcon "
868
+ data-id="fontIcon"
869
+ data-selector-id="fontIcon"
870
+ data-test-id="fontIcon"
871
+ style="--zd-iconfont-size: var(--zd_font_size12);"
872
+ />
873
+ </div>
874
+ </div>
875
+ </div>
876
+ </div>
877
+ </DocumentFragment>
878
+ `;
879
+
880
+ exports[`AlertHeader snapshot - Render with renderRightActions 1`] = `
881
+ <DocumentFragment>
882
+ <div
883
+ class="container headerLayout danger flex rowdir wrap vCenter"
884
+ data-drag-hook="true"
885
+ data-id="containerComponent"
886
+ data-selector-id="container"
887
+ data-test-id="containerComponent"
888
+ >
889
+ <div
890
+ class="iconContainer "
891
+ >
892
+ <div
893
+ class="iconContainer"
894
+ data-selector-id="alertIcons"
895
+ >
896
+ <svg
897
+ class="danger"
898
+ viewBox="0 0 100 100"
899
+ xmlns="http://www.w3.org/2000/svg"
900
+ >
901
+ <path
902
+ class="danger_primary"
903
+ d="M34.89,23.86s27.19-17.79,41-12.44S99,61.81,60.74,82,5.16,58.27,5,50.48C4.87,42.94,5,25,34.89,23.86Z"
904
+ />
905
+ <polygon
906
+ class="outer_cls2"
907
+ points="95 49.42 94.18 48.61 92.98 49.79 91.79 48.61 90.97 49.42 92.16 50.6 90.97 51.78 91.79 52.59 92.98 51.41 94.18 52.59 95 51.78 93.81 50.6 95 49.42"
908
+ />
909
+ <rect
910
+ class="outer_cls2"
911
+ height="2.18"
912
+ width="1.16"
913
+ x="10"
914
+ y="21.46"
915
+ />
916
+ <rect
917
+ class="outer_cls2"
918
+ height="1.15"
919
+ width="2.21"
920
+ x="11.8"
921
+ y="24.27"
922
+ />
923
+ <rect
924
+ class="outer_cls2"
925
+ height="2.18"
926
+ width="1.16"
927
+ x="10"
928
+ y="26.05"
929
+ />
930
+ <rect
931
+ class="outer_cls2"
932
+ height="1.15"
933
+ width="2.21"
934
+ x="7.15"
935
+ y="24.27"
936
+ />
937
+ <path
938
+ class="outer_cls3"
939
+ d="M11.8,82.6a2.76,2.76,0,1,1,2.8-2.76A2.78,2.78,0,0,1,11.8,82.6Zm0-4.37a1.61,1.61,0,1,0,1.63,1.61A1.62,1.62,0,0,0,11.8,78.23Z"
940
+ />
941
+ <ellipse
942
+ class="outer_cls4"
943
+ cx="50.21"
944
+ cy="11.21"
945
+ rx="1.22"
946
+ ry="1.21"
947
+ />
948
+ <polygon
949
+ class="outer_cls4"
950
+ points="59.77 90 61.8 87.28 63.69 90 59.77 90"
951
+ />
952
+ <path
953
+ class="outer_cls5"
954
+ d="M52.28,43.16s-13.79-9-20.78-6.31S19.75,62.42,39.17,72.67s28.2-12.05,28.28-16S67.45,43.72,52.28,43.16Z"
955
+ />
956
+ <path
957
+ class="outer_cls6"
958
+ d="M61.28,46.39a1.15,1.15,0,1,1-1.15-1.13A1.13,1.13,0,0,1,61.28,46.39ZM71.63,69.28a5.37,5.37,0,0,0,0-5.4L63,48.91a1,1,0,0,0-1.74,1l8.65,15A3.39,3.39,0,0,1,67,70H30.05a3.39,3.39,0,0,1-2.94-5.09l18.46-32a3.39,3.39,0,0,1,5.87,0l4.74,8.2H48a2.54,2.54,0,0,0-1.85.8,2.57,2.57,0,0,0-.69,1.91l.92,12.67a2.54,2.54,0,0,0,5.08,0l.76-9.85a1,1,0,0,0-.92-1.08,1,1,0,0,0-1.07.92l-.76,9.87a.55.55,0,0,1-1.1,0L47.46,43.7a.51.51,0,0,1,.14-.41.58.58,0,0,1,.4-.17h9.91a1,1,0,0,0,.86-1.5l-5.6-9.7a5.39,5.39,0,0,0-9.33,0l-18.46,32A5.39,5.39,0,0,0,30.05,72H67A5.35,5.35,0,0,0,71.63,69.28ZM49,61.34a2.61,2.61,0,1,0,2.6,2.6A2.6,2.6,0,0,0,49,61.34Z"
959
+ />
960
+ </svg>
961
+ </div>
962
+ </div>
963
+ <div
964
+ class="grow basis shrinkOff"
965
+ data-id="boxComponent"
966
+ data-selector-id="box"
967
+ data-test-id="boxComponent"
968
+ >
969
+ <div
970
+ class="flex cover rowdir"
971
+ data-id="containerComponent"
972
+ data-selector-id="container"
973
+ data-test-id="containerComponent"
974
+ >
975
+ <div
976
+ class="title shrinkOn"
977
+ data-id="boxComponent"
978
+ data-selector-id="box"
979
+ data-test-id="boxComponent"
980
+ >
981
+ Alert Title
982
+ </div>
983
+ </div>
984
+ </div>
985
+ <button
986
+ type="button"
987
+ >
988
+ Action
989
+ </button>
990
+ </div>
991
+ </DocumentFragment>
992
+ `;
993
+
994
+ exports[`AlertHeader snapshot - Render with renderSecondaryContent 1`] = `
995
+ <DocumentFragment>
996
+ <div
997
+ class="container headerLayout danger flex rowdir wrap vCenter"
998
+ data-drag-hook="true"
999
+ data-id="containerComponent"
1000
+ data-selector-id="container"
1001
+ data-test-id="containerComponent"
1002
+ >
1003
+ <div
1004
+ class="iconContainer "
1005
+ >
1006
+ <div
1007
+ class="iconContainer"
1008
+ data-selector-id="alertIcons"
1009
+ >
1010
+ <svg
1011
+ class="danger"
1012
+ viewBox="0 0 100 100"
1013
+ xmlns="http://www.w3.org/2000/svg"
1014
+ >
1015
+ <path
1016
+ class="danger_primary"
1017
+ d="M34.89,23.86s27.19-17.79,41-12.44S99,61.81,60.74,82,5.16,58.27,5,50.48C4.87,42.94,5,25,34.89,23.86Z"
1018
+ />
1019
+ <polygon
1020
+ class="outer_cls2"
1021
+ points="95 49.42 94.18 48.61 92.98 49.79 91.79 48.61 90.97 49.42 92.16 50.6 90.97 51.78 91.79 52.59 92.98 51.41 94.18 52.59 95 51.78 93.81 50.6 95 49.42"
1022
+ />
1023
+ <rect
1024
+ class="outer_cls2"
1025
+ height="2.18"
1026
+ width="1.16"
1027
+ x="10"
1028
+ y="21.46"
1029
+ />
1030
+ <rect
1031
+ class="outer_cls2"
1032
+ height="1.15"
1033
+ width="2.21"
1034
+ x="11.8"
1035
+ y="24.27"
1036
+ />
1037
+ <rect
1038
+ class="outer_cls2"
1039
+ height="2.18"
1040
+ width="1.16"
1041
+ x="10"
1042
+ y="26.05"
1043
+ />
1044
+ <rect
1045
+ class="outer_cls2"
1046
+ height="1.15"
1047
+ width="2.21"
1048
+ x="7.15"
1049
+ y="24.27"
1050
+ />
1051
+ <path
1052
+ class="outer_cls3"
1053
+ d="M11.8,82.6a2.76,2.76,0,1,1,2.8-2.76A2.78,2.78,0,0,1,11.8,82.6Zm0-4.37a1.61,1.61,0,1,0,1.63,1.61A1.62,1.62,0,0,0,11.8,78.23Z"
1054
+ />
1055
+ <ellipse
1056
+ class="outer_cls4"
1057
+ cx="50.21"
1058
+ cy="11.21"
1059
+ rx="1.22"
1060
+ ry="1.21"
1061
+ />
1062
+ <polygon
1063
+ class="outer_cls4"
1064
+ points="59.77 90 61.8 87.28 63.69 90 59.77 90"
1065
+ />
1066
+ <path
1067
+ class="outer_cls5"
1068
+ d="M52.28,43.16s-13.79-9-20.78-6.31S19.75,62.42,39.17,72.67s28.2-12.05,28.28-16S67.45,43.72,52.28,43.16Z"
1069
+ />
1070
+ <path
1071
+ class="outer_cls6"
1072
+ d="M61.28,46.39a1.15,1.15,0,1,1-1.15-1.13A1.13,1.13,0,0,1,61.28,46.39ZM71.63,69.28a5.37,5.37,0,0,0,0-5.4L63,48.91a1,1,0,0,0-1.74,1l8.65,15A3.39,3.39,0,0,1,67,70H30.05a3.39,3.39,0,0,1-2.94-5.09l18.46-32a3.39,3.39,0,0,1,5.87,0l4.74,8.2H48a2.54,2.54,0,0,0-1.85.8,2.57,2.57,0,0,0-.69,1.91l.92,12.67a2.54,2.54,0,0,0,5.08,0l.76-9.85a1,1,0,0,0-.92-1.08,1,1,0,0,0-1.07.92l-.76,9.87a.55.55,0,0,1-1.1,0L47.46,43.7a.51.51,0,0,1,.14-.41.58.58,0,0,1,.4-.17h9.91a1,1,0,0,0,.86-1.5l-5.6-9.7a5.39,5.39,0,0,0-9.33,0l-18.46,32A5.39,5.39,0,0,0,30.05,72H67A5.35,5.35,0,0,0,71.63,69.28ZM49,61.34a2.61,2.61,0,1,0,2.6,2.6A2.6,2.6,0,0,0,49,61.34Z"
1073
+ />
1074
+ </svg>
1075
+ </div>
1076
+ </div>
1077
+ <div
1078
+ class="grow basis shrinkOff"
1079
+ data-id="boxComponent"
1080
+ data-selector-id="box"
1081
+ data-test-id="boxComponent"
1082
+ >
1083
+ <div
1084
+ class="flex cover rowdir"
1085
+ data-id="containerComponent"
1086
+ data-selector-id="container"
1087
+ data-test-id="containerComponent"
1088
+ >
1089
+ <div
1090
+ class="title shrinkOn"
1091
+ data-id="boxComponent"
1092
+ data-selector-id="box"
1093
+ data-test-id="boxComponent"
1094
+ >
1095
+ Alert Title
1096
+ </div>
1097
+ </div>
1098
+ <span>
1099
+ Secondary
1100
+ </span>
1101
+ </div>
1102
+ </div>
1103
+ </DocumentFragment>
1104
+ `;
1105
+
1106
+ exports[`AlertHeader snapshot - Render with title 1`] = `
1107
+ <DocumentFragment>
1108
+ <div
1109
+ class="container headerLayout danger flex rowdir wrap vCenter"
1110
+ data-drag-hook="true"
1111
+ data-id="containerComponent"
1112
+ data-selector-id="container"
1113
+ data-test-id="containerComponent"
1114
+ >
1115
+ <div
1116
+ class="iconContainer "
1117
+ >
1118
+ <div
1119
+ class="iconContainer"
1120
+ data-selector-id="alertIcons"
1121
+ >
1122
+ <svg
1123
+ class="danger"
1124
+ viewBox="0 0 100 100"
1125
+ xmlns="http://www.w3.org/2000/svg"
1126
+ >
1127
+ <path
1128
+ class="danger_primary"
1129
+ d="M34.89,23.86s27.19-17.79,41-12.44S99,61.81,60.74,82,5.16,58.27,5,50.48C4.87,42.94,5,25,34.89,23.86Z"
1130
+ />
1131
+ <polygon
1132
+ class="outer_cls2"
1133
+ points="95 49.42 94.18 48.61 92.98 49.79 91.79 48.61 90.97 49.42 92.16 50.6 90.97 51.78 91.79 52.59 92.98 51.41 94.18 52.59 95 51.78 93.81 50.6 95 49.42"
1134
+ />
1135
+ <rect
1136
+ class="outer_cls2"
1137
+ height="2.18"
1138
+ width="1.16"
1139
+ x="10"
1140
+ y="21.46"
1141
+ />
1142
+ <rect
1143
+ class="outer_cls2"
1144
+ height="1.15"
1145
+ width="2.21"
1146
+ x="11.8"
1147
+ y="24.27"
1148
+ />
1149
+ <rect
1150
+ class="outer_cls2"
1151
+ height="2.18"
1152
+ width="1.16"
1153
+ x="10"
1154
+ y="26.05"
1155
+ />
1156
+ <rect
1157
+ class="outer_cls2"
1158
+ height="1.15"
1159
+ width="2.21"
1160
+ x="7.15"
1161
+ y="24.27"
1162
+ />
1163
+ <path
1164
+ class="outer_cls3"
1165
+ d="M11.8,82.6a2.76,2.76,0,1,1,2.8-2.76A2.78,2.78,0,0,1,11.8,82.6Zm0-4.37a1.61,1.61,0,1,0,1.63,1.61A1.62,1.62,0,0,0,11.8,78.23Z"
1166
+ />
1167
+ <ellipse
1168
+ class="outer_cls4"
1169
+ cx="50.21"
1170
+ cy="11.21"
1171
+ rx="1.22"
1172
+ ry="1.21"
1173
+ />
1174
+ <polygon
1175
+ class="outer_cls4"
1176
+ points="59.77 90 61.8 87.28 63.69 90 59.77 90"
1177
+ />
1178
+ <path
1179
+ class="outer_cls5"
1180
+ d="M52.28,43.16s-13.79-9-20.78-6.31S19.75,62.42,39.17,72.67s28.2-12.05,28.28-16S67.45,43.72,52.28,43.16Z"
1181
+ />
1182
+ <path
1183
+ class="outer_cls6"
1184
+ d="M61.28,46.39a1.15,1.15,0,1,1-1.15-1.13A1.13,1.13,0,0,1,61.28,46.39ZM71.63,69.28a5.37,5.37,0,0,0,0-5.4L63,48.91a1,1,0,0,0-1.74,1l8.65,15A3.39,3.39,0,0,1,67,70H30.05a3.39,3.39,0,0,1-2.94-5.09l18.46-32a3.39,3.39,0,0,1,5.87,0l4.74,8.2H48a2.54,2.54,0,0,0-1.85.8,2.57,2.57,0,0,0-.69,1.91l.92,12.67a2.54,2.54,0,0,0,5.08,0l.76-9.85a1,1,0,0,0-.92-1.08,1,1,0,0,0-1.07.92l-.76,9.87a.55.55,0,0,1-1.1,0L47.46,43.7a.51.51,0,0,1,.14-.41.58.58,0,0,1,.4-.17h9.91a1,1,0,0,0,.86-1.5l-5.6-9.7a5.39,5.39,0,0,0-9.33,0l-18.46,32A5.39,5.39,0,0,0,30.05,72H67A5.35,5.35,0,0,0,71.63,69.28ZM49,61.34a2.61,2.61,0,1,0,2.6,2.6A2.6,2.6,0,0,0,49,61.34Z"
1185
+ />
1186
+ </svg>
1187
+ </div>
1188
+ </div>
1189
+ <div
1190
+ class="grow basis shrinkOff"
1191
+ data-id="boxComponent"
1192
+ data-selector-id="box"
1193
+ data-test-id="boxComponent"
1194
+ >
1195
+ <div
1196
+ class="flex cover rowdir"
1197
+ data-id="containerComponent"
1198
+ data-selector-id="container"
1199
+ data-test-id="containerComponent"
1200
+ >
1201
+ <div
1202
+ class="title shrinkOn"
1203
+ data-id="boxComponent"
1204
+ data-selector-id="box"
1205
+ data-test-id="boxComponent"
1206
+ >
1207
+ Alert Title
1208
+ </div>
1209
+ </div>
1210
+ </div>
1211
+ </div>
1212
+ </DocumentFragment>
1213
+ `;
1214
+
1215
+ exports[`AlertHeader snapshot - Render with type=error 1`] = `
1216
+ <DocumentFragment>
1217
+ <div
1218
+ class="container headerLayout error flex rowdir wrap vCenter"
1219
+ data-drag-hook="true"
1220
+ data-id="containerComponent"
1221
+ data-selector-id="container"
1222
+ data-test-id="containerComponent"
1223
+ >
1224
+ <div
1225
+ class="iconContainer "
1226
+ >
1227
+ <div
1228
+ class="iconContainer"
1229
+ data-selector-id="alertIcons"
1230
+ >
1231
+ <svg
1232
+ class="error"
1233
+ viewBox="0 0 100 100"
1234
+ xmlns="http://www.w3.org/2000/svg"
1235
+ >
1236
+ <path
1237
+ class="danger_primary"
1238
+ d="M34.89,23.86s27.19-17.79,41-12.44S99,61.81,60.74,82,5.16,58.27,5,50.48C4.87,42.94,5,25,34.89,23.86Z"
1239
+ />
1240
+ <polygon
1241
+ class="outer_cls2"
1242
+ points="95 49.42 94.18 48.61 92.98 49.79 91.79 48.61 90.97 49.42 92.16 50.6 90.97 51.78 91.79 52.59 92.98 51.41 94.18 52.59 95 51.78 93.81 50.6 95 49.42"
1243
+ />
1244
+ <rect
1245
+ class="outer_cls2"
1246
+ height="2.18"
1247
+ width="1.16"
1248
+ x="10"
1249
+ y="21.46"
1250
+ />
1251
+ <rect
1252
+ class="outer_cls2"
1253
+ height="1.15"
1254
+ width="2.21"
1255
+ x="11.8"
1256
+ y="24.27"
1257
+ />
1258
+ <rect
1259
+ class="outer_cls2"
1260
+ height="2.18"
1261
+ width="1.16"
1262
+ x="10"
1263
+ y="26.05"
1264
+ />
1265
+ <rect
1266
+ class="outer_cls2"
1267
+ height="1.15"
1268
+ width="2.21"
1269
+ x="7.15"
1270
+ y="24.27"
1271
+ />
1272
+ <path
1273
+ class="outer_cls3"
1274
+ d="M11.8,82.6a2.76,2.76,0,1,1,2.8-2.76A2.78,2.78,0,0,1,11.8,82.6Zm0-4.37a1.61,1.61,0,1,0,1.63,1.61A1.62,1.62,0,0,0,11.8,78.23Z"
1275
+ />
1276
+ <ellipse
1277
+ class="outer_cls4"
1278
+ cx="50.21"
1279
+ cy="11.21"
1280
+ rx="1.22"
1281
+ ry="1.21"
1282
+ />
1283
+ <polygon
1284
+ class="outer_cls4"
1285
+ points="59.77 90 61.8 87.28 63.69 90 59.77 90"
1286
+ />
1287
+ <path
1288
+ class="outer_cls5"
1289
+ d="M52.28,43.16s-13.79-9-20.78-6.31S19.75,62.42,39.17,72.67s28.2-12.05,28.28-16S67.45,43.72,52.28,43.16Z"
1290
+ />
1291
+ <path
1292
+ class="outer_cls6"
1293
+ d="M61.28,46.39a1.15,1.15,0,1,1-1.15-1.13A1.13,1.13,0,0,1,61.28,46.39ZM71.63,69.28a5.37,5.37,0,0,0,0-5.4L63,48.91a1,1,0,0,0-1.74,1l8.65,15A3.39,3.39,0,0,1,67,70H30.05a3.39,3.39,0,0,1-2.94-5.09l18.46-32a3.39,3.39,0,0,1,5.87,0l4.74,8.2H48a2.54,2.54,0,0,0-1.85.8,2.57,2.57,0,0,0-.69,1.91l.92,12.67a2.54,2.54,0,0,0,5.08,0l.76-9.85a1,1,0,0,0-.92-1.08,1,1,0,0,0-1.07.92l-.76,9.87a.55.55,0,0,1-1.1,0L47.46,43.7a.51.51,0,0,1,.14-.41.58.58,0,0,1,.4-.17h9.91a1,1,0,0,0,.86-1.5l-5.6-9.7a5.39,5.39,0,0,0-9.33,0l-18.46,32A5.39,5.39,0,0,0,30.05,72H67A5.35,5.35,0,0,0,71.63,69.28ZM49,61.34a2.61,2.61,0,1,0,2.6,2.6A2.6,2.6,0,0,0,49,61.34Z"
1294
+ />
1295
+ </svg>
1296
+ </div>
1297
+ </div>
1298
+ <div
1299
+ class="grow basis shrinkOff"
1300
+ data-id="boxComponent"
1301
+ data-selector-id="box"
1302
+ data-test-id="boxComponent"
1303
+ >
1304
+ <div
1305
+ class="flex cover rowdir"
1306
+ data-id="containerComponent"
1307
+ data-selector-id="container"
1308
+ data-test-id="containerComponent"
1309
+ >
1310
+ <div
1311
+ class="title shrinkOn"
1312
+ data-id="boxComponent"
1313
+ data-selector-id="box"
1314
+ data-test-id="boxComponent"
1315
+ >
1316
+ Alert Title
1317
+ </div>
1318
+ </div>
1319
+ </div>
1320
+ </div>
1321
+ </DocumentFragment>
1322
+ `;
1323
+
1324
+ exports[`AlertHeader snapshot - Render with type=info 1`] = `
1325
+ <DocumentFragment>
1326
+ <div
1327
+ class="container headerLayout info flex rowdir wrap vCenter"
1328
+ data-drag-hook="true"
1329
+ data-id="containerComponent"
1330
+ data-selector-id="container"
1331
+ data-test-id="containerComponent"
1332
+ >
1333
+ <div
1334
+ class="iconContainer "
1335
+ >
1336
+ <div
1337
+ class="iconContainer"
1338
+ data-selector-id="alertIcons"
1339
+ >
1340
+ <svg
1341
+ class="info"
1342
+ viewBox="0 0 100 100"
1343
+ xmlns="http://www.w3.org/2000/svg"
1344
+ >
1345
+ <path
1346
+ class="info_primary"
1347
+ d="M34.89,23.86s27.19-17.79,41-12.44S99,61.81,60.74,82,5.16,58.27,5,50.48C4.87,42.94,5,25,34.89,23.86Z"
1348
+ />
1349
+ <polygon
1350
+ class="outer_cls2"
1351
+ points="95 49.42 94.18 48.61 92.98 49.79 91.79 48.61 90.97 49.42 92.16 50.6 90.97 51.78 91.79 52.59 92.98 51.41 94.18 52.59 95 51.78 93.81 50.6 95 49.42"
1352
+ />
1353
+ <rect
1354
+ class="outer_cls2"
1355
+ height="2.18"
1356
+ width="1.16"
1357
+ x="10"
1358
+ y="21.46"
1359
+ />
1360
+ <rect
1361
+ class="outer_cls2"
1362
+ height="1.15"
1363
+ width="2.21"
1364
+ x="11.8"
1365
+ y="24.27"
1366
+ />
1367
+ <rect
1368
+ class="outer_cls2"
1369
+ height="2.18"
1370
+ width="1.16"
1371
+ x="10"
1372
+ y="26.05"
1373
+ />
1374
+ <rect
1375
+ class="outer_cls2"
1376
+ height="1.15"
1377
+ width="2.21"
1378
+ x="7.15"
1379
+ y="24.27"
1380
+ />
1381
+ <path
1382
+ class="outer_cls3"
1383
+ d="M11.8,82.6a2.76,2.76,0,1,1,2.8-2.76A2.78,2.78,0,0,1,11.8,82.6Zm0-4.37a1.61,1.61,0,1,0,1.63,1.61A1.62,1.62,0,0,0,11.8,78.23Z"
1384
+ />
1385
+ <ellipse
1386
+ class="outer_cls4"
1387
+ cx="50.21"
1388
+ cy="11.21"
1389
+ rx="1.22"
1390
+ ry="1.21"
1391
+ />
1392
+ <polygon
1393
+ class="outer_cls4"
1394
+ points="59.77 90 61.8 87.28 63.69 90 59.77 90"
1395
+ />
1396
+ <path
1397
+ class="outer_cls5"
1398
+ d="M51.93,46.17s-13.8-9-20.79-6.31S19.39,65.43,38.81,75.68s28.2-12.05,28.28-16S67.09,46.73,51.93,46.17Z"
1399
+ />
1400
+ <path
1401
+ class="outer_cls6"
1402
+ d="M47.87,47.66a4.9,4.9,0,1,1,4.9-4.9A4.91,4.91,0,0,1,47.87,47.66Zm0-7.8a2.9,2.9,0,1,0,2.9,2.9A2.9,2.9,0,0,0,47.87,39.86Z"
1403
+ />
1404
+ <path
1405
+ class="outer_cls6"
1406
+ d="M45,74.64h-.08a24.28,24.28,0,1,1,5.67-.13,1,1,0,0,1-.28-2,22.35,22.35,0,1,0-6.34,0L43.42,55.9a4.89,4.89,0,0,1,5.34-5l4.28.39a1,1,0,0,1,.7.39,1,1,0,0,1,.19.78l-1.64,9.64a1,1,0,0,1-2-.34l1.46-8.57-3.2-.3a2.83,2.83,0,0,0-2.24.76,2.89,2.89,0,0,0-.92,2.18L46,73.58a1,1,0,0,1-1,1.06Z"
1407
+ />
1408
+ <ellipse
1409
+ class="outer_cls6"
1410
+ cx="50.66"
1411
+ cy="65.73"
1412
+ rx="1.15"
1413
+ ry="1.13"
1414
+ />
1415
+ </svg>
1416
+ </div>
1417
+ </div>
1418
+ <div
1419
+ class="grow basis shrinkOff"
1420
+ data-id="boxComponent"
1421
+ data-selector-id="box"
1422
+ data-test-id="boxComponent"
1423
+ >
1424
+ <div
1425
+ class="flex cover rowdir"
1426
+ data-id="containerComponent"
1427
+ data-selector-id="container"
1428
+ data-test-id="containerComponent"
1429
+ >
1430
+ <div
1431
+ class="title shrinkOn"
1432
+ data-id="boxComponent"
1433
+ data-selector-id="box"
1434
+ data-test-id="boxComponent"
1435
+ >
1436
+ Alert Title
1437
+ </div>
1438
+ </div>
1439
+ </div>
1440
+ </div>
1441
+ </DocumentFragment>
1442
+ `;
1443
+
1444
+ exports[`AlertHeader snapshot - Render with type=notification 1`] = `
1445
+ <DocumentFragment>
1446
+ <div
1447
+ class="container headerLayout notification flex rowdir wrap vCenter"
1448
+ data-drag-hook="true"
1449
+ data-id="containerComponent"
1450
+ data-selector-id="container"
1451
+ data-test-id="containerComponent"
1452
+ >
1453
+ <div
1454
+ class="iconContainer "
1455
+ >
1456
+ <div
1457
+ class="iconContainer"
1458
+ data-selector-id="alertIcons"
1459
+ >
1460
+ <svg
1461
+ class="notification"
1462
+ viewBox="0 0 100 100"
1463
+ xmlns="http://www.w3.org/2000/svg"
1464
+ >
1465
+ <path
1466
+ class="notify_primary"
1467
+ d="M34.89,23.86s27.19-17.79,41-12.44S99,61.81,60.74,82,5.16,58.27,5,50.48C4.87,42.94,5,25,34.89,23.86Z"
1468
+ />
1469
+ <polygon
1470
+ class="outer_cls2"
1471
+ points="95 49.42 94.18 48.61 92.98 49.79 91.79 48.61 90.97 49.42 92.16 50.6 90.97 51.78 91.79 52.59 92.98 51.41 94.18 52.59 95 51.78 93.81 50.6 95 49.42"
1472
+ />
1473
+ <rect
1474
+ class="outer_cls2"
1475
+ height="2.18"
1476
+ width="1.16"
1477
+ x="10"
1478
+ y="21.46"
1479
+ />
1480
+ <rect
1481
+ class="outer_cls2"
1482
+ height="1.15"
1483
+ width="2.21"
1484
+ x="11.8"
1485
+ y="24.27"
1486
+ />
1487
+ <rect
1488
+ class="outer_cls2"
1489
+ height="2.18"
1490
+ width="1.16"
1491
+ x="10"
1492
+ y="26.05"
1493
+ />
1494
+ <rect
1495
+ class="outer_cls2"
1496
+ height="1.15"
1497
+ width="2.21"
1498
+ x="7.15"
1499
+ y="24.27"
1500
+ />
1501
+ <path
1502
+ class="outer_cls3"
1503
+ d="M11.8,82.6a2.76,2.76,0,1,1,2.8-2.76A2.78,2.78,0,0,1,11.8,82.6Zm0-4.37a1.61,1.61,0,1,0,1.63,1.61A1.62,1.62,0,0,0,11.8,78.23Z"
1504
+ />
1505
+ <ellipse
1506
+ class="outer_cls4"
1507
+ cx="50.21"
1508
+ cy="11.21"
1509
+ rx="1.22"
1510
+ ry="1.21"
1511
+ />
1512
+ <polygon
1513
+ class="outer_cls4"
1514
+ points="59.77 90 61.8 87.28 63.69 90 59.77 90"
1515
+ />
1516
+ <path
1517
+ class="outer_cls5"
1518
+ d="M52.28,46.17s-13.79-9-20.78-6.31S19.75,65.43,39.17,75.68s28.2-12.05,28.28-16S67.45,46.73,52.28,46.17Z"
1519
+ />
1520
+ <path
1521
+ class="outer_cls6"
1522
+ d="M60.43,59.67H45.11a1.11,1.11,0,0,0,0,2.21h15.3a3.76,3.76,0,1,1,0,7.52H30.08a3.76,3.76,0,1,1,0-7.52h.81A1.11,1.11,0,0,0,32,60.77V48.52A13.24,13.24,0,0,1,41,36a1.14,1.14,0,0,0,.41-.24,1.1,1.1,0,0,0,0-1.56,5.28,5.28,0,1,1,7.68,0,1.12,1.12,0,0,0-.26,1,1.09,1.09,0,0,0,.71.78,13.24,13.24,0,0,1,9,12.55v6.62a1.11,1.11,0,0,0,2.21,0V48.52a15.48,15.48,0,0,0-9.07-14.09,7.48,7.48,0,1,0-12.8,0,15.5,15.5,0,0,0-9,14.09V59.67A6,6,0,0,0,30.1,71.6H60.43a6,6,0,1,0,0-11.93Z"
1523
+ />
1524
+ <circle
1525
+ class="outer_cls6"
1526
+ cx="40.09"
1527
+ cy="60.77"
1528
+ r="1.26"
1529
+ />
1530
+ </svg>
1531
+ </div>
1532
+ </div>
1533
+ <div
1534
+ class="grow basis shrinkOff"
1535
+ data-id="boxComponent"
1536
+ data-selector-id="box"
1537
+ data-test-id="boxComponent"
1538
+ >
1539
+ <div
1540
+ class="flex cover rowdir"
1541
+ data-id="containerComponent"
1542
+ data-selector-id="container"
1543
+ data-test-id="containerComponent"
1544
+ >
1545
+ <div
1546
+ class="title shrinkOn"
1547
+ data-id="boxComponent"
1548
+ data-selector-id="box"
1549
+ data-test-id="boxComponent"
1550
+ >
1551
+ Alert Title
1552
+ </div>
1553
+ </div>
1554
+ </div>
1555
+ </div>
1556
+ </DocumentFragment>
1557
+ `;
1558
+
1559
+ exports[`AlertHeader snapshot - Render with type=success 1`] = `
1560
+ <DocumentFragment>
1561
+ <div
1562
+ class="container headerLayout success flex rowdir wrap vCenter"
1563
+ data-drag-hook="true"
1564
+ data-id="containerComponent"
1565
+ data-selector-id="container"
1566
+ data-test-id="containerComponent"
1567
+ >
1568
+ <div
1569
+ class="iconContainer "
1570
+ >
1571
+ <div
1572
+ class="iconContainer"
1573
+ data-selector-id="alertIcons"
1574
+ >
1575
+ <svg
1576
+ class="success"
1577
+ viewBox="0 0 100 100"
1578
+ xmlns="http://www.w3.org/2000/svg"
1579
+ >
1580
+ <path
1581
+ class="success_primary"
1582
+ d="M34.89,23.86s27.19-17.79,41-12.44S99,61.81,60.74,82,5.16,58.27,5,50.48C4.87,42.94,5,25,34.89,23.86Z"
1583
+ />
1584
+ <polygon
1585
+ class="outer_cls2"
1586
+ points="95 49.42 94.18 48.61 92.98 49.79 91.79 48.61 90.97 49.42 92.16 50.6 90.97 51.78 91.79 52.59 92.98 51.41 94.18 52.59 95 51.78 93.81 50.6 95 49.42"
1587
+ />
1588
+ <rect
1589
+ class="outer_cls2"
1590
+ height="2.18"
1591
+ width="1.16"
1592
+ x="10"
1593
+ y="21.46"
1594
+ />
1595
+ <rect
1596
+ class="outer_cls2"
1597
+ height="1.15"
1598
+ width="2.21"
1599
+ x="11.8"
1600
+ y="24.27"
1601
+ />
1602
+ <rect
1603
+ class="outer_cls2"
1604
+ height="2.18"
1605
+ width="1.16"
1606
+ x="10"
1607
+ y="26.05"
1608
+ />
1609
+ <rect
1610
+ class="outer_cls2"
1611
+ height="1.15"
1612
+ width="2.21"
1613
+ x="7.15"
1614
+ y="24.27"
1615
+ />
1616
+ <path
1617
+ class="outer_cls3"
1618
+ d="M11.8,82.6a2.76,2.76,0,1,1,2.8-2.76A2.78,2.78,0,0,1,11.8,82.6Zm0-4.37a1.61,1.61,0,1,0,1.63,1.61A1.62,1.62,0,0,0,11.8,78.23Z"
1619
+ />
1620
+ <ellipse
1621
+ class="outer_cls4"
1622
+ cx="50.21"
1623
+ cy="11.21"
1624
+ rx="1.22"
1625
+ ry="1.21"
1626
+ />
1627
+ <polygon
1628
+ class="outer_cls4"
1629
+ points="59.77 90 61.8 87.28 63.69 90 59.77 90"
1630
+ />
1631
+ <path
1632
+ class="outer_cls5"
1633
+ d="M53.32,43.16s-13.79-9-20.78-6.31S20.79,62.42,40.21,72.67s28.2-12.05,28.27-16S68.48,43.72,53.32,43.16Z"
1634
+ />
1635
+ <path
1636
+ class="outer_cls6"
1637
+ d="M46.5,72.63A23.22,23.22,0,0,1,23.67,54,22.56,22.56,0,0,1,27.2,36.88,23.42,23.42,0,0,1,65,35.77a1,1,0,0,1-.08,1.32l-18.05,18a1,1,0,0,1-1.29.1l-10.7-7.71a1,1,0,0,1,1.17-1.63l10,7.22L62.88,36.31a21.43,21.43,0,0,0-34,1.7,20.59,20.59,0,0,0-3.22,15.58,21.35,21.35,0,0,0,38.53,7.74,20.59,20.59,0,0,0,3.22-15.58,1,1,0,0,1,.79-1.18,1,1,0,0,1,1.17.8,22.52,22.52,0,0,1-3.53,17.09,23.13,23.13,0,0,1-15,9.76A24,24,0,0,1,46.5,72.63ZM67.31,41a1,1,0,1,0,1,1A1,1,0,0,0,67.31,41Z"
1638
+ />
1639
+ </svg>
1640
+ </div>
1641
+ </div>
1642
+ <div
1643
+ class="grow basis shrinkOff"
1644
+ data-id="boxComponent"
1645
+ data-selector-id="box"
1646
+ data-test-id="boxComponent"
1647
+ >
1648
+ <div
1649
+ class="flex cover rowdir"
1650
+ data-id="containerComponent"
1651
+ data-selector-id="container"
1652
+ data-test-id="containerComponent"
1653
+ >
1654
+ <div
1655
+ class="title shrinkOn"
1656
+ data-id="boxComponent"
1657
+ data-selector-id="box"
1658
+ data-test-id="boxComponent"
1659
+ >
1660
+ Alert Title
1661
+ </div>
1662
+ </div>
1663
+ </div>
1664
+ </div>
1665
+ </DocumentFragment>
1666
+ `;
1667
+
1668
+ exports[`AlertHeader snapshot - Render with type=warning 1`] = `
1669
+ <DocumentFragment>
1670
+ <div
1671
+ class="container headerLayout warning flex rowdir wrap vCenter"
1672
+ data-drag-hook="true"
1673
+ data-id="containerComponent"
1674
+ data-selector-id="container"
1675
+ data-test-id="containerComponent"
1676
+ >
1677
+ <div
1678
+ class="iconContainer "
1679
+ >
1680
+ <div
1681
+ class="iconContainer"
1682
+ data-selector-id="alertIcons"
1683
+ >
1684
+ <svg
1685
+ class="warning"
1686
+ viewBox="0 0 100 100"
1687
+ xmlns="http://www.w3.org/2000/svg"
1688
+ >
1689
+ <path
1690
+ class="warning_primary"
1691
+ d="M34.89,23.86s27.19-17.79,41-12.44S99,61.81,60.74,82,5.16,58.27,5,50.48C4.87,42.94,5,25,34.89,23.86Z"
1692
+ />
1693
+ <polygon
1694
+ class="outer_cls2"
1695
+ points="95 49.42 94.18 48.61 92.98 49.79 91.79 48.61 90.97 49.42 92.16 50.6 90.97 51.78 91.79 52.59 92.98 51.41 94.18 52.59 95 51.78 93.81 50.6 95 49.42"
1696
+ />
1697
+ <rect
1698
+ class="outer_cls2"
1699
+ height="2.18"
1700
+ width="1.16"
1701
+ x="10"
1702
+ y="21.46"
1703
+ />
1704
+ <rect
1705
+ class="outer_cls2"
1706
+ height="1.15"
1707
+ width="2.21"
1708
+ x="11.8"
1709
+ y="24.27"
1710
+ />
1711
+ <rect
1712
+ class="outer_cls2"
1713
+ height="2.18"
1714
+ width="1.16"
1715
+ x="10"
1716
+ y="26.05"
1717
+ />
1718
+ <rect
1719
+ class="outer_cls2"
1720
+ height="1.15"
1721
+ width="2.21"
1722
+ x="7.15"
1723
+ y="24.27"
1724
+ />
1725
+ <path
1726
+ class="outer_cls3"
1727
+ d="M11.8,82.6a2.76,2.76,0,1,1,2.8-2.76A2.78,2.78,0,0,1,11.8,82.6Zm0-4.37a1.61,1.61,0,1,0,1.63,1.61A1.62,1.62,0,0,0,11.8,78.23Z"
1728
+ />
1729
+ <ellipse
1730
+ class="outer_cls4"
1731
+ cx="50.21"
1732
+ cy="11.21"
1733
+ rx="1.22"
1734
+ ry="1.21"
1735
+ />
1736
+ <polygon
1737
+ class="outer_cls4"
1738
+ points="59.77 90 61.8 87.28 63.69 90 59.77 90"
1739
+ />
1740
+ <path
1741
+ class="outer_cls5"
1742
+ d="M52.28,43.16s-13.79-9-20.78-6.31S19.75,62.42,39.17,72.67s28.2-12.05,28.28-16S67.45,43.72,52.28,43.16Z"
1743
+ />
1744
+ <path
1745
+ class="outer_cls6"
1746
+ d="M61.28,46.39a1.15,1.15,0,1,1-1.15-1.13A1.13,1.13,0,0,1,61.28,46.39ZM71.63,69.28a5.37,5.37,0,0,0,0-5.4L63,48.91a1,1,0,0,0-1.74,1l8.65,15A3.39,3.39,0,0,1,67,70H30.05a3.39,3.39,0,0,1-2.94-5.09l18.46-32a3.39,3.39,0,0,1,5.87,0l4.74,8.2H48a2.54,2.54,0,0,0-1.85.8,2.57,2.57,0,0,0-.69,1.91l.92,12.67a2.54,2.54,0,0,0,5.08,0l.76-9.85a1,1,0,0,0-.92-1.08,1,1,0,0,0-1.07.92l-.76,9.87a.55.55,0,0,1-1.1,0L47.46,43.7a.51.51,0,0,1,.14-.41.58.58,0,0,1,.4-.17h9.91a1,1,0,0,0,.86-1.5l-5.6-9.7a5.39,5.39,0,0,0-9.33,0l-18.46,32A5.39,5.39,0,0,0,30.05,72H67A5.35,5.35,0,0,0,71.63,69.28ZM49,61.34a2.61,2.61,0,1,0,2.6,2.6A2.6,2.6,0,0,0,49,61.34Z"
1747
+ />
1748
+ </svg>
1749
+ </div>
1750
+ </div>
1751
+ <div
1752
+ class="grow basis shrinkOff"
1753
+ data-id="boxComponent"
1754
+ data-selector-id="box"
1755
+ data-test-id="boxComponent"
1756
+ >
1757
+ <div
1758
+ class="flex cover rowdir"
1759
+ data-id="containerComponent"
1760
+ data-selector-id="container"
1761
+ data-test-id="containerComponent"
1762
+ >
1763
+ <div
1764
+ class="title shrinkOn"
1765
+ data-id="boxComponent"
1766
+ data-selector-id="box"
1767
+ data-test-id="boxComponent"
1768
+ >
1769
+ Alert Title
1770
+ </div>
1771
+ </div>
1772
+ </div>
1773
+ </div>
1774
+ </DocumentFragment>
1775
+ `;
1776
+
1777
+ exports[`AlertHeader snapshot - does not render custom renderAlertIcon when needIcon is false 1`] = `
1778
+ <DocumentFragment>
1779
+ <div
1780
+ class="container danger flex rowdir wrap vCenter"
1781
+ data-drag-hook="true"
1782
+ data-id="containerComponent"
1783
+ data-selector-id="container"
1784
+ data-test-id="containerComponent"
1785
+ />
1786
+ </DocumentFragment>
1787
+ `;
1788
+
1789
+ exports[`AlertHeader snapshot - renders custom renderAlertIcon when needIcon is true 1`] = `
103
1790
  <DocumentFragment>
104
1791
  <div
105
1792
  class="container danger flex rowdir wrap vCenter"
@@ -109,7 +1796,7 @@ exports[`AlertHeader renders custom renderAlertIcon when needIcon is true 1`] =
109
1796
  data-test-id="containerComponent"
110
1797
  >
111
1798
  <div
112
- class="iconContainer"
1799
+ class="iconContainer "
113
1800
  >
114
1801
  <span
115
1802
  data-test-id="custom-icon"