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

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

@@ -1,6 +1,6 @@
 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 ExpressiveMoneyInput from '..';
 import { Rewards } from '@transferwise/icons';
 
@@ -24,95 +24,128 @@ const currencySelectorOptions = [
 ];
 
 export const TriggerVariants: Story = {
-  render: () => (
-    <>
-      {/* Currency selector on leading side — flips in RTL */}
-      <ExpressiveMoneyInput
-        label="You send"
-        currency="GBP"
-        amount={1234.56}
-        currencySelector={{
-          options: currencySelectorOptions,
-          onChange: fn(),
-          onSearchChange: fn(),
-          onOpen: fn(),
-        }}
-        onAmountChange={fn()}
-      />
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        {/* Currency selector on leading side — flips in RTL */}
+        <ExpressiveMoneyInput
+          label={i18n.youSend}
+          currency="GBP"
+          amount={1234.56}
+          currencySelector={{
+            options: currencySelectorOptions,
+            onChange: fn(),
+            onSearchChange: fn(),
+            onOpen: fn(),
+          }}
+          onAmountChange={fn()}
+        />
 
-      {/* Chevron on trailing side — flips in RTL */}
-      <ExpressiveMoneyInput
-        label="You send"
-        currency="EUR"
-        amount={0}
-        showChevron
-        currencySelector={{
-          options: currencySelectorOptions,
-          onChange: fn(),
-          onSearchChange: fn(),
-          onOpen: fn(),
-        }}
-        onAmountChange={fn()}
-      />
+        {/* Chevron on trailing side — flips in RTL */}
+        <ExpressiveMoneyInput
+          label={i18n.youSend}
+          currency="EUR"
+          amount={0}
+          showChevron
+          currencySelector={{
+            options: currencySelectorOptions,
+            onChange: fn(),
+            onSearchChange: fn(),
+            onOpen: fn(),
+          }}
+          onAmountChange={fn()}
+        />
 
-      {/* InlinePrompt with media icon — icon on leading end of prompt */}
-      <ExpressiveMoneyInput
-        label="You send"
-        currency="USD"
-        amount={500}
-        currencySelector={{
-          options: currencySelectorOptions,
-          onChange: fn(),
-          onSearchChange: fn(),
-          onOpen: fn(),
-        }}
-        inlinePrompt={{
-          message: 'Great rate available',
-          sentiment: 'positive',
-          media: <Rewards />,
-        }}
-        onAmountChange={fn()}
-      />
+        {/* InlinePrompt with media icon — icon on leading end of prompt */}
+        <ExpressiveMoneyInput
+          label={i18n.youSend}
+          currency="USD"
+          amount={500}
+          currencySelector={{
+            options: currencySelectorOptions,
+            onChange: fn(),
+            onSearchChange: fn(),
+            onOpen: fn(),
+          }}
+          inlinePrompt={{
+            message: i18n.greatRate,
+            sentiment: 'positive',
+            media: <Rewards />,
+          }}
+          onAmountChange={fn()}
+        />
 
-      {/* Secondary avatar addon in currency selector */}
+        {/* Secondary avatar addon in currency selector */}
+        <ExpressiveMoneyInput
+          label={i18n.youSend}
+          currency="GBP"
+          amount={750}
+          currencySelector={{
+            options: currencySelectorOptions,
+            addons: [{ profileName: i18n.profileName }],
+            onChange: fn(),
+            onSearchChange: fn(),
+            onOpen: fn(),
+          }}
+          onAmountChange={fn()}
+        />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    width: 'stretch',
+    i18n: {
+      youSend: { en: 'You send', ar: 'أنت ترسل' },
+      greatRate: { en: 'Great rate available', ar: 'سعر تحويل رائع متاح' },
+      profileName: { en: 'Mikkael Jordan', ar: 'ميكائيل جوردان' },
+    },
+  }),
+};
+
+export const OpenDropdown: Story = {
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
       <ExpressiveMoneyInput
-        label="You send"
+        label={i18n.youSend}
         currency="GBP"
-        amount={750}
+        amount={1234.56}
         currencySelector={{
-          options: currencySelectorOptions,
-          addons: [{ profileName: 'Mikkael Jordan' }],
+          options: [
+            {
+              title: i18n.popularGroup,
+              currencies: [
+                { code: 'GBP', label: i18n.britishPound, keywords: ['british'] },
+                { code: 'EUR', label: i18n.euro, keywords: ['euro'] },
+                { code: 'USD', label: i18n.usDollar, keywords: ['dollar'] },
+              ],
+            },
+          ],
           onChange: fn(),
           onSearchChange: fn(),
           onOpen: fn(),
         }}
         onAmountChange={fn()}
       />
-    </>
-  ),
-  ...withRTLDiff({ renderAs: 'iframe', width: 'stretch' }),
-};
-
-export const OpenDropdown: Story = {
-  render: () => (
-    <ExpressiveMoneyInput
-      label="You send"
-      currency="GBP"
-      amount={1234.56}
-      currencySelector={{
-        options: currencySelectorOptions,
-        onChange: fn(),
-        onSearchChange: fn(),
-        onOpen: fn(),
-      }}
-      onAmountChange={fn()}
-    />
-  ),
+    );
+  },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const trigger = canvas.queryByRole('combobox');
     if (!trigger) return;
     await userEvent.click(trigger);
   },
