@transferwise/components 46.164.0 → 46.165.1

package/src/Modal/_stories/Modal.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 { Button, Modal } from '../..';
 
 export default {
@@ -11,49 +11,68 @@ export default {
 
 type Story = StoryObj<typeof Modal>;
 
-const iframeDiff = withRTLDiff({ renderAs: 'iframe' });
-
 export const WithTitleAndFooter: Story = {
-  render: () => (
-    <Modal
-      open
-      title="Modal title"
-      body="Body content for the modal dialog."
-      footer={
-        <Button v2 block>
-          Confirm
-        </Button>
-      }
-      onClose={() => {}}
-    />
-  ),
-  ...iframeDiff,
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Modal
+        open
+        title={i18n.title}
+        body={i18n.body}
+        footer={
+          <Button v2 block>
+            {i18n.confirm}
+          </Button>
+        }
+        onClose={() => {}}
+      />
+    );
+  },
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    i18n: {
+      title: { en: 'Modal title', ar: 'عنوان النافذة' },
+      body: { en: 'Body content for the modal dialog.', ar: 'محتوى النافذة الحوارية.' },
+      confirm: { en: 'Confirm', ar: 'تأكيد' },
+    },
+  }),
 };
 
 export const WithoutFooter: Story = {
-  render: () => (
-    <Modal
-      open
-      title="Modal without footer"
-      body="Body content without a footer."
-      onClose={() => {}}
-    />
-  ),
-  ...iframeDiff,
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return <Modal open title={i18n.title} body={i18n.body} onClose={() => {}} />;
+  },
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    i18n: {
+      title: { en: 'Modal without footer', ar: 'نافذة بدون تذييل' },
+      body: { en: 'Body content without a footer.', ar: 'محتوى بدون تذييل.' },
+    },
+  }),
 };
 
 export const WithoutTitle: Story = {
-  render: () => (
-    <Modal
-      open
-      body="Body content without a title."
-      footer={
-        <Button v2 block>
-          Done
-        </Button>
-      }
-      onClose={() => {}}
-    />
-  ),
-  ...iframeDiff,
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Modal
+        open
+        body={i18n.body}
+        footer={
+          <Button v2 block>
+            {i18n.done}
+          </Button>
+        }
+        onClose={() => {}}
+      />
+    );
+  },
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    i18n: {
+      body: { en: 'Body content without a title.', ar: 'محتوى بدون عنوان.' },
+      done: { en: 'Done', ar: 'تم' },
+    },
+  }),
 };

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

