@transferwise/components 46.165.0 → 46.165.2

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

package/src/index.ts

@@ -282,7 +282,6 @@ export { default as SegmentedControl } from './SegmentedControl';
 export { default as Select } from './_deprecated/Select';
 export { default as SentimentSurface } from './SentimentSurface';
 export { default as SlidingPanel } from './SlidingPanel';
-export { default as SnackbarPortal } from './Snackbar/Snackbar';
 export { SnackbarConsumer, SnackbarContext } from './Snackbar/SnackbarContext';
 export { default as SnackbarProvider } from './Snackbar/SnackbarProvider';
 export { default as StatusIcon } from './StatusIcon/StatusIcon';