@transferwise/components 46.165.0 → 46.165.2

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

@@ -3,7 +3,7 @@ import { expect, userEvent, within } from 'storybook/test';
 import { useState } from 'react';
 
 import { withVariantConfig } from '../../../.storybook/helpers';
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import Field from '../../Field/Field';
 import Switch from '../Switch';
 
@@ -103,15 +103,23 @@ export const Zoom400: Story = {
  * the thumb direction flips correctly between writing modes.
  */
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <Field label="Unchecked">
-        <Switch checked={false} onClick={() => {}} />
-      </Field>
-      <Field label="Checked">
-        <Switch checked onClick={() => {}} />
-      </Field>
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <Field label={i18n.unchecked}>
+          <Switch checked={false} onClick={() => {}} />
+        </Field>
+        <Field label={i18n.checked}>
+          <Switch checked onClick={() => {}} />
+        </Field>
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      unchecked: { en: 'Unchecked', ar: 'غير محدد' },
+      checked: { en: 'Checked', ar: 'محدد' },
+    },
+  }),
 };

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

@@ -1,79 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { DirectDebits } from '@transferwise/icons';
 
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import Table from '..';
 import { TableHeaderType } from '../Header/TableHeader';
 import { TableRowType, TableRowClickableType } from '../Row/TableRow';
 
-const headers: TableHeaderType[] = [
-  { header: 'Employee', width: '200px' },
-  { header: 'Location' },
-  { header: 'Payment', alignment: 'right' },
-  { header: 'Status' },
-];
-
-const rows: TableRowType[] = [
-  {
-    cells: [
-      {
-        cell: {
-          type: 'leading',
-          primaryText: 'Bob Brown',
-          secondaryText: 'Software Engineer',
-          avatar: { profileName: 'Bob Brown', badge: { flagCode: 'GBP' } },
-        },
-      },
-      { cell: { type: 'text', text: 'FR, Paris' } },
-      {
-        cell: {
-          type: 'currency',
-          primaryCurrency: { amount: 12345.67, currency: 'eur' },
-          secondaryCurrency: { amount: 11000.0, currency: 'gbp' },
-        },
-        alignment: 'right',
-      },
-      {
-        cell: {
-          type: 'status',
-          primaryText: 'Cancelled',
-          secondaryText: '1 day ago',
-          sentiment: 'negative',
-        },
-      },
-    ],
-  },
-  {
-    cells: [
-      {
-        cell: {
-          type: 'leading',
-          primaryText: 'Jan Kowalski',
-          secondaryText: 'Product Manager',
-          avatar: { asset: <DirectDebits />, badge: { status: 'warning' } },
-        },
-      },
-      { cell: { type: 'text', text: 'US, New York' } },
-      {
-        cell: {
-          type: 'currency',
-          primaryCurrency: { amount: 23456.78, currency: 'usd' },
-          secondaryCurrency: { amount: 21000.0, currency: 'gbp' },
-        },
-        alignment: 'right',
-      },
-      {
-        cell: {
-          type: 'status',
-          primaryText: 'Paid',
-          secondaryText: 'Yesterday',
-          sentiment: 'positive',
-        },
-      },
-    ],
-  },
-];
-
 export default {
   component: Table,
   title: 'Content/Table/Tests',
@@ -83,22 +15,111 @@ export default {
 type Story = StoryObj<typeof Table>;
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <Table data={{ headers, rows }} />
-      <Table
-        data={{
-          headers,
-          rows,
-          onRowClick: (rowData: TableRowType | TableRowClickableType) => {
-            void rowData;
+  render: () => {
+    const i18n = useRtlDiffI18n();
+
+    const headers: TableHeaderType[] = [
+      { header: i18n.employeeHeader, width: '200px' },
+      { header: i18n.locationHeader },
+      { header: i18n.paymentHeader, alignment: 'right' },
+      { header: i18n.statusHeader },
+    ];
+
+    const rows: TableRowType[] = [
+      {
+        cells: [
+          {
+            cell: {
+              type: 'leading',
+              primaryText: i18n.employeeOneName,
+              secondaryText: i18n.employeeOneRole,
+              avatar: { profileName: i18n.employeeOneName, badge: { flagCode: 'GBP' } },
+            },
+          },
+          { cell: { type: 'text', text: i18n.employeeOneLocation } },
+          {
+            cell: {
+              type: 'currency',
+              primaryCurrency: { amount: 12345.67, currency: 'eur' },
+              secondaryCurrency: { amount: 11000.0, currency: 'gbp' },
+            },
+            alignment: 'right',
+          },
+          {
+            cell: {
+              type: 'status',
+              primaryText: i18n.employeeOneStatus,
+              secondaryText: i18n.employeeOneStatusTime,
+              sentiment: 'negative',
+            },
+          },
+        ],
+      },
+      {
+        cells: [
+          {
+            cell: {
+              type: 'leading',
+              primaryText: i18n.employeeTwoName,
+              secondaryText: i18n.employeeTwoRole,
+              avatar: { asset: <DirectDebits />, badge: { status: 'warning' } },
+            },
+          },
+          { cell: { type: 'text', text: i18n.employeeTwoLocation } },
+          {
+            cell: {
+              type: 'currency',
+              primaryCurrency: { amount: 23456.78, currency: 'usd' },
+              secondaryCurrency: { amount: 21000.0, currency: 'gbp' },
+            },
+            alignment: 'right',
+          },
+          {
+            cell: {
+              type: 'status',
+              primaryText: i18n.employeeTwoStatus,
+              secondaryText: i18n.employeeTwoStatusTime,
+              sentiment: 'positive',
+            },
           },
-        }}
-      />
-      <Table data={{ headers, rows }} fullWidth={false} />
-      <Table data={{ headers, rows: [] }} />
-      <Table data={{ headers, rows }} loading />
-    </>
-  ),
-  ...withRTLDiff(),
+        ],
+      },
+    ];
+
+    return (
+      <>
+        <Table data={{ headers, rows }} />
+        <Table
+          data={{
+            headers,
+            rows,
+            onRowClick: (rowData: TableRowType | TableRowClickableType) => {
+              void rowData;
+            },
+          }}
+        />
+        <Table data={{ headers, rows }} fullWidth={false} />
+        <Table data={{ headers, rows: [] }} />
+        <Table data={{ headers, rows }} loading />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      employeeHeader: { en: 'Employee', ar: 'الموظف' },
+      locationHeader: { en: 'Location', ar: 'الموقع' },
+      paymentHeader: { en: 'Payment', ar: 'الدفعة' },
+      statusHeader: { en: 'Status', ar: 'الحالة' },
+      employeeOneName: { en: 'Bob Brown', ar: 'بوب براون' },
+      employeeOneRole: { en: 'Software Engineer', ar: 'مهندس برمجيات' },
+      employeeOneLocation: { en: 'FR, Paris', ar: 'فرنسا، باريس' },
+      employeeOneStatus: { en: 'Cancelled', ar: 'ملغى' },
+      employeeOneStatusTime: { en: '1 day ago', ar: 'منذ يوم واحد' },
+      employeeTwoName: { en: 'Jan Kowalski', ar: 'يان كوفالسكي' },
+      employeeTwoRole: { en: 'Product Manager', ar: 'مدير المنتج' },
+      employeeTwoLocation: { en: 'US, New York', ar: 'أمريكا، نيويورك' },
+      employeeTwoStatus: { en: 'Paid', ar: 'مدفوع' },
+      employeeTwoStatusTime: { en: 'Yesterday', ar: 'أمس' },
+    },
+  }),
 };