@@ -29,6 +29,15 @@ const gbpCurrency = {
 
 const multipleCurrencies = [eurCurrency, gbpCurrency] as const;
 
+/**
+ * `note` holds the currency's full name and renders only in the open dropdown, so only
+ * OpenDropdown needs the localised variants.
+ */
+const getLocalisedCurrencies = (i18n: Record<string, string>) => [
+  { ...eurCurrency, note: i18n.euro },
+  { ...gbpCurrency, note: i18n.britishPound },
+];
+
 const sharedProps = {
   amount: 1000,
   id: 'money-input',
@@ -72,12 +81,13 @@ export const TriggerVariants: Story = {
 export const OpenDropdown: Story = {
   render: () => {
     const i18n = useRtlDiffI18n();
+    const currencies = getLocalisedCurrencies(i18n);
     return (
       <MoneyInput
         {...sharedProps}
         size="lg"
-        currencies={multipleCurrencies}
-        selectedCurrency={eurCurrency}
+        currencies={currencies}
+        selectedCurrency={currencies[0]}
         searchPlaceholder={i18n.searchPlaceholder}
       />
     );
@@ -88,5 +98,13 @@ export const OpenDropdown: Story = {
     if (!trigger) return;
     await userEvent.click(trigger);
   },
-  ...withRTLDiff({ renderAs: 'iframe', width: '40%', i18n: { searchPlaceholder: { ltr: 'Search currencies or countries', rtl: 'ابحث عن العملات أو الدول' } } }),
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    width: '40%',
+    i18n: {
+      searchPlaceholder: { en: 'Search currencies or countries', ar: 'ابحث عن العملات أو الدول' },
+      euro: { en: 'Euro', ar: 'اليورو' },
+      britishPound: { en: 'British pound', ar: 'الجنيه الإسترليني' },
+    },
+  }),
 };

package/src/Nudge/_stories/Nudge.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 Nudge from '../Nudge';
 
 export default {
@@ -28,27 +28,76 @@ const MEDIA_NAMES = [
 ] as const;
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      {MEDIA_NAMES.map((mediaName) => (
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    const mediaTitles: Record<(typeof MEDIA_NAMES)[number], string> = {
+      globe: i18n.globe,
+      lock: i18n.lock,
+      wallet: i18n.wallet,
+      gear: i18n.gear,
+      'invite-letter': i18n.inviteLetter,
+      'personal-card': i18n.personalCard,
+      'business-card': i18n.businessCard,
+      heart: i18n.heart,
+      'multi-currency': i18n.multiCurrency,
+      'shopping-bag': i18n.shoppingBag,
+      flower: i18n.flower,
+      'gift-box': i18n.giftBox,
+      backpack: i18n.backpack,
+      documents: i18n.documents,
+    };
+
+    return (
+      <>
+        {MEDIA_NAMES.map((mediaName) => (
+          <Nudge
+            key={mediaName}
+            mediaName={mediaName}
+            title={mediaTitles[mediaName]}
+            link={i18n.link}
+            href="#"
+            onDismiss={() => {}}
+          />
+        ))}
         <Nudge
-          key={mediaName}
-          mediaName={mediaName}
-          title={mediaName}
-          link="Link"
-          href="#"
+          mediaName="globe"
+          title={i18n.withAction}
+          action={{ text: i18n.learnMore, href: '#' }}
           onDismiss={() => {}}
         />
-      ))}
-      <Nudge
-        mediaName="globe"
-        title="With action"
-        action={{ text: 'Learn more', href: '#' }}
-        onDismiss={() => {}}
-      />
-      <Nudge title="Without media, with dismiss" link="Link" href="#" onDismiss={() => {}} />
-      <Nudge title="Without media, no dismiss" link="Link" href="#" />
-    </>
-  ),
-  ...withRTLDiff({ width: 'stretch' }),
+        <Nudge title={i18n.withDismiss} link={i18n.link} href="#" onDismiss={() => {}} />
+        <Nudge title={i18n.withoutDismiss} link={i18n.link} href="#" />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    width: 'stretch',
+    i18n: {
+      globe: { en: 'globe', ar: 'الكرة الأرضية' },
+      lock: { en: 'lock', ar: 'قفل' },
+      wallet: { en: 'wallet', ar: 'محفظة' },
+      gear: { en: 'gear', ar: 'ترس' },
+      inviteLetter: { en: 'invite-letter', ar: 'رسالة دعوة' },
+      personalCard: { en: 'personal-card', ar: 'بطاقة شخصية' },
+      businessCard: { en: 'business-card', ar: 'بطاقة تجارية' },
+      heart: { en: 'heart', ar: 'قلب' },
+      multiCurrency: { en: 'multi-currency', ar: 'عملات متعددة' },
+      shoppingBag: { en: 'shopping-bag', ar: 'حقيبة تسوق' },
+      flower: { en: 'flower', ar: 'زهرة' },
+      giftBox: { en: 'gift-box', ar: 'علبة هدايا' },
+      backpack: { en: 'backpack', ar: 'حقيبة ظهر' },
+      documents: { en: 'documents', ar: 'مستندات' },
+      link: { en: 'Link', ar: 'رابط' },
+      withAction: { en: 'With action', ar: 'مع إجراء' },
+      learnMore: { en: 'Learn more', ar: 'اعرف المزيد' },
+      withDismiss: {
+        en: 'Without media, with dismiss',
+        ar: 'بدون وسائط، مع إمكانية الإغلاق',
+      },
+      withoutDismiss: {
+        en: 'Without media, no dismiss',
+        ar: 'بدون وسائط، بدون إمكانية الإغلاق',
+      },
+    },
+  }),
 };

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

