@transferwise/components 0.0.0-experimental-1bec623 → 0.0.0-experimental-53e394f

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 (8) hide show
  1. package/build/main.css +18 -9
  2. package/build/styles/listItem/ListItem.css +18 -9
  3. package/build/styles/main.css +18 -9
  4. package/package.json +2 -2
  5. package/src/listItem/ListItem.css +18 -9
  6. package/src/listItem/ListItem.less +17 -6
  7. package/src/listItem/_stories/ListItem.story.tsx +1 -1
  8. package/src/main.css +18 -9
package/build/main.css CHANGED
@@ -3003,14 +3003,14 @@ 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;
3007
- padding: var(--size-12);
3006
+ padding: 12px 0;
3007
+ padding: var(--size-12) 0;
3008
3008
  container-type: inline-size;
3009
3009
  }
3010
3010
  .wds-list-item + .wds-list-item-spotlight,
3011
3011
  .wds-list-item-spotlight + .wds-list-item {
3012
- margin-top: 12px;
3013
- margin-top: var(--size-12);
3012
+ margin-top: 16px;
3013
+ margin-top: var(--size-16);
3014
3014
  }
3015
3015
  .wds-list-item:focus-within {
3016
3016
  z-index: 1;
@@ -3038,11 +3038,15 @@ 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) {
3041
+ .wds-list-item-interactive:has(.wds-list-item-control:focus-visible):before,
3042
+ .wds-list-item-interactive:has(input[type="checkbox"]:focus-visible):before {
3043
3043
  outline: var(--ring-outline-color) solid var(--ring-outline-width);
3044
3044
  outline-offset: var(--ring-outline-offset);
3045
- outline-offset: -1px;
3045
+ content: '';
3046
+ position: absolute;
3047
+ inset: 0 -8px;
3048
+ border-radius: 16px;
3049
+ border-radius: var(--radius-medium);
3046
3050
  }
3047
3051
  .wds-list-item-interactive .wds-list-item-additional-info {
3048
3052
  --ring-outline-offset: 0;
@@ -3062,8 +3066,13 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3062
3066
  position: absolute;
3063
3067
  inset: 0;
3064
3068
  }
3065
- .wds-list-item-interactive:not(.disabled):not(:disabled):hover {
3069
+ .wds-list-item-interactive:not(.disabled):not(:disabled):hover:before {
3070
+ content: '';
3071
+ position: absolute;
3072
+ inset: 0 -8px;
3066
3073
  background-color: var(--color-background-screen-hover);
3074
+ border-radius: 16px;
3075
+ border-radius: var(--radius-medium);
3067
3076
  }
3068
3077
  .wds-list-item-interactive:not(.disabled):not(:disabled):hover .wds-list-item-control-wrapper .wds-Button {
3069
3078
  background-color: var(--Button-background-hover);
@@ -3076,7 +3085,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3076
3085
  .wds-list-item-interactive .wds-list-item-button-control .wds-Button {
3077
3086
  transition: none;
3078
3087
  }
3079
- .wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
3088
+ .wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover:before {
3080
3089
  background-color: transparent;
3081
3090
  background-color: initial;
3082
3091
  }
package/build/styles/listItem/ListItem.css CHANGED
@@ -368,14 +368,14 @@
368
368
  background-color: #ffffff;
369
369
  background-color: var(--color-background-screen);
370
370
  position: relative;
371
- padding: 12px;
372
- padding: var(--size-12);
371
+ padding: 12px 0;
372
+ padding: var(--size-12) 0;
373
373
  container-type: inline-size;
374
374
  }
375
375
  .wds-list-item + .wds-list-item-spotlight,
376
376
  .wds-list-item-spotlight + .wds-list-item {
377
- margin-top: 12px;
378
- margin-top: var(--size-12);
377
+ margin-top: 16px;
378
+ margin-top: var(--size-16);
379
379
  }
380
380
  .wds-list-item:focus-within {
381
381
  z-index: 1;
@@ -403,11 +403,15 @@
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) {
406
+ .wds-list-item-interactive:has(.wds-list-item-control:focus-visible):before,
407
+ .wds-list-item-interactive:has(input[type="checkbox"]:focus-visible):before {
408
408
  outline: var(--ring-outline-color) solid var(--ring-outline-width);
409
409
  outline-offset: var(--ring-outline-offset);
410
- outline-offset: -1px;
410
+ content: '';
411
+ position: absolute;
412
+ inset: 0 -8px;
413
+ border-radius: 16px;
414
+ border-radius: var(--radius-medium);
411
415
  }
412
416
  .wds-list-item-interactive .wds-list-item-additional-info {
413
417
  --ring-outline-offset: 0;
@@ -427,8 +431,13 @@
427
431
  position: absolute;
428
432
  inset: 0;
429
433
  }
430
- .wds-list-item-interactive:not(.disabled):not(:disabled):hover {
434
+ .wds-list-item-interactive:not(.disabled):not(:disabled):hover:before {
435
+ content: '';
436
+ position: absolute;
437
+ inset: 0 -8px;
431
438
  background-color: var(--color-background-screen-hover);
439
+ border-radius: 16px;
440
+ border-radius: var(--radius-medium);
432
441
  }
433
442
  .wds-list-item-interactive:not(.disabled):not(:disabled):hover .wds-list-item-control-wrapper .wds-Button {
434
443
  background-color: var(--Button-background-hover);
@@ -441,7 +450,7 @@
441
450
  .wds-list-item-interactive .wds-list-item-button-control .wds-Button {
442
451
  transition: none;
443
452
  }
444
- .wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
453
+ .wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover:before {
445
454
  background-color: transparent;
446
455
  background-color: initial;
447
456
  }
package/build/styles/main.css CHANGED
@@ -3003,14 +3003,14 @@ 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;
3007
- padding: var(--size-12);
3006
+ padding: 12px 0;
3007
+ padding: var(--size-12) 0;
3008
3008
  container-type: inline-size;
3009
3009
  }
3010
3010
  .wds-list-item + .wds-list-item-spotlight,
3011
3011
  .wds-list-item-spotlight + .wds-list-item {
3012
- margin-top: 12px;
3013
- margin-top: var(--size-12);
3012
+ margin-top: 16px;
3013
+ margin-top: var(--size-16);
3014
3014
  }
3015
3015
  .wds-list-item:focus-within {
3016
3016
  z-index: 1;
@@ -3038,11 +3038,15 @@ 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) {
3041
+ .wds-list-item-interactive:has(.wds-list-item-control:focus-visible):before,
3042
+ .wds-list-item-interactive:has(input[type="checkbox"]:focus-visible):before {
3043
3043
  outline: var(--ring-outline-color) solid var(--ring-outline-width);
3044
3044
  outline-offset: var(--ring-outline-offset);
3045
- outline-offset: -1px;
3045
+ content: '';
3046
+ position: absolute;
3047
+ inset: 0 -8px;
3048
+ border-radius: 16px;
3049
+ border-radius: var(--radius-medium);
3046
3050
  }
3047
3051
  .wds-list-item-interactive .wds-list-item-additional-info {
3048
3052
  --ring-outline-offset: 0;
@@ -3062,8 +3066,13 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3062
3066
  position: absolute;
3063
3067
  inset: 0;
3064
3068
  }
3065
- .wds-list-item-interactive:not(.disabled):not(:disabled):hover {
3069
+ .wds-list-item-interactive:not(.disabled):not(:disabled):hover:before {
3070
+ content: '';
3071
+ position: absolute;
3072
+ inset: 0 -8px;
3066
3073
  background-color: var(--color-background-screen-hover);
3074
+ border-radius: 16px;
3075
+ border-radius: var(--radius-medium);
3067
3076
  }
3068
3077
  .wds-list-item-interactive:not(.disabled):not(:disabled):hover .wds-list-item-control-wrapper .wds-Button {
3069
3078
  background-color: var(--Button-background-hover);
@@ -3076,7 +3085,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3076
3085
  .wds-list-item-interactive .wds-list-item-button-control .wds-Button {
3077
3086
  transition: none;
3078
3087
  }
3079
- .wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
3088
+ .wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover:before {
3080
3089
  background-color: transparent;
3081
3090
  background-color: initial;
3082
3091
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-1bec623",
3
+ "version": "0.0.0-experimental-53e394f",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -83,8 +83,8 @@
83
83
  "storybook": "^9.0.18",
84
84
  "storybook-addon-tag-badges": "^2.0.1",
85
85
  "storybook-addon-test-codegen": "^2.0.1",
86
- "@transferwise/less-config": "3.1.2",
87
86
  "@transferwise/neptune-css": "14.24.5",
87
+ "@transferwise/less-config": "3.1.2",
88
88
  "@wise/components-theming": "1.6.4",
89
89
  "@wise/wds-configs": "0.0.0"
90
90
  },
package/src/listItem/ListItem.css CHANGED
@@ -368,14 +368,14 @@
368
368
  background-color: #ffffff;
369
369
  background-color: var(--color-background-screen);
370
370
  position: relative;
371
- padding: 12px;
372
- padding: var(--size-12);
371
+ padding: 12px 0;
372
+ padding: var(--size-12) 0;
373
373
  container-type: inline-size;
374
374
  }
375
375
  .wds-list-item + .wds-list-item-spotlight,
376
376
  .wds-list-item-spotlight + .wds-list-item {
377
- margin-top: 12px;
378
- margin-top: var(--size-12);
377
+ margin-top: 16px;
378
+ margin-top: var(--size-16);
379
379
  }
380
380
  .wds-list-item:focus-within {
381
381
  z-index: 1;
@@ -403,11 +403,15 @@
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) {
406
+ .wds-list-item-interactive:has(.wds-list-item-control:focus-visible):before,
407
+ .wds-list-item-interactive:has(input[type="checkbox"]:focus-visible):before {
408
408
  outline: var(--ring-outline-color) solid var(--ring-outline-width);
409
409
  outline-offset: var(--ring-outline-offset);
410
- outline-offset: -1px;
410
+ content: '';
411
+ position: absolute;
412
+ inset: 0 -8px;
413
+ border-radius: 16px;
414
+ border-radius: var(--radius-medium);
411
415
  }
412
416
  .wds-list-item-interactive .wds-list-item-additional-info {
413
417
  --ring-outline-offset: 0;
@@ -427,8 +431,13 @@
427
431
  position: absolute;
428
432
  inset: 0;
429
433
  }
430
- .wds-list-item-interactive:not(.disabled):not(:disabled):hover {
434
+ .wds-list-item-interactive:not(.disabled):not(:disabled):hover:before {
435
+ content: '';
436
+ position: absolute;
437
+ inset: 0 -8px;
431
438
  background-color: var(--color-background-screen-hover);
439
+ border-radius: 16px;
440
+ border-radius: var(--radius-medium);
432
441
  }
433
442
  .wds-list-item-interactive:not(.disabled):not(:disabled):hover .wds-list-item-control-wrapper .wds-Button {
434
443
  background-color: var(--Button-background-hover);
@@ -441,7 +450,7 @@
441
450
  .wds-list-item-interactive .wds-list-item-button-control .wds-Button {
442
451
  transition: none;
443
452
  }
444
- .wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
453
+ .wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover:before {
445
454
  background-color: transparent;
446
455
  background-color: initial;
447
456
  }
package/src/listItem/ListItem.less CHANGED
@@ -7,12 +7,12 @@
7
7
  border-radius: var(--radius-medium);
8
8
  background-color: var(--color-background-screen);
9
9
  position: relative;
10
- padding: var(--size-12);
10
+ padding: var(--size-12) 0;
11
11
  container-type: inline-size;
12
12
 
13
13
  & + .wds-list-item-spotlight,
14
14
  .wds-list-item-spotlight + &{
15
- margin-top: var(--size-12);
15
+ margin-top: var(--size-16);
16
16
  }
17
17
 
18
18
  &:focus-within{
@@ -49,8 +49,13 @@
49
49
 
50
50
  &:has(.wds-list-item-control:focus-visible),
51
51
  &:has(input[type="checkbox"]:focus-visible) {
52
- .ring();
53
- outline-offset: -1px;
52
+ &:before {
53
+ .ring();
54
+ content: '';
55
+ position: absolute;
56
+ inset: 0 -8px;
57
+ border-radius: var(--radius-medium);
58
+ }
54
59
  }
55
60
 
56
61
  .wds-list-item-additional-info {
@@ -77,7 +82,13 @@
77
82
  }
78
83
 
79
84
  &:not(.disabled, :disabled):hover {
80
- background-color: var(--color-background-screen-hover);
85
+ &:before {
86
+ content: '';
87
+ position: absolute;
88
+ inset: 0 -8px;
89
+ background-color: var(--color-background-screen-hover);
90
+ border-radius: var(--radius-medium);
91
+ }
81
92
 
82
93
  .wds-list-item-control-wrapper {
83
94
  .wds-Button {
@@ -99,7 +110,7 @@
99
110
  }
100
111
 
101
112
  &:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button) {
102
- &:hover {
113
+ &:hover:before {
103
114
  background-color: unset;
104
115
  }
105
116
  }
package/src/listItem/_stories/ListItem.story.tsx CHANGED
@@ -241,7 +241,7 @@ export const Playground: StoryObj<PreviewStoryArgs> = {
241
241
  const [props, previewProps] = getPropsForPreview(args);
242
242
 
243
243
  return (
244
- <ol className="list-unstyled">
244
+ <ol key={args.disabled ? 'disabled' : 'enabled'} className="list-unstyled">
245
245
  <ListItem {...props} {...previewProps} />
246
246
  </ol>
247
247
  );
package/src/main.css CHANGED
@@ -3003,14 +3003,14 @@ 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;
3007
- padding: var(--size-12);
3006
+ padding: 12px 0;
3007
+ padding: var(--size-12) 0;
3008
3008
  container-type: inline-size;
3009
3009
  }
3010
3010
  .wds-list-item + .wds-list-item-spotlight,
3011
3011
  .wds-list-item-spotlight + .wds-list-item {
3012
- margin-top: 12px;
3013
- margin-top: var(--size-12);
3012
+ margin-top: 16px;
3013
+ margin-top: var(--size-16);
3014
3014
  }
3015
3015
  .wds-list-item:focus-within {
3016
3016
  z-index: 1;
@@ -3038,11 +3038,15 @@ 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) {
3041
+ .wds-list-item-interactive:has(.wds-list-item-control:focus-visible):before,
3042
+ .wds-list-item-interactive:has(input[type="checkbox"]:focus-visible):before {
3043
3043
  outline: var(--ring-outline-color) solid var(--ring-outline-width);
3044
3044
  outline-offset: var(--ring-outline-offset);
3045
- outline-offset: -1px;
3045
+ content: '';
3046
+ position: absolute;
3047
+ inset: 0 -8px;
3048
+ border-radius: 16px;
3049
+ border-radius: var(--radius-medium);
3046
3050
  }
3047
3051
  .wds-list-item-interactive .wds-list-item-additional-info {
3048
3052
  --ring-outline-offset: 0;
@@ -3062,8 +3066,13 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3062
3066
  position: absolute;
3063
3067
  inset: 0;
3064
3068
  }
3065
- .wds-list-item-interactive:not(.disabled):not(:disabled):hover {
3069
+ .wds-list-item-interactive:not(.disabled):not(:disabled):hover:before {
3070
+ content: '';
3071
+ position: absolute;
3072
+ inset: 0 -8px;
3066
3073
  background-color: var(--color-background-screen-hover);
3074
+ border-radius: 16px;
3075
+ border-radius: var(--radius-medium);
3067
3076
  }
3068
3077
  .wds-list-item-interactive:not(.disabled):not(:disabled):hover .wds-list-item-control-wrapper .wds-Button {
3069
3078
  background-color: var(--Button-background-hover);
@@ -3076,7 +3085,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3076
3085
  .wds-list-item-interactive .wds-list-item-button-control .wds-Button {
3077
3086
  transition: none;
3078
3087
  }
3079
- .wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
3088
+ .wds-list-item-interactive:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover:before {
3080
3089
  background-color: transparent;
3081
3090
  background-color: initial;
3082
3091
  }