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

package/src/Popover/_stories/Popover.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 { Position } from '../../common';
 import Popover from '..';
@@ -22,65 +22,108 @@ const clickTrigger = async ({ canvasElement }: { canvasElement: HTMLElement }) =
 };
 
 export const PlacementRight: Story = {
-  render: () => (
-    <Popover
-      preferredPlacement={Position.RIGHT}
-      title="Guaranteed rate"
-      content="You'll get this rate as long as we receive your 10 EUR within the next 51 hours."
-    >
-      <Button size="sm" v2>
-        right
-      </Button>
-    </Popover>
-  ),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Popover preferredPlacement={Position.RIGHT} title={i18n.title} content={i18n.content}>
+        <Button size="sm" v2>
+          {i18n.trigger}
+        </Button>
+      </Popover>
+    );
+  },
   play: clickTrigger,
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'left', vAlign: 'center' }),
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    hAlign: 'left',
+    vAlign: 'center',
+    i18n: {
+      title: { en: 'Guaranteed rate', ar: 'سعر مضمون' },
+      content: {
+        en: "You'll get this rate as long as we receive your 10 EUR within the next 51 hours.",
+        ar: 'ستحصل على هذا السعر إذا استلمنا مبلغ 10 يورو خلال 51 ساعة القادمة.',
+      },
+      trigger: { en: 'right', ar: 'اليمين' },
+    },
+  }),
 };
 
 export const PlacementLeft: Story = {
-  render: () => (
-    <Popover
-      preferredPlacement={Position.LEFT}
-      title="Guaranteed rate"
-      content="You'll get this rate as long as we receive your 10 EUR within the next 51 hours."
-    >
-      <Button size="sm" v2>
-        left
-      </Button>
-    </Popover>
-  ),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Popover preferredPlacement={Position.LEFT} title={i18n.title} content={i18n.content}>
+        <Button size="sm" v2>
+          {i18n.trigger}
+        </Button>
+      </Popover>
+    );
+  },
   play: clickTrigger,
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'right', vAlign: 'center' }),
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    hAlign: 'right',
+    vAlign: 'center',
+    i18n: {
+      title: { en: 'Guaranteed rate', ar: 'سعر مضمون' },
+      content: {
+        en: "You'll get this rate as long as we receive your 10 EUR within the next 51 hours.",
+        ar: 'ستحصل على هذا السعر إذا استلمنا مبلغ 10 يورو خلال 51 ساعة القادمة.',
+      },
+      trigger: { en: 'left', ar: 'اليسار' },
+    },
+  }),
 };
 
 export const PlacementTop: Story = {
-  render: () => (
-    <Popover
-      preferredPlacement={Position.TOP}
-      title="Guaranteed rate"
-      content="You'll get this rate as long as we receive your 10 EUR within the next 51 hours."
-    >
-      <Button size="sm" v2>
-        top
-      </Button>
-    </Popover>
-  ),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Popover preferredPlacement={Position.TOP} title={i18n.title} content={i18n.content}>
+        <Button size="sm" v2>
+          {i18n.trigger}
+        </Button>
+      </Popover>
+    );
+  },
   play: clickTrigger,
