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

package/src/Prompt/ActionPrompt/_stories/ActionPrompt.rtl.test.story.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Bank } from '@transferwise/icons';
+
+import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import ActionPrompt from '../ActionPrompt';
+
+export default {
+  component: ActionPrompt,
+  title: 'Prompts/ActionPrompt/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof ActionPrompt>;
+
+type Story = StoryObj<typeof ActionPrompt>;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <ActionPrompt
+        title="Default status icon"
+        description="No media provided, uses default sentiment icon."
+        action={{ label: 'Continue' }}
+      />
+      <ActionPrompt
+        title="Custom image"
+        description="Media with a custom image source."
+        media={{ imgSrc: '../../wise-card.svg' }}
+        action={{ label: 'View card' }}
+      />
+      <ActionPrompt
+        title="Avatar with icon"
+        description="Media with an avatar containing a custom icon."
+        media={{ avatar: { asset: <Bank /> } }}
+        action={{ label: 'Connect bank' }}
+      />
+      <ActionPrompt
+        title="Primary and secondary actions"
+        description="Both action buttons present."
+        media={{ avatar: { asset: <Bank /> } }}
+        action={{ label: 'Confirm' }}
+        actionSecondary={{ label: 'Cancel' }}
+      />
+      <ActionPrompt
+        title="Dismissible with two actions"
+        description="Close button and both action buttons."
+        media={{ avatar: { asset: <Bank /> } }}
+        action={{ label: 'Confirm' }}
+        actionSecondary={{ label: 'Cancel' }}
+        onDismiss={() => {}}
+      />
+    </>
+  ),
+  ...withRTLDiff(),
+};

package/src/Prompt/CriticalBanner/_stories/CriticalBanner.rtl.test.story.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Bank } from '@transferwise/icons';
+
+import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import CriticalBanner from '../CriticalBanner';
+
+export default {
+  component: CriticalBanner,
+  title: 'Prompts/CriticalBanner/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof CriticalBanner>;
+
+type Story = StoryObj<typeof CriticalBanner>;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <CriticalBanner title="Title only" description="Description without actions or media." />
+      <CriticalBanner
+        title="With primary action"
+        description="Banner with a single action button."
+        action={{ label: 'Verify now' }}
+      />
+      <CriticalBanner
+        title="With both actions"
+        description="Banner with primary and secondary actions."
+        action={{ label: 'Verify now' }}
+        actionSecondary={{ label: 'Learn more' }}
+      />
+      <CriticalBanner
+        title="With media image"
+        description="Banner with a custom image."
+        media={{ imgSrc: '../../wise-card.svg', 'aria-label': 'Wise card' }}
+        action={{ label: 'Take action' }}
+      />
+      <CriticalBanner
+        title="With avatar media"
+        description="Banner with an avatar icon."
+        media={{ avatar: { asset: <Bank /> } }}
+        action={{ label: 'Connect bank' }}
+        actionSecondary={{ label: 'Learn more' }}
+      />
+    </>
+  ),
+  ...withRTLDiff(),
+};

package/src/Prompt/CriticalBanner/_stories/CriticalBanner.test.story.tsx

@@ -325,36 +325,6 @@ export const LiveRegionAnnouncements: Story = {
   },
 };
 
-/** Right-to-left layout regression test. */
-export const RTL: Story = {
-  render: function Render() {
-    const [expanded, setExpanded] = useState(true);
-    const [collapsed, setCollapsed] = useState(false);
-
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', width: '100%' }}>
-        <CriticalBanner
-          sentiment="negative"
-          title="Your account requires verification"
-          description="Please verify your identity to continue using all features."
-          action={{ label: 'Verify now', onClick: fn() }}
-          actionSecondary={{ label: 'Learn more', onClick: fn() }}
-          expanded={expanded}
-          onToggle={() => setExpanded(!expanded)}
-        />
-        <CriticalBanner
-          sentiment="warning"
-          title="Collapsed state"
-          description="This banner is collapsed."
-          action={{ label: 'Take action', onClick: fn() }}
-          expanded={collapsed}
-          onToggle={() => setCollapsed(!collapsed)}
-        />
-      </div>
-    );
-  },
-  ...withVariantConfig(['rtl']),
-};
 
 /** 400% zoom regression test with all variants. */
 export const Zoom400: Story = {

package/src/Prompt/InfoPrompt/_stories/InfoPrompt.rtl.test.story.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Star } from '@transferwise/icons';
+import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import { InfoPrompt } from '..';
+
+export default {
+  component: InfoPrompt,
+  title: 'Prompts/InfoPrompt/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof InfoPrompt>;
+
+type Story = StoryObj<typeof InfoPrompt>;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <InfoPrompt description="Basic description only." />
+      <InfoPrompt title="With Title" description="Description with a title above it." />
+      <InfoPrompt description="Dismissible prompt." onDismiss={() => {}} />
+      <InfoPrompt
+        title="With Action"
+        description="Description with an action link below."
+        action={{ label: 'Learn more', href: '#' }}
+      />
+      <InfoPrompt description="Custom media icon." media={{ asset: <Star title="Starred" /> }} />
+      <InfoPrompt
+        title="All Options"
+        description="Title, action, dismiss, and custom media combined."
+        media={{ asset: <Star title="Starred" /> }}
+        action={{ label: 'View details', href: '#' }}
+        onDismiss={() => {}}
+      />
+    </>
+  ),
+  ...withRTLDiff(),
+};

