@transferwise/components 46.164.0 → 46.165.1

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

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { userEvent, within } from 'storybook/test';
 
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import Info from '..';
 
 export default {
@@ -20,70 +20,144 @@ const openInfo = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
 };
 
 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"
-    />
-  ),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Info
+        aria-label={i18n.trigger}
+        title={i18n.title}
+        content={i18n.content}
+        presentation="POPOVER"
+        preferredPlacement="top"
+      />
+    );
+  },
   play: openInfo,
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center', vAlign: 'bottom' }),
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    hAlign: 'center',
+    vAlign: 'bottom',
+    i18n: {
+      trigger: { en: 'Info trigger', ar: 'زر المعلومات' },
+      title: { en: 'Information', ar: 'معلومات' },
+      content: {
+        en: 'This is some descriptive content inside the info component.',
+        ar: 'هذا محتوى وصفي داخل مكوّن المعلومات.',
+      },
+    },
+  }),
 };
 
 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"
-    />
-  ),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Info
+        aria-label={i18n.trigger}
+        title={i18n.title}
+        content={i18n.content}
+        presentation="POPOVER"
+        preferredPlacement="right"
+      />
+    );
+  },
   play: openInfo,
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'left', vAlign: 'center' }),
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    hAlign: 'left',
+    vAlign: 'center',
+    i18n: {
+      trigger: { en: 'Info trigger', ar: 'زر المعلومات' },
+      title: { en: 'Information', ar: 'معلومات' },
+      content: {
+        en: 'This is some descriptive content inside the info component.',
+        ar: 'هذا محتوى وصفي داخل مكوّن المعلومات.',
+      },
+    },
+  }),
 };
 
 export const PlacementBottom: Story = {
-  render: () => (
-    <Info
-      aria-label="Info trigger"
-      title="Information"
-      content="This is some descriptive content inside the info component."
-      presentation="POPOVER"
-      preferredPlacement="bottom"
-    />
-  ),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Info
+        aria-label={i18n.trigger}
+        title={i18n.title}
+        content={i18n.content}
+        presentation="POPOVER"
+        preferredPlacement="bottom"
+      />
+    );
+  },
   play: openInfo,
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center' }),
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    hAlign: 'center',
+    i18n: {
+      trigger: { en: 'Info trigger', ar: 'زر المعلومات' },
+      title: { en: 'Information', ar: 'معلومات' },
+      content: {
+        en: 'This is some descriptive content inside the info component.',
+        ar: 'هذا محتوى وصفي داخل مكوّن المعلومات.',
+      },
+    },
+  }),
 };
 
 export const PlacementLeft: Story = {
-  render: () => (
-    <Info
-      aria-label="Info trigger"
-      title="Information"
-      content="This is some descriptive content inside the info component."
-      presentation="POPOVER"
-      preferredPlacement="left"
-    />
-  ),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Info
+        aria-label={i18n.trigger}
+        title={i18n.title}
+        content={i18n.content}
+        presentation="POPOVER"
+        preferredPlacement="left"
+      />
+    );
+  },
   play: openInfo,
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'right', vAlign: 'center' }),
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    hAlign: 'right',
+    vAlign: 'center',
+    i18n: {
+      trigger: { en: 'Info trigger', ar: 'زر المعلومات' },
+      title: { en: 'Information', ar: 'معلومات' },
+      content: {
+        en: 'This is some descriptive content inside the info component.',
+        ar: 'هذا محتوى وصفي داخل مكوّن المعلومات.',
+      },
+    },
+  }),
 };
 
 export const Modal: Story = {
-  render: () => (
-    <Info
-      aria-label="Info trigger"
-      title="Information"
-      content="This is some descriptive content inside the info component."
-      presentation="MODAL"
-    />
-  ),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Info
+        aria-label={i18n.trigger}
+        title={i18n.title}
+        content={i18n.content}
+        presentation="MODAL"
+      />
+    );
+  },
   play: openInfo,
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center', vAlign: 'center' }),
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    hAlign: 'center',
+    vAlign: 'center',
+    i18n: {
+      trigger: { en: 'Info trigger', ar: 'زر المعلومات' },
+      title: { en: 'Information', ar: 'معلومات' },
+      content: {
+        en: 'This is some descriptive content inside the info component.',
+        ar: 'هذا محتوى وصفي داخل مكوّن المعلومات.',
+      },
+    },
+  }),
 };

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

