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

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

@@ -117,27 +117,26 @@ export const EdgeInstances: Story = {
   ),
 };
 
+const horizontalSizes = [16, 24, 32, 40, 48, 56, 72, 88, 96] as const;
+const diagonalSizes = [24, 32, 40, 48, 56, 72, 88, 96] as const;
+
+const rowStyle = { display: 'flex', alignItems: 'center', gap: '16px', flexWrap: 'wrap' } as const;
+const twoAvatars = [{ asset: <Plane /> }, { asset: <Plane /> }] as const;
+
 export const RTLDiff: Story = {
   render: () => (
     <>
-      <AvatarLayout
-        orientation="horizontal"
-        size={48}
-        avatars={[{ asset: <Flag code="br" /> }, { asset: <Flag code="jp" /> }]}
-      />
-
-      <AvatarLayout
-        orientation="horizontal"
-        size={48}
-        interactive
-        avatars={[{ asset: <Freeze /> }, { asset: <Freeze /> }]}
-      />
+      <div style={rowStyle}>
+        {horizontalSizes.map((size) => (
+          <AvatarLayout key={size} orientation="horizontal" size={size} avatars={[...twoAvatars]} />
+        ))}
+      </div>
 
-      <AvatarLayout
-        orientation="horizontal"
-        size={48}
-        avatars={[{ profileName: 'Jay Jay' }, { profileName: 'Amy Amy' }]}
-      />
+      <div style={rowStyle}>
+        {diagonalSizes.map((size) => (
+          <AvatarLayout key={size} orientation="diagonal" size={size} avatars={[...twoAvatars]} />
+        ))}
+      </div>
 
       <AvatarLayout
         orientation="horizontal"
@@ -148,32 +147,8 @@ export const RTLDiff: Story = {
 
       <AvatarLayout
         orientation="horizontal"
-        size={32}
-        avatars={[{ asset: <Flag code="eu" /> }, { asset: <Flag code="gb" /> }]}
-      />
-
-      <AvatarLayout
-        orientation="horizontal"
-        size={72}
-        avatars={[{ asset: <Freeze /> }, { asset: <Freeze /> }, { asset: <Freeze /> }]}
-      />
-
-      <AvatarLayout
-        orientation="diagonal"
-        size={48}
-        avatars={[{ asset: <Flag code="br" /> }, { asset: <Flag code="jp" /> }]}
-      />
-
-      <AvatarLayout
-        orientation="diagonal"
-        size={48}
-        avatars={[{ profileName: 'Jay Jay' }, { profileName: 'Amy Amy' }]}
-      />
-
-      <AvatarLayout
-        orientation="diagonal"
         size={72}
-        avatars={[{ asset: <Freeze /> }, { asset: <Freeze /> }]}
+        avatars={[{ asset: <Plane /> }, { asset: <Plane /> }, { asset: <Plane /> }]}
       />
     </>
   ),

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

@@ -1,9 +1,8 @@
 import { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import { Input } from '../../Inputs/Input/Input';
 import { TextArea } from '../../Inputs/TextArea/TextArea';
-import { lorem10 } from '../../test-utils';
 import Field, { FieldProps } from '..';
 import { Sentiment } from '../../common';
 
@@ -59,44 +58,56 @@ export const DeprecatedProps: Story = {
 };
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      {/* Required label (default) — label text aligns to start */}
-      <Field label="Required field">
-        <Input defaultValue="Input value" />
-      </Field>
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <Field label={i18n.requiredLabel}>
+          <Input defaultValue={i18n.inputValue} />
+        </Field>
 
-      {/* Optional label — "(optional)" suffix uses directional margin-left */}
-      <Field label="Optional field" required={false}>
-        <Input defaultValue="Input value" />
-      </Field>
+        <Field label={i18n.optionalLabel} required={false}>
+          <Input defaultValue={i18n.inputValue} />
+        </Field>
 
-      {/* Label + description + message — full vertical layout with directional icon */}
-      <Field
-        label="Field with description and message"
-        required={false}
-        description={lorem10}
-        message="This is a validation message"
-        sentiment="negative"
-      >
-        <Input defaultValue="Input value" />
-      </Field>
+        <Field
+          label={i18n.descriptionLabel}
+          required={false}
+          description={i18n.description}
+          message={i18n.validationMessage}
+          sentiment="negative"
+        >
+          <Input defaultValue={i18n.inputValue} />
+        </Field>
 
-      {/* Message only (no label) — InlinePrompt icon+text layout visible */}
-      <Field message="A helpful message" sentiment="positive">
-        <Input defaultValue="Input value" />
-      </Field>
+        <Field message={i18n.helpfulMessage} sentiment="positive">
+          <Input defaultValue={i18n.inputValue} />
+        </Field>
 
-      {/* Loading message — spinner replaces icon but layout structure is identical */}
-      <Field label="Field with loading message" message="Saving…" messageLoading>
-        <Input defaultValue="Input value" />
-      </Field>
+        <Field label={i18n.loadingLabel} message={i18n.savingMessage} messageLoading>
+          <Input defaultValue={i18n.inputValue} />
+        </Field>
 
-      {/* Textarea with char counter — counter uses text-align:right + margin-left:auto */}
-      <Field label="Textarea with char counter" required={false} description="Max 100 characters">
-        <TextArea maxLength={100} defaultValue="Textarea value" />
-      </Field>
-    </>
-  ),
-  ...withRTLDiff(),
+        <Field label={i18n.textareaLabel} required={false} description={i18n.maxChars}>
+          <TextArea maxLength={100} defaultValue={i18n.textareaValue} />
+        </Field>
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      requiredLabel: { ltr: 'Required field', rtl: 'حقل مطلوب' },
+      optionalLabel: { ltr: 'Optional field', rtl: 'حقل اختياري' },
+      descriptionLabel: { ltr: 'Field with description and message', rtl: 'حقل مع وصف ورسالة' },
+      description: { ltr: 'A short description of the field', rtl: 'وصف قصير للحقل' },
+      validationMessage: { ltr: 'This is a validation message', rtl: 'هذه رسالة تحقق' },
+      helpfulMessage: { ltr: 'A helpful message', rtl: 'رسالة مفيدة' },
+      loadingLabel: { ltr: 'Field with loading message', rtl: 'حقل مع رسالة تحميل' },
+      savingMessage: { ltr: 'Saving…', rtl: 'جارٍ الحفظ…' },
+      textareaLabel: { ltr: 'Textarea with char counter', rtl: 'حقل نص مع عداد الأحرف' },
+      maxChars: { ltr: 'Max 100 characters', rtl: 'الحد الأقصى 100 حرف' },
+      inputValue: { ltr: 'Input value', rtl: 'قيمة الإدخال' },
+      textareaValue: { ltr: 'Textarea value', rtl: 'قيمة حقل النص' },
+    },
+  }),
 };

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

