@transferwise/components 0.0.0-experimental-04d15ef → 0.0.0-experimental-bfbd26d

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/build/listItem/AvatarView/ListItemAvatarView.js +2 -0
  2. package/build/listItem/AvatarView/ListItemAvatarView.js.map +1 -1
  3. package/build/listItem/AvatarView/ListItemAvatarView.mjs +2 -0
  4. package/build/listItem/AvatarView/ListItemAvatarView.mjs.map +1 -1
  5. package/build/listItem/ListItem.js +7 -1
  6. package/build/listItem/ListItem.js.map +1 -1
  7. package/build/listItem/ListItem.mjs +7 -1
  8. package/build/listItem/ListItem.mjs.map +1 -1
  9. package/build/listItem/ListItemContext.js.map +1 -1
  10. package/build/listItem/ListItemContext.mjs.map +1 -1
  11. package/build/listItem/useListItemMedia.js +21 -0
  12. package/build/listItem/useListItemMedia.js.map +1 -0
  13. package/build/listItem/useListItemMedia.mjs +19 -0
  14. package/build/listItem/useListItemMedia.mjs.map +1 -0
  15. package/build/main.css +27 -60
  16. package/build/styles/listItem/ListItem.css +27 -60
  17. package/build/styles/listItem/ListItem.grid.css +9 -9
  18. package/build/styles/main.css +27 -60
  19. package/build/types/listItem/AvatarView/ListItemAvatarView.d.ts.map +1 -1
  20. package/build/types/listItem/ListItem.d.ts.map +1 -1
  21. package/build/types/listItem/ListItemContext.d.ts +4 -0
  22. package/build/types/listItem/ListItemContext.d.ts.map +1 -1
  23. package/build/types/listItem/useListItemMedia.d.ts +6 -0
  24. package/build/types/listItem/useListItemMedia.d.ts.map +1 -0
  25. package/package.json +1 -1
  26. package/src/listItem/AvatarView/ListItemAvatarView.tsx +3 -0
  27. package/src/listItem/Button/ListItemButton.spec.tsx +2 -0
  28. package/src/listItem/ListItem.css +27 -60
  29. package/src/listItem/ListItem.grid.css +9 -9
  30. package/src/listItem/ListItem.grid.less +13 -13
  31. package/src/listItem/ListItem.less +25 -76
  32. package/src/listItem/ListItem.tsx +16 -2
  33. package/src/listItem/ListItemContext.tsx +5 -0
  34. package/src/listItem/_stories/ListItem.story.tsx +5 -5
  35. package/src/listItem/_stories/ListItem.variants.test.story.tsx +5 -2
  36. package/src/listItem/useListItemMedia.tsx +13 -0
  37. package/src/main.css +27 -60
package/build/styles/listItem/ListItem.css CHANGED
@@ -5,21 +5,21 @@
5
5
  gap: 4px 16px;
6
6
  gap: var(--size-4) var(--size-16);
7
7
  }
8
- @container (min-width: 380px) {
8
+ @container (min-width: 375px) {
9
9
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
10
10
  grid-template-columns: auto 1fr auto;
11
11
  grid-template-rows: auto auto auto;
12
- grid-template-areas: "media body control" "media info control" "media prompt prompt";
12
+ grid-template-areas: "media body control" "media info ." ". prompt prompt";
13
13
  }
14
14
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
15
15
  grid-template-columns: auto 1fr auto;
16
16
  grid-template-rows: auto auto;
17
- grid-template-areas: "media body control" "media info control";
17
+ grid-template-areas: "media body control" "media info .";
18
18
  }
19
19
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
20
20
  grid-template-columns: auto 1fr auto;
21
21
  grid-template-rows: auto auto;
22
- grid-template-areas: "media body control" "media prompt prompt";
22
+ grid-template-areas: "media body control" ". prompt prompt";
23
23
  }
24
24
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
25
25
  grid-template-columns: auto 1fr auto;
@@ -29,7 +29,7 @@
29
29
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
30
30
  grid-template-columns: auto 1fr;
31
31
  grid-template-rows: auto auto;