-  ...withRTLDiff({ renderAs: 'iframe', width: '80%' }),
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    width: '80%',
+    i18n: {
+      youSend: { en: 'You send', ar: 'أنت ترسل' },
+      popularGroup: { en: 'Popular', ar: 'الأكثر شيوعًا' },
+      britishPound: { en: 'British Pound', ar: 'الجنيه الإسترليني' },
+      euro: { en: 'Euro', ar: 'اليورو' },
+      usDollar: { en: 'US Dollar', ar: 'الدولار الأمريكي' },
+    },
+  }),
 };

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

@@ -121,7 +121,7 @@ export const RTLDiff: Story = {
       },
       value_ar: {
         en: 'localised value',
-        ar: 'قيمة مُكيَّفة محلياً',
+        ar: 'قيمة مُكيَّفة محليًا',
       },
       requiredLabel: { en: 'Required field', ar: 'حقل مطلوب' },
       optionalLabel: { en: 'Optional field', ar: 'حقل اختياري' },

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

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import AvatarView from '../../AvatarView';
 import { ProfileType } from '../../common';
 import Logo from '../../Logo';
@@ -9,13 +9,6 @@ import FlowNavigation from '../FlowNavigation';
 
 const noop = () => {};
 
-const steps = [
-  { label: 'Amount', hoverLabel: '100 GBP', onClick: noop },
-  { label: 'You', hoverLabel: 'Elena Durante', onClick: noop },
-  { label: 'Review', onClick: noop },
-  { label: 'Pay', onClick: noop },
-];
-
 const meta: Meta<typeof FlowNavigation> = {
   component: FlowNavigation,
   title: 'Navigation/FlowNavigation/Tests/RTL Diff',
@@ -29,50 +22,87 @@ export default meta;
 type Story = StoryObj<typeof FlowNavigation>;
 
 export const Desktop: Story = {
-  render: () => (
-    <>
-      <FlowNavigation
-        activeStep={2}
-        avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
-        logo={<Logo />}
-        steps={steps}
-        onClose={noop}
-        onGoBack={noop}
-      />
-      <FlowNavigation
-        avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
-        logo={<Logo />}
-        onClose={noop}
-      />
-      <FlowNavigation
-        done
-        avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
-        logo={<Logo />}
-        steps={steps}
-        onClose={noop}
-      />
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    const steps = [
+      { label: i18n.amount, hoverLabel: i18n.amountValue, onClick: noop },
+      { label: i18n.you, hoverLabel: i18n.recipientName, onClick: noop },
+      { label: i18n.review, onClick: noop },
+      { label: i18n.pay, onClick: noop },
+    ];
+    return (
+      <>
+        <FlowNavigation
+          activeStep={2}
+          avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
+          logo={<Logo />}
+          steps={steps}
+          onClose={noop}
+          onGoBack={noop}
+        />
+        <FlowNavigation
+          avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
+          logo={<Logo />}
+          onClose={noop}
+        />
+        <FlowNavigation
+          done
+          avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
+          logo={<Logo />}
+          steps={steps}
+          onClose={noop}
+        />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      amount: { en: 'Amount', ar: 'المبلغ' },
+      amountValue: { en: '100 GBP', ar: '100 جنيه إسترليني' },
+      you: { en: 'You', ar: 'بياناتك' },
+      recipientName: { en: 'Elena Durante', ar: 'إيلينا دورانتي' },
+      review: { en: 'Review', ar: 'المراجعة' },
+      pay: { en: 'Pay', ar: 'الدفع' },
+    },
+  }),
 };
 
 export const Mobile: Story = {
-  render: () => (
-    <>
-      <FlowNavigation
-        activeStep={2}
-        avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
-        logo={<Logo />}
-        steps={steps}
-        onClose={noop}
-        onGoBack={noop}
-      />
-      <FlowNavigation
-        avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
-        logo={<Logo />}
-        onClose={noop}
-      />
-    </>
-  ),
-  ...withRTLDiff({ viewport: 'largeMobile' }),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    const steps = [
+      { label: i18n.amount, hoverLabel: i18n.amountValue, onClick: noop },
+      { label: i18n.you, hoverLabel: i18n.recipientName, onClick: noop },
+      { label: i18n.review, onClick: noop },
+      { label: i18n.pay, onClick: noop },
+    ];
+    return (
+      <>
+        <FlowNavigation
+          activeStep={2}
+          avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
+          logo={<Logo />}
+          steps={steps}
+          onClose={noop}
+          onGoBack={noop}
+        />
+        <FlowNavigation
+          avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
+          logo={<Logo />}
+          onClose={noop}
+        />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    viewport: 'largeMobile',
+    i18n: {
+      amount: { en: 'Amount', ar: 'المبلغ' },
+      amountValue: { en: '100 GBP', ar: '100 جنيه إسترليني' },
+      you: { en: 'You', ar: 'بياناتك' },
+      recipientName: { en: 'Elena Durante', ar: 'إيلينا دورانتي' },
+      review: { en: 'Review', ar: 'المراجعة' },
+      pay: { en: 'Pay', ar: 'الدفع' },
+    },
+  }),
 };

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

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import Header, { type HeaderProps } from '../Header';
 import { withVariantConfig } from '../../../.storybook/helpers';
 
