@transferwise/components 0.0.0-experimental-99bbbb3 → 0.0.0-experimental-20085a3

package/src/Inputs/_stories/SearchInput.rtl.test.story.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { Size } from '../../common';
+import { SearchInput } from '../SearchInput/SearchInput';
+
+export default {
+  component: SearchInput,
+  title: 'Forms/SearchInput/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof SearchInput>;
+
+type Story = StoryObj<typeof SearchInput>;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      {/* sm — search icon (addonStart) position flips to trailing side in RTL */}
+      <SearchInput size={Size.SMALL} shape="pill" placeholder="Search" />
+
+      {/* md — search icon (addonStart) position flips to trailing side in RTL */}
+      <SearchInput size={Size.MEDIUM} shape="pill" placeholder="Search" />
+
+      {/* sm rectangle — icon flip with rectangle shape */}
+      <SearchInput size={Size.SMALL} shape="rectangle" placeholder="Search" />
+
+      {/* md rectangle — icon flip with rectangle shape */}
+      <SearchInput size={Size.MEDIUM} shape="rectangle" placeholder="Search" />
+    </>
+  ),
+  ...withRTLDiff(),
+};

package/src/Inputs/_stories/TextArea.rtl.test.story.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import Field from '../../Field';
+import { Sentiment } from '../../common';
+import { TextArea } from '../TextArea/TextArea';
+
+export default {
+  component: TextArea,
+  title: 'Forms/TextArea/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof TextArea>;
+
+type Story = StoryObj<typeof TextArea>;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <Field label="Message" required={false}>
+        <TextArea placeholder="Type something..." />
+      </Field>
+      <Field label="Message" required={false}>
+        <TextArea value="This is some entered text content in the textarea field." readOnly />
+      </Field>
+      <Field
+        label="Message"
+        required={false}
+        sentiment={Sentiment.NEGATIVE}
+        message="This field has an error message"
+      >
+        <TextArea value="Invalid input text" readOnly />
+      </Field>
+      <Field label="Message with character count" required={false}>
+        <TextArea maxLength={200} value="Text with a character counter displayed below." readOnly />
+      </Field>
+    </>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import InstructionsList from '..';
+
+export default {
+  component: InstructionsList,
+  title: 'Typography/InstructionsList/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof InstructionsList>;
+
+type Story = StoryObj<typeof InstructionsList>;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <InstructionsList
+        dos={['Do an initial money transfer', 'Invite at least 3 friends to join']}
+        donts={['Paying extra hidden fees for transfers', 'Use bad exchange rate']}
+        sort="dosFirst"
+      />
+      <InstructionsList
+        dos={['Complete your profile verification']}
+        donts={['Share your login credentials with others']}
+        sort="dontsFirst"
+      />
+    </>
+  ),
+  ...withRTLDiff(),
+};

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

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

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

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

package/src/ListItem/_stories/{variants/ListItem.rtl.test.story.tsx → ListItem.rtl.test.story.tsx}

@@ -1,22 +1,18 @@
 import { Meta } from '@storybook/react-webpack5';
-import { ListItem, type ListItemProps } from '../../ListItem';
-import { VariantStory } from './helpers';
-import { withVariantConfig } from '../../../../.storybook/helpers';
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { ListItem, type ListItemProps } from '../ListItem';
+import { VariantStory } from './variants/helpers';
 
 export default {
   component: ListItem,
-  title: 'Content/ListItem/Tests/variants/rtl',
+  title: 'Content/ListItem/Tests/RTL Diff',
   tags: ['!autodocs', '!manifest'],
-  parameters: {
-    controls: { disable: true },
-    actions: { disable: true },
-    knobs: { disable: true },
-  },
+  ...withRTLDiff({ width: 'stretch' }),
 } satisfies Meta<ListItemProps>;
 
 const Default = {
   ...VariantStory,
-  ...withVariantConfig(['rtl'], VariantStory),
+  parameters: { variants: [] },
   args: { variant: 'rtl' },
 };
 

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

