@transferwise/components 46.158.0 → 46.159.1

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

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { Width } from '../../common';
+import Tabs from '..';
+
+export default {
+  component: Tabs,
+  title: 'Navigation/Tabs/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Tabs>;
+
+type Story = StoryObj<typeof Tabs>;
+
+const defaultTabs = [
+  { title: 'First tab', disabled: false, content: <div className="p-a-2">First content</div> },
+  { title: 'Second tab', disabled: false, content: <div className="p-a-2">Second content</div> },
+  { title: 'Third tab', disabled: false, content: <div className="p-a-2">Third content</div> },
+];
+
+/**
+ * The tab list is horizontal: tab order, the active indicator translateX, and
+ * swipe direction all flip between LTR and RTL. The indicator uses a negated
+ * translateX in RTL mode. This diff verifies the layout mirrors correctly.
+ */
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <div style={{ marginBottom: 32 }}>
+        <h4>Block width — first tab selected</h4>
+        <Tabs
+          name="rtl-block-first"
+          tabs={defaultTabs}
+          selected={0}
+          headerWidth={Width.BLOCK}
+          onTabSelect={() => {}}
+        />
+      </div>
+      <div style={{ marginBottom: 32 }}>
+        <h4>Block width — second tab selected</h4>
+        <Tabs
+          name="rtl-block-second"
+          tabs={defaultTabs}
+          selected={1}
+          headerWidth={Width.BLOCK}
+          onTabSelect={() => {}}
+        />
+      </div>
+      <div style={{ marginBottom: 32 }}>
+        <h4>Auto width — first tab selected</h4>
+        <Tabs
+          name="rtl-auto-first"
+          tabs={defaultTabs}
+          selected={0}
+          headerWidth={Width.AUTO}
+          onTabSelect={() => {}}
+        />
+      </div>
+      <div style={{ marginBottom: 32 }}>
+        <h4>Auto width — second tab selected</h4>
+        <Tabs
+          name="rtl-auto-second"
+          tabs={defaultTabs}
+          selected={1}
+          headerWidth={Width.AUTO}
+          onTabSelect={() => {}}
+        />
+      </div>
+    </>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import TextareaWithDisplayFormat from '..';
+import Field from '../../Field/Field';
+
+export default {
+  component: TextareaWithDisplayFormat,
+  title: 'Forms/TextareaWithDisplayFormat/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof TextareaWithDisplayFormat>;
+
+type Story = StoryObj<typeof TextareaWithDisplayFormat>;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <Field id="card-code" label="Gift card code">
+        <TextareaWithDisplayFormat
+          id="card-code"
+          value="1234567890123456"
+          maxLength={16}
+          displayPattern="**** - **** - ****"
+          onChange={() => {}}
+        />
+      </Field>
+      <Field id="iban" label="IBAN">
+        <TextareaWithDisplayFormat
+          id="iban"
+          value="GB29NWBK60161331926819"
+          maxLength={22}
+          displayPattern="** **** **** **** **** **"
+          onChange={() => {}}
+        />
+      </Field>
+      <Field id="empty" label="Empty with placeholder">
+        <TextareaWithDisplayFormat
+          id="empty"
+          value=""
+          displayPattern="**** - **** - ****"
+          placeholder="Enter code"
+          onChange={() => {}}
+        />
+      </Field>
+    </>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -0,0 +1,79 @@
+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 Tooltip from '../Tooltip';
+
+export default {
+  component: Tooltip,
+  title: 'Dialogs/Tooltip/Tests/RTL Diff',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Tooltip>;
+
+type Story = StoryObj<typeof Tooltip>;
+
+const iframeDiff = withRTLDiff({ renderAs: 'iframe' });
+
+const containerStyle: React.CSSProperties = {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  minHeight: '20rem',
+  width: '100%',
+};
+
+const hoverTrigger = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+  const canvas = within(canvasElement);
+  const button = canvas.queryByRole('button');
+  if (!button) return;
+  await userEvent.hover(button);
+};
+
+export const PositionTop: Story = {
+  render: () => (
+    <div style={containerStyle}>
+      <Tooltip label="Top positioned tooltip" position="top">
+        <Button>Top</Button>
+      </Tooltip>
+    </div>
+  ),
+  play: hoverTrigger,
+  ...iframeDiff,
+};
+
+export const PositionBottom: Story = {
+  render: () => (
+    <div style={containerStyle}>
+      <Tooltip label="Bottom positioned tooltip" position="bottom">
+        <Button>Bottom</Button>
+      </Tooltip>
+    </div>
+  ),
+  play: hoverTrigger,
+  ...iframeDiff,
+};
+
+export const PositionRight: Story = {
+  render: () => (
+    <div style={containerStyle}>
+      <Tooltip label="Right positioned tooltip" position="right">
+        <Button>Right</Button>
+      </Tooltip>
+    </div>
+  ),
+  play: hoverTrigger,
+  ...iframeDiff,
+};
+
+export const PositionLeft: Story = {
+  render: () => (
+    <div style={containerStyle}>
+      <Tooltip label="Left positioned tooltip" position="left">
+        <Button>Left</Button>
+      </Tooltip>
+    </div>
+  ),
+  play: hoverTrigger,
+  ...iframeDiff,
+};

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

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within } from 'storybook/test';
+import { Search as SearchIcon } from '@transferwise/icons';
+
+import { forEachColumn, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { Size } from '../../common';
+import Typeahead from '..';
+
+export default {
+  component: Typeahead,
+  title: 'Forms/Typeahead/Tests/RTL Diff',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Typeahead>;
+
+type Story = StoryObj<typeof Typeahead>;
+
+const baseOptions = [
+  { label: 'British pound', note: 'GBP' },
+  { label: 'Euro', note: 'EUR' },
+  { label: 'US Dollar', note: 'USD' },
+];
+
+export const TriggerVariants: Story = {
+  render: () => (
+    <>
+      <Typeahead
+        id="rtl-addon-md"
+        name="rtl-addon-md"
+        placeholder="Search currencies…"
+        size={Size.MEDIUM}
+        addon={<SearchIcon size={24} />}
+        clearable
+        options={baseOptions}
+        initialValue={[{ label: 'British pound', note: 'GBP' }]}
+        onChange={() => {}}
+      />
+      <Typeahead
+        id="rtl-addon-lg"
+        name="rtl-addon-lg"
+        placeholder="Search currencies…"
+        size={Size.LARGE}
+        addon={<SearchIcon size={24} />}
+        clearable
+        options={baseOptions}
+        initialValue={[{ label: 'Euro', note: 'EUR' }]}
+        onChange={() => {}}
+      />
+      <Typeahead
+        id="rtl-multiple"
+        name="rtl-multiple"
+        placeholder="Search currencies…"
+        size={Size.MEDIUM}
+        addon={<SearchIcon size={24} />}
+        multiple
+        clearable
+        options={baseOptions}
+        initialValue={[
+          { label: 'British pound', note: 'GBP' },
+          { label: 'Euro', note: 'EUR' },
+        ]}
+        onChange={() => {}}
+      />
+    </>
+  ),
+  ...withRTLDiff({ width: '80%' }),
+};
+
+export const OpenDropdown: Story = {
+  render: () => (
+    <Typeahead
+      id="rtl-open"
+      name="rtl-open"
+      placeholder="Search currencies…"
+      size={Size.LARGE}
+      addon={<SearchIcon size={24} />}
+      clearable
+      options={baseOptions}
+      onChange={() => {}}
+    />
+  ),
+  play: async ({ canvasElement }) => {
+    await forEachColumn(canvasElement, async (column) => {
+      const scope = within(column);
+      const input = scope.getByRole('combobox');
+      await userEvent.click(input);
+      await userEvent.keyboard('Brit');
+    });
+  },
+  ...withRTLDiff({ width: '80%' }),
+};

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

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within } from 'storybook/test';
+
+import { forEachColumn, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import Upload from '..';
+
+export default {
+  component: Upload,
+  title: 'Forms/Upload/Tests/RTL Diff',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Upload>;
+
+type Story = StoryObj<typeof Upload>;
+
+export const Sizes: Story = {
+  render: () => (
+    <>
+      <Upload usLabel="Small upload" size="sm" />
+      <Upload usLabel="Medium upload" size="md" />
+      <Upload usLabel="Large upload" size="lg" />
+    </>
+  ),
+  ...withRTLDiff(),
+};
+
+export const WithError: Story = {
+  render: () => (
+    <Upload
+      usAccept="*"
+      usLabel="Upload a file"
+      usPlaceholder="Maximum filesize is 1B"
+      maxSize={1}
+      size="md"
+      httpOptions={{
+        url: 'https://httpbin.org/post',
+        method: 'POST',
+      }}
+    />
+  ),
+  play: async ({ canvasElement }) => {
+    await forEachColumn(canvasElement, async (column) => {
+      const fileInput = column.querySelector<HTMLInputElement>('input[type="file"]');
+      if (!fileInput) return;
+      const file = new File(['content larger than 1 byte'], 'test-file.txt', {
+        type: 'text/plain',
+      });
+      await userEvent.upload(fileInput, file);
+      const scope = within(column);
+      await scope.findByText(/Maximum filesize is/i, {}, { timeout: 3000 });
+    });
+  },
+  ...withRTLDiff(),
+};

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

@@ -5,6 +5,7 @@ import { Status } from '../../common';
 import UploadInput, { UploadInputProps } from '../UploadInput';
 import { UploadedFile, UploadResponse } from '../types';
 import { userEvent } from 'storybook/test';
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 
 const meta: Meta<typeof UploadInput> = {
   title: 'Forms/UploadInput/Tests',
@@ -300,3 +301,49 @@ export const DeletingBottom: Story = {
     await triggerModalAndConfirm();
   },
 };
+
+const noOpUpload = async () => ({ id: 'upload-1' });
+const noOpDelete = async () => {};
+
+const mixedFiles = [
+  { id: 'file-1', filename: 'document-front.pdf', url: '#' },
+  { id: 'file-2', filename: 'succeeded-file.pdf', url: '#' },
+  { id: 'file-3', filename: 'failed-file.png', status: Status.FAILED },
+  { id: 'file-4', filename: 'valid-document.pdf', url: '#' },
+  {
+    id: 'file-5',
+    filename: 'too-large-image.png',
+    status: Status.FAILED,
+    errors: [
+      'File size exceeds the 5MB limit',
+      'Please compress the image or choose a smaller file',
+      'Supported formats: JPG, PNG under 5MB',
+    ],
+  },
+  {
+    id: 'file-6',
+    filename: 'corrupted-file.pdf',
+    status: Status.FAILED,
+    error: 'File could not be processed',
+  },
+];
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <UploadInput onUploadFile={noOpUpload} />
+      <UploadInput
+        files={[{ id: 'file-s', filename: 'single-upload.pdf', url: '#' }]}
+        onUploadFile={noOpUpload}
+        onDeleteFile={noOpDelete}
+      />
+      <UploadInput
+        multiple
+        files={mixedFiles}
+        onUploadFile={noOpUpload}
+        onDeleteFile={noOpDelete}
+      />
+    </>
+  ),
+  ...withRTLDiff(),
+};

package/src/_deprecated/Alert/_stories/Alert.test.story.tsx

@@ -2,7 +2,8 @@ import { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { userEvent, within, expect, waitFor } from 'storybook/test';
 import { Button, Field, SelectInput, Sentiment } from '../../..';
-import Alert, { type AlertProps } from '../Alert';
+import Alert, { type AlertProps, AlertArrowPosition } from '../Alert';
+import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
 
 const meta = {
   title: 'Prompts/Alert/Tests',
@@ -131,3 +132,29 @@ export const MultipleDynamicAlerts: Story = {
     );
   },
 };
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <Alert message="Basic alert without dismiss button." />
+      <Alert message="Alert with dismiss button." onDismiss={() => {}} />
+      <Alert
+        title="With title and link action"
+        message="Alert with a link action and dismiss."
+        action={{ href: '#', text: 'Read more' }}
+        onDismiss={() => {}}
+      />
+      <Alert
+        title="With title and button action"
+        message="Alert with a button action."
+        action={{ onClick: () => {}, text: 'Open', as: 'button' }}
+        onDismiss={() => {}}
+      />
+      <Alert message="Arrow top left." arrow={AlertArrowPosition.TOP_LEFT} />
+      <Alert message="Arrow top right." arrow={AlertArrowPosition.TOP_RIGHT} />
+      <Alert message="Arrow bottom left." arrow={AlertArrowPosition.BOTTOM_LEFT} />
+      <Alert message="Arrow bottom right." arrow={AlertArrowPosition.BOTTOM_RIGHT} />
+    </>
+  ),
+  ...withRTLDiff(),
+};

