@transferwise/components 46.160.0 → 46.160.2

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

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { userEvent, within } from 'storybook/test';
 
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import DateLookup from '..';
 
 export default {
@@ -14,39 +14,47 @@ type Story = StoryObj<typeof DateLookup>;
 
 const selectedDate = new Date(2024, 5, 14);
 
+const i18nConfig = {
+  label: { ltr: 'Select date', rtl: 'اختر التاريخ' },
+  placeholder: { ltr: 'Choose a date', rtl: 'اختر تاريخًا' },
+};
+
 export const TriggerVariants: Story = {
-  render: () => (
-    <>
-      <DateLookup
-        label="Select date"
-        placeholder="Choose a date"
-        value={selectedDate}
-        onChange={() => {}}
-      />
-      <DateLookup
-        label="Select date"
-        placeholder="Choose a date"
-        value={selectedDate}
-        clearable
-        onChange={() => {}}
-      />
-      <DateLookup
-        label="Select date"
-        placeholder="Choose a date"
-        size="sm"
-        value={selectedDate}
-        onChange={() => {}}
-      />
-      <DateLookup
-        label="Select date"
-        placeholder="Choose a date"
-        size="lg"
-        value={selectedDate}
-        onChange={() => {}}
-      />
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n<{ label: string; placeholder: string }>();
+    return (
+      <>
+        <DateLookup
+          label={i18n.label}
+          placeholder={i18n.placeholder}
+          value={selectedDate}
+          onChange={() => {}}
+        />
+        <DateLookup
+          label={i18n.label}
+          placeholder={i18n.placeholder}
+          value={selectedDate}
+          clearable
+          onChange={() => {}}
+        />
+        <DateLookup
+          label={i18n.label}
+          placeholder={i18n.placeholder}
+          size="sm"
+          value={selectedDate}
+          onChange={() => {}}
+        />
+        <DateLookup
+          label={i18n.label}
+          placeholder={i18n.placeholder}
+          size="lg"
+          value={selectedDate}
+          onChange={() => {}}
+        />
+      </>
+    );
+  },
+  ...withRTLDiff({ renderAs: 'iframe', i18n: i18nConfig }),
 };
 
 const containerStyle: React.CSSProperties = {
@@ -59,16 +67,19 @@ const containerStyle: React.CSSProperties = {
 };
 
 export const OpenCalendarPanel: Story = {
-  render: () => (
-    <div style={containerStyle}>
-      <DateLookup
-        label="Select date"
-        placeholder="Choose a date"
-        value={selectedDate}
-        onChange={() => {}}
-      />
-    </div>
-  ),
+  render: () => {
+    const i18n = useRtlDiffI18n<{ label: string; placeholder: string }>();
+    return (
+      <div style={containerStyle}>
+        <DateLookup
+          label={i18n.label}
+          placeholder={i18n.placeholder}
+          value={selectedDate}
+          onChange={() => {}}
+        />
+      </div>
+    );
+  },
   play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
     const canvas = within(canvasElement);
     const trigger = canvas.queryByRole('button');
@@ -77,12 +88,12 @@ export const OpenCalendarPanel: Story = {
     // Suppress focus ring on calendar cells — FocusScope traps focus inside the panel
     // and the autofocus cycle causes the selected date's ring to flicker between iframes.
     const style = canvasElement.ownerDocument.createElement('style');
-    style.textContent = ` 
-    .np-panel__content *:focus { 
-      outline: none !important; 
-      box-shadow: none !important; 
+    style.textContent = `
+    .np-panel__content *:focus {
+      outline: none !important;
+      box-shadow: none !important;
     }`;
     canvasElement.ownerDocument.head.appendChild(style);
   },
-  ...withRTLDiff({ renderAs: 'iframe' }),
+  ...withRTLDiff({ renderAs: 'iframe', i18n: i18nConfig }),
 };

package/src/ExpressiveMoneyInput/Chevron/Chevron.tsx

@@ -1,12 +1,17 @@
-import { ChevronLeft } from '@transferwise/icons';
+import { ChevronLeft, ChevronRight } from '@transferwise/icons';
 import { clsx } from 'clsx';
 import { motion } from 'motion/react';
 
+import { useDirection } from '../../common/hooks';
+
 interface Props {
   shouldShow: boolean;
 }
 
 export const Chevron = ({ shouldShow = true }: Props) => {
+  const { isRTL } = useDirection();
+  const Icon = isRTL ? ChevronRight : ChevronLeft;
+
   return (
     <div
       className={clsx(
@@ -17,7 +22,7 @@ export const Chevron = ({ shouldShow = true }: Props) => {
     >
       <motion.div
         animate={{
-          x: [12, 0, 0, -12],
+          x: isRTL ? [-12, 0, 0, 12] : [12, 0, 0, -12],
           opacity: [0, 1, 1, 0],
         }}
         transition={{
@@ -28,7 +33,7 @@ export const Chevron = ({ shouldShow = true }: Props) => {
           repeatType: 'loop',
         }}
       >
-        <ChevronLeft />
+        <Icon />
       </motion.div>
     </div>
   );

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

@@ -1,9 +1,8 @@
 import { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import { Input } from '../../Inputs/Input/Input';
 import { TextArea } from '../../Inputs/TextArea/TextArea';
-import { lorem10 } from '../../test-utils';
 import Field, { FieldProps } from '..';
 import { Sentiment } from '../../common';
 
@@ -59,44 +58,56 @@ export const DeprecatedProps: Story = {
 };
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      {/* Required label (default) — label text aligns to start */}
-      <Field label="Required field">
-        <Input defaultValue="Input value" />
-      </Field>
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <Field label={i18n.requiredLabel}>
+          <Input defaultValue={i18n.inputValue} />
+        </Field>
 
-      {/* Optional label — "(optional)" suffix uses directional margin-left */}
-      <Field label="Optional field" required={false}>
-        <Input defaultValue="Input value" />
-      </Field>
+        <Field label={i18n.optionalLabel} required={false}>
+          <Input defaultValue={i18n.inputValue} />
+        </Field>
 
-      {/* Label + description + message — full vertical layout with directional icon */}
-      <Field
-        label="Field with description and message"
-        required={false}
-        description={lorem10}
-        message="This is a validation message"
-        sentiment="negative"
-      >
-        <Input defaultValue="Input value" />
-      </Field>
+        <Field
+          label={i18n.descriptionLabel}
+          required={false}
+          description={i18n.description}
+          message={i18n.validationMessage}
+          sentiment="negative"
+        >
+          <Input defaultValue={i18n.inputValue} />
+        </Field>
 
-      {/* Message only (no label) — InlinePrompt icon+text layout visible */}
-      <Field message="A helpful message" sentiment="positive">
-        <Input defaultValue="Input value" />
-      </Field>
+        <Field message={i18n.helpfulMessage} sentiment="positive">
+          <Input defaultValue={i18n.inputValue} />
+        </Field>
 
-      {/* Loading message — spinner replaces icon but layout structure is identical */}
-      <Field label="Field with loading message" message="Saving…" messageLoading>
-        <Input defaultValue="Input value" />
-      </Field>
+        <Field label={i18n.loadingLabel} message={i18n.savingMessage} messageLoading>
+          <Input defaultValue={i18n.inputValue} />
+        </Field>
 
-      {/* Textarea with char counter — counter uses text-align:right + margin-left:auto */}
-      <Field label="Textarea with char counter" required={false} description="Max 100 characters">
-        <TextArea maxLength={100} defaultValue="Textarea value" />
-      </Field>
-    </>
-  ),
-  ...withRTLDiff(),
+        <Field label={i18n.textareaLabel} required={false} description={i18n.maxChars}>
+          <TextArea maxLength={100} defaultValue={i18n.textareaValue} />
+        </Field>
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      requiredLabel: { ltr: 'Required field', rtl: 'حقل مطلوب' },
+      optionalLabel: { ltr: 'Optional field', rtl: 'حقل اختياري' },
+      descriptionLabel: { ltr: 'Field with description and message', rtl: 'حقل مع وصف ورسالة' },
+      description: { ltr: 'A short description of the field', rtl: 'وصف قصير للحقل' },
+      validationMessage: { ltr: 'This is a validation message', rtl: 'هذه رسالة تحقق' },
+      helpfulMessage: { ltr: 'A helpful message', rtl: 'رسالة مفيدة' },
+      loadingLabel: { ltr: 'Field with loading message', rtl: 'حقل مع رسالة تحميل' },
+      savingMessage: { ltr: 'Saving…', rtl: 'جارٍ الحفظ…' },
+      textareaLabel: { ltr: 'Textarea with char counter', rtl: 'حقل نص مع عداد الأحرف' },
+      maxChars: { ltr: 'Max 100 characters', rtl: 'الحد الأقصى 100 حرف' },
+      inputValue: { ltr: 'Input value', rtl: 'قيمة الإدخال' },
+      textareaValue: { ltr: 'Textarea value', rtl: 'قيمة حقل النص' },
+    },
+  }),
 };

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

@@ -0,0 +1,78 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import AvatarView from '../../AvatarView';
+import { ProfileType } from '../../common';
+import Logo from '../../Logo';
+
+import FlowNavigation from '../FlowNavigation';
+
+const noop = () => {};
+
+const steps = [
+  { label: 'Amount', hoverLabel: '100 GBP', onClick: noop },
+  { label: 'You', hoverLabel: 'Elena Durante', onClick: noop },
+  { label: 'Review', onClick: noop },
+  { label: 'Pay', onClick: noop },
+];
+
+const meta: Meta<typeof FlowNavigation> = {
+  component: FlowNavigation,
+  title: 'Navigation/FlowNavigation/Tests/RTL Diff',
+  tags: ['!autodocs', '!manifest'],
+  parameters: {
+    padding: '0',
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof FlowNavigation>;
+
+export const Desktop: Story = {
+  render: () => (
+    <>
+      <FlowNavigation
+        activeStep={2}
+        avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
+        logo={<Logo />}
+        steps={steps}
+        onClose={noop}
+        onGoBack={noop}
+      />
+      <FlowNavigation
+        avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
+        logo={<Logo />}
+        onClose={noop}
+      />
+      <FlowNavigation
+        done
+        avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
+        logo={<Logo />}
+        steps={steps}
+        onClose={noop}
+      />
+    </>
+  ),
+  ...withRTLDiff(),
+};
+
+export const Mobile: Story = {
+  render: () => (
+    <>
+      <FlowNavigation
+        activeStep={2}
+        avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
+        logo={<Logo />}
+        steps={steps}
+        onClose={noop}
+        onGoBack={noop}
+      />
+      <FlowNavigation
+        avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
+        logo={<Logo />}
+        onClose={noop}
+      />
+    </>
+  ),
+  ...withRTLDiff({ viewport: 'largeMobile' }),
+};

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

@@ -1,6 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import AvatarView from '../../AvatarView';
 import { ProfileType } from '../../common';
 import Logo from '../../Logo';
@@ -77,46 +76,3 @@ export const LongLabel: Story = {
     />
   ),
 };
-
-const rtlSteps = [
-  { label: 'Amount', hoverLabel: '100 GBP', onClick: noop },
-  { label: 'You', hoverLabel: 'Elena Durante', onClick: noop },
-  { label: 'Review', onClick: noop },
-  { label: 'Pay', onClick: noop },
-];
-
-/**
- * FlowNavigation has directional layout: back button on inline-start,
- * close button and avatar on inline-end, and a stepper progress bar that
- * flows in the reading direction. All of these flip in RTL.
- */
-export const RTLDiff: Story = {
-  render: () => (
-    <>
-      {/* With stepper, back button, close button, and avatar */}
-      <FlowNavigation
-        activeStep={2}
-        avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
-        logo={<Logo />}
-        steps={rtlSteps}
-        onClose={noop}
-        onGoBack={noop}
-      />
-      {/* Without stepper — logo left, close button right */}
-      <FlowNavigation
-        avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
-        logo={<Logo />}
-        onClose={noop}
-      />
-      {/* Done state — no stepper, logo and close button only */}
-      <FlowNavigation
-        done
-        avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
-        logo={<Logo />}
-        steps={rtlSteps}
-        onClose={noop}
-      />
-    </>
-  ),
-  ...withRTLDiff(),
-};

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

@@ -86,7 +86,7 @@ export const SectionTrailingSpaceWithAction: Story = {
 };
 
 export const AllVariants: Story = {
-  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green', 'rtl'], {
+  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green'], {
     parameters: {
       padding: '0',
     },

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

@@ -12,8 +12,6 @@ export default {
 
 type Story = StoryObj<typeof Info>;
 
-const iframeDiff = withRTLDiff({ renderAs: 'iframe' });
-
 const openInfo = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
   const canvas = within(canvasElement);
   const button = canvas.queryByRole('button');
@@ -21,32 +19,60 @@ const openInfo = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
   await userEvent.click(button);
 };
 
-export const Popover: Story = {
+export const PlacementTop: Story = {
+  render: () => (
+    <Info
+      aria-label="Info trigger"
+      title="Information"
+      content="This is some descriptive content inside the info component."
+      presentation="POPOVER"
+      preferredPlacement="top"
+    />
+  ),
+  play: openInfo,
+  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center', vAlign: 'bottom' }),
+};
+
+export const PlacementRight: Story = {
+  render: () => (
+    <Info
+      aria-label="Info trigger"
+      title="Information"
+      content="This is some descriptive content inside the info component."
+      presentation="POPOVER"
+      preferredPlacement="right"
+    />
+  ),
+  play: openInfo,
+  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'left', vAlign: 'center' }),
+};
+
+export const PlacementBottom: Story = {
   render: () => (
     <Info
       aria-label="Info trigger"
       title="Information"
       content="This is some descriptive content inside the info component."
       presentation="POPOVER"
-      size="sm"
+      preferredPlacement="bottom"
     />
   ),
   play: openInfo,
-  ...iframeDiff,
+  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center' }),
 };
 
-export const PopoverLarge: Story = {
+export const PlacementLeft: Story = {
   render: () => (
     <Info
       aria-label="Info trigger"
       title="Information"
       content="This is some descriptive content inside the info component."
       presentation="POPOVER"
-      size="lg"
+      preferredPlacement="left"
     />
   ),
   play: openInfo,
-  ...iframeDiff,
+  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'right', vAlign: 'center' }),
 };
 
 export const Modal: Story = {
@@ -56,9 +82,8 @@ export const Modal: Story = {
       title="Information"
       content="This is some descriptive content inside the info component."
       presentation="MODAL"
-      size="sm"
     />
   ),
   play: openInfo,
-  ...iframeDiff,
+  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center', vAlign: 'center' }),
 };

package/src/Info/_stories/Info.story.tsx

@@ -36,5 +36,5 @@ export const Sandbox = createSandboxStory({
 });
 
 export const Basic: Story = {
-  ...withVariantConfig(['default', 'dark', 'rtl']),
+  ...withVariantConfig(['default', 'dark']),
 };

package/src/Inputs/SelectInput/_stories/SelectInput.test.story.tsx

@@ -166,7 +166,7 @@ export const Variants: Story<TestCurrency> = {
       </div>
     );
   },
-  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green', 'rtl']),
+  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green']),
 };
 
 /**

package/src/Label/_stories/Label.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 Info from '../../Info';
 import Label from '..';
 
@@ -12,25 +12,38 @@ export default {
 type Story = StoryObj<typeof Label>;
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <Label>Plain label text</Label>
-      <Label>
-        <Label.Optional>Label with optional marker</Label.Optional>
-      </Label>
-      <Label>
-        <div>
-          Label with info icon{' '}
-          <Info content="Helpful tooltip content" aria-label="More information" />
-        </div>
-      </Label>
-      <Label>
-        <Label.Optional>
-          Label with optional and info icon{' '}
-          <Info content="Helpful tooltip content" aria-label="More information" />
-        </Label.Optional>
-      </Label>
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <Label>{i18n.plain}</Label>
+        <Label>
+          <Label.Optional>{i18n.optional}</Label.Optional>
+        </Label>
+        <Label>
+          <div>
+            {i18n.withInfo} <Info content={i18n.tooltip} aria-label={i18n.moreInfo} />
+          </div>
+        </Label>
+        <Label>
+          <Label.Optional>
+            {i18n.optionalWithInfo} <Info content={i18n.tooltip} aria-label={i18n.moreInfo} />
+          </Label.Optional>
+        </Label>
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      plain: { ltr: 'Plain label text', rtl: 'نص التسمية العادي' },
+      optional: { ltr: 'Label with optional marker', rtl: 'تسمية مع علامة اختيارية' },
+      withInfo: { ltr: 'Label with info icon', rtl: 'تسمية مع أيقونة معلومات' },
+      optionalWithInfo: {
+        ltr: 'Label with optional and info icon',
+        rtl: 'تسمية مع اختيارية وأيقونة معلومات',
+      },
+      tooltip: { ltr: 'Helpful tooltip content', rtl: 'محتوى تلميح مفيد' },
+      moreInfo: { ltr: 'More information', rtl: 'مزيد من المعلومات' },
+    },
+  }),
 };

package/src/ListItem/_stories/subcomponents.tsx

@@ -60,7 +60,7 @@ export const SB_LIST_ITEM_CONTROLS: Record<SB_ListItem_ControlType, ReactNode> =
   ),
   navigation: <ListItem.Navigation href="https://wise.com" />,
   navigationAsButton: <ListItem.Navigation onClick={fn()} />,
-  checkbox: <ListItem.Checkbox onChange={() => {}} />,
+  checkbox: <ListItem.Checkbox checked onChange={() => {}} />,
   radio: <ListItem.Radio name="radio" value={Math.random().toString()} onChange={() => {}} />,
   switch: <ListItem.Switch onClick={() => {}} />,
   iconButton: (

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

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import Loader from '..';
+
+export default {
+  component: Loader,
+  title: 'Loading/Loader/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Loader>;
+
+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(),
+};

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

@@ -84,5 +84,5 @@ export const OpenDropdown: Story = {
     if (!trigger) return;
     await userEvent.click(trigger);
   },
-  ...withRTLDiff({ renderAs: 'iframe', width: '80%' }),
+  ...withRTLDiff({ renderAs: 'iframe', width: '40%' }),
 };