32
- grid-template-areas: "media body" "media info" "media prompt";
32
+ grid-template-areas: "media body" "media info" ". prompt";
33
33
  }
34
34
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
35
35
  grid-template-columns: auto 1fr;
@@ -52,12 +52,12 @@
52
52
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
53
53
  grid-template-columns: 1fr auto;
54
54
  grid-template-rows: auto auto auto;
55
- grid-template-areas: "body control" "info control" "prompt prompt";
55
+ grid-template-areas: "body control" "info ." "prompt prompt";
56
56
  }
57
57
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
58
58
  grid-template-columns: 1fr auto;
59
59
  grid-template-rows: auto auto;
60
- grid-template-areas: "body control" "info control";
60
+ grid-template-areas: "body control" "info .";
61
61
  }
62
62
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
63
63
  grid-template-columns: 1fr auto;
@@ -93,7 +93,7 @@
93
93
  grid-template-areas: "body";
94
94
  }
95
95
  }
96
- @container (min-width: 290px) and (max-width: 380px) {
96
+ @container (min-width: 297px) and (max-width: 375px) {
97
97
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
98
98
  margin-bottom: 12px;
99
99
  margin-bottom: var(--size-12);
@@ -221,7 +221,7 @@
221
221
  grid-template-areas: "body";
222
222
  }
223
223
  }
224
- @container (max-width: 290px) {
224
+ @container (max-width: 297px) {
225
225
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
226
226
  grid-template-columns: auto 1fr;
227
227
  grid-template-rows: auto auto auto;
@@ -368,8 +368,8 @@
368
368
  background-color: #ffffff;
369
369
  background-color: var(--color-background-screen);
370
370
  position: relative;
371
- padding: 12px 0;
372
- padding: var(--size-12) 0;
371
+ padding: 12px;
372
+ padding: var(--size-12);
373
373
  container-type: inline-size;
374
374
  }
375
375
  .wds-list-item + .wds-list-item-spotlight,
@@ -403,6 +403,12 @@
403
403
  .wds-list-item-interactive .np-checkbox-button:has(input[type="checkbox"]:focus-visible) .tw-checkbox-button {
404
404
  outline: none;
405
405
  }
406
+ .wds-list-item-interactive:has(.wds-list-item-control:focus-visible),
407
+ .wds-list-item-interactive:has(input[type="checkbox"]:focus-visible) {
408
+ outline: var(--ring-outline-color) solid var(--ring-outline-width);
409
+ outline-offset: var(--ring-outline-offset);
410
+ outline-offset: -1px;
411
+ }
406
412
  .wds-list-item-interactive .wds-list-item-additional-info {
407
413
  --ring-outline-offset: 0;
408
414
  }
@@ -421,59 +427,24 @@
421
427
  position: absolute;
422
428
  inset: 0;
423
429
  }
424
- .wds-list-item-interactive.wds-list-item-spotlight:has(.wds-list-item-control:focus-visible),
425
- .wds-list-item-interactive.wds-list-item-spotlight:has(input[type="checkbox"]:focus-visible) {
426
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
427
- outline-offset: var(--ring-outline-offset);
428
- outline-offset: -1px;
429
- }
430
- .wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):hover {
430
+ .wds-list-item-interactive:not(.disabled):not(:disabled):hover {
431
431
  background-color: var(--color-background-screen-hover);
432
432
  }
433
- .wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):active {
434
- background-color: var(--color-background-screen-active);
435
- }
436
- .wds-list-item-interactive.wds-list-item-spotlight:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
437
- background-color: transparent;
438
- background-color: initial;
439
- }
440
- .wds-list-item-interactive:not(.wds-list-item-spotlight):has(.wds-list-item-control:focus-visible):before,
441
- .wds-list-item-interactive:not(.wds-list-item-spotlight):has(input[type="checkbox"]:focus-visible):before {
442
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
443
- outline-offset: var(--ring-outline-offset);
444
- content: '';
445
- position: absolute;
446
- inset: 0 -8px;
447
- border-radius: 16px;
448
- border-radius: var(--radius-medium);
449
- outline-offset: -1px;
450
- }
451
- .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before,
452
- .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):active:before {
453
- content: '';
454
- position: absolute;
455
- inset: 0 -8px;
456
- border-radius: 16px;
457
- border-radius: var(--radius-medium);
458
- }
459
- .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before {
460
- background-color: var(--color-background-screen-hover);
461
- }
462
- .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):active:before {
463
- background-color: var(--color-background-screen-active);
464
- }
465
- .wds-list-item-interactive:not(.wds-list-item-spotlight):has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover:before {
466
- background-color: transparent;
467
- background-color: initial;
468
- }
469
433
  .wds-list-item-interactive:not(.disabled):not(:disabled):hover .wds-list-item-control-wrapper .wds-Button {
470
434
  background-color: var(--Button-background-hover);
471
435
  color: var(--Button-color-hover);
472
436
  transition: none;
473
437
  }
