@transferwise/components 46.159.0 → 46.159.2

package/src/PromoCard/_stories/PromoCardGroup.test.story.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import PromoCard from '../PromoCard';
+import PromoCardGroup from '../CardGroup/PromoCardGroup';
+
+export default {
+  component: PromoCardGroup,
+  title: 'Layouts/PromoCardGroup/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof PromoCardGroup>;
+
+type Story = StoryObj<typeof PromoCardGroup>;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <PromoCardGroup>
+      <PromoCard
+        title="Digital"
+        description="A card that lives online and works anywhere."
+        type="radio"
+        value="digital"
+        id="digital"
+        indicatorLabel="Free"
+        imageAlt=""
+        imageSource="https://wise.com/web-art/assets/illustrations/digital-card-2-medium@2x.webp"
+      />
+      <PromoCard
+        title="Standard"
+        description="Spend and withdraw money around the world."
+        type="radio"
+        value="standard"
+        id="standard"
+        indicatorLabel="7 GBP"
+        imageAlt=""
+        imageSource="https://wise.com/web-art/assets/illustrations/personal-card-medium@2x.webp"
+      />
+      <PromoCard
+        title="Eco"
+        description="A debit card made to biodegrade."
+        type="radio"
+        value="eco"
+        id="eco"
+        indicatorLabel="9 GBP"
+        imageAlt=""
+        imageSource="https://wise.com/web-art/assets/illustrations/eco-card-medium@2x.webp"
+      />
+    </PromoCardGroup>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -1,11 +1,12 @@
 import { ReactElement } from 'react';
-import { Freeze, People, Suitcase } from '@transferwise/icons';
+import { Bank, Freeze, People, Suitcase } from '@transferwise/icons';
 import { action } from 'storybook/actions';
 import { fn } from 'storybook/test';
 import { ActionPrompt } from '../ActionPrompt';
 import { Body, Title } from '../../..';
 import { StoryObj } from '@storybook/react-webpack5';
 import { allModes } from '../../../../.storybook/modes';
+import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
 import { withVariantConfig } from '../../../../.storybook/helpers';
 import { lorem10 } from '../../../test-utils';
 
@@ -272,3 +273,43 @@ export const Responsiveness: Story = {
     },
   },
 };
+
+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.test.story.tsx

@@ -3,6 +3,7 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
 import { Bank } from '@transferwise/icons';
 import Button from '../../../Button';
+import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
 import { withVariantConfig } from '../../../../.storybook/helpers';
 import { CriticalBanner } from '../CriticalBanner';
 
@@ -325,37 +326,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 = {
   render: () => <AllVariants gap="2rem" />,
@@ -489,3 +459,36 @@ export const UncontrolledStateInteraction: Story = {
     },
   },
 };
+
+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/InfoPrompt/_stories/InfoPrompt.test.story.tsx

@@ -5,6 +5,7 @@ import { action } from 'storybook/actions';
 import { Star } from '@transferwise/icons';
 import { InfoPrompt, type InfoPromptProps } from '../InfoPrompt';
 import { allModes } from '../../../../.storybook/modes';
+import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
 import { withVariantConfig } from '../../../../.storybook/helpers';
 
 const withComponentGrid =
@@ -553,3 +554,27 @@ export const LiveRegionDismiss: Story = {
     );
   },
 };
+
+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.test.story.tsx

@@ -2,6 +2,7 @@ import { StoryObj } from '@storybook/react-webpack5';
 import { Suitcase } from '@transferwise/icons';
 import { InlinePrompt } from '../InlinePrompt';
 import { withVariantConfig } from '../../../../.storybook/helpers';
+import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
 
 export default {
   title: 'Prompts/InlinePrompt/Tests',
@@ -19,3 +20,29 @@ export const TinyScreen: Story = {
   ),
   ...withVariantConfig(['400%']),
 };
+
+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.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.test.story.tsx

@@ -2,6 +2,9 @@ import RadioGroup, { RadioGroupProps } from '../RadioGroup';
 import Field from '../../Field/Field';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
+import { Flag } from '@wise/art';
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import AvatarView from '../../AvatarView';
 
 const meta = {
   component: RadioGroup,
@@ -60,3 +63,56 @@ export const FieldsWithoutPrompt = {
     );
   },
 } satisfies Story;
+
+export const RTLDiff: Story<string> = {
+  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.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.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/SentimentSurface/SentimentSurface.css

@@ -25,7 +25,6 @@
   --color-sentiment-border-overlay: rgba(203,39,47,0.30196);
 }
 
-
 .wds-sentiment-negative-light-elevated {
   --color-sentiment-content-primary: #FFFFFF;
   --color-sentiment-content-primary-hover: #F5CCCC;
@@ -48,7 +47,6 @@
   --color-sentiment-border-overlay: rgba(255,255,255,0.30196);
 }
 
-
 .wds-sentiment-neutral-light-base {
   --color-sentiment-content-primary: #454745;
   --color-sentiment-content-primary-hover: #353635;
@@ -71,7 +69,6 @@
   --color-sentiment-border-overlay: rgba(69,71,69,0.30196);
 }
 
-
 .wds-sentiment-neutral-light-elevated {
   --color-sentiment-content-primary: #F1F1ED;
   --color-sentiment-content-primary-hover: #E7E7E1;
@@ -94,7 +91,6 @@
   --color-sentiment-border-overlay: rgba(241,241,237,0.30196);
 }
 
