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

package/src/_deprecated/Card/_stories/Card.test.story.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { FastFlag as FastFlagIcon } from '@transferwise/icons';
 
-import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
 import Card from '..';
 
 export default {
@@ -13,26 +13,50 @@ export default {
 type Story = StoryObj<typeof Card>;
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <Card title="Basic card" details="Some details about this card" />
-      <Card
-        title="Card with icon"
-        details="Details with an icon on the side"
-        icon={<FastFlagIcon />}
-      />
-      <Card
-        title="Expanded card with icon"
-        details="Expanded card showing content area"
-        icon={<FastFlagIcon />}
-        isExpanded
-      >
-        Expanded content with padding affected by icon presence.
-      </Card>
-      <Card title="Expanded card without icon" details="No icon variant" isExpanded>
-        Expanded content without icon padding.
-      </Card>
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <Card title={i18n.basicTitle} details={i18n.basicDetails} />
+        <Card title={i18n.withIconTitle} details={i18n.withIconDetails} icon={<FastFlagIcon />} />
+        <Card
+          title={i18n.expandedWithIconTitle}
+          details={i18n.expandedWithIconDetails}
+          icon={<FastFlagIcon />}
+          isExpanded
+        >
+          {i18n.expandedWithIconContent}
+        </Card>
+        <Card title={i18n.expandedNoIconTitle} details={i18n.expandedNoIconDetails} isExpanded>
+          {i18n.expandedNoIconContent}
+        </Card>
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      basicTitle: { en: 'Basic card', ar: 'بطاقة أساسية' },
+      basicDetails: { en: 'Some details about this card', ar: 'بعض التفاصيل عن هذه البطاقة' },
+      withIconTitle: { en: 'Card with icon', ar: 'بطاقة مع أيقونة' },
+      withIconDetails: {
+        en: 'Details with an icon on the side',
+        ar: 'تفاصيل مع أيقونة على الجانب',
+      },
+      expandedWithIconTitle: { en: 'Expanded card with icon', ar: 'بطاقة موسّعة مع أيقونة' },
+      expandedWithIconDetails: {
+        en: 'Expanded card showing content area',
+        ar: 'بطاقة موسّعة تُظهر منطقة المحتوى',
+      },
+      expandedWithIconContent: {
+        en: 'Expanded content with padding affected by icon presence.',
+        ar: 'محتوى موسّع بمساحة داخلية تتأثر بوجود الأيقونة.',
+      },
+      expandedNoIconTitle: { en: 'Expanded card without icon', ar: 'بطاقة موسّعة بدون أيقونة' },
+      expandedNoIconDetails: { en: 'No icon variant', ar: 'نسخة بدون أيقونة' },
+      expandedNoIconContent: {
+        en: 'Expanded content without icon padding.',
+        ar: 'محتوى موسّع بدون مساحة داخلية للأيقونة.',
+      },
+    },
+  }),
 };

package/src/_deprecated/CriticalBanner/_stories/CriticalCommsBanner.test.story.tsx

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import CriticalCommsBanner from '..';
 import { withVariantConfig } from '../../../../.storybook/helpers';
-import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
 
 export default {
   component: CriticalCommsBanner,
@@ -70,18 +70,24 @@ export const WithoutAction: Story = {
 };
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <CriticalCommsBanner
-        title="Your account is overdrawn"
-        subtitle="Add money within the next 30 days"
-        action={{ label: 'Take action', href: 'https://wise.com' }}
-      />
-      <CriticalCommsBanner
-        title="Your account is overdrawn"
-        subtitle="Add money within the next 30 days"
-      />
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <CriticalCommsBanner
+          title={i18n.title}
+          subtitle={i18n.subtitle}
+          action={{ label: i18n.actionLabel, href: 'https://wise.com' }}
+        />
+        <CriticalCommsBanner title={i18n.title} subtitle={i18n.subtitle} />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      title: { en: 'Your account is overdrawn', ar: 'حسابك مكشوف' },
+      subtitle: { en: 'Add money within the next 30 days', ar: 'أضف أموالًا خلال 30 يومًا' },
+      actionLabel: { en: 'Take action', ar: 'اتخذ إجراءً' },
+    },
+  }),
 };

