@transferwise/components 46.165.0 → 46.165.1

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: 'اليسار أسفل' },
+    },
+  }),
 };