@transferwise/components 46.165.0 → 46.165.1

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: 'تصفية الفئات' },
+    },
+  }),
 };

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

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn, userEvent, within } from 'storybook/test';
 
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import DateInput from '..';
 
 export default {
@@ -13,24 +13,74 @@ export default {
 type Story = StoryObj<typeof DateInput>;
 
 export const Sizes: Story = {
-  render: () => (
-    <>
-      <DateInput size="sm" onChange={fn()} />
-      <DateInput size="md" onChange={fn()} />
-      <DateInput size="lg" onChange={fn()} />
-      <DateInput mode="month-year" onChange={fn()} />
-    </>
-  ),
-  ...withRTLDiff({ renderAs: 'iframe' }),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <DateInput
+          size="sm"
+          dayLabel={i18n.dayLabel}
+          monthLabel={i18n.monthLabel}
+          yearLabel={i18n.yearLabel}
+          onChange={fn()}
+        />
+        <DateInput
+          size="md"
+          dayLabel={i18n.dayLabel}
+          monthLabel={i18n.monthLabel}
+          yearLabel={i18n.yearLabel}
+          onChange={fn()}
+        />
+        <DateInput
+          size="lg"
+          dayLabel={i18n.dayLabel}
+          monthLabel={i18n.monthLabel}
+          yearLabel={i18n.yearLabel}
+          onChange={fn()}
+        />
+        <DateInput
+          mode="month-year"
+          monthLabel={i18n.monthLabel}
+          yearLabel={i18n.yearLabel}
+          onChange={fn()}
+        />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    i18n: {
+      dayLabel: { en: 'Day', ar: 'اليوم' },
+      monthLabel: { en: 'Month', ar: 'الشهر' },
+      yearLabel: { en: 'Year', ar: 'السنة' },
+    },
+  }),
 };
 
 export const OpenDropdown: Story = {
-  render: () => <DateInput onChange={() => {}} />,
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <DateInput
+        dayLabel={i18n.dayLabel}
+        monthLabel={i18n.monthLabel}
+        yearLabel={i18n.yearLabel}
+        onChange={() => {}}
+      />
+    );
+  },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const trigger = canvas.queryByRole('combobox');
     if (!trigger) return;
     await userEvent.click(trigger);
   },
-  ...withRTLDiff({ renderAs: 'iframe' }),
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    i18n: {
+      dayLabel: { en: 'Day', ar: 'اليوم' },
+      monthLabel: { en: 'Month', ar: 'الشهر' },
+      yearLabel: { en: 'Year', ar: 'السنة' },
+    },
+  }),
 };

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

@@ -15,8 +15,8 @@ type Story = StoryObj<typeof DateLookup>;
 const selectedDate = new Date(2024, 5, 14);
 
 const i18nConfig = {
-  label: { ltr: 'Select date', rtl: 'اختر التاريخ' },
-  placeholder: { ltr: 'Choose a date', rtl: 'اختر تاريخًا' },
+  label: { en: 'Select date', ar: 'اختر التاريخ' },
+  placeholder: { en: 'Choose a date', ar: 'اختر تاريخًا' },
 };
 
 export const TriggerVariants: Story = {

package/src/Decision/_stories/Decision.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 { Size } from '../../common';
 import Decision, { DecisionPresentation, DecisionType } from '..';
 import AvatarView from '../../AvatarView';
@@ -13,67 +13,83 @@ export default {
 
 type Story = StoryObj<typeof Decision>;
 
-const options = [
-  {
-    title: 'Send money',
-    description: 'Fast international transfers.',
-    href: '#',
-    'aria-label': 'Send money',
-    media: {
-      block: <img src="https://wise.com/public-resources/assets/illustrations/globe.svg" alt="" />,
-      list: <AvatarView profileName="Alice Smith" />,
-    },
-  },
-  {
-    title: 'Receive money',
-    description: 'Get paid from abroad.',
-    href: '#',
-    'aria-label': 'Receive money',
-    media: {
-      block: <img src="https://wise.com/public-resources/assets/illustrations/globe.svg" alt="" />,
-      list: <AvatarView profileName="Alice Smith" />,
-    },
-  },
-];
-
 /**
  * NavigationOption renders media on the inline-start side and a chevron on the
  * inline-end side; these flip in RTL. The LIST_BLOCK and LIST_BLOCK_GRID
  * presentations use flex-row layout that also reverses direction in RTL.
  */
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <Decision
-        options={options}
-        presentation={DecisionPresentation.LIST}
-        type={DecisionType.NAVIGATION}
-      />
-      <Decision
-        options={options}
-        presentation={DecisionPresentation.LIST}
-        type={DecisionType.NAVIGATION}
-        isContainerAligned
-      />
-      <Decision
-        options={options}
-        presentation={DecisionPresentation.LIST_BLOCK}
-        type={DecisionType.NAVIGATION}
-        size={Size.MEDIUM}
-      />
-      <Decision
-        options={options}
-        presentation={DecisionPresentation.LIST_BLOCK}
-        type={DecisionType.NAVIGATION}
-        size={Size.SMALL}
-      />
-      <Decision
-        options={[...options, ...options]}
-        presentation={DecisionPresentation.LIST_BLOCK_GRID}
-        type={DecisionType.NAVIGATION}
-        size={Size.MEDIUM}
-      />
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+
+    const options = [
+      {
+        title: i18n.sendTitle,
+        description: i18n.sendDescription,
+        href: '#',
+        'aria-label': i18n.sendTitle,
+        media: {
+          block: (
+            <img src="https://wise.com/public-resources/assets/illustrations/globe.svg" alt="" />
+          ),
+          list: <AvatarView profileName={i18n.profileName} />,
+        },
+      },
+      {
+        title: i18n.receiveTitle,
+        description: i18n.receiveDescription,
+        href: '#',
+        'aria-label': i18n.receiveTitle,
+        media: {
+          block: (
+            <img src="https://wise.com/public-resources/assets/illustrations/globe.svg" alt="" />
+          ),
+          list: <AvatarView profileName={i18n.profileName} />,
+        },
+      },
+    ];
+
+    return (
+      <>
+        <Decision
+          options={options}
+          presentation={DecisionPresentation.LIST}
+          type={DecisionType.NAVIGATION}
+        />
+        <Decision
+          options={options}
+          presentation={DecisionPresentation.LIST}
+          type={DecisionType.NAVIGATION}
+          isContainerAligned
+        />
+        <Decision
+          options={options}
+          presentation={DecisionPresentation.LIST_BLOCK}
+          type={DecisionType.NAVIGATION}
+          size={Size.MEDIUM}
+        />
+        <Decision
+          options={options}
+          presentation={DecisionPresentation.LIST_BLOCK}
+          type={DecisionType.NAVIGATION}
+          size={Size.SMALL}
+        />
+        <Decision
+          options={[...options, ...options]}
+          presentation={DecisionPresentation.LIST_BLOCK_GRID}
+          type={DecisionType.NAVIGATION}
+          size={Size.MEDIUM}
+        />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      sendTitle: { en: 'Send money', ar: 'إرسال الأموال' },
+      sendDescription: { en: 'Fast international transfers.', ar: 'تحويلات دولية سريعة.' },
+      receiveTitle: { en: 'Receive money', ar: 'استلام الأموال' },
+      receiveDescription: { en: 'Get paid from abroad.', ar: 'استلم أموالك من الخارج.' },
+      profileName: { en: 'Alice Smith', ar: 'أليس سميث' },
+    },
+  }),
 };