@@ -141,12 +141,8 @@ export const VariantStory: VariantStory = {
 
     return (
       <List>
-        {instances.map((instance) => (
-          <ListItem
-            key={`${variant}-${controlType}-${JSON.stringify(instance)}`}
-            control={control}
-            {...instance}
-          />
+        {instances.map((instance, index) => (
+          <ListItem key={`${variant}-${controlType}-${index}`} control={control} {...instance} />
         ))}
       </List>
     );

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

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import Logo, { LogoType } from '..';
+import type { LogoSize } from '..';
+
+export default {
+  component: Logo,
+  title: 'Content/Logo/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Logo>;
+
+type Story = StoryObj<typeof Logo>;
+
+const sizes: LogoSize[] = [16, 20, 24, 36];
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: `repeat(${sizes.length}, min-content)`,
+          gap: '1rem',
+          alignItems: 'center',
+        }}
+      >
+        {sizes.map((size) => (
+          <Logo key={`compact-${size}`} size={size} display="compact" />
+        ))}
+      </div>
+
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: `repeat(${sizes.length}, min-content)`,
+          gap: '1rem',
+          alignItems: 'center',
+        }}
+      >
+        {sizes.map((size) => (
+          <Logo key={`full-${size}`} size={size} display="full" />
+        ))}
+      </div>
+
+      {Object.values(LogoType).map((type) => (
+        <Logo key={`primary-${type}`} type={type} format="primary-lockup" display="full" />
+      ))}
+
+      {Object.values(LogoType).map((type) => (
+        <Logo key={`secondary-${type}`} type={type} format="secondary-lockup" display="full" />
+      ))}
+    </>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { Button, Modal } from '../..';
+
+export default {
+  component: Modal,
+  title: 'Dialogs/Modal/Tests/RTL Diff',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Modal>;
+
+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,
+};
+
+export const WithoutFooter: Story = {
+  render: () => (
+    <Modal
+      open
+      title="Modal without footer"
+      body="Body content without a footer."
+      onClose={() => {}}
+    />
+  ),
+  ...iframeDiff,
+};
+
+export const WithoutTitle: Story = {
+  render: () => (
+    <Modal
+      open
+      body="Body content without a title."
+      footer={
+        <Button v2 block>
+          Done
+        </Button>
+      }
+      onClose={() => {}}
+    />
+  ),
+  ...iframeDiff,
+};

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

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within } from 'storybook/test';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import Field from '../../Field/Field';
+import MoneyInput from '..';
+
+export default {
+  component: MoneyInput,
+  title: 'Forms/MoneyInput/Tests/RTL Diff',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof MoneyInput>;
+
+type Story = StoryObj<typeof MoneyInput>;
+
+const eurCurrency = {
+  value: 'EUR',
+  label: 'EUR',
+  note: 'Euro',
+  currency: 'eur',
+} as const;
+
+const gbpCurrency = {
+  value: 'GBP',
+  label: 'GBP',
+  note: 'British pound',
+  currency: 'gbp',
+} as const;
+
+const multipleCurrencies = [eurCurrency, gbpCurrency] as const;
+
+const sharedProps = {
+  amount: 1000,
+  id: 'money-input',
+  onAmountChange: () => {},
+  onCurrencyChange: () => {},
+} as const;
+
+export const TriggerVariants: Story = {
+  render: () => (
+    <>
+      <Field label="Single currency — large (flag + code)">
+        <MoneyInput {...sharedProps} size="lg" currencies={[]} selectedCurrency={eurCurrency} />
+      </Field>
+      <Field label="Single currency — medium (flag + code)">
+        <MoneyInput {...sharedProps} size="md" currencies={[]} selectedCurrency={eurCurrency} />
+      </Field>
+      <Field label="Single currency — small (code only)">
+        <MoneyInput {...sharedProps} size="sm" currencies={[]} selectedCurrency={eurCurrency} />
+      </Field>
+      <Field label="Multiple currencies — large (select trigger with flag)">
+        <MoneyInput
+          {...sharedProps}
+          size="lg"
+          currencies={multipleCurrencies}
+          selectedCurrency={eurCurrency}
+        />
+      </Field>
+      <Field label="Multiple currencies — small (select trigger without flag)">
+        <MoneyInput
+          {...sharedProps}
+          size="sm"
+          currencies={multipleCurrencies}
+          selectedCurrency={eurCurrency}
+        />
+      </Field>
+    </>
+  ),
+  ...withRTLDiff(),
+};
+
+export const OpenDropdown: Story = {
+  render: () => (
+    <MoneyInput
+      {...sharedProps}
+      size="lg"
+      currencies={multipleCurrencies}
+      selectedCurrency={eurCurrency}
+    />
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.queryByRole('combobox');
+    if (!trigger) return;
+    await userEvent.click(trigger);
+  },
+  ...withRTLDiff({ renderAs: 'iframe', width: '80%' }),
+};

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

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import Nudge from '../Nudge';
+
+export default {
+  component: Nudge,
+  title: 'Prompts/Nudge/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Nudge>;
+
+type Story = StoryObj<typeof Nudge>;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <Nudge
+        mediaName="globe"
+        title="With media and dismiss"
+        link="Link"
+        href="#"
+        onDismiss={() => {}}
+      />
+      <div style={{ marginTop: 16 }} />
+      <Nudge
+        mediaName="globe"
+        title="With media, action, and dismiss"
+        action={{ text: 'Learn more', href: '#' }}
+        onDismiss={() => {}}
+      />
+      <div style={{ marginTop: 16 }} />
+      <Nudge title="Without media, with dismiss" link="Link" href="#" onDismiss={() => {}} />
+      <div style={{ marginTop: 16 }} />
+      <Nudge title="Without media, no dismiss" link="Link" href="#" />
+    </>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import Field from '../../Field/Field';
+import PhoneNumberInput from '..';
+
+export default {
+  component: PhoneNumberInput,
+  title: 'Forms/PhoneNumberInput/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof PhoneNumberInput>;
+
+type Story = StoryObj<typeof PhoneNumberInput>;
+
+/**
+ * The country code selector sits on the inline-start side of the phone number input.
+ * In RTL the two elements should swap sides — the selector moves to the right and
+ * the text field moves to the left. This diff verifies the flex row reverses correctly.
+ *
+ * Size variants are included because the size prop changes the input-group class and
+ * may affect spacing between the two sub-inputs.
+ */
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <Field label="Default (md)">
+        <PhoneNumberInput onChange={() => {}} />
+      </Field>
+
+      <Field label="Small (sm)">
+        <PhoneNumberInput size="sm" onChange={() => {}} />
+      </Field>
+
+      <Field label="Large (lg)">
+        <PhoneNumberInput size="lg" onChange={() => {}} />
+      </Field>
+
+      <Field label="With initial value">
+        <PhoneNumberInput initialValue="+447573135343" onChange={() => {}} />
+      </Field>
+    </>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -0,0 +1,96 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within } from 'storybook/test';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import Button from '../../Button';
+import { Position } from '../../common';
+import Popover from '..';
+
+export default {
+  component: Popover,
+  title: 'Dialogs/Popover/Tests/RTL Diff',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Popover>;
+
+type Story = StoryObj<typeof Popover>;
+
+const iframeDiff = withRTLDiff({ renderAs: 'iframe' });
+
+const containerStyle: React.CSSProperties = {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  minHeight: '24rem',
+  width: '100%',
+};
+
+const clickTrigger = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+  const canvas = within(canvasElement);
+  const trigger = canvas.queryByRole('button');
+  if (!trigger) return;
+  await userEvent.click(trigger);
+};
+
+export const PlacementRight: Story = {
+  render: () => (
+    <div style={containerStyle}>
+      <Popover
+        preferredPlacement={Position.RIGHT}
+        title="Guaranteed rate"
+        content="You'll get this rate as long as we receive your 10 EUR within the next 51 hours."
+      >
+        <Button v2>Placement right</Button>
+      </Popover>
+    </div>
+  ),
+  play: clickTrigger,
+  ...iframeDiff,
+};
+
+export const PlacementLeft: Story = {
+  render: () => (
+    <div style={containerStyle}>
+      <Popover
+        preferredPlacement={Position.LEFT}
+        title="Guaranteed rate"
+        content="You'll get this rate as long as we receive your 10 EUR within the next 51 hours."
+      >
+        <Button v2>Placement left</Button>
+      </Popover>
+    </div>
+  ),
+  play: clickTrigger,
+  ...iframeDiff,
+};
+
+export const PlacementTop: Story = {
+  render: () => (
+    <div style={containerStyle}>
+      <Popover
+        preferredPlacement={Position.TOP}
+        title="Guaranteed rate"
+        content="You'll get this rate as long as we receive your 10 EUR within the next 51 hours."
+      >
+        <Button v2>Placement top</Button>
+      </Popover>
+    </div>
+  ),
+  play: clickTrigger,
+  ...iframeDiff,
+};
+
+export const PlacementBottom: Story = {
+  render: () => (
+    <div style={containerStyle}>
+      <Popover
+        preferredPlacement={Position.BOTTOM}
+        title="Guaranteed rate"
+        content="You'll get this rate as long as we receive your 10 EUR within the next 51 hours."
+      >
+        <Button v2>Placement bottom</Button>
+      </Popover>
+    </div>
+  ),
+  play: clickTrigger,
+  ...iframeDiff,
+};

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

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import Progress from '..';
+
+export default {
+  component: Progress,
+  title: 'Other/Progress/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Progress>;
+
+type Story = StoryObj<typeof Progress>;
+
+/**
+ * The native <progress> element fills in the inline direction,
+ * so partial progress flips from left-to-right to right-to-left in RTL.
+ */
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <Progress id="progress-quarter" progress={{ value: 25, max: 100 }} />
+      <Progress id="progress-half" progress={{ value: 50, max: 100 }} />
+      <Progress id="progress-three-quarters" progress={{ value: 75, max: 100 }} />
+    </>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import ProgressBar from '..';
+
+export default {
+  component: ProgressBar,
+  title: 'Content/ProgressBar/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof ProgressBar>;
+
+type Story = StoryObj<typeof ProgressBar>;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <ProgressBar
+        id="progress-bar-with-description"
+        title="Send 5,550 GBP"
+        description="You have 3 days to reach your goal."
+        progress={{ value: 50, max: 100 }}
+        textEnd="200 GBP to go"
+      />
+      <ProgressBar
+        id="progress-bar-without-description"
+        title="Total limit"
+        progress={{ value: 800, max: 1000 }}
+        textEnd="200 GBP remaining"
+      />
+    </>
+  ),
+  ...withRTLDiff(),
+};