@@ -55,6 +55,6 @@ export const DropdownOpen: Story = {
   ...withRTLDiff({
     renderAs: 'iframe',
     hAlign: 'center',
-    i18n: { searchPlaceholder: { ltr: 'Country code', rtl: 'رمز الدولة' } },
+    i18n: { searchPlaceholder: { en: 'Country code', ar: 'رمز الدولة' } },
   }),
 };

package/src/Popover/_stories/Popover.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 Button from '../../Button';
 import { Position } from '../../common';
 import Popover from '..';
@@ -22,65 +22,108 @@ const clickTrigger = async ({ canvasElement }: { canvasElement: HTMLElement }) =
 };
 
 export const PlacementRight: Story = {
-  render: () => (
-    <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>
-  ),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Popover preferredPlacement={Position.RIGHT} title={i18n.title} content={i18n.content}>
+        <Button size="sm" v2>
+          {i18n.trigger}
+        </Button>
+      </Popover>
+    );
+  },
   play: clickTrigger,
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'left', vAlign: 'center' }),
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    hAlign: 'left',
+    vAlign: 'center',
+    i18n: {
+      title: { en: 'Guaranteed rate', ar: 'سعر مضمون' },
+      content: {
+        en: "You'll get this rate as long as we receive your 10 EUR within the next 51 hours.",
+        ar: 'ستحصل على هذا السعر إذا استلمنا مبلغ 10 يورو خلال 51 ساعة القادمة.',
+      },
+      trigger: { en: 'right', ar: 'اليمين' },
+    },
+  }),
 };
 
 export const PlacementLeft: Story = {
-  render: () => (
-    <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>
-  ),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Popover preferredPlacement={Position.LEFT} title={i18n.title} content={i18n.content}>
+        <Button size="sm" v2>
+          {i18n.trigger}
+        </Button>
+      </Popover>
+    );
+  },
   play: clickTrigger,
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'right', vAlign: 'center' }),
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    hAlign: 'right',
+    vAlign: 'center',
+    i18n: {
+      title: { en: 'Guaranteed rate', ar: 'سعر مضمون' },
+      content: {
+        en: "You'll get this rate as long as we receive your 10 EUR within the next 51 hours.",
+        ar: 'ستحصل على هذا السعر إذا استلمنا مبلغ 10 يورو خلال 51 ساعة القادمة.',
+      },
+      trigger: { en: 'left', ar: 'اليسار' },
+    },
+  }),
 };
 
 export const PlacementTop: Story = {
-  render: () => (
-    <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>
-  ),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Popover preferredPlacement={Position.TOP} title={i18n.title} content={i18n.content}>
+        <Button size="sm" v2>
+          {i18n.trigger}
+        </Button>
+      </Popover>
+    );
+  },
   play: clickTrigger,
-  ...withRTLDiff({ renderAs: 'iframe', vAlign: 'bottom', hAlign: 'center' }),
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    vAlign: 'bottom',
+    hAlign: 'center',
+    i18n: {
+      title: { en: 'Guaranteed rate', ar: 'سعر مضمون' },
+      content: {
+        en: "You'll get this rate as long as we receive your 10 EUR within the next 51 hours.",
+        ar: 'ستحصل على هذا السعر إذا استلمنا مبلغ 10 يورو خلال 51 ساعة القادمة.',
+      },
+      trigger: { en: 'top', ar: 'أعلى' },
+    },
+  }),
 };
 
 export const PlacementBottom: Story = {
-  render: () => (
-    <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>
-  ),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Popover preferredPlacement={Position.BOTTOM} title={i18n.title} content={i18n.content}>
+        <Button size="sm" v2>
+          {i18n.trigger}
+        </Button>
+      </Popover>
+    );
+  },
   play: clickTrigger,
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center' }),
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    hAlign: 'center',
+    i18n: {
+      title: { en: 'Guaranteed rate', ar: 'سعر مضمون' },
+      content: {
+        en: "You'll get this rate as long as we receive your 10 EUR within the next 51 hours.",
+        ar: 'ستحصل على هذا السعر إذا استلمنا مبلغ 10 يورو خلال 51 ساعة القادمة.',
+      },
+      trigger: { en: 'bottom', ar: 'أسفل' },
+    },
+  }),
 };

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

