@transferwise/components 46.164.0 → 46.165.1

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import Drawer from '..';
 
 export default {
@@ -11,48 +11,75 @@ export default {
 
 type Story = StoryObj<typeof Drawer>;
 
-const iframeDiff = withRTLDiff({ renderAs: 'iframe' });
-
 export const PositionRight: Story = {
-  render: () => (
-    <Drawer
-      open
-      position="right"
-      headerTitle="Drawer title"
-      footerContent={<button type="button">Done</button>}
-      onClose={() => {}}
-    >
-      <p>Drawer body content.</p>
-    </Drawer>
-  ),
-  ...iframeDiff,
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Drawer
+        open
+        position="right"
+        headerTitle={i18n.title}
+        footerContent={<button type="button">{i18n.done}</button>}
+        onClose={() => {}}
+      >
+        <p>{i18n.body}</p>
+      </Drawer>
+    );
+  },
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    i18n: {
+      title: { en: 'Drawer title', ar: 'عنوان اللوحة' },
+      done: { en: 'Done', ar: 'تم' },
+      body: { en: 'Drawer body content.', ar: 'محتوى اللوحة الجانبية.' },
+    },
+  }),
 };
 
 export const PositionLeft: Story = {
-  render: () => (
-    <Drawer
-      open
-      position="left"
-      headerTitle="Left drawer title"
-      footerContent={<button type="button">Done</button>}
-      onClose={() => {}}
-    >
-      <p>Left drawer body content.</p>
-    </Drawer>
-  ),
-  ...iframeDiff,
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Drawer
+        open
+        position="left"
+        headerTitle={i18n.title}
+        footerContent={<button type="button">{i18n.done}</button>}
+        onClose={() => {}}
+      >
+        <p>{i18n.body}</p>
+      </Drawer>
+    );
+  },
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    i18n: {
+      title: { en: 'Left drawer title', ar: 'عنوان اللوحة اليسرى' },
+      done: { en: 'Done', ar: 'تم' },
+      body: { en: 'Left drawer body content.', ar: 'محتوى اللوحة اليسرى.' },
+    },
+  }),
 };
 
 export const WithoutTitle: Story = {
-  render: () => (
-    <Drawer
-      open
-      position="right"
-      footerContent={<button type="button">Done</button>}
-      onClose={() => {}}
-    >
-      <p>No title drawer content.</p>
-    </Drawer>
-  ),
-  ...iframeDiff,
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Drawer
+        open
+        position="right"
+        footerContent={<button type="button">{i18n.done}</button>}
+        onClose={() => {}}
+      >
+        <p>{i18n.body}</p>
+      </Drawer>
+    );
+  },
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    i18n: {
+      done: { en: 'Done', ar: 'تم' },
+      body: { en: 'No title drawer content.', ar: 'محتوى لوحة بدون عنوان.' },
+    },
+  }),
 };

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn, userEvent, within } from 'storybook/test';
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import ExpressiveMoneyInput from '..';
 import { Rewards } from '@transferwise/icons';
 
