@transferwise/components 46.165.0 → 46.165.1

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

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { expect } from 'storybook/test';
 
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import { Layout } from '../../common';
 
 import DefinitionList, { type DefinitionListDefinition, type DefinitionListLayout } from '..';
@@ -168,28 +168,6 @@ export const HORIZONTAL_RIGHT_ALIGNED: Story = {
   play: verifySharedColumnBoundary,
 };
 
-const rtlDefinitions: DefinitionListDefinition[] = [
-  { key: 'name', title: 'Full name', value: 'Alice Smith' },
-  { key: 'amount', title: 'Amount sent', value: '1,234.56 GBP' },
-  { key: 'status', title: 'Transfer status', value: 'Completed successfully' },
-];
-
-const rtlDefinitionsWithAction: DefinitionListDefinition[] = [
-  { key: 'name', title: 'Full name', value: 'Alice Smith' },
-  {
-    key: 'amount',
-    title: 'Amount sent',
-    value: '1,234.56 GBP',
-    action: { label: 'Edit' },
-  },
-  {
-    key: 'status',
-    title: 'Transfer status',
-    value: 'Completed successfully',
-    action: { label: 'View details' },
-  },
-];
-
 const layouts: DefinitionListLayout[] = [
   'VERTICAL_TWO_COLUMN',
   'VERTICAL_ONE_COLUMN',
@@ -199,23 +177,61 @@ const layouts: DefinitionListLayout[] = [
 ];
 
 export const RTLDiff: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--size-48)' }}>
-      {layouts.map((layout) => (
-        <section key={layout}>
-          <h3 style={{ fontSize: 14, margin: '0 0 var(--size-8)' }}>{layout}</h3>
-          <DefinitionList layout={layout} definitions={rtlDefinitions} />
-        </section>
-      ))}
-      {layouts.map((layout) => (
-        <section key={`${layout}-action`}>
-          <h3 style={{ fontSize: 14, margin: '0 0 var(--size-8)' }}>
-            {layout} with action buttons
-          </h3>
-          <DefinitionList layout={layout} definitions={rtlDefinitionsWithAction} />
-        </section>
-      ))}
-    </div>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+
+    const rtlDefinitions: DefinitionListDefinition[] = [
+      { key: 'name', title: i18n.fullName, value: i18n.customerName },
+      { key: 'amount', title: i18n.amountSent, value: i18n.amountValue },
+      { key: 'status', title: i18n.transferStatus, value: i18n.statusValue },
+    ];
+
+    const rtlDefinitionsWithAction: DefinitionListDefinition[] = [
+      { key: 'name', title: i18n.fullName, value: i18n.customerName },
+      {
+        key: 'amount',
+        title: i18n.amountSent,
+        value: i18n.amountValue,
+        action: { label: i18n.editAction },
+      },
+      {
+        key: 'status',
+        title: i18n.transferStatus,
+        value: i18n.statusValue,
+        action: { label: i18n.viewDetailsAction },
+      },
+    ];
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--size-48)' }}>
+        {layouts.map((layout) => (
+          <section key={layout}>
+            <h3 style={{ fontSize: 14, margin: '0 0 var(--size-8)' }}>{layout}</h3>
+            <DefinitionList layout={layout} definitions={rtlDefinitions} />
+          </section>
+        ))}
+        {layouts.map((layout) => (
+          <section key={`${layout}-action`}>
+            <h3 style={{ fontSize: 14, margin: '0 0 var(--size-8)' }}>
+              {layout} {i18n.withActionButtons}
+            </h3>
+            <DefinitionList layout={layout} definitions={rtlDefinitionsWithAction} />
+          </section>
+        ))}
+      </div>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      fullName: { en: 'Full name', ar: 'الاسم الكامل' },
+      customerName: { en: 'Alice Smith', ar: 'أليس سميث' },
+      amountSent: { en: 'Amount sent', ar: 'المبلغ المُرسل' },
+      amountValue: { en: '1,234.56 GBP', ar: '1,234.56 جنيه إسترليني' },
+      transferStatus: { en: 'Transfer status', ar: 'حالة التحويل' },
+      statusValue: { en: 'Completed successfully', ar: 'اكتمل بنجاح' },
+      editAction: { en: 'Edit', ar: 'تعديل' },
+      viewDetailsAction: { en: 'View details', ar: 'عرض التفاصيل' },
+      withActionButtons: { en: 'with action buttons', ar: 'مع أزرار الإجراءات' },
+    },
+  }),
 };

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: 'الدفع' },
+    },
+  }),
 };