package/src/Prompt/InlinePrompt/_stories/InlinePrompt.rtl.test.story.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Suitcase } from '@transferwise/icons';
+import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import { InlinePrompt } from '../..';
+
+export default {
+  component: InlinePrompt,
+  title: 'Prompts/InlinePrompt/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof InlinePrompt>;
+
+type Story = StoryObj<typeof InlinePrompt>;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      {/* default icon at inline-start, auto width */}
+      <InlinePrompt sentiment="positive">Short content with default icon.</InlinePrompt>
+
+      {/* custom media icon, auto width */}
+      <InlinePrompt sentiment="positive" media={<Suitcase />}>
+        Custom icon with auto width.
+      </InlinePrompt>
+
+      {/* full width — icon position flips */}
+      <InlinePrompt sentiment="positive" media={<Suitcase />} width="full">
+        Custom icon with full width.
+      </InlinePrompt>
+
+      {/* multi-line content — verifies wrapping alignment */}
+      <InlinePrompt sentiment="warning" width="full">
+        This prompt has longer content that may wrap to multiple lines to verify that the icon
+        alignment remains correct in RTL layout.
+      </InlinePrompt>
+    </>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Flag } from '@wise/art';
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import AvatarView from '../../AvatarView';
+import Radio from '../Radio';
+
+export default {
+  component: Radio,
+  title: 'Forms/Radio/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Radio>;
+
+type Story = StoryObj<typeof Radio>;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <Radio
+        label="Standard option"
+        name="radio-rtl"
+        id="radio-rtl-basic"
+        value="basic"
+        onChange={() => {}}
+      />
+      <Radio
+        label="Option with secondary text"
+        secondary="Secondary description"
+        name="radio-rtl"
+        id="radio-rtl-secondary"
+        value="secondary"
+        onChange={() => {}}
+      />
+      <Radio
+        label="Option with avatar"
+        name="radio-rtl"
+        id="radio-rtl-avatar"
+        value="avatar"
+        avatar={
+          <AvatarView size={40}>
+            <Flag code="IM" />
+          </AvatarView>
+        }
+        onChange={() => {}}
+      />
+      <Radio
+        label="Option with secondary text and avatar"
+        secondary="Secondary description"
+        name="radio-rtl"
+        id="radio-rtl-secondary-avatar"
+        value="secondary-avatar"
+        avatar={
+          <AvatarView size={40}>
+            <Flag code="IM" />
+          </AvatarView>
+        }
+        onChange={() => {}}
+      />
+    </>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Flag } from '@wise/art';
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import AvatarView from '../../AvatarView';
+import RadioGroup from '../RadioGroup';
+
+export default {
+  component: RadioGroup,
+  title: 'Forms/RadioGroup/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof RadioGroup>;
+
+type Story = StoryObj<typeof RadioGroup>;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <RadioGroup
+        name="radio-group-rtl-basic"
+        selectedValue="option-1"
+        radios={[
+          { value: 'option-1', label: 'Option one' },
+          { value: 'option-2', label: 'Option two' },
+          { value: 'option-3', label: 'Option three' },
+        ]}
+        onChange={() => {}}
+      />
+      <RadioGroup
+        name="radio-group-rtl-secondary"
+        selectedValue="option-a"
+        radios={[
+          { value: 'option-a', label: 'Option A', secondary: 'Secondary text for A' },
+          { value: 'option-b', label: 'Option B', secondary: 'Secondary text for B' },
+        ]}
+        onChange={() => {}}
+      />
+      <RadioGroup
+        name="radio-group-rtl-avatar"
+        selectedValue="option-x"
+        radios={[
+          {
+            value: 'option-x',
+            label: 'Option X',
+            avatar: (
+              <AvatarView size={40}>
+                <Flag code="IM" />
+              </AvatarView>
+            ),
+          },
+          {
+            value: 'option-y',
+            label: 'Option Y',
+            secondary: 'With secondary and avatar',
+            avatar: (
+              <AvatarView size={40}>
+                <Flag code="IM" />
+              </AvatarView>
+            ),
+          },
+        ]}
+        onChange={() => {}}
+      />
+    </>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import Header from '../../Header';
+import Section from '..';
+
+export default {
+  component: Section,
+  title: 'Content/Section/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Section>;
+
+type Story = StoryObj<typeof Section>;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <Section>
+        <Header title="Default section" />
+        Section content without horizontal padding.
+      </Section>
+      <Section withHorizontalPadding>
+        <Header title="With horizontal padding" />
+        Section content with horizontal padding applied.
+      </Section>
+    </>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import SegmentedControl from '../SegmentedControl';
+
+export default {
+  component: SegmentedControl,
+  title: 'Forms/SegmentedControl/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof SegmentedControl>;
+
+type Story = StoryObj<typeof SegmentedControl>;
+
+const inputSegments = [
+  { id: 'seg-one', label: 'One', value: 'one' },
+  { id: 'seg-two', label: 'Two', value: 'two' },
+  { id: 'seg-three', label: 'Three', value: 'three' },
+] as const;
+
+const viewSegments = [
+  { id: 'seg-alpha', label: 'Alpha', value: 'alpha', controls: 'panel-alpha' },
+  { id: 'seg-beta', label: 'Beta', value: 'beta', controls: 'panel-beta' },
+  { id: 'seg-gamma', label: 'Gamma', value: 'gamma', controls: 'panel-gamma' },
+] as const;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <SegmentedControl
+        name="rtl-input"
+        mode="input"
+        segments={inputSegments}
+        value="one"
+        onChange={() => {}}
+      />
+      <SegmentedControl
+        name="rtl-view"
+        mode="view"
+        segments={viewSegments}
+        value="alpha"
+        onChange={() => {}}
+      />
+    </>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import SlidingPanel from '../SlidingPanel';
+
+export default {
+  component: SlidingPanel,
+  title: 'Dialogs/SlidingPanel/Tests/RTL Diff',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof SlidingPanel>;
+
+type Story = StoryObj<typeof SlidingPanel>;
+
+const iframeDiff = withRTLDiff({ renderAs: 'iframe' });
+
+const containerStyle: React.CSSProperties = {
+  position: 'relative',
+  width: 300,
+  height: 120,
+  overflow: 'hidden',
+  border: '1px dashed #ccc',
+};
+
+const panelContentStyle: React.CSSProperties = {
+  padding: '16px',
+};
+
+export const PositionLeft: Story = {
+  render: () => (
+    <div style={containerStyle}>
+      <SlidingPanel open position="left">
+        <div style={panelContentStyle}>Left panel content</div>
+      </SlidingPanel>
+    </div>
+  ),
+  ...iframeDiff,
+};
+
+export const PositionRight: Story = {
+  render: () => (
+    <div style={containerStyle}>
+      <SlidingPanel open position="right">
+        <div style={panelContentStyle}>Right panel content</div>
+      </SlidingPanel>
+    </div>
+  ),
+  ...iframeDiff,
+};
+
+export const PositionLeftWithBorder: Story = {
+  render: () => (
+    <div style={containerStyle}>
+      <SlidingPanel open position="left" showSlidingPanelBorder>
+        <div style={panelContentStyle}>Left panel with border</div>
+      </SlidingPanel>
+    </div>
+  ),
+  ...iframeDiff,
+};
+
+export const PositionRightWithBorder: Story = {
+  render: () => (
+    <div style={containerStyle}>
+      <SlidingPanel open position="right" showSlidingPanelBorder>
+        <div style={panelContentStyle}>Right panel with border</div>
+      </SlidingPanel>
+    </div>
+  ),
+  ...iframeDiff,
+};

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

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { Snackbar } from '../Snackbar';
+
+export default {
+  component: Snackbar,
+  title: 'Dialogs/Snackbar/Tests/RTL Diff',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Snackbar>;
+
+type Story = StoryObj<typeof Snackbar>;
+
+const TIMEOUT = 10_000_000;
+const iframeDiff = withRTLDiff({ renderAs: 'iframe' });
+
+function RenderWithAction() {
+  const [timestamp] = useState(() => Date.now());
+
+  return (
+    <Snackbar
+      text={<span>Transfer completed successfully</span>}
+      timestamp={timestamp}
+      timeout={TIMEOUT}
+      action={{ label: 'View' }}
+    />
+  );
+}
+
+function RenderWithoutAction() {
+  const [timestamp] = useState(() => Date.now());
+
+  return <Snackbar text={<span>Settings saved</span>} timestamp={timestamp} timeout={TIMEOUT} />;
+}
+
+export const WithAction: Story = {
+  render: () => <RenderWithAction />,
+  ...iframeDiff,
+};
+
+export const WithoutAction: Story = {
+  render: () => <RenderWithoutAction />,
+  ...iframeDiff,
+};

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

@@ -103,37 +103,6 @@ export const DarkMode = {
   ...withVariantConfig(['dark'], Default),
 };
 
-const switchToRTL = async (context: { canvasElement: HTMLElement }) => {
-  await Default.play(context);
-  // the snackbar is outside the storybook dom so the RTL variant doesn't apply
-  const body = document.querySelector('div.storybook-container');
-  if (body) {
-    body.setAttribute('dir', 'rtl');
-  }
-  const snackbar = document.querySelector('div.snackbar');
-  if (snackbar) {
-    snackbar.setAttribute('dir', 'rtl');
-  }
-};
-
-export const RTL = {
-  ...Default,
-  args: {
-    ...Default.args,
-  },
-  play: switchToRTL,
-  ...withVariantConfig(['rtl'], Default),
-};
-
-export const RTLMobile = {
-  ...Default,
-  args: {
-    ...RTL.args,
-  },
-  play: switchToRTL,
-  ...withVariantConfig(['rtl', 'mobile'], Default),
-};
-
 export const Zoom400 = {
   ...Default,
   args: {

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

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import Stepper from '../Stepper';
+
+const STEPS = [{ label: 'Amount' }, { label: 'You' }, { label: 'Review' }, { label: 'Pay' }];
+
+export default {
+  component: Stepper,
+  title: 'Navigation/Stepper/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Stepper>;
+
+type Story = StoryObj<typeof Stepper>;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <div style={{ width: '80%', marginLeft: 'auto', marginRight: 'auto' }}>
+      <Stepper steps={STEPS} activeStep={0} />
+      <Stepper steps={STEPS} activeStep={2} />
+      <Stepper steps={STEPS} activeStep={4} />
+    </div>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import Field from '../../Field/Field';
+import Switch from '..';
+
+export default {
+  component: Switch,
+  title: 'Actions/Switch/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Switch>;
+
+type Story = StoryObj<typeof Switch>;
+
+/**
+ * The switch thumb translates horizontally: in LTR checked state it moves right,
+ * in RTL checked state it moves left (via [dir="rtl"] CSS). This diff verifies
+ * the thumb direction flips correctly between writing modes.
+ */
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <Field label="Unchecked">
+        <Switch checked={false} onClick={() => {}} />
+      </Field>
+      <Field label="Checked">
+        <Switch checked onClick={() => {}} />
+      </Field>
+    </>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -83,32 +83,6 @@ export const KeyboardInteraction: Story = {
   },
 };
 
-/** Switch rendered in RTL mode. */
-export const RTL: Story = {
-  render: function Render() {
-    const [unchecked, setUnchecked] = useState(false);
-    const [checked, setChecked] = useState(true);
-
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', padding: '16px' }}>
-        <Field label="Unchecked">
-          <Switch checked={unchecked} onClick={() => setUnchecked((v) => !v)} />
-        </Field>
-        <Field label="Checked">
-          <Switch checked={checked} onClick={() => setChecked((v) => !v)} />
-        </Field>
-        <Field label="Disabled (off)">
-          <Switch checked={false} disabled onClick={() => {}} />
-        </Field>
-        <Field label="Disabled (on)">
-          <Switch checked disabled onClick={() => {}} />
-        </Field>
-      </div>
-    );
-  },
-  ...withVariantConfig(['rtl']),
-};
-
 /** Switch at 400% zoom for accessibility testing. */
 export const Zoom400: Story = {
   render: function Render() {