@@ -0,0 +1,78 @@
+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' }),
+};

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

@@ -1,6 +1,5 @@
 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';
@@ -77,46 +76,3 @@ export const LongLabel: Story = {
     />
   ),
 };
-
-const rtlSteps = [
-  { label: 'Amount', hoverLabel: '100 GBP', onClick: noop },
-  { label: 'You', hoverLabel: 'Elena Durante', onClick: noop },
-  { label: 'Review', onClick: noop },
-  { label: 'Pay', onClick: noop },
-];
-
-/**
- * FlowNavigation has directional layout: back button on inline-start,
- * close button and avatar on inline-end, and a stepper progress bar that
- * flows in the reading direction. All of these flip in RTL.
- */
-export const RTLDiff: Story = {
-  render: () => (
-    <>
-      {/* With stepper, back button, close button, and avatar */}
-      <FlowNavigation
-        activeStep={2}
-        avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
-        logo={<Logo />}
-        steps={rtlSteps}
-        onClose={noop}
-        onGoBack={noop}
-      />
-      {/* Without stepper — logo left, close button right */}
-      <FlowNavigation
-        avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
-        logo={<Logo />}
-        onClose={noop}
-      />
-      {/* Done state — no stepper, logo and close button only */}
-      <FlowNavigation
-        done
-        avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
-        logo={<Logo />}
-        steps={rtlSteps}
-        onClose={noop}
-      />
-    </>
-  ),
-  ...withRTLDiff(),
-};

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import Info from '../../Info';
 import Label from '..';
 
