@transferwise/components 0.0.0-experimental-102c421 → 0.0.0-experimental-151e673

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/Header/_stories/Header.test.story.tsx

@@ -86,7 +86,7 @@ export const SectionTrailingSpaceWithAction: Story = {
 };
 
 export const AllVariants: Story = {
-  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green'], {
+  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green', 'rtl'], {
     parameters: {
       padding: '0',
     },

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

@@ -12,6 +12,8 @@ export default {
 
 type Story = StoryObj<typeof Info>;
 
+const iframeDiff = withRTLDiff({ renderAs: 'iframe' });
+
 const openInfo = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
   const canvas = within(canvasElement);
   const button = canvas.queryByRole('button');
@@ -19,60 +21,32 @@ const openInfo = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
   await userEvent.click(button);
 };
 
-export const PlacementTop: Story = {
-  render: () => (
-    <Info
-      aria-label="Info trigger"
-      title="Information"
-      content="This is some descriptive content inside the info component."
-      presentation="POPOVER"
-      preferredPlacement="top"
-    />
-  ),
-  play: openInfo,
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center', vAlign: 'bottom' }),
-};
-
-export const PlacementRight: Story = {
-  render: () => (
-    <Info
-      aria-label="Info trigger"
-      title="Information"
-      content="This is some descriptive content inside the info component."
-      presentation="POPOVER"
-      preferredPlacement="right"
-    />
-  ),
-  play: openInfo,
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'left', vAlign: 'center' }),
-};
-
-export const PlacementBottom: Story = {
+export const Popover: Story = {
   render: () => (
     <Info
       aria-label="Info trigger"
       title="Information"
       content="This is some descriptive content inside the info component."
       presentation="POPOVER"
-      preferredPlacement="bottom"
+      size="sm"
     />
   ),
   play: openInfo,
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center' }),
+  ...iframeDiff,
 };
 
-export const PlacementLeft: Story = {
+export const PopoverLarge: Story = {
   render: () => (
     <Info
       aria-label="Info trigger"
       title="Information"
       content="This is some descriptive content inside the info component."
       presentation="POPOVER"
-      preferredPlacement="left"
+      size="lg"
     />
   ),
   play: openInfo,
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'right', vAlign: 'center' }),
+  ...iframeDiff,
 };
 
 export const Modal: Story = {
@@ -82,8 +56,9 @@ export const Modal: Story = {
       title="Information"
       content="This is some descriptive content inside the info component."
       presentation="MODAL"
+      size="sm"
     />
   ),
   play: openInfo,
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center', vAlign: 'center' }),
+  ...iframeDiff,
 };

package/src/Info/_stories/Info.story.tsx

@@ -36,5 +36,5 @@ export const Sandbox = createSandboxStory({
 });
 
 export const Basic: Story = {
-  ...withVariantConfig(['default', 'dark']),
+  ...withVariantConfig(['default', 'dark', 'rtl']),
 };

package/src/Inputs/SelectInput/_stories/SelectInput.test.story.tsx

@@ -166,7 +166,7 @@ export const Variants: Story<TestCurrency> = {
       </div>
     );
   },
-  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green']),
+  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green', 'rtl']),
 };
 
 /**

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/ListItem/_stories/subcomponents.tsx

@@ -60,7 +60,7 @@ export const SB_LIST_ITEM_CONTROLS: Record<SB_ListItem_ControlType, ReactNode> =
   ),
   navigation: <ListItem.Navigation href="https://wise.com" />,
   navigationAsButton: <ListItem.Navigation onClick={fn()} />,
-  checkbox: <ListItem.Checkbox checked onChange={() => {}} />,
+  checkbox: <ListItem.Checkbox onChange={() => {}} />,
   radio: <ListItem.Radio name="radio" value={Math.random().toString()} onChange={() => {}} />,
   switch: <ListItem.Switch onClick={() => {}} />,
   iconButton: (

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

@@ -84,5 +84,5 @@ export const OpenDropdown: Story = {
     if (!trigger) return;
     await userEvent.click(trigger);
   },
-  ...withRTLDiff({ renderAs: 'iframe', width: '40%' }),
+  ...withRTLDiff({ renderAs: 'iframe', width: '80%' }),
 };

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

@@ -10,45 +10,28 @@ export default {
 
 type Story = StoryObj<typeof Nudge>;
 
-const MEDIA_NAMES = [
-  'globe',
-  'lock',
-  'wallet',
-  'gear',
-  'invite-letter',
-  'personal-card',
-  'business-card',
-  'heart',
-  'multi-currency',
-  'shopping-bag',
-  'flower',
-  'gift-box',
-  'backpack',
-  'documents',
-] as const;
-
 export const RTLDiff: Story = {
   render: () => (
     <>
-      {MEDIA_NAMES.map((mediaName) => (
-        <Nudge
-          key={mediaName}
-          mediaName={mediaName}
-          title={mediaName}
-          link="Link"
-          href="#"
-          onDismiss={() => {}}
-        />
-      ))}
       <Nudge
         mediaName="globe"
-        title="With action"
+        title="With media and dismiss"
+        link="Link"
+        href="#"
+        onDismiss={() => {}}
+      />
+      <div style={{ marginTop: 16 }} />
+      <Nudge
+        mediaName="globe"
+        title="With media, action, and dismiss"
         action={{ text: 'Learn more', href: '#' }}
         onDismiss={() => {}}
       />
+      <div style={{ marginTop: 16 }} />
       <Nudge title="Without media, with dismiss" link="Link" href="#" onDismiss={() => {}} />
+      <div style={{ marginTop: 16 }} />
       <Nudge title="Without media, no dismiss" link="Link" href="#" />
     </>
   ),
-  ...withRTLDiff({ width: 'stretch' }),
+  ...withRTLDiff(),
 };

package/src/PhoneNumberInput/_stories/{PhoneNumberInput.rtl.test.story.tsx → PhoneNumberInput.test.story.tsx}

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { userEvent, within } from 'storybook/test';
 
 import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import Field from '../../Field/Field';
@@ -7,13 +6,21 @@ import PhoneNumberInput from '..';
 
 export default {
   component: PhoneNumberInput,
-  title: 'Forms/PhoneNumberInput/Tests/RTL Diff',
+  title: 'Forms/PhoneNumberInput/Tests',
   tags: ['!autodocs', '!manifest'],
 } satisfies Meta<typeof PhoneNumberInput>;
 
 type Story = StoryObj<typeof PhoneNumberInput>;
 
-export const Sizes: Story = {
+/**
+ * The country code selector sits on the inline-start side of the phone number input.
+ * In RTL the two elements should swap sides — the selector moves to the right and
+ * the text field moves to the left. This diff verifies the flex row reverses correctly.
+ *
+ * Size variants are included because the size prop changes the input-group class and
+ * may affect spacing between the two sub-inputs.
+ */
+export const RTLDiff: Story = {
   render: () => (
     <>
       <Field label="Default (md)">
@@ -35,18 +42,3 @@ export const Sizes: Story = {
   ),
   ...withRTLDiff(),
 };
-
-export const DropdownOpen: Story = {
-  render: () => (
-    <Field label="Phone number">
-      <PhoneNumberInput onChange={() => {}} />
-    </Field>
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const trigger = canvas.queryByRole('combobox');
-    if (!trigger) return;
-    await userEvent.click(trigger);
-  },
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center' }),
-};

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' }),
 };