package/src/_deprecated/InlineAlert/_stories/InlineAlert.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 InlineAlert from '..';
 
 export default {
@@ -12,15 +12,26 @@ export default {
 type Story = StoryObj<typeof InlineAlert>;
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <InlineAlert type="neutral">Neutral alert without icon</InlineAlert>
-      <InlineAlert type="warning">Warning alert with icon</InlineAlert>
-      <InlineAlert type="negative">Negative alert with icon</InlineAlert>
-      <InlineAlert type="positive">
-        Positive alert with icon and longer content that may wrap to multiple lines
-      </InlineAlert>
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <InlineAlert type="neutral">{i18n.neutral}</InlineAlert>
+        <InlineAlert type="warning">{i18n.warning}</InlineAlert>
+        <InlineAlert type="negative">{i18n.negative}</InlineAlert>
+        <InlineAlert type="positive">{i18n.positive}</InlineAlert>
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      neutral: { en: 'Neutral alert without icon', ar: 'تنبيه عادي بدون أيقونة' },
+      warning: { en: 'Warning alert with icon', ar: 'تنبيه تحذيري مع أيقونة' },
+      negative: { en: 'Negative alert with icon', ar: 'تنبيه سلبي مع أيقونة' },
+      positive: {
+        en: 'Positive alert with icon and longer content that may wrap to multiple lines',
+        ar: 'تنبيه إيجابي مع أيقونة ومحتوى أطول قد يمتد على عدة أسطر',
+      },
+    },
+  }),
 };

package/src/_deprecated/Select/_stories/Select.rtl.test.story.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { userEvent, within } from 'storybook/test';
 import { Person } from '@transferwise/icons';
 
-import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
 import Select from '..';
 
 export default {
@@ -13,54 +13,82 @@ export default {
 
 type Story = StoryObj<typeof Select>;
 
-const options = [
-  { header: 'Popular' },
-  { value: 'gbp', label: 'British pound', currency: 'gbp', icon: <Person /> },
-  { value: 'eur', label: 'Euro', currency: 'eur', icon: <Person /> },
-  { value: 'usd', label: 'US Dollar', currency: 'usd', note: 'United States dollar' },
+const getOptions = (i18n: Record<string, string>) => [
+  { header: i18n.popularHeader },
+  { value: 'gbp', label: i18n.britishPound, currency: 'gbp', icon: <Person /> },
+  { value: 'eur', label: i18n.euro, currency: 'eur', icon: <Person /> },
+  { value: 'usd', label: i18n.usDollar, currency: 'usd', note: i18n.usDollarNote },
   { separator: true },
-  { header: 'Other' },
-  { value: 'cad', label: 'Canadian dollar', currency: 'cad' },
-  { value: 'aud', label: 'Australian dollar', currency: 'aud' },
+  { header: i18n.otherHeader },
+  { value: 'cad', label: i18n.canadianDollar, currency: 'cad' },
+  { value: 'aud', label: i18n.australianDollar, currency: 'aud' },
 ];
 
-const selected = { value: 'gbp', label: 'British pound', currency: 'gbp', icon: <Person /> };
+const getSelected = (i18n: Record<string, string>) => ({
+  value: 'gbp',
+  label: i18n.britishPound,
+  currency: 'gbp',
+  icon: <Person />,
+});
 
 export const TriggerVariants: Story = {
-  render: () => (
-    <>
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <Select
+          size="lg"
+          placeholder={i18n.placeholder}
+          selected={getSelected(i18n)}
+          options={getOptions(i18n)}
+          onChange={() => {}}
+        />
+        <Select
+          size="md"
+          placeholder={i18n.placeholder}
+          selected={getSelected(i18n)}
+          options={getOptions(i18n)}
+          onChange={() => {}}
+        />
+        <Select
+          size="sm"
+          placeholder={i18n.placeholder}
+          options={getOptions(i18n)}
+          onChange={() => {}}
+        />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      placeholder: { en: 'Select currency', ar: 'اختر العملة' },
+      popularHeader: { en: 'Popular', ar: 'الأكثر شيوعًا' },
+      britishPound: { en: 'British pound', ar: 'الجنيه الإسترليني' },
+      euro: { en: 'Euro', ar: 'اليورو' },
+      usDollar: { en: 'US Dollar', ar: 'الدولار الأمريكي' },
+      usDollarNote: { en: 'United States dollar', ar: 'دولار الولايات المتحدة' },
+      otherHeader: { en: 'Other', ar: 'أخرى' },
+      canadianDollar: { en: 'Canadian dollar', ar: 'الدولار الكندي' },
+      australianDollar: { en: 'Australian dollar', ar: 'الدولار الأسترالي' },
+    },
+  }),
+};
+
+export const OpenDropdown: Story = {
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
       <Select
         size="lg"
-        placeholder="Select currency"
-        selected={selected}
-        options={options}
-        onChange={() => {}}
-      />
-      <Select
-        size="md"
-        placeholder="Select currency"
-        selected={selected}
-        options={options}
+        search
+        searchPlaceholder={i18n.searchPlaceholder}
+        placeholder={i18n.placeholder}
+        selected={getSelected(i18n)}
+        options={getOptions(i18n)}
         onChange={() => {}}
       />
-      <Select size="sm" placeholder="Select currency" options={options} onChange={() => {}} />
-    </>
-  ),
-  ...withRTLDiff(),
-};
-
-export const OpenDropdown: Story = {
-  render: () => (
-    <Select
-      size="lg"
-      search
-      searchPlaceholder="Type a currency"
-      placeholder="Select currency"
-      selected={selected}
-      options={options}
-      onChange={() => {}}
-    />
-  ),
+    );
+  },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const trigger = canvas.queryByRole('button');
@@ -73,6 +101,14 @@ export const OpenDropdown: Story = {
     i18n: {
       searchPlaceholder: { en: 'Type a currency', ar: 'اكتب عملة' },
       placeholder: { en: 'Select currency', ar: 'اختر العملة' },
+      popularHeader: { en: 'Popular', ar: 'الأكثر شيوعًا' },
+      britishPound: { en: 'British pound', ar: 'الجنيه الإسترليني' },
+      euro: { en: 'Euro', ar: 'اليورو' },
+      usDollar: { en: 'US Dollar', ar: 'الدولار الأمريكي' },
+      usDollarNote: { en: 'United States dollar', ar: 'دولار الولايات المتحدة' },
+      otherHeader: { en: 'Other', ar: 'أخرى' },
+      canadianDollar: { en: 'Canadian dollar', ar: 'الدولار الكندي' },
+      australianDollar: { en: 'Australian dollar', ar: 'الدولار الأسترالي' },
     },
   }),
 };