@@ -73,12 +73,12 @@ export const RTLDiff: StoryObj<typeof InputWithDisplayFormat> = {
     width: 'stretch',
     i18n: {
       value: {
-        ltr: 'XKQMRTBWJNFL',
-        rtl: 'خكقمرتبوجنفل',
+        en: 'XKQMRTBWJNFL',
+        ar: 'خكقمرتبوجنفل',
       },
       placeholder: {
-        ltr: 'Enter code',
-        rtl: 'أدخل الرمز',
+        en: 'Enter code',
+        ar: 'أدخل الرمز',
       },
     },
   }),

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

@@ -39,7 +39,7 @@ export const RTLDiff: Story = {
           addonEnd={{
             content: (
               <Button v2 size="sm">
-                Copy
+                {i18n.copy}
               </Button>
             ),
             interactive: true,
@@ -57,7 +57,7 @@ export const RTLDiff: Story = {
           addonEnd={{
             content: (
               <Button v2 size="sm">
-                Clear
+                {i18n.clear}
               </Button>
             ),
             interactive: true,
@@ -70,11 +70,12 @@ export const RTLDiff: Story = {
     );
   },
   ...withRTLDiff({
-    i18n:{
-      placeholder_both: { ltr: 'addonStart and addonEnd', rtl: 'البادئة والنهاية' },
-      placeholder_start: { ltr: 'addonStart only', rtl: 'البادئة فقط' },
-      placeholder_end: { ltr: 'addonEnd only', rtl: 'النهاية فقط' },
-
-    }
+    i18n: {
+      placeholder_both: { en: 'addonStart and addonEnd', ar: 'البادئة والنهاية' },
+      placeholder_start: { en: 'addonStart only', ar: 'البادئة فقط' },
+      placeholder_end: { en: 'addonEnd only', ar: 'النهاية فقط' },
+      copy: { en: 'Copy', ar: 'نسخ' },
+      clear: { en: 'Clear', ar: 'مسح' },
+    },
   }),
 };

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

@@ -32,7 +32,9 @@ export const RTLDiff: Story = {
       </>
     );
   },
-  ...withRTLDiff({i18n:{
-      placeholder: { ltr: 'Search', rtl: 'بحث' },
-    }}),
+  ...withRTLDiff({
+    i18n: {
+      placeholder: { en: 'Search', ar: 'بحث' },
+    },
+  }),
 };

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

@@ -18,94 +18,116 @@ interface RtlCurrency {
   name: string;
 }
 
-const rtlCurrencies: RtlCurrency[] = [
-  { code: 'USD', name: 'United States Dollar' },
-  { code: 'EUR', name: 'Euro' },
-  { code: 'GBP', name: 'British pound' },
+/** Currency codes stay Latin — only the full names are localised. */
+const getRtlCurrencies = (i18n: Record<string, string>): RtlCurrency[] => [
+  { code: 'USD', name: i18n.usDollar },
+  { code: 'EUR', name: i18n.euro },
+  { code: 'GBP', name: i18n.britishPound },
 ];
 
+const currencyNames = {
+  usDollar: { en: 'United States Dollar', ar: 'الدولار الأمريكي' },
+  euro: { en: 'Euro', ar: 'اليورو' },
+  britishPound: { en: 'British pound', ar: 'الجنيه الإسترليني' },
+};
+
 export const TriggerVariants: Story = {
-  render: () => (
-    <>
-      {/* sm — chevron position flips in RTL */}
-      <SelectInput
-        size="sm"
-        placeholder="Select currency"
-        items={rtlCurrencies.map((currency) => ({ type: 'option', value: currency }))}
-        renderValue={(currency) => <SelectInputOptionContent title={currency.code} />}
-      />
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    const rtlCurrencies = getRtlCurrencies(i18n);
 
-      {/* md — chevron position flips in RTL */}
-      <SelectInput
-        size="md"
-        placeholder="Select currency"
-        items={rtlCurrencies.map((currency) => ({ type: 'option', value: currency }))}
-        renderValue={(currency) => <SelectInputOptionContent title={currency.code} />}
-      />
+    return (
+      <>
+        {/* sm — chevron position flips in RTL */}
+        <SelectInput
+          size="sm"
+          placeholder={i18n.selectCurrency}
+          items={rtlCurrencies.map((currency) => ({ type: 'option', value: currency }))}
+          renderValue={(currency) => <SelectInputOptionContent title={currency.code} />}
+        />
 
-      {/* lg with value and leading icon — icon side and chevron flip in RTL */}
-      <SelectInput
-        size="lg"
-        placeholder="Select currency"
-        defaultValue={rtlCurrencies[0]}
-        items={rtlCurrencies.map((currency) => ({ type: 'option', value: currency }))}
-        renderValue={(currency) => (
-          <SelectInputOptionContent
-            title={currency.code}
-            note={currency.name}
-            icon={<Flag code={currency.code} intrinsicSize={24} />}
-          />
-        )}
-      />
+        {/* md — chevron position flips in RTL */}
+        <SelectInput
+          size="md"
+          placeholder={i18n.selectCurrency}
+          items={rtlCurrencies.map((currency) => ({ type: 'option', value: currency }))}
+          renderValue={(currency) => <SelectInputOptionContent title={currency.code} />}
+        />
 
-      {/* multiple — selected values on leading side, chevron on trailing side, both flip in RTL */}
-      <SelectInput
-        size="lg"
-        multiple
-        placeholder="Choose currencies"
-        defaultValue={[rtlCurrencies[0], rtlCurrencies[1]]}
-        items={rtlCurrencies.map((currency) => ({ type: 'option', value: currency }))}
-        renderValue={(currency, withinTrigger) =>
-          withinTrigger ? (
-            currency.code
-          ) : (
-            <SelectInputOptionContent title={currency.code} note={currency.name} />
-          )
-        }
-      />
-    </>
-  ),
-  ...withRTLDiff(),
+        {/* lg with value and leading icon — icon side and chevron flip in RTL */}
+        <SelectInput
+          size="lg"
+          placeholder={i18n.selectCurrency}
+          defaultValue={rtlCurrencies[0]}
+          items={rtlCurrencies.map((currency) => ({ type: 'option', value: currency }))}
+          renderValue={(currency) => (
+            <SelectInputOptionContent
+              title={currency.code}
+              note={currency.name}
+              icon={<Flag code={currency.code} intrinsicSize={24} />}
+            />
+          )}
+        />
+
+        {/* multiple — selected values on leading side, chevron on trailing side, both flip in RTL */}
+        <SelectInput
+          size="lg"
+          multiple
+          placeholder={i18n.chooseCurrencies}
+          defaultValue={[rtlCurrencies[0], rtlCurrencies[1]]}
+          items={rtlCurrencies.map((currency) => ({ type: 'option', value: currency }))}
+          renderValue={(currency, withinTrigger) =>
+            withinTrigger ? (
+              currency.code
+            ) : (
+              <SelectInputOptionContent title={currency.code} note={currency.name} />
+            )
+          }
+        />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      ...currencyNames,
+      selectCurrency: { en: 'Select currency', ar: 'اختر العملة' },
+      chooseCurrencies: { en: 'Choose currencies', ar: 'اختر العملات' },
+    },
+  }),
 };
 
-const otherCurrencies: RtlCurrency[] = [
-  { code: 'CAD', name: 'Canadian dollar' },
-  { code: 'AUD', name: 'Australian dollar' },
-  { code: 'JPY', name: 'Japanese yen' },
+const getOtherCurrencies = (i18n: Record<string, string>): RtlCurrency[] => [
+  { code: 'CAD', name: i18n.canadianDollar },
+  { code: 'AUD', name: i18n.australianDollar },
+  { code: 'JPY', name: i18n.japaneseYen },
 ];
 
-const groupedItems = [
-  {
-    type: 'group' as const,
-    label: 'Popular currencies',
-    options: rtlCurrencies.map((currency) => ({
-      type: 'option' as const,
-      value: currency,
-      filterMatchers: [currency.code, currency.name],
-    })),
-  },
-  {
-    type: 'group' as const,
-    label: 'All currencies',
-    options: [...rtlCurrencies, ...otherCurrencies]
-      .sort((a, b) => a.code.localeCompare(b.code))
-      .map((currency) => ({
+const getGroupedItems = (i18n: Record<string, string>) => {
+  const rtlCurrencies = getRtlCurrencies(i18n);
+
+  return [
+    {
+      type: 'group' as const,
+      label: i18n.popularCurrencies,
+      options: rtlCurrencies.map((currency) => ({
         type: 'option' as const,
         value: currency,
         filterMatchers: [currency.code, currency.name],
       })),
-  },
-];
+    },
+    {
+      type: 'group' as const,
+      label: i18n.allCurrencies,
+      options: [...rtlCurrencies, ...getOtherCurrencies(i18n)]
+        .sort((a, b) => a.code.localeCompare(b.code))
+        .map((currency) => ({
+          type: 'option' as const,
+          value: currency,
+          filterMatchers: [currency.code, currency.name],
+        })),
+    },
+  ];
+};
 
 export const OpenDropdown: Story = {
   render: () => {
@@ -115,9 +137,9 @@ export const OpenDropdown: Story = {
         size="lg"
         filterable
         filterPlaceholder={i18n.filterPlaceholder}
-        placeholder="Select currency"
-        defaultValue={rtlCurrencies[0]}
-        items={groupedItems}
+        placeholder={i18n.selectCurrency}
+        defaultValue={getRtlCurrencies(i18n)[0]}
+        items={getGroupedItems(i18n)}
         renderValue={(currency, withinTrigger) => (
           <SelectInputOptionContent
             title={currency.code}
@@ -138,10 +160,17 @@ export const OpenDropdown: Story = {
     renderAs: 'iframe',
     width: '80%',
     i18n: {
+      ...currencyNames,
       filterPlaceholder: {
-        ltr: 'Type a currency / country',
-        rtl: 'اكتب عملة / دولة',
+        en: 'Type a currency / country',
+        ar: 'اكتب عملة / دولة',
       },
+      selectCurrency: { en: 'Select currency', ar: 'اختر العملة' },
+      popularCurrencies: { en: 'Popular currencies', ar: 'العملات الشائعة' },
+      allCurrencies: { en: 'All currencies', ar: 'جميع العملات' },
+      canadianDollar: { en: 'Canadian dollar', ar: 'الدولار الكندي' },
+      australianDollar: { en: 'Australian dollar', ar: 'الدولار الأسترالي' },
+      japaneseYen: { en: 'Japanese yen', ar: 'الين الياباني' },
     },
   }),
 };

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

@@ -170,23 +170,23 @@ export const RTLDiff: Story = {
   ...withRTLDiff({
     width: 'stretch',
     i18n: {
-      placeholder: { ltr: 'Translated placeholder...', rtl: 'نص بديل مترجم...' },
+      placeholder: { en: 'Translated placeholder...', ar: 'نص بديل مترجم...' },
       value_en: {
-        ltr: 'This is LTR text content in the RTL textarea field, showing the input adapting to the content rather than page setting.',
-        rtl: 'This is LTR text content in the RTL textarea field, showing the input adapting to the content rather than page setting.',
+        en: 'This is LTR text content in the RTL textarea field, showing the input adapting to the content rather than page setting.',
+        ar: 'This is LTR text content in the RTL textarea field, showing the input adapting to the content rather than page setting.',
       },
       value_ar: {
-        ltr: 'This is some entered text content in the textarea field.',
-        rtl: 'هذا هو بعض المحتوى النصي المدخل في حقل منطقة النص.',
+        en: 'This is some entered text content in the textarea field.',
+        ar: 'هذا هو بعض المحتوى النصي المدخل في حقل منطقة النص.',
       },
       errorMessage: {
-        ltr: 'This field has an error message',
-        rtl: 'هذا الحقل يحتوي على رسالة خطأ',
+        en: 'This field has an error message',
+        ar: 'هذا الحقل يحتوي على رسالة خطأ',
       },
-      invalidInputText: { ltr: 'Invalid input text', rtl: 'نص الإدخال غير صالح' },
+      invalidInputText: { en: 'Invalid input text', ar: 'نص الإدخال غير صالح' },
       characterCounter: {
-        ltr: 'Text with a character counter displayed below.',
-        rtl: 'نص مع عداد أحرف معروض أدناه.',
+        en: 'Text with a character counter displayed below.',
+        ar: 'نص مع عداد أحرف معروض أدناه.',
       },
     },
   }),

package/src/InstructionsList/_stories/InstructionsList.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 InstructionsList from '..';
 
 export default {
@@ -12,19 +12,46 @@ export default {
 type Story = StoryObj<typeof InstructionsList>;
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <InstructionsList
-        dos={['Do an initial money transfer', 'Invite at least 3 friends to join']}
-        donts={['Paying extra hidden fees for transfers', 'Use bad exchange rate']}
-        sort="dosFirst"
-      />
-      <InstructionsList
-        dos={['Complete your profile verification']}
-        donts={['Share your login credentials with others']}
-        sort="dontsFirst"
-      />
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <InstructionsList
+          dos={[i18n.initialTransfer, i18n.inviteFriends]}
+          donts={[i18n.hiddenFees, i18n.badExchangeRate]}
+          sort="dosFirst"
+        />
+        <InstructionsList
+          dos={[i18n.verifyProfile]}
+          donts={[i18n.shareCredentials]}
+          sort="dontsFirst"
+        />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      initialTransfer: {
+        en: 'Do an initial money transfer',
+        ar: 'قم بإجراء تحويل أموال أولي',
+      },
+      inviteFriends: {
+        en: 'Invite at least 3 friends to join',
+        ar: 'ادعُ 3 أصدقاء على الأقل للانضمام',
+      },
+      hiddenFees: {
+        en: 'Paying extra hidden fees for transfers',
+        ar: 'دفع رسوم خفية إضافية على التحويلات',
+      },
+      badExchangeRate: { en: 'Use bad exchange rate', ar: 'استخدام سعر صرف سيئ' },
+      verifyProfile: {
+        en: 'Complete your profile verification',
+        ar: 'أكمل التحقق من ملفك الشخصي',
+      },
+      shareCredentials: {
+        en: 'Share your login credentials with others',
+        ar: 'مشاركة بيانات تسجيل دخولك مع الآخرين',
+      },
+    },
+  }),
 };

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

@@ -35,15 +35,15 @@ export const RTLDiff: Story = {
   },
   ...withRTLDiff({
     i18n: {
-      plain: { ltr: 'Plain label text', rtl: 'نص التسمية العادي' },
-      optional: { ltr: 'Label with optional marker', rtl: 'تسمية مع علامة اختيارية' },
-      withInfo: { ltr: 'Label with info icon', rtl: 'تسمية مع أيقونة معلومات' },
+      plain: { en: 'Plain label text', ar: 'نص التسمية العادي' },
+      optional: { en: 'Label with optional marker', ar: 'تسمية مع علامة اختيارية' },
+      withInfo: { en: 'Label with info icon', ar: 'تسمية مع أيقونة معلومات' },
       optionalWithInfo: {
-        ltr: 'Label with optional and info icon',
-        rtl: 'تسمية مع اختيارية وأيقونة معلومات',
+        en: 'Label with optional and info icon',
+        ar: 'تسمية مع اختيارية وأيقونة معلومات',
       },
-      tooltip: { ltr: 'Helpful tooltip content', rtl: 'محتوى تلميح مفيد' },
-      moreInfo: { ltr: 'More information', rtl: 'مزيد من المعلومات' },
+      tooltip: { en: 'Helpful tooltip content', ar: 'محتوى تلميح مفيد' },
+      moreInfo: { en: 'More information', ar: 'مزيد من المعلومات' },
     },
   }),
 };