package/src/_deprecated/Card/_stories/Card.test.story.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { FastFlag as FastFlagIcon } from '@transferwise/icons';
+
+import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import Card from '..';
+
+export default {
+  component: Card,
+  title: 'Layouts/Card/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Card>;
+
+type Story = StoryObj<typeof Card>;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <Card title="Basic card" details="Some details about this card" />
+      <Card
+        title="Card with icon"
+        details="Details with an icon on the side"
+        icon={<FastFlagIcon />}
+      />
+      <Card
+        title="Expanded card with icon"
+        details="Expanded card showing content area"
+        icon={<FastFlagIcon />}
+        isExpanded
+      >
+        Expanded content with padding affected by icon presence.
+      </Card>
+      <Card title="Expanded card without icon" details="No icon variant" isExpanded>
+        Expanded content without icon padding.
+      </Card>
+    </>
+  ),
+  ...withRTLDiff(),
+};

package/src/_deprecated/CriticalBanner/_stories/CriticalCommsBanner.test.story.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import CriticalCommsBanner from '..';
 import { withVariantConfig } from '../../../../.storybook/helpers';
+import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
 
 export default {
   component: CriticalCommsBanner,
@@ -83,3 +84,20 @@ export const WithoutAction: Story = {
   },
   ...withVariantConfig(['default']),
 };
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <CriticalCommsBanner
+        title="Your account is overdrawn"
+        subtitle="Add money within the next 30 days"
+        action={{ label: 'Take action', href: 'https://wise.com' }}
+      />
+      <CriticalCommsBanner
+        title="Your account is overdrawn"
+        subtitle="Add money within the next 30 days"
+      />
+    </>
+  ),
+  ...withRTLDiff(),
+};