package/src/common/BottomSheet/_stories/BottomSheet.test.story.tsx

@@ -12,7 +12,7 @@ import Title from '../../../Title';
 import ListItem from '../../../ListItem';
 import BottomSheet from '../BottomSheet';
 import { withVariantConfig } from '../../../../.storybook/helpers';
-import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
 
 const wait = async (duration = 500) =>
   new Promise<void>((resolve) => {
@@ -229,23 +229,41 @@ export const WithOverflowContentZoom400: Story = {
 };
 
 export const RTLDiff: Story = {
-  render: () => (
-    <BottomSheet open aria-label="Manage your card">
-      <Title type={Typography.TITLE_SECTION}>Money without borders</Title>
-      {lorem10}
-      <br />
-      <br />
-      <ListItem
-        title="List item"
-        subtitle="Button and icon are vertically centered."
-        control={<ListItem.Navigation href="#" />}
-        media={
-          <ListItem.AvatarView>
-            <FastFlag />
-          </ListItem.AvatarView>
-        }
-      />
-    </BottomSheet>
-  ),
-  ...withRTLDiff({ renderAs: 'iframe' }),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <BottomSheet open aria-label={i18n.sheetLabel}>
+        <Title type={Typography.TITLE_SECTION}>{i18n.title}</Title>
+        {i18n.body}
+        <br />
+        <br />
+        <ListItem
+          title={i18n.listItemTitle}
+          subtitle={i18n.listItemSubtitle}
+          control={<ListItem.Navigation href="#" />}
+          media={
+            <ListItem.AvatarView>
+              <FastFlag />
+            </ListItem.AvatarView>
+          }
+        />
+      </BottomSheet>
+    );
+  },
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    i18n: {
+      sheetLabel: { en: 'Manage your card', ar: 'إدارة بطاقتك' },
+      title: { en: 'Money without borders', ar: 'أموال بلا حدود' },
+      body: {
+        en: lorem10,
+        ar: 'نص تجريبي يُستخدم لعرض شكل التصميم النهائي قبل إضافة المحتوى الفعلي.',
+      },
+      listItemTitle: { en: 'List item', ar: 'عنصر القائمة' },
+      listItemSubtitle: {
+        en: 'Button and icon are vertically centered.',
+        ar: 'الزر والأيقونة متمركزان عموديًا.',
+      },
+    },
+  }),
 };

