@transferwise/components 0.0.0-experimental-4a6914a → 0.0.0-experimental-23ee071

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 (26) hide show
  1. package/build/main.css +105 -105
  2. package/build/moneyInput/MoneyInput.js +28 -12
  3. package/build/moneyInput/MoneyInput.js.map +1 -1
  4. package/build/moneyInput/MoneyInput.mjs +29 -13
  5. package/build/moneyInput/MoneyInput.mjs.map +1 -1
  6. package/build/moneyInput/currencyFormatting.js +6 -2
  7. package/build/moneyInput/currencyFormatting.js.map +1 -1
  8. package/build/moneyInput/currencyFormatting.mjs +3 -3
  9. package/build/moneyInput/currencyFormatting.mjs.map +1 -1
  10. package/build/styles/listItem/ListItem.css +105 -105
  11. package/build/styles/listItem/ListItem.grid.css +105 -105
  12. package/build/styles/main.css +105 -105
  13. package/build/types/moneyInput/MoneyInput.d.ts +5 -0
  14. package/build/types/moneyInput/MoneyInput.d.ts.map +1 -1
  15. package/build/types/moneyInput/currencyFormatting.d.ts +3 -3
  16. package/build/types/moneyInput/currencyFormatting.d.ts.map +1 -1
  17. package/package.json +2 -2
  18. package/src/listItem/ListItem.css +105 -105
  19. package/src/listItem/ListItem.grid.css +105 -105
  20. package/src/listItem/ListItem.grid.less +159 -162
  21. package/src/main.css +105 -105
  22. package/src/moneyInput/MoneyInput.story.tsx +18 -1
  23. package/src/moneyInput/MoneyInput.test.tsx +24 -0
  24. package/src/moneyInput/MoneyInput.tsx +26 -3
  25. package/src/moneyInput/currencyFormatting.ts +9 -4
  26. package/src/listItem/_stories/ListItemTest.story.tsx +0 -67
package/src/listItem/ListItem.grid.less CHANGED
@@ -14,109 +14,81 @@
14
14
  }
15
15
  }
16
16
 