-  ...withRTLDiff({ renderAs: 'iframe', vAlign: 'bottom', hAlign: 'center' }),
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    vAlign: 'bottom',
+    hAlign: 'center',
+    i18n: {
+      title: { en: 'Guaranteed rate', ar: 'سعر مضمون' },
+      content: {
+        en: "You'll get this rate as long as we receive your 10 EUR within the next 51 hours.",
+        ar: 'ستحصل على هذا السعر إذا استلمنا مبلغ 10 يورو خلال 51 ساعة القادمة.',
+      },
+      trigger: { en: 'top', ar: 'أعلى' },
+    },
+  }),
 };
 
 export const PlacementBottom: Story = {
-  render: () => (
-    <Popover
-      preferredPlacement={Position.BOTTOM}
-      title="Guaranteed rate"
-      content="You'll get this rate as long as we receive your 10 EUR within the next 51 hours."
-    >
-      <Button size="sm" v2>
-        bottom
-      </Button>
-    </Popover>
-  ),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Popover preferredPlacement={Position.BOTTOM} title={i18n.title} content={i18n.content}>
+        <Button size="sm" v2>
+          {i18n.trigger}
+        </Button>
+      </Popover>
+    );
+  },
   play: clickTrigger,
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center' }),
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    hAlign: 'center',
+    i18n: {
+      title: { en: 'Guaranteed rate', ar: 'سعر مضمون' },
+      content: {
+        en: "You'll get this rate as long as we receive your 10 EUR within the next 51 hours.",
+        ar: 'ستحصل على هذا السعر إذا استلمنا مبلغ 10 يورو خلال 51 ساعة القادمة.',
+      },
+      trigger: { en: 'bottom', ar: 'أسفل' },
+    },
+  }),
 };

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import PromoCard from '..';
 
 export default {
@@ -11,32 +11,56 @@ export default {
 type Story = StoryObj<typeof PromoCard>;
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <PromoCard
-        title="Link with arrow"
-        description="Indicator arrow icon flips in RTL."
-        href="#"
-        indicatorLabel="Free"
-        imageSource="https://wise.com/web-art/assets/illustrations/digital-card-2-medium@2x.webp"
-      />
-      <PromoCard
-        title="Checkbox checked"
-        description="Check icon positioned at the end."
-        type="checkbox"
-        defaultChecked
-        indicatorLabel="Selected"
-        imageSource="https://wise.com/web-art/assets/illustrations/digital-card-2-medium@2x.webp"
-      />
-      <PromoCard
-        title="Download indicator"
-        description="Download icon in the indicator area."
-        href="#"
-        download="file.pdf"
-        indicatorLabel="Download"
-        imageSource="https://wise.com/web-art/assets/illustrations/digital-card-2-medium@2x.webp"
-      />
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <PromoCard
+          title={i18n.linkTitle}
+          description={i18n.linkDescription}
+          href="#"
+          indicatorLabel={i18n.linkIndicator}
+          imageSource="https://wise.com/web-art/assets/illustrations/digital-card-2-medium@2x.webp"
+        />
+        <PromoCard
+          title={i18n.checkboxTitle}
+          description={i18n.checkboxDescription}
+          type="checkbox"
+          defaultChecked
+          indicatorLabel={i18n.checkboxIndicator}
+          imageSource="https://wise.com/web-art/assets/illustrations/digital-card-2-medium@2x.webp"
+        />
+        <PromoCard
+          title={i18n.downloadTitle}
+          description={i18n.downloadDescription}
+          href="#"
+          download="file.pdf"
+          indicatorLabel={i18n.downloadIndicator}
+          imageSource="https://wise.com/web-art/assets/illustrations/digital-card-2-medium@2x.webp"
+        />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      linkTitle: { en: 'Link with arrow', ar: 'رابط مع سهم' },
+      linkDescription: {
+        en: 'Indicator arrow icon flips in RTL.',
+        ar: 'ينعكس سهم المؤشر في الاتجاه من اليمين إلى اليسار.',
+      },
+      linkIndicator: { en: 'Free', ar: 'مجانًا' },
+      checkboxTitle: { en: 'Checkbox checked', ar: 'مربع اختيار محدد' },
+      checkboxDescription: {
+        en: 'Check icon positioned at the end.',
+        ar: 'أيقونة الاختيار في نهاية البطاقة.',
+      },
+      checkboxIndicator: { en: 'Selected', ar: 'محدد' },
+      downloadTitle: { en: 'Download indicator', ar: 'مؤشر التنزيل' },
+      downloadDescription: {
+        en: 'Download icon in the indicator area.',
+        ar: 'أيقونة التنزيل في منطقة المؤشر.',
+      },
+      downloadIndicator: { en: 'Download', ar: 'تنزيل' },
+    },
+  }),
 };

package/src/PromoCard/_stories/PromoCardGroup.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 PromoCard from '../PromoCard';
 import PromoCardGroup from '../CardGroup/PromoCardGroup';
 
