@transferwise/components 46.165.0 → 46.165.1

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

@@ -35,15 +35,15 @@ export const RTLDiff: Story = {
   },
   ...withRTLDiff({
     i18n: {
-      plain: { ltr: 'Plain label text', rtl: 'نص التسمية العادي' },
-      optional: { ltr: 'Label with optional marker', rtl: 'تسمية مع علامة اختيارية' },
-      withInfo: { ltr: 'Label with info icon', rtl: 'تسمية مع أيقونة معلومات' },
+      plain: { en: 'Plain label text', ar: 'نص التسمية العادي' },
+      optional: { en: 'Label with optional marker', ar: 'تسمية مع علامة اختيارية' },
+      withInfo: { en: 'Label with info icon', ar: 'تسمية مع أيقونة معلومات' },
       optionalWithInfo: {
-        ltr: 'Label with optional and info icon',
-        rtl: 'تسمية مع اختيارية وأيقونة معلومات',
+        en: 'Label with optional and info icon',
+        ar: 'تسمية مع اختيارية وأيقونة معلومات',
       },
-      tooltip: { ltr: 'Helpful tooltip content', rtl: 'محتوى تلميح مفيد' },
-      moreInfo: { ltr: 'More information', rtl: 'مزيد من المعلومات' },
+      tooltip: { en: 'Helpful tooltip content', ar: 'محتوى تلميح مفيد' },
+      moreInfo: { en: 'More information', ar: 'مزيد من المعلومات' },
     },
   }),
 };

package/src/Link/_stories/Link.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 Link from '..';
 
 export default {
@@ -11,16 +11,30 @@ export default {
 type Story = StoryObj<typeof Link>;
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <Link href="#" target="_blank">
-        External link with navigate-away icon
-      </Link>
-      <br />
-      <Link href="#" target="_blank" type="link-large">
-        Large external link with navigate-away icon
-      </Link>
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <Link href="#" target="_blank">
+          {i18n.externalLink}
+        </Link>
+        <br />
+        <Link href="#" target="_blank" type="link-large">
+          {i18n.largeExternalLink}
+        </Link>
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      externalLink: {
+        en: 'External link with navigate-away icon',
+        ar: 'رابط خارجي مع أيقونة الانتقال',
+      },
+      largeExternalLink: {
+        en: 'Large external link with navigate-away icon',
+        ar: 'رابط خارجي كبير مع أيقونة الانتقال',
+      },
+    },
+  }),
 };

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

@@ -1,24 +1,144 @@
+import { ReactNode } from 'react';
 import { Meta } from '@storybook/react-webpack5';
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import Link from '../../Link';
+import { lorem20 } from '../../test-utils';
 import { ListItem, type ListItemProps } from '../ListItem';