@@ -12,25 +12,38 @@ export default {
 type Story = StoryObj<typeof Label>;
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <Label>Plain label text</Label>
-      <Label>
-        <Label.Optional>Label with optional marker</Label.Optional>
-      </Label>
-      <Label>
-        <div>
-          Label with info icon{' '}
-          <Info content="Helpful tooltip content" aria-label="More information" />
-        </div>
-      </Label>
-      <Label>
-        <Label.Optional>
-          Label with optional and info icon{' '}
-          <Info content="Helpful tooltip content" aria-label="More information" />
-        </Label.Optional>
-      </Label>
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <Label>{i18n.plain}</Label>
+        <Label>
+          <Label.Optional>{i18n.optional}</Label.Optional>
+        </Label>
+        <Label>
+          <div>
+            {i18n.withInfo} <Info content={i18n.tooltip} aria-label={i18n.moreInfo} />
+          </div>
+        </Label>
+        <Label>
+          <Label.Optional>
+            {i18n.optionalWithInfo} <Info content={i18n.tooltip} aria-label={i18n.moreInfo} />
+          </Label.Optional>
+        </Label>
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      plain: { ltr: 'Plain label text', rtl: 'نص التسمية العادي' },
+      optional: { ltr: 'Label with optional marker', rtl: 'تسمية مع علامة اختيارية' },
+      withInfo: { ltr: 'Label with info icon', rtl: 'تسمية مع أيقونة معلومات' },
+      optionalWithInfo: {
+        ltr: 'Label with optional and info icon',
+        rtl: 'تسمية مع اختيارية وأيقونة معلومات',
+      },
+      tooltip: { ltr: 'Helpful tooltip content', rtl: 'محتوى تلميح مفيد' },
+      moreInfo: { ltr: 'More information', rtl: 'مزيد من المعلومات' },
+    },
+  }),
 };

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

@@ -14,16 +14,6 @@ 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');
@@ -33,64 +23,64 @@ const clickTrigger = async ({ canvasElement }: { canvasElement: HTMLElement }) =
 
 export const PlacementRight: Story = {
   render: () => (
-    <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>
+    <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>
   ),
   play: clickTrigger,
-  ...iframeDiff,
+  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'left', vAlign: 'center' }),
 };
 
 export const PlacementLeft: Story = {
   render: () => (
-    <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>
+    <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>
   ),
   play: clickTrigger,
-  ...iframeDiff,
+  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'right', vAlign: 'center' }),
 };
 
 export const PlacementTop: Story = {
   render: () => (
-    <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>
+    <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>
   ),
   play: clickTrigger,
-  ...iframeDiff,
+  ...withRTLDiff({ renderAs: 'iframe', vAlign: 'bottom', hAlign: 'center' }),
 };
 
 export const PlacementBottom: Story = {
   render: () => (
-    <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>
+    <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>
   ),
   play: clickTrigger,
-  ...iframeDiff,
+  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center' }),
 };

package/src/SegmentedControl/SegmentedControl.css

@@ -35,7 +35,8 @@
   background: var(--color-background-screen);
   border-radius: 24px;
   border-radius: var(--size-24);
-  transition: left 300ms;
+  transition: left 300ms,
+    right 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,7 +31,9 @@
   z-index: 0;
   background: var(--color-background-screen);
   border-radius: var(--size-24);
-  transition: left 300ms;
+  transition:
+    left 300ms,
+    right 300ms;
 }
 
 .segmented-control__segments--no-animate::after {

package/src/SegmentedControl/SegmentedControl.tsx

@@ -3,6 +3,7 @@ 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 };
 
@@ -40,6 +41,7 @@ const SegmentedControl = ({
 }: SegmentedControlProps) => {
   const isMountedRef = useRef(false);
   const [animate, setAnimate] = useState(false);
+  const { isRTL } = useDirection();
 
   const segmentsRef = useRef<HTMLDivElement>(null);
 
@@ -62,8 +64,12 @@ const SegmentedControl = ({
     // This is so we can animate the highlight to the selected segment
     if (selectedSegmentRef?.current && segmentsRef.current) {
       const { style } = segmentsRef.current;
-      style.setProperty('--segment-highlight-width', `${selectedSegmentRef.current.offsetWidth}px`);
-      style.setProperty('--segment-highlight-x', `${selectedSegmentRef.current.offsetLeft}px`);
+      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`);
     }
   };
 

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

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