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

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: 'تم' },
+    },
+  }),
 };

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

@@ -29,6 +29,15 @@ const gbpCurrency = {
 
 const multipleCurrencies = [eurCurrency, gbpCurrency] as const;
 
+/**
+ * `note` holds the currency's full name and renders only in the open dropdown, so only
+ * OpenDropdown needs the localised variants.
+ */
+const getLocalisedCurrencies = (i18n: Record<string, string>) => [
+  { ...eurCurrency, note: i18n.euro },
+  { ...gbpCurrency, note: i18n.britishPound },
+];
+
 const sharedProps = {
   amount: 1000,
   id: 'money-input',
@@ -72,12 +81,13 @@ export const TriggerVariants: Story = {
 export const OpenDropdown: Story = {
   render: () => {
     const i18n = useRtlDiffI18n();
+    const currencies = getLocalisedCurrencies(i18n);
     return (
       <MoneyInput
         {...sharedProps}
         size="lg"
-        currencies={multipleCurrencies}
-        selectedCurrency={eurCurrency}
+        currencies={currencies}
+        selectedCurrency={currencies[0]}
         searchPlaceholder={i18n.searchPlaceholder}
       />
     );
@@ -93,6 +103,8 @@ export const OpenDropdown: Story = {
     width: '40%',
     i18n: {
       searchPlaceholder: { en: 'Search currencies or countries', ar: 'ابحث عن العملات أو الدول' },
+      euro: { en: 'Euro', ar: 'اليورو' },
+      britishPound: { en: 'British pound', ar: 'الجنيه الإسترليني' },
     },
   }),
 };

package/src/Nudge/_stories/Nudge.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 Nudge from '../Nudge';
 
 export default {
@@ -28,27 +28,76 @@ const MEDIA_NAMES = [
 ] as const;
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      {MEDIA_NAMES.map((mediaName) => (
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    const mediaTitles: Record<(typeof MEDIA_NAMES)[number], string> = {
+      globe: i18n.globe,
+      lock: i18n.lock,
+      wallet: i18n.wallet,
+      gear: i18n.gear,
+      'invite-letter': i18n.inviteLetter,
+      'personal-card': i18n.personalCard,
+      'business-card': i18n.businessCard,
+      heart: i18n.heart,
+      'multi-currency': i18n.multiCurrency,
+      'shopping-bag': i18n.shoppingBag,
+      flower: i18n.flower,
+      'gift-box': i18n.giftBox,
+      backpack: i18n.backpack,
+      documents: i18n.documents,
+    };
+
+    return (
+      <>
+        {MEDIA_NAMES.map((mediaName) => (
+          <Nudge
+            key={mediaName}
+            mediaName={mediaName}
+            title={mediaTitles[mediaName]}
+            link={i18n.link}
+            href="#"
+            onDismiss={() => {}}
+          />
+        ))}
         <Nudge
-          key={mediaName}
-          mediaName={mediaName}
-          title={mediaName}
-          link="Link"
-          href="#"
+          mediaName="globe"
+          title={i18n.withAction}
+          action={{ text: i18n.learnMore, href: '#' }}
           onDismiss={() => {}}
         />
-      ))}
-      <Nudge
-        mediaName="globe"
-        title="With action"
-        action={{ text: 'Learn more', href: '#' }}
-        onDismiss={() => {}}
-      />
-      <Nudge title="Without media, with dismiss" link="Link" href="#" onDismiss={() => {}} />
-      <Nudge title="Without media, no dismiss" link="Link" href="#" />
-    </>
-  ),
-  ...withRTLDiff({ width: 'stretch' }),
+        <Nudge title={i18n.withDismiss} link={i18n.link} href="#" onDismiss={() => {}} />
+        <Nudge title={i18n.withoutDismiss} link={i18n.link} href="#" />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    width: 'stretch',
+    i18n: {
+      globe: { en: 'globe', ar: 'الكرة الأرضية' },
+      lock: { en: 'lock', ar: 'قفل' },
+      wallet: { en: 'wallet', ar: 'محفظة' },
+      gear: { en: 'gear', ar: 'ترس' },
+      inviteLetter: { en: 'invite-letter', ar: 'رسالة دعوة' },
+      personalCard: { en: 'personal-card', ar: 'بطاقة شخصية' },
+      businessCard: { en: 'business-card', ar: 'بطاقة تجارية' },
+      heart: { en: 'heart', ar: 'قلب' },
+      multiCurrency: { en: 'multi-currency', ar: 'عملات متعددة' },
+      shoppingBag: { en: 'shopping-bag', ar: 'حقيبة تسوق' },
+      flower: { en: 'flower', ar: 'زهرة' },
+      giftBox: { en: 'gift-box', ar: 'علبة هدايا' },
+      backpack: { en: 'backpack', ar: 'حقيبة ظهر' },
+      documents: { en: 'documents', ar: 'مستندات' },
+      link: { en: 'Link', ar: 'رابط' },
+      withAction: { en: 'With action', ar: 'مع إجراء' },
+      learnMore: { en: 'Learn more', ar: 'اعرف المزيد' },
+      withDismiss: {
+        en: 'Without media, with dismiss',
+        ar: 'بدون وسائط، مع إمكانية الإغلاق',
+      },
+      withoutDismiss: {
+        en: 'Without media, no dismiss',
+        ar: 'بدون وسائط، بدون إمكانية الإغلاق',
+      },
+    },
+  }),
 };