package/src/Tabs/_stories/Tabs.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 { Width } from '../../common';
 import Tabs from '..';
 
@@ -12,61 +12,101 @@ export default {
 
 type Story = StoryObj<typeof Tabs>;
 
-const defaultTabs = [
-  { title: 'First tab', disabled: false, content: <div className="p-a-2">First content</div> },
-  { title: 'Second tab', disabled: false, content: <div className="p-a-2">Second content</div> },
-  { title: 'Third tab', disabled: false, content: <div className="p-a-2">Third content</div> },
-];
-
 /**
  * The tab list is horizontal: tab order, the active indicator translateX, and
  * swipe direction all flip between LTR and RTL. The indicator uses a negated
  * translateX in RTL mode. This diff verifies the layout mirrors correctly.
  */
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <div style={{ marginBottom: 32 }}>
-        <h4>Block width — first tab selected</h4>
-        <Tabs
-          name="rtl-block-first"
-          tabs={defaultTabs}
-          selected={0}
-          headerWidth={Width.BLOCK}
-          onTabSelect={() => {}}
-        />
-      </div>
-      <div style={{ marginBottom: 32 }}>
-        <h4>Block width — second tab selected</h4>
-        <Tabs
-          name="rtl-block-second"
-          tabs={defaultTabs}
-          selected={1}
-          headerWidth={Width.BLOCK}
-          onTabSelect={() => {}}
-        />
-      </div>
-      <div style={{ marginBottom: 32 }}>
-        <h4>Auto width — first tab selected</h4>
-        <Tabs
-          name="rtl-auto-first"
-          tabs={defaultTabs}
-          selected={0}
-          headerWidth={Width.AUTO}
-          onTabSelect={() => {}}
-        />
-      </div>
-      <div style={{ marginBottom: 32 }}>
-        <h4>Auto width — second tab selected</h4>
-        <Tabs
-          name="rtl-auto-second"
-          tabs={defaultTabs}
-          selected={1}
-          headerWidth={Width.AUTO}
-          onTabSelect={() => {}}
-        />
-      </div>
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    const defaultTabs = [
+      {
+        title: i18n.firstTab,
+        disabled: false,
+        content: <div className="p-a-2">{i18n.firstContent}</div>,
+      },
+      {
+        title: i18n.secondTab,
+        disabled: false,
+        content: <div className="p-a-2">{i18n.secondContent}</div>,
+      },
+      {
+        title: i18n.thirdTab,
+        disabled: false,
+        content: <div className="p-a-2">{i18n.thirdContent}</div>,
+      },
+    ];
+
+    return (
+      <>
+        <div style={{ marginBottom: 32 }}>
+          <h4>{i18n.blockFirstSelected}</h4>
+          <Tabs
+            name="rtl-block-first"
+            tabs={defaultTabs}
+            selected={0}
+            headerWidth={Width.BLOCK}
+            onTabSelect={() => {}}
+          />
+        </div>
+        <div style={{ marginBottom: 32 }}>
+          <h4>{i18n.blockSecondSelected}</h4>
+          <Tabs
+            name="rtl-block-second"
+            tabs={defaultTabs}
+            selected={1}
+            headerWidth={Width.BLOCK}
+            onTabSelect={() => {}}
+          />
+        </div>
+        <div style={{ marginBottom: 32 }}>
+          <h4>{i18n.autoFirstSelected}</h4>
+          <Tabs
+            name="rtl-auto-first"
+            tabs={defaultTabs}
+            selected={0}
+            headerWidth={Width.AUTO}
+            onTabSelect={() => {}}
+          />
+        </div>
+        <div style={{ marginBottom: 32 }}>
+          <h4>{i18n.autoSecondSelected}</h4>
+          <Tabs
+            name="rtl-auto-second"
+            tabs={defaultTabs}
+            selected={1}
+            headerWidth={Width.AUTO}
+            onTabSelect={() => {}}
+          />
+        </div>
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      firstTab: { en: 'First tab', ar: 'التبويب الأول' },
+      secondTab: { en: 'Second tab', ar: 'التبويب الثاني' },
+      thirdTab: { en: 'Third tab', ar: 'التبويب الثالث' },
+      firstContent: { en: 'First content', ar: 'المحتوى الأول' },
+      secondContent: { en: 'Second content', ar: 'المحتوى الثاني' },
+      thirdContent: { en: 'Third content', ar: 'المحتوى الثالث' },
+      blockFirstSelected: {
+        en: 'Block width — first tab selected',
+        ar: 'عرض كامل — التبويب الأول محدد',
+      },
+      blockSecondSelected: {
+        en: 'Block width — second tab selected',
+        ar: 'عرض كامل — التبويب الثاني محدد',
+      },
+      autoFirstSelected: {
+        en: 'Auto width — first tab selected',
+        ar: 'عرض تلقائي — التبويب الأول محدد',
+      },
+      autoSecondSelected: {
+        en: 'Auto width — second tab selected',
+        ar: 'عرض تلقائي — التبويب الثاني محدد',
+      },
+    },
+  }),
 };

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

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import { allModes } from '../../../.storybook/modes';
 import Tag from '..';
 import type { TagProps } from '..';
