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

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

@@ -5,7 +5,7 @@ import { action } from 'storybook/actions';
 import { Star } from '@transferwise/icons';
 import { InfoPrompt, type InfoPromptProps } from '../InfoPrompt';
 import { allModes } from '../../../../.storybook/modes';
-import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
 import { withVariantConfig } from '../../../../.storybook/helpers';
 
 const withComponentGrid =
@@ -556,25 +556,55 @@ export const LiveRegionDismiss: Story = {
 };
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <InfoPrompt description="Basic description only." />
-      <InfoPrompt title="With Title" description="Description with a title above it." />
-      <InfoPrompt description="Dismissible prompt." onDismiss={() => {}} />
-      <InfoPrompt
-        title="With Action"
-        description="Description with an action link below."
-        action={{ label: 'Learn more', href: '#' }}
-      />
-      <InfoPrompt description="Custom media icon." media={{ asset: <Star title="Starred" /> }} />
-      <InfoPrompt
-        title="All Options"
-        description="Title, action, dismiss, and custom media combined."
-        media={{ asset: <Star title="Starred" /> }}
-        action={{ label: 'View details', href: '#' }}
-        onDismiss={() => {}}
-      />
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <InfoPrompt description={i18n.basicDescription} />
+        <InfoPrompt title={i18n.withTitleHeading} description={i18n.withTitleDescription} />
+        <InfoPrompt description={i18n.dismissibleDescription} onDismiss={() => {}} />
+        <InfoPrompt
+          title={i18n.withActionHeading}
+          description={i18n.withActionDescription}
+          action={{ label: i18n.learnMore, href: '#' }}
+        />
+        <InfoPrompt
+          description={i18n.customMediaDescription}
+          media={{ asset: <Star title={i18n.starredMedia} /> }}
+        />
+        <InfoPrompt
+          title={i18n.allOptionsHeading}
+          description={i18n.allOptionsDescription}
+          media={{ asset: <Star title={i18n.starredMedia} /> }}
+          action={{ label: i18n.viewDetails, href: '#' }}
+          onDismiss={() => {}}
+        />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      basicDescription: { en: 'Basic description only.', ar: 'الوصف الأساسي فقط.' },
+      withTitleHeading: { en: 'With Title', ar: 'مع عنوان' },
+      withTitleDescription: {
+        en: 'Description with a title above it.',
+        ar: 'وصف مع عنوان في الأعلى.',
+      },
+      dismissibleDescription: { en: 'Dismissible prompt.', ar: 'تنبيه قابل للإغلاق.' },
+      withActionHeading: { en: 'With Action', ar: 'مع إجراء' },
+      withActionDescription: {
+        en: 'Description with an action link below.',
+        ar: 'وصف مع رابط إجراء في الأسفل.',
+      },
+      learnMore: { en: 'Learn more', ar: 'اعرف المزيد' },
+      customMediaDescription: { en: 'Custom media icon.', ar: 'أيقونة وسائط مخصصة.' },
+      starredMedia: { en: 'Starred', ar: 'مميز بنجمة' },
+      allOptionsHeading: { en: 'All Options', ar: 'جميع الخيارات' },
+      allOptionsDescription: {
+        en: 'Title, action, dismiss, and custom media combined.',
+        ar: 'عنوان وإجراء وإغلاق ووسائط مخصصة مجتمعة.',
+      },
+      viewDetails: { en: 'View details', ar: 'عرض التفاصيل' },
+    },
+  }),
 };

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

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react-webpack5';
 import { Suitcase } from '@transferwise/icons';
 import { InlinePrompt } from '../InlinePrompt';
 import { withVariantConfig } from '../../../../.storybook/helpers';
