@transferwise/components 0.0.0-experimental-e743021 → 0.0.0-experimental-646d735

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 (10) hide show
  1. package/build/main.css +10 -2
  2. package/build/styles/listItem/ListItem.css +10 -2
  3. package/build/styles/listItem/ListItem.grid.css +7 -1
  4. package/build/styles/main.css +10 -2
  5. package/package.json +1 -1
  6. package/src/listItem/ListItem.css +10 -2
  7. package/src/listItem/ListItem.grid.css +7 -1
  8. package/src/listItem/ListItem.grid.less +14 -1
  9. package/src/listItem/ListItem.less +4 -2
  10. package/src/main.css +10 -2
package/build/main.css CHANGED
@@ -29489,7 +29489,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
29489
29489
  @container (width > 308px) {
29490
29490
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
29491
29491
  height: var(--wds-list-item-control-wrapper-height);
29492
- align-self: center;
29492
+ align-content: center;
29493
29493
  }
29494
29494
  .wds-list-item-gridWrapper .wds-list-item-media-image {
29495
29495
  -o-object-position: center;
@@ -29591,6 +29591,9 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
29591
29591
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
29592
29592
  align-content: start;
29593
29593
  }
29594
+ .wds-list-item-navigation .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
29595
+ align-content: center;
29596
+ }
29594
29597
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
29595
29598
  grid-template-columns: 1fr auto;
29596
29599
  grid-template-rows: auto auto auto auto;
@@ -29719,6 +29722,9 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
29719
29722
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
29720
29723
  align-content: start;
29721
29724
  }
29725
+ .wds-list-item-navigation .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
29726
+ align-content: center;
29727
+ }
29722
29728
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
29723
29729
  grid-template-columns: 1fr auto;
29724
29730
  grid-template-rows: auto auto auto;
@@ -30086,7 +30092,9 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
30086
30092
  .wds-list-item-navigation .tw-icon-chevron-right {
30087
30093
  color: #c9cbce;
30088
30094
  color: var(--color-interactive-secondary);
30089
- outline: 2px solid red;
30095
+ display: block;
30096
+ outline: 2px dashed #ff7a00;
30097
+ background-color: rgba(255, 122, 0, 0.12);
30090
30098
  }
30091
30099
 
30092
30100
  .wds-list-item-control {
package/build/styles/listItem/ListItem.css CHANGED
@@ -12,7 +12,7 @@
12
12
  @container (width > 308px) {
13
13
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
14
14
  height: var(--wds-list-item-control-wrapper-height);
15
- align-self: center;
15
+ align-content: center;
16
16
  }
17
17
  .wds-list-item-gridWrapper .wds-list-item-media-image {
18
18
  -o-object-position: center;
@@ -113,6 +113,9 @@
113
113
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
114
114
  align-content: start;
115
115
  }
116
+ .wds-list-item-navigation .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
117
+ align-content: center;
118
+ }
116
119
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
117
120
  grid-template-columns: 1fr auto;
118
121
  grid-template-rows: auto auto auto auto;
@@ -240,6 +243,9 @@
240
243
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
241
244
  align-content: start;
242
245
  }
246
+ .wds-list-item-navigation .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
247
+ align-content: center;
248
+ }
243
249
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
244
250
  grid-template-columns: 1fr auto;
245
251
  grid-template-rows: auto auto auto;
@@ -567,7 +573,9 @@
567
573
  .wds-list-item-navigation .tw-icon-chevron-right {
568
574
  color: #c9cbce;
569
575
  color: var(--color-interactive-secondary);
570
- outline: 2px solid red;
576
+ display: block;
577
+ outline: 2px dashed #ff7a00;
578
+ background-color: rgba(255, 122, 0, 0.12);
571
579
  }
572
580
  .wds-list-item-control {
573
581
  flex: 0 0 auto;
package/build/styles/listItem/ListItem.grid.css CHANGED
@@ -12,7 +12,7 @@
12
12
  @container (width > 308px) {
13
13
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
14
14
  height: var(--wds-list-item-control-wrapper-height);
15
- align-self: center;
15
+ align-content: center;
16
16
  }
17
17
  .wds-list-item-gridWrapper .wds-list-item-media-image {
18
18
  -o-object-position: center;
@@ -113,6 +113,9 @@
113
113
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
114
114
  align-content: start;
115
115
  }
116
+ .wds-list-item-navigation .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
117
+ align-content: center;
118
+ }
116
119
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
117
120
  grid-template-columns: 1fr auto;
