@transferwise/components 46.164.0 → 46.165.1

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

@@ -2,54 +2,13 @@ import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { userEvent, within } from 'storybook/test';
 import { FastFlag as FastFlagIcon } from '@transferwise/icons';
 
-import { forEachColumn, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import {
+  forEachColumn,
+  useRtlDiffI18n,
+  withRTLDiff,
+} from '../../../.storybook/decorators/RtlDiffDecorator';
 import Accordion from '../Accordion';
 
-const items = [
-  {
-    title: 'Item with icon',
-    subtitle: 'Subtitle text',
-    content: 'Content for item with icon.',
-    id: 'icon',
-    icon: <FastFlagIcon size={24} />,
-  },
-  {
-    title: 'Plain item without icon',
-    content: 'Content for item without icon.',
-    id: 'no-icon',
-  },
-  {
-    title: 'Media with circle',
-    subtitle: 'Shows media in a circle',
-    content: 'Expanded content with media circle.',
-    id: 'media-circle',
-    media: (
-      <img
-        src="https://wise.com/public-resources/assets/spend/card/asset//digital_card_2023.png"
-        alt=""
-      />
-    ),
-    showMediaCircle: true,
-    showMediaAtAllSizes: true,
-    isContainerAligned: true,
-  },
-  {
-    title: 'Media without circle',
-    subtitle: 'Not container aligned',
-    content: 'Expanded content with plain media.',
-    id: 'media-no-circle',
-    media: (
-      <img
-        src="https://wise.com/public-resources/assets/spend/card/asset//digital_card_2023.png"
-        alt=""
-      />
-    ),
-    showMediaCircle: false,
-    showMediaAtAllSizes: false,
-    isContainerAligned: false,
-  },
-];
-
 export default {
   component: Accordion,
   title: 'Content/Accordion/Tests',
@@ -59,7 +18,54 @@ export default {
 type Story = StoryObj<typeof Accordion>;
 
 export const RTLDiff: Story = {
-  render: () => <Accordion items={items} indexOpen={0} />,
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    const items = [
+      {
+        title: i18n.withIconTitle,
+        subtitle: i18n.withIconSubtitle,
+        content: i18n.withIconContent,
+        id: 'icon',
+        icon: <FastFlagIcon size={24} />,
+      },
+      {
+        title: i18n.noIconTitle,
+        content: i18n.noIconContent,
+        id: 'no-icon',
+      },
+      {
+        title: i18n.mediaCircleTitle,
+        subtitle: i18n.mediaCircleSubtitle,
+        content: i18n.mediaCircleContent,
+        id: 'media-circle',
+        media: (
+          <img
+            src="https://wise.com/public-resources/assets/spend/card/asset//digital_card_2023.png"
+            alt=""
+          />
+        ),
+        showMediaCircle: true,
+        showMediaAtAllSizes: true,
+        isContainerAligned: true,
+      },
+      {
+        title: i18n.mediaNoCircleTitle,
+        subtitle: i18n.mediaNoCircleSubtitle,
+        content: i18n.mediaNoCircleContent,
+        id: 'media-no-circle',
+        media: (
+          <img
+            src="https://wise.com/public-resources/assets/spend/card/asset//digital_card_2023.png"
+            alt=""
+          />
+        ),
+        showMediaCircle: false,
+        showMediaAtAllSizes: false,
+        isContainerAligned: false,
+      },
+    ];
+    return <Accordion items={items} indexOpen={0} />;
+  },
   play: async ({ canvasElement }) => {
     await forEachColumn(canvasElement, async (column) => {
       const scope = within(column);
@@ -67,5 +73,25 @@ export const RTLDiff: Story = {
       await userEvent.click(buttons[1]);
     });
   },
-  ...withRTLDiff(),
+  ...withRTLDiff({
+    i18n: {
+      withIconTitle: { en: 'Item with icon', ar: 'عنصر مع أيقونة' },
+      withIconSubtitle: { en: 'Subtitle text', ar: 'نص العنوان الفرعي' },
+      withIconContent: { en: 'Content for item with icon.', ar: 'محتوى العنصر ذي الأيقونة.' },
+      noIconTitle: { en: 'Plain item without icon', ar: 'عنصر عادي بدون أيقونة' },
+      noIconContent: { en: 'Content for item without icon.', ar: 'محتوى العنصر بدون أيقونة.' },
+      mediaCircleTitle: { en: 'Media with circle', ar: 'وسائط داخل دائرة' },
+      mediaCircleSubtitle: { en: 'Shows media in a circle', ar: 'يعرض الوسائط داخل دائرة' },
+      mediaCircleContent: {
+        en: 'Expanded content with media circle.',
+        ar: 'محتوى موسَّع مع وسائط داخل دائرة.',
+      },
+      mediaNoCircleTitle: { en: 'Media without circle', ar: 'وسائط بدون دائرة' },
+      mediaNoCircleSubtitle: { en: 'Not container aligned', ar: 'غير محاذٍ للحاوية' },
+      mediaNoCircleContent: {
+        en: 'Expanded content with plain media.',
+        ar: 'محتوى موسَّع مع وسائط عادية.',
+      },
+    },
+  }),
 };

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

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import AvatarLayout from '..';
 import { Freeze, Plane } from '@transferwise/icons';
 import { Flag } from '@wise/art';
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 
 const meta: Meta<typeof AvatarLayout> = {
   component: AvatarLayout,
@@ -124,33 +124,49 @@ const rowStyle = { display: 'flex', alignItems: 'center', gap: '16px', flexWrap:
 const twoAvatars = [{ asset: <Plane /> }, { asset: <Plane /> }] as const;
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <div style={rowStyle}>
-        {horizontalSizes.map((size) => (
-          <AvatarLayout key={size} orientation="horizontal" size={size} avatars={[...twoAvatars]} />
-        ))}
-      </div>
-
-      <div style={rowStyle}>
-        {diagonalSizes.map((size) => (
-          <AvatarLayout key={size} orientation="diagonal" size={size} avatars={[...twoAvatars]} />
-        ))}
-      </div>
-
-      <AvatarLayout
-        orientation="horizontal"
-        size={48}
-        interactive
-        avatars={[{ asset: <Flag code="gb" /> }, { asset: <Flag code="br" /> }, { asset: '3+' }]}
-      />
-
-      <AvatarLayout
-        orientation="horizontal"
-        size={72}
-        avatars={[{ asset: <Plane /> }, { asset: <Plane /> }, { asset: <Plane /> }]}
-      />
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <div style={rowStyle}>
+          {horizontalSizes.map((size) => (
+            <AvatarLayout
+              key={size}
+              orientation="horizontal"
+              size={size}
+              avatars={[...twoAvatars]}
+            />
+          ))}
+        </div>
+
+        <div style={rowStyle}>
+          {diagonalSizes.map((size) => (
+            <AvatarLayout key={size} orientation="diagonal" size={size} avatars={[...twoAvatars]} />
+          ))}
+        </div>
+
+        <AvatarLayout
+          orientation="horizontal"
+          size={48}
+          interactive
+          avatars={[
+            { asset: <Flag code="gb" /> },
+            { asset: <Flag code="br" /> },
+            { asset: i18n.overflowCount },
+          ]}
+        />
+
+        <AvatarLayout
+          orientation="horizontal"
+          size={72}
+          avatars={[{ asset: <Plane /> }, { asset: <Plane /> }, { asset: <Plane /> }]}
+        />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      overflowCount: { en: '3+', ar: '+٣' },
+    },
+  }),
 };

package/src/Button/LegacyButton/_stories/LegacyButton.test.story.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react';
 
 import Button from '../..';
 import LegacyButton from '../LegacyButton';
-import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
 
 LegacyButton.displayName = 'Button';
 
@@ -38,22 +38,32 @@ export const Focused: Story = {
 };
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      {/* default (inline) layout */}
-      <LegacyButton>Default button</LegacyButton>
-
-      {/* block layout — full width */}
-      <LegacyButton block>Block button</LegacyButton>
-
-      {/* loading state — appends ProcessIndicator inside button */}
-      <LegacyButton loading>Loading button</LegacyButton>
-
-      {/* loading + block combined */}
-      <LegacyButton loading block>
-        Loading block button
-      </LegacyButton>
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        {/* default (inline) layout */}
+        <LegacyButton>{i18n.defaultButton}</LegacyButton>
+
+        {/* block layout — full width */}
+        <LegacyButton block>{i18n.blockButton}</LegacyButton>
+
+        {/* loading state — appends ProcessIndicator inside button */}
+        <LegacyButton loading>{i18n.loadingButton}</LegacyButton>
+
+        {/* loading + block combined */}
+        <LegacyButton loading block>
+          {i18n.loadingBlockButton}
+        </LegacyButton>
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      defaultButton: { en: 'Default button', ar: 'زر افتراضي' },
+      blockButton: { en: 'Block button', ar: 'زر بعرض كامل' },
+      loadingButton: { en: 'Loading button', ar: 'زر قيد التحميل' },
+      loadingBlockButton: { en: 'Loading block button', ar: 'زر بعرض كامل قيد التحميل' },
+    },
+  }),
 };

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