-
 .wds-sentiment-proposition-light-base {
   --color-sentiment-content-primary: #0E0F0C;
   --color-sentiment-content-primary-hover: #0A2826;
@@ -117,7 +113,6 @@
   --color-sentiment-border-overlay: rgba(14,15,12,0.30196);
 }
 
-
 .wds-sentiment-proposition-light-elevated {
   --color-sentiment-content-primary: #FFFFFF;
   --color-sentiment-content-primary-hover: #EAF9F9;
@@ -140,7 +135,6 @@
   --color-sentiment-border-overlay: rgba(255,255,255,0.30196);
 }
 
-
 .wds-sentiment-success-light-base {
   --color-sentiment-content-primary: #054D28;
   --color-sentiment-content-primary-hover: #043A1E;
@@ -163,7 +157,6 @@
   --color-sentiment-border-overlay: rgba(5,77,40,0.30196);
 }
 
-
 .wds-sentiment-success-light-elevated {
   --color-sentiment-content-primary: #CEF1B8;
   --color-sentiment-content-primary-hover: #E0FFCC;
@@ -186,7 +179,6 @@
   --color-sentiment-border-overlay: rgba(206,241,184,0.30196);
 }
 
-
 .wds-sentiment-warning-light-base {
   --color-sentiment-content-primary: #4A3B1C;
   --color-sentiment-content-primary-hover: #302612;
@@ -209,7 +201,6 @@
   --color-sentiment-border-overlay: rgba(74,59,28,0.30196);
 }
 
-
 .wds-sentiment-warning-light-elevated {
   --color-sentiment-content-primary: #4A3B1C;
   --color-sentiment-content-primary-hover: #302612;
@@ -232,7 +223,6 @@
   --color-sentiment-border-overlay: rgba(74,59,28,0.30196);
 }
 
-
 .wds-sentiment-negative-dark-base {
   --color-sentiment-content-primary: #FFA8AD;
   --color-sentiment-content-primary-hover: #FFBDC0;
@@ -255,7 +245,6 @@
   --color-sentiment-border-overlay: rgba(255,168,173,0.30196);
 }
 
-
 .wds-sentiment-negative-dark-elevated {
   --color-sentiment-content-primary: #410B0D;
   --color-sentiment-content-primary-hover: #641115;
@@ -278,7 +267,6 @@
   --color-sentiment-border-overlay: rgba(65,11,13,0.30196);
 }
 
-
 .wds-sentiment-neutral-dark-base {
   --color-sentiment-content-primary: #F1F1ED;
   --color-sentiment-content-primary-hover: #E7E7E1;
@@ -301,7 +289,6 @@
   --color-sentiment-border-overlay: rgba(241,241,237,0.30196);
 }
 
-
 .wds-sentiment-neutral-dark-elevated {
   --color-sentiment-content-primary: #2A2C29;
   --color-sentiment-content-primary-hover: #414441;
@@ -324,7 +311,6 @@
   --color-sentiment-border-overlay: rgba(42,44,41,0.30196);
 }
 
-
 .wds-sentiment-proposition-dark-base {
   --color-sentiment-content-primary: #FFFFFF;
   --color-sentiment-content-primary-hover: #EAF9F9;
@@ -347,7 +333,6 @@
   --color-sentiment-border-overlay: rgba(255,255,255,0.30196);
 }
 
-
 .wds-sentiment-proposition-dark-elevated {
   --color-sentiment-content-primary: #0E0F0C;
   --color-sentiment-content-primary-hover: #0A2826;
@@ -370,7 +355,6 @@
   --color-sentiment-border-overlay: rgba(14,15,12,0.30196);
 }
 
-
 .wds-sentiment-success-dark-base {
   --color-sentiment-content-primary: #CEF1B8;
   --color-sentiment-content-primary-hover: #E0FFCC;
@@ -393,7 +377,6 @@
   --color-sentiment-border-overlay: rgba(206,241,184,0.30196);
 }
 
-
 .wds-sentiment-success-dark-elevated {
   --color-sentiment-content-primary: #252C20;
   --color-sentiment-content-primary-hover: #323B2B;
@@ -416,7 +399,6 @@
   --color-sentiment-border-overlay: rgba(37,44,32,0.30196);
 }
 
-
 .wds-sentiment-warning-dark-base {
   --color-sentiment-content-primary: #FADC65;
   --color-sentiment-content-primary-hover: #F9D648;
@@ -439,7 +421,6 @@
   --color-sentiment-border-overlay: rgba(250,220,101,0.30196);
 }
 
-
 .wds-sentiment-warning-dark-elevated {
   --color-sentiment-content-primary: #3A3523;
   --color-sentiment-content-primary-hover: #504930;
@@ -461,13 +442,9 @@
   --color-sentiment-background-surface-active: #F8CD20;
   --color-sentiment-border-overlay: rgba(58,53,35,0.30196);
 }
-
-
 .wds-sentiment-surface {
   --ring-outline-color: var(--color-sentiment-content-primary, var(--color-content-primary));
 }
-
-
 .wds-sentiment-surface--hasBaseStyles {
   background-color: var(--color-sentiment-background-surface);
   color: var(--color-sentiment-content-primary);