package/src/_deprecated/InlineAlert/_stories/InlineAlert.test.story.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import InlineAlert from '..';
+
+export default {
+  component: InlineAlert,
+  title: 'Prompts/InlineAlert/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof InlineAlert>;
+
+type Story = StoryObj<typeof InlineAlert>;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <InlineAlert type="neutral">Neutral alert without icon</InlineAlert>
+      <InlineAlert type="warning">Warning alert with icon</InlineAlert>
+      <InlineAlert type="negative">Negative alert with icon</InlineAlert>
+      <InlineAlert type="positive">
+        Positive alert with icon and longer content that may wrap to multiple lines
+      </InlineAlert>
+    </>
+  ),
+  ...withRTLDiff(),
+};

package/src/_deprecated/OverlayHeader/OverlayHeader.tsx

@@ -1,9 +1,5 @@
-import { clsx } from 'clsx';
-
-import { Size } from '../../common';
-import { CloseButton } from '../../common/CloseButton';
-import FlowHeader from '../../common/FlowHeader';
 import Logo from '../../Logo';
+import FlowNavigation from '../../FlowNavigation';
 
 /**
  * @deprecated Use `FlowNavigation` component instead, with `steps={[]}`
@@ -22,20 +18,5 @@ const defaultLogo = <Logo />;
  * @deprecated Use `FlowNavigation` component instead
  */
 export default function OverlayHeader({ avatar, onClose, logo = defaultLogo }: OverlayHeaderProps) {
-  const closeButton = onClose && <CloseButton size={Size.LARGE} onClick={onClose} />;
-  return (
-    <div className="np-overlay-header d-flex justify-content-center">
-      <FlowHeader
-        className="np-overlay-header__content p-a-3"
-        leftContent={logo}
-        rightContent={
-          <div className={clsx('d-flex', 'align-items-center', 'order-2')}>
-            {avatar}
-            {avatar && closeButton && <span className={clsx('m-x-1')} />}
-            {closeButton}
-          </div>
-        }
-      />
-    </div>
-  );
+  return <FlowNavigation {...{ avatar, onClose, logo }} />;
 }