package/src/common/Panel/_stories/Panel.rtl.test.story.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { useRef } from 'react';
-import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
 import Button from '../../../Button';
 import { Position } from '../../PropsValues/position';
 import Panel from '../Panel';
@@ -20,6 +20,7 @@ function PanelStory({
   position: Parameters<typeof Panel>[0]['position'];
   label: string;
 }) {
+  const i18n = useRtlDiffI18n();
   const anchorRef = useRef<HTMLButtonElement>(null);
   const margin =
     position?.startsWith('bottom') || position?.startsWith('top') ? '3.5rem 0' : '2.5rem 0';
@@ -34,10 +35,10 @@ function PanelStory({
         position={position}
         anchorRef={anchorRef}
         arrow
-        aria-label={`Panel positioned ${label}`}
+        aria-label={`${i18n.panelAriaLabelPrefix} ${label}`}
       >
         <div style={{ padding: '16px', maxWidth: '200px' }}>
-          Panel content positioned at <strong>{label}</strong>
+          {i18n.panelContentPrefix} <strong>{label}</strong>
         </div>
       </Panel>
     </>
@@ -45,66 +46,149 @@ function PanelStory({
 }
 
 export const Top: Story = {
-  render: () => (
-    <>
-      <PanelStory position={Position.TOP_LEFT} label="top-left" />
-      <PanelStory position={Position.TOP} label="top" />
-      <PanelStory position={Position.TOP_RIGHT} label="top-right" />
-    </>
-  ),
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center', vAlign: 'bottom' }),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <PanelStory position={Position.TOP_LEFT} label={i18n.topLeft} />
+        <PanelStory position={Position.TOP} label={i18n.top} />
+        <PanelStory position={Position.TOP_RIGHT} label={i18n.topRight} />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    hAlign: 'center',
+    vAlign: 'bottom',
+    i18n: {
+      panelAriaLabelPrefix: { en: 'Panel positioned', ar: 'لوحة موضوعة عند' },
+      panelContentPrefix: { en: 'Panel content positioned at', ar: 'محتوى اللوحة موضوع عند' },
+      topLeft: { en: 'top-left', ar: 'أعلى اليسار' },
+      top: { en: 'top', ar: 'أعلى' },
+      topRight: { en: 'top-right', ar: 'أعلى اليمين' },
+    },
+  }),
 };
 
 export const Right: Story = {
-  render: () => (
-    <>
-      <PanelStory position={Position.RIGHT_TOP} label="right-top" />
-      <PanelStory position={Position.RIGHT} label="right" />
-      <PanelStory position={Position.RIGHT_BOTTOM} label="right-bottom" />
-    </>
-  ),
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'left', vAlign: 'center' }),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <PanelStory position={Position.RIGHT_TOP} label={i18n.rightTop} />
+        <PanelStory position={Position.RIGHT} label={i18n.right} />
+        <PanelStory position={Position.RIGHT_BOTTOM} label={i18n.rightBottom} />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    hAlign: 'left',
+    vAlign: 'center',
+    i18n: {
+      panelAriaLabelPrefix: { en: 'Panel positioned', ar: 'لوحة موضوعة عند' },
+      panelContentPrefix: { en: 'Panel content positioned at', ar: 'محتوى اللوحة موضوع عند' },
+      rightTop: { en: 'right-top', ar: 'اليمين أعلى' },
+      right: { en: 'right', ar: 'اليمين' },
+      rightBottom: { en: 'right-bottom', ar: 'اليمين أسفل' },
+    },
+  }),
 };
 export const RightFlipped: Story = {
-  render: () => (
-    <>
-      <PanelStory position={Position.RIGHT_TOP} label="right-top" />
-      <PanelStory position={Position.RIGHT} label="right" />
-      <PanelStory position={Position.RIGHT_BOTTOM} label="right-bottom" />
-    </>
-  ),
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'right', vAlign: 'center' }),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <PanelStory position={Position.RIGHT_TOP} label={i18n.rightTop} />
+        <PanelStory position={Position.RIGHT} label={i18n.right} />
+        <PanelStory position={Position.RIGHT_BOTTOM} label={i18n.rightBottom} />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    hAlign: 'right',
+    vAlign: 'center',
+    i18n: {
+      panelAriaLabelPrefix: { en: 'Panel positioned', ar: 'لوحة موضوعة عند' },
+      panelContentPrefix: { en: 'Panel content positioned at', ar: 'محتوى اللوحة موضوع عند' },
+      rightTop: { en: 'right-top', ar: 'اليمين أعلى' },
+      right: { en: 'right', ar: 'اليمين' },
+      rightBottom: { en: 'right-bottom', ar: 'اليمين أسفل' },
+    },
+  }),
 };
 
 export const Bottom: Story = {
-  render: () => (
-    <>
-      <PanelStory position={Position.BOTTOM_LEFT} label="bottom-left" />
-      <PanelStory position={Position.BOTTOM} label="bottom" />
-      <PanelStory position={Position.BOTTOM_RIGHT} label="bottom-right" />
-    </>
-  ),
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center' }),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <PanelStory position={Position.BOTTOM_LEFT} label={i18n.bottomLeft} />
+        <PanelStory position={Position.BOTTOM} label={i18n.bottom} />
+        <PanelStory position={Position.BOTTOM_RIGHT} label={i18n.bottomRight} />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    hAlign: 'center',
+    i18n: {
+      panelAriaLabelPrefix: { en: 'Panel positioned', ar: 'لوحة موضوعة عند' },
+      panelContentPrefix: { en: 'Panel content positioned at', ar: 'محتوى اللوحة موضوع عند' },
+      bottomLeft: { en: 'bottom-left', ar: 'أسفل اليسار' },
+      bottom: { en: 'bottom', ar: 'أسفل' },
+      bottomRight: { en: 'bottom-right', ar: 'أسفل اليمين' },
+    },
+  }),
 };
 
 export const Left: Story = {
-  render: () => (
-    <>
-      <PanelStory position={Position.LEFT_TOP} label="left-top" />
-      <PanelStory position={Position.LEFT} label="left" />
-      <PanelStory position={Position.LEFT_BOTTOM} label="left-bottom" />
-    </>
-  ),
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'right', vAlign: 'center' }),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <PanelStory position={Position.LEFT_TOP} label={i18n.leftTop} />
+        <PanelStory position={Position.LEFT} label={i18n.left} />
+        <PanelStory position={Position.LEFT_BOTTOM} label={i18n.leftBottom} />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    hAlign: 'right',
+    vAlign: 'center',
+    i18n: {
+      panelAriaLabelPrefix: { en: 'Panel positioned', ar: 'لوحة موضوعة عند' },
+      panelContentPrefix: { en: 'Panel content positioned at', ar: 'محتوى اللوحة موضوع عند' },
+      leftTop: { en: 'left-top', ar: 'اليسار أعلى' },
+      left: { en: 'left', ar: 'اليسار' },
+      leftBottom: { en: 'left-bottom', ar: 'اليسار أسفل' },
+    },
+  }),
 };
 
 export const LeftFlipped: Story = {
-  render: () => (
-    <>
-      <PanelStory position={Position.LEFT_TOP} label="left-top" />
-      <PanelStory position={Position.LEFT} label="left" />
-      <PanelStory position={Position.LEFT_BOTTOM} label="left-bottom" />
-    </>
-  ),
-  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'left', vAlign: 'center' }),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <PanelStory position={Position.LEFT_TOP} label={i18n.leftTop} />
+        <PanelStory position={Position.LEFT} label={i18n.left} />
+        <PanelStory position={Position.LEFT_BOTTOM} label={i18n.leftBottom} />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    hAlign: 'left',
+    vAlign: 'center',
+    i18n: {
+      panelAriaLabelPrefix: { en: 'Panel positioned', ar: 'لوحة موضوعة عند' },
+      panelContentPrefix: { en: 'Panel content positioned at', ar: 'محتوى اللوحة موضوع عند' },
+      leftTop: { en: 'left-top', ar: 'اليسار أعلى' },
+      left: { en: 'left', ar: 'اليسار' },
+      leftBottom: { en: 'left-bottom', ar: 'اليسار أسفل' },
+    },
+  }),
 };