17
- // 0 to 240px
18
- @container (max-width: unit(@wds-list-item-cq-min, px)) {
17
+ @container (min-width: unit(@wds-list-item-cq-max + 1, px)) {
19
18
  .wds-list-item-control-wrapper {
20
- align-content: start;
19
+ height: var(--wds-list-item-control-wrapper-height);
20
+ align-content: center;
21
+ }
22
+
23
+ .wds-list-item-media-image{
24
+ object-position: center;
21
25
  }
26
+
22
27
  &.wds-list-item-hasMedia-hasControl {
23
28
  &.wds-list-item-hasInfo-hasPrompt {
24
- grid-template-columns: 1fr auto;
29
+ grid-template-columns: auto 1fr auto;
25
30
  grid-template-rows: auto auto auto;
26
31
  grid-template-areas:
27
- "body control"
28
- "info control"
29
- "prompt prompt";
30
-
31
- &:has(.wds-list-item-button-control) {
32
- grid-template-columns: 1fr;
33
- grid-template-rows: auto;
34
- grid-template-areas:
35
- "body"
36
- "info"
37
- "prompt"
38
- "control";
39
- }
32
+ "media body control"
33
+ ". info ."
34
+ ". prompt prompt";
40
35
  }
41
36
 
42
37
  &.wds-list-item-hasInfo-noPrompt {
43
- grid-template-columns: 1fr auto;
38
+ grid-template-columns: auto 1fr auto;
44
39
  grid-template-rows: auto auto;
45
40
  grid-template-areas:
46
- "body control"
47
- "info control";
48
-
49
- &:has(.wds-list-item-button-control) {
50
- grid-template-columns: 1fr;
51
- grid-template-areas:
52
- "body"
53
- "info"
54
- "control";
55
- }
41
+ "media body control"
42
+ ". info ."
56
43
  }
57
44
 
58
45
  &.wds-list-item-noInfo-hasPrompt {
59
- grid-template-columns: 1fr auto;
46
+ grid-template-columns: auto 1fr auto;
60
47
  grid-template-rows: auto auto;
61
48
  grid-template-areas:
62
- "body control"
63
- "prompt prompt";
64
-
65
- &:has(.wds-list-item-button-control) {
66
- grid-template-columns: 1fr;
67
- grid-template-areas:
68
- "body"
69
- "prompt"
70
- "control";
71
- }
49
+ "media body control"
50
+ ". prompt prompt";
72
51
  }
73
52
 
74
53
  &.wds-list-item-noInfo-noPrompt {
75
- grid-template-columns: 1fr auto;
54
+ grid-template-columns: auto 1fr auto;
76
55
  grid-template-rows: auto;
77
56
  grid-template-areas:
78
- "body control";
79
-
80
- &:has(.wds-list-item-button-control) {
81
- grid-template-columns: 1fr;
82
- grid-template-areas:
83
- "body"
84
- "control";
85
- }
57
+ "media body control"
86
58
  }
87
59
  }
88
60
 
89
61
  &.wds-list-item-hasMedia-noControl {
90
62
  &.wds-list-item-hasInfo-hasPrompt {
91
- grid-template-columns: 1fr;
92
- grid-template-rows: auto auto auto;
63
+ grid-template-columns: auto 1fr;
64
+ grid-template-rows: auto auto;
93
65
  grid-template-areas:
94
- "body"
95
- "info"
96
- "prompt";
66
+ "media body"
67
+ ". info"
68
+ ". prompt";
97
69
  }
98
70
 
99
71
  &.wds-list-item-hasInfo-noPrompt {
100
- grid-template-columns: 1fr;
101
- grid-template-rows: auto auto;
72
+ grid-template-columns: auto 1fr;
73
+ grid-template-rows: auto auto auto;
102
74
  grid-template-areas:
103
- "body"
104
- "info"
75
+ "media body"
76
+ ". info"
105
77
  }
106
78
 
107
79
  &.wds-list-item-noInfo-hasPrompt {
108
- grid-template-columns: 1fr;
80
+ grid-template-columns: auto 1fr;
109
81
  grid-template-rows: auto auto;
110
82
  grid-template-areas:
111
- "body"
112
- "prompt";
83
+ "media body"
84
+ ". prompt";
113
85
  }
114
86
 
115
87
  &.wds-list-item-noInfo-noPrompt {
116
- grid-template-columns: 1fr;
88
+ grid-template-columns: auto 1fr;
117
89
  grid-template-rows: auto;
118
90
  grid-template-areas:
119
- "body"
91
+ "media body"
120
92
  }
121
93
  }
122
94
 
@@ -130,19 +102,8 @@
130
102
  grid-template-rows: auto auto auto;
131
103
  grid-template-areas:
132
104
  "body control"
133
- "info control"
105
+ "info ."
134
106
  "prompt prompt";
135
-
136
-
137
- &:has(.wds-list-item-button-control) {
138
- grid-template-columns: 1fr;
139
- grid-template-rows: auto;
140
- grid-template-areas:
141
- "body"
142
- "info"
143
- "prompt"
144
- "control";
145
- }
146
107
  }
147
108
 
148
109
  &.wds-list-item-hasInfo-noPrompt {
@@ -150,16 +111,7 @@
150
111
  grid-template-rows: auto auto;
151
112
  grid-template-areas:
152
113
  "body control"
153
- "info control";
154
-
155
- &:has(.wds-list-item-button-control) {
156
- grid-template-columns: 1fr;
157
- grid-template-rows: auto;
158
- grid-template-areas:
159
- "body"
160
- "info"
161
- "control";
162
- }
114
+ "info ."
163
115
  }
164
116
 
165
117
  &.wds-list-item-noInfo-hasPrompt {
@@ -168,30 +120,13 @@
168
120
  grid-template-areas:
169
121
  "body control"
170
122
  "prompt prompt";
171
-
172
- &:has(.wds-list-item-button-control) {
173
- grid-template-columns: 1fr;
174
- grid-template-rows: auto;
175
- grid-template-areas:
176
- "body"
177
- "prompt"
178
- "control";
179
- }
180
123
  }
181
124
 
182
125
  &.wds-list-item-noInfo-noPrompt {
183
126
  grid-template-columns: 1fr auto;
184
127
  grid-template-rows: auto;
185
128
  grid-template-areas:
186
- "body control";
187
-
188
- &:has(.wds-list-item-button-control) {
189
- grid-template-columns: 1fr;
190
- grid-template-rows: auto;
191
- grid-template-areas:
192
- "body"
193
- "control";
194
- }
129
+ "body control"
195
130
  }
196
131
  }
