@transferwise/components 46.106.0 → 46.108.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 (152) hide show
  1. package/build/actionOption/ActionOption.js.map +1 -1
  2. package/build/actionOption/ActionOption.mjs.map +1 -1
  3. package/build/checkboxOption/CheckboxOption.js.map +1 -1
  4. package/build/checkboxOption/CheckboxOption.mjs.map +1 -1
  5. package/build/header/Header.js +1 -0
  6. package/build/header/Header.js.map +1 -1
  7. package/build/header/Header.mjs +1 -0
  8. package/build/header/Header.mjs.map +1 -1
  9. package/build/legacylistItem/LegacyListItem.js.map +1 -1
  10. package/build/legacylistItem/LegacyListItem.mjs.map +1 -1
  11. package/build/link/Link.js +6 -2
  12. package/build/link/Link.js.map +1 -1
  13. package/build/link/Link.mjs +6 -2
  14. package/build/link/Link.mjs.map +1 -1
  15. package/build/listItem/ListItem.js +28 -16
  16. package/build/listItem/ListItem.js.map +1 -1
  17. package/build/listItem/ListItem.mjs +28 -16
  18. package/build/listItem/ListItem.mjs.map +1 -1
  19. package/build/listItem/ListItemContext.js.map +1 -1
  20. package/build/listItem/ListItemContext.mjs.map +1 -1
  21. package/build/listItem/Navigation/ListItemNavigation.js +1 -3
  22. package/build/listItem/Navigation/ListItemNavigation.js.map +1 -1
  23. package/build/listItem/Navigation/ListItemNavigation.mjs +2 -4
  24. package/build/listItem/Navigation/ListItemNavigation.mjs.map +1 -1
  25. package/build/listItem/Prompt/InlinePrompt/InlinePrompt.js +74 -0
  26. package/build/listItem/Prompt/InlinePrompt/InlinePrompt.js.map +1 -0
  27. package/build/listItem/Prompt/InlinePrompt/InlinePrompt.mjs +72 -0
  28. package/build/listItem/Prompt/InlinePrompt/InlinePrompt.mjs.map +1 -0
  29. package/build/listItem/Prompt/ListItemPrompt.js +10 -15
  30. package/build/listItem/Prompt/ListItemPrompt.js.map +1 -1
  31. package/build/listItem/Prompt/ListItemPrompt.mjs +11 -16
  32. package/build/listItem/Prompt/ListItemPrompt.mjs.map +1 -1
  33. package/build/main.css +122 -81
  34. package/build/navigationOption/NavigationOption.js.map +1 -1
  35. package/build/navigationOption/NavigationOption.mjs.map +1 -1
  36. package/build/navigationOptionsList/NavigationOptionsList.js.map +1 -1
  37. package/build/navigationOptionsList/NavigationOptionsList.mjs.map +1 -1
  38. package/build/radioOption/RadioOption.js.map +1 -1
  39. package/build/radioOption/RadioOption.mjs.map +1 -1
  40. package/build/styles/link/Link.css +7 -0
  41. package/build/styles/listItem/ListItem.css +115 -81
  42. package/build/styles/listItem/ListItem.grid.css +11 -3
  43. package/build/styles/listItem/ListItem.vars.css +0 -0
  44. package/build/styles/listItem/Prompt/InlinePrompt/InlinePrompt.css +153 -0
  45. package/build/styles/listItem/Prompt/ListItemPrompt.css +72 -72
  46. package/build/styles/main.css +122 -81
  47. package/build/summary/Summary.js +8 -0
  48. package/build/summary/Summary.js.map +1 -1
  49. package/build/summary/Summary.mjs +8 -0
  50. package/build/summary/Summary.mjs.map +1 -1
  51. package/build/switchOption/SwitchOption.js +8 -0
  52. package/build/switchOption/SwitchOption.js.map +1 -1
  53. package/build/switchOption/SwitchOption.mjs +8 -0
  54. package/build/switchOption/SwitchOption.mjs.map +1 -1
  55. package/build/types/actionOption/ActionOption.d.ts +8 -0
  56. package/build/types/actionOption/ActionOption.d.ts.map +1 -1
  57. package/build/types/checkboxOption/CheckboxOption.d.ts +8 -0
  58. package/build/types/checkboxOption/CheckboxOption.d.ts.map +1 -1
  59. package/build/types/header/Header.d.ts +1 -0
  60. package/build/types/header/Header.d.ts.map +1 -1
  61. package/build/types/legacylistItem/LegacyListItem.d.ts +8 -0
  62. package/build/types/legacylistItem/LegacyListItem.d.ts.map +1 -1
  63. package/build/types/link/Link.d.ts +1 -1
  64. package/build/types/link/Link.d.ts.map +1 -1
  65. package/build/types/listItem/ListItem.d.ts +10 -1
  66. package/build/types/listItem/ListItem.d.ts.map +1 -1
  67. package/build/types/listItem/ListItemContext.d.ts +2 -1
  68. package/build/types/listItem/ListItemContext.d.ts.map +1 -1
  69. package/build/types/listItem/Navigation/ListItemNavigation.d.ts.map +1 -1
  70. package/build/types/listItem/Prompt/InlinePrompt/InlinePrompt.d.ts +15 -0
  71. package/build/types/listItem/Prompt/InlinePrompt/InlinePrompt.d.ts.map +1 -0
  72. package/build/types/listItem/Prompt/InlinePrompt/index.d.ts +3 -0
  73. package/build/types/listItem/Prompt/InlinePrompt/index.d.ts.map +1 -0
  74. package/build/types/listItem/Prompt/ListItemPrompt.d.ts +4 -6
  75. package/build/types/listItem/Prompt/ListItemPrompt.d.ts.map +1 -1
  76. package/build/types/listItem/_stories/helpers.d.ts +1 -1
  77. package/build/types/listItem/_stories/helpers.d.ts.map +1 -1
  78. package/build/types/listItem/_stories/subcomponents.d.ts +4 -0
  79. package/build/types/listItem/_stories/subcomponents.d.ts.map +1 -1
  80. package/build/types/listItem/_stories/variants/helpers.d.ts.map +1 -1
  81. package/build/types/listItem/constants.d.ts +16 -0
  82. package/build/types/listItem/constants.d.ts.map +1 -0
  83. package/build/types/listItem/useListItemControl.d.ts +1 -1
  84. package/build/types/navigationOption/NavigationOption.d.ts +8 -0
  85. package/build/types/navigationOption/NavigationOption.d.ts.map +1 -1
  86. package/build/types/navigationOptionsList/NavigationOptionsList.d.ts +9 -0
  87. package/build/types/navigationOptionsList/NavigationOptionsList.d.ts.map +1 -1
  88. package/build/types/radioOption/RadioOption.d.ts +8 -0
  89. package/build/types/radioOption/RadioOption.d.ts.map +1 -1
  90. package/build/types/summary/Summary.d.ts +8 -0
  91. package/build/types/summary/Summary.d.ts.map +1 -1
  92. package/build/types/switchOption/SwitchOption.d.ts +8 -0
  93. package/build/types/switchOption/SwitchOption.d.ts.map +1 -1
  94. package/package.json +2 -2
  95. package/src/actionOption/ActionOption.story.tsx +4 -0
  96. package/src/actionOption/ActionOption.tsx +8 -0
  97. package/src/checkboxOption/CheckboxOption.story.tsx +4 -0
  98. package/src/checkboxOption/CheckboxOption.tsx +8 -0
  99. package/src/header/Header.story.tsx +14 -0
  100. package/src/header/Header.tsx +2 -0
  101. package/src/legacylistItem/LegacyListItem.story.tsx +4 -0
  102. package/src/legacylistItem/LegacyListItem.tsx +8 -0
  103. package/src/link/Link.css +7 -0
  104. package/src/link/Link.less +8 -0
  105. package/src/link/Link.spec.tsx +28 -0
  106. package/src/link/Link.story.tsx +72 -16
  107. package/src/link/Link.tsx +5 -1
  108. package/src/listItem/ListItem.css +115 -81
  109. package/src/listItem/ListItem.grid.css +11 -3
  110. package/src/listItem/ListItem.grid.less +14 -4
  111. package/src/listItem/ListItem.less +35 -8
  112. package/src/listItem/ListItem.spec.tsx +37 -1
  113. package/src/listItem/ListItem.tsx +47 -21
  114. package/src/listItem/ListItem.vars.css +0 -0
  115. package/src/listItem/ListItem.vars.less +11 -0
  116. package/src/listItem/ListItemContext.tsx +2 -1
  117. package/src/listItem/Navigation/ListItemNavigation.spec.tsx +1 -10
  118. package/src/listItem/Navigation/ListItemNavigation.story.tsx +0 -22
  119. package/src/listItem/Navigation/ListItemNavigation.tsx +2 -3
  120. package/src/listItem/Prompt/InlinePrompt/InlinePrompt.css +153 -0
  121. package/src/listItem/Prompt/InlinePrompt/InlinePrompt.less +162 -0
  122. package/src/listItem/Prompt/InlinePrompt/InlinePrompt.spec.tsx +66 -0
  123. package/src/listItem/Prompt/InlinePrompt/InlinePrompt.tsx +56 -0
  124. package/src/listItem/Prompt/InlinePrompt/index.ts +2 -0
  125. package/src/listItem/Prompt/ListItemPrompt.css +72 -72
  126. package/src/listItem/Prompt/ListItemPrompt.less +2 -130
  127. package/src/listItem/Prompt/ListItemPrompt.spec.tsx +36 -0
  128. package/src/listItem/Prompt/ListItemPrompt.story.tsx +4 -2
  129. package/src/listItem/Prompt/ListItemPrompt.tsx +14 -14
  130. package/src/listItem/_stories/ListItem.disabled.story.tsx +433 -0
  131. package/src/listItem/_stories/ListItem.layout.test.story.tsx +10 -155
  132. package/src/listItem/_stories/ListItem.scenarios.story.tsx +4 -25
  133. package/src/listItem/_stories/ListItem.story.tsx +17 -187
  134. package/src/listItem/_stories/helpers.tsx +23 -6
  135. package/src/listItem/_stories/subcomponents.tsx +19 -2
  136. package/src/listItem/_stories/variants/ListItem.medium.test.story.tsx +1 -1
  137. package/src/listItem/_stories/variants/ListItem.neutral.test.story.tsx +55 -0
  138. package/src/listItem/_stories/variants/ListItem.small.test.story.tsx +1 -1
  139. package/src/listItem/_stories/variants/helpers.tsx +28 -1
  140. package/src/listItem/constants.ts +15 -0
  141. package/src/main.css +122 -81
  142. package/src/navigationOption/NavigationOption.story.tsx +4 -1
  143. package/src/navigationOption/NavigationOption.tsx +8 -0
  144. package/src/navigationOptionsList/NavigationOptionsList.story.tsx +4 -0
  145. package/src/navigationOptionsList/NavigationOptionsList.tsx +9 -0
  146. package/src/radioOption/RadioOption.story.tsx +4 -0
  147. package/src/radioOption/RadioOption.tsx +8 -0
  148. package/src/summary/Summary.story.tsx +4 -0
  149. package/src/summary/Summary.tsx +8 -0
  150. package/src/switchOption/SwitchOption.story.tsx +4 -1
  151. package/src/switchOption/SwitchOption.tsx +8 -0
  152. package/src/table/Table.story.tsx +1 -1