@@ -5,7 +5,7 @@ import { expect, userEvent, within } from 'storybook/test';
 import Button from '../Button.resolver';
 import { ButtonPriority } from '../Button.types';
 import { withVariantConfig } from '../../../.storybook/helpers';
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 
 const meta: Meta<typeof Button> = {
   component: Button,
@@ -167,66 +167,100 @@ export const AccessibilityAddons: Story = {
   },
 };
 
+type RTLDiffLabels = {
+  startIcon: string;
+  endIcon: string;
+  bothIcons: string;
+  avatarStart: string;
+  doubleAvatar: string;
+  smStartIcon: string;
+  smEndIcon: string;
+  smBothIcons: string;
+  loading: string;
+  blockWithStartIcon: string;
+};
+
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <Button v2 size="md" addonStart={{ type: 'icon', value: <Freeze /> }}>
-        Start icon
-      </Button>
-
-      <Button v2 size="md" addonEnd={{ type: 'icon', value: <ArrowEnd /> }}>
-        End icon
-      </Button>
-
-      <Button
-        v2
-        size="md"
-        addonStart={{ type: 'icon', value: <Freeze /> }}
-        addonEnd={{ type: 'icon', value: <ArrowEnd /> }}
-      >
-        Both icons
-      </Button>
-
-      <Button v2 size="md" addonStart={{ type: 'avatar', value: [{ asset: <Flag code="pl" /> }] }}>
-        Avatar start
-      </Button>
-
-      <Button
-        v2
-        size="md"
-        addonStart={{
-          type: 'avatar',
-          value: [{ asset: <Flag code="gb" /> }, { asset: <Flag code="br" /> }],
-        }}
-      >
-        Double avatar
-      </Button>
-
-      <Button v2 size="sm" addonStart={{ type: 'icon', value: <Freeze /> }}>
-        Sm start icon
-      </Button>
-
-      <Button v2 size="sm" addonEnd={{ type: 'icon', value: <ArrowEnd /> }}>
-        Sm end icon
-      </Button>
-
-      <Button
-        v2
-        size="sm"
-        addonStart={{ type: 'icon', value: <Freeze /> }}
-        addonEnd={{ type: 'icon', value: <ArrowEnd /> }}
-      >
-        Sm both icons
-      </Button>
-
-      <Button v2 size="md" loading addonEnd={{ type: 'icon', value: <ArrowEnd /> }}>
-        Loading
-      </Button>
-
-      <Button v2 size="md" block addonStart={{ type: 'icon', value: <Freeze /> }}>
-        Block with start icon
-      </Button>
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n<RTLDiffLabels>();
+
+    return (
+      <>
+        <Button v2 size="md" addonStart={{ type: 'icon', value: <Freeze /> }}>
+          {i18n.startIcon}
+        </Button>
+
+        <Button v2 size="md" addonEnd={{ type: 'icon', value: <ArrowEnd /> }}>
+          {i18n.endIcon}
+        </Button>
+
+        <Button
+          v2
+          size="md"
+          addonStart={{ type: 'icon', value: <Freeze /> }}
+          addonEnd={{ type: 'icon', value: <ArrowEnd /> }}
+        >
+          {i18n.bothIcons}
+        </Button>
+
+        <Button
+          v2
+          size="md"
+          addonStart={{ type: 'avatar', value: [{ asset: <Flag code="pl" /> }] }}
+        >
+          {i18n.avatarStart}
+        </Button>
+
+        <Button
+          v2
+          size="md"
+          addonStart={{
+            type: 'avatar',
+            value: [{ asset: <Flag code="gb" /> }, { asset: <Flag code="br" /> }],
+          }}
+        >
+          {i18n.doubleAvatar}
+        </Button>
+
+        <Button v2 size="sm" addonStart={{ type: 'icon', value: <Freeze /> }}>
+          {i18n.smStartIcon}
+        </Button>
+
+        <Button v2 size="sm" addonEnd={{ type: 'icon', value: <ArrowEnd /> }}>
+          {i18n.smEndIcon}
+        </Button>
+
+        <Button
+          v2
+          size="sm"
+          addonStart={{ type: 'icon', value: <Freeze /> }}
+          addonEnd={{ type: 'icon', value: <ArrowEnd /> }}
+        >
+          {i18n.smBothIcons}
+        </Button>
+
+        <Button v2 size="md" loading addonEnd={{ type: 'icon', value: <ArrowEnd /> }}>
+          {i18n.loading}
+        </Button>
+
+        <Button v2 size="md" block addonStart={{ type: 'icon', value: <Freeze /> }}>
+          {i18n.blockWithStartIcon}
+        </Button>
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      startIcon: { en: 'Start icon', ar: 'أيقونة البداية' },
+      endIcon: { en: 'End icon', ar: 'أيقونة النهاية' },
+      bothIcons: { en: 'Both icons', ar: 'كلتا الأيقونتين' },
+      avatarStart: { en: 'Avatar start', ar: 'صورة رمزية في البداية' },
+      doubleAvatar: { en: 'Double avatar', ar: 'صورتان رمزيتان' },
+      smStartIcon: { en: 'Sm start icon', ar: 'أيقونة بداية صغيرة' },
+      smEndIcon: { en: 'Sm end icon', ar: 'أيقونة نهاية صغيرة' },
+      smBothIcons: { en: 'Sm both icons', ar: 'كلتا الأيقونتين صغيرة' },
+      loading: { en: 'Loading', ar: 'جارٍ التحميل' },
+      blockWithStartIcon: { en: 'Block with start icon', ar: 'زر بعرض كامل مع أيقونة البداية' },
+    },
+  }),
 };

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