@@ -34,14 +34,14 @@ export const RTLDiff: Story = {
   },
   ...withRTLDiff({
     i18n: {
-      title1: { ltr: 'Send 5,550 GBP', rtl: 'أرسل ٥٬٥٥٠ جنيه إسترليني' },
+      title1: { en: 'Send 5,550 GBP', ar: 'أرسل ٥٬٥٥٠ جنيه إسترليني' },
       description: {
-        ltr: 'You have 3 days to reach your goal.',
-        rtl: 'لديك ٣ أيام للوصول إلى هدفك.',
+        en: 'You have 3 days to reach your goal.',
+        ar: 'لديك ٣ أيام للوصول إلى هدفك.',
       },
-      textEnd1: { ltr: '200 GBP to go', rtl: '٢٠٠ جنيه إسترليني متبقي' },
-      title2: { ltr: 'Total limit', rtl: 'الحد الإجمالي' },
-      textEnd2: { ltr: '200 GBP remaining', rtl: '٢٠٠ جنيه إسترليني متبقي' },
+      textEnd1: { en: '200 GBP to go', ar: '٢٠٠ جنيه إسترليني متبقي' },
+      title2: { en: 'Total limit', ar: 'الحد الإجمالي' },
+      textEnd2: { en: '200 GBP remaining', ar: '٢٠٠ جنيه إسترليني متبقي' },
     },
   }),
 };

package/src/PromoCard/_stories/PromoCard.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 PromoCard from '..';
 
 export default {
@@ -11,32 +11,56 @@ export default {
 type Story = StoryObj<typeof PromoCard>;
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <PromoCard
-        title="Link with arrow"
-        description="Indicator arrow icon flips in RTL."
-        href="#"
-        indicatorLabel="Free"
-        imageSource="https://wise.com/web-art/assets/illustrations/digital-card-2-medium@2x.webp"
-      />
-      <PromoCard
-        title="Checkbox checked"
-        description="Check icon positioned at the end."
-        type="checkbox"
-        defaultChecked
-        indicatorLabel="Selected"
-        imageSource="https://wise.com/web-art/assets/illustrations/digital-card-2-medium@2x.webp"
-      />
-      <PromoCard
-        title="Download indicator"
-        description="Download icon in the indicator area."
-        href="#"
-        download="file.pdf"
-        indicatorLabel="Download"
-        imageSource="https://wise.com/web-art/assets/illustrations/digital-card-2-medium@2x.webp"
-      />
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <PromoCard
+          title={i18n.linkTitle}
+          description={i18n.linkDescription}
+          href="#"
+          indicatorLabel={i18n.linkIndicator}
+          imageSource="https://wise.com/web-art/assets/illustrations/digital-card-2-medium@2x.webp"
+        />
+        <PromoCard
+          title={i18n.checkboxTitle}
+          description={i18n.checkboxDescription}
+          type="checkbox"
+          defaultChecked
+          indicatorLabel={i18n.checkboxIndicator}
+          imageSource="https://wise.com/web-art/assets/illustrations/digital-card-2-medium@2x.webp"
+        />
+        <PromoCard
+          title={i18n.downloadTitle}
+          description={i18n.downloadDescription}
+          href="#"
+          download="file.pdf"
+          indicatorLabel={i18n.downloadIndicator}
+          imageSource="https://wise.com/web-art/assets/illustrations/digital-card-2-medium@2x.webp"
+        />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      linkTitle: { en: 'Link with arrow', ar: 'رابط مع سهم' },
+      linkDescription: {
+        en: 'Indicator arrow icon flips in RTL.',
+        ar: 'ينعكس سهم المؤشر في الاتجاه من اليمين إلى اليسار.',
+      },
+      linkIndicator: { en: 'Free', ar: 'مجانًا' },
+      checkboxTitle: { en: 'Checkbox checked', ar: 'مربع اختيار محدد' },
+      checkboxDescription: {
+        en: 'Check icon positioned at the end.',
+        ar: 'أيقونة الاختيار في نهاية البطاقة.',
+      },
+      checkboxIndicator: { en: 'Selected', ar: 'محدد' },
+      downloadTitle: { en: 'Download indicator', ar: 'مؤشر التنزيل' },
+      downloadDescription: {
+        en: 'Download icon in the indicator area.',
+        ar: 'أيقونة التنزيل في منطقة المؤشر.',
+      },
+      downloadIndicator: { en: 'Download', ar: 'تنزيل' },
+    },
+  }),
 };

