@innovaccer/design-system 2.3.0 → 2.4.0-0

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 (87) hide show
  1. package/CHANGELOG.md +35 -0
  2. package/core/components/atoms/backdrop/Backdrop.tsx +11 -1
  3. package/core/components/atoms/button/Button.tsx +60 -44
  4. package/core/components/atoms/button/__stories__/IconButtonGroup.story.tsx +4 -4
  5. package/core/components/atoms/button/__stories__/IconButtonSecondary.story.tsx +1 -1
  6. package/core/components/atoms/button/__tests__/Button.test.tsx +36 -1
  7. package/core/components/atoms/dropdown/DropdownList.tsx +1 -0
  8. package/core/components/atoms/dropdown/Loading.tsx +9 -9
  9. package/core/components/atoms/dropdown/__stories__/Options.tsx +2 -0
  10. package/core/components/atoms/dropdown/__tests__/Dropdown.test.tsx +12 -1
  11. package/core/components/atoms/dropdown/__tests__/Loading.test.tsx +66 -0
  12. package/core/components/atoms/dropdown/__tests__/Option.test.tsx +204 -0
  13. package/core/components/atoms/dropdown/option/CheckboxOption.tsx +1 -0
  14. package/core/components/atoms/dropdown/option/IconOption.tsx +3 -1
  15. package/core/components/atoms/dropdown/option/IconWithMetaOption.tsx +3 -1
  16. package/core/components/atoms/dropdown/option/index.tsx +7 -1
  17. package/core/components/molecules/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap +13 -0
  18. package/core/components/molecules/emptyState/__stories__/assets/pageNotLoaded.png +0 -0
  19. package/core/components/molecules/emptyState/__stories__/variants/noContentAvailable.story.tsx +26 -0
  20. package/core/components/molecules/emptyState/__stories__/variants/{smallSizeWithButton.story.tsx → noSearchResults.story.tsx} +2 -2
  21. package/core/components/molecules/emptyState/__stories__/variants/{largeSize.story.tsx → pageNotLoaded.story.tsx} +3 -3
  22. package/core/components/molecules/fileList/FileIcon.tsx +10 -2
  23. package/core/components/molecules/fileList/FileListItem.tsx +7 -3
  24. package/core/components/molecules/fileList/__stories__/__common__/fileListExample.tsx +1 -0
  25. package/core/components/molecules/fileList/__tests__/FileList.test.tsx +115 -0
  26. package/core/components/molecules/fileList/__tests__/__snapshots__/FileList.test.tsx.snap +232 -0
  27. package/core/components/molecules/inputMask/InputMask.tsx +2 -5
  28. package/core/components/molecules/inputMask/__tests__/InputMask.test.tsx +128 -0
  29. package/core/components/molecules/inputMask/__tests__/__snapshots__/InputMask.test.tsx.snap +39 -0
  30. package/core/components/molecules/modal/Modal.tsx +7 -5
  31. package/core/components/molecules/modal/__tests__/__snapshots__/Modal.test.tsx.snap +18 -0
  32. package/core/components/molecules/sidesheet/Sidesheet.tsx +5 -3
  33. package/core/components/molecules/sidesheet/__tests__/__snapshots__/Sidesheet.test.tsx.snap +2 -0
  34. package/core/components/organisms/calendar/Calendar.tsx +66 -22
  35. package/core/components/organisms/calendar/__stories__/variants/withEvents.story.tsx +45 -0
  36. package/core/components/organisms/calendar/__tests__/Calendar.test.tsx +10 -0
  37. package/core/components/organisms/calendar/__tests__/__snapshots__/Calendar.test.tsx.snap +1096 -1096
  38. package/core/components/organisms/calendar/config.ts +2 -2
  39. package/core/components/organisms/calendar/types.ts +1 -0
  40. package/core/components/organisms/datePicker/DatePicker.tsx +23 -9
  41. package/core/components/organisms/datePicker/__tests__/{DatePicker.tsx → DatePicker.test.tsx} +16 -1
  42. package/core/components/organisms/datePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap +2257 -0
  43. package/core/components/organisms/dateRangePicker/__tests__/__snapshots__/DateRangePicker.test.tsx.snap +2552 -2550
  44. package/core/components/organisms/inlineMessage/InlineMessage.tsx +75 -0
  45. package/core/components/organisms/inlineMessage/__stories__/Default.story.tsx +18 -0
  46. package/core/components/organisms/inlineMessage/__stories__/Error.story.tsx +19 -0
  47. package/core/components/organisms/inlineMessage/__stories__/Info.story.tsx +19 -0
  48. package/core/components/organisms/inlineMessage/__stories__/Success.story.tsx +19 -0
  49. package/core/components/organisms/inlineMessage/__stories__/Warning.story.tsx +18 -0
  50. package/core/components/organisms/inlineMessage/__stories__/variants/InlineMessageWithinTable.story.tsx +139 -0
  51. package/core/components/organisms/inlineMessage/__tests__/InlineMessage.test.tsx +91 -0
  52. package/core/components/organisms/inlineMessage/__tests__/__snapshots__/InlineMessage.test.tsx.snap +139 -0
  53. package/core/components/organisms/inlineMessage/index.tsx +1 -0
  54. package/core/components/organisms/timePicker/__tests__/__snapshots__/TimePicker.test.tsx.snap +8 -0
  55. package/core/index.tsx +2 -0
  56. package/core/index.type.tsx +1 -0
  57. package/core/utils/__tests__/__snapshots__/TS.test.tsx.snap +485 -466
  58. package/css/dist/index.css +72 -8
  59. package/css/dist/index.css.map +1 -1
  60. package/css/src/components/calendar.css +37 -5
  61. package/css/src/components/card.css +1 -1
  62. package/css/src/components/chipInput.css +2 -2
  63. package/css/src/components/editableChipInput.css +2 -1
  64. package/css/src/components/inlineMessage.css +29 -0
  65. package/dist/core/components/atoms/backdrop/Backdrop.d.ts +1 -0
  66. package/dist/core/components/atoms/button/Button.d.ts +1 -0
  67. package/dist/core/components/atoms/popperWrapper/PopperWrapper.d.ts +28 -27
  68. package/dist/core/components/organisms/calendar/Calendar.d.ts +6 -1
  69. package/dist/core/components/organisms/calendar/types.d.ts +3 -0
  70. package/dist/core/components/organisms/inlineMessage/InlineMessage.d.ts +15 -0
  71. package/dist/core/components/organisms/inlineMessage/index.d.ts +1 -0
  72. package/dist/core/index.d.ts +1 -0
  73. package/dist/core/index.type.d.ts +1 -0
  74. package/dist/index.esm.js +189 -66
  75. package/dist/index.js +201 -80
  76. package/dist/index.js.map +1 -1
  77. package/dist/index.umd.js +1 -1
  78. package/dist/index.umd.js.br +0 -0
  79. package/dist/index.umd.js.gz +0 -0
  80. package/dts.config.js +13 -0
  81. package/package.json +4 -2
  82. package/types/innovaccer-design-system/index.d.ts +39 -0
  83. package/types/innovaccer-design-system/innovaccer-design-system-tests.ts +0 -0
  84. package/types/innovaccer-design-system/tsconfig.json +23 -0
  85. package/types/innovaccer-design-system/tslint.json +1 -0
  86. package/core/components/molecules/emptyState/__stories__/variants/smallSizeWithoutButton.story.tsx +0 -21
  87. package/core/components/organisms/datePicker/__tests__/__snapshots__/DatePicker.tsx.snap +0 -2164
