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