@transferwise/components 46.158.0 → 46.159.1

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.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.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.test.story.tsx

@@ -2,7 +2,9 @@ import { useState } from 'react';
 import { userEvent, within } from 'storybook/test';
 import { 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';
 
 const meta: Meta<typeof TextArea> = {
@@ -140,3 +142,28 @@ export const CJKTypingBlocked: Story = {
     await userEvent.paste('吉𣘺吉𣘺吉𣘺');
   },
 };
+
+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.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.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.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/ListItem.css

@@ -619,6 +619,7 @@
 .wds-list-item-spotlight-inactive {
   background-color: rgba(134, 167, 189, 0.025);
 }
+
 @supports (color: color-mix(in lch, red, blue)) {
 .wds-list-item-spotlight-inactive {
   background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);

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.test.story.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import Logo, { LogoType } from '..';
 import { LogoFormat } from '../Logo';
 import type { LogoSize } from '../Logo';
@@ -93,3 +94,46 @@ export const Sizes = () => (
     )}
   </div>
 );
+
+const rtlSizes: LogoSize[] = [16, 20, 24, 36];
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: `repeat(${rtlSizes.length}, min-content)`,
+          gap: '1rem',
+          alignItems: 'center',
+        }}
+      >
+        {rtlSizes.map((size) => (
+          <Logo key={`compact-${size}`} size={size} display="compact" />
+        ))}
+      </div>
+
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: `repeat(${rtlSizes.length}, min-content)`,
+          gap: '1rem',
+          alignItems: 'center',
+        }}
+      >
+        {rtlSizes.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.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(),
+};