@@ -24,95 +24,128 @@ const currencySelectorOptions = [
 ];
 
 export const TriggerVariants: Story = {
-  render: () => (
-    <>
-      {/* Currency selector on leading side — flips in RTL */}
-      <ExpressiveMoneyInput
-        label="You send"
-        currency="GBP"
-        amount={1234.56}
-        currencySelector={{
-          options: currencySelectorOptions,
-          onChange: fn(),
-          onSearchChange: fn(),
-          onOpen: fn(),
-        }}
-        onAmountChange={fn()}
-      />
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        {/* Currency selector on leading side — flips in RTL */}
+        <ExpressiveMoneyInput
+          label={i18n.youSend}
+          currency="GBP"
+          amount={1234.56}
+          currencySelector={{
+            options: currencySelectorOptions,
+            onChange: fn(),
+            onSearchChange: fn(),
+            onOpen: fn(),
+          }}
+          onAmountChange={fn()}
+        />
 
-      {/* Chevron on trailing side — flips in RTL */}
-      <ExpressiveMoneyInput
-        label="You send"
-        currency="EUR"
-        amount={0}
-        showChevron
-        currencySelector={{
-          options: currencySelectorOptions,
-          onChange: fn(),
-          onSearchChange: fn(),
-          onOpen: fn(),
-        }}
-        onAmountChange={fn()}
-      />
+        {/* Chevron on trailing side — flips in RTL */}
+        <ExpressiveMoneyInput
+          label={i18n.youSend}
+          currency="EUR"
+          amount={0}
+          showChevron
+          currencySelector={{
+            options: currencySelectorOptions,
+            onChange: fn(),
+            onSearchChange: fn(),
+            onOpen: fn(),
+          }}
+          onAmountChange={fn()}
+        />
 
-      {/* InlinePrompt with media icon — icon on leading end of prompt */}
-      <ExpressiveMoneyInput
-        label="You send"
-        currency="USD"
-        amount={500}
-        currencySelector={{
-          options: currencySelectorOptions,
-          onChange: fn(),
-          onSearchChange: fn(),
-          onOpen: fn(),
-        }}
-        inlinePrompt={{
-          message: 'Great rate available',
-          sentiment: 'positive',
-          media: <Rewards />,
-        }}
-        onAmountChange={fn()}
-      />
+        {/* InlinePrompt with media icon — icon on leading end of prompt */}
+        <ExpressiveMoneyInput
+          label={i18n.youSend}
+          currency="USD"
+          amount={500}
+          currencySelector={{
+            options: currencySelectorOptions,
+            onChange: fn(),
+            onSearchChange: fn(),
+            onOpen: fn(),
+          }}
+          inlinePrompt={{
+            message: i18n.greatRate,
+            sentiment: 'positive',
+            media: <Rewards />,
+          }}
+          onAmountChange={fn()}
+        />
 
-      {/* Secondary avatar addon in currency selector */}
+        {/* Secondary avatar addon in currency selector */}
+        <ExpressiveMoneyInput
+          label={i18n.youSend}
+          currency="GBP"
+          amount={750}
+          currencySelector={{
+            options: currencySelectorOptions,
+            addons: [{ profileName: i18n.profileName }],
+            onChange: fn(),
+            onSearchChange: fn(),
+            onOpen: fn(),
+          }}
+          onAmountChange={fn()}
+        />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    width: 'stretch',
+    i18n: {
+      youSend: { en: 'You send', ar: 'أنت ترسل' },
+      greatRate: { en: 'Great rate available', ar: 'سعر تحويل رائع متاح' },
+      profileName: { en: 'Mikkael Jordan', ar: 'ميكائيل جوردان' },
+    },
+  }),
+};
+
+export const OpenDropdown: Story = {
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
       <ExpressiveMoneyInput
-        label="You send"
+        label={i18n.youSend}
         currency="GBP"
-        amount={750}
+        amount={1234.56}
         currencySelector={{
-          options: currencySelectorOptions,
-          addons: [{ profileName: 'Mikkael Jordan' }],
+          options: [
+            {
+              title: i18n.popularGroup,
+              currencies: [
+                { code: 'GBP', label: i18n.britishPound, keywords: ['british'] },
+                { code: 'EUR', label: i18n.euro, keywords: ['euro'] },
+                { code: 'USD', label: i18n.usDollar, keywords: ['dollar'] },
+              ],
+            },
+          ],
           onChange: fn(),
           onSearchChange: fn(),
           onOpen: fn(),
         }}
         onAmountChange={fn()}
       />
-    </>
-  ),
-  ...withRTLDiff({ renderAs: 'iframe', width: 'stretch' }),
-};
-
-export const OpenDropdown: Story = {
-  render: () => (
-    <ExpressiveMoneyInput
-      label="You send"
-      currency="GBP"
-      amount={1234.56}
-      currencySelector={{
-        options: currencySelectorOptions,
-        onChange: fn(),
-        onSearchChange: fn(),
-        onOpen: fn(),
-      }}
-      onAmountChange={fn()}
-    />
-  ),
+    );
+  },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const trigger = canvas.queryByRole('combobox');
     if (!trigger) return;
     await userEvent.click(trigger);
   },
-  ...withRTLDiff({ renderAs: 'iframe', width: '80%' }),
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    width: '80%',
+    i18n: {
+      youSend: { en: 'You send', ar: 'أنت ترسل' },
+      popularGroup: { en: 'Popular', ar: 'الأكثر شيوعًا' },
+      britishPound: { en: 'British Pound', ar: 'الجنيه الإسترليني' },
+      euro: { en: 'Euro', ar: 'اليورو' },
+      usDollar: { en: 'US Dollar', ar: 'الدولار الأمريكي' },
+    },
+  }),
 };

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