118
121
  grid-template-rows: auto auto auto auto;
@@ -240,6 +243,9 @@
240
243
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
241
244
  align-content: start;
242
245
  }
246
+ .wds-list-item-navigation .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
247
+ align-content: center;
248
+ }
243
249
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
244
250
  grid-template-columns: 1fr auto;
245
251
  grid-template-rows: auto auto auto;
package/build/styles/main.css CHANGED
@@ -29489,7 +29489,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
29489
29489
  @container (width > 308px) {
29490
29490
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
29491
29491
  height: var(--wds-list-item-control-wrapper-height);
29492
- align-self: center;
29492
+ align-content: center;
29493
29493
  }
29494
29494
  .wds-list-item-gridWrapper .wds-list-item-media-image {
29495
29495
  -o-object-position: center;
@@ -29591,6 +29591,9 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
29591
29591
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
29592
29592
  align-content: start;
29593
29593
  }
29594
+ .wds-list-item-navigation .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
29595
+ align-content: center;
29596
+ }
29594
29597
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
29595
29598
  grid-template-columns: 1fr auto;
29596
29599
  grid-template-rows: auto auto auto auto;
@@ -29719,6 +29722,9 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
29719
29722
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
29720
29723
  align-content: start;
29721
29724
  }
29725
+ .wds-list-item-navigation .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
29726
+ align-content: center;
29727
+ }
29722
29728
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
29723
29729
  grid-template-columns: 1fr auto;
29724
29730
  grid-template-rows: auto auto auto;
@@ -30086,7 +30092,9 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
30086
30092
  .wds-list-item-navigation .tw-icon-chevron-right {
30087
30093
  color: #c9cbce;
30088
30094
  color: var(--color-interactive-secondary);
30089
- outline: 2px solid red;
30095
+ display: block;
30096
+ outline: 2px dashed #ff7a00;
30097
+ background-color: rgba(255, 122, 0, 0.12);
30090
30098
  }
30091
30099
 
30092
30100
  .wds-list-item-control {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-e743021",
3
+ "version": "0.0.0-experimental-646d735",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
package/src/listItem/ListItem.css CHANGED
@@ -12,7 +12,7 @@
12
12
  @container (width > 308px) {
13
13
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
14
14
  height: var(--wds-list-item-control-wrapper-height);
15
- align-self: center;
15
+ align-content: center;
16
16
  }
17
17
  .wds-list-item-gridWrapper .wds-list-item-media-image {
18
18
  -o-object-position: center;
@@ -113,6 +113,9 @@
113
113
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
114
114
  align-content: start;
115
115
  }
116
+ .wds-list-item-navigation .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
117
+ align-content: center;
118
+ }
116
119
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
117
120
  grid-template-columns: 1fr auto;
118
121
  grid-template-rows: auto auto auto auto;
@@ -240,6 +243,9 @@
240
243
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
241
244
  align-content: start;
242
245
  }
246
+ .wds-list-item-navigation .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
247
+ align-content: center;
248
+ }
243
249
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
244
250
  grid-template-columns: 1fr auto;
245
251
  grid-template-rows: auto auto auto;
@@ -567,7 +573,9 @@
567
573
  .wds-list-item-navigation .tw-icon-chevron-right {
568
574
  color: #c9cbce;
569
575
  color: var(--color-interactive-secondary);
570
- outline: 2px solid red;
576
+ display: block;
577
+ outline: 2px dashed #ff7a00;
578
+ background-color: rgba(255, 122, 0, 0.12);
571
579
  }
572
580
  .wds-list-item-control {
573
581
  flex: 0 0 auto;
package/src/listItem/ListItem.grid.css CHANGED
@@ -12,7 +12,7 @@
12
12
  @container (width > 308px) {
13
13
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
14
14
  height: var(--wds-list-item-control-wrapper-height);
15
- align-self: center;
15
+ align-content: center;
16
16
  }
17
17
  .wds-list-item-gridWrapper .wds-list-item-media-image {
18
18
  -o-object-position: center;
@@ -113,6 +113,9 @@
113
113
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
114
114
  align-content: start;
115
115
  }
116
+ .wds-list-item-navigation .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
117
+ align-content: center;
118
+ }
116
119
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
117
120
  grid-template-columns: 1fr auto;
