@transferwise/components 0.0.0-experimental-5ff6475 → 0.0.0-experimental-f16de49

package/src/Popover/_stories/Popover.rtl.test.story.tsx

@@ -14,6 +14,16 @@ export default {
 
 type Story = StoryObj<typeof Popover>;
 
+const iframeDiff = withRTLDiff({ renderAs: 'iframe' });
+
+const containerStyle: React.CSSProperties = {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  minHeight: '24rem',
+  width: '100%',
+};
+
 const clickTrigger = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
   const canvas = within(canvasElement);
   const trigger = canvas.queryByRole('button');
@@ -23,64 +33,64 @@ const clickTrigger = async ({ canvasElement }: { canvasElement: HTMLElement }) =
 
 export const PlacementRight: Story = {
   render: () => (
-    <Popover
-      preferredPlacement={Position.RIGHT}
-      title="Guaranteed rate"
-      content="You'll get this rate as long as we receive your 10 EUR within the next 51 hours."
-    >
-      <Button size="sm" v2>
-        right
-      </Button>
-    </Popover>
+    <div style={containerStyle}>
+      <Popover
+        preferredPlacement={Position.RIGHT}
+        title="Guaranteed rate"
+        content="You'll get this rate as long as we receive your 10 EUR within the next 51 hours."
+      >
+        <Button v2>Placement right</Button>
+      </Popover>
+    </div>
   ),
   play: clickTrigger,
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'left', vAlign: 'center' }),
+  ...iframeDiff,
 };
 
 export const PlacementLeft: Story = {
   render: () => (
-    <Popover
-      preferredPlacement={Position.LEFT}
-      title="Guaranteed rate"
-      content="You'll get this rate as long as we receive your 10 EUR within the next 51 hours."
-    >
-      <Button size="sm" v2>
-        left
-      </Button>
-    </Popover>
+    <div style={containerStyle}>
+      <Popover
+        preferredPlacement={Position.LEFT}
+        title="Guaranteed rate"
+        content="You'll get this rate as long as we receive your 10 EUR within the next 51 hours."
+      >
+        <Button v2>Placement left</Button>
+      </Popover>
+    </div>
   ),
   play: clickTrigger,
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'right', vAlign: 'center' }),
+  ...iframeDiff,
 };
 
 export const PlacementTop: Story = {
   render: () => (
-    <Popover
-      preferredPlacement={Position.TOP}
-      title="Guaranteed rate"
-      content="You'll get this rate as long as we receive your 10 EUR within the next 51 hours."
-    >
-      <Button size="sm" v2>
-        top
-      </Button>
-    </Popover>
+    <div style={containerStyle}>
+      <Popover
+        preferredPlacement={Position.TOP}
+        title="Guaranteed rate"
+        content="You'll get this rate as long as we receive your 10 EUR within the next 51 hours."
+      >
+        <Button v2>Placement top</Button>
+      </Popover>
+    </div>
   ),
   play: clickTrigger,
-  ...withRTLDiff({ renderAs: 'iframe', vAlign: 'bottom', hAlign: 'center' }),
+  ...iframeDiff,
 };
 
 export const PlacementBottom: Story = {
   render: () => (
-    <Popover
-      preferredPlacement={Position.BOTTOM}
-      title="Guaranteed rate"
-      content="You'll get this rate as long as we receive your 10 EUR within the next 51 hours."
-    >
-      <Button size="sm" v2>
-        bottom
-      </Button>
-    </Popover>
+    <div style={containerStyle}>
+      <Popover
+        preferredPlacement={Position.BOTTOM}
+        title="Guaranteed rate"
+        content="You'll get this rate as long as we receive your 10 EUR within the next 51 hours."
+      >
+        <Button v2>Placement bottom</Button>
+      </Popover>
+    </div>
   ),
   play: clickTrigger,
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center' }),
+  ...iframeDiff,
 };

package/src/SegmentedControl/SegmentedControl.css

@@ -35,8 +35,7 @@
   background: var(--color-background-screen);
   border-radius: 24px;
   border-radius: var(--size-24);
-  transition: left 300ms,
-    right 300ms;
+  transition: left 300ms;
 }
 .segmented-control__segments--no-animate::after {
   transition: none !important;

package/src/SegmentedControl/SegmentedControl.less

@@ -12,7 +12,7 @@
   justify-content: center;
   align-items: center;
   background: var(--color-background-neutral);
-  border-radius: var(--size-24);
+  border-radius: var(--size-24);  
   transition: outline 300ms;
   outline: 2px solid transparent;
 }
