@transferwise/components 0.0.0-experimental-e94d625 → 0.0.0-experimental-8e1de95

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: {
         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/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/Link/_stories/Link.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 Link from '..';
 
 export default {
@@ -11,16 +11,30 @@ export default {
 type Story = StoryObj<typeof Link>;
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <Link href="#" target="_blank">
-        External link with navigate-away icon
-      </Link>
-      <br />
-      <Link href="#" target="_blank" type="link-large">
-        Large external link with navigate-away icon
-      </Link>
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <Link href="#" target="_blank">
+          {i18n.externalLink}
+        </Link>
+        <br />
+        <Link href="#" target="_blank" type="link-large">
+          {i18n.largeExternalLink}
+        </Link>
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      externalLink: {
+        en: 'External link with navigate-away icon',
+        ar: 'رابط خارجي مع أيقونة الانتقال',
+      },
+      largeExternalLink: {
+        en: 'Large external link with navigate-away icon',
+        ar: 'رابط خارجي كبير مع أيقونة الانتقال',
+      },
+    },
+  }),
 };

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

@@ -1,24 +1,144 @@
+import { ReactNode } from 'react';
 import { Meta } from '@storybook/react-webpack5';
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import Link from '../../Link';
+import { lorem20 } from '../../test-utils';
 import { ListItem, type ListItemProps } from '../ListItem';
-import { VariantStory } from './variants/helpers';
+import {
+  SB_LIST_ITEM_CONTROLS as CONTROLS,
+  SB_LIST_ITEM_MEDIA as MEDIA,
+  SB_ListItem_ControlType as ControlType,
+} from './subcomponents';
+import { VariantList, type VariantContent, type VariantStoryProps } from './variants/helpers';
+
+/** Arabic stand-in for `lorem20`, of comparable word count so wrapping behaviour stays comparable. */
+const arabicFiller =
+  'نص تجريبي يُستخدم لعرض شكل التصميم النهائي قبل إضافة المحتوى الفعلي، ويساعد في التحقق من سلوك التغليف والمحاذاة عند تجاوز السطر الواحد.';
+
+const i18nMap = {
+  title: { en: 'This is a title', ar: 'هذا عنوان' },
+  subtitle: { en: 'And it also has a subtitle', ar: 'وله أيضًا عنوان فرعي' },
+  longTitle: { en: `This is a long title. ${lorem20}`, ar: `هذا عنوان طويل. ${arabicFiller}` },
+  longSubtitle: {
+    en: `And it also has a long subtitle. ${lorem20}`,
+    ar: `وله أيضًا عنوان فرعي طويل. ${arabicFiller}`,
+  },
+  valueTitleLine1: { en: 'This value title', ar: 'عنوان القيمة هذا' },
+  valueTitleLine2: { en: 'is made to span', ar: 'مُصمم ليمتد' },
+  valueTitleLine3: { en: 'across few lines', ar: 'على عدة أسطر' },
+  additionalInfo: {
+    en: 'Which is augmented with additional info.',
+    ar: 'والذي تمت إضافة معلومات إضافية إليه.',
+  },
+  additionalInfoAction: { en: 'Details about the subject.', ar: 'تفاصيل حول الموضوع.' },
+  prompt: { en: 'Finally, there is a prompt.', ar: 'وأخيرًا، هناك تنبيه.' },
+  promptStart: { en: 'Finally, there is a prompt', ar: 'وأخيرًا، هناك تنبيه' },
+  promptLink: { en: 'referencing some details', ar: 'يشير إلى بعض التفاصيل' },
+  promptEnd: { en: 'for your convenience.', ar: 'لتسهيل الأمر عليك.' },
+  controlLabel: { en: 'Click me', ar: 'انقر هنا' },
+};
+
+type ListItemI18n = Record<keyof typeof i18nMap, string>;
+
+/**
+ * Amounts keep Latin digits and ISO currency codes in both columns — a bidi run inside RTL copy is
+ * exactly what these stories need to exercise.
+ */
+const getContent = (i18n: ListItemI18n): VariantContent => ({
+  text: {
+    title: i18n.title,
+    subtitle: i18n.subtitle,
+    valueTitle: '100 GBP',
+    valueSubtitle: '200 USD',
+    longTitle: i18n.longTitle,
+    longSubtitle: i18n.longSubtitle,
+    longValueTitle: (
+      <>
+        {i18n.valueTitleLine1}
+        <br />
+        {i18n.valueTitleLine2}
+        <br />
+        {i18n.valueTitleLine3}
+      </>
+    ),
+  },
+  media: MEDIA.avatarSingle,
+  additionalInfo: {
+    interactive: (
+      <ListItem.AdditionalInfo
+        action={{
+          label: i18n.additionalInfoAction,
+          href: 'https://wise.com',
+          target: '_blank',
+        }}
+      >
+        {i18n.additionalInfo}
+      </ListItem.AdditionalInfo>
+    ),
+    nonInteractive: <ListItem.AdditionalInfo>{i18n.additionalInfo}</ListItem.AdditionalInfo>,
+  },
+  prompt: {
+    interactive: (
+      <ListItem.Prompt sentiment="positive">
+        {i18n.promptStart}{' '}
+        <Link href="https://wise.com" target="_blank" rel="noreferrer">
+          {i18n.promptLink}
+        </Link>{' '}
+        {i18n.promptEnd}
+      </ListItem.Prompt>
+    ),
+    nonInteractive: <ListItem.Prompt sentiment="positive">{i18n.prompt}</ListItem.Prompt>,
+  },
+});
+
+/** Only the four controls with visible copy need overriding; the rest are icon- or input-only. */
+const getControls = (i18n: ListItemI18n): Record<ControlType, ReactNode> => ({
+  ...CONTROLS,
+  button: <ListItem.Button onClick={() => {}}>{i18n.controlLabel}</ListItem.Button>,
+  buttonAsLink: <ListItem.Button href="https://wise.com">{i18n.controlLabel}</ListItem.Button>,
+  partialButton: (
+    <ListItem.Button partiallyInteractive onClick={() => {}}>
+      {i18n.controlLabel}
+    </ListItem.Button>
+  ),
+  partialButtonAsLink: (
+    <ListItem.Button partiallyInteractive href="https://wise.com">
+      {i18n.controlLabel}
+    </ListItem.Button>
+  ),
+});
+
+const LocalisedVariantList = ({ controlType, variant }: VariantStoryProps) => {
+  const i18n = useRtlDiffI18n<ListItemI18n>();
+
+  return (
+    <VariantList
+      controlType={controlType}
+      variant={variant}
+      content={getContent(i18n)}
+      controls={getControls(i18n)}
+    />
+  );
+};
 
 export default {
   component: ListItem,
   title: 'Content/ListItem/Tests/RTL Diff',
   tags: ['!autodocs', '!manifest'],
-  ...withRTLDiff({ width: 'stretch' }),
+  ...withRTLDiff({ width: 'stretch', i18n: i18nMap }),
 } satisfies Meta<ListItemProps>;
 
 const Default = {
-  ...VariantStory,
+  render: ({ controlType, variant }: VariantStoryProps) => (
+    <LocalisedVariantList controlType={controlType} variant={variant} />
+  ),
   parameters: { variants: [] },
-  args: { variant: 'rtl' },
+  args: { variant: 'rtl' as const },
 };
 
 export const Button = {
   ...Default,
-  args: { ...Default.args, variant: 'button' },
+  args: { ...Default.args, controlType: 'button' },
 };
 export const ButtonAsLink = {
   ...Default,