197
132
 
@@ -232,30 +167,9 @@
232
167
  "body"
233
168
  }
234
169
  }
235
-
236
- .wds-list-item-media {
237
- display: none;
238
- }
239
-
240
- .wds-list-item-body {
241
- grid-area: body;
242
- display: grid;
243
- grid-template-columns: 1fr;
244
- justify-items: start;
245
- gap: 0;
246
-
247
- .wds-list-item-value {
248
- text-align: left;
249
- }
250
- }
251
-
252
- .wds-list-item-button-control--hasPrompt{
253
- margin-top: var(--size-4);
254
- }
255
170
  }
256
171
 
257
- // 240+ to 308px
258
- @container (min-width: unit(@wds-list-item-cq-min + 0.1, px)) and (max-width: unit(@wds-list-item-cq-max, px)) {
172
+ @container (min-width: unit(@wds-list-item-cq-min + 1, px)) and (max-width: unit(@wds-list-item-cq-max, px)) {
259
173
  .wds-list-item-media-image{
260
174
  object-position: bottom left;
261
175
  }
@@ -490,82 +404,108 @@
490
404
  }
491
405
  }
492
406
 
493
- // 308px+
494
- @container (min-width: unit(@wds-list-item-cq-max + 0.1, px)) {
407
+ @container (max-width: unit(@wds-list-item-cq-min, px)) {
495
408
  .wds-list-item-control-wrapper {
496
- height: var(--wds-list-item-control-wrapper-height);
497
- align-content: center;
498
- }
499
-
500
- .wds-list-item-media-image{
501
- object-position: center;
409
+ align-content: start;
502
410
  }
503
-
504
411
  &.wds-list-item-hasMedia-hasControl {
505
412
  &.wds-list-item-hasInfo-hasPrompt {
506
- grid-template-columns: auto 1fr auto;
413
+ grid-template-columns: 1fr auto;
507
414
  grid-template-rows: auto auto auto;
508
415
  grid-template-areas:
509
- "media body control"
510
- ". info ."
511
- ". prompt prompt";
416
+ "body control"
417
+ "info control"
418
+ "prompt prompt";
419
+
420
+ &:has(.wds-list-item-button-control) {
421
+ grid-template-columns: 1fr;
422
+ grid-template-rows: auto;
423
+ grid-template-areas:
424
+ "body"
425
+ "info"
426
+ "prompt"
427
+ "control";
428
+ }
512
429
  }
513
430
 
514
431
  &.wds-list-item-hasInfo-noPrompt {
515
- grid-template-columns: auto 1fr auto;
432
+ grid-template-columns: 1fr auto;
516
433
  grid-template-rows: auto auto;
517
434
  grid-template-areas:
518
- "media body control"
519
- ". info ."
435
+ "body control"
436
+ "info control";
437
+
438
+ &:has(.wds-list-item-button-control) {
439
+ grid-template-columns: 1fr;
440
+ grid-template-areas:
441
+ "body"
442
+ "info"
443
+ "control";
444
+ }
520
445
  }
521
446
 
522
447
  &.wds-list-item-noInfo-hasPrompt {
523
- grid-template-columns: auto 1fr auto;
448
+ grid-template-columns: 1fr auto;
524
449
  grid-template-rows: auto auto;
525
450
  grid-template-areas:
526
- "media body control"
527
- ". prompt prompt";
451
+ "body control"
452
+ "prompt prompt";
453
+
454
+ &:has(.wds-list-item-button-control) {
455
+ grid-template-columns: 1fr;
456
+ grid-template-areas:
457
+ "body"
458
+ "prompt"
459
+ "control";
460
+ }
528
461
  }
529
462
 
530
463
  &.wds-list-item-noInfo-noPrompt {
531
- grid-template-columns: auto 1fr auto;
464
+ grid-template-columns: 1fr auto;
532
465
  grid-template-rows: auto;
533
466
  grid-template-areas:
534
- "media body control"
467
+ "body control";
468
+
469
+ &:has(.wds-list-item-button-control) {
470
+ grid-template-columns: 1fr;
471
+ grid-template-areas:
472
+ "body"
473
+ "control";
474
+ }
535
475
  }
536
476
  }
537
477
 
538
478
  &.wds-list-item-hasMedia-noControl {
539
479
  &.wds-list-item-hasInfo-hasPrompt {
540
- grid-template-columns: auto 1fr;
541
- grid-template-rows: auto auto;
480
+ grid-template-columns: 1fr;
481
+ grid-template-rows: auto auto auto;
542
482
  grid-template-areas:
543
- "media body"
544
- ". info"
545
- ". prompt";
483
+ "body"
484
+ "info"
485
+ "prompt";
546
486
  }
547
487
 
548
488
  &.wds-list-item-hasInfo-noPrompt {
549
- grid-template-columns: auto 1fr;
550
- grid-template-rows: auto auto auto;
489
+ grid-template-columns: 1fr;
490
+ grid-template-rows: auto auto;
551
491
  grid-template-areas:
552
- "media body"
553
- ". info"
492
+ "body"
493
+ "info"
554
494
  }
555
495
 
556
496
  &.wds-list-item-noInfo-hasPrompt {
557
- grid-template-columns: auto 1fr;
497
+ grid-template-columns: 1fr;
558
498
  grid-template-rows: auto auto;
559
499
  grid-template-areas:
560
- "media body"
561
- ". prompt";
500
+ "body"
501
+ "prompt";
562
502
  }
563
503
 
564
504
  &.wds-list-item-noInfo-noPrompt {
565
- grid-template-columns: auto 1fr;
505
+ grid-template-columns: 1fr;
566
506
  grid-template-rows: auto;
567
507
  grid-template-areas:
568
- "media body"
508
+ "body"
569
509
  }
570
510
  }
571
511
 
@@ -579,8 +519,19 @@
579
519
  grid-template-rows: auto auto auto;
580
520
  grid-template-areas:
581
521
  "body control"
582
- "info ."
522
+ "info control"
583
523
  "prompt prompt";
524
+
525
+
526
+ &:has(.wds-list-item-button-control) {
527
+ grid-template-columns: 1fr;
528
+ grid-template-rows: auto;
529
+ grid-template-areas:
530
+ "body"
531
+ "info"
532
+ "prompt"
533
+ "control";
534
+ }
584
535
  }
585
536
 
586
537
  &.wds-list-item-hasInfo-noPrompt {
@@ -588,7 +539,16 @@
588
539
  grid-template-rows: auto auto;
589
540
  grid-template-areas:
590
541
  "body control"
591
- "info ."
542
+ "info control";
543
+
544
+ &:has(.wds-list-item-button-control) {
545
+ grid-template-columns: 1fr;
546
+ grid-template-rows: auto;
547
+ grid-template-areas:
548
+ "body"
549
+ "info"
550
+ "control";
551
+ }
592
552
  }
593
553
 
594
554
  &.wds-list-item-noInfo-hasPrompt {
@@ -597,13 +557,30 @@
597
557
  grid-template-areas:
598
558
  "body control"
599
559
  "prompt prompt";
560
+
561
+ &:has(.wds-list-item-button-control) {
562
+ grid-template-columns: 1fr;
563
+ grid-template-rows: auto;
564
+ grid-template-areas:
565
+ "body"
566
+ "prompt"
567
+ "control";
568
+ }
600
569
  }
601
570
 
602
571
  &.wds-list-item-noInfo-noPrompt {
603
572
  grid-template-columns: 1fr auto;
604
573
  grid-template-rows: auto;
605
574
  grid-template-areas:
606
- "body control"
575
+ "body control";
576
+
577
+ &:has(.wds-list-item-button-control) {
578
+ grid-template-columns: 1fr;
579
+ grid-template-rows: auto;
580
+ grid-template-areas:
581
+ "body"
582
+ "control";
583
+ }
607
584
  }
608
585
  }
609
586
 
@@ -644,6 +621,26 @@
644
621
  "body"
645
622
  }
646
623
  }
624
+
625
+ .wds-list-item-media {
626
+ display: none;
627
+ }
628
+
629
+ .wds-list-item-body {
630
+ grid-area: body;
631
+ display: grid;
632
+ grid-template-columns: 1fr;
633
+ justify-items: start;
634
+ gap: 0;
635
+
636
+ .wds-list-item-value {
637
+ text-align: left;
638
+ }
639
+ }
640
+
641
+ .wds-list-item-button-control--hasPrompt{
642
+ margin-top: var(--size-4);
643
+ }
647
644
  }
648
645
  }
649
646
  }