@transferwise/components 0.0.0-experimental-e94d625 → 0.0.0-experimental-8e1de95

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/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: 'مع أزرار الإجراءات' },
+    },
+  }),
 };

package/src/Drawer/_stories/Drawer.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 Drawer from '..';
 
 export default {
@@ -11,48 +11,75 @@ export default {
 
 type Story = StoryObj<typeof Drawer>;
 
-const iframeDiff = withRTLDiff({ renderAs: 'iframe' });
-
 export const PositionRight: Story = {
-  render: () => (
-    <Drawer
-      open
-      position="right"
-      headerTitle="Drawer title"
-      footerContent={<button type="button">Done</button>}
-      onClose={() => {}}
-    >
-      <p>Drawer body content.</p>
-    </Drawer>
-  ),
-  ...iframeDiff,
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Drawer
+        open
+        position="right"
+        headerTitle={i18n.title}
+        footerContent={<button type="button">{i18n.done}</button>}
+        onClose={() => {}}
+      >
+        <p>{i18n.body}</p>
+      </Drawer>
+    );
+  },
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    i18n: {
+      title: { en: 'Drawer title', ar: 'عنوان اللوحة' },
+      done: { en: 'Done', ar: 'تم' },
+      body: { en: 'Drawer body content.', ar: 'محتوى اللوحة الجانبية.' },
+    },
+  }),
 };
 
 export const PositionLeft: Story = {
-  render: () => (
-    <Drawer
-      open
-      position="left"
-      headerTitle="Left drawer title"
-      footerContent={<button type="button">Done</button>}
-      onClose={() => {}}
-    >
-      <p>Left drawer body content.</p>
-    </Drawer>
-  ),
-  ...iframeDiff,
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Drawer
+        open
+        position="left"
+        headerTitle={i18n.title}
+        footerContent={<button type="button">{i18n.done}</button>}
+        onClose={() => {}}
+      >
+        <p>{i18n.body}</p>
+      </Drawer>
+    );
+  },
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    i18n: {
+      title: { en: 'Left drawer title', ar: 'عنوان اللوحة اليسرى' },
+      done: { en: 'Done', ar: 'تم' },
+      body: { en: 'Left drawer body content.', ar: 'محتوى اللوحة اليسرى.' },
+    },
+  }),
 };
 
 export const WithoutTitle: Story = {
-  render: () => (
-    <Drawer
-      open
-      position="right"
-      footerContent={<button type="button">Done</button>}
-      onClose={() => {}}
-    >
-      <p>No title drawer content.</p>
-    </Drawer>
-  ),
-  ...iframeDiff,
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Drawer
+        open
+        position="right"
+        footerContent={<button type="button">{i18n.done}</button>}
+        onClose={() => {}}
+      >
+        <p>{i18n.body}</p>
+      </Drawer>
+    );
+  },
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    i18n: {
+      done: { en: 'Done', ar: 'تم' },
+      body: { en: 'No title drawer content.', ar: 'محتوى لوحة بدون عنوان.' },
+    },
+  }),
 };