-import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
 
 export default {
   title: 'Prompts/InlinePrompt/Tests',
@@ -22,27 +22,42 @@ export const TinyScreen: Story = {
 };
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      {/* default icon at inline-start, auto width */}
-      <InlinePrompt sentiment="positive">Short content with default icon.</InlinePrompt>
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        {/* default icon at inline-start, auto width */}
+        <InlinePrompt sentiment="positive">{i18n.defaultIcon}</InlinePrompt>
 
-      {/* custom media icon, auto width */}
-      <InlinePrompt sentiment="positive" media={<Suitcase />}>
-        Custom icon with auto width.
-      </InlinePrompt>
+        {/* custom media icon, auto width */}
+        <InlinePrompt sentiment="positive" media={<Suitcase />}>
+          {i18n.customIcon}
+        </InlinePrompt>
 
-      {/* full width — icon position flips */}
-      <InlinePrompt sentiment="positive" media={<Suitcase />} width="full">
-        Custom icon with full width.
-      </InlinePrompt>
+        {/* full width — icon position flips */}
+        <InlinePrompt sentiment="positive" media={<Suitcase />} width="full">
+          {i18n.fullWidth}
+        </InlinePrompt>
 
-      {/* multi-line content — verifies wrapping alignment */}
-      <InlinePrompt sentiment="warning" width="full">
-        This prompt has longer content that may wrap to multiple lines to verify that the icon
-        alignment remains correct in RTL layout.
-      </InlinePrompt>
-    </>
-  ),
-  ...withRTLDiff(),
+        {/* multi-line content — verifies wrapping alignment */}
+        <InlinePrompt sentiment="warning" width="full">
+          {i18n.multiLine}
+        </InlinePrompt>
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      defaultIcon: {
+        en: 'Short content with default icon.',
+        ar: 'محتوى قصير مع الأيقونة الافتراضية.',
+      },
+      customIcon: { en: 'Custom icon with auto width.', ar: 'أيقونة مخصصة بعرض تلقائي.' },
+      fullWidth: { en: 'Custom icon with full width.', ar: 'أيقونة مخصصة بعرض كامل.' },
+      multiLine: {
+        en: 'This prompt has longer content that may wrap to multiple lines to verify that the icon alignment remains correct in RTL layout.',
+        ar: 'يحتوي هذا التنبيه على محتوى أطول قد يمتد على عدة أسطر للتحقق من أن محاذاة الأيقونة تظل صحيحة في التصميم من اليمين إلى اليسار.',
+      },
+    },
+  }),
 };

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Flag } from '@wise/art';
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import AvatarView from '../../AvatarView';
 import Radio from '../Radio';
 
@@ -13,49 +13,63 @@ export default {
 type Story = StoryObj<typeof Radio>;
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <Radio
-        label="Standard option"
-        name="radio-rtl"
-        id="radio-rtl-basic"
-        value="basic"
-        onChange={() => {}}
-      />
-      <Radio
-        label="Option with secondary text"
-        secondary="Secondary description"
-        name="radio-rtl"
-        id="radio-rtl-secondary"
-        value="secondary"
-        onChange={() => {}}
-      />
-      <Radio
-        label="Option with avatar"
-        name="radio-rtl"
-        id="radio-rtl-avatar"
-        value="avatar"
-        avatar={
-          <AvatarView size={40}>
-            <Flag code="IM" />
-          </AvatarView>
-        }
-        onChange={() => {}}
-      />
-      <Radio
-        label="Option with secondary text and avatar"
-        secondary="Secondary description"
-        name="radio-rtl"
-        id="radio-rtl-secondary-avatar"
-        value="secondary-avatar"
-        avatar={
-          <AvatarView size={40}>
-            <Flag code="IM" />
-          </AvatarView>
-        }
-        onChange={() => {}}
-      />
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <Radio
+          label={i18n.standardOption}
+          name="radio-rtl"
+          id="radio-rtl-basic"
+          value="basic"
+          onChange={() => {}}
+        />
+        <Radio
+          label={i18n.withSecondary}
+          secondary={i18n.secondaryDescription}
+          name="radio-rtl"
+          id="radio-rtl-secondary"
+          value="secondary"
+          onChange={() => {}}
+        />
+        <Radio
+          label={i18n.withAvatar}
+          name="radio-rtl"
+          id="radio-rtl-avatar"
+          value="avatar"
+          avatar={
+            <AvatarView size={40}>
+              <Flag code="IM" />
+            </AvatarView>
+          }
+          onChange={() => {}}
+        />
+        <Radio
+          label={i18n.withSecondaryAndAvatar}
+          secondary={i18n.secondaryDescription}
+          name="radio-rtl"
+          id="radio-rtl-secondary-avatar"
+          value="secondary-avatar"
+          avatar={
+            <AvatarView size={40}>
+              <Flag code="IM" />
+            </AvatarView>
+          }
+          onChange={() => {}}
+        />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      standardOption: { en: 'Standard option', ar: 'خيار عادي' },
+      withSecondary: { en: 'Option with secondary text', ar: 'خيار مع نص ثانوي' },
+      withAvatar: { en: 'Option with avatar', ar: 'خيار مع صورة رمزية' },
+      withSecondaryAndAvatar: {
+        en: 'Option with secondary text and avatar',
+        ar: 'خيار مع نص ثانوي وصورة رمزية',
+      },
+      secondaryDescription: { en: 'Secondary description', ar: 'وصف ثانوي' },
+    },
+  }),
 };

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

