@transferwise/components 0.0.0-experimental-5f7dae1 → 0.0.0-experimental-20085a3

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

@@ -0,0 +1,118 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn, userEvent, within } from 'storybook/test';
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import ExpressiveMoneyInput from '..';
+import { Rewards } from '@transferwise/icons';
+
+export default {
+  component: ExpressiveMoneyInput,
+  title: 'Forms/ExpressiveMoneyInput/Tests/RTL Diff',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof ExpressiveMoneyInput>;
+
+type Story = StoryObj<typeof ExpressiveMoneyInput>;
+
+const currencySelectorOptions = [
+  {
+    title: 'Popular',
+    currencies: [
+      { code: 'GBP', label: 'British Pound', keywords: ['british'] },
+      { code: 'EUR', label: 'Euro', keywords: ['euro'] },
+      { code: 'USD', label: 'US Dollar', keywords: ['dollar'] },
+    ],
+  },
+];
+
+export const TriggerVariants: Story = {
+  render: () => (
+    <>
+      {/* Currency selector on leading side — flips in RTL */}
+      <ExpressiveMoneyInput
+        label="You send"
+        currency="GBP"
+        amount={1234.56}
+        currencySelector={{
+          options: currencySelectorOptions,
+          onChange: fn(),
+          onSearchChange: fn(),
+          onOpen: fn(),
+        }}
+        onAmountChange={fn()}
+      />
+
+      {/* Chevron on trailing side — flips in RTL */}
+      <ExpressiveMoneyInput
+        label="You send"
+        currency="EUR"
+        amount={0}
+        showChevron
+        currencySelector={{
+          options: currencySelectorOptions,
+          onChange: fn(),
+          onSearchChange: fn(),
+          onOpen: fn(),
+        }}
+        onAmountChange={fn()}
+      />
+
+      {/* InlinePrompt with media icon — icon on leading end of prompt */}
+      <ExpressiveMoneyInput
+        label="You send"
+        currency="USD"
+        amount={500}
+        currencySelector={{
+          options: currencySelectorOptions,
+          onChange: fn(),
+          onSearchChange: fn(),
+          onOpen: fn(),
+        }}
+        inlinePrompt={{
+          message: 'Great rate available',
+          sentiment: 'positive',
+          media: <Rewards />,
+        }}
+        onAmountChange={fn()}
+      />
+
+      {/* Secondary avatar addon in currency selector */}
+      <ExpressiveMoneyInput
+        label="You send"
+        currency="GBP"
+        amount={750}
+        currencySelector={{
+          options: currencySelectorOptions,
+          addons: [{ profileName: 'Mikkael Jordan' }],
+          onChange: fn(),
+          onSearchChange: fn(),
+          onOpen: fn(),
+        }}
+        onAmountChange={fn()}
+      />
+    </>
+  ),
+  ...withRTLDiff({ width: 'stretch' }),
+};
+
+export const OpenDropdown: Story = {
+  render: () => (
+    <ExpressiveMoneyInput
+      label="You send"
+      currency="GBP"
+      amount={1234.56}
+      currencySelector={{
+        options: currencySelectorOptions,
+        onChange: fn(),
+        onSearchChange: fn(),
+        onOpen: fn(),
+      }}
+      onAmountChange={fn()}
+    />
+  ),
+  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/Field/_stories/Field.rtl.test.story.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { Input } from '../../Inputs/Input/Input';
+import { TextArea } from '../../Inputs/TextArea/TextArea';
+import { lorem10 } from '../../test-utils';
+import Field from '..';
+
+export default {
+  component: Field,
+  title: 'Forms/Field/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Field>;
+
+type Story = StoryObj<typeof Field>;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      {/* Required label (default) — label text aligns to start */}
+      <Field label="Required field">
+        <Input defaultValue="Input value" />
+      </Field>
+
+      {/* Optional label — "(optional)" suffix uses directional margin-left */}
+      <Field label="Optional field" required={false}>
+        <Input defaultValue="Input value" />
+      </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>
+
+      {/* Message only (no label) — InlinePrompt icon+text layout visible */}
+      <Field message="A helpful message" sentiment="positive">
+        <Input defaultValue="Input value" />
+      </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>
+
+      {/* 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(),
+};

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

@@ -0,0 +1,70 @@
+import type { 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 '..';
+
+export default {
+  component: FlowNavigation,
+  title: 'Navigation/FlowNavigation/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof FlowNavigation>;
+
+type Story = StoryObj<typeof 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 },
+];
+
+/**
+ * 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={steps}
+        onClose={noop}
+        onGoBack={noop}
+      />
+      {/* Without stepper — logo left, close button right */}
+      <FlowNavigation
+        avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
+        logo={<Logo />}
+        onClose={noop}
+      />
+      {/* Composable variant with stepper */}
+      <FlowNavigation
+        composable
+        activeStep={1}
+        avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
+        logo={<Logo />}
+        steps={steps}
+        onClose={noop}
+        onGoBack={noop}
+      />
+      {/* Done state — no stepper, logo and close button only */}
+      <FlowNavigation
+        done
+        avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
+        logo={<Logo />}
+        steps={steps}
+        onClose={noop}
+      />
+    </>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import Header from '..';
+
+export default {
+  component: Header,
+  title: 'Typography/Header/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Header>;
+
+type Story = StoryObj<typeof Header>;
+
+/**
+ * The Header uses a CSS grid layout (1fr auto) that places the action on the
+ * inline-end side. In RTL the action should appear on the left instead of the
+ * right. Both level variants are included to cover the border-bottom alignment
+ * difference.
+ */
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <Header title="Group level without action" level="group" />
+      <Header
+        title="Group level with action"
+        level="group"
+        action={{ 'aria-label': 'View all', text: 'View all', href: '#' }}
+      />
+      <Header title="Section level without action" level="section" />
+      <Header
+        title="Section level with action"
+        level="section"
+        action={{ 'aria-label': 'Learn more', text: 'Learn more', href: '#' }}
+      />
+    </>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within } from 'storybook/test';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import Info from '..';
+
+export default {
+  component: Info,
+  title: 'Dialogs/Info/Tests/RTL Diff',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Info>;
+
+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');
+  if (!button) return;
+  await userEvent.click(button);
+};
+
+export const Popover: Story = {
+  render: () => (
+    <Info
+      aria-label="Info trigger"
+      title="Information"
+      content="This is some descriptive content inside the info component."
+      presentation="POPOVER"
+      size="sm"
+    />
+  ),
+  play: openInfo,
+  ...iframeDiff,
+};
+
+export const PopoverLarge: Story = {
+  render: () => (
+    <Info
+      aria-label="Info trigger"
+      title="Information"
+      content="This is some descriptive content inside the info component."
+      presentation="POPOVER"
+      size="lg"
+    />
+  ),
+  play: openInfo,
+  ...iframeDiff,
+};
+
+export const Modal: Story = {
+  render: () => (
+    <Info
+      aria-label="Info trigger"
+      title="Information"
+      content="This is some descriptive content inside the info component."
+      presentation="MODAL"
+      size="sm"
+    />
+  ),
+  play: openInfo,
+  ...iframeDiff,
+};

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

@@ -0,0 +1,135 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within } from 'storybook/test';
+import { Flag } from '@wise/art';
+
+import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import { SelectInput, SelectInputOptionContent } from '..';
+
+export default {
+  component: SelectInput,
+  title: 'Forms/SelectInput/Tests/RTL Diff',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof SelectInput>;
+
+type Story = StoryObj<typeof SelectInput>;
+
+interface RtlCurrency {
+  code: string;
+  name: string;
+}
+
+const rtlCurrencies: RtlCurrency[] = [
+  { code: 'USD', name: 'United States Dollar' },
+  { code: 'EUR', name: 'Euro' },
+  { code: 'GBP', name: 'British pound' },
+];
+
+export const TriggerVariants: Story = {
+  render: () => (
+    <>
+      {/* sm — chevron position flips in RTL */}
+      <SelectInput
+        size="sm"
+        placeholder="Select currency"
+        items={rtlCurrencies.map((currency) => ({ type: 'option', value: currency }))}
+        renderValue={(currency) => <SelectInputOptionContent title={currency.code} />}
+      />
+
+      {/* md — chevron position flips in RTL */}
+      <SelectInput
+        size="md"
+        placeholder="Select currency"
+        items={rtlCurrencies.map((currency) => ({ type: 'option', value: currency }))}
+        renderValue={(currency) => <SelectInputOptionContent title={currency.code} />}
+      />
+
+      {/* lg with value and leading icon — icon side and chevron flip in RTL */}
+      <SelectInput
+        size="lg"
+        placeholder="Select currency"
+        defaultValue={rtlCurrencies[0]}
+        items={rtlCurrencies.map((currency) => ({ type: 'option', value: currency }))}
+        renderValue={(currency) => (
+          <SelectInputOptionContent
+            title={currency.code}
+            note={currency.name}
+            icon={<Flag code={currency.code} intrinsicSize={24} />}
+          />
+        )}
+      />
+
+      {/* multiple — selected values on leading side, chevron on trailing side, both flip in RTL */}
+      <SelectInput
+        size="lg"
+        multiple
+        placeholder="Choose currencies"
+        defaultValue={[rtlCurrencies[0], rtlCurrencies[1]]}
+        items={rtlCurrencies.map((currency) => ({ type: 'option', value: currency }))}
+        renderValue={(currency, withinTrigger) =>
+          withinTrigger ? (
+            currency.code
+          ) : (
+            <SelectInputOptionContent title={currency.code} note={currency.name} />
+          )
+        }
+      />
+    </>
+  ),
+  ...withRTLDiff(),
+};
+
+const otherCurrencies: RtlCurrency[] = [
+  { code: 'CAD', name: 'Canadian dollar' },
+  { code: 'AUD', name: 'Australian dollar' },
+  { code: 'JPY', name: 'Japanese yen' },
+];
+
+const groupedItems = [
+  {
+    type: 'group' as const,
+    label: 'Popular currencies',
+    options: rtlCurrencies.map((currency) => ({
+      type: 'option' as const,
+      value: currency,
+      filterMatchers: [currency.code, currency.name],
+    })),
+  },
+  {
+    type: 'group' as const,
+    label: 'All currencies',
+    options: [...rtlCurrencies, ...otherCurrencies]
+      .sort((a, b) => a.code.localeCompare(b.code))
+      .map((currency) => ({
+        type: 'option' as const,
+        value: currency,
+        filterMatchers: [currency.code, currency.name],
+      })),
+  },
+];
+
+export const OpenDropdown: Story = {
+  render: () => (
+    <SelectInput
+      size="lg"
+      filterable
+      filterPlaceholder="Type a currency / country"
+      placeholder="Select currency"
+      defaultValue={rtlCurrencies[0]}
+      items={groupedItems}
+      renderValue={(currency, withinTrigger) => (
+        <SelectInputOptionContent
+          title={currency.code}
+          note={withinTrigger ? undefined : currency.name}
+          icon={<Flag code={currency.code} intrinsicSize={24} />}
+        />
+      )}
+    />
+  ),
+  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/Inputs/_stories/InputGroup.rtl.test.story.tsx

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Search } from '@transferwise/icons';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import Button from '../../Button';
+import { Input } from '../Input/Input';
+import { InputGroup } from '../InputGroup/InputGroup';
+
+export default {
+  component: InputGroup,
+  title: 'Forms/InputGroup/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof InputGroup>;
+
+type Story = StoryObj<typeof InputGroup>;
+
+/**
+ * InputGroup positions addons at the logical start or end of an input.
+ * In RTL mode the start and end sides are mirrored, so an addonStart icon
+ * should appear on the right and an addonEnd button should appear on the left.
+ * All three placement combinations are included to verify each case.
+ */
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <InputGroup
+        addonStart={{
+          content: <Search size={24} />,
+          initialContentWidth: 24,
+        }}
+      >
+        <Input placeholder="addonStart only" />
+      </InputGroup>
+
+      <InputGroup
+        addonEnd={{
+          content: (
+            <Button v2 size="sm">
+              Copy
+            </Button>
+          ),
+          interactive: true,
+          padding: 'sm',
+        }}
+      >
+        <Input placeholder="addonEnd only" />
+      </InputGroup>
+
+      <InputGroup
+        addonStart={{
+          content: <Search size={24} />,
+          initialContentWidth: 24,
+        }}
+        addonEnd={{
+          content: (
+            <Button v2 size="sm">
+              Clear
+            </Button>
+          ),
+          interactive: true,
+          padding: 'sm',
+        }}
+      >
+        <Input placeholder="addonStart and addonEnd" />
+      </InputGroup>
+    </>
+  ),
+  ...withRTLDiff(),
+};

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(),
+};