@@ -131,21 +131,33 @@ export const AllVariants: Story = {
  * difference.
  */
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <Header title="Group level without action" level="group" />
-      <Header
-        title="Group level with action"
-        level="group"
-        action={{ 'aria-label': 'View all', text: 'View all', href: '#' }}
-      />
-      <Header title="Section level without action" level="section" />
-      <Header
-        title="Section level with action"
-        level="section"
-        action={{ 'aria-label': 'Learn more', text: 'Learn more', href: '#' }}
-      />
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <Header title={i18n.groupWithoutAction} level="group" />
+        <Header
+          title={i18n.groupWithAction}
+          level="group"
+          action={{ 'aria-label': i18n.viewAll, text: i18n.viewAll, href: '#' }}
+        />
+        <Header title={i18n.sectionWithoutAction} level="section" />
+        <Header
+          title={i18n.sectionWithAction}
+          level="section"
+          action={{ 'aria-label': i18n.learnMore, text: i18n.learnMore, href: '#' }}
+        />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      groupWithoutAction: { en: 'Group level without action', ar: 'مستوى المجموعة بدون إجراء' },
+      groupWithAction: { en: 'Group level with action', ar: 'مستوى المجموعة مع إجراء' },
+      sectionWithoutAction: { en: 'Section level without action', ar: 'مستوى القسم بدون إجراء' },
+      sectionWithAction: { en: 'Section level with action', ar: 'مستوى القسم مع إجراء' },
+      viewAll: { en: 'View all', ar: 'عرض الكل' },
+      learnMore: { en: 'Learn more', ar: 'اعرف المزيد' },
+    },
+  }),
 };