@@ -3,7 +3,7 @@ import Field from '../../Field/Field';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
 import { Flag } from '@wise/art';
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import AvatarView from '../../AvatarView';
 
 const meta = {
@@ -65,54 +65,73 @@ export const FieldsWithoutPrompt = {
 } satisfies Story;
 
 export const RTLDiff: Story<string> = {
-  render: () => (
-    <>
-      <RadioGroup
-        name="radio-group-rtl-basic"
-        selectedValue="option-1"
-        radios={[
-          { value: 'option-1', label: 'Option one' },
-          { value: 'option-2', label: 'Option two' },
-          { value: 'option-3', label: 'Option three' },
-        ]}
-        onChange={() => {}}
-      />
-      <RadioGroup
-        name="radio-group-rtl-secondary"
-        selectedValue="option-a"
-        radios={[
-          { value: 'option-a', label: 'Option A', secondary: 'Secondary text for A' },
-          { value: 'option-b', label: 'Option B', secondary: 'Secondary text for B' },
-        ]}
-        onChange={() => {}}
-      />
-      <RadioGroup
-        name="radio-group-rtl-avatar"
-        selectedValue="option-x"
-        radios={[
-          {
-            value: 'option-x',
-            label: 'Option X',
-            avatar: (
-              <AvatarView size={40}>
-                <Flag code="IM" />
-              </AvatarView>
-            ),
-          },
-          {
-            value: 'option-y',
-            label: 'Option Y',
-            secondary: 'With secondary and avatar',
-            avatar: (
-              <AvatarView size={40}>
-                <Flag code="IM" />
-              </AvatarView>
-            ),
-          },
-        ]}
-        onChange={() => {}}
-      />
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <RadioGroup
+          name="radio-group-rtl-basic"
+          selectedValue="option-1"
+          radios={[
+            { value: 'option-1', label: i18n.optionOne },
+            { value: 'option-2', label: i18n.optionTwo },
+            { value: 'option-3', label: i18n.optionThree },
+          ]}
+          onChange={() => {}}
+        />
+        <RadioGroup
+          name="radio-group-rtl-secondary"
+          selectedValue="option-a"
+          radios={[
+            { value: 'option-a', label: i18n.optionA, secondary: i18n.secondaryA },
+            { value: 'option-b', label: i18n.optionB, secondary: i18n.secondaryB },
+          ]}
+          onChange={() => {}}
+        />
+        <RadioGroup
+          name="radio-group-rtl-avatar"
+          selectedValue="option-x"
+          radios={[
+            {
+              value: 'option-x',
+              label: i18n.optionX,
+              avatar: (
+                <AvatarView size={40}>
+                  <Flag code="IM" />
+                </AvatarView>
+              ),
+            },
+            {
+              value: 'option-y',
+              label: i18n.optionY,
+              secondary: i18n.secondaryWithAvatar,
+              avatar: (
+                <AvatarView size={40}>
+                  <Flag code="IM" />
+                </AvatarView>
+              ),
+            },
+          ]}
+          onChange={() => {}}
+        />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      optionOne: { en: 'Option one', ar: 'الخيار الأول' },
+      optionTwo: { en: 'Option two', ar: 'الخيار الثاني' },
+      optionThree: { en: 'Option three', ar: 'الخيار الثالث' },
+      optionA: { en: 'Option A', ar: 'الخيار أ' },
+      optionB: { en: 'Option B', ar: 'الخيار ب' },
+      secondaryA: { en: 'Secondary text for A', ar: 'نص ثانوي للخيار أ' },
+      secondaryB: { en: 'Secondary text for B', ar: 'نص ثانوي للخيار ب' },
+      optionX: { en: 'Option X', ar: 'الخيار س' },
+      optionY: { en: 'Option Y', ar: 'الخيار ص' },
+      secondaryWithAvatar: {
+        en: 'With secondary and avatar',
+        ar: 'مع نص ثانوي وصورة رمزية',
+      },
+    },
+  }),
 };