438
+ .wds-list-item-interactive:not(.disabled):not(:disabled):active {
439
+ background-color: var(--color-background-screen-active);
440
+ }
474
441
  .wds-list-item-interactive .wds-list-item-button-control .wds-Button {
475
442
  transition: none;
476
443
  }
444
+ .wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
445
+ background-color: transparent;
446
+ background-color: initial;
447
+ }
477
448
  .wds-list-item-media {
478
449
  grid-area: media;
479
450
  }
@@ -510,6 +481,8 @@
510
481
  }
511
482
  .wds-list-item-control-wrapper {
512
483
  grid-area: control;
484
+ align-content: center;
485
+ max-height: var(--wds-list-item-control-wrapper-height);
513
486
  }
514
487
  .wds-list-item-control {
515
488
  flex: 0 0 auto;
@@ -525,12 +498,6 @@
525
498
  color: #768e9c;
526
499
  color: var(--color-content-tertiary);
527
500
  }
528
- .wds-list-item-spotlight {
529
- padding-left: 12px;
530
- padding-left: var(--size-12);
531
- padding-right: 12px;
532
- padding-right: var(--size-12);
533
- }
534
501
  .wds-list-item-spotlight-active {
535
502
  background-color: rgba(134,167,189,0.10196);
536
503
  background-color: var(--color-background-neutral);
package/build/styles/listItem/ListItem.grid.css CHANGED
@@ -5,21 +5,21 @@
5
5
  gap: 4px 16px;
6
6
  gap: var(--size-4) var(--size-16);
7
7
  }
8
- @container (min-width: 380px) {
8
+ @container (min-width: 375px) {
9
9
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
10
10
  grid-template-columns: auto 1fr auto;
11
11
  grid-template-rows: auto auto auto;
12
- grid-template-areas: "media body control" "media info control" "media prompt prompt";
12
+ grid-template-areas: "media body control" "media info ." ". prompt prompt";
13
13
  }
14
14
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
15
15
  grid-template-columns: auto 1fr auto;
16
16
  grid-template-rows: auto auto;
17
- grid-template-areas: "media body control" "media info control";
17
+ grid-template-areas: "media body control" "media info .";
18
18
  }
19
19
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
20
20
  grid-template-columns: auto 1fr auto;
21
21
  grid-template-rows: auto auto;
22
- grid-template-areas: "media body control" "media prompt prompt";
22
+ grid-template-areas: "media body control" ". prompt prompt";
23
23
  }
24
24
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
25
25
  grid-template-columns: auto 1fr auto;
@@ -29,7 +29,7 @@
29
29
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
30
30
  grid-template-columns: auto 1fr;
31
31
  grid-template-rows: auto auto;
32
- grid-template-areas: "media body" "media info" "media prompt";
32
+ grid-template-areas: "media body" "media info" ". prompt";
33
33
  }
34
34
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
35
35
  grid-template-columns: auto 1fr;
@@ -52,12 +52,12 @@
52
52
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
53
53
  grid-template-columns: 1fr auto;
54
54
  grid-template-rows: auto auto auto;
55
- grid-template-areas: "body control" "info control" "prompt prompt";
55
+ grid-template-areas: "body control" "info ." "prompt prompt";
56
56
  }
57
57
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
58
58
  grid-template-columns: 1fr auto;
