@transferwise/components 0.0.0-experimental-8bc11c4 → 0.0.0-experimental-151e673

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 (23) hide show
  1. package/build/SegmentedControl/SegmentedControl.js +9 -2
  2. package/build/SegmentedControl/SegmentedControl.js.map +1 -1
  3. package/build/SegmentedControl/SegmentedControl.mjs +9 -2
  4. package/build/SegmentedControl/SegmentedControl.mjs.map +1 -1
  5. package/build/main.css +28 -10
  6. package/build/styles/AvatarLayout/AvatarLayout.css +26 -9
  7. package/build/styles/SegmentedControl/SegmentedControl.css +2 -1
  8. package/build/styles/main.css +28 -10
  9. package/build/types/SegmentedControl/SegmentedControl.d.ts.map +1 -1
  10. package/package.json +1 -1
  11. package/src/AvatarLayout/AvatarLayout.css +26 -9
  12. package/src/AvatarLayout/AvatarLayout.less +46 -22
  13. package/src/AvatarLayout/_stories/AvatarLayout.test.story.tsx +17 -42
  14. package/src/Field/_stories/Field.test.story.tsx +48 -37
  15. package/src/FlowNavigation/_stories/FlowNavigation.rtl.test.story.tsx +78 -0
  16. package/src/FlowNavigation/_stories/FlowNavigation.test.story.tsx +0 -44
  17. package/src/Label/_stories/Label.test.story.tsx +35 -22
  18. package/src/Popover/_stories/Popover.rtl.test.story.tsx +40 -50
  19. package/src/SegmentedControl/SegmentedControl.css +2 -1
  20. package/src/SegmentedControl/SegmentedControl.less +4 -2
  21. package/src/SegmentedControl/SegmentedControl.tsx +8 -2
  22. package/src/SegmentedControl/_stories/SegmentedControl.test.story.tsx +16 -8
  23. package/src/main.css +28 -10
package/src/main.css CHANGED
@@ -20354,36 +20354,53 @@ a[data-toggle="tooltip"] {
20354
20354
  block-size: var(--np-avatar-layout-size);
20355
20355
  }
20356
20356
  .np-avatar-layout-diagonal-mask {
20357
+ --np-avatar-layout-mask-direction: right;
20357
20358
  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20358
20359
  mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20360
+ -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) var(--np-avatar-layout-mask-direction) calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20361
+ mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) var(--np-avatar-layout-mask-direction) calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20359
20362
  }
20360
20363
  [dir="rtl"] .np-avatar-layout-diagonal-mask {
20361
- -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20362
- mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20364
+ --np-avatar-layout-mask-direction: left;
20365
+ margin-inline-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
20366
+ margin-inline-end: unset;
20363
20367
  }
20364
20368
  .np-avatar-layout-diagonal-child {
20365
20369
  margin-inline-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
20366
20370
  margin-block-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
20367
20371
  }
20368
20372
  [dir="rtl"] .np-avatar-layout-diagonal-child {
20369
- margin-inline-start: 0;
20370
- margin-inline-end: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
20373
+ -webkit-mask-image: initial;
20374
+ mask-image: initial;
20371
20375
  }
20372
20376
  .np-avatar-layout-horizontal {
20377
+ --np-avatar-layout-mask-direction: left;
20373
20378
  inline-size: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - (var(--np-avatar-offset) * (var(--np-avatar-avatars-count) - 1)));
20374
20379
  inline-size: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
20375
20380
  block-size: var(--np-avatar-layout-size);
20376
20381
  }
20377
- .np-avatar-layout-horizontal-mask {
20378
- -webkit-mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) left calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20379
- mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) left calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20380
- -webkit-mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) left calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20381
- mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) left calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20382
+ [dir="rtl"] .np-avatar-layout-horizontal {
20383
+ --np-avatar-layout-mask-direction: right;
20384
+ }
20385
+ .np-avatar-layout-horizontal-mask,
20386
+ [dir="rtl"] .np-avatar-layout-horizontal-child {
20387
+ -webkit-mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20388
+ mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20389
+ -webkit-mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20390
+ mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) var(--np-avatar-layout-mask-direction) calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
20391
+ }
20392
+ [dir="rtl"] .np-avatar-layout-horizontal-mask {
20393
+ margin-inline-end: calc(var(--np-avatar-offset) * -1);
20394
+ }
20395
+ [dir="rtl"] .np-avatar-layout-horizontal-mask:last-child {
20396
+ -webkit-mask-image: initial;
20397
+ mask-image: initial;
20382
20398
  }
20383
20399
  .np-avatar-layout-horizontal-child {
20384
20400
  margin-inline-start: calc(var(--np-avatar-offset) * -1);
20385
20401
  }
20386
20402
  [dir="rtl"] .np-avatar-layout-horizontal-child {
20403
+ margin-inline-start: unset;
20387
20404
  margin-inline-end: calc(var(--np-avatar-offset) * -1);
20388
20405
  }
20389
20406
  .np-icon-button {
@@ -25809,7 +25826,8 @@ button.np-link {
25809
25826
  background: var(--color-background-screen);
25810
25827
  border-radius: 24px;
25811
25828
  border-radius: var(--size-24);
25812
- transition: left 300ms;
25829
+ transition: left 300ms,
25830
+ right 300ms;
25813
25831
  }
25814
25832
  .segmented-control__segments--no-animate::after {
25815
25833
  transition: none !important;