@transferwise/components 46.164.0 → 46.165.1

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: 'أليس سميث' },
+    },
+  }),
 };

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

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { expect } from 'storybook/test';
 
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import { Layout } from '../../common';
 
 import DefinitionList, { type DefinitionListDefinition, type DefinitionListLayout } from '..';
@@ -168,28 +168,6 @@ export const HORIZONTAL_RIGHT_ALIGNED: Story = {
   play: verifySharedColumnBoundary,
 };
 
-const rtlDefinitions: DefinitionListDefinition[] = [
-  { key: 'name', title: 'Full name', value: 'Alice Smith' },
-  { key: 'amount', title: 'Amount sent', value: '1,234.56 GBP' },
-  { key: 'status', title: 'Transfer status', value: 'Completed successfully' },
-];
-
-const rtlDefinitionsWithAction: DefinitionListDefinition[] = [
-  { key: 'name', title: 'Full name', value: 'Alice Smith' },
-  {
-    key: 'amount',
-    title: 'Amount sent',
-    value: '1,234.56 GBP',
-    action: { label: 'Edit' },
-  },
-  {
-    key: 'status',
-    title: 'Transfer status',
-    value: 'Completed successfully',
-    action: { label: 'View details' },
-  },
-];
-
 const layouts: DefinitionListLayout[] = [
   'VERTICAL_TWO_COLUMN',
   'VERTICAL_ONE_COLUMN',
@@ -199,23 +177,61 @@ const layouts: DefinitionListLayout[] = [
 ];
 
 export const RTLDiff: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--size-48)' }}>
-      {layouts.map((layout) => (
-        <section key={layout}>
-          <h3 style={{ fontSize: 14, margin: '0 0 var(--size-8)' }}>{layout}</h3>
-          <DefinitionList layout={layout} definitions={rtlDefinitions} />
-        </section>
-      ))}
-      {layouts.map((layout) => (
-        <section key={`${layout}-action`}>
-          <h3 style={{ fontSize: 14, margin: '0 0 var(--size-8)' }}>
-            {layout} with action buttons
-          </h3>
-          <DefinitionList layout={layout} definitions={rtlDefinitionsWithAction} />
-        </section>
-      ))}
-    </div>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+
+    const rtlDefinitions: DefinitionListDefinition[] = [
+      { key: 'name', title: i18n.fullName, value: i18n.customerName },
+      { key: 'amount', title: i18n.amountSent, value: i18n.amountValue },
+      { key: 'status', title: i18n.transferStatus, value: i18n.statusValue },
+    ];
+
+    const rtlDefinitionsWithAction: DefinitionListDefinition[] = [
+      { key: 'name', title: i18n.fullName, value: i18n.customerName },
+      {
+        key: 'amount',
+        title: i18n.amountSent,
+        value: i18n.amountValue,
+        action: { label: i18n.editAction },
+      },
+      {
+        key: 'status',
+        title: i18n.transferStatus,
+        value: i18n.statusValue,
+        action: { label: i18n.viewDetailsAction },
+      },
+    ];
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--size-48)' }}>
+        {layouts.map((layout) => (
+          <section key={layout}>
+            <h3 style={{ fontSize: 14, margin: '0 0 var(--size-8)' }}>{layout}</h3>
+            <DefinitionList layout={layout} definitions={rtlDefinitions} />
+          </section>
+        ))}
+        {layouts.map((layout) => (
+          <section key={`${layout}-action`}>
+            <h3 style={{ fontSize: 14, margin: '0 0 var(--size-8)' }}>
+              {layout} {i18n.withActionButtons}
+            </h3>
+            <DefinitionList layout={layout} definitions={rtlDefinitionsWithAction} />
+          </section>
+        ))}
+      </div>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      fullName: { en: 'Full name', ar: 'الاسم الكامل' },
+      customerName: { en: 'Alice Smith', ar: 'أليس سميث' },
+      amountSent: { en: 'Amount sent', ar: 'المبلغ المُرسل' },
+      amountValue: { en: '1,234.56 GBP', ar: '1,234.56 جنيه إسترليني' },
+      transferStatus: { en: 'Transfer status', ar: 'حالة التحويل' },
+      statusValue: { en: 'Completed successfully', ar: 'اكتمل بنجاح' },
+      editAction: { en: 'Edit', ar: 'تعديل' },
+      viewDetailsAction: { en: 'View details', ar: 'عرض التفاصيل' },
+      withActionButtons: { en: 'with action buttons', ar: 'مع أزرار الإجراءات' },
+    },
+  }),
 };