59
59
  grid-template-rows: auto auto;
60
- grid-template-areas: "body control" "info control";
60
+ grid-template-areas: "body control" "info .";
61
61
  }
62
62
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
63
63
  grid-template-columns: 1fr auto;
@@ -93,7 +93,7 @@
93
93
  grid-template-areas: "body";
94
94
  }
95
95
  }
96
- @container (min-width: 290px) and (max-width: 380px) {
96
+ @container (min-width: 297px) and (max-width: 375px) {
97
97
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
98
98
  margin-bottom: 12px;
99
99
  margin-bottom: var(--size-12);
@@ -221,7 +221,7 @@
221
221
  grid-template-areas: "body";
222
222
  }
223
223
  }
224
- @container (max-width: 290px) {
224
+ @container (max-width: 297px) {
225
225
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
226
226
  grid-template-columns: auto 1fr;
227
227
  grid-template-rows: auto auto auto;
package/build/styles/main.css CHANGED
@@ -2640,21 +2640,21 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2640
2640
  gap: 4px 16px;
2641
2641
  gap: var(--size-4) var(--size-16);
2642
2642
  }
2643
- @container (min-width: 380px) {
2643
+ @container (min-width: 375px) {
2644
2644
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
2645
2645
  grid-template-columns: auto 1fr auto;
2646
2646
  grid-template-rows: auto auto auto;
2647
- grid-template-areas: "media body control" "media info control" "media prompt prompt";
2647
+ grid-template-areas: "media body control" "media info ." ". prompt prompt";
2648
2648
  }
2649
2649
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
2650
2650
  grid-template-columns: auto 1fr auto;
2651
2651
  grid-template-rows: auto auto;
2652
- grid-template-areas: "media body control" "media info control";
2652
+ grid-template-areas: "media body control" "media info .";
2653
2653
  }
2654
2654
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
2655
2655
  grid-template-columns: auto 1fr auto;
2656
2656
  grid-template-rows: auto auto;
2657
- grid-template-areas: "media body control" "media prompt prompt";
2657
+ grid-template-areas: "media body control" ". prompt prompt";
2658
2658
  }
2659
2659
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
2660
2660
  grid-template-columns: auto 1fr auto;
@@ -2664,7 +2664,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2664
2664
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
2665
2665
  grid-template-columns: auto 1fr;
2666
2666
  grid-template-rows: auto auto;
2667
- grid-template-areas: "media body" "media info" "media prompt";
2667
+ grid-template-areas: "media body" "media info" ". prompt";
2668
2668
  }
2669
2669
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
2670
2670
  grid-template-columns: auto 1fr;
@@ -2687,12 +2687,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2687
2687
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
2688
2688
  grid-template-columns: 1fr auto;
2689
2689
  grid-template-rows: auto auto auto;
2690
- grid-template-areas: "body control" "info control" "prompt prompt";
2690
+ grid-template-areas: "body control" "info ." "prompt prompt";
2691
2691
  }
2692
2692
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
2693
2693
  grid-template-columns: 1fr auto;
2694
2694
  grid-template-rows: auto auto;
2695
- grid-template-areas: "body control" "info control";
2695
+ grid-template-areas: "body control" "info .";
2696
2696
  }
2697
2697
  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
2698
2698
  grid-template-columns: 1fr auto;
@@ -2728,7 +2728,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2728
2728
  grid-template-areas: "body";
2729
2729
  }
2730
2730
  }
2731
- @container (min-width: 290px) and (max-width: 380px) {
2731
+ @container (min-width: 297px) and (max-width: 375px) {
2732
2732
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
2733
2733
  margin-bottom: 12px;
2734
2734
  margin-bottom: var(--size-12);
@@ -2856,7 +2856,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2856
2856
  grid-template-areas: "body";
2857
2857
  }
2858
2858
  }