@@ -72,21 +72,32 @@ export const AllThemesAndSentiments: Story = {
  * The tag's horizontal padding is asymmetric and long copy truncates, so both need to mirror.
  */
 export const RTLDiff: Story = {
-  render: () => (
-    <div
-      style={{
-        alignItems: 'flex-start',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '0.5rem',
-      }}
-    >
-      <Tag label="Tag copy" />
-      <Tag label="Tag copy" size="large" sentiment="success" emphasis="elevated" />
-      <Tag label="A tag with copy far too long to fit within its maximum width" />
-    </div>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <div
+        style={{
+          alignItems: 'flex-start',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '0.5rem',
+        }}
+      >
+        <Tag label={i18n.tagCopy} />
+        <Tag label={i18n.tagCopy} size="large" sentiment="success" emphasis="elevated" />
+        <Tag label={i18n.longCopy} />
+      </div>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      tagCopy: { en: 'Tag copy', ar: 'نص الوسم' },
+      longCopy: {
+        en: 'A tag with copy far too long to fit within its maximum width',
+        ar: 'وسم يحتوي على نص طويل جدًا بحيث لا يتسع داخل الحد الأقصى لعرضه',
+      },
+    },
+  }),
 };
 
 /**

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

@@ -51,12 +51,12 @@ export const RTLDiff: Story = {
   ...withRTLDiff({
     i18n: {
       value: {
-        ltr: 'XKQMRTBWJNFL',
-        rtl: 'خكقمرتبوجنفل',
+        en: 'XKQMRTBWJNFL',
+        ar: 'خكقمرتبوجنفل',
       },
       placeholder: {
-        ltr: 'Enter code',
-        rtl: 'أدخل الرمز',
+        en: 'Enter code',
+        ar: 'أدخل الرمز',
       },
     },
   }),

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

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { userEvent, within } from 'storybook/test';
 
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import Button from '../../Button';
 import Tooltip from '../Tooltip';
 
@@ -21,41 +21,84 @@ const hoverTrigger = async ({ canvasElement }: { canvasElement: HTMLElement }) =
 };
 
 export const PositionTop: Story = {
-  render: () => (
-    <Tooltip label="Top positioned tooltip" position="top">
-      <Button>Top</Button>
-    </Tooltip>
-  ),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Tooltip label={i18n.tooltip} position="top">
+        <Button>{i18n.trigger}</Button>
+      </Tooltip>
+    );
+  },
   play: hoverTrigger,
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center', vAlign: 'bottom' }),
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    hAlign: 'center',
+    vAlign: 'bottom',
+    i18n: {
+      tooltip: { en: 'Top positioned tooltip', ar: 'تلميح في الأعلى' },
+      trigger: { en: 'Top', ar: 'أعلى' },
+    },
+  }),
 };
 
 export const PositionBottom: Story = {
-  render: () => (
-    <Tooltip label="Bottom positioned tooltip" position="bottom">
-      <Button>Bottom</Button>
-    </Tooltip>
-  ),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Tooltip label={i18n.tooltip} position="bottom">
+        <Button>{i18n.trigger}</Button>
+      </Tooltip>
+    );
+  },
   play: hoverTrigger,
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center' }),
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    hAlign: 'center',
+    i18n: {
+      tooltip: { en: 'Bottom positioned tooltip', ar: 'تلميح في الأسفل' },
+      trigger: { en: 'Bottom', ar: 'أسفل' },
+    },
+  }),
 };
 
 export const PositionRight: Story = {
-  render: () => (
-    <Tooltip label="Right positioned tooltip" position="right">
-      <Button>Right</Button>
-    </Tooltip>
-  ),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Tooltip label={i18n.tooltip} position="right">
+        <Button>{i18n.trigger}</Button>
+      </Tooltip>
+    );
+  },
   play: hoverTrigger,
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'left', vAlign: 'center' }),
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    hAlign: 'left',
+    vAlign: 'center',
+    i18n: {
+      tooltip: { en: 'Right positioned tooltip', ar: 'تلميح على اليمين' },
+      trigger: { en: 'Right', ar: 'يمين' },
+    },
+  }),
 };
 
 export const PositionLeft: Story = {
-  render: () => (
-    <Tooltip label="Left positioned tooltip" position="left">
-      <Button>Left</Button>
-    </Tooltip>
-  ),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Tooltip label={i18n.tooltip} position="left">
+        <Button>{i18n.trigger}</Button>
+      </Tooltip>
+    );
+  },
   play: hoverTrigger,
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'right', vAlign: 'center' }),
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    hAlign: 'right',
+    vAlign: 'center',
+    i18n: {
+      tooltip: { en: 'Left positioned tooltip', ar: 'تلميح على اليسار' },
+      trigger: { en: 'Left', ar: 'يسار' },
+    },
+  }),
 };

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

@@ -19,10 +19,10 @@ export default {
 type Story = StoryObj<typeof Typeahead>;
 
 const localisedStrings = {
-  gbp: { ltr: 'British pound', rtl: 'جنيه إسترليني' },
-  eur: { ltr: 'Euro', rtl: 'يورو' },
-  usd: { ltr: 'US Dollar', rtl: 'دولار أمريكي' },
-  placeholder: { ltr: 'Search currencies…', rtl: 'ابحث عن العملات...' },
+  gbp: { en: 'British pound', ar: 'الجنيه الإسترليني' },
+  eur: { en: 'Euro', ar: 'اليورو' },
+  usd: { en: 'US Dollar', ar: 'الدولار الأمريكي' },
+  placeholder: { en: 'Search currencies…', ar: 'ابحث عن العملات...' },
 };
 
 export const TriggerVariants: Story = {