package/src/_deprecated/OverlayHeader/_stories/OverlayHeader.test.story.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Person } from '@transferwise/icons';
+
+import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import AvatarView from '../../../AvatarView';
+import Logo from '../../../Logo';
+import OverlayHeader from '..';
+
+export default {
+  component: OverlayHeader,
+  title: 'Navigation/OverlayHeader/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof OverlayHeader>;
+
+type Story = StoryObj<typeof OverlayHeader>;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <OverlayHeader logo={<Logo />} onClose={() => {}} />
+      <OverlayHeader
+        logo={<Logo />}
+        avatar={
+          <AvatarView>
+            <Person size="24" />
+          </AvatarView>
+        }
+        onClose={() => {}}
+      />
+      <OverlayHeader
+        logo={<Logo />}
+        avatar={
+          <AvatarView>
+            <Person size="24" />
+          </AvatarView>
+        }
+      />
+      <OverlayHeader logo={<Logo />} />
+    </>
+  ),
+  ...withRTLDiff(),
+};

package/src/_deprecated/Select/_stories/Select.rtl.test.story.tsx

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within } from 'storybook/test';
+import { Person } from '@transferwise/icons';
+
+import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import Select from '..';
+
+export default {
+  component: Select,
+  title: 'Forms/Select/Tests/RTL Diff',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Select>;
+
+type Story = StoryObj<typeof Select>;
+
+const options = [
+  { header: 'Popular' },
+  { value: 'gbp', label: 'British pound', currency: 'gbp', icon: <Person /> },
+  { value: 'eur', label: 'Euro', currency: 'eur', icon: <Person /> },
+  { value: 'usd', label: 'US Dollar', currency: 'usd', note: 'United States dollar' },
+  { separator: true },
+  { header: 'Other' },
+  { value: 'cad', label: 'Canadian dollar', currency: 'cad' },
+  { value: 'aud', label: 'Australian dollar', currency: 'aud' },
+];
+
+const selected = { value: 'gbp', label: 'British pound', currency: 'gbp', icon: <Person /> };
+
+export const TriggerVariants: Story = {
+  render: () => (
+    <>
+      <Select
+        size="lg"
+        placeholder="Select currency"
+        selected={selected}
+        options={options}
+        onChange={() => {}}
+      />
+      <Select
+        size="md"
+        placeholder="Select currency"
+        selected={selected}
+        options={options}
+        onChange={() => {}}
+      />
+      <Select size="sm" placeholder="Select currency" options={options} onChange={() => {}} />
+    </>
+  ),
+  ...withRTLDiff(),
+};
+
+export const OpenDropdown: Story = {
+  render: () => (
+    <Select
+      size="lg"
+      search
+      searchPlaceholder="Type a currency"
+      placeholder="Select currency"
+      selected={selected}
+      options={options}
+      onChange={() => {}}
+    />
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.queryByRole('button');
+    if (!trigger) return;
+    await userEvent.click(trigger);
+  },
+  ...withRTLDiff({ renderAs: 'iframe', width: '80%' }),
+};