2859
- @container (max-width: 290px) {
2859
+ @container (max-width: 297px) {
2860
2860
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
2861
2861
  grid-template-columns: auto 1fr;
2862
2862
  grid-template-rows: auto auto auto;
@@ -3003,8 +3003,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3003
3003
  background-color: #ffffff;
3004
3004
  background-color: var(--color-background-screen);
3005
3005
  position: relative;
3006
- padding: 12px 0;
3007
- padding: var(--size-12) 0;
3006
+ padding: 12px;
3007
+ padding: var(--size-12);
3008
3008
  container-type: inline-size;
3009
3009
  }
3010
3010
  .wds-list-item + .wds-list-item-spotlight,
@@ -3038,6 +3038,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3038
3038
  .wds-list-item-interactive .np-checkbox-button:has(input[type="checkbox"]:focus-visible) .tw-checkbox-button {
3039
3039
  outline: none;
3040
3040
  }
3041
+ .wds-list-item-interactive:has(.wds-list-item-control:focus-visible),
3042
+ .wds-list-item-interactive:has(input[type="checkbox"]:focus-visible) {
3043
+ outline: var(--ring-outline-color) solid var(--ring-outline-width);
3044
+ outline-offset: var(--ring-outline-offset);
3045
+ outline-offset: -1px;
3046
+ }
3041
3047
  .wds-list-item-interactive .wds-list-item-additional-info {
3042
3048
  --ring-outline-offset: 0;
3043
3049
  }
@@ -3056,59 +3062,24 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3056
3062
  position: absolute;
3057
3063
  inset: 0;
3058
3064
  }
3059
- .wds-list-item-interactive.wds-list-item-spotlight:has(.wds-list-item-control:focus-visible),
3060
- .wds-list-item-interactive.wds-list-item-spotlight:has(input[type="checkbox"]:focus-visible) {
3061
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
3062
- outline-offset: var(--ring-outline-offset);
3063
- outline-offset: -1px;
3064
- }
3065
- .wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):hover {
3066
- background-color: var(--color-background-screen-hover);
3067
- }
3068
- .wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):active {
3069
- background-color: var(--color-background-screen-active);
3070
- }
3071
- .wds-list-item-interactive.wds-list-item-spotlight:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
3072
- background-color: transparent;
3073
- background-color: initial;
3074
- }
3075
- .wds-list-item-interactive:not(.wds-list-item-spotlight):has(.wds-list-item-control:focus-visible):before,
3076
- .wds-list-item-interactive:not(.wds-list-item-spotlight):has(input[type="checkbox"]:focus-visible):before {
3077
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
3078
- outline-offset: var(--ring-outline-offset);
3079
- content: '';
3080
- position: absolute;
3081
- inset: 0 -8px;
3082
- border-radius: 16px;
3083
- border-radius: var(--radius-medium);
3084
- outline-offset: -1px;
3085
- }
3086
- .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before,
3087
- .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):active:before {
3088
- content: '';
3089
- position: absolute;
3090
- inset: 0 -8px;
3091
- border-radius: 16px;
3092
- border-radius: var(--radius-medium);
3093
- }
3094
- .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before {
3065
+ .wds-list-item-interactive:not(.disabled):not(:disabled):hover {
3095
3066
  background-color: var(--color-background-screen-hover);
3096
3067
  }
3097
- .wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):active:before {
3098
- background-color: var(--color-background-screen-active);
3099
- }
3100
- .wds-list-item-interactive:not(.wds-list-item-spotlight):has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover:before {
3101
- background-color: transparent;
3102
- background-color: initial;
3103
- }
3104
3068
  .wds-list-item-interactive:not(.disabled):not(:disabled):hover .wds-list-item-control-wrapper .wds-Button {
3105
3069
  background-color: var(--Button-background-hover);
3106
3070
  color: var(--Button-color-hover);
3107
3071
  transition: none;
3108
3072
  }
3073
+ .wds-list-item-interactive:not(.disabled):not(:disabled):active {
3074
+ background-color: var(--color-background-screen-active);
3075
+ }
3109
3076
  .wds-list-item-interactive .wds-list-item-button-control .wds-Button {
3110
3077
  transition: none;
3111
3078
  }
3079
+ .wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
3080
+ background-color: transparent;
3081
+ background-color: initial;
3082
+ }
3112
3083
  .wds-list-item-media {
3113
3084
  grid-area: media;
3114
3085
  }