package/build/styles/listItem/ListItem.css CHANGED
@@ -9,7 +9,7 @@
9
9
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
10
10
  margin-top: -2px;
11
11
  }
12
- @container (min-width: 375px) {
12
+ @container (min-width: 309px) {
13
13
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
14
14
  height: var(--wds-list-item-control-wrapper-height);
15
15
  align-content: center;
@@ -105,7 +105,7 @@
105
105
  grid-template-areas: "body";
106
106
  }
107
107
  }
108
- @container (min-width: 297px) and (max-width: 375px) {
108
+ @container (min-width: 241px) and (max-width: 308px) {
109
109
  .wds-list-item-gridWrapper .wds-list-item-media-image {
110
110
  -o-object-position: bottom left;
111
111
  object-position: bottom left;
@@ -231,8 +231,12 @@
231
231
  grid-template-rows: auto;
232
232
  grid-template-areas: "body";
233
233
  }
234
+ .wds-list-item-gridWrapper .wds-list-item-button-control--hasPrompt {
235
+ margin-top: 4px;
236
+ margin-top: var(--size-4);
237
+ }
234
238
  }
235
- @container (max-width: 297px) {
239
+ @container (max-width: 240px) {
236
240
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
237
241
  align-content: start;
238
242
  }
@@ -373,11 +377,13 @@
373
377
  .wds-list-item-gridWrapper .wds-list-item-body .wds-list-item-value {
374
378
  text-align: left;
375
379
  }
380
+ .wds-list-item-gridWrapper .wds-list-item-button-control--hasPrompt {
381
+ margin-top: 4px;
382
+ margin-top: var(--size-4);
383
+ }
376
384
  }
377
- .wds-list-item-prompt {
378
- grid-area: prompt;
385
+ .wds-inline-prompt {
379
386
  display: inline-flex;
380
- justify-self: start;
381
387
  text-align: left;
382
388
  padding-top: calc(8px / 2);
383
389
  padding-top: calc(var(--padding-x-small) / 2);
@@ -392,33 +398,27 @@
392
398
  word-break: break-word;
393
399
  word-wrap: break-word;
394
400
  }
395
- .wds-list-item-prompt:has(a),
396
- .wds-list-item-prompt:has(button) {
401
+ .wds-inline-prompt:has(a),
402
+ .wds-inline-prompt:has(button) {
397
403
  position: relative;
398
404
  z-index: 1;
399
405
  }
400
- .wds-list-item-prompt a,
401
- .wds-list-item-prompt button {
406
+ .wds-inline-prompt--muted {
407
+ opacity: 0.93;
408
+ filter: grayscale(1);
409
+ }
410
+ .wds-inline-prompt a,
411
+ .wds-inline-prompt button {
402
412
  text-underline-offset: calc(4px / 2);
403
413
  text-underline-offset: calc(var(--size-4) / 2);
404
414
  }
405
- .wds-list-item-prompt a:first-of-type:before,
406
- .wds-list-item-prompt button:first-of-type:before {
415
+ .wds-inline-prompt a:first-of-type:before,
416
+ .wds-inline-prompt button:first-of-type:before {
407
417
  content: '';
408
418
  position: absolute;
409
419
  inset: 0;
410
420
  }
411
- .wds-list-item-prompt.np-prompt-icon {
412
- padding-left: calc(8px - 1px);
413
- padding-left: calc(var(--padding-x-small) - 1px);
414
- padding-right: 8px;
415
- padding-right: var(--padding-x-small);
416
- display: inline-flex;
417
- align-items: center;
418
- gap: 4px;
419
- gap: var(--size-4);
420
- }
421
- .wds-list-item-prompt .np-prompt-icon {
421
+ .wds-inline-prompt__media-wrapper {
422
422
  padding-right: calc(12px / 2);
423
423
  padding-right: calc(var(--size-12) / 2);
424
424
  padding-top: calc(4px - 1px);
@@ -426,111 +426,119 @@
426
426
  padding-bottom: calc(4px - 1px);
427
427
  padding-bottom: calc(var(--size-4) - 1px);
428
428
  }
429
- .wds-list-item-prompt .np-prompt-icon .tw-icon-tags,
430
- .wds-list-item-prompt .np-prompt-icon .tw-icon-confetti {
429
+ .wds-inline-prompt__media-wrapper .tw-icon-tags,
430
+ .wds-inline-prompt__media-wrapper .tw-icon-confetti {
431
431
  color: var(--color-sentiment-positive-primary);
432
432
  }
433
- .wds-list-item-prompt.negative {
433
+ .wds-inline-prompt--negative {
434
434
  background-color: var(--color-sentiment-negative-secondary);
435
435
  color: var(--color-sentiment-negative-primary);
436
436
  }
437
- .wds-list-item-prompt.negative a,
438
- .wds-list-item-prompt.negative button {
437
+ .wds-inline-prompt--negative a,
438
+ .wds-inline-prompt--negative button {
439
439
  color: var(--color-sentiment-negative-primary);
440
440
  }
441
- .wds-list-item-prompt.negative a:hover,
442
- .wds-list-item-prompt.negative button:hover {
441
+ .wds-inline-prompt--negative a:hover,
442
+ .wds-inline-prompt--negative button:hover {
443
443
  color: var(--color-sentiment-negative-primary-hover);
444
444
  }
445
- .wds-list-item-prompt.negative a:active,
446
- .wds-list-item-prompt.negative button:active {
445
+ .wds-inline-prompt--negative a:active,
446
+ .wds-inline-prompt--negative button:active {
447
447
  color: var(--color-sentiment-negative-primary-active);
448
448
  }
449
- .wds-list-item-prompt.wds-list-item-prompt.negative:has(a, button):hover {
449
+ .wds-inline-prompt.wds-inline-prompt--negative:has(a, button):hover {
450
450
  background-color: var(--color-sentiment-negative-secondary-hover);
451
451
  }
452
- .wds-list-item-prompt.wds-list-item-prompt.negative:has(a, button):active {
452
+ .wds-inline-prompt.wds-inline-prompt--negative:has(a, button):active {
453
453
  background-color: var(--color-sentiment-negative-secondary-active);
454
454
  }
455
- .wds-list-item-prompt.positive,
456
- .wds-list-item-prompt.discount,
457
- .wds-list-item-prompt.savings {
455
+ .wds-inline-prompt--positive {
458
456
  background-color: var(--color-sentiment-positive-secondary);
459
457
  color: var(--color-sentiment-positive-primary);
460
458
  }
461
- .wds-list-item-prompt.positive a,
462
- .wds-list-item-prompt.discount a,
463
- .wds-list-item-prompt.savings a,
464
- .wds-list-item-prompt.positive button,
465
- .wds-list-item-prompt.discount button,
466
- .wds-list-item-prompt.savings button {
459
+ .wds-inline-prompt--positive a,
460
+ .wds-inline-prompt--positive button {
467
461
  color: var(--color-sentiment-positive-primary);
468
462
  }
469
- .wds-list-item-prompt.positive a:hover,
470
- .wds-list-item-prompt.discount a:hover,
471
- .wds-list-item-prompt.savings a:hover,
472
- .wds-list-item-prompt.positive button:hover,
473
- .wds-list-item-prompt.discount button:hover,
474
- .wds-list-item-prompt.savings button:hover {
463
+ .wds-inline-prompt--positive a:hover,
464
+ .wds-inline-prompt--positive button:hover {
475
465
  color: var(--color-sentiment-positive-primary-hover);
476
466
  }
477
- .wds-list-item-prompt.positive a:active,
478
- .wds-list-item-prompt.discount a:active,
479
- .wds-list-item-prompt.savings a:active,
480
- .wds-list-item-prompt.positive button:active,
481
- .wds-list-item-prompt.discount button:active,
482
- .wds-list-item-prompt.savings button:active {
467
+ .wds-inline-prompt--positive a:active,
468
+ .wds-inline-prompt--positive button:active {
483
469
  color: var(--color-sentiment-positive-primary-active);
484
470
  }
485
- .wds-list-item-prompt.wds-list-item-prompt.positive:has(a, button):hover,
486
- .wds-list-item-prompt.wds-list-item-prompt.discount:has(a, button):hover,
487
- .wds-list-item-prompt.wds-list-item-prompt.savings:has(a, button):hover {
471
+ .wds-inline-prompt.wds-inline-prompt--positive:has(a, button):hover {
488
472
  background-color: var(--color-sentiment-positive-secondary-hover);
489
473
  }
490
- .wds-list-item-prompt.wds-list-item-prompt.positive:has(a, button):active,
491
- .wds-list-item-prompt.wds-list-item-prompt.discount:has(a, button):active,
492
- .wds-list-item-prompt.wds-list-item-prompt.savings:has(a, button):active {
474
+ .wds-inline-prompt.wds-inline-prompt--positive:has(a, button):active {
493
475
  background-color: var(--color-sentiment-positive-secondary-active);
494
476
  }
495
- .wds-list-item-prompt.neutral {
477
+ .wds-inline-prompt--proposition {
478
+ background-color: var(--color-sentiment-positive-secondary);
479
+ color: var(--color-sentiment-positive-primary);
480
+ }
481
+ .wds-inline-prompt--proposition a,
482
+ .wds-inline-prompt--proposition button {
483
+ color: var(--color-sentiment-positive-primary);
484
+ }
485
+ .wds-inline-prompt--proposition a:hover,
486
+ .wds-inline-prompt--proposition button:hover {
487
+ color: var(--color-sentiment-positive-primary-hover);
488
+ }
489
+ .wds-inline-prompt--proposition a:active,
490
+ .wds-inline-prompt--proposition button:active {
491
+ color: var(--color-sentiment-positive-primary-active);
492
+ }
493
+ .wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):hover {
494
+ background-color: var(--color-sentiment-positive-secondary-hover);
495
+ }
496
+ .wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):active {
497
+ background-color: var(--color-sentiment-positive-secondary-active);
498
+ }
499
+ .wds-inline-prompt--neutral {
496
500
  background-color: rgba(134,167,189,0.10196);
497
501
  background-color: var(--color-background-neutral);
498
502
  color: #37517e;
499
503
  color: var(--color-content-primary);
500
504
  }
501
- .wds-list-item-prompt.neutral a,
502
- .wds-list-item-prompt.neutral button {
505
+ .wds-inline-prompt--neutral a,
506
+ .wds-inline-prompt--neutral button {
503
507
  color: #37517e;
504
508
  color: var(--color-content-primary);
505
509
  }
506
- .wds-list-item-prompt.wds-list-item-prompt.neutral:has(a, button):hover {
510
+ .wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):hover {
507
511
  background-color: var(--color-background-neutral-hover);
508
512
  }
509
- .wds-list-item-prompt.wds-list-item-prompt.neutral:has(a, button):active {
513
+ .wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):active {
510
514
  background-color: var(--color-background-neutral-active);
511
515
  }
512
- .wds-list-item-prompt.warning {
516
+ .wds-inline-prompt--warning {
513
517
  background-color: var(--color-sentiment-warning-secondary);
514
518
  color: var(--color-sentiment-warning-content);
515
519
  }
516
- .wds-list-item-prompt.warning a,
517
- .wds-list-item-prompt.warning button {
520
+ .wds-inline-prompt--warning a,
521
+ .wds-inline-prompt--warning button {
518
522
  color: var(--color-sentiment-warning-content);
519
523
  }
520
- .wds-list-item-prompt.warning a:hover,
521
- .wds-list-item-prompt.warning button:hover {
524
+ .wds-inline-prompt--warning a:hover,
525
+ .wds-inline-prompt--warning button:hover {
522
526
  color: var(--color-sentiment-warning-content-hover);
523
527
  }
524
- .wds-list-item-prompt.warning a:active,
525
- .wds-list-item-prompt.warning button:active {
528
+ .wds-inline-prompt--warning a:active,
529
+ .wds-inline-prompt--warning button:active {
526
530
  color: var(--color-sentiment-warning-content-active);
527
531
  }
528
- .wds-list-item-prompt.wds-list-item-prompt.warning:has(a, button):hover {
532
+ .wds-inline-prompt.wds-inline-prompt--warning:has(a, button):hover {
529
533
  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
530
534
  }
531
- .wds-list-item-prompt.wds-list-item-prompt.warning:has(a, button):active {
535
+ .wds-inline-prompt.wds-inline-prompt--warning:has(a, button):active {
532
536
  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
533
537
  }
538
+ .wds-list-item-prompt {
539
+ grid-area: prompt;
540
+ justify-self: start;
541
+ }
534
542
  .wds-list-item {
535
543
  list-style: none;
536
544
  width: 100%;
@@ -654,7 +662,7 @@
654
662
  }
655
663
  .wds-list-item-body {
656
664
  grid-area: body;
657
- align-items: center;
665
+ align-items: start;
658
666
  width: 100%;
659
667
  display: grid;
660
668
  grid-template-columns: 1fr max-content;
@@ -665,14 +673,27 @@
665
673
  gap: var(--size-16);
666
674
  word-break: break-word;
667
675
  }
676
+ .wds-list-item-titles,
677
+ .wds-list-item-value {
678
+ display: flex;
679
+ flex-direction: column;
680
+ justify-content: center;
681
+ }
682
+ @container (min-width: 309px) {
683
+ .wds-list-item-titles,
684
+ .wds-list-item-value {
685
+ min-height: 100%;
686
+ min-height: var(--wds-list-item-value-min-height, 100%);
687
+ }
688
+ }
689
+ .wds-list-item-value {
690
+ text-align: right;
691
+ }
668
692
  .wds-list-item-title,
669
693
  .wds-list-item-title-value {
670
694
  color: #37517e;
671
695
  color: var(--color-content-primary);
672
696
  }
673
- .wds-list-item-value {
674
- text-align: right;
675
- }
676
697
  .wds-list-item-body-center {
677
698
  display: flex;
678
699
  flex-direction: row;
@@ -699,16 +720,29 @@
699
720
  flex: 0 0 auto;
700
721
  }
701
722
  .wds-list-item.disabled {
702
- filter: none;
703
723
  opacity: 1;
724
+ opacity: initial;
704
725
  }
726
+ .wds-list-item.disabled,
705
727
  .wds-list-item.disabled label {
706
728
  cursor: not-allowed;
707
729
  }
708
- .wds-list-item.disabled .tw-icon-backslash-circle {
730
+ .wds-list-item.disabled .wds-list-item-title,
731
+ .wds-list-item.disabled .wds-list-item-title-value,
732
+ .wds-list-item.disabled .wds-list-item-subtitle,
733
+ .wds-list-item.disabled .wds-list-item-subtitle-value,
734
+ .wds-list-item.disabled .wds-list-item-additional-info {
709
735
  color: #768e9c;
710
736
  color: var(--color-content-tertiary);
711
737
  }
738
+ .wds-list-item.disabled .wds-list-item-media,
739
+ .wds-list-item.disabled .wds-list-item-body,
740
+ .wds-list-item.disabled .wds-list-item-additional-info {
741
+ opacity: 0.93;
742
+ }
743
+ .wds-list-item.disabled--has-prompt-reason .wds-list-item-prompt {
744
+ opacity: 0.93;
745
+ }
712
746
  .wds-list-item-spotlight {
713
747
  padding-left: 12px;
714
748
  padding-left: var(--size-12);
package/build/styles/listItem/ListItem.grid.css CHANGED
@@ -9,7 +9,7 @@
9
9
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
10
10
  margin-top: -2px;
11
11
  }
12
- @container (min-width: 375px) {
12
+ @container (min-width: 309px) {
13
13
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
14
14
  height: var(--wds-list-item-control-wrapper-height);
15
15
  align-content: center;
@@ -105,7 +105,7 @@
105
105
  grid-template-areas: "body";
106
106
  }
107
107
  }
108
- @container (min-width: 297px) and (max-width: 375px) {
108
+ @container (min-width: 241px) and (max-width: 308px) {
109
109
  .wds-list-item-gridWrapper .wds-list-item-media-image {
110
110
  -o-object-position: bottom left;
111
111
  object-position: bottom left;
@@ -231,8 +231,12 @@
231
231
  grid-template-rows: auto;
232
232
  grid-template-areas: "body";
233
233
  }
234
+ .wds-list-item-gridWrapper .wds-list-item-button-control--hasPrompt {
235
+ margin-top: 4px;
236
+ margin-top: var(--size-4);
237
+ }
234
238
  }
235
- @container (max-width: 297px) {
239
+ @container (max-width: 240px) {
236
240
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
237
241
  align-content: start;
238
242
  }
@@ -373,4 +377,8 @@
373
377
  .wds-list-item-gridWrapper .wds-list-item-body .wds-list-item-value {
374
378
  text-align: left;
375
379
  }
380
+ .wds-list-item-gridWrapper .wds-list-item-button-control--hasPrompt {
381
+ margin-top: 4px;
382
+ margin-top: var(--size-4);
383
+ }
376
384
  }
package/build/styles/listItem/ListItem.vars.css ADDED
File without changes
package/build/styles/listItem/Prompt/InlinePrompt/InlinePrompt.css ADDED
@@ -0,0 +1,153 @@
1
+ .wds-inline-prompt {
2
+ display: inline-flex;
3
+ text-align: left;
4
+ padding-top: calc(8px / 2);
5
+ padding-top: calc(var(--padding-x-small) / 2);
6
+ padding-bottom: calc(8px / 2);
7
+ padding-bottom: calc(var(--padding-x-small) / 2);
8
+ padding-left: calc(8px - 1px);
9
+ padding-left: calc(var(--padding-x-small) - 1px);
10
+ padding-right: 8px;
11
+ padding-right: var(--padding-x-small);
12
+ border-radius: 10px;
13
+ border-radius: var(--radius-small);
14
+ word-break: break-word;
15
+ word-wrap: break-word;
16
+ }
17
+ .wds-inline-prompt:has(a),
18
+ .wds-inline-prompt:has(button) {
19
+ position: relative;
20
+ z-index: 1;
21
+ }
22
+ .wds-inline-prompt--muted {
23
+ opacity: 0.93;
24
+ filter: grayscale(1);
25
+ }
26
+ .wds-inline-prompt a,
27
+ .wds-inline-prompt button {
28
+ text-underline-offset: calc(4px / 2);
29
+ text-underline-offset: calc(var(--size-4) / 2);
30
+ }
31
+ .wds-inline-prompt a:first-of-type:before,
32
+ .wds-inline-prompt button:first-of-type:before {
33
+ content: '';
34
+ position: absolute;
35
+ inset: 0;
36
+ }
37
+ .wds-inline-prompt__media-wrapper {
38
+ padding-right: calc(12px / 2);
39
+ padding-right: calc(var(--size-12) / 2);
40
+ padding-top: calc(4px - 1px);
41
+ padding-top: calc(var(--size-4) - 1px);
42
+ padding-bottom: calc(4px - 1px);
43
+ padding-bottom: calc(var(--size-4) - 1px);
44
+ }
45
+ .wds-inline-prompt__media-wrapper .tw-icon-tags,
46
+ .wds-inline-prompt__media-wrapper .tw-icon-confetti {
47
+ color: var(--color-sentiment-positive-primary);
48
+ }
49
+ .wds-inline-prompt--negative {
50
+ background-color: var(--color-sentiment-negative-secondary);
51
+ color: var(--color-sentiment-negative-primary);
52
+ }
53
+ .wds-inline-prompt--negative a,
54
+ .wds-inline-prompt--negative button {
55
+ color: var(--color-sentiment-negative-primary);
56
+ }
57
+ .wds-inline-prompt--negative a:hover,
58
+ .wds-inline-prompt--negative button:hover {
59
+ color: var(--color-sentiment-negative-primary-hover);
60
+ }
61
+ .wds-inline-prompt--negative a:active,
62
+ .wds-inline-prompt--negative button:active {
63
+ color: var(--color-sentiment-negative-primary-active);
64
+ }
65
+ .wds-inline-prompt.wds-inline-prompt--negative:has(a, button):hover {
66
+ background-color: var(--color-sentiment-negative-secondary-hover);
67
+ }
68
+ .wds-inline-prompt.wds-inline-prompt--negative:has(a, button):active {
69
+ background-color: var(--color-sentiment-negative-secondary-active);
70
+ }
71
+ .wds-inline-prompt--positive {
72
+ background-color: var(--color-sentiment-positive-secondary);
73
+ color: var(--color-sentiment-positive-primary);
74
+ }
75
+ .wds-inline-prompt--positive a,
76
+ .wds-inline-prompt--positive button {
77
+ color: var(--color-sentiment-positive-primary);
78
+ }
79
+ .wds-inline-prompt--positive a:hover,
80
+ .wds-inline-prompt--positive button:hover {
81
+ color: var(--color-sentiment-positive-primary-hover);
82
+ }
83
+ .wds-inline-prompt--positive a:active,
84
+ .wds-inline-prompt--positive button:active {
85
+ color: var(--color-sentiment-positive-primary-active);
86
+ }
87
+ .wds-inline-prompt.wds-inline-prompt--positive:has(a, button):hover {
88
+ background-color: var(--color-sentiment-positive-secondary-hover);
89
+ }
90
+ .wds-inline-prompt.wds-inline-prompt--positive:has(a, button):active {
91
+ background-color: var(--color-sentiment-positive-secondary-active);
92
+ }
93
+ .wds-inline-prompt--proposition {
94
+ background-color: var(--color-sentiment-positive-secondary);
95
+ color: var(--color-sentiment-positive-primary);
96
+ }
97
+ .wds-inline-prompt--proposition a,
98
+ .wds-inline-prompt--proposition button {
99
+ color: var(--color-sentiment-positive-primary);
100
+ }
101
+ .wds-inline-prompt--proposition a:hover,
102
+ .wds-inline-prompt--proposition button:hover {
103
+ color: var(--color-sentiment-positive-primary-hover);
104
+ }
105
+ .wds-inline-prompt--proposition a:active,
106
+ .wds-inline-prompt--proposition button:active {
107
+ color: var(--color-sentiment-positive-primary-active);
108
+ }
109
+ .wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):hover {
110
+ background-color: var(--color-sentiment-positive-secondary-hover);
111
+ }
112
+ .wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):active {
113
+ background-color: var(--color-sentiment-positive-secondary-active);
114
+ }
115
+ .wds-inline-prompt--neutral {
116
+ background-color: rgba(134,167,189,0.10196);
117
+ background-color: var(--color-background-neutral);
118
+ color: #37517e;
119
+ color: var(--color-content-primary);
120
+ }
121
+ .wds-inline-prompt--neutral a,
122
+ .wds-inline-prompt--neutral button {
123
+ color: #37517e;
124
+ color: var(--color-content-primary);
125
+ }
126
+ .wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):hover {
127
+ background-color: var(--color-background-neutral-hover);
128
+ }
129
+ .wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):active {
130
+ background-color: var(--color-background-neutral-active);
131
+ }
132
+ .wds-inline-prompt--warning {
133
+ background-color: var(--color-sentiment-warning-secondary);
134
+ color: var(--color-sentiment-warning-content);
135
+ }
136
+ .wds-inline-prompt--warning a,
137
+ .wds-inline-prompt--warning button {
138
+ color: var(--color-sentiment-warning-content);
139
+ }
140
+ .wds-inline-prompt--warning a:hover,
141
+ .wds-inline-prompt--warning button:hover {
142
+ color: var(--color-sentiment-warning-content-hover);
143
+ }
144
+ .wds-inline-prompt--warning a:active,
145
+ .wds-inline-prompt--warning button:active {
146
+ color: var(--color-sentiment-warning-content-active);
147
+ }
148
+ .wds-inline-prompt.wds-inline-prompt--warning:has(a, button):hover {
149
+ background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
150
+ }
151
+ .wds-inline-prompt.wds-inline-prompt--warning:has(a, button):active {
152
+ background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
153
+ }