@@ -13,39 +13,63 @@ export default {
 type Story = StoryObj<typeof PromoCardGroup>;
 
 export const RTLDiff: Story = {
-  render: () => (
-    <PromoCardGroup>
-      <PromoCard
-        title="Digital"
-        description="A card that lives online and works anywhere."
-        type="radio"
-        value="digital"
-        id="digital"
-        indicatorLabel="Free"
-        imageAlt=""
-        imageSource="https://wise.com/web-art/assets/illustrations/digital-card-2-medium@2x.webp"
-      />
-      <PromoCard
-        title="Standard"
-        description="Spend and withdraw money around the world."
-        type="radio"
-        value="standard"
-        id="standard"
-        indicatorLabel="7 GBP"
-        imageAlt=""
-        imageSource="https://wise.com/web-art/assets/illustrations/personal-card-medium@2x.webp"
-      />
-      <PromoCard
-        title="Eco"
-        description="A debit card made to biodegrade."
-        type="radio"
-        value="eco"
-        id="eco"
-        indicatorLabel="9 GBP"
-        imageAlt=""
-        imageSource="https://wise.com/web-art/assets/illustrations/eco-card-medium@2x.webp"
-      />
-    </PromoCardGroup>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <PromoCardGroup>
+        <PromoCard
+          title={i18n.digitalTitle}
+          description={i18n.digitalDescription}
+          type="radio"
+          value="digital"
+          id="digital"
+          indicatorLabel={i18n.digitalIndicator}
+          imageAlt=""
+          imageSource="https://wise.com/web-art/assets/illustrations/digital-card-2-medium@2x.webp"
+        />
+        <PromoCard
+          title={i18n.standardTitle}
+          description={i18n.standardDescription}
+          type="radio"
+          value="standard"
+          id="standard"
+          indicatorLabel={i18n.standardIndicator}
+          imageAlt=""
+          imageSource="https://wise.com/web-art/assets/illustrations/personal-card-medium@2x.webp"
+        />
+        <PromoCard
+          title={i18n.ecoTitle}
+          description={i18n.ecoDescription}
+          type="radio"
+          value="eco"
+          id="eco"
+          indicatorLabel={i18n.ecoIndicator}
+          imageAlt=""
+          imageSource="https://wise.com/web-art/assets/illustrations/eco-card-medium@2x.webp"
+        />
+      </PromoCardGroup>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      digitalTitle: { en: 'Digital', ar: 'رقمية' },
+      digitalDescription: {
+        en: 'A card that lives online and works anywhere.',
+        ar: 'بطاقة تعمل عبر الإنترنت في أي مكان.',
+      },
+      digitalIndicator: { en: 'Free', ar: 'مجانًا' },
+      standardTitle: { en: 'Standard', ar: 'عادية' },
+      standardDescription: {
+        en: 'Spend and withdraw money around the world.',
+        ar: 'أنفق أموالك واسحبها في جميع أنحاء العالم.',
+      },
+      standardIndicator: { en: '7 GBP', ar: '7 جنيه إسترليني' },
+      ecoTitle: { en: 'Eco', ar: 'صديقة للبيئة' },
+      ecoDescription: {
+        en: 'A debit card made to biodegrade.',
+        ar: 'بطاقة خصم مصممة لتتحلل طبيعيًا.',
+      },
+      ecoIndicator: { en: '9 GBP', ar: '9 جنيه إسترليني' },
+    },
+  }),
 };

package/src/Prompt/ActionPrompt/_stories/ActionPrompt.test.story.tsx

@@ -6,7 +6,7 @@ import { ActionPrompt } from '../ActionPrompt';
 import { Body, Title } from '../../..';
 import { StoryObj } from '@storybook/react-webpack5';
 import { allModes } from '../../../../.storybook/modes';
-import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
 import { withVariantConfig } from '../../../../.storybook/helpers';
 import { lorem10 } from '../../../test-utils';
 