package/core/components/organisms/datePicker/__tests__/__snapshots__/DatePicker.tsx.snap DELETED
@@ -1,2164 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`DatePicker component
4
- open: false
5
- 1`] = `
6
- <body>
7
- <div>
8
- <div
9
- class="OutsideClick PopperWrapper-trigger w-100"
10
- >
11
- <div
12
- class="d-flex flex-column flex-grow-1"
13
- >
14
- <div
15
- class="Input Input--regular"
16
- data-test="DesignSystem-InputWrapper"
17
- style="min-width: 256px;"
18
- >
19
- <div
20
- class="Input-icon Input-icon--left"
21
- >
22
- <i
23
- class="material-icons material-icons-round Icon"
24
- style="font-size: 16px; width: 16px;"
25
- >
26
- events_round
27
- </i>
28
- </div>
29
- <input
30
- autocomplete="off"
31
- class="Input-input Input-input--regular"
32
- data-test="DesignSystem-Input"
33
- placeholder="mm/dd/yyyy"
34
- type="text"
35
- value="03/01/2020"
36
- />
37
- <div
38
- class="Input-icon Input-icon--right"
39
- data-test="DesignSystem-Input--closeIcon"
40
- >
41
- <i
42
- class="material-icons material-icons-round Icon"
43
- style="font-size: 16px; width: 16px;"
44
- >
45
- close_round
46
- </i>
47
- </div>
48
- </div>
49
- <div
50
- class="Caption Caption--hidden Caption--withInput"
51
- data-test="DesignSystem-Caption"
52
- >
53
- <span
54
- class="Text Text--subtle Text--medium Text--small"
55
- data-test="DesignSystem-Text"
56
- />
57
- </div>
58
- </div>
59
- </div>
60
- </div>
61
- </body>
62
- `;
63
-
64
- exports[`DatePicker component
65
- open: true
66
- 1`] = `
67
- <body>
68
- <div>
69
- <div
70
- class="OutsideClick PopperWrapper-trigger w-100"
71
- >
72
- <div
73
- class="d-flex flex-column flex-grow-1"
74
- >
75
- <div
76
- class="Input Input--regular"
77
- data-test="DesignSystem-InputWrapper"
78
- style="min-width: 256px;"
79
- >
80
- <div
81
- class="Input-icon Input-icon--left"
82
- >
83
- <i
84
- class="material-icons material-icons-round Icon"
85
- style="font-size: 16px; width: 16px;"
86
- >
87
- events_round
88
- </i>
89
- </div>
90
- <input
91
- autocomplete="off"
92
- class="Input-input Input-input--regular"
93
- data-test="DesignSystem-Input"
94
- placeholder="mm/dd/yyyy"
95
- type="text"
96
- value="03/01/2020"
97
- />
98
- <div
99
- class="Input-icon Input-icon--right"
100
- data-test="DesignSystem-Input--closeIcon"
101
- >
102
- <i
103
- class="material-icons material-icons-round Icon"
104
- style="font-size: 16px; width: 16px;"
105
- >
106
- close_round
107
- </i>
108
- </div>
109
- </div>
110
- <div
111
- class="Caption Caption--hidden Caption--withInput"
112
- data-test="DesignSystem-Caption"
113
- >
114
- <span
115
- class="Text Text--subtle Text--medium Text--small"
116
- data-test="DesignSystem-Text"
117
- />
118
- </div>
119
- </div>
120
- </div>
121
- </div>
122
- <div
123
- class="Popover"
124
- data-layer="true"
125
- data-test="DesignSystem-Popover"
126
- style="position: absolute; top: 0px; left: 0px; opacity: 0; pointer-events: none;"
127
- >
128
- <div
129
- class="Calendar-wrapper"
130
- data-test="DesignSystem-Calendar-Wrapper"
131
- >
132
- <div
133
- class="Calendar Calendar--date Calendar--large"
134
- data-test="DesignSystem-Calendar"
135
- >
136
- <div
137
- class="Calendar-header"
138
- >
139
- <button
140
- class="Button Button--regular Button--regularSquare Button--transparent Calendar-headerIcon Calendar-headerIcon--prev"
141
- data-test="DesignSystem-Button"
142
- tabindex="0"
143
- type="button"
144
- >
145
- <div
146
- class="Button-icon"
147
- >
148
- <i
149
- class="material-icons material-icons-round Icon Icon--default"
150
- data-test="DesignSystem-Button--Icon"
151
- style="font-size: 16px; width: 16px;"
152
- >
153
- arrow_back_round
154
- </i>
155
- </div>
156
- </button>
157
- <div
158
- class="Calendar-headerContent Calendar-headerContent--noIcon-left Calendar-headerContent--noIcon-right"
159
- >
160
- <span>
161
- <h5
162
- class="Heading Heading--s Heading--default"
163
- data-test="DesignSystem-Heading"
164
- >
165
- Mar
166
- </h5>
167
- </span>
168
- <span
169
- class="ml-4"
170
- >
171
- <h5
172
- class="Heading Heading--s Heading--default"
173
- data-test="DesignSystem-Heading"
174
- >
175
- 2020
176
- </h5>
177
- </span>
178
- </div>
179
- <button
180
- class="Button Button--regular Button--regularSquare Button--transparent Calendar-headerIcon Calendar-headerIcon--next"
181
- data-test="DesignSystem-Button"
182
- tabindex="0"
183
- type="button"
184
- >
185
- <div
186
- class="Button-icon"
187
- >
188
- <i
189
- class="material-icons material-icons-round Icon Icon--default"
190
- data-test="DesignSystem-Button--Icon"
191
- style="font-size: 16px; width: 16px;"
192
- >
193
- arrow_forward_round
194
- </i>
195
- </div>
196
- </button>
197
- </div>
198
- <div
199
- class="Calendar-body"
200
- >
201
- <div
202
- class="Calendar-dayValues"
203
- >
204
- <h4
205
- class="Subheading Subheading--disabled Calendar-valueWrapper"
206
- data-test="DesignSystem-Subheading"
207
- >
208
- Sun
209
- </h4>
210
- <h4
211
- class="Subheading Subheading--disabled Calendar-valueWrapper"
212
- data-test="DesignSystem-Subheading"
213
- >
214
- Mon
215
- </h4>
216
- <h4
217
- class="Subheading Subheading--disabled Calendar-valueWrapper"
218
- data-test="DesignSystem-Subheading"
219
- >
220
- Tue
221
- </h4>
222
- <h4
223
- class="Subheading Subheading--disabled Calendar-valueWrapper"
224
- data-test="DesignSystem-Subheading"
225
- >
226
- Wed
227
- </h4>
228
- <h4
229
- class="Subheading Subheading--disabled Calendar-valueWrapper"
230
- data-test="DesignSystem-Subheading"
231
- >
232
- Thu
233
- </h4>
234
- <h4
235
- class="Subheading Subheading--disabled Calendar-valueWrapper"
236
- data-test="DesignSystem-Subheading"
237
- >
238
- Fri
239
- </h4>
240
- <h4
241
- class="Subheading Subheading--disabled Calendar-valueWrapper"
242
- data-test="DesignSystem-Subheading"
243
- >
244
- Sat
245
- </h4>
246
- </div>
247
- <div
248
- class="Calendar-dateValues"
249
- >
250
- <div
251
- class="Calendar-valueRow"
252
- >
253
- <div
254
- class="Calendar-valueWrapper"
255
- data-test="designSystem-Calendar-WrapperClass"
256
- >
257
- <span
258
- class="Text Text--white Text--regular Calendar-value Calendar-value--active Calendar-dateValue Calendar-dateValue--large"
259
- data-test="DesignSystem-Calendar--dateValue"
260
- >
261
- 1
262
- </span>
263
- </div>
264
- <div
265
- class="Calendar-valueWrapper"
266
- data-test="designSystem-Calendar-WrapperClass"
267
- >
268
- <span
269
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
270
- data-test="DesignSystem-Calendar--dateValue"
271
- >
272
- 2
273
- </span>
274
- </div>
275
- <div
276
- class="Calendar-valueWrapper"
277
- data-test="designSystem-Calendar-WrapperClass"
278
- >
279
- <span
280
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
281
- data-test="DesignSystem-Calendar--dateValue"
282
- >
283
- 3
284
- </span>
285
- </div>
286
- <div
287
- class="Calendar-valueWrapper"
288
- data-test="designSystem-Calendar-WrapperClass"
289
- >
290
- <span
291
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
292
- data-test="DesignSystem-Calendar--dateValue"
293
- >
294
- 4
295
- </span>
296
- </div>
297
- <div
298
- class="Calendar-valueWrapper"
299
- data-test="designSystem-Calendar-WrapperClass"
300
- >
301
- <span
302
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
303
- data-test="DesignSystem-Calendar--dateValue"
304
- >
305
- 5
306
- </span>
307
- </div>
308
- <div
309
- class="Calendar-valueWrapper"
310
- data-test="designSystem-Calendar-WrapperClass"
311
- >
312
- <span
313
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
314
- data-test="DesignSystem-Calendar--dateValue"
315
- >
316
- 6
317
- </span>
318
- </div>
319
- <div
320
- class="Calendar-valueWrapper"
321
- data-test="designSystem-Calendar-WrapperClass"
322
- >
323
- <span
324
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
325
- data-test="DesignSystem-Calendar--dateValue"
326
- >
327
- 7
328
- </span>
329
- </div>
330
- </div>
331
- <div
332
- class="Calendar-valueRow"
333
- >
334
- <div
335
- class="Calendar-valueWrapper"
336
- data-test="designSystem-Calendar-WrapperClass"
337
- >
338
- <span
339
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
340
- data-test="DesignSystem-Calendar--dateValue"
341
- >
342
- 8
343
- </span>
344
- </div>
345
- <div
346
- class="Calendar-valueWrapper"
347
- data-test="designSystem-Calendar-WrapperClass"
348
- >
349
- <span
350
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
351
- data-test="DesignSystem-Calendar--dateValue"
352
- >
353
- 9
354
- </span>
355
- </div>
356
- <div
357
- class="Calendar-valueWrapper"
358
- data-test="designSystem-Calendar-WrapperClass"
359
- >
360
- <span
361
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
362
- data-test="DesignSystem-Calendar--dateValue"
363
- >
364
- 10
365
- </span>
366
- </div>
367
- <div
368
- class="Calendar-valueWrapper"
369
- data-test="designSystem-Calendar-WrapperClass"
370
- >
371
- <span
372
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
373
- data-test="DesignSystem-Calendar--dateValue"
374
- >
375
- 11
376
- </span>
377
- </div>
378
- <div
379
- class="Calendar-valueWrapper"
380
- data-test="designSystem-Calendar-WrapperClass"
381
- >
382
- <span
383
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
384
- data-test="DesignSystem-Calendar--dateValue"
385
- >
386
- 12
387
- </span>
388
- </div>
389
- <div
390
- class="Calendar-valueWrapper"
391
- data-test="designSystem-Calendar-WrapperClass"
392
- >
393
- <span
394
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
395
- data-test="DesignSystem-Calendar--dateValue"
396
- >
397
- 13
398
- </span>
399
- </div>
400
- <div
401
- class="Calendar-valueWrapper"
402
- data-test="designSystem-Calendar-WrapperClass"
403
- >
404
- <span
405
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
406
- data-test="DesignSystem-Calendar--dateValue"
407
- >
408
- 14
409
- </span>
410
- </div>
411
- </div>
412
- <div
413
- class="Calendar-valueRow"
414
- >
415
- <div
416
- class="Calendar-valueWrapper"
417
- data-test="designSystem-Calendar-WrapperClass"
418
- >
419
- <span
420
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
421
- data-test="DesignSystem-Calendar--dateValue"
422
- >
423
- 15
424
- </span>
425
- </div>
426
- <div
427
- class="Calendar-valueWrapper"
428
- data-test="designSystem-Calendar-WrapperClass"
429
- >
430
- <span
431
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
432
- data-test="DesignSystem-Calendar--dateValue"
433
- >
434
- 16
435
- </span>
436
- </div>
437
- <div
438
- class="Calendar-valueWrapper"
439
- data-test="designSystem-Calendar-WrapperClass"
440
- >
441
- <span
442
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
443
- data-test="DesignSystem-Calendar--dateValue"
444
- >
445
- 17
446
- </span>
447
- </div>
448
- <div
449
- class="Calendar-valueWrapper"
450
- data-test="designSystem-Calendar-WrapperClass"
451
- >
452
- <span
453
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
454
- data-test="DesignSystem-Calendar--dateValue"
455
- >
456
- 18
457
- </span>
458
- </div>
459
- <div
460
- class="Calendar-valueWrapper"
461
- data-test="designSystem-Calendar-WrapperClass"
462
- >
463
- <span
464
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
465
- data-test="DesignSystem-Calendar--dateValue"
466
- >
467
- 19
468
- </span>
469
- </div>
470
- <div
471
- class="Calendar-valueWrapper"
472
- data-test="designSystem-Calendar-WrapperClass"
473
- >
474
- <span
475
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
476
- data-test="DesignSystem-Calendar--dateValue"
477
- >
478
- 20
479
- </span>
480
- </div>
481
- <div
482
- class="Calendar-valueWrapper"
483
- data-test="designSystem-Calendar-WrapperClass"
484
- >
485
- <span
486
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
487
- data-test="DesignSystem-Calendar--dateValue"
488
- >
489
- 21
490
- </span>
491
- </div>
492
- </div>
493
- <div
494
- class="Calendar-valueRow"
495
- >
496
- <div
497
- class="Calendar-valueWrapper"
498
- data-test="designSystem-Calendar-WrapperClass"
499
- >
500
- <span
501
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
502
- data-test="DesignSystem-Calendar--dateValue"
503
- >
504
- 22
505
- </span>
506
- </div>
507
- <div
508
- class="Calendar-valueWrapper"
509
- data-test="designSystem-Calendar-WrapperClass"
510
- >
511
- <span
512
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
513
- data-test="DesignSystem-Calendar--dateValue"
514
- >
515
- 23
516
- </span>
517
- </div>
518
- <div
519
- class="Calendar-valueWrapper"
520
- data-test="designSystem-Calendar-WrapperClass"
521
- >
522
- <span
523
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
524
- data-test="DesignSystem-Calendar--dateValue"
525
- >
526
- 24
527
- </span>
528
- </div>
529
- <div
530
- class="Calendar-valueWrapper"
531
- data-test="designSystem-Calendar-WrapperClass"
532
- >
533
- <span
534
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
535
- data-test="DesignSystem-Calendar--dateValue"
536
- >
537
- 25
538
- </span>
539
- </div>
540
- <div
541
- class="Calendar-valueWrapper"
542
- data-test="designSystem-Calendar-WrapperClass"
543
- >
544
- <span
545
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
546
- data-test="DesignSystem-Calendar--dateValue"
547
- >
548
- 26
549
- </span>
550
- </div>
551
- <div
552
- class="Calendar-valueWrapper"
553
- data-test="designSystem-Calendar-WrapperClass"
554
- >
555
- <span
556
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
557
- data-test="DesignSystem-Calendar--dateValue"
558
- >
559
- 27
560
- </span>
561
- </div>
562
- <div
563
- class="Calendar-valueWrapper"
564
- data-test="designSystem-Calendar-WrapperClass"
565
- >
566
- <span
567
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
568
- data-test="DesignSystem-Calendar--dateValue"
569
- >
570
- 28
571
- </span>
572
- </div>
573
- </div>
574
- <div
575
- class="Calendar-valueRow"
576
- >
577
- <div
578
- class="Calendar-valueWrapper"
579
- data-test="designSystem-Calendar-WrapperClass"
580
- >
581
- <span
582
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
583
- data-test="DesignSystem-Calendar--dateValue"
584
- >
585
- 29
586
- </span>
587
- </div>
588
- <div
589
- class="Calendar-valueWrapper"
590
- data-test="designSystem-Calendar-WrapperClass"
591
- >
592
- <span
593
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
594
- data-test="DesignSystem-Calendar--dateValue"
595
- >
596
- 30
597
- </span>
598
- </div>
599
- <div
600
- class="Calendar-valueWrapper"
601
- data-test="designSystem-Calendar-WrapperClass"
602
- >
603
- <span
604
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
605
- data-test="DesignSystem-Calendar--dateValue"
606
- >
607
- 31
608
- </span>
609
- </div>
610
- <div
611
- class="Calendar-valueWrapper"
612
- data-test="designSystem-Calendar-WrapperClass"
613
- />
614
- <div
615
- class="Calendar-valueWrapper"
616
- data-test="designSystem-Calendar-WrapperClass"
617
- />
618
- <div
619
- class="Calendar-valueWrapper"
620
- data-test="designSystem-Calendar-WrapperClass"
621
- />
622
- <div
623
- class="Calendar-valueWrapper"
624
- data-test="designSystem-Calendar-WrapperClass"
625
- />
626
- </div>
627
- </div>
628
- </div>
629
- </div>
630
- </div>
631
- </div>
632
- </body>
633
- `;
634
-
635
- exports[`DatePicker component
636
- view: "date"
637
- 1`] = `
638
- <body>
639
- <div>
640
- <div
641
- class="Calendar-wrapper"
642
- data-test="DesignSystem-Calendar-Wrapper"
643
- >
644
- <div
645
- class="Calendar Calendar--date Calendar--large"
646
- data-test="DesignSystem-Calendar"
647
- >
648
- <div
649
- class="Calendar-header"
650
- >
651
- <button
652
- class="Button Button--regular Button--regularSquare Button--transparent Calendar-headerIcon Calendar-headerIcon--prev"
653
- data-test="DesignSystem-Button"
654
- tabindex="0"
655
- type="button"
656
- >
657
- <div
658
- class="Button-icon"
659
- >
660
- <i
661
- class="material-icons material-icons-round Icon Icon--default"
662
- data-test="DesignSystem-Button--Icon"
663
- style="font-size: 16px; width: 16px;"
664
- >
665
- arrow_back_round
666
- </i>
667
- </div>
668
- </button>
669
- <div
670
- class="Calendar-headerContent Calendar-headerContent--noIcon-left Calendar-headerContent--noIcon-right"
671
- >
672
- <span>
673
- <h5
674
- class="Heading Heading--s Heading--default"
675
- data-test="DesignSystem-Heading"
676
- >
677
- Mar
678
- </h5>
679
- </span>
680
- <span
681
- class="ml-4"
682
- >
683
- <h5
684
- class="Heading Heading--s Heading--default"
685
- data-test="DesignSystem-Heading"
686
- >
687
- 2020
688
- </h5>
689
- </span>
690
- </div>
691
- <button
692
- class="Button Button--regular Button--regularSquare Button--transparent Calendar-headerIcon Calendar-headerIcon--next"
693
- data-test="DesignSystem-Button"
694
- tabindex="0"
695
- type="button"
696
- >
697
- <div
698
- class="Button-icon"
699
- >
700
- <i
701
- class="material-icons material-icons-round Icon Icon--default"
702
- data-test="DesignSystem-Button--Icon"
703
- style="font-size: 16px; width: 16px;"
704
- >
705
- arrow_forward_round
706
- </i>
707
- </div>
708
- </button>
709
- </div>
710
- <div
711
- class="Calendar-body"
712
- >
713
- <div
714
- class="Calendar-dayValues"
715
- >
716
- <h4
717
- class="Subheading Subheading--disabled Calendar-valueWrapper"
718
- data-test="DesignSystem-Subheading"
719
- >
720
- Sun
721
- </h4>
722
- <h4
723
- class="Subheading Subheading--disabled Calendar-valueWrapper"
724
- data-test="DesignSystem-Subheading"
725
- >
726
- Mon
727
- </h4>
728
- <h4
729
- class="Subheading Subheading--disabled Calendar-valueWrapper"
730
- data-test="DesignSystem-Subheading"
731
- >
732
- Tue
733
- </h4>
734
- <h4
735
- class="Subheading Subheading--disabled Calendar-valueWrapper"
736
- data-test="DesignSystem-Subheading"
737
- >
738
- Wed
739
- </h4>
740
- <h4
741
- class="Subheading Subheading--disabled Calendar-valueWrapper"
742
- data-test="DesignSystem-Subheading"
743
- >
744
- Thu
745
- </h4>
746
- <h4
747
- class="Subheading Subheading--disabled Calendar-valueWrapper"
748
- data-test="DesignSystem-Subheading"
749
- >
750
- Fri
751
- </h4>
752
- <h4
753
- class="Subheading Subheading--disabled Calendar-valueWrapper"
754
- data-test="DesignSystem-Subheading"
755
- >
756
- Sat
757
- </h4>
758
- </div>
759
- <div
760
- class="Calendar-dateValues"
761
- >
762
- <div
763
- class="Calendar-valueRow"
764
- >
765
- <div
766
- class="Calendar-valueWrapper"
767
- data-test="designSystem-Calendar-WrapperClass"
768
- >
769
- <span
770
- class="Text Text--white Text--regular Calendar-value Calendar-value--active Calendar-dateValue Calendar-dateValue--large"
771
- data-test="DesignSystem-Calendar--dateValue"
772
- >
773
- 1
774
- </span>
775
- </div>
776
- <div
777
- class="Calendar-valueWrapper"
778
- data-test="designSystem-Calendar-WrapperClass"
779
- >
780
- <span
781
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
782
- data-test="DesignSystem-Calendar--dateValue"
783
- >
784
- 2
785
- </span>
786
- </div>
787
- <div
788
- class="Calendar-valueWrapper"
789
- data-test="designSystem-Calendar-WrapperClass"
790
- >
791
- <span
792
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
793
- data-test="DesignSystem-Calendar--dateValue"
794
- >
795
- 3
796
- </span>
797
- </div>
798
- <div
799
- class="Calendar-valueWrapper"
800
- data-test="designSystem-Calendar-WrapperClass"
801
- >
802
- <span
803
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
804
- data-test="DesignSystem-Calendar--dateValue"
805
- >
806
- 4
807
- </span>
808
- </div>
809
- <div
810
- class="Calendar-valueWrapper"
811
- data-test="designSystem-Calendar-WrapperClass"
812
- >
813
- <span
814
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
815
- data-test="DesignSystem-Calendar--dateValue"
816
- >
817
- 5
818
- </span>
819
- </div>
820
- <div
821
- class="Calendar-valueWrapper"
822
- data-test="designSystem-Calendar-WrapperClass"
823
- >
824
- <span
825
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
826
- data-test="DesignSystem-Calendar--dateValue"
827
- >
828
- 6
829
- </span>
830
- </div>
831
- <div
832
- class="Calendar-valueWrapper"
833
- data-test="designSystem-Calendar-WrapperClass"
834
- >
835
- <span
836
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
837
- data-test="DesignSystem-Calendar--dateValue"
838
- >
839
- 7
840
- </span>
841
- </div>
842
- </div>
843
- <div
844
- class="Calendar-valueRow"
845
- >
846
- <div
847
- class="Calendar-valueWrapper"
848
- data-test="designSystem-Calendar-WrapperClass"
849
- >
850
- <span
851
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
852
- data-test="DesignSystem-Calendar--dateValue"
853
- >
854
- 8
855
- </span>
856
- </div>
857
- <div
858
- class="Calendar-valueWrapper"
859
- data-test="designSystem-Calendar-WrapperClass"
860
- >
861
- <span
862
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
863
- data-test="DesignSystem-Calendar--dateValue"
864
- >
865
- 9
866
- </span>
867
- </div>
868
- <div
869
- class="Calendar-valueWrapper"
870
- data-test="designSystem-Calendar-WrapperClass"
871
- >
872
- <span
873
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
874
- data-test="DesignSystem-Calendar--dateValue"
875
- >
876
- 10
877
- </span>
878
- </div>
879
- <div
880
- class="Calendar-valueWrapper"
881
- data-test="designSystem-Calendar-WrapperClass"
882
- >
883
- <span
884
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
885
- data-test="DesignSystem-Calendar--dateValue"
886
- >
887
- 11
888
- </span>
889
- </div>
890
- <div
891
- class="Calendar-valueWrapper"
892
- data-test="designSystem-Calendar-WrapperClass"
893
- >
894
- <span
895
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
896
- data-test="DesignSystem-Calendar--dateValue"
897
- >
898
- 12
899
- </span>
900
- </div>
901
- <div
902
- class="Calendar-valueWrapper"
903
- data-test="designSystem-Calendar-WrapperClass"
904
- >
905
- <span
906
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
907
- data-test="DesignSystem-Calendar--dateValue"
908
- >
909
- 13
910
- </span>
911
- </div>
912
- <div
913
- class="Calendar-valueWrapper"
914
- data-test="designSystem-Calendar-WrapperClass"
915
- >
916
- <span
917
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
918
- data-test="DesignSystem-Calendar--dateValue"
919
- >
920
- 14
921
- </span>
922
- </div>
923
- </div>
924
- <div
925
- class="Calendar-valueRow"
926
- >
927
- <div
928
- class="Calendar-valueWrapper"
929
- data-test="designSystem-Calendar-WrapperClass"
930
- >
931
- <span
932
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
933
- data-test="DesignSystem-Calendar--dateValue"
934
- >
935
- 15
936
- </span>
937
- </div>
938
- <div
939
- class="Calendar-valueWrapper"
940
- data-test="designSystem-Calendar-WrapperClass"
941
- >
942
- <span
943
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
944
- data-test="DesignSystem-Calendar--dateValue"
945
- >
946
- 16
947
- </span>
948
- </div>
949
- <div
950
- class="Calendar-valueWrapper"
951
- data-test="designSystem-Calendar-WrapperClass"
952
- >
953
- <span
954
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
955
- data-test="DesignSystem-Calendar--dateValue"
956
- >
957
- 17
958
- </span>
959
- </div>
960
- <div
961
- class="Calendar-valueWrapper"
962
- data-test="designSystem-Calendar-WrapperClass"
963
- >
964
- <span
965
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
966
- data-test="DesignSystem-Calendar--dateValue"
967
- >
968
- 18
969
- </span>
970
- </div>
971
- <div
972
- class="Calendar-valueWrapper"
973
- data-test="designSystem-Calendar-WrapperClass"
974
- >
975
- <span
976
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
977
- data-test="DesignSystem-Calendar--dateValue"
978
- >
979
- 19
980
- </span>
981
- </div>
982
- <div
983
- class="Calendar-valueWrapper"
984
- data-test="designSystem-Calendar-WrapperClass"
985
- >
986
- <span
987
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
988
- data-test="DesignSystem-Calendar--dateValue"
989
- >
990
- 20
991
- </span>
992
- </div>
993
- <div
994
- class="Calendar-valueWrapper"
995
- data-test="designSystem-Calendar-WrapperClass"
996
- >
997
- <span
998
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
999
- data-test="DesignSystem-Calendar--dateValue"
1000
- >
1001
- 21
1002
- </span>
1003
- </div>
1004
- </div>
1005
- <div
1006
- class="Calendar-valueRow"
1007
- >
1008
- <div
1009
- class="Calendar-valueWrapper"
1010
- data-test="designSystem-Calendar-WrapperClass"
1011
- >
1012
- <span
1013
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
1014
- data-test="DesignSystem-Calendar--dateValue"
1015
- >
1016
- 22
1017
- </span>
1018
- </div>
1019
- <div
1020
- class="Calendar-valueWrapper"
1021
- data-test="designSystem-Calendar-WrapperClass"
1022
- >
1023
- <span
1024
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
1025
- data-test="DesignSystem-Calendar--dateValue"
1026
- >
1027
- 23
1028
- </span>
1029
- </div>
1030
- <div
1031
- class="Calendar-valueWrapper"
1032
- data-test="designSystem-Calendar-WrapperClass"
1033
- >
1034
- <span
1035
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
1036
- data-test="DesignSystem-Calendar--dateValue"
1037
- >
1038
- 24
1039
- </span>
1040
- </div>
1041
- <div
1042
- class="Calendar-valueWrapper"
1043
- data-test="designSystem-Calendar-WrapperClass"
1044
- >
1045
- <span
1046
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
1047
- data-test="DesignSystem-Calendar--dateValue"
1048
- >
1049
- 25
1050
- </span>
1051
- </div>
1052
- <div
1053
- class="Calendar-valueWrapper"
1054
- data-test="designSystem-Calendar-WrapperClass"
1055
- >
1056
- <span
1057
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
1058
- data-test="DesignSystem-Calendar--dateValue"
1059
- >
1060
- 26
1061
- </span>
1062
- </div>
1063
- <div
1064
- class="Calendar-valueWrapper"
1065
- data-test="designSystem-Calendar-WrapperClass"
1066
- >
1067
- <span
1068
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
1069
- data-test="DesignSystem-Calendar--dateValue"
1070
- >
1071
- 27
1072
- </span>
1073
- </div>
1074
- <div
1075
- class="Calendar-valueWrapper"
1076
- data-test="designSystem-Calendar-WrapperClass"
1077
- >
1078
- <span
1079
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
1080
- data-test="DesignSystem-Calendar--dateValue"
1081
- >
1082
- 28
1083
- </span>
1084
- </div>
1085
- </div>
1086
- <div
1087
- class="Calendar-valueRow"
1088
- >
1089
- <div
1090
- class="Calendar-valueWrapper"
1091
- data-test="designSystem-Calendar-WrapperClass"
1092
- >
1093
- <span
1094
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
1095
- data-test="DesignSystem-Calendar--dateValue"
1096
- >
1097
- 29
1098
- </span>
1099
- </div>
1100
- <div
1101
- class="Calendar-valueWrapper"
1102
- data-test="designSystem-Calendar-WrapperClass"
1103
- >
1104
- <span
1105
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
1106
- data-test="DesignSystem-Calendar--dateValue"
1107
- >
1108
- 30
1109
- </span>
1110
- </div>
1111
- <div
1112
- class="Calendar-valueWrapper"
1113
- data-test="designSystem-Calendar-WrapperClass"
1114
- >
1115
- <span
1116
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
1117
- data-test="DesignSystem-Calendar--dateValue"
1118
- >
1119
- 31
1120
- </span>
1121
- </div>
1122
- <div
1123
- class="Calendar-valueWrapper"
1124
- data-test="designSystem-Calendar-WrapperClass"
1125
- />
1126
- <div
1127
- class="Calendar-valueWrapper"
1128
- data-test="designSystem-Calendar-WrapperClass"
1129
- />
1130
- <div
1131
- class="Calendar-valueWrapper"
1132
- data-test="designSystem-Calendar-WrapperClass"
1133
- />
1134
- <div
1135
- class="Calendar-valueWrapper"
1136
- data-test="designSystem-Calendar-WrapperClass"
1137
- />
1138
- </div>
1139
- </div>
1140
- </div>
1141
- </div>
1142
- </div>
1143
- </div>
1144
- </body>
1145
- `;
1146
-
1147
- exports[`DatePicker component
1148
- view: "month"
1149
- 1`] = `
1150
- <body>
1151
- <div>
1152
- <div
1153
- class="Calendar-wrapper"
1154
- data-test="DesignSystem-Calendar-Wrapper"
1155
- >
1156
- <div
1157
- class="Calendar Calendar--month Calendar--large"
1158
- data-test="DesignSystem-Calendar"
1159
- >
1160
- <div
1161
- class="Calendar-header"
1162
- >
1163
- <button
1164
- class="Button Button--regular Button--regularSquare Button--transparent Calendar-headerIcon Calendar-headerIcon--prev"
1165
- data-test="DesignSystem-Button"
1166
- tabindex="0"
1167
- type="button"
1168
- >
1169
- <div
1170
- class="Button-icon"
1171
- >
1172
- <i
1173
- class="material-icons material-icons-round Icon Icon--default"
1174
- data-test="DesignSystem-Button--Icon"
1175
- style="font-size: 16px; width: 16px;"
1176
- >
1177
- arrow_back_round
1178
- </i>
1179
- </div>
1180
- </button>
1181
- <div
1182
- class="Calendar-headerContent Calendar-headerContent--noIcon-left Calendar-headerContent--noIcon-right"
1183
- >
1184
- <span>
1185
- <h5
1186
- class="Heading Heading--s Heading--default"
1187
- data-test="DesignSystem-Heading"
1188
- >
1189
- 2020
1190
- </h5>
1191
- </span>
1192
- </div>
1193
- <button
1194
- class="Button Button--regular Button--regularSquare Button--transparent Calendar-headerIcon Calendar-headerIcon--next"
1195
- data-test="DesignSystem-Button"
1196
- tabindex="0"
1197
- type="button"
1198
- >
1199
- <div
1200
- class="Button-icon"
1201
- >
1202
- <i
1203
- class="material-icons material-icons-round Icon Icon--default"
1204
- data-test="DesignSystem-Button--Icon"
1205
- style="font-size: 16px; width: 16px;"
1206
- >
1207
- arrow_forward_round
1208
- </i>
1209
- </div>
1210
- </button>
1211
- </div>
1212
- <div
1213
- class="Calendar-body"
1214
- >
1215
- <div
1216
- class="Calendar-valueRow"
1217
- >
1218
- <div
1219
- class="Calendar-value Calendar-monthValue Calendar-monthValue--large"
1220
- data-test="DesignSystem-Calendar--monthValue"
1221
- >
1222
- <span
1223
- class="Text Text--default Text--regular"
1224
- data-test="DesignSystem-Text"
1225
- >
1226
- Jan
1227
- </span>
1228
- </div>
1229
- <div
1230
- class="Calendar-value Calendar-monthValue Calendar-monthValue--large"
1231
- data-test="DesignSystem-Calendar--monthValue"
1232
- >
1233
- <span
1234
- class="Text Text--default Text--regular"
1235
- data-test="DesignSystem-Text"
1236
- >
1237
- Feb
1238
- </span>
1239
- </div>
1240
- <div
1241
- class="Calendar-value Calendar-value--active Calendar-monthValue Calendar-monthValue--large"
1242
- data-test="DesignSystem-Calendar--monthValue"
1243
- >
1244
- <span
1245
- class="Text Text--white Text--regular"
1246
- data-test="DesignSystem-Text"
1247
- >
1248
- Mar
1249
- </span>
1250
- </div>
1251
- </div>
1252
- <div
1253
- class="Calendar-valueRow"
1254
- >
1255
- <div
1256
- class="Calendar-value Calendar-monthValue Calendar-monthValue--large"
1257
- data-test="DesignSystem-Calendar--monthValue"
1258
- >
1259
- <span
1260
- class="Text Text--default Text--regular"
1261
- data-test="DesignSystem-Text"
1262
- >
1263
- Apr
1264
- </span>
1265
- </div>
1266
- <div
1267
- class="Calendar-value Calendar-monthValue Calendar-monthValue--large"
1268
- data-test="DesignSystem-Calendar--monthValue"
1269
- >
1270
- <span
1271
- class="Text Text--default Text--regular"
1272
- data-test="DesignSystem-Text"
1273
- >
1274
- May
1275
- </span>
1276
- </div>
1277
- <div
1278
- class="Calendar-value Calendar-monthValue Calendar-monthValue--large"
1279
- data-test="DesignSystem-Calendar--monthValue"
1280
- >
1281
- <span
1282
- class="Text Text--default Text--regular"
1283
- data-test="DesignSystem-Text"
1284
- >
1285
- Jun
1286
- </span>
1287
- </div>
1288
- </div>
1289
- <div
1290
- class="Calendar-valueRow"
1291
- >
1292
- <div
1293
- class="Calendar-value Calendar-monthValue Calendar-monthValue--large"
1294
- data-test="DesignSystem-Calendar--monthValue"
1295
- >
1296
- <span
1297
- class="Text Text--default Text--regular"
1298
- data-test="DesignSystem-Text"
1299
- >
1300
- Jul
1301
- </span>
1302
- </div>
1303
- <div
1304
- class="Calendar-value Calendar-monthValue Calendar-monthValue--large"
1305
- data-test="DesignSystem-Calendar--monthValue"
1306
- >
1307
- <span
1308
- class="Text Text--default Text--regular"
1309
- data-test="DesignSystem-Text"
1310
- >
1311
- Aug
1312
- </span>
1313
- </div>
1314
- <div
1315
- class="Calendar-value Calendar-monthValue Calendar-monthValue--large"
1316
- data-test="DesignSystem-Calendar--monthValue"
1317
- >
1318
- <span
1319
- class="Text Text--default Text--regular"
1320
- data-test="DesignSystem-Text"
1321
- >
1322
- Sep
1323
- </span>
1324
- </div>
1325
- </div>
1326
- <div
1327
- class="Calendar-valueRow"
1328
- >
1329
- <div
1330
- class="Calendar-value Calendar-monthValue Calendar-monthValue--large"
1331
- data-test="DesignSystem-Calendar--monthValue"
1332
- >
1333
- <span
1334
- class="Text Text--default Text--regular"
1335
- data-test="DesignSystem-Text"
1336
- >
1337
- Oct
1338
- </span>
1339
- </div>
1340
- <div
1341
- class="Calendar-value Calendar-monthValue Calendar-monthValue--large"
1342
- data-test="DesignSystem-Calendar--monthValue"
1343
- >
1344
- <span
1345
- class="Text Text--default Text--regular"
1346
- data-test="DesignSystem-Text"
1347
- >
1348
- Nov
1349
- </span>
1350
- </div>
1351
- <div
1352
- class="Calendar-value Calendar-monthValue Calendar-monthValue--large"
1353
- data-test="DesignSystem-Calendar--monthValue"
1354
- >
1355
- <span
1356
- class="Text Text--default Text--regular"
1357
- data-test="DesignSystem-Text"
1358
- >
1359
- Dec
1360
- </span>
1361
- </div>
1362
- </div>
1363
- </div>
1364
- </div>
1365
- </div>
1366
- </div>
1367
- </body>
1368
- `;
1369
-
1370
- exports[`DatePicker component
1371
- view: "year"
1372
- 1`] = `
1373
- <body>
1374
- <div>
1375
- <div
1376
- class="Calendar-wrapper"
1377
- data-test="DesignSystem-Calendar-Wrapper"
1378
- >
1379
- <div
1380
- class="Calendar Calendar--year Calendar--large"
1381
- data-test="DesignSystem-Calendar"
1382
- >
1383
- <div
1384
- class="Calendar-header"
1385
- >
1386
- <button
1387
- class="Button Button--regular Button--regularSquare Button--transparent Calendar-headerIcon Calendar-headerIcon--prev"
1388
- data-test="DesignSystem-Button"
1389
- tabindex="0"
1390
- type="button"
1391
- >
1392
- <div
1393
- class="Button-icon"
1394
- >
1395
- <i
1396
- class="material-icons material-icons-round Icon Icon--default"
1397
- data-test="DesignSystem-Button--Icon"
1398
- style="font-size: 16px; width: 16px;"
1399
- >
1400
- arrow_back_round
1401
- </i>
1402
- </div>
1403
- </button>
1404
- <div
1405
- class="Calendar-headerContent Calendar-headerContent--noIcon-left Calendar-headerContent--noIcon-right"
1406
- >
1407
- <span>
1408
- <h5
1409
- class="Heading Heading--s Heading--default"
1410
- data-test="DesignSystem-Heading"
1411
- >
1412
- 2016 - 2027
1413
- </h5>
1414
- </span>
1415
- </div>
1416
- <button
1417
- class="Button Button--regular Button--regularSquare Button--transparent Calendar-headerIcon Calendar-headerIcon--next"
1418
- data-test="DesignSystem-Button"
1419
- tabindex="0"
1420
- type="button"
1421
- >
1422
- <div
1423
- class="Button-icon"
1424
- >
1425
- <i
1426
- class="material-icons material-icons-round Icon Icon--default"
1427
- data-test="DesignSystem-Button--Icon"
1428
- style="font-size: 16px; width: 16px;"
1429
- >
1430
- arrow_forward_round
1431
- </i>
1432
- </div>
1433
- </button>
1434
- </div>
1435
- <div
1436
- class="Calendar-body"
1437
- >
1438
- <div
1439
- class="Calendar-valueRow"
1440
- >
1441
- <div
1442
- class="Calendar-value Calendar-yearValue Calendar-yearValue--large"
1443
- data-test="DesignSystem-Calendar--yearValue"
1444
- >
1445
- <span
1446
- class="Text Text--default Text--regular"
1447
- data-test="DesignSystem-Text"
1448
- >
1449
- 2016
1450
- </span>
1451
- </div>
1452
- <div
1453
- class="Calendar-value Calendar-yearValue Calendar-yearValue--large"
1454
- data-test="DesignSystem-Calendar--yearValue"
1455
- >
1456
- <span
1457
- class="Text Text--default Text--regular"
1458
- data-test="DesignSystem-Text"
1459
- >
1460
- 2017
1461
- </span>
1462
- </div>
1463
- <div
1464
- class="Calendar-value Calendar-yearValue Calendar-yearValue--large"
1465
- data-test="DesignSystem-Calendar--yearValue"
1466
- >
1467
- <span
1468
- class="Text Text--default Text--regular"
1469
- data-test="DesignSystem-Text"
1470
- >
1471
- 2018
1472
- </span>
1473
- </div>
1474
- </div>
1475
- <div
1476
- class="Calendar-valueRow"
1477
- >
1478
- <div
1479
- class="Calendar-value Calendar-yearValue Calendar-yearValue--large"
1480
- data-test="DesignSystem-Calendar--yearValue"
1481
- >
1482
- <span
1483
- class="Text Text--default Text--regular"
1484
- data-test="DesignSystem-Text"
1485
- >
1486
- 2019
1487
- </span>
1488
- </div>
1489
- <div
1490
- class="Calendar-value Calendar-value--active Calendar-yearValue Calendar-yearValue--large"
1491
- data-test="DesignSystem-Calendar--yearValue"
1492
- >
1493
- <span
1494
- class="Text Text--white Text--regular"
1495
- data-test="DesignSystem-Text"
1496
- >
1497
- 2020
1498
- </span>
1499
- </div>
1500
- <div
1501
- class="Calendar-value Calendar-yearValue Calendar-yearValue--large"
1502
- data-test="DesignSystem-Calendar--yearValue"
1503
- >
1504
- <span
1505
- class="Text Text--default Text--regular"
1506
- data-test="DesignSystem-Text"
1507
- >
1508
- 2021
1509
- </span>
1510
- </div>
1511
- </div>
1512
- <div
1513
- class="Calendar-valueRow"
1514
- >
1515
- <div
1516
- class="Calendar-value Calendar-yearValue Calendar-yearValue--large"
1517
- data-test="DesignSystem-Calendar--yearValue"
1518
- >
1519
- <span
1520
- class="Text Text--default Text--regular"
1521
- data-test="DesignSystem-Text"
1522
- >
1523
- 2022
1524
- </span>
1525
- </div>
1526
- <div
1527
- class="Calendar-value Calendar-yearValue Calendar-yearValue--large"
1528
- data-test="DesignSystem-Calendar--yearValue"
1529
- >
1530
- <span
1531
- class="Text Text--default Text--regular"
1532
- data-test="DesignSystem-Text"
1533
- >
1534
- 2023
1535
- </span>
1536
- </div>
1537
- <div
1538
- class="Calendar-value Calendar-yearValue Calendar-yearValue--large"
1539
- data-test="DesignSystem-Calendar--yearValue"
1540
- >
1541
- <span
1542
- class="Text Text--default Text--regular"
1543
- data-test="DesignSystem-Text"
1544
- >
1545
- 2024
1546
- </span>
1547
- </div>
1548
- </div>
1549
- <div
1550
- class="Calendar-valueRow"
1551
- >
1552
- <div
1553
- class="Calendar-value Calendar-yearValue Calendar-yearValue--large"
1554
- data-test="DesignSystem-Calendar--yearValue"
1555
- >
1556
- <span
1557
- class="Text Text--default Text--regular"
1558
- data-test="DesignSystem-Text"
1559
- >
1560
- 2025
1561
- </span>
1562
- </div>
1563
- <div
1564
- class="Calendar-value Calendar-yearValue Calendar-yearValue--large"
1565
- data-test="DesignSystem-Calendar--yearValue"
1566
- >
1567
- <span
1568
- class="Text Text--default Text--regular"
1569
- data-test="DesignSystem-Text"
1570
- >
1571
- 2026
1572
- </span>
1573
- </div>
1574
- <div
1575
- class="Calendar-value Calendar-yearValue Calendar-yearValue--large"
1576
- data-test="DesignSystem-Calendar--yearValue"
1577
- >
1578
- <span
1579
- class="Text Text--default Text--regular"
1580
- data-test="DesignSystem-Text"
1581
- >
1582
- 2027
1583
- </span>
1584
- </div>
1585
- </div>
1586
- </div>
1587
- </div>
1588
- </div>
1589
- </div>
1590
- </body>
1591
- `;
1592
-
1593
- exports[`DatePicker component
1594
- withInput: false
1595
- 1`] = `
1596
- <body>
1597
- <div>
1598
- <div
1599
- class="Calendar-wrapper"
1600
- data-test="DesignSystem-Calendar-Wrapper"
1601
- >
1602
- <div
1603
- class="Calendar Calendar--date Calendar--large"
1604
- data-test="DesignSystem-Calendar"
1605
- >
1606
- <div
1607
- class="Calendar-header"
1608
- >
1609
- <button
1610
- class="Button Button--regular Button--regularSquare Button--transparent Calendar-headerIcon Calendar-headerIcon--prev"
1611
- data-test="DesignSystem-Button"
1612
- tabindex="0"
1613
- type="button"
1614
- >
1615
- <div
1616
- class="Button-icon"
1617
- >
1618
- <i
1619
- class="material-icons material-icons-round Icon Icon--default"
1620
- data-test="DesignSystem-Button--Icon"
1621
- style="font-size: 16px; width: 16px;"
1622
- >
1623
- arrow_back_round
1624
- </i>
1625
- </div>
1626
- </button>
1627
- <div
1628
- class="Calendar-headerContent Calendar-headerContent--noIcon-left Calendar-headerContent--noIcon-right"
1629
- >
1630
- <span>
1631
- <h5
1632
- class="Heading Heading--s Heading--default"
1633
- data-test="DesignSystem-Heading"
1634
- >
1635
- Mar
1636
- </h5>
1637
- </span>
1638
- <span
1639
- class="ml-4"
1640
- >
1641
- <h5
1642
- class="Heading Heading--s Heading--default"
1643
- data-test="DesignSystem-Heading"
1644
- >
1645
- 2020
1646
- </h5>
1647
- </span>
1648
- </div>
1649
- <button
1650
- class="Button Button--regular Button--regularSquare Button--transparent Calendar-headerIcon Calendar-headerIcon--next"
1651
- data-test="DesignSystem-Button"
1652
- tabindex="0"
1653
- type="button"
1654
- >
1655
- <div
1656
- class="Button-icon"
1657
- >
1658
- <i
1659
- class="material-icons material-icons-round Icon Icon--default"
1660
- data-test="DesignSystem-Button--Icon"
1661
- style="font-size: 16px; width: 16px;"
1662
- >
1663
- arrow_forward_round
1664
- </i>
1665
- </div>
1666
- </button>
1667
- </div>
1668
- <div
1669
- class="Calendar-body"
1670
- >
1671
- <div
1672
- class="Calendar-dayValues"
1673
- >
1674
- <h4
1675
- class="Subheading Subheading--disabled Calendar-valueWrapper"
1676
- data-test="DesignSystem-Subheading"
1677
- >
1678
- Sun
1679
- </h4>
1680
- <h4
1681
- class="Subheading Subheading--disabled Calendar-valueWrapper"
1682
- data-test="DesignSystem-Subheading"
1683
- >
1684
- Mon
1685
- </h4>
1686
- <h4
1687
- class="Subheading Subheading--disabled Calendar-valueWrapper"
1688
- data-test="DesignSystem-Subheading"
1689
- >
1690
- Tue
1691
- </h4>
1692
- <h4
1693
- class="Subheading Subheading--disabled Calendar-valueWrapper"
1694
- data-test="DesignSystem-Subheading"
1695
- >
1696
- Wed
1697
- </h4>
1698
- <h4
1699
- class="Subheading Subheading--disabled Calendar-valueWrapper"
1700
- data-test="DesignSystem-Subheading"
1701
- >
1702
- Thu
1703
- </h4>
1704
- <h4
1705
- class="Subheading Subheading--disabled Calendar-valueWrapper"
1706
- data-test="DesignSystem-Subheading"
1707
- >
1708
- Fri
1709
- </h4>
1710
- <h4
1711
- class="Subheading Subheading--disabled Calendar-valueWrapper"
1712
- data-test="DesignSystem-Subheading"
1713
- >
1714
- Sat
1715
- </h4>
1716
- </div>
1717
- <div
1718
- class="Calendar-dateValues"
1719
- >
1720
- <div
1721
- class="Calendar-valueRow"
1722
- >
1723
- <div
1724
- class="Calendar-valueWrapper"
1725
- data-test="designSystem-Calendar-WrapperClass"
1726
- >
1727
- <span
1728
- class="Text Text--white Text--regular Calendar-value Calendar-value--active Calendar-dateValue Calendar-dateValue--large"
1729
- data-test="DesignSystem-Calendar--dateValue"
1730
- >
1731
- 1
1732
- </span>
1733
- </div>
1734
- <div
1735
- class="Calendar-valueWrapper"
1736
- data-test="designSystem-Calendar-WrapperClass"
1737
- >
1738
- <span
1739
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
1740
- data-test="DesignSystem-Calendar--dateValue"
1741
- >
1742
- 2
1743
- </span>
1744
- </div>
1745
- <div
1746
- class="Calendar-valueWrapper"
1747
- data-test="designSystem-Calendar-WrapperClass"
1748
- >
1749
- <span
1750
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
1751
- data-test="DesignSystem-Calendar--dateValue"
1752
- >
1753
- 3
1754
- </span>
1755
- </div>
1756
- <div
1757
- class="Calendar-valueWrapper"
1758
- data-test="designSystem-Calendar-WrapperClass"
1759
- >
1760
- <span
1761
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
1762
- data-test="DesignSystem-Calendar--dateValue"
1763
- >
1764
- 4
1765
- </span>
1766
- </div>
1767
- <div
1768
- class="Calendar-valueWrapper"
1769
- data-test="designSystem-Calendar-WrapperClass"
1770
- >
1771
- <span
1772
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
1773
- data-test="DesignSystem-Calendar--dateValue"
1774
- >
1775
- 5
1776
- </span>
1777
- </div>
1778
- <div
1779
- class="Calendar-valueWrapper"
1780
- data-test="designSystem-Calendar-WrapperClass"
1781
- >
1782
- <span
1783
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
1784
- data-test="DesignSystem-Calendar--dateValue"
1785
- >
1786
- 6
1787
- </span>
1788
- </div>
1789
- <div
1790
- class="Calendar-valueWrapper"
1791
- data-test="designSystem-Calendar-WrapperClass"
1792
- >
1793
- <span
1794
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
1795
- data-test="DesignSystem-Calendar--dateValue"
1796
- >
1797
- 7
1798
- </span>
1799
- </div>
1800
- </div>
1801
- <div
1802
- class="Calendar-valueRow"
1803
- >
1804
- <div
1805
- class="Calendar-valueWrapper"
1806
- data-test="designSystem-Calendar-WrapperClass"
1807
- >
1808
- <span
1809
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
1810
- data-test="DesignSystem-Calendar--dateValue"
1811
- >
1812
- 8
1813
- </span>
1814
- </div>
1815
- <div
1816
- class="Calendar-valueWrapper"
1817
- data-test="designSystem-Calendar-WrapperClass"
1818
- >
1819
- <span
1820
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
1821
- data-test="DesignSystem-Calendar--dateValue"
1822
- >
1823
- 9
1824
- </span>
1825
- </div>
1826
- <div
1827
- class="Calendar-valueWrapper"
1828
- data-test="designSystem-Calendar-WrapperClass"
1829
- >
1830
- <span
1831
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
1832
- data-test="DesignSystem-Calendar--dateValue"
1833
- >
1834
- 10
1835
- </span>
1836
- </div>
1837
- <div
1838
- class="Calendar-valueWrapper"
1839
- data-test="designSystem-Calendar-WrapperClass"
1840
- >
1841
- <span
1842
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
1843
- data-test="DesignSystem-Calendar--dateValue"
1844
- >
1845
- 11
1846
- </span>
1847
- </div>
1848
- <div
1849
- class="Calendar-valueWrapper"
1850
- data-test="designSystem-Calendar-WrapperClass"
1851
- >
1852
- <span
1853
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
1854
- data-test="DesignSystem-Calendar--dateValue"
1855
- >
1856
- 12
1857
- </span>
1858
- </div>
1859
- <div
1860
- class="Calendar-valueWrapper"
1861
- data-test="designSystem-Calendar-WrapperClass"
1862
- >
1863
- <span
1864
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
1865
- data-test="DesignSystem-Calendar--dateValue"
1866
- >
1867
- 13
1868
- </span>
1869
- </div>
1870
- <div
1871
- class="Calendar-valueWrapper"
1872
- data-test="designSystem-Calendar-WrapperClass"
1873
- >
1874
- <span
1875
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
1876
- data-test="DesignSystem-Calendar--dateValue"
1877
- >
1878
- 14
1879
- </span>
1880
- </div>
1881
- </div>
1882
- <div
1883
- class="Calendar-valueRow"
1884
- >
1885
- <div
1886
- class="Calendar-valueWrapper"
1887
- data-test="designSystem-Calendar-WrapperClass"
1888
- >
1889
- <span
1890
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
1891
- data-test="DesignSystem-Calendar--dateValue"
1892
- >
1893
- 15
1894
- </span>
1895
- </div>
1896
- <div
1897
- class="Calendar-valueWrapper"
1898
- data-test="designSystem-Calendar-WrapperClass"
1899
- >
1900
- <span
1901
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
1902
- data-test="DesignSystem-Calendar--dateValue"
1903
- >
1904
- 16
1905
- </span>
1906
- </div>
1907
- <div
1908
- class="Calendar-valueWrapper"
1909
- data-test="designSystem-Calendar-WrapperClass"
1910
- >
1911
- <span
1912
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
1913
- data-test="DesignSystem-Calendar--dateValue"
1914
- >
1915
- 17
1916
- </span>
1917
- </div>
1918
- <div
1919
- class="Calendar-valueWrapper"
1920
- data-test="designSystem-Calendar-WrapperClass"
1921
- >
1922
- <span
1923
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
1924
- data-test="DesignSystem-Calendar--dateValue"
1925
- >
1926
- 18
1927
- </span>
1928
- </div>
1929
- <div
1930
- class="Calendar-valueWrapper"
1931
- data-test="designSystem-Calendar-WrapperClass"
1932
- >
1933
- <span
1934
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
1935
- data-test="DesignSystem-Calendar--dateValue"
1936
- >
1937
- 19
1938
- </span>
1939
- </div>
1940
- <div
1941
- class="Calendar-valueWrapper"
1942
- data-test="designSystem-Calendar-WrapperClass"
1943
- >
1944
- <span
1945
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
1946
- data-test="DesignSystem-Calendar--dateValue"
1947
- >
1948
- 20
1949
- </span>
1950
- </div>
1951
- <div
1952
- class="Calendar-valueWrapper"
1953
- data-test="designSystem-Calendar-WrapperClass"
1954
- >
1955
- <span
1956
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
1957
- data-test="DesignSystem-Calendar--dateValue"
1958
- >
1959
- 21
1960
- </span>
1961
- </div>
1962
- </div>
1963
- <div
1964
- class="Calendar-valueRow"
1965
- >
1966
- <div
1967
- class="Calendar-valueWrapper"
1968
- data-test="designSystem-Calendar-WrapperClass"
1969
- >
1970
- <span
1971
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
1972
- data-test="DesignSystem-Calendar--dateValue"
1973
- >
1974
- 22
1975
- </span>
1976
- </div>
1977
- <div
1978
- class="Calendar-valueWrapper"
1979
- data-test="designSystem-Calendar-WrapperClass"
1980
- >
1981
- <span
1982
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
1983
- data-test="DesignSystem-Calendar--dateValue"
1984
- >
1985
- 23
1986
- </span>
1987
- </div>
1988
- <div
1989
- class="Calendar-valueWrapper"
1990
- data-test="designSystem-Calendar-WrapperClass"
1991
- >
1992
- <span
1993
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
1994
- data-test="DesignSystem-Calendar--dateValue"
1995
- >
1996
- 24
1997
- </span>
1998
- </div>
1999
- <div
2000
- class="Calendar-valueWrapper"
2001
- data-test="designSystem-Calendar-WrapperClass"
2002
- >
2003
- <span
2004
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
2005
- data-test="DesignSystem-Calendar--dateValue"
2006
- >
2007
- 25
2008
- </span>
2009
- </div>
2010
- <div
2011
- class="Calendar-valueWrapper"
2012
- data-test="designSystem-Calendar-WrapperClass"
2013
- >
2014
- <span
2015
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
2016
- data-test="DesignSystem-Calendar--dateValue"
2017
- >
2018
- 26
2019
- </span>
2020
- </div>
2021
- <div
2022
- class="Calendar-valueWrapper"
2023
- data-test="designSystem-Calendar-WrapperClass"
2024
- >
2025
- <span
2026
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
2027
- data-test="DesignSystem-Calendar--dateValue"
2028
- >
2029
- 27
2030
- </span>
2031
- </div>
2032
- <div
2033
- class="Calendar-valueWrapper"
2034
- data-test="designSystem-Calendar-WrapperClass"
2035
- >
2036
- <span
2037
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
2038
- data-test="DesignSystem-Calendar--dateValue"
2039
- >
2040
- 28
2041
- </span>
2042
- </div>
2043
- </div>
2044
- <div
2045
- class="Calendar-valueRow"
2046
- >
2047
- <div
2048
- class="Calendar-valueWrapper"
2049
- data-test="designSystem-Calendar-WrapperClass"
2050
- >
2051
- <span
2052
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
2053
- data-test="DesignSystem-Calendar--dateValue"
2054
- >
2055
- 29
2056
- </span>
2057
- </div>
2058
- <div
2059
- class="Calendar-valueWrapper"
2060
- data-test="designSystem-Calendar-WrapperClass"
2061
- >
2062
- <span
2063
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
2064
- data-test="DesignSystem-Calendar--dateValue"
2065
- >
2066
- 30
2067
- </span>
2068
- </div>
2069
- <div
2070
- class="Calendar-valueWrapper"
2071
- data-test="designSystem-Calendar-WrapperClass"
2072
- >
2073
- <span
2074
- class="Text Text--default Text--regular Calendar-value Calendar-dateValue Calendar-dateValue--large"
2075
- data-test="DesignSystem-Calendar--dateValue"
2076
- >
2077
- 31
2078
- </span>
2079
- </div>
2080
- <div
2081
- class="Calendar-valueWrapper"
2082
- data-test="designSystem-Calendar-WrapperClass"
2083
- />
2084
- <div
2085
- class="Calendar-valueWrapper"
2086
- data-test="designSystem-Calendar-WrapperClass"
2087
- />
2088
- <div
2089
- class="Calendar-valueWrapper"
2090
- data-test="designSystem-Calendar-WrapperClass"
2091
- />
2092
- <div
2093
- class="Calendar-valueWrapper"
2094
- data-test="designSystem-Calendar-WrapperClass"
2095
- />
2096
- </div>
2097
- </div>
2098
- </div>
2099
- </div>
2100
- </div>
2101
- </div>
2102
- </body>
2103
- `;
2104
-
2105
- exports[`DatePicker component
2106
- withInput: true
2107
- 1`] = `
2108
- <body>
2109
- <div>
2110
- <div
2111
- class="OutsideClick PopperWrapper-trigger w-100"
2112
- >
2113
- <div
2114
- class="d-flex flex-column flex-grow-1"
2115
- >
2116
- <div
2117
- class="Input Input--regular"
2118
- data-test="DesignSystem-InputWrapper"
2119
- style="min-width: 256px;"
2120
- >
2121
- <div
2122
- class="Input-icon Input-icon--left"
2123
- >
2124
- <i
2125
- class="material-icons material-icons-round Icon"
2126
- style="font-size: 16px; width: 16px;"
2127
- >
2128
- events_round
2129
- </i>
2130
- </div>
2131
- <input
2132
- autocomplete="off"
2133
- class="Input-input Input-input--regular"
2134
- data-test="DesignSystem-Input"
2135
- placeholder="mm/dd/yyyy"
2136
- type="text"
2137
- value="03/01/2020"
2138
- />
2139
- <div
2140
- class="Input-icon Input-icon--right"
2141
- data-test="DesignSystem-Input--closeIcon"
2142
- >
2143
- <i
2144
- class="material-icons material-icons-round Icon"
2145
- style="font-size: 16px; width: 16px;"
2146
- >
2147
- close_round
2148
- </i>
2149
- </div>
2150
- </div>
2151
- <div
2152
- class="Caption Caption--hidden Caption--withInput"
2153
- data-test="DesignSystem-Caption"
2154
- >
2155
- <span
2156
- class="Text Text--subtle Text--medium Text--small"
2157
- data-test="DesignSystem-Text"
2158
- />
2159
- </div>
2160
- </div>
2161
- </div>
2162
- </div>
2163
- </body>
2164
- `;