@@ -31,9 +31,7 @@
   z-index: 0;
   background: var(--color-background-screen);
   border-radius: var(--size-24);
-  transition:
-    left 300ms,
-    right 300ms;
+  transition: left 300ms;
 }
 
 .segmented-control__segments--no-animate::after {

package/src/SegmentedControl/SegmentedControl.tsx

@@ -3,7 +3,6 @@ import { createRef, useEffect, useRef, useState } from 'react';
 
 import Body from '../Body';
 import { Typography } from '../common';
-import { useDirection } from '../common/hooks';
 
 type SegmentBase = { id: string; label: string; value: string };
 
@@ -41,7 +40,6 @@ const SegmentedControl = ({
 }: SegmentedControlProps) => {
   const isMountedRef = useRef(false);
   const [animate, setAnimate] = useState(false);
-  const { isRTL } = useDirection();
 
   const segmentsRef = useRef<HTMLDivElement>(null);
 
@@ -64,12 +62,8 @@ const SegmentedControl = ({
     // This is so we can animate the highlight to the selected segment
     if (selectedSegmentRef?.current && segmentsRef.current) {
       const { style } = segmentsRef.current;
-      const segment = selectedSegmentRef.current;
-      const inlineOffset = isRTL
-        ? segmentsRef.current.offsetWidth - segment.offsetLeft - segment.offsetWidth
-        : segment.offsetLeft;
-      style.setProperty('--segment-highlight-width', `${segment.offsetWidth}px`);
-      style.setProperty('--segment-highlight-x', `${inlineOffset}px`);
+      style.setProperty('--segment-highlight-width', `${selectedSegmentRef.current.offsetWidth}px`);
+      style.setProperty('--segment-highlight-x', `${selectedSegmentRef.current.offsetLeft}px`);
     }
   };
 

package/src/SegmentedControl/_stories/SegmentedControl.test.story.tsx

@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import SegmentedControl from '../SegmentedControl';
@@ -23,31 +22,24 @@ const viewSegments = [
   { id: 'seg-gamma', label: 'Gamma', value: 'gamma', controls: 'panel-gamma' },
 ] as const;
 
-function InteractiveSegmentedControl() {
-  const [inputValue, setInputValue] = useState('one');
-  const [viewValue, setViewValue] = useState('beta');
-
-  return (
+export const RTLDiff: Story = {
+  render: () => (
     <>
       <SegmentedControl
         name="rtl-input"
         mode="input"
         segments={inputSegments}
-        value={inputValue}
-        onChange={setInputValue}
+        value="one"
+        onChange={() => {}}
       />
       <SegmentedControl
         name="rtl-view"
         mode="view"
         segments={viewSegments}
-        value={viewValue}
-        onChange={setViewValue}
+        value="alpha"
+        onChange={() => {}}
       />
     </>
-  );
-}
-
-export const RTLDiff: Story = {
-  render: () => <InteractiveSegmentedControl />,
-  ...withRTLDiff({ width: 'stretch', renderAs: 'iframe' }),
+  ),
+  ...withRTLDiff(),
 };

package/src/Tooltip/Tooltip.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 
+import { DirectionProvider } from '../Provider/Direction/DirectionProvider';
 import Tooltip from '.';
 
 describe('Tooltip Component', () => {
@@ -102,4 +103,54 @@ describe('Tooltip Component', () => {
     const tooltipElement = screen.getByRole('tooltip', { hidden: true });
     expect(tooltipElement).toBeVisible();
   });
+
+  describe('RTL position mirroring', () => {
+    it('mirrors position="left" to right in RTL', async () => {
+      render(
+        <DirectionProvider direction="rtl">
+          <Tooltip label="Test Tooltip" position="left">
+            <span>Hover me</span>
+          </Tooltip>
+        </DirectionProvider>,
+      );
+      const triggerElement = screen.getByText('Hover me');
+      await userEvent.hover(triggerElement);
+
+      const tooltip = screen.getByRole('tooltip', { hidden: true });
+      expect(tooltip).toHaveAttribute('data-popper-placement', 'right');
+    });
+
+    it('mirrors position="right" to left in RTL', async () => {
+      render(
+        <DirectionProvider direction="rtl">
+          <Tooltip label="Test Tooltip" position="right">
+            <span>Hover me</span>
+          </Tooltip>
+        </DirectionProvider>,
+      );
+      const triggerElement = screen.getByText('Hover me');
+      await userEvent.hover(triggerElement);
+
+      const tooltip = screen.getByRole('tooltip', { hidden: true });
+      expect(tooltip).toHaveAttribute('data-popper-placement', 'left');
+    });
+
+    it.each(['top', 'bottom'] as const)(
+      'does not mirror position="%s" in RTL',
+      async (position) => {
+        render(
+          <DirectionProvider direction="rtl">
+            <Tooltip label="Test Tooltip" position={position}>
+              <span>Hover me</span>
+            </Tooltip>
+          </DirectionProvider>,
+        );
+        const triggerElement = screen.getByText('Hover me');
+        await userEvent.hover(triggerElement);
+
+        const tooltip = screen.getByRole('tooltip', { hidden: true });
+        expect(tooltip).toHaveAttribute('data-popper-placement', position);
+      },
+    );
+  });
 });

package/src/Tooltip/Tooltip.tsx

@@ -19,6 +19,7 @@ import {
 } from 'react';
 
 import { CommonProps, Position } from '../common';
+import useDirection from '../common/hooks/useDirection';
 import {
   PositionBottom,
   PositionLeft,
@@ -42,12 +43,16 @@ const Tooltip = ({
 }: TooltipProps) => {
   const [open, setOpen] = useState(false);
   const arrowRef = useRef<HTMLDivElement | null>(null);
+  const { isRTL } = useDirection();
+
+  const resolvedPosition =
+    isRTL && position === 'left' ? 'right' : isRTL && position === 'right' ? 'left' : position;
 
   const fallbackId = useId();
   const tooltipId = id ?? fallbackId;
 
   const { refs, floatingStyles, placement, middlewareData } = useFloating({
-    placement: position,
+    placement: resolvedPosition,
     middleware: [
       offset(16),
       flip({ fallbackPlacements: [Position.TOP] }),

package/src/Tooltip/_stories/Tooltip.rtl.test.story.tsx

@@ -13,16 +13,6 @@ export default {
 
 type Story = StoryObj<typeof Tooltip>;
 
-const iframeDiff = withRTLDiff({ renderAs: 'iframe' });
-
-const containerStyle: React.CSSProperties = {
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  minHeight: '20rem',
-  width: '100%',
-};
-
 const hoverTrigger = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
   const canvas = within(canvasElement);
   const button = canvas.queryByRole('button');
@@ -32,48 +22,40 @@ const hoverTrigger = async ({ canvasElement }: { canvasElement: HTMLElement }) =
 
 export const PositionTop: Story = {
   render: () => (
-    <div style={containerStyle}>
-      <Tooltip label="Top positioned tooltip" position="top">
-        <Button>Top</Button>
-      </Tooltip>
-    </div>
+    <Tooltip label="Top positioned tooltip" position="top">
+      <Button>Top</Button>
+    </Tooltip>
   ),
   play: hoverTrigger,
-  ...iframeDiff,
+  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center', vAlign: 'bottom' }),
 };
 
 export const PositionBottom: Story = {
   render: () => (
-    <div style={containerStyle}>
-      <Tooltip label="Bottom positioned tooltip" position="bottom">
-        <Button>Bottom</Button>
-      </Tooltip>
-    </div>
+    <Tooltip label="Bottom positioned tooltip" position="bottom">
+      <Button>Bottom</Button>
+    </Tooltip>
   ),
   play: hoverTrigger,
-  ...iframeDiff,
+  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center' }),
 };
 
 export const PositionRight: Story = {
   render: () => (
-    <div style={containerStyle}>
-      <Tooltip label="Right positioned tooltip" position="right">
-        <Button>Right</Button>
-      </Tooltip>
-    </div>
+    <Tooltip label="Right positioned tooltip" position="right">
+      <Button>Right</Button>
+    </Tooltip>
   ),
   play: hoverTrigger,
-  ...iframeDiff,
+  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'left', vAlign: 'center', width: 'stretch' }),
 };
 
 export const PositionLeft: Story = {
   render: () => (
-    <div style={containerStyle}>
-      <Tooltip label="Left positioned tooltip" position="left">
-        <Button>Left</Button>
-      </Tooltip>
-    </div>
+    <Tooltip label="Left positioned tooltip" position="left">
+      <Button>Left</Button>
+    </Tooltip>
   ),
   play: hoverTrigger,
-  ...iframeDiff,
+  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'right', vAlign: 'center' }),
 };

package/src/main.css

@@ -20354,53 +20354,36 @@ a[data-toggle="tooltip"] {
   block-size: var(--np-avatar-layout-size);
 }
 .np-avatar-layout-diagonal-mask {
-  --np-avatar-layout-mask-direction: right;
   -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);
           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);
-  -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);
-          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);
 }
 [dir="rtl"] .np-avatar-layout-diagonal-mask {
-  --np-avatar-layout-mask-direction: left;
-  margin-inline-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
-  margin-inline-end: unset;
+  -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);
+          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);
 }
 .np-avatar-layout-diagonal-child {
   margin-inline-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
   margin-block-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
 }
 [dir="rtl"] .np-avatar-layout-diagonal-child {
-  -webkit-mask-image: initial;
-          mask-image: initial;
+  margin-inline-start: 0;
+  margin-inline-end: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
 }
 .np-avatar-layout-horizontal {
-  --np-avatar-layout-mask-direction: left;
   inline-size: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - (var(--np-avatar-offset) * (var(--np-avatar-avatars-count) - 1)));
   inline-size: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
   block-size: var(--np-avatar-layout-size);
 }