@@ -113,28 +113,28 @@ export const RTLDiff: Story = {
   ...withRTLDiff({
     width: 'stretch',
     i18n: {
-      placeholder_en: { ltr: 'LTR placeholder...', rtl: 'LTR placeholder...' },
-      placeholder_ar: { ltr: 'Localised placeholder...', rtl: 'نص بديل مترجم...' },
+      placeholder_en: { en: 'LTR placeholder...', ar: 'LTR placeholder...' },
+      placeholder_ar: { en: 'Localised placeholder...', ar: 'نص بديل مترجم...' },
       value_en: {
-        ltr: 'ltr@value.com',
-        rtl: 'ltr@value.com',
+        en: 'ltr@value.com',
+        ar: 'ltr@value.com',
       },
       value_ar: {
-        ltr: 'localised value',
-        rtl: 'قيمة مُكيَّفة محلياً',
+        en: 'localised value',
+        ar: 'قيمة مُكيَّفة محليًا',
       },
-      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: 'قيمة حقل النص' },
+      requiredLabel: { en: 'Required field', ar: 'حقل مطلوب' },
+      optionalLabel: { en: 'Optional field', ar: 'حقل اختياري' },
+      descriptionLabel: { en: 'Field with description and message', ar: 'حقل مع وصف ورسالة' },
+      description: { en: 'A short description of the field', ar: 'وصف قصير للحقل' },
+      validationMessage: { en: 'This is a validation message', ar: 'هذه رسالة تحقق' },
+      helpfulMessage: { en: 'A helpful message', ar: 'رسالة مفيدة' },
+      loadingLabel: { en: 'Field with loading message', ar: 'حقل مع رسالة تحميل' },
+      savingMessage: { en: 'Saving…', ar: 'جارٍ الحفظ…' },
+      textareaLabel: { en: 'Textarea with char counter', ar: 'حقل نص مع عداد الأحرف' },
+      maxChars: { en: 'Max 100 characters', ar: 'الحد الأقصى 100 حرف' },
+      inputValue: { en: 'Input value', ar: 'قيمة الإدخال' },
+      textareaValue: { en: 'Textarea value', ar: 'قيمة حقل النص' },
     },
   }),
 };

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

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import AvatarView from '../../AvatarView';
 import { ProfileType } from '../../common';
 import Logo from '../../Logo';
@@ -9,13 +9,6 @@ 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',
@@ -29,50 +22,87 @@ 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(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    const steps = [
+      { label: i18n.amount, hoverLabel: i18n.amountValue, onClick: noop },
+      { label: i18n.you, hoverLabel: i18n.recipientName, onClick: noop },
+      { label: i18n.review, onClick: noop },
+      { label: i18n.pay, onClick: noop },
+    ];
+    return (
+      <>
+        <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({
+    i18n: {
+      amount: { en: 'Amount', ar: 'المبلغ' },
+      amountValue: { en: '100 GBP', ar: '100 جنيه إسترليني' },
+      you: { en: 'You', ar: 'بياناتك' },
+      recipientName: { en: 'Elena Durante', ar: 'إيلينا دورانتي' },
+      review: { en: 'Review', ar: 'المراجعة' },
+      pay: { en: 'Pay', ar: 'الدفع' },
+    },
+  }),
 };
 
 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' }),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    const steps = [
+      { label: i18n.amount, hoverLabel: i18n.amountValue, onClick: noop },
+      { label: i18n.you, hoverLabel: i18n.recipientName, onClick: noop },
+      { label: i18n.review, onClick: noop },
+      { label: i18n.pay, onClick: noop },
+    ];
+    return (
+      <>
+        <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',
+    i18n: {
+      amount: { en: 'Amount', ar: 'المبلغ' },
+      amountValue: { en: '100 GBP', ar: '100 جنيه إسترليني' },
+      you: { en: 'You', ar: 'بياناتك' },
+      recipientName: { en: 'Elena Durante', ar: 'إيلينا دورانتي' },
+      review: { en: 'Review', ar: 'المراجعة' },
+      pay: { en: 'Pay', ar: 'الدفع' },
+    },
+  }),
 };

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

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import Header, { type HeaderProps } from '../Header';
 import { withVariantConfig } from '../../../.storybook/helpers';
 
@@ -131,21 +131,33 @@ export const AllVariants: Story = {
  * difference.
  */
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <Header title="Group level without action" level="group" />
-      <Header
-        title="Group level with action"
-        level="group"
-        action={{ 'aria-label': 'View all', text: 'View all', href: '#' }}
-      />
-      <Header title="Section level without action" level="section" />
-      <Header
-        title="Section level with action"
-        level="section"
-        action={{ 'aria-label': 'Learn more', text: 'Learn more', href: '#' }}
-      />
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <Header title={i18n.groupWithoutAction} level="group" />
+        <Header
+          title={i18n.groupWithAction}
+          level="group"
+          action={{ 'aria-label': i18n.viewAll, text: i18n.viewAll, href: '#' }}
+        />
+        <Header title={i18n.sectionWithoutAction} level="section" />
+        <Header
+          title={i18n.sectionWithAction}
+          level="section"
+          action={{ 'aria-label': i18n.learnMore, text: i18n.learnMore, href: '#' }}
+        />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      groupWithoutAction: { en: 'Group level without action', ar: 'مستوى المجموعة بدون إجراء' },
+      groupWithAction: { en: 'Group level with action', ar: 'مستوى المجموعة مع إجراء' },
+      sectionWithoutAction: { en: 'Section level without action', ar: 'مستوى القسم بدون إجراء' },
+      sectionWithAction: { en: 'Section level with action', ar: 'مستوى القسم مع إجراء' },
+      viewAll: { en: 'View all', ar: 'عرض الكل' },
+      learnMore: { en: 'Learn more', ar: 'اعرف المزيد' },
+    },
+  }),
 };