@@ -3,7 +3,11 @@ import { expect, waitFor, within, userEvent } from 'storybook/test';
 
 import Calendar from '../Calendar';
 import type { DisabledRules } from '../Calendar.types';
-import { forEachColumn, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import {
+  forEachColumn,
+  useRtlDiffI18n,
+  withRTLDiff,
+} from '../../../.storybook/decorators/RtlDiffDecorator';
 
 export default {
   component: Calendar,
@@ -125,28 +129,30 @@ const maxDate = new Date(2024, 9, 31);
 const disabledRulesRtl = {
   weekdays: ['sat', 'sun'] as ('sat' | 'sun')[],
   dates: [new Date(2024, 5, 10)],
-  reason: 'Weekends and specific dates are unavailable.',
 };
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <div data-testid="day-view">
-        <Calendar
-          value={selectedDate}
-          min={minDate}
-          max={maxDate}
-          disabledRules={disabledRulesRtl}
-        />
-      </div>
-      <div data-testid="month-view">
-        <Calendar value={selectedDate} min={minDate} max={maxDate} />
-      </div>
-      <div data-testid="year-view">
-        <Calendar value={selectedDate} min={minDate} max={maxDate} />
-      </div>
-    </>
-  ),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <div data-testid="day-view">
+          <Calendar
+            value={selectedDate}
+            min={minDate}
+            max={maxDate}
+            disabledRules={{ ...disabledRulesRtl, reason: i18n.disabledReason }}
+          />
+        </div>
+        <div data-testid="month-view">
+          <Calendar value={selectedDate} min={minDate} max={maxDate} />
+        </div>
+        <div data-testid="year-view">
+          <Calendar value={selectedDate} min={minDate} max={maxDate} />
+        </div>
+      </>
+    );
+  },
   play: async ({ canvasElement }) => {
     await forEachColumn(canvasElement, async (column) => {
       const monthContainer = column.querySelector('[data-testid="month-view"]')!;
@@ -159,5 +165,12 @@ export const RTLDiff: Story = {
       await userEvent.click(yearScope.getByRole('button', { name: /year view/iu }));
     });
   },
-  ...withRTLDiff(),
+  ...withRTLDiff({
+    i18n: {
+      disabledReason: {
+        en: 'Weekends and specific dates are unavailable.',
+        ar: 'عطلات نهاية الأسبوع وتواريخ محددة غير متاحة.',
+      },
+    },
+  }),
 };

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

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import Carousel from '..';
-import { stubbedCarouselCards } from './constants';
+import { carouselCardsI18n, getStubbedCarouselCards } from './constants';
 
 export default {
   component: Carousel,
@@ -12,12 +12,22 @@ export default {
 
 type Story = StoryObj<typeof Carousel>;
 
-const manyCards = [
-  ...stubbedCarouselCards,
-  ...stubbedCarouselCards.map((card) => ({ ...card, id: `${card.id}_2` })),
-];
+/** Doubled so the track overflows and both scroll buttons render. */
+const getManyCards = (i18n: Record<string, string>) => {
+  const cards = getStubbedCarouselCards(i18n);
+  return [...cards, ...cards.map((card) => ({ ...card, id: `${card.id}_2` }))];
+};
 
 export const RTLDiff: Story = {
-  render: () => <Carousel cards={manyCards} header="Pretty nifty stuff" />,
-  ...withRTLDiff({ width: 'stretch' }),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return <Carousel cards={getManyCards(i18n)} header={i18n.header} />;
+  },
+  ...withRTLDiff({
+    width: 'stretch',
+    i18n: {
+      header: { en: 'Pretty nifty stuff', ar: 'أشياء رائعة حقًا' },
+      ...carouselCardsI18n,
+    },
+  }),
 };

package/src/Carousel/_stories/constants.tsx

@@ -2,7 +2,26 @@ import { Illustration } from '@wise/art';
 import Display from '../../Display';
 import type { CarouselCard } from '../Carousel';
 
-export const stubbedCarouselCards: CarouselCard[] = [
+/**
+ * Every string the stubbed cards render, shaped as a `withRTLDiff({ i18n })` map so the RTL diff
+ * can spread it — that call site is what type-checks the shape against `I18nMap`. The type is not
+ * imported here: this file is part of the Rollup build, which cannot emit declarations that
+ * reference `.storybook/`. The promo card's `Wise` title is a brand name and stays in Latin script.
+ */
+export const carouselCardsI18n = {
+  globeCardTitle: { en: 'Here there, everywhere', ar: 'هنا وهناك وفي كل مكان' },
+  promoDescription: {
+    en: 'The best way to move money internationally',
+    ar: 'أفضل طريقة لتحويل الأموال دوليًا',
+  },
+  quickPayCardTitle: { en: 'Get Quick Pay', ar: 'احصل على الدفع السريع' },
+};
+
+/**
+ * Takes copy already resolved for one language — exactly what `useRtlDiffI18n()` returns — so the
+ * same fixture serves the single-direction stories and the RTL diff.
+ */
+export const getStubbedCarouselCards = (i18n: Record<string, string>): CarouselCard[] => [
   {
     id: 'YOUR_INVOICE',
     type: 'button',
@@ -15,7 +34,7 @@ export const stubbedCarouselCards: CarouselCard[] = [
           <Illustration disablePadding name="globe" size="small" alt="" />
         </div>
         <div style={{ position: 'absolute', zIndex: '2', bottom: '8px', left: '16px' }}>
-          <Display type="display-small">Here there, everywhere</Display>
+          <Display type="display-small">{i18n.globeCardTitle}</Display>
         </div>
       </div>
     ),
@@ -28,7 +47,7 @@ export const stubbedCarouselCards: CarouselCard[] = [
     },
     href: 'http://wise.com',
     title: 'Wise',
-    description: 'The best way to move money internationally',
+    description: i18n.promoDescription,
   },
   {
     id: 'SHOP_OR_STALL',
@@ -41,6 +60,12 @@ export const stubbedCarouselCards: CarouselCard[] = [
         'url(https://wise.com/public-resources/assets/team-page/tapestry/team_member_tapestry_01.jpg)',
       backgroundSize: 'cover',
     },
-    content: <Display type="display-small">Get Quick Pay</Display>,
+    content: <Display type="display-small">{i18n.quickPayCardTitle}</Display>,
   },
 ];
+
+const englishCopy = Object.fromEntries(
+  Object.entries(carouselCardsI18n).map(([key, entry]) => [key, entry.en]),
+);
+
+export const stubbedCarouselCards = getStubbedCarouselCards(englishCopy);