package/src/Section/_stories/Section.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 Header from '../../Header';
 import Section from '..';
 
@@ -13,17 +13,33 @@ export default {
 type Story = StoryObj<typeof Section>;
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <Section>
-        <Header title="Default section" />
-        Section content without horizontal padding.
-      </Section>
-      <Section withHorizontalPadding>
-        <Header title="With horizontal padding" />
-        Section content with horizontal padding applied.
-      </Section>
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <Section>
+          <Header title={i18n.defaultTitle} />
+          {i18n.defaultContent}
+        </Section>
+        <Section withHorizontalPadding>
+          <Header title={i18n.paddedTitle} />
+          {i18n.paddedContent}
+        </Section>
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      defaultTitle: { en: 'Default section', ar: 'قسم افتراضي' },
+      defaultContent: {
+        en: 'Section content without horizontal padding.',
+        ar: 'محتوى القسم بدون حشو أفقي.',
+      },
+      paddedTitle: { en: 'With horizontal padding', ar: 'مع حشو أفقي' },
+      paddedContent: {
+        en: 'Section content with horizontal padding applied.',
+        ar: 'محتوى القسم مع تطبيق الحشو الأفقي.',
+      },
+    },
+  }),
 };

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

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import SegmentedControl from '../SegmentedControl';
 
 export default {
@@ -11,19 +11,15 @@ export default {
 
 type Story = StoryObj<typeof SegmentedControl>;
 
-const inputSegments = [
-  { id: 'seg-one', label: 'One', value: 'one' },
-  { id: 'seg-two', label: 'Two', value: 'two' },
-  { id: 'seg-three', label: 'Three', value: 'three' },
-] as const;
-
-const viewSegments = [
-  { id: 'seg-alpha', label: 'Alpha', value: 'alpha', controls: 'panel-alpha' },
-  { id: 'seg-beta', label: 'Beta', value: 'beta', controls: 'panel-beta' },
-  { id: 'seg-gamma', label: 'Gamma', value: 'gamma', controls: 'panel-gamma' },
-] as const;
+type InteractiveSegmentedControlProps = {
+  inputSegments: readonly { id: string; label: string; value: string }[];
+  viewSegments: readonly { id: string; label: string; value: string; controls: string }[];
+};
 
-function InteractiveSegmentedControl() {
+function InteractiveSegmentedControl({
+  inputSegments,
+  viewSegments,
+}: InteractiveSegmentedControlProps) {
   const [inputValue, setInputValue] = useState('one');
   const [viewValue, setViewValue] = useState('beta');
 
@@ -48,6 +44,33 @@ function InteractiveSegmentedControl() {
 }
 
 export const RTLDiff: Story = {
-  render: () => <InteractiveSegmentedControl />,
-  ...withRTLDiff({ width: 'stretch', renderAs: 'iframe' }),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <InteractiveSegmentedControl
+        inputSegments={[
+          { id: 'seg-one', label: i18n.segmentOne, value: 'one' },
+          { id: 'seg-two', label: i18n.segmentTwo, value: 'two' },
+          { id: 'seg-three', label: i18n.segmentThree, value: 'three' },
+        ]}
+        viewSegments={[
+          { id: 'seg-alpha', label: i18n.segmentAlpha, value: 'alpha', controls: 'panel-alpha' },
+          { id: 'seg-beta', label: i18n.segmentBeta, value: 'beta', controls: 'panel-beta' },
+          { id: 'seg-gamma', label: i18n.segmentGamma, value: 'gamma', controls: 'panel-gamma' },
+        ]}
+      />
+    );
+  },
+  ...withRTLDiff({
+    width: 'stretch',
+    renderAs: 'iframe',
+    i18n: {
+      segmentOne: { en: 'One', ar: 'واحد' },
+      segmentTwo: { en: 'Two', ar: 'اثنان' },
+      segmentThree: { en: 'Three', ar: 'ثلاثة' },
+      segmentAlpha: { en: 'Alpha', ar: 'ألفا' },
+      segmentBeta: { en: 'Beta', ar: 'بيتا' },
+      segmentGamma: { en: 'Gamma', ar: 'غاما' },
+    },
+  }),
 };

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

@@ -1,6 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import {
+  useRtlDiffI18n,
+  withRTLDiff,
+  type I18nMap,
+} from '../../../.storybook/decorators/RtlDiffDecorator';
 import SlidingPanel from '../SlidingPanel';
 
 export default {
@@ -11,7 +15,7 @@ export default {
 
 type Story = StoryObj<typeof SlidingPanel>;
 
-const iframeDiff = withRTLDiff({ renderAs: 'iframe', width: 'stretch' });
+const iframeDiff = (i18n: I18nMap) => withRTLDiff({ renderAs: 'iframe', width: 'stretch', i18n });
 
 const containerStyle: React.CSSProperties = {
   position: 'relative',
@@ -27,45 +31,65 @@ const panelContentStyle: React.CSSProperties = {
 };
 
 export const PositionLeft: Story = {
-  render: () => (
-    <div style={containerStyle}>
-      <SlidingPanel open position="left">
-        <div style={panelContentStyle}>Left panel content</div>
-      </SlidingPanel>
-    </div>
-  ),
-  ...iframeDiff,
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <div style={containerStyle}>
+        <SlidingPanel open position="left">
+          <div style={panelContentStyle}>{i18n.panelContent}</div>
+        </SlidingPanel>
+      </div>
+    );
+  },
+  ...iframeDiff({
+    panelContent: { en: 'Left panel content', ar: 'محتوى اللوحة اليسرى' },
+  }),
 };
 
 export const PositionRight: Story = {
-  render: () => (
-    <div style={containerStyle}>
-      <SlidingPanel open position="right">
-        <div style={panelContentStyle}>Right panel content</div>
-      </SlidingPanel>
-    </div>
-  ),
-  ...iframeDiff,
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <div style={containerStyle}>
+        <SlidingPanel open position="right">
+          <div style={panelContentStyle}>{i18n.panelContent}</div>
+        </SlidingPanel>
+      </div>
+    );
+  },
+  ...iframeDiff({
+    panelContent: { en: 'Right panel content', ar: 'محتوى اللوحة اليمنى' },
+  }),
 };
 
 export const PositionLeftWithBorder: Story = {
-  render: () => (
-    <div style={containerStyle}>
-      <SlidingPanel open position="left" showSlidingPanelBorder>
-        <div style={panelContentStyle}>Left panel with border</div>
-      </SlidingPanel>
-    </div>
-  ),
-  ...iframeDiff,
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <div style={containerStyle}>
+        <SlidingPanel open position="left" showSlidingPanelBorder>
+          <div style={panelContentStyle}>{i18n.panelContent}</div>
+        </SlidingPanel>
+      </div>
+    );
+  },
+  ...iframeDiff({
+    panelContent: { en: 'Left panel with border', ar: 'اللوحة اليسرى مع حدود' },
+  }),
 };
 
 export const PositionRightWithBorder: Story = {
-  render: () => (
-    <div style={containerStyle}>
-      <SlidingPanel open position="right" showSlidingPanelBorder>
-        <div style={panelContentStyle}>Right panel with border</div>
-      </SlidingPanel>
-    </div>
-  ),
-  ...iframeDiff,
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <div style={containerStyle}>
+        <SlidingPanel open position="right" showSlidingPanelBorder>
+          <div style={panelContentStyle}>{i18n.panelContent}</div>
+        </SlidingPanel>
+      </div>
+    );
+  },
+  ...iframeDiff({
+    panelContent: { en: 'Right panel with border', ar: 'اللوحة اليمنى مع حدود' },
+  }),
 };