-[dir="rtl"] .np-avatar-layout-horizontal {
-  --np-avatar-layout-mask-direction: right;
-}
-.np-avatar-layout-horizontal-mask,
-[dir="rtl"] .np-avatar-layout-horizontal-child {
-  -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);
-          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);
-  -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);
-          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);
-}
-[dir="rtl"] .np-avatar-layout-horizontal-mask {
-  margin-inline-end: calc(var(--np-avatar-offset) * -1);
-}
-[dir="rtl"] .np-avatar-layout-horizontal-mask:last-child {
-  -webkit-mask-image: initial;
-          mask-image: initial;
+.np-avatar-layout-horizontal-mask {
+  -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);
+          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);
+  -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);
+          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);
 }
 .np-avatar-layout-horizontal-child {
   margin-inline-start: calc(var(--np-avatar-offset) * -1);
 }
 [dir="rtl"] .np-avatar-layout-horizontal-child {
-  margin-inline-start: unset;
   margin-inline-end: calc(var(--np-avatar-offset) * -1);
 }
 .np-icon-button {
@@ -25818,8 +25801,7 @@ button.np-link {
   background: var(--color-background-screen);
   border-radius: 24px;
   border-radius: var(--size-24);
-  transition: left 300ms,
-    right 300ms;
+  transition: left 300ms;
 }
 .segmented-control__segments--no-animate::after {
   transition: none !important;

package/src/FlowNavigation/_stories/FlowNavigation.rtl.test.story.tsx

@@ -1,78 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-webpack5';
-
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
-import AvatarView from '../../AvatarView';
-import { ProfileType } from '../../common';
-import Logo from '../../Logo';
-
-import FlowNavigation from '../FlowNavigation';
-
-const noop = () => {};
-
-const steps = [
-  { label: 'Amount', hoverLabel: '100 GBP', onClick: noop },
-  { label: 'You', hoverLabel: 'Elena Durante', onClick: noop },
-  { label: 'Review', onClick: noop },
-  { label: 'Pay', onClick: noop },
-];
-
-const meta: Meta<typeof FlowNavigation> = {
-  component: FlowNavigation,
-  title: 'Navigation/FlowNavigation/Tests/RTL Diff',
-  tags: ['!autodocs', '!manifest'],
-  parameters: {
-    padding: '0',
-  },
-};
-export default meta;
-
-type Story = StoryObj<typeof FlowNavigation>;
-
-export const Desktop: Story = {
-  render: () => (
-    <>
-      <FlowNavigation
-        activeStep={2}
-        avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
-        logo={<Logo />}
-        steps={steps}
-        onClose={noop}
-        onGoBack={noop}
-      />
-      <FlowNavigation
-        avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
-        logo={<Logo />}
-        onClose={noop}
-      />
-      <FlowNavigation
-        done
-        avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
-        logo={<Logo />}
-        steps={steps}
-        onClose={noop}
-      />
-    </>
-  ),
-  ...withRTLDiff(),
-};
-
-export const Mobile: Story = {
-  render: () => (
-    <>
-      <FlowNavigation
-        activeStep={2}
-        avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
-        logo={<Logo />}
-        steps={steps}
-        onClose={noop}
-        onGoBack={noop}
-      />
-      <FlowNavigation
-        avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
-        logo={<Logo />}
-        onClose={noop}
-      />
-    </>
-  ),
-  ...withRTLDiff({ viewport: 'largeMobile' }),
-};