@transferwise/components 46.165.0 → 46.165.2

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);

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

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
 import { lorem10 } from '../../test-utils';
 import Checkbox from '../Checkbox';
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import { withVariantConfig } from '../../../.storybook/helpers';
 
 const meta: Meta<typeof Checkbox> = {
@@ -39,16 +39,25 @@ export const MultipleMobile: Story = {
  * so both single-line and two-line layouts are verified here.
  */
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <Checkbox checked label="Label only" onChange={() => {}} />
-      <Checkbox
-        checked
-        label="Label with secondary"
-        secondary="Secondary description text"
-        onChange={() => {}}
-      />
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <Checkbox checked label={i18n.labelOnly} onChange={() => {}} />
+        <Checkbox
+          checked
+          label={i18n.withSecondary}
+          secondary={i18n.secondaryDescription}
+          onChange={() => {}}
+        />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      labelOnly: { en: 'Label only', ar: 'التسمية فقط' },
+      withSecondary: { en: 'Label with secondary', ar: 'تسمية مع وصف ثانوي' },
+      secondaryDescription: { en: 'Secondary description text', ar: 'نص الوصف الثانوي' },
+    },
+  }),
 };

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

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { expect, userEvent, within } from 'storybook/test';
 
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import { withVariantConfig } from '../../../.storybook/helpers';
 import CheckboxButton from '../CheckboxButton';
 
@@ -200,17 +200,26 @@ export const Zoom400: Story = {
 };
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <CheckboxButton aria-label="Unchecked" checked={false} onChange={() => {}} />
-      <CheckboxButton aria-label="Checked" checked onChange={() => {}} />
-      <CheckboxButton
-        aria-label="Indeterminate"
-        checked={false}
-        indeterminate
-        onChange={() => {}}
-      />
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <CheckboxButton aria-label={i18n.unchecked} checked={false} onChange={() => {}} />
+        <CheckboxButton aria-label={i18n.checked} checked onChange={() => {}} />
+        <CheckboxButton
+          aria-label={i18n.indeterminate}
+          checked={false}
+          indeterminate
+          onChange={() => {}}
+        />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      unchecked: { en: 'Unchecked', ar: 'غير محدد' },
+      checked: { en: 'Checked', ar: 'محدد' },
+      indeterminate: { en: 'Indeterminate', ar: 'محدد جزئيًا' },
+    },
+  }),
 };

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { userEvent } from 'storybook/test';
 import { useState } from 'react';
 
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import { withVariantConfig } from '../../../.storybook/helpers';
 import Chips, { type ChipValue } from '../Chips';
 
@@ -143,40 +143,55 @@ export const Zoom400: Story = {
   ...withVariantConfig(['400%']),
 };
 
-const categoryChips = [
-  { value: 'all', label: 'All' },
-  { value: 'accounting', label: 'Accounting' },
-  { value: 'payroll', label: 'Payroll' },
-  { value: 'payments', label: 'Payments' },
-];
-
-const amountChips = [
-  { value: 100, label: '100 GBP' },
-  { value: 200, label: '200 GBP' },
-  { value: 300, label: '300 GBP' },
-  { value: 500, label: '500 GBP+' },
-];
-
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      {/* Choice mode: chip row order reverses in RTL */}
-      <Chips
-        chips={amountChips}
-        selected={300}
-        multiple={false}
-        aria-label="Transfer amount"
-        onChange={() => undefined}
-      />
-      {/* Filter mode: selected chips show close button on trailing end */}
-      <Chips
-        chips={categoryChips}
-        selected={['accounting', 'payments']}
-        multiple
-        aria-label="Category filter"
-        onChange={() => undefined}
-      />
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    const categoryChips = [
+      { value: 'all', label: i18n.all },
+      { value: 'accounting', label: i18n.accounting },
+      { value: 'payroll', label: i18n.payroll },
+      { value: 'payments', label: i18n.payments },
+    ];
+    const amountChips = [
+      { value: 100, label: i18n.amount100 },
+      { value: 200, label: i18n.amount200 },
+      { value: 300, label: i18n.amount300 },
+      { value: 500, label: i18n.amount500Plus },
+    ];
+
+    return (
+      <>
+        {/* Choice mode: chip row order reverses in RTL */}
+        <Chips
+          chips={amountChips}
+          selected={300}
+          multiple={false}
+          aria-label={i18n.transferAmount}
+          onChange={() => undefined}
+        />
+        {/* Filter mode: selected chips show close button on trailing end */}
+        <Chips
+          chips={categoryChips}
+          selected={['accounting', 'payments']}
+          multiple
+          aria-label={i18n.categoryFilter}
+          onChange={() => undefined}
+        />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      all: { en: 'All', ar: 'الكل' },
+      accounting: { en: 'Accounting', ar: 'المحاسبة' },
+      payroll: { en: 'Payroll', ar: 'الرواتب' },
+      payments: { en: 'Payments', ar: 'المدفوعات' },
+      amount100: { en: '100 GBP', ar: '100 جنيه إسترليني' },
+      amount200: { en: '200 GBP', ar: '200 جنيه إسترليني' },
+      amount300: { en: '300 GBP', ar: '300 جنيه إسترليني' },
+      amount500Plus: { en: '500 GBP+', ar: '+500 جنيه إسترليني' },
+      transferAmount: { en: 'Transfer amount', ar: 'مبلغ التحويل' },
+      categoryFilter: { en: 'Category filter', ar: 'تصفية الفئات' },
+    },
+  }),
 };