package/src/Info/_stories/Info.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 Info from '..';
 
 export default {
@@ -20,70 +20,144 @@ const openInfo = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
 };
 
 export const PlacementTop: Story = {
-  render: () => (
-    <Info
-      aria-label="Info trigger"
-      title="Information"
-      content="This is some descriptive content inside the info component."
-      presentation="POPOVER"
-      preferredPlacement="top"
-    />
-  ),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Info
+        aria-label={i18n.trigger}
+        title={i18n.title}
+        content={i18n.content}
+        presentation="POPOVER"
+        preferredPlacement="top"
+      />
+    );
+  },
   play: openInfo,
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center', vAlign: 'bottom' }),
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    hAlign: 'center',
+    vAlign: 'bottom',
+    i18n: {
+      trigger: { en: 'Info trigger', ar: 'زر المعلومات' },
+      title: { en: 'Information', ar: 'معلومات' },
+      content: {
+        en: 'This is some descriptive content inside the info component.',
+        ar: 'هذا محتوى وصفي داخل مكوّن المعلومات.',
+      },
+    },
+  }),
 };
 
 export const PlacementRight: Story = {
-  render: () => (
-    <Info
-      aria-label="Info trigger"
-      title="Information"
-      content="This is some descriptive content inside the info component."
-      presentation="POPOVER"
-      preferredPlacement="right"
-    />
-  ),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Info
+        aria-label={i18n.trigger}
+        title={i18n.title}
+        content={i18n.content}
+        presentation="POPOVER"
+        preferredPlacement="right"
+      />
+    );
+  },
   play: openInfo,
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'left', vAlign: 'center' }),
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    hAlign: 'left',
+    vAlign: 'center',
+    i18n: {
+      trigger: { en: 'Info trigger', ar: 'زر المعلومات' },
+      title: { en: 'Information', ar: 'معلومات' },
+      content: {
+        en: 'This is some descriptive content inside the info component.',
+        ar: 'هذا محتوى وصفي داخل مكوّن المعلومات.',
+      },
+    },
+  }),
 };
 
 export const PlacementBottom: Story = {
-  render: () => (
-    <Info
-      aria-label="Info trigger"
-      title="Information"
-      content="This is some descriptive content inside the info component."
-      presentation="POPOVER"
-      preferredPlacement="bottom"
-    />
-  ),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Info
+        aria-label={i18n.trigger}
+        title={i18n.title}
+        content={i18n.content}
+        presentation="POPOVER"
+        preferredPlacement="bottom"
+      />
+    );
+  },
   play: openInfo,
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center' }),
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    hAlign: 'center',
+    i18n: {
+      trigger: { en: 'Info trigger', ar: 'زر المعلومات' },
+      title: { en: 'Information', ar: 'معلومات' },
+      content: {
+        en: 'This is some descriptive content inside the info component.',
+        ar: 'هذا محتوى وصفي داخل مكوّن المعلومات.',
+      },
+    },
+  }),
 };
 
 export const PlacementLeft: Story = {
-  render: () => (
-    <Info
-      aria-label="Info trigger"
-      title="Information"
-      content="This is some descriptive content inside the info component."
-      presentation="POPOVER"
-      preferredPlacement="left"
-    />
-  ),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Info
+        aria-label={i18n.trigger}
+        title={i18n.title}
+        content={i18n.content}
+        presentation="POPOVER"
+        preferredPlacement="left"
+      />
+    );
+  },
   play: openInfo,
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'right', vAlign: 'center' }),
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    hAlign: 'right',
+    vAlign: 'center',
+    i18n: {
+      trigger: { en: 'Info trigger', ar: 'زر المعلومات' },
+      title: { en: 'Information', ar: 'معلومات' },
+      content: {
+        en: 'This is some descriptive content inside the info component.',
+        ar: 'هذا محتوى وصفي داخل مكوّن المعلومات.',
+      },
+    },
+  }),
 };
 
 export const Modal: Story = {
-  render: () => (
-    <Info
-      aria-label="Info trigger"
-      title="Information"
-      content="This is some descriptive content inside the info component."
-      presentation="MODAL"
-    />
-  ),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Info
+        aria-label={i18n.trigger}
+        title={i18n.title}
+        content={i18n.content}
+        presentation="MODAL"
+      />
+    );
+  },
   play: openInfo,
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center', vAlign: 'center' }),
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    hAlign: 'center',
+    vAlign: 'center',
+    i18n: {
+      trigger: { en: 'Info trigger', ar: 'زر المعلومات' },
+      title: { en: 'Information', ar: 'معلومات' },
+      content: {
+        en: 'This is some descriptive content inside the info component.',
+        ar: 'هذا محتوى وصفي داخل مكوّن المعلومات.',
+      },
+    },
+  }),
 };

package/src/Inputs/InputGroup/_stories/InputGroup.test.story.tsx

@@ -39,7 +39,7 @@ export const RTLDiff: Story = {
           addonEnd={{
             content: (
               <Button v2 size="sm">
-                Copy
+                {i18n.copy}
               </Button>
             ),
             interactive: true,
@@ -57,7 +57,7 @@ export const RTLDiff: Story = {
           addonEnd={{
             content: (
               <Button v2 size="sm">
-                Clear
+                {i18n.clear}
               </Button>
             ),
             interactive: true,
@@ -74,6 +74,8 @@ export const RTLDiff: Story = {
       placeholder_both: { en: 'addonStart and addonEnd', ar: 'البادئة والنهاية' },
       placeholder_start: { en: 'addonStart only', ar: 'البادئة فقط' },
       placeholder_end: { en: 'addonEnd only', ar: 'النهاية فقط' },
+      copy: { en: 'Copy', ar: 'نسخ' },
+      clear: { en: 'Clear', ar: 'مسح' },
     },
   }),
 };