package/src/PromoCard/_stories/PromoCardGroup.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 PromoCard from '../PromoCard';
 import PromoCardGroup from '../CardGroup/PromoCardGroup';
 
@@ -13,39 +13,63 @@ export default {
 type Story = StoryObj<typeof PromoCardGroup>;
 
 export const RTLDiff: Story = {
-  render: () => (
-    <PromoCardGroup>
-      <PromoCard
-        title="Digital"
-        description="A card that lives online and works anywhere."
-        type="radio"
-        value="digital"
-        id="digital"
-        indicatorLabel="Free"
-        imageAlt=""
-        imageSource="https://wise.com/web-art/assets/illustrations/digital-card-2-medium@2x.webp"
-      />
-      <PromoCard
-        title="Standard"
-        description="Spend and withdraw money around the world."
-        type="radio"
-        value="standard"
-        id="standard"
-        indicatorLabel="7 GBP"
-        imageAlt=""
-        imageSource="https://wise.com/web-art/assets/illustrations/personal-card-medium@2x.webp"
-      />
-      <PromoCard
-        title="Eco"
-        description="A debit card made to biodegrade."
-        type="radio"
-        value="eco"
-        id="eco"
-        indicatorLabel="9 GBP"
-        imageAlt=""
-        imageSource="https://wise.com/web-art/assets/illustrations/eco-card-medium@2x.webp"
-      />
-    </PromoCardGroup>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <PromoCardGroup>
+        <PromoCard
+          title={i18n.digitalTitle}
+          description={i18n.digitalDescription}
+          type="radio"
+          value="digital"
+          id="digital"
+          indicatorLabel={i18n.digitalIndicator}
+          imageAlt=""
+          imageSource="https://wise.com/web-art/assets/illustrations/digital-card-2-medium@2x.webp"
+        />
+        <PromoCard
+          title={i18n.standardTitle}
+          description={i18n.standardDescription}
+          type="radio"
+          value="standard"
+          id="standard"
+          indicatorLabel={i18n.standardIndicator}
+          imageAlt=""
+          imageSource="https://wise.com/web-art/assets/illustrations/personal-card-medium@2x.webp"
+        />
+        <PromoCard
+          title={i18n.ecoTitle}
+          description={i18n.ecoDescription}
+          type="radio"
+          value="eco"
+          id="eco"
+          indicatorLabel={i18n.ecoIndicator}
+          imageAlt=""
+          imageSource="https://wise.com/web-art/assets/illustrations/eco-card-medium@2x.webp"
+        />
+      </PromoCardGroup>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      digitalTitle: { en: 'Digital', ar: 'رقمية' },
+      digitalDescription: {
+        en: 'A card that lives online and works anywhere.',
+        ar: 'بطاقة تعمل عبر الإنترنت في أي مكان.',
+      },
+      digitalIndicator: { en: 'Free', ar: 'مجانًا' },
+      standardTitle: { en: 'Standard', ar: 'عادية' },
+      standardDescription: {
+        en: 'Spend and withdraw money around the world.',
+        ar: 'أنفق أموالك واسحبها في جميع أنحاء العالم.',
+      },
+      standardIndicator: { en: '7 GBP', ar: '7 جنيه إسترليني' },
+      ecoTitle: { en: 'Eco', ar: 'صديقة للبيئة' },
+      ecoDescription: {
+        en: 'A debit card made to biodegrade.',
+        ar: 'بطاقة خصم مصممة لتتحلل طبيعيًا.',
+      },
+      ecoIndicator: { en: '9 GBP', ar: '9 جنيه إسترليني' },
+    },
+  }),
 };