@@ -275,41 +275,77 @@ export const Responsiveness: Story = {
 };
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <ActionPrompt
-        title="Default status icon"
-        description="No media provided, uses default sentiment icon."
-        action={{ label: 'Continue' }}
-      />
-      <ActionPrompt
-        title="Custom image"
-        description="Media with a custom image source."
-        media={{ imgSrc: '../../wise-card.svg' }}
-        action={{ label: 'View card' }}
-      />
-      <ActionPrompt
-        title="Avatar with icon"
-        description="Media with an avatar containing a custom icon."
-        media={{ avatar: { asset: <Bank /> } }}
-        action={{ label: 'Connect bank' }}
-      />
-      <ActionPrompt
-        title="Primary and secondary actions"
-        description="Both action buttons present."
-        media={{ avatar: { asset: <Bank /> } }}
-        action={{ label: 'Confirm' }}
-        actionSecondary={{ label: 'Cancel' }}
-      />
-      <ActionPrompt
-        title="Dismissible with two actions"
-        description="Close button and both action buttons."
-        media={{ avatar: { asset: <Bank /> } }}
-        action={{ label: 'Confirm' }}
-        actionSecondary={{ label: 'Cancel' }}
-        onDismiss={() => {}}
-      />
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <ActionPrompt
+          title={i18n.defaultIconTitle}
+          description={i18n.defaultIconDescription}
+          action={{ label: i18n.continueAction }}
+        />
+        <ActionPrompt
+          title={i18n.customImageTitle}
+          description={i18n.customImageDescription}
+          media={{ imgSrc: '../../wise-card.svg' }}
+          action={{ label: i18n.viewCardAction }}
+        />
+        <ActionPrompt
+          title={i18n.avatarIconTitle}
+          description={i18n.avatarIconDescription}
+          media={{ avatar: { asset: <Bank /> } }}
+          action={{ label: i18n.connectBankAction }}
+        />
+        <ActionPrompt
+          title={i18n.twoActionsTitle}
+          description={i18n.twoActionsDescription}
+          media={{ avatar: { asset: <Bank /> } }}
+          action={{ label: i18n.confirmAction }}
+          actionSecondary={{ label: i18n.cancelAction }}
+        />
+        <ActionPrompt
+          title={i18n.dismissibleTitle}
+          description={i18n.dismissibleDescription}
+          media={{ avatar: { asset: <Bank /> } }}
+          action={{ label: i18n.confirmAction }}
+          actionSecondary={{ label: i18n.cancelAction }}
+          onDismiss={() => {}}
+        />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      defaultIconTitle: { en: 'Default status icon', ar: 'أيقونة الحالة الافتراضية' },
+      defaultIconDescription: {
+        en: 'No media provided, uses default sentiment icon.',
+        ar: 'لا توجد وسائط، يتم استخدام أيقونة الحالة الافتراضية.',
+      },
+      continueAction: { en: 'Continue', ar: 'متابعة' },
+      customImageTitle: { en: 'Custom image', ar: 'صورة مخصصة' },
+      customImageDescription: {
+        en: 'Media with a custom image source.',
+        ar: 'وسائط مع مصدر صورة مخصص.',
+      },
+      viewCardAction: { en: 'View card', ar: 'عرض البطاقة' },
+      avatarIconTitle: { en: 'Avatar with icon', ar: 'صورة رمزية مع أيقونة' },
+      avatarIconDescription: {
+        en: 'Media with an avatar containing a custom icon.',
+        ar: 'وسائط مع صورة رمزية تحتوي على أيقونة مخصصة.',
+      },
+      connectBankAction: { en: 'Connect bank', ar: 'ربط البنك' },
+      twoActionsTitle: { en: 'Primary and secondary actions', ar: 'إجراءات أساسية وثانوية' },
+      twoActionsDescription: {
+        en: 'Both action buttons present.',
+        ar: 'زرّا الإجراء موجودان معًا.',
+      },
+      confirmAction: { en: 'Confirm', ar: 'تأكيد' },
+      cancelAction: { en: 'Cancel', ar: 'إلغاء' },
+      dismissibleTitle: { en: 'Dismissible with two actions', ar: 'قابل للإغلاق مع إجراءين' },
+      dismissibleDescription: {
+        en: 'Close button and both action buttons.',
+        ar: 'زر الإغلاق وزرّا الإجراء.',
+      },
+    },
+  }),
 };

package/src/Prompt/CriticalBanner/_stories/CriticalBanner.test.story.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
 import { Bank } from '@transferwise/icons';
 import Button from '../../../Button';
