@transferwise/components 0.0.0-experimental-a529292 → 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 +8 -2
  2. package/build/styles/listItem/ListItem.css +8 -2
  3. package/build/styles/listItem/ListItem.grid.css +6 -0
  4. package/build/styles/main.css +8 -2
  5. package/package.json +2 -2
  6. package/src/listItem/ListItem.css +8 -2
  7. package/src/listItem/ListItem.grid.css +6 -0
  8. package/src/listItem/ListItem.grid.less +13 -0
  9. package/src/listItem/ListItem.less +2 -2
  10. package/src/main.css +8 -2
package/build/main.css CHANGED
@@ -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;
@@ -30087,8 +30093,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
30087
30093
  color: #c9cbce;
30088
30094
  color: var(--color-interactive-secondary);
30089
30095
  display: block;
30090
- outline: 2px dashed #7b2cff;
30091
- background-color: rgba(123, 44, 255, 0.12);
30096
+ outline: 2px dashed #ff7a00;
30097
+ background-color: rgba(255, 122, 0, 0.12);
30092
30098
  }
30093
30099
 
30094
30100
  .wds-list-item-control {
package/build/styles/listItem/ListItem.css CHANGED
@@ -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;
@@ -568,8 +574,8 @@
568
574
  color: #c9cbce;
569
575
  color: var(--color-interactive-secondary);
570
576
  display: block;
571
- outline: 2px dashed #7b2cff;
572
- background-color: rgba(123, 44, 255, 0.12);
577
+ outline: 2px dashed #ff7a00;
578
+ background-color: rgba(255, 122, 0, 0.12);
573
579
  }
574
580
  .wds-list-item-control {
575
581
  flex: 0 0 auto;
package/build/styles/listItem/ListItem.grid.css CHANGED
@@ -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
@@ -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;
@@ -30087,8 +30093,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
30087
30093
  color: #c9cbce;
30088
30094
  color: var(--color-interactive-secondary);
30089
30095
  display: block;
30090
- outline: 2px dashed #7b2cff;
30091
- background-color: rgba(123, 44, 255, 0.12);
30096
+ outline: 2px dashed #ff7a00;
30097
+ background-color: rgba(255, 122, 0, 0.12);
30092
30098
  }
30093
30099
 
30094
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-a529292",
3
+ "version": "0.0.0-experimental-646d735",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -91,8 +91,8 @@
91
91
  "storybook-addon-tag-badges": "^3.1.0",
92
92
  "storybook-addon-test-codegen": "^3.0.1",
93
93
  "@transferwise/less-config": "3.1.2",
94
- "@wise/components-theming": "1.10.2",
95
94
  "@transferwise/neptune-css": "14.27.1",
95
+ "@wise/components-theming": "1.10.2",
96
96
  "@wise/wds-configs": "0.0.0"
97
97
  },
98
98
  "peerDependencies": {
package/src/listItem/ListItem.css CHANGED
@@ -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;
@@ -568,8 +574,8 @@
568
574
  color: #c9cbce;
569
575
  color: var(--color-interactive-secondary);
570
576
  display: block;
571
- outline: 2px dashed #7b2cff;
572
- background-color: rgba(123, 44, 255, 0.12);
577
+ outline: 2px dashed #ff7a00;
578
+ background-color: rgba(255, 122, 0, 0.12);
573
579
  }
574
580
  .wds-list-item-control {
575
581
  flex: 0 0 auto;
package/src/listItem/ListItem.grid.css CHANGED
@@ -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
@@ -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
@@ -228,8 +228,8 @@
228
228
  color: var(--color-interactive-secondary);
229
229
  display: block;
230
230
  // CHROMATIC CANARY: remove before merging after verifying visual diffs run.
231
- outline: 2px dashed #7b2cff;
232
- background-color: rgba(123, 44, 255, 0.12);
231
+ outline: 2px dashed #ff7a00;
232
+ background-color: rgba(255, 122, 0, 0.12);
233
233
  }
234
234
  }
235
235
 
package/src/main.css CHANGED
@@ -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;
@@ -30087,8 +30093,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
30087
30093
  color: #c9cbce;
30088
30094
  color: var(--color-interactive-secondary);
30089
30095
  display: block;
30090
- outline: 2px dashed #7b2cff;
30091
- background-color: rgba(123, 44, 255, 0.12);
30096
+ outline: 2px dashed #ff7a00;
30097
+ background-color: rgba(255, 122, 0, 0.12);
30092
30098
  }
30093
30099
 
30094
30100
  .wds-list-item-control {