@@ -3145,6 +3116,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3145
3116
  }
3146
3117
  .wds-list-item-control-wrapper {
3147
3118
  grid-area: control;
3119
+ align-content: center;
3120
+ max-height: var(--wds-list-item-control-wrapper-height);
3148
3121
  }
3149
3122
  .wds-list-item-control {
3150
3123
  flex: 0 0 auto;
@@ -3160,12 +3133,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3160
3133
  color: #768e9c;
3161
3134
  color: var(--color-content-tertiary);
3162
3135
  }
3163
- .wds-list-item-spotlight {
3164
- padding-left: 12px;
3165
- padding-left: var(--size-12);
3166
- padding-right: 12px;
3167
- padding-right: var(--size-12);
3168
- }
3169
3136
  .wds-list-item-spotlight-active {
3170
3137
  background-color: rgba(134,167,189,0.10196);
3171
3138
  background-color: var(--color-background-neutral);
package/build/types/listItem/AvatarView/ListItemAvatarView.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ListItemAvatarView.d.ts","sourceRoot":"","sources":["../../../../src/listItem/AvatarView/ListItemAvatarView.tsx"],"names":[],"mappings":"AACA,OAAuB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnE,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG;IACpF,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;CAC/B,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,UAAU;oCAAwC,uBAAuB;;CAQrF,CAAC"}
1
+ {"version":3,"file":"ListItemAvatarView.d.ts","sourceRoot":"","sources":["../../../../src/listItem/AvatarView/ListItemAvatarView.tsx"],"names":[],"mappings":"AACA,OAAuB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGnE,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG;IACpF,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;CAC/B,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,UAAU;oCAAwC,uBAAuB;;CAUrF,CAAC"}
package/build/types/listItem/ListItem.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItem.tsx"],"names":[],"mappings":"AACA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAc,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AACxE,OAAO,EAAY,KAAK,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAClE,OAAO,EAAc,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAExE,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC5D,OAAO,EAAS,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAQ5D,MAAM,MAAM,aAAa,GACrB,iBAAiB,GACjB,YAAY,GACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,aAAa,CAAC;AAElB,MAAM,MAAM,oBAAoB,GAC5B,uBAAuB,GACvB,qBAAqB,GACrB,mBAAmB,GACnB,uBAAuB,GACvB,kBAAkB,GAClB,mBAAmB,CAAC;AAExB,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ;4NAkBlB,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6MP,CAAC;AA0GF,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItem.tsx"],"names":[],"mappings":"AACA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAc,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AACxE,OAAO,EAAY,KAAK,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAClE,OAAO,EAAc,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAExE,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC5D,OAAO,EAAS,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAY5D,MAAM,MAAM,aAAa,GACrB,iBAAiB,GACjB,YAAY,GACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,aAAa,CAAC;AAElB,MAAM,MAAM,oBAAoB,GAC5B,uBAAuB,GACvB,qBAAqB,GACrB,mBAAmB,GACnB,uBAAuB,GACvB,kBAAkB,GAClB,mBAAmB,CAAC;AAExB,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ;4NAkBlB,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsNP,CAAC;AA0GF,eAAe,QAAQ,CAAC"}
package/build/types/listItem/ListItemContext.d.ts CHANGED
@@ -1,7 +1,10 @@
1
1
  import type { ListItemTypes, ListItemControlProps, Props as ListItemProps } from './ListItem';
2
+ import type { ListItemAvatarViewProps } from './AvatarView';
3
+ export type ListItemMediaSize = 32 | 40 | 48 | 56 | 72;
2
4
  export type ListItemContextData = {
3
5
  setControlType: (type: ListItemTypes) => void;
4
6
  setControlProps: (props: ListItemControlProps) => void;
7
+ setMediaSize: (size: ListItemMediaSize | undefined) => void;
5
8
  ids: {
6
9
  title: string;
7
10
  subtitle?: string;
@@ -12,6 +15,7 @@ export type ListItemContextData = {
12
15
  prompt?: string;
13
16
  };
14
17
  props: Pick<ListItemProps, 'disabled' | 'inverted'>;
18
+ mediaSize?: ListItemAvatarViewProps['size'];
15
19
  describedByIds: string;
16
20
  };
17
21
  export declare const ListItemContext: import("react").Context<ListItemContextData>;
package/build/types/listItem/ListItemContext.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ListItemContext.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItemContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,oBAAoB,EAAE,KAAK,IAAI,aAAa,EAAE,MAAM,YAAY,CAAC;AAE9F,MAAM,MAAM,mBAAmB,GAAG;IAChC,cAAc,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,eAAe,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACvD,GAAG,EAAE;QACH,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,UAAU,CAAC,CAAC;IACpD,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,eAAe,8CAE3B,CAAC"}
1
+ {"version":3,"file":"ListItemContext.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItemContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,oBAAoB,EAAE,KAAK,IAAI,aAAa,EAAE,MAAM,YAAY,CAAC;AAC9F,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAE5D,MAAM,MAAM,iBAAiB,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEvD,MAAM,MAAM,mBAAmB,GAAG;IAChC,cAAc,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,eAAe,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACvD,YAAY,EAAE,CAAC,IAAI,EAAE,iBAAiB,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5D,GAAG,EAAE;QACH,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,UAAU,CAAC,CAAC;IACpD,SAAS,CAAC,EAAE,uBAAuB,CAAC,MAAM,CAAC,CAAC;IAC5C,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,eAAe,8CAE3B,CAAC"}
package/build/types/listItem/useListItemMedia.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import type { ListItemAvatarViewProps } from './AvatarView';
2
+ export declare function useListItemMedia(size?: ListItemAvatarViewProps['size']): {
3
+ mediaSize: 32 | 40 | 48 | 56 | 72 | undefined;
4
+ setMediaSize: (size: import("./ListItemContext").ListItemMediaSize | undefined) => void;
5
+ };
6
+ //# sourceMappingURL=useListItemMedia.d.ts.map
package/build/types/listItem/useListItemMedia.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useListItemMedia.d.ts","sourceRoot":"","sources":["../../../src/listItem/useListItemMedia.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAE5D,wBAAgB,gBAAgB,CAAC,IAAI,CAAC,EAAE,uBAAuB,CAAC,MAAM,CAAC;;;EAQtE"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-04d15ef",
3
+ "version": "0.0.0-experimental-bfbd26d",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
package/src/listItem/AvatarView/ListItemAvatarView.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import { clsx } from 'clsx';
2
2
  import AvatarViewComp, { AvatarViewProps } from '../../avatarView';
3
+ import { useListItemMedia } from '../useListItemMedia';
3
4
 
4
5
  export type ListItemAvatarViewProps = Omit<AvatarViewProps, 'size' | 'interactive'> & {
5
6
  size?: 32 | 40 | 48 | 56 | 72;
@@ -13,6 +14,8 @@ export type ListItemAvatarViewProps = Omit<AvatarViewProps, 'size' | 'interactiv
13
14
  * Please refer to the [Design documentation](https://wise.design/components/list-item#avatar) for details.
14
15
  */
15
16
  export const AvatarView = ({ className, size = 48, ...props }: ListItemAvatarViewProps) => {
17
+ useListItemMedia(size);
18
+
16
19
  return (
17
20
  <AvatarViewComp
18
21
  {...props}
package/src/listItem/Button/ListItemButton.spec.tsx CHANGED
@@ -8,6 +8,7 @@ mockMatchMedia();
8
8
  describe('ItemButton', () => {
9
9
  const mockSetControlType = jest.fn();
10
10
  const mockSetControlProps = jest.fn();
11
+ const mockSetMediaSize = jest.fn();
11
12
 
12
13
  const renderWithItemContext = (ui: React.ReactNode) => {
13
14
  return render(
@@ -15,6 +16,7 @@ describe('ItemButton', () => {
15
16
  value={{
16
17
  setControlType: mockSetControlType,
17
18
  setControlProps: mockSetControlProps,
19
+ setMediaSize: mockSetMediaSize,
18
20
  ids: {
19
21
  title: 'title',
20
22
  additionalInfo: 'additional Info',