118
121
  grid-template-rows: auto auto auto auto;
@@ -240,6 +243,9 @@
240
243
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
241
244
  align-content: start;
242
245
  }
246
+ .wds-list-item-navigation .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
247
+ align-content: center;
248
+ }
243
249
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
244
250
  grid-template-columns: 1fr auto;
245
251
  grid-template-rows: auto auto auto;
package/src/listItem/ListItem.grid.less CHANGED
@@ -17,7 +17,7 @@
17
17
  @container (width > @wds-list-item-cq-max) {
18
18
  .wds-list-item-control-wrapper {
19
19
  height: var(--wds-list-item-control-wrapper-height);
20
- align-self: center;
20
+ align-content: center;
21
21
  }
22
22
 
23
23
  .wds-list-item-media-image{
@@ -180,6 +180,12 @@
180
180
  align-content: start;
181
181
  }
182
182
 
183
+ .wds-list-item-navigation & {
184
+ .wds-list-item-control-wrapper {
185
+ align-content: center;
186
+ }
187
+ }
188
+
183
189
  &.wds-list-item-hasMedia-hasControl {
184
190
  &.wds-list-item-hasInfo-hasPrompt {
185
191
  grid-template-columns: 1fr auto;
@@ -410,6 +416,13 @@
410
416
  .wds-list-item-control-wrapper {
411
417
  align-content: start;
412
418
  }
419
+
420
+ .wds-list-item-navigation & {
421
+ .wds-list-item-control-wrapper {
422
+ align-content: center;
423
+ }
424
+ }
425
+
413
426
  &.wds-list-item-hasMedia-hasControl {
414
427
  &.wds-list-item-hasInfo-hasPrompt {
415
428
  grid-template-columns: 1fr auto;
package/src/listItem/ListItem.less CHANGED
@@ -226,8 +226,10 @@
226
226
  &-navigation {
227
227
  .tw-icon-chevron-right {
228
228
  color: var(--color-interactive-secondary);
229
- // CHROMATIC CANARY: remove this outline before merging
230
- outline: 2px solid red;
229
+ display: block;
230
+ // CHROMATIC CANARY: remove before merging after verifying visual diffs run.
231
+ outline: 2px dashed #ff7a00;
232
+ background-color: rgba(255, 122, 0, 0.12);
231
233
  }
232
234
  }
233
235
 
package/src/main.css CHANGED
@@ -29489,7 +29489,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
29489
29489
  @container (width > 308px) {
29490
29490
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
29491
29491
  height: var(--wds-list-item-control-wrapper-height);
29492
- align-self: center;
29492
+ align-content: center;
29493
29493
  }
29494
29494
  .wds-list-item-gridWrapper .wds-list-item-media-image {
29495
29495
  -o-object-position: center;
@@ -29591,6 +29591,9 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
29591
29591
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
29592
29592
  align-content: start;
29593
29593
  }
29594
+ .wds-list-item-navigation .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
29595
+ align-content: center;
29596
+ }
29594
29597
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
29595
29598
  grid-template-columns: 1fr auto;
29596
29599
  grid-template-rows: auto auto auto auto;
@@ -29719,6 +29722,9 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
29719
29722
  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
29720
29723
  align-content: start;
29721
29724
  }
29725
+ .wds-list-item-navigation .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
29726
+ align-content: center;
29727
+ }
29722
29728
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
29723
29729
  grid-template-columns: 1fr auto;
29724
29730
  grid-template-rows: auto auto auto;
@@ -30086,7 +30092,9 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
30086
30092
  .wds-list-item-navigation .tw-icon-chevron-right {
30087
30093
  color: #c9cbce;
30088
30094
  color: var(--color-interactive-secondary);
30089
- outline: 2px solid red;
30095
+ display: block;
30096
+ outline: 2px dashed #ff7a00;
30097
+ background-color: rgba(255, 122, 0, 0.12);
30090
30098
  }
30091
30099
 
30092
30100
  .wds-list-item-control {