-import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
 import { withVariantConfig } from '../../../../.storybook/helpers';
 import { CriticalBanner } from '../CriticalBanner';
 
@@ -482,34 +482,71 @@ export const UncontrolledStateInteraction: Story = {
 };
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <CriticalBanner title="Title only" description="Description without actions or media." />
-      <CriticalBanner
-        title="With primary action"
-        description="Banner with a single action button."
-        action={{ label: 'Verify now' }}
-      />
-      <CriticalBanner
-        title="With both actions"
-        description="Banner with primary and secondary actions."
-        action={{ label: 'Verify now' }}
-        actionSecondary={{ label: 'Learn more' }}
-      />
-      <CriticalBanner
-        title="With media image"
-        description="Banner with a custom image."
-        media={{ imgSrc: '../../wise-card.svg', 'aria-label': 'Wise card' }}
-        action={{ label: 'Take action' }}
-      />
-      <CriticalBanner
-        title="With avatar media"
-        description="Banner with an avatar icon."
-        media={{ avatar: { asset: <Bank /> } }}
-        action={{ label: 'Connect bank' }}
-        actionSecondary={{ label: 'Learn more' }}
-      />
-    </>
-  ),
-  ...withRTLDiff({ renderAs: 'iframe' }),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <CriticalBanner title={i18n.titleOnly} description={i18n.titleOnlyDescription} />
+        <CriticalBanner
+          title={i18n.withPrimaryAction}
+          description={i18n.withPrimaryActionDescription}
+          action={{ label: i18n.verifyNow }}
+        />
+        <CriticalBanner
+          title={i18n.withBothActions}
+          description={i18n.withBothActionsDescription}
+          action={{ label: i18n.verifyNow }}
+          actionSecondary={{ label: i18n.learnMore }}
+        />
+        <CriticalBanner
+          title={i18n.withMediaImage}
+          description={i18n.withMediaImageDescription}
+          media={{ imgSrc: '../../wise-card.svg', 'aria-label': i18n.cardImage }}
+          action={{ label: i18n.takeAction }}
+        />
+        <CriticalBanner
+          title={i18n.withAvatarMedia}
+          description={i18n.withAvatarMediaDescription}
+          media={{ avatar: { asset: <Bank /> } }}
+          action={{ label: i18n.connectBank }}
+          actionSecondary={{ label: i18n.learnMore }}
+        />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    i18n: {
+      titleOnly: { en: 'Title only', ar: 'العنوان فقط' },
+      titleOnlyDescription: {
+        en: 'Description without actions or media.',
+        ar: 'وصف بدون إجراءات أو وسائط.',
+      },
+      withPrimaryAction: { en: 'With primary action', ar: 'مع إجراء رئيسي' },
+      withPrimaryActionDescription: {
+        en: 'Banner with a single action button.',
+        ar: 'لافتة تحتوي على زر إجراء واحد.',
+      },
+      withBothActions: { en: 'With both actions', ar: 'مع كلا الإجراءين' },
+      withBothActionsDescription: {
+        en: 'Banner with primary and secondary actions.',
+        ar: 'لافتة تحتوي على إجراء رئيسي وإجراء ثانوي.',
+      },
+      withMediaImage: { en: 'With media image', ar: 'مع صورة' },
+      withMediaImageDescription: {
+        en: 'Banner with a custom image.',
+        ar: 'لافتة تحتوي على صورة مخصصة.',
+      },
+      withAvatarMedia: { en: 'With avatar media', ar: 'مع صورة رمزية' },
+      withAvatarMediaDescription: {
+        en: 'Banner with an avatar icon.',
+        ar: 'لافتة تحتوي على أيقونة رمزية.',
+      },
+      verifyNow: { en: 'Verify now', ar: 'تحقّق الآن' },
+      learnMore: { en: 'Learn more', ar: 'اعرف المزيد' },
+      takeAction: { en: 'Take action', ar: 'اتخذ إجراءً' },
+      connectBank: { en: 'Connect bank', ar: 'ربط البنك' },
+      cardImage: { en: 'Wise card', ar: 'بطاقة Wise' },
+    },
+  }),
 };