-import { VariantStory } from './variants/helpers';
+import {
+  SB_LIST_ITEM_CONTROLS as CONTROLS,
+  SB_LIST_ITEM_MEDIA as MEDIA,
+  SB_ListItem_ControlType as ControlType,
+} from './subcomponents';
+import { VariantList, type VariantContent, type VariantStoryProps } from './variants/helpers';
+
+/** Arabic stand-in for `lorem20`, of comparable word count so wrapping behaviour stays comparable. */
+const arabicFiller =
+  'نص تجريبي يُستخدم لعرض شكل التصميم النهائي قبل إضافة المحتوى الفعلي، ويساعد في التحقق من سلوك التغليف والمحاذاة عند تجاوز السطر الواحد.';
+
+const i18nMap = {
+  title: { en: 'This is a title', ar: 'هذا عنوان' },
+  subtitle: { en: 'And it also has a subtitle', ar: 'وله أيضًا عنوان فرعي' },
+  longTitle: { en: `This is a long title. ${lorem20}`, ar: `هذا عنوان طويل. ${arabicFiller}` },
+  longSubtitle: {
+    en: `And it also has a long subtitle. ${lorem20}`,
+    ar: `وله أيضًا عنوان فرعي طويل. ${arabicFiller}`,
+  },
+  valueTitleLine1: { en: 'This value title', ar: 'عنوان القيمة هذا' },
+  valueTitleLine2: { en: 'is made to span', ar: 'مُصمم ليمتد' },
+  valueTitleLine3: { en: 'across few lines', ar: 'على عدة أسطر' },
+  additionalInfo: {
+    en: 'Which is augmented with additional info.',
+    ar: 'والذي تمت إضافة معلومات إضافية إليه.',
+  },
+  additionalInfoAction: { en: 'Details about the subject.', ar: 'تفاصيل حول الموضوع.' },
+  prompt: { en: 'Finally, there is a prompt.', ar: 'وأخيرًا، هناك تنبيه.' },
+  promptStart: { en: 'Finally, there is a prompt', ar: 'وأخيرًا، هناك تنبيه' },
+  promptLink: { en: 'referencing some details', ar: 'يشير إلى بعض التفاصيل' },
+  promptEnd: { en: 'for your convenience.', ar: 'لتسهيل الأمر عليك.' },
+  controlLabel: { en: 'Click me', ar: 'انقر هنا' },
+};
+
+type ListItemI18n = Record<keyof typeof i18nMap, string>;
+
+/**
+ * Amounts keep Latin digits and ISO currency codes in both columns — a bidi run inside RTL copy is
+ * exactly what these stories need to exercise.
+ */
+const getContent = (i18n: ListItemI18n): VariantContent => ({
+  text: {
+    title: i18n.title,
+    subtitle: i18n.subtitle,
+    valueTitle: '100 GBP',
+    valueSubtitle: '200 USD',
+    longTitle: i18n.longTitle,
+    longSubtitle: i18n.longSubtitle,
+    longValueTitle: (
+      <>
+        {i18n.valueTitleLine1}
+        <br />
+        {i18n.valueTitleLine2}
+        <br />
+        {i18n.valueTitleLine3}
+      </>
+    ),
+  },
+  media: MEDIA.avatarSingle,
+  additionalInfo: {
+    interactive: (
+      <ListItem.AdditionalInfo
+        action={{
+          label: i18n.additionalInfoAction,
+          href: 'https://wise.com',
+          target: '_blank',
+        }}
+      >
+        {i18n.additionalInfo}
+      </ListItem.AdditionalInfo>
+    ),
+    nonInteractive: <ListItem.AdditionalInfo>{i18n.additionalInfo}</ListItem.AdditionalInfo>,
+  },
+  prompt: {
+    interactive: (
+      <ListItem.Prompt sentiment="positive">
+        {i18n.promptStart}{' '}
+        <Link href="https://wise.com" target="_blank" rel="noreferrer">
+          {i18n.promptLink}
+        </Link>{' '}
+        {i18n.promptEnd}
+      </ListItem.Prompt>
+    ),
+    nonInteractive: <ListItem.Prompt sentiment="positive">{i18n.prompt}</ListItem.Prompt>,
+  },
+});
+
+/** Only the four controls with visible copy need overriding; the rest are icon- or input-only. */
+const getControls = (i18n: ListItemI18n): Record<ControlType, ReactNode> => ({
+  ...CONTROLS,
+  button: <ListItem.Button onClick={() => {}}>{i18n.controlLabel}</ListItem.Button>,
+  buttonAsLink: <ListItem.Button href="https://wise.com">{i18n.controlLabel}</ListItem.Button>,
+  partialButton: (
+    <ListItem.Button partiallyInteractive onClick={() => {}}>
+      {i18n.controlLabel}
+    </ListItem.Button>
+  ),
+  partialButtonAsLink: (
+    <ListItem.Button partiallyInteractive href="https://wise.com">
+      {i18n.controlLabel}
+    </ListItem.Button>
+  ),
+});
+
+const LocalisedVariantList = ({ controlType, variant }: VariantStoryProps) => {
+  const i18n = useRtlDiffI18n<ListItemI18n>();
+
+  return (
+    <VariantList
+      controlType={controlType}
+      variant={variant}
+      content={getContent(i18n)}
+      controls={getControls(i18n)}
+    />
+  );
+};
 
 export default {
   component: ListItem,
   title: 'Content/ListItem/Tests/RTL Diff',
   tags: ['!autodocs', '!manifest'],
-  ...withRTLDiff({ width: 'stretch' }),
+  ...withRTLDiff({ width: 'stretch', i18n: i18nMap }),
 } satisfies Meta<ListItemProps>;
 
 const Default = {
-  ...VariantStory,
+  render: ({ controlType, variant }: VariantStoryProps) => (
+    <LocalisedVariantList controlType={controlType} variant={variant} />
+  ),
   parameters: { variants: [] },
-  args: { variant: 'rtl' },
+  args: { variant: 'rtl' as const },
 };
 
 export const Button = {
   ...Default,
-  args: { ...Default.args, variant: 'button' },
+  args: { ...Default.args, controlType: 'button' },
 };
 export const ButtonAsLink = {
   ...Default,

package/src/ListItem/_stories/variants/helpers.tsx

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { StoryObj } from '@storybook/react-webpack5';
 import List from '../../../List';
 import { ListItem, type ListItemProps } from '../../ListItem';
@@ -13,140 +14,187 @@ import {
 type VariantPartial = { title: string } & Partial<ListItemProps>;
 type Variant = 'default' | 'dark' | 'rtl' | 'forest-green' | 'bright-green' | 'mobile' | '400%';
 
-const { title, subtitle, valueTitle, valueSubtitle, longTitle, longSubtitle, longValueTitle } =
-  TEXT;
-const prompt = PROMPT.nonInteractive;
-const media = MEDIA.avatarSingle;
+const PARTIALLY_INTERACTIVE: ControlType[] = [
+  'partialButton',
+  'partialButtonAsLink',
+  'partialIconButton',
+  'partialIconButtonAsLink',
+];
 
-type VariantStoryProps = {
+export type VariantText = {
+  title: string;
+  subtitle: string;
+  valueTitle: string;
+  valueSubtitle: string;
+  longTitle: string;
+  longSubtitle: string;
+  longValueTitle: ReactNode;
+};
+
+/**
+ * Every piece of copy and every slot the instance matrix is built from. Extracted so a story can
+ * render the same matrix with different content — the RTL diff swaps in localised versions.
+ */
+export type VariantContent = {
+  text: VariantText;
+  media: ReactNode;
+  additionalInfo: { interactive: ReactNode; nonInteractive: ReactNode };
+  prompt: { interactive: ReactNode; nonInteractive: ReactNode };
+};
+
+export const DEFAULT_VARIANT_CONTENT: VariantContent = {
+  text: TEXT,
+  media: MEDIA.avatarSingle,
+  additionalInfo: INFO,
+  prompt: PROMPT,
+};
+
+export const getVariantInstances = (
+  controlType: ControlType,
+  { text, media, additionalInfo: info, prompt: prompts }: VariantContent,
+): VariantPartial[] => {
+  const { title, subtitle, valueTitle, valueSubtitle, longTitle, longSubtitle, longValueTitle } =
+    text;
+  const isInteractive = PARTIALLY_INTERACTIVE.includes(controlType);
+  const additionalInfo = isInteractive ? info.interactive : info.nonInteractive;
+  const prompt = prompts.nonInteractive;
+
+  return [
+    { title },
+    { title: longTitle },
+    { title, valueTitle },
+    { title, valueTitle: longValueTitle },
+    { title: longTitle, valueTitle },
+    { title, subtitle },
+    { title, subtitle: longSubtitle },
+    { title, additionalInfo },
+    { title, valueTitle, valueSubtitle },
+    { title, valueTitle: longValueTitle, valueSubtitle },
+    { title, subtitle, inverted: true },
+    { title, subtitle, valueTitle },
+    { title, subtitle, valueTitle, inverted: true },
+    { title, subtitle, valueTitle, valueSubtitle },
+    {
+      title: longTitle,
+      subtitle: longSubtitle,
+      valueTitle,
+      valueSubtitle,
+      additionalInfo: info.nonInteractive,
+    },
+    { title, subtitle, valueTitle, valueSubtitle, inverted: true },
+    { media, title },
+    { media, title: longTitle },
+    { media, title, valueTitle },
+    { media, title: longTitle, valueTitle },
+    { media, title: longTitle, valueSubtitle },
+    { media, title, valueTitle: longValueTitle },
+    { media, title, valueTitle: longValueTitle, valueSubtitle },
+    { media, title, subtitle },
+    { media, title: longTitle, subtitle },
+    { media, title, valueTitle, valueSubtitle },
+    { media, title, valueTitle },
+    { media, title, valueSubtitle },
+    { media, title, subtitle },
+    { media, title, additionalInfo },
+    { media, title, subtitle, valueTitle },
+    { media, title, subtitle, valueTitle, valueSubtitle },
+    { media, title, subtitle, additionalInfo: info.nonInteractive },
+    isInteractive ? { media, title, subtitle, additionalInfo: info.interactive } : null,
+    { media, title, subtitle, additionalInfo, valueTitle },
+    { media, title, subtitle, additionalInfo, valueTitle, valueSubtitle },
+    {
+      media,
+      title: longTitle,
+      subtitle: longSubtitle,
+      valueTitle,
+      valueSubtitle,
+      additionalInfo: info.nonInteractive,
+    },
+    { media, title, subtitle, additionalInfo, valueTitle, valueSubtitle, prompt },
+    {
+      media,
+      title,
+      subtitle,
+      additionalInfo,
+      valueTitle,
+      valueSubtitle,
+      prompt: prompts.interactive,
+    },
+    {
+      media,
+      title,
+      subtitle,
+      additionalInfo,
+      valueTitle,
+      valueSubtitle,
+      prompt: prompts.interactive,
+      inverted: true,
+    },
+    {
+      media,
+      title,
+      subtitle,
+      additionalInfo,
+      valueTitle,
+      valueSubtitle,
+      prompt: prompts.interactive,
+      spotlight: 'active',
+    },
+    {
+      media,
+      title,
+      subtitle,
+      additionalInfo,
+      valueTitle,
+      valueSubtitle,
+      prompt: prompts.interactive,
+      spotlight: 'inactive',
+    },
+    {
+      media,
+      title,
+      subtitle,
+      additionalInfo,
+      valueTitle,
+      valueSubtitle,
+      prompt: prompts.interactive,
+      spotlight: 'inactive',
+      disabled: true,
+    },
+  ].filter(Boolean) as VariantPartial[];
+};
+
+export type VariantStoryProps = {
   controlType: ControlType;
   variant?: Variant;
 };
 
+type VariantListProps = VariantStoryProps & {
+  content?: VariantContent;
+  controls?: Record<ControlType, ReactNode>;
+};
+
+export const VariantList = ({
+  controlType,
+  variant = 'default',
+  content = DEFAULT_VARIANT_CONTENT,
+  controls = CONTROLS,
+}: VariantListProps) => (
+  <List>
+    {getVariantInstances(controlType, content).map((instance, index) => (
+      <ListItem
+        key={`${variant}-${controlType}-${index}`}
+        control={controls[controlType]}
+        {...instance}
+      />
+    ))}
+  </List>
+);
+
 type VariantStory = StoryObj<VariantStoryProps>;
 
 export const VariantStory: VariantStory = {
-  render: ({ controlType, variant = 'default' }) => {
-    const control = CONTROLS[controlType];
-    const isInteractive = [
-      'partialButton',
-      'partialButtonAsLink',
-      'partialIconButton',
-      'partialIconButtonAsLink',
-    ].includes(controlType);
-    const additionalInfo = isInteractive ? INFO.interactive : INFO.nonInteractive;
-    const instances = [
-      { title },
-      { title: longTitle },
-      { title, valueTitle },
-      { title, valueTitle: longValueTitle },
-      { title: longTitle, valueTitle },
-      { title, subtitle },
-      { title, subtitle: longSubtitle },
-      { title, additionalInfo },
-      { title, valueTitle, valueSubtitle },
-      { title, valueTitle: longValueTitle, valueSubtitle },
-      { title, subtitle, inverted: true },
-      { title, subtitle, valueTitle },
-      { title, subtitle, valueTitle, inverted: true },
-      { title, subtitle, valueTitle, valueSubtitle },
-      {
-        title: longTitle,
-        subtitle: longSubtitle,
-        valueTitle,
-        valueSubtitle,
-        additionalInfo: INFO.nonInteractive,
-      },
-      { title, subtitle, valueTitle, valueSubtitle, inverted: true },
-      { media, title },
-      { media, title: longTitle },
-      { media, title, valueTitle },
-      { media, title: longTitle, valueTitle },
-      { media, title: longTitle, valueSubtitle },
-      { media, title, valueTitle: longValueTitle },
-      { media, title, valueTitle: longValueTitle, valueSubtitle },
-      { media, title, subtitle },
-      { media, title: longTitle, subtitle },
-      { media, title, valueTitle, valueSubtitle },
-      { media, title, valueTitle },
-      { media, title, valueSubtitle },
-      { media, title, subtitle },
-      { media, title, additionalInfo },
-      { media, title, subtitle, valueTitle },
-      { media, title, subtitle, valueTitle, valueSubtitle },
-      { media, title, subtitle, additionalInfo: INFO.nonInteractive },
-      isInteractive ? { media, title, subtitle, additionalInfo: INFO.interactive } : null,
-      { media, title, subtitle, additionalInfo, valueTitle },
-      { media, title, subtitle, additionalInfo, valueTitle, valueSubtitle },
-      {
-        media,
-        title: longTitle,
-        subtitle: longSubtitle,
-        valueTitle,
-        valueSubtitle,
-        additionalInfo: INFO.nonInteractive,
-      },
-      { media, title, subtitle, additionalInfo, valueTitle, valueSubtitle, prompt },
-      {
-        media,
-        title,
-        subtitle,
-        additionalInfo,
-        valueTitle,
-        valueSubtitle,
-        prompt: PROMPT.interactive,
-      },
-      {
-        media,
-        title,
-        subtitle,
-        additionalInfo,
-        valueTitle,
-        valueSubtitle,
-        prompt: PROMPT.interactive,
-        inverted: true,
-      },
-      {
-        media,
-        title,
-        subtitle,
-        additionalInfo,
-        valueTitle,
-        valueSubtitle,
-        prompt: PROMPT.interactive,
-        spotlight: 'active',
-      },
-      {
-        media,
-        title,
-        subtitle,
-        additionalInfo,
-        valueTitle,
-        valueSubtitle,
-        prompt: PROMPT.interactive,
-        spotlight: 'inactive',
-      },
-      {
-        media,
-        title,
-        subtitle,
-        additionalInfo,
-        valueTitle,
-        valueSubtitle,
-        prompt: PROMPT.interactive,
-        spotlight: 'inactive',
-        disabled: true,
-      },
-    ].filter(Boolean) as VariantPartial[];
-
-    return (
-      <List>
-        {instances.map((instance, index) => (
-          <ListItem key={`${variant}-${controlType}-${index}`} control={control} {...instance} />
-        ))}
-      </List>
-    );
-  },
+  render: ({ controlType, variant }) => <VariantList controlType={controlType} variant={variant} />,
   parameters: {
     variants: ['default'],
   },

package/src/Loader/_stories/Loader.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 Loader from '..';
 
 export default {
@@ -11,13 +11,20 @@ export default {
 type Story = StoryObj<typeof Loader>;
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <Loader size="sm" displayInstantly />
-      <Loader size="md" displayInstantly />
-      <Loader size="sm" displayInstantly label="Sending your money" />
-      <Loader size="md" displayInstantly label="Sending your money" />
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <Loader size="sm" displayInstantly />
+        <Loader size="md" displayInstantly />
+        <Loader size="sm" displayInstantly label={i18n.label} />
+        <Loader size="md" displayInstantly label={i18n.label} />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      label: { en: 'Sending your money', ar: 'جارٍ إرسال أموالك' },
+    },
+  }),
 };

package/src/Modal/_stories/Modal.rtl.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 { Button, Modal } from '../..';
 
 export default {
@@ -11,49 +11,68 @@ export default {
 
 type Story = StoryObj<typeof Modal>;
 
-const iframeDiff = withRTLDiff({ renderAs: 'iframe' });
-
 export const WithTitleAndFooter: Story = {
-  render: () => (
-    <Modal
-      open
-      title="Modal title"
-      body="Body content for the modal dialog."
-      footer={
-        <Button v2 block>
-          Confirm
-        </Button>
-      }
-      onClose={() => {}}
-    />
-  ),
-  ...iframeDiff,
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Modal
+        open
+        title={i18n.title}
+        body={i18n.body}
+        footer={
+          <Button v2 block>
+            {i18n.confirm}
+          </Button>
+        }
+        onClose={() => {}}
+      />
+    );
+  },
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    i18n: {
+      title: { en: 'Modal title', ar: 'عنوان النافذة' },
+      body: { en: 'Body content for the modal dialog.', ar: 'محتوى النافذة الحوارية.' },
+      confirm: { en: 'Confirm', ar: 'تأكيد' },
+    },
+  }),
 };
 
 export const WithoutFooter: Story = {
-  render: () => (
-    <Modal
-      open
-      title="Modal without footer"
-      body="Body content without a footer."
-      onClose={() => {}}
-    />
-  ),
-  ...iframeDiff,
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return <Modal open title={i18n.title} body={i18n.body} onClose={() => {}} />;
+  },
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    i18n: {
+      title: { en: 'Modal without footer', ar: 'نافذة بدون تذييل' },
+      body: { en: 'Body content without a footer.', ar: 'محتوى بدون تذييل.' },
+    },
+  }),
 };
 
 export const WithoutTitle: Story = {
-  render: () => (
-    <Modal
-      open
-      body="Body content without a title."
-      footer={
-        <Button v2 block>
-          Done
-        </Button>
-      }
-      onClose={() => {}}
-    />
-  ),
-  ...iframeDiff,
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <Modal
+        open
+        body={i18n.body}
+        footer={
+          <Button v2 block>
+            {i18n.done}
+          </Button>
+        }
+        onClose={() => {}}
+      />
+    );
+  },
+  ...withRTLDiff({
+    renderAs: 'iframe',
+    i18n: {
+      body: { en: 'Body content without a title.', ar: 'محتوى بدون عنوان.' },
+      done: { en: 'Done', ar: 'تم' },
+    },
+  }),
 };