@zohodesk/components 1.0.0-temp-259.1 → 1.0.0-temp-260

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 (37) hide show
  1. package/README.md +21 -3
  2. package/assets/Appearance/dark/mode/Component_v1_DarkMode.module.css +20 -5
  3. package/assets/Appearance/light/mode/Component_v1_LightMode.module.css +20 -5
  4. package/assets/Appearance/pureDark/mode/Component_v1_PureDarkMode.module.css +20 -5
  5. package/es/AdvancedPopup/AdvancedPopup.js +105 -0
  6. package/es/v1/Button/Button.js +107 -159
  7. package/es/v1/Button/README.md +2 -3
  8. package/es/v1/Button/__tests__/Button.spec.js +6 -14
  9. package/es/v1/Button/__tests__/__snapshots__/Button.spec.js.snap +169 -249
  10. package/es/v1/Button/constants/index.js +20 -26
  11. package/es/v1/Button/css/Button_v1.module.css +16 -37
  12. package/es/v1/Button/css/cssJSLogic.js +28 -47
  13. package/es/v1/Button/props/defaultProps.js +6 -5
  14. package/es/v1/Button/props/propTypes.js +8 -26
  15. package/es/v1/helpers/colorHelpers/background/backgroundColor.module.css +40 -40
  16. package/es/v1/helpers/colorHelpers/border/borderColor.module.css +25 -25
  17. package/es/v1/helpers/colorHelpers/colorHelper.js +138 -114
  18. package/es/v1/helpers/colorHelpers/constants/index.js +4 -45
  19. package/es/v1/helpers/colorHelpers/text/textColor.module.css +35 -35
  20. package/lib/AdvancedPopup/AdvancedPopup.js +122 -0
  21. package/lib/v1/Button/Button.js +119 -178
  22. package/lib/v1/Button/README.md +2 -3
  23. package/lib/v1/Button/__tests__/Button.spec.js +52 -66
  24. package/lib/v1/Button/__tests__/__snapshots__/Button.spec.js.snap +169 -249
  25. package/lib/v1/Button/constants/index.js +28 -31
  26. package/lib/v1/Button/css/Button_v1.module.css +16 -37
  27. package/lib/v1/Button/css/cssJSLogic.js +19 -32
  28. package/lib/v1/Button/props/defaultProps.js +5 -4
  29. package/lib/v1/Button/props/propTypes.js +7 -41
  30. package/lib/v1/helpers/colorHelpers/background/backgroundColor.module.css +40 -40
  31. package/lib/v1/helpers/colorHelpers/border/borderColor.module.css +25 -25
  32. package/lib/v1/helpers/colorHelpers/colorHelper.js +153 -125
  33. package/lib/v1/helpers/colorHelpers/constants/index.js +4 -45
  34. package/lib/v1/helpers/colorHelpers/text/textColor.module.css +35 -35
  35. package/package.json +10 -10
  36. package/es/v1/Button/constants/presets.js +0 -158
  37. package/lib/v1/Button/constants/presets.js +0 -176
package/es/v1/Button/__tests__/__snapshots__/Button.spec.js.snap CHANGED
@@ -5,9 +5,11 @@ exports[`Button - Component Should apply a11yAttributes to the button 1`] = `
5
5
  <button
6
6
  aria-busy="false"
7
7
  aria-describedby="button-description"
8
+ aria-disabled="false"
8
9
  aria-label="Smart Button"
9
10
  aria-pressed="false"
10
- class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
11
+ aria-readonly="false"
12
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
11
13
  type="button"
12
14
  >
13
15
  <div
@@ -29,8 +31,10 @@ exports[`Button - Component Should apply customClass to wrapper, text and icon 1
29
31
  <DocumentFragment>
30
32
  <button
31
33
  aria-busy="false"
34
+ aria-disabled="false"
32
35
  aria-pressed="false"
33
- class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantIconWithText customButtonClass"
36
+ aria-readonly="false"
37
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle customButtonClass"
34
38
  type="button"
35
39
  >
36
40
  <div
@@ -59,8 +63,10 @@ exports[`Button - Component Should apply customProps to wrapper, text and icon 1
59
63
  <DocumentFragment>
60
64
  <button
61
65
  aria-busy="false"
66
+ aria-disabled="false"
62
67
  aria-pressed="false"
63
- class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantIconWithText"
68
+ aria-readonly="false"
69
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
64
70
  type="button"
65
71
  >
66
72
  <div
@@ -82,11 +88,10 @@ exports[`Button - Component Should be disabled when isDisabled prop is true 1`]
82
88
  <DocumentFragment>
83
89
  <button
84
90
  aria-busy="false"
91
+ aria-disabled="true"
85
92
  aria-pressed="false"
86
- class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle variantText disabledOpac disabledPointer"
87
- data-id="undefined_disabled"
88
- data-test-id="undefined_disabled"
89
- disabled=""
93
+ aria-readonly="false"
94
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle disabledOpac disabledPointer"
90
95
  type="button"
91
96
  >
92
97
  <div
@@ -102,8 +107,10 @@ exports[`Button - Component Should render Sizes of buttons - full 1`] = `
102
107
  <DocumentFragment>
103
108
  <button
104
109
  aria-busy="false"
110
+ aria-disabled="false"
105
111
  aria-pressed="false"
106
- class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeFull shapeRoundedRectangle variantText"
112
+ aria-readonly="false"
113
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeFull shapeRoundedRectangle"
107
114
  type="button"
108
115
  >
109
116
  <div
@@ -119,8 +126,10 @@ exports[`Button - Component Should render Sizes of buttons - large 1`] = `
119
126
  <DocumentFragment>
120
127
  <button
121
128
  aria-busy="false"
129
+ aria-disabled="false"
122
130
  aria-pressed="false"
123
- class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeLarge shapeRoundedRectangle variantText"
131
+ aria-readonly="false"
132
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeLarge shapeRoundedRectangle"
124
133
  type="button"
125
134
  >
126
135
  <div
@@ -136,8 +145,10 @@ exports[`Button - Component Should render Sizes of buttons - medium 1`] = `
136
145
  <DocumentFragment>
137
146
  <button
138
147
  aria-busy="false"
148
+ aria-disabled="false"
139
149
  aria-pressed="false"
140
- class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
150
+ aria-readonly="false"
151
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
141
152
  type="button"
142
153
  >
143
154
  <div
@@ -153,8 +164,10 @@ exports[`Button - Component Should render Sizes of buttons - small 1`] = `
153
164
  <DocumentFragment>
154
165
  <button
155
166
  aria-busy="false"
167
+ aria-disabled="false"
156
168
  aria-pressed="false"
157
- class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeSmall shapeRoundedRectangle variantText"
169
+ aria-readonly="false"
170
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeSmall shapeRoundedRectangle"
158
171
  type="button"
159
172
  >
160
173
  <div
@@ -170,8 +183,10 @@ exports[`Button - Component Should render Status of buttons - default 1`] = `
170
183
  <DocumentFragment>
171
184
  <button
172
185
  aria-busy="false"
186
+ aria-disabled="false"
173
187
  aria-pressed="false"
174
- class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
188
+ aria-readonly="false"
189
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
175
190
  type="button"
176
191
  >
177
192
  <div
@@ -187,9 +202,10 @@ exports[`Button - Component Should render Status of buttons - loading 1`] = `
187
202
  <DocumentFragment>
188
203
  <button
189
204
  aria-busy="true"
205
+ aria-disabled="true"
190
206
  aria-pressed="false"
191
- class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle variantText loading"
192
- disabled=""
207
+ aria-readonly="false"
208
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle loading"
193
209
  type="button"
194
210
  >
195
211
  <div
@@ -230,8 +246,10 @@ exports[`Button - Component Should render Status of buttons - success 1`] = `
230
246
  <DocumentFragment>
231
247
  <button
232
248
  aria-busy="false"
249
+ aria-disabled="false"
233
250
  aria-pressed="false"
234
- class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
251
+ aria-readonly="false"
252
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
235
253
  type="button"
236
254
  >
237
255
  <div
@@ -259,12 +277,14 @@ exports[`Button - Component Should render Status of buttons - success 1`] = `
259
277
  </DocumentFragment>
260
278
  `;
261
279
 
262
- exports[`Button - Component Should render appearance of buttons - [ 'bg' ] 1`] = `
280
+ exports[`Button - Component Should render bgAppearance of buttons - default 1`] = `
263
281
  <DocumentFragment>
264
282
  <button
265
283
  aria-busy="false"
284
+ aria-disabled="false"
266
285
  aria-pressed="false"
267
- class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-transparent hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
286
+ aria-readonly="false"
287
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
268
288
  type="button"
269
289
  >
270
290
  <div
@@ -276,12 +296,14 @@ exports[`Button - Component Should render appearance of buttons - [ 'bg' ] 1`] =
276
296
  </DocumentFragment>
277
297
  `;
278
298
 
279
- exports[`Button - Component Should render appearance of buttons - [ 'bg', 'border' ] 1`] = `
299
+ exports[`Button - Component Should render bgAppearance of buttons - none 1`] = `
280
300
  <DocumentFragment>
281
301
  <button
282
302
  aria-busy="false"
303
+ aria-disabled="false"
283
304
  aria-pressed="false"
284
- class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
305
+ aria-readonly="false"
306
+ class="buttonReset button text-brand-80 border-brand-80 sizeMedium shapeRoundedRectangle"
285
307
  type="button"
286
308
  >
287
309
  <div
@@ -293,12 +315,14 @@ exports[`Button - Component Should render appearance of buttons - [ 'bg', 'borde
293
315
  </DocumentFragment>
294
316
  `;
295
317
 
296
- exports[`Button - Component Should render appearance of buttons - [ 'border' ] 1`] = `
318
+ exports[`Button - Component Should render bgAppearance of buttons - onHover 1`] = `
297
319
  <DocumentFragment>
298
320
  <button
299
321
  aria-busy="false"
322
+ aria-disabled="false"
300
323
  aria-pressed="false"
301
- class="buttonReset button hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
324
+ aria-readonly="false"
325
+ class="buttonReset button text-brand-80 border-brand-80 sizeMedium shapeRoundedRectangle"
302
326
  type="button"
303
327
  >
304
328
  <div
@@ -310,12 +334,14 @@ exports[`Button - Component Should render appearance of buttons - [ 'border' ] 1
310
334
  </DocumentFragment>
311
335
  `;
312
336
 
313
- exports[`Button - Component Should render appearance of buttons - [ 'text' ] 1`] = `
337
+ exports[`Button - Component Should render borderAppearance of buttons - default 1`] = `
314
338
  <DocumentFragment>
315
339
  <button
316
340
  aria-busy="false"
341
+ aria-disabled="false"
317
342
  aria-pressed="false"
318
- class="buttonReset button hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-80 hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-transparent hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
343
+ aria-readonly="false"
344
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
319
345
  type="button"
320
346
  >
321
347
  <div
@@ -327,12 +353,14 @@ exports[`Button - Component Should render appearance of buttons - [ 'text' ] 1`]
327
353
  </DocumentFragment>
328
354
  `;
329
355
 
330
- exports[`Button - Component Should render appearance of buttons - [] 1`] = `
356
+ exports[`Button - Component Should render borderAppearance of buttons - none 1`] = `
331
357
  <DocumentFragment>
332
358
  <button
333
359
  aria-busy="false"
360
+ aria-disabled="false"
334
361
  aria-pressed="false"
335
- class="buttonReset button hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-transparent hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
362
+ aria-readonly="false"
363
+ class="buttonReset button bg-brand-80 text-brand-filled border-transparent sizeMedium shapeRoundedRectangle"
336
364
  type="button"
337
365
  >
338
366
  <div
@@ -344,15 +372,14 @@ exports[`Button - Component Should render appearance of buttons - [] 1`] = `
344
372
  </DocumentFragment>
345
373
  `;
346
374
 
347
- exports[`Button - Component Should render disabledAppearance of buttons - dull 1`] = `
375
+ exports[`Button - Component Should render borderAppearance of buttons - onHover 1`] = `
348
376
  <DocumentFragment>
349
377
  <button
350
378
  aria-busy="false"
379
+ aria-disabled="false"
351
380
  aria-pressed="false"
352
- class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle variantText disabledOpac disabledPointer"
353
- data-id="undefined_disabled"
354
- data-test-id="undefined_disabled"
355
- disabled=""
381
+ aria-readonly="false"
382
+ class="buttonReset button bg-brand-80 text-brand-filled border-transparent sizeMedium shapeRoundedRectangle"
356
383
  type="button"
357
384
  >
358
385
  <div
@@ -364,15 +391,14 @@ exports[`Button - Component Should render disabledAppearance of buttons - dull 1
364
391
  </DocumentFragment>
365
392
  `;
366
393
 
367
- exports[`Button - Component Should render disabledAppearance of buttons - none 1`] = `
394
+ exports[`Button - Component Should render disabledAppearance of buttons - dull 1`] = `
368
395
  <DocumentFragment>
369
396
  <button
370
397
  aria-busy="false"
398
+ aria-disabled="true"
371
399
  aria-pressed="false"
372
- class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle variantText disabledPointer"
373
- data-id="undefined_disabled"
374
- data-test-id="undefined_disabled"
375
- disabled=""
400
+ aria-readonly="false"
401
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle disabledOpac disabledPointer"
376
402
  type="button"
377
403
  >
378
404
  <div
@@ -384,87 +410,18 @@ exports[`Button - Component Should render disabledAppearance of buttons - none 1
384
410
  </DocumentFragment>
385
411
  `;
386
412
 
387
- exports[`Button - Component Should render disabledAppearance of buttons - strike 1`] = `
388
- <DocumentFragment>
389
- <button
390
- aria-busy="false"
391
- aria-pressed="false"
392
- class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle variantText disabledPointer strike"
393
- data-id="undefined_disabled"
394
- data-test-id="undefined_disabled"
395
- disabled=""
396
- type="button"
397
- >
398
- <div
399
- class="flex row alignItems_center justifyContent_center shrink contentWrapper"
400
- data-id="flex"
401
- data-test-id="flex"
402
- />
403
- </button>
404
- </DocumentFragment>
405
- `;
406
-
407
- exports[`Button - Component Should render hoverAppearance of buttons - [ 'bg' ] 1`] = `
408
- <DocumentFragment>
409
- <button
410
- aria-busy="false"
411
- aria-pressed="false"
412
- class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 hover:border-transparent focus:border-transparent active:border-transparent sizeMedium shapeRoundedRectangle variantText"
413
- type="button"
414
- >
415
- <div
416
- class="flex row alignItems_center justifyContent_center shrink contentWrapper"
417
- data-id="flex"
418
- data-test-id="flex"
419
- />
420
- </button>
421
- </DocumentFragment>
422
- `;
423
-
424
- exports[`Button - Component Should render hoverAppearance of buttons - [ 'bg', 'border' ] 1`] = `
425
- <DocumentFragment>
426
- <button
427
- aria-busy="false"
428
- aria-pressed="false"
429
- class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
430
- type="button"
431
- >
432
- <div
433
- class="flex row alignItems_center justifyContent_center shrink contentWrapper"
434
- data-id="flex"
435
- data-test-id="flex"
436
- />
437
- </button>
438
- </DocumentFragment>
439
- `;
440
-
441
- exports[`Button - Component Should render hoverAppearance of buttons - [ 'border' ] 1`] = `
442
- <DocumentFragment>
443
- <button
444
- aria-busy="false"
445
- aria-pressed="false"
446
- class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
447
- type="button"
448
- >
449
- <div
450
- class="flex row alignItems_center justifyContent_center shrink contentWrapper"
451
- data-id="flex"
452
- data-test-id="flex"
453
- />
454
- </button>
455
- </DocumentFragment>
456
- `;
457
-
458
- exports[`Button - Component Should render hoverAppearance of buttons - [ 'text' ] 1`] = `
413
+ exports[`Button - Component Should render disabledAppearance of buttons - none 1`] = `
459
414
  <DocumentFragment>
460
415
  <button
461
416
  aria-busy="false"
417
+ aria-disabled="true"
462
418
  aria-pressed="false"
463
- class="buttonReset button bg-brand-80 text-brand-filled hover:text-brand-100 focus:text-brand-100 active:text-brand-100 border-brand-80 hover:border-transparent focus:border-transparent active:border-transparent sizeMedium shapeRoundedRectangle variantText"
419
+ aria-readonly="false"
420
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle disabledPointer"
464
421
  type="button"
465
422
  >
466
423
  <div
467
- class="flex row alignItems_center justifyContent_center shrink contentWrapper"
424
+ class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
468
425
  data-id="flex"
469
426
  data-test-id="flex"
470
427
  />
@@ -472,12 +429,14 @@ exports[`Button - Component Should render hoverAppearance of buttons - [ 'text'
472
429
  </DocumentFragment>
473
430
  `;
474
431
 
475
- exports[`Button - Component Should render hoverAppearance of buttons - [] 1`] = `
432
+ exports[`Button - Component Should render disabledAppearance of buttons - strike 1`] = `
476
433
  <DocumentFragment>
477
434
  <button
478
435
  aria-busy="false"
436
+ aria-disabled="true"
479
437
  aria-pressed="false"
480
- class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 hover:border-transparent focus:border-transparent active:border-transparent sizeMedium shapeRoundedRectangle variantText"
438
+ aria-readonly="false"
439
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle disabledPointer strike"
481
440
  type="button"
482
441
  >
483
442
  <div
@@ -493,9 +452,10 @@ exports[`Button - Component Should render loaderPlacement of buttons - end 1`] =
493
452
  <DocumentFragment>
494
453
  <button
495
454
  aria-busy="true"
455
+ aria-disabled="true"
496
456
  aria-pressed="false"
497
- class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle variantText loading"
498
- disabled=""
457
+ aria-readonly="false"
458
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle loading"
499
459
  type="button"
500
460
  >
501
461
  <div
@@ -537,9 +497,10 @@ exports[`Button - Component Should render loaderPlacement of buttons - overlay 1
537
497
  <DocumentFragment>
538
498
  <button
539
499
  aria-busy="true"
500
+ aria-disabled="true"
540
501
  aria-pressed="false"
541
- class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle variantText loading"
542
- disabled=""
502
+ aria-readonly="false"
503
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle loading"
543
504
  type="button"
544
505
  >
545
506
  <div
@@ -580,9 +541,10 @@ exports[`Button - Component Should render loaderPlacement of buttons - start 1`]
580
541
  <DocumentFragment>
581
542
  <button
582
543
  aria-busy="true"
544
+ aria-disabled="true"
583
545
  aria-pressed="false"
584
- class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle variantText loading"
585
- disabled=""
546
+ aria-readonly="false"
547
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle loading"
586
548
  type="button"
587
549
  >
588
550
  <div
@@ -624,8 +586,10 @@ exports[`Button - Component Should render palette of buttons - danger 1`] = `
624
586
  <DocumentFragment>
625
587
  <button
626
588
  aria-busy="false"
589
+ aria-disabled="false"
627
590
  aria-pressed="false"
628
- class="buttonReset button bg-red-70 hover:bg-red-100 focus:bg-red-100 active:bg-red-100 text-white hover:text-white focus:text-white active:text-white border-red-70 hover:border-red-100 focus:border-red-100 active:border-red-100 sizeMedium shapeRoundedRectangle variantText"
591
+ aria-readonly="false"
592
+ class="buttonReset button bg-red-70 text-white border-red-70 sizeMedium shapeRoundedRectangle"
629
593
  type="button"
630
594
  >
631
595
  <div
@@ -641,8 +605,10 @@ exports[`Button - Component Should render palette of buttons - default 1`] = `
641
605
  <DocumentFragment>
642
606
  <button
643
607
  aria-busy="false"
608
+ aria-disabled="false"
644
609
  aria-pressed="false"
645
- class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
610
+ aria-readonly="false"
611
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
646
612
  type="button"
647
613
  >
648
614
  <div
@@ -658,8 +624,10 @@ exports[`Button - Component Should render palette of buttons - primary 1`] = `
658
624
  <DocumentFragment>
659
625
  <button
660
626
  aria-busy="false"
627
+ aria-disabled="false"
661
628
  aria-pressed="false"
662
- class="buttonReset button bg-blue-80 hover:bg-blue-100 focus:bg-blue-100 active:bg-blue-100 text-white hover:text-white focus:text-white active:text-white border-blue-80 hover:border-blue-100 focus:border-blue-100 active:border-blue-100 sizeMedium shapeRoundedRectangle variantText"
629
+ aria-readonly="false"
630
+ class="buttonReset button bg-blue-80 text-white border-blue-80 sizeMedium shapeRoundedRectangle"
663
631
  type="button"
664
632
  >
665
633
  <div
@@ -675,8 +643,10 @@ exports[`Button - Component Should render palette of buttons - secondary 1`] = `
675
643
  <DocumentFragment>
676
644
  <button
677
645
  aria-busy="false"
646
+ aria-disabled="false"
678
647
  aria-pressed="false"
679
- class="buttonReset button bg-grey-65 hover:bg-grey-55 focus:bg-grey-55 active:bg-grey-55 text-white hover:text-white focus:text-white active:text-white border-grey-65 hover:border-grey-55 focus:border-grey-55 active:border-grey-55 sizeMedium shapeRoundedRectangle variantText"
648
+ aria-readonly="false"
649
+ class="buttonReset button bg-grey-65 text-white border-grey-65 sizeMedium shapeRoundedRectangle"
680
650
  type="button"
681
651
  >
682
652
  <div
@@ -692,8 +662,10 @@ exports[`Button - Component Should render palette of buttons - success 1`] = `
692
662
  <DocumentFragment>
693
663
  <button
694
664
  aria-busy="false"
665
+ aria-disabled="false"
695
666
  aria-pressed="false"
696
- class="buttonReset button bg-green-80 hover:bg-green-100 focus:bg-green-100 active:bg-green-100 text-white hover:text-white focus:text-white active:text-white border-green-80 hover:border-green-100 focus:border-green-100 active:border-green-100 sizeMedium shapeRoundedRectangle variantText"
667
+ aria-readonly="false"
668
+ class="buttonReset button bg-green-80 text-white border-green-80 sizeMedium shapeRoundedRectangle"
697
669
  type="button"
698
670
  >
699
671
  <div
@@ -709,8 +681,10 @@ exports[`Button - Component Should render paletteShade of buttons - default 1`]
709
681
  <DocumentFragment>
710
682
  <button
711
683
  aria-busy="false"
684
+ aria-disabled="false"
712
685
  aria-pressed="false"
713
- class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
686
+ aria-readonly="false"
687
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
714
688
  type="button"
715
689
  >
716
690
  <div
@@ -726,93 +700,10 @@ exports[`Button - Component Should render paletteShade of buttons - lighter 1`]
726
700
  <DocumentFragment>
727
701
  <button
728
702
  aria-busy="false"
703
+ aria-disabled="false"
729
704
  aria-pressed="false"
730
- class="buttonReset button bg-brand-10 hover:bg-brand-20 focus:bg-brand-20 active:bg-brand-20 text-brand-80 hover:text-brand-100 focus:text-brand-100 active:text-brand-100 border-brand-10 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
731
- type="button"
732
- >
733
- <div
734
- class="flex row alignItems_center justifyContent_center shrink contentWrapper"
735
- data-id="flex"
736
- data-test-id="flex"
737
- />
738
- </button>
739
- </DocumentFragment>
740
- `;
741
-
742
- exports[`Button - Component Should render selectedAppearance of buttons - [ 'bg' ] 1`] = `
743
- <DocumentFragment>
744
- <button
745
- aria-busy="false"
746
- aria-pressed="true"
747
- class="buttonReset button selected:bg-brand-100 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 selected:text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled selected:border-transparent hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
748
- type="button"
749
- >
750
- <div
751
- class="flex row alignItems_center justifyContent_center shrink contentWrapper"
752
- data-id="flex"
753
- data-test-id="flex"
754
- />
755
- </button>
756
- </DocumentFragment>
757
- `;
758
-
759
- exports[`Button - Component Should render selectedAppearance of buttons - [ 'bg', 'border' ] 1`] = `
760
- <DocumentFragment>
761
- <button
762
- aria-busy="false"
763
- aria-pressed="true"
764
- class="buttonReset button selected:bg-brand-100 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 selected:text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled selected:border-brand-100 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
765
- type="button"
766
- >
767
- <div
768
- class="flex row alignItems_center justifyContent_center shrink contentWrapper"
769
- data-id="flex"
770
- data-test-id="flex"
771
- />
772
- </button>
773
- </DocumentFragment>
774
- `;
775
-
776
- exports[`Button - Component Should render selectedAppearance of buttons - [ 'border' ] 1`] = `
777
- <DocumentFragment>
778
- <button
779
- aria-busy="false"
780
- aria-pressed="true"
781
- class="buttonReset button hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 hover:text-brand-filled focus:text-brand-filled active:text-brand-filled selected:border-brand-100 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
782
- type="button"
783
- >
784
- <div
785
- class="flex row alignItems_center justifyContent_center shrink contentWrapper"
786
- data-id="flex"
787
- data-test-id="flex"
788
- />
789
- </button>
790
- </DocumentFragment>
791
- `;
792
-
793
- exports[`Button - Component Should render selectedAppearance of buttons - [ 'text' ] 1`] = `
794
- <DocumentFragment>
795
- <button
796
- aria-busy="false"
797
- aria-pressed="true"
798
- class="buttonReset button hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 selected:text-brand-100 hover:text-brand-filled focus:text-brand-filled active:text-brand-filled selected:border-transparent hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
799
- type="button"
800
- >
801
- <div
802
- class="flex row alignItems_center justifyContent_center shrink contentWrapper"
803
- data-id="flex"
804
- data-test-id="flex"
805
- />
806
- </button>
807
- </DocumentFragment>
808
- `;
809
-
810
- exports[`Button - Component Should render selectedAppearance of buttons - [] 1`] = `
811
- <DocumentFragment>
812
- <button
813
- aria-busy="false"
814
- aria-pressed="true"
815
- class="buttonReset button hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 hover:text-brand-filled focus:text-brand-filled active:text-brand-filled selected:border-transparent hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
705
+ aria-readonly="false"
706
+ class="buttonReset button bg-brand-10 text-brand-80 border-brand-10 sizeMedium shapeRoundedRectangle"
816
707
  type="button"
817
708
  >
818
709
  <div
@@ -828,8 +719,10 @@ exports[`Button - Component Should render shape of buttons - pill 1`] = `
828
719
  <DocumentFragment>
829
720
  <button
830
721
  aria-busy="false"
722
+ aria-disabled="false"
831
723
  aria-pressed="false"
832
- class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapePill variantText"
724
+ aria-readonly="false"
725
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapePill"
833
726
  type="button"
834
727
  >
835
728
  <div
@@ -845,8 +738,10 @@ exports[`Button - Component Should render shape of buttons - rectangle 1`] = `
845
738
  <DocumentFragment>
846
739
  <button
847
740
  aria-busy="false"
741
+ aria-disabled="false"
848
742
  aria-pressed="false"
849
- class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRectangle variantText"
743
+ aria-readonly="false"
744
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRectangle"
850
745
  type="button"
851
746
  >
852
747
  <div
@@ -862,8 +757,10 @@ exports[`Button - Component Should render shape of buttons - roundedRectangle 1`
862
757
  <DocumentFragment>
863
758
  <button
864
759
  aria-busy="false"
760
+ aria-disabled="false"
865
761
  aria-pressed="false"
866
- class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
762
+ aria-readonly="false"
763
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
867
764
  type="button"
868
765
  >
869
766
  <div
@@ -879,8 +776,10 @@ exports[`Button - Component Should render type of buttons - button 1`] = `
879
776
  <DocumentFragment>
880
777
  <button
881
778
  aria-busy="false"
779
+ aria-disabled="false"
882
780
  aria-pressed="false"
883
- class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
781
+ aria-readonly="false"
782
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
884
783
  type="button"
885
784
  >
886
785
  <div
@@ -896,8 +795,10 @@ exports[`Button - Component Should render type of buttons - reset 1`] = `
896
795
  <DocumentFragment>
897
796
  <button
898
797
  aria-busy="false"
798
+ aria-disabled="false"
899
799
  aria-pressed="false"
900
- class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
800
+ aria-readonly="false"
801
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
901
802
  type="reset"
902
803
  >
903
804
  <div
@@ -913,8 +814,10 @@ exports[`Button - Component Should render type of buttons - submit 1`] = `
913
814
  <DocumentFragment>
914
815
  <button
915
816
  aria-busy="false"
817
+ aria-disabled="false"
916
818
  aria-pressed="false"
917
- class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
819
+ aria-readonly="false"
820
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
918
821
  type="submit"
919
822
  >
920
823
  <div
@@ -930,8 +833,10 @@ exports[`Button - Component Should render variant of buttons - icon 1`] = `
930
833
  <DocumentFragment>
931
834
  <button
932
835
  aria-busy="false"
836
+ aria-disabled="false"
933
837
  aria-pressed="false"
934
- class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantIcon"
838
+ aria-readonly="false"
839
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
935
840
  type="button"
936
841
  >
937
842
  <div
@@ -947,8 +852,10 @@ exports[`Button - Component Should render variant of buttons - iconWithText 1`]
947
852
  <DocumentFragment>
948
853
  <button
949
854
  aria-busy="false"
855
+ aria-disabled="false"
950
856
  aria-pressed="false"
951
- class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantIconWithText"
857
+ aria-readonly="false"
858
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
952
859
  type="button"
953
860
  >
954
861
  <div
@@ -964,8 +871,10 @@ exports[`Button - Component Should render variant of buttons - text 1`] = `
964
871
  <DocumentFragment>
965
872
  <button
966
873
  aria-busy="false"
874
+ aria-disabled="false"
967
875
  aria-pressed="false"
968
- class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
876
+ aria-readonly="false"
877
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
969
878
  type="button"
970
879
  >
971
880
  <div
@@ -981,8 +890,10 @@ exports[`Button - Component Should render with children 1`] = `
981
890
  <DocumentFragment>
982
891
  <button
983
892
  aria-busy="false"
893
+ aria-disabled="false"
984
894
  aria-pressed="false"
985
- class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
895
+ aria-readonly="false"
896
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
986
897
  type="button"
987
898
  >
988
899
  <div
@@ -1004,8 +915,10 @@ exports[`Button - Component Should render with customId and testId 1`] = `
1004
915
  <DocumentFragment>
1005
916
  <button
1006
917
  aria-busy="false"
918
+ aria-disabled="false"
1007
919
  aria-pressed="false"
1008
- class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
920
+ aria-readonly="false"
921
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
1009
922
  data-id="customIdValue"
1010
923
  data-test-id="testIdValue"
1011
924
  type="button"
@@ -1023,8 +936,10 @@ exports[`Button - Component Should render with iconName and iconSize 1`] = `
1023
936
  <DocumentFragment>
1024
937
  <button
1025
938
  aria-busy="false"
939
+ aria-disabled="false"
1026
940
  aria-pressed="false"
1027
- class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantIcon"
941
+ aria-readonly="false"
942
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
1028
943
  type="button"
1029
944
  >
1030
945
  <div
@@ -1048,8 +963,10 @@ exports[`Button - Component Should render with iconPlacement 1`] = `
1048
963
  <DocumentFragment>
1049
964
  <button
1050
965
  aria-busy="false"
966
+ aria-disabled="false"
1051
967
  aria-pressed="false"
1052
- class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantIconWithText"
968
+ aria-readonly="false"
969
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
1053
970
  type="button"
1054
971
  >
1055
972
  <div
@@ -1078,8 +995,10 @@ exports[`Button - Component Should render with readOnly style when isReadOnly pr
1078
995
  <DocumentFragment>
1079
996
  <button
1080
997
  aria-busy="false"
998
+ aria-disabled="false"
1081
999
  aria-pressed="false"
1082
- class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
1000
+ aria-readonly="true"
1001
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle disabledOpac disabledPointer"
1083
1002
  type="button"
1084
1003
  >
1085
1004
  <div
@@ -1095,8 +1014,10 @@ exports[`Button - Component Should render with renderBefore and renderAfter 1`]
1095
1014
  <DocumentFragment>
1096
1015
  <button
1097
1016
  aria-busy="false"
1017
+ aria-disabled="false"
1098
1018
  aria-pressed="false"
1099
- class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
1019
+ aria-readonly="false"
1020
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
1100
1021
  type="button"
1101
1022
  >
1102
1023
  <div
@@ -1124,8 +1045,10 @@ exports[`Button - Component Should render with renderIcon 1`] = `
1124
1045
  <DocumentFragment>
1125
1046
  <button
1126
1047
  aria-busy="false"
1048
+ aria-disabled="false"
1127
1049
  aria-pressed="false"
1128
- class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantIcon"
1050
+ aria-readonly="false"
1051
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
1129
1052
  type="button"
1130
1053
  >
1131
1054
  <div
@@ -1145,9 +1068,10 @@ exports[`Button - Component Should render with renderLoader 1`] = `
1145
1068
  <DocumentFragment>
1146
1069
  <button
1147
1070
  aria-busy="true"
1071
+ aria-disabled="true"
1148
1072
  aria-pressed="false"
1149
- class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle variantText loading"
1150
- disabled=""
1073
+ aria-readonly="false"
1074
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle loading"
1151
1075
  type="button"
1152
1076
  >
1153
1077
  <div
@@ -1155,15 +1079,9 @@ exports[`Button - Component Should render with renderLoader 1`] = `
1155
1079
  data-id="flex"
1156
1080
  data-test-id="flex"
1157
1081
  />
1158
- <div
1159
- class="flex row alignItems_center justifyContent_center loaderOverlay"
1160
- data-id="flex"
1161
- data-test-id="flex"
1162
- >
1163
- <span>
1164
- Loading...
1165
- </span>
1166
- </div>
1082
+ <span>
1083
+ Loading...
1084
+ </span>
1167
1085
  </button>
1168
1086
  </DocumentFragment>
1169
1087
  `;
@@ -1172,8 +1090,10 @@ exports[`Button - Component Should render with renderSuccess 1`] = `
1172
1090
  <DocumentFragment>
1173
1091
  <button
1174
1092
  aria-busy="false"
1093
+ aria-disabled="false"
1175
1094
  aria-pressed="false"
1176
- class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
1095
+ aria-readonly="false"
1096
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
1177
1097
  type="button"
1178
1098
  >
1179
1099
  <div
@@ -1181,15 +1101,9 @@ exports[`Button - Component Should render with renderSuccess 1`] = `
1181
1101
  data-id="flex"
1182
1102
  data-test-id="flex"
1183
1103
  />
1184
- <div
1185
- class="flex row alignItems_center justifyContent_center successOverlay"
1186
- data-id="flex"
1187
- data-test-id="flex"
1188
- >
1189
- <span>
1190
- Success!
1191
- </span>
1192
- </div>
1104
+ <span>
1105
+ Success!
1106
+ </span>
1193
1107
  </button>
1194
1108
  </DocumentFragment>
1195
1109
  `;
@@ -1198,8 +1112,10 @@ exports[`Button - Component Should render with selected style when isSelected pr
1198
1112
  <DocumentFragment>
1199
1113
  <button
1200
1114
  aria-busy="false"
1115
+ aria-disabled="false"
1201
1116
  aria-pressed="true"
1202
- class="buttonReset button selected:bg-brand-100 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 selected:text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled selected:border-brand-100 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
1117
+ aria-readonly="false"
1118
+ class="buttonReset button sizeMedium shapeRoundedRectangle"
1203
1119
  type="button"
1204
1120
  >
1205
1121
  <div
@@ -1215,8 +1131,10 @@ exports[`Button - Component Should render with the basic set of default props 1`
1215
1131
  <DocumentFragment>
1216
1132
  <button
1217
1133
  aria-busy="false"
1134
+ aria-disabled="false"
1218
1135
  aria-pressed="false"
1219
- class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
1136
+ aria-readonly="false"
1137
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
1220
1138
  type="button"
1221
1139
  >
1222
1140
  <div
@@ -1232,8 +1150,10 @@ exports[`Button - Component Should render with title attribute 1`] = `
1232
1150
  <DocumentFragment>
1233
1151
  <button
1234
1152
  aria-busy="false"
1153
+ aria-disabled="false"
1235
1154
  aria-pressed="false"
1236
- class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
1155
+ aria-readonly="false"
1156
+ class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
1237
1157
  data-title="Button test title"
1238
1158
  type="button"
1239
1159
  >