@transferwise/components 46.160.0 → 46.160.1

package/src/PhoneNumberInput/_stories/{PhoneNumberInput.test.story.tsx → PhoneNumberInput.rtl.test.story.tsx}

@@ -1,4 +1,5 @@
 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';
@@ -6,21 +7,13 @@ import PhoneNumberInput from '..';
 
 export default {
   component: PhoneNumberInput,
-  title: 'Forms/PhoneNumberInput/Tests',
+  title: 'Forms/PhoneNumberInput/Tests/RTL Diff',
   tags: ['!autodocs', '!manifest'],
 } satisfies Meta<typeof PhoneNumberInput>;
 
 type Story = StoryObj<typeof PhoneNumberInput>;
 
-/**
- * The country code selector sits on the inline-start side of the phone number input.
- * In RTL the two elements should swap sides — the selector moves to the right and
- * the text field moves to the left. This diff verifies the flex row reverses correctly.
- *
- * Size variants are included because the size prop changes the input-group class and
- * may affect spacing between the two sub-inputs.
- */
-export const RTLDiff: Story = {
+export const Sizes: Story = {
   render: () => (
     <>
       <Field label="Default (md)">
@@ -42,3 +35,18 @@ export const RTLDiff: Story = {
   ),
   ...withRTLDiff(),
 };
+
+export const DropdownOpen: Story = {
+  render: () => (
+    <Field label="Phone number">
+      <PhoneNumberInput onChange={() => {}} />
+    </Field>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.queryByRole('combobox');
+    if (!trigger) return;
+    await userEvent.click(trigger);
+  },
+  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center' }),
+};

package/src/ProcessIndicator/ProcessIndicator.tsx

@@ -3,7 +3,7 @@ import { Component } from 'react';
 
 import { Status, Size } from '../common';
 
-const radius = { xxs: 6, xs: 11, sm: 22, xl: 61 };
+const radius = { xxs: 5, xs: 11, sm: 22, xl: 61 };
 
 const ANIMATION_DURATION_IN_MS = 1500;
 

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

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import ProcessIndicator from '..';
+
+export default {
+  component: ProcessIndicator,
+  title: 'Loading/ProcessIndicator/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof ProcessIndicator>;
+
+type Story = StoryObj<typeof ProcessIndicator>;
+
+const sizes = ['xxs', 'xs', 'sm', 'xl'] as const;
+const statuses = ['succeeded', 'failed'] as const;
+
+const rowStyle = { display: 'flex', alignItems: 'center', gap: '16px' } as const;
+
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      {statuses.map((status) => (
+        <div key={status} style={rowStyle}>
+          {sizes.map((size) => (
+            <ProcessIndicator key={size} size={size} status={status} />
+          ))}
+        </div>
+      ))}
+    </>
+  ),
+  ...withRTLDiff(),
+};

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import ProgressBar from '..';
 
 export default {
@@ -12,22 +12,36 @@ export default {
 type Story = StoryObj<typeof ProgressBar>;
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <ProgressBar
-        id="progress-bar-with-description"
-        title="Send 5,550 GBP"
-        description="You have 3 days to reach your goal."
-        progress={{ value: 50, max: 100 }}
-        textEnd="200 GBP to go"
-      />
-      <ProgressBar
-        id="progress-bar-without-description"
-        title="Total limit"
-        progress={{ value: 800, max: 1000 }}
-        textEnd="200 GBP remaining"
-      />
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <ProgressBar
+          id="progress-bar-with-description"
+          title={i18n.title1}
+          description={i18n.description}
+          progress={{ value: 50, max: 100 }}
+          textEnd={i18n.textEnd1}
+        />
+        <ProgressBar
+          id="progress-bar-without-description"
+          title={i18n.title2}
+          progress={{ value: 800, max: 1000 }}
+          textEnd={i18n.textEnd2}
+        />
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      title1: { ltr: 'Send 5,550 GBP', rtl: 'أرسل ٥٬٥٥٠ جنيه إسترليني' },
+      description: {
+        ltr: 'You have 3 days to reach your goal.',
+        rtl: 'لديك ٣ أيام للوصول إلى هدفك.',
+      },
+      textEnd1: { ltr: '200 GBP to go', rtl: '٢٠٠ جنيه إسترليني متبقي' },
+      title2: { ltr: 'Total limit', rtl: 'الحد الإجمالي' },
+      textEnd2: { ltr: '200 GBP remaining', rtl: '٢٠٠ جنيه إسترليني متبقي' },
+    },
+  }),
 };

package/src/Prompt/CriticalBanner/CriticalBanner.css

@@ -155,6 +155,35 @@
     mask: var(--critical-banner-overhang-mask);
   }
 }
+.wds-critical-banner__entry-mask {
+  display: grid;
+  grid-template-rows: 1fr;
+  overflow: visible;
+}
+.wds-critical-banner__entry-mask--animated {
+  grid-template-rows: 0fr;
+  overflow: hidden;
+  animation: wds-critical-banner-reveal-height 400ms cubic-bezier(0.3, 0, 0.1, 1) 500ms both, wds-critical-banner-release-overflow 1ms linear 899ms both;
+}
+.wds-critical-banner__entry-track {
+  min-block-size: 0;
+}
+@keyframes wds-critical-banner-reveal-height {
+  from {
+    grid-template-rows: 0fr;
+  }
+  to {
+    grid-template-rows: 1fr;
+  }
+}
+@keyframes wds-critical-banner-release-overflow {
+  from {
+    overflow: hidden;
+  }
+  to {
+    overflow: visible;
+  }
+}
 @media (prefers-reduced-motion: reduce) {
   .wds-critical-banner__description,
   .wds-critical-banner__title,
@@ -162,4 +191,9 @@
   .wds-critical-banner__toggle {
     transition: none !important;
   }
+  .wds-critical-banner__entry-mask--animated {
+    animation: none;
+    grid-template-rows: 1fr;
+    overflow: visible;
+  }
 }

package/src/Prompt/CriticalBanner/CriticalBanner.less

@@ -193,6 +193,45 @@
   }
 }
 
+.wds-critical-banner__entry-mask {
+  display: grid;
+  grid-template-rows: 1fr;
+  overflow: visible;
+
+  // Clip only during the reveal, then release overflow so actions remain visible.
+  &--animated {
+    grid-template-rows: 0fr;
+    overflow: hidden;
+    animation:
+      wds-critical-banner-reveal-height 400ms cubic-bezier(0.3, 0, 0.1, 1) 500ms both,
+      wds-critical-banner-release-overflow 1ms linear 899ms both;
+  }
+}
+
+.wds-critical-banner__entry-track {
+  min-height: 0;
+}
+
+@keyframes wds-critical-banner-reveal-height {
+  from {
+    grid-template-rows: 0fr;
+  }
+
+  to {
+    grid-template-rows: 1fr;
+  }
+}
+
+@keyframes wds-critical-banner-release-overflow {
+  from {
+    overflow: hidden;
+  }
+
+  to {
+    overflow: visible;
+  }
+}
+
 // Reduced motion support
 @media (prefers-reduced-motion: reduce) {
   .wds-critical-banner__description,
@@ -201,4 +240,10 @@
   .wds-critical-banner__toggle {
     transition: none !important;
   }
+
+  .wds-critical-banner__entry-mask--animated {
+    animation: none;
+    grid-template-rows: 1fr;
+    overflow: visible;
+  }
 }

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

@@ -15,7 +15,7 @@ describe('CriticalBanner', () => {
     resetLiveRegionAnnouncementQueue();
   });
 
-  it('renders mobile overhang markup without entry animation markup', () => {
+  it('applies mobile overhang classes by default', () => {
     const { container } = render(
       <CriticalBanner {...defaultProps} data-testid="critical-banner" />,
     );
@@ -23,7 +23,30 @@ describe('CriticalBanner', () => {
     expect(screen.getByTestId('critical-banner')).toBeInTheDocument();
     expect(container.querySelector('.wds-critical-banner-overhang')).toBeInTheDocument();
     expect(container.querySelector('.wds-critical-banner-overhang-query')).toBeInTheDocument();
-    expect(container.querySelector('.wds-critical-banner__entry-mask')).not.toBeInTheDocument();
-    expect(container.querySelector('.wds-critical-banner__entry-track')).not.toBeInTheDocument();
+  });
+
+  it('applies the entry animation by default', () => {
+    const { container } = render(
+      <CriticalBanner {...defaultProps} data-testid="critical-banner" />,
+    );
+
+    expect(screen.getByTestId('critical-banner')).toBeInTheDocument();
+    expect(
+      container.querySelector('.wds-critical-banner__entry-mask--animated'),
+    ).toBeInTheDocument();
+    expect(container.querySelector('.wds-critical-banner__entry-track')).toBeInTheDocument();
+  });
+
+  it('can render without the entry animation', () => {
+    const { container } = render(
+      <CriticalBanner {...defaultProps} animateEntry={false} data-testid="critical-banner" />,
+    );
+
+    expect(screen.getByTestId('critical-banner')).toBeInTheDocument();
+    expect(container.querySelector('.wds-critical-banner__entry-mask')).toBeInTheDocument();
+    expect(
+      container.querySelector('.wds-critical-banner__entry-mask--animated'),
+    ).not.toBeInTheDocument();
+    expect(container.querySelector('.wds-critical-banner__entry-track')).toBeInTheDocument();
   });
 });

package/src/Prompt/CriticalBanner/CriticalBanner.tsx

@@ -24,6 +24,11 @@ export type CriticalBannerProps = {
     label: ButtonProps['children'];
   };
   sentiment?: Exclude<PrimitivePromptProps['sentiment'], 'proposition'>;
+  /**
+   * Controls whether the banner plays its entry animation 500ms after mounting.
+   * Expand and collapse animations are unaffected.
+   */
+  animateEntry?: boolean;
   /**
    * Controls whether the description and actions are visible, as a controlled component.
    * When collapsed with a title, only the title is shown.
@@ -53,6 +58,7 @@ export const CriticalBanner = ({
   media = {},
   action,
   actionSecondary,
+  animateEntry = true,
   expanded: expandedProp,
   onToggle,
   id,
@@ -179,7 +185,15 @@ export const CriticalBanner = ({
         actionSecondaryLabel: actionSecondary?.label,
       })}
     >
-      <div className="wds-critical-banner-overhang-query">{bannerSurface}</div>
+      <div className="wds-critical-banner-overhang-query">
+        <div
+          className={clsx('wds-critical-banner__entry-mask', {
+            'wds-critical-banner__entry-mask--animated': animateEntry,
+          })}
+        >
+          <div className="wds-critical-banner__entry-track">{bannerSurface}</div>
+        </div>
+      </div>
     </LiveRegion>
   );
 };

package/src/Prompt/CriticalBanner/_stories/CriticalBanner.accessibility.docs.mdx

@@ -66,7 +66,10 @@ Screen readers announce the banner content whenever:
 
 ## Reduced Motion
 
-`CriticalBanner` respects the user's reduced motion preference. When reduced motion is on, the component does not show the collapse and expand animation used when the user toggles the banner content.
+`CriticalBanner` respects the user's reduced motion preference. When reduced motion is on, the component does not show:
+
+- the entry animation that reveals the banner from above when it first appears
+- the collapse and expand animation used when the user toggles the banner content
 
 The same content is still rendered and announced. Reduced motion only removes the visual movement.
 

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

@@ -28,6 +28,7 @@ const meta = {
     action: { label: 'Verify now', onClick: fn() },
     actionSecondary: undefined,
     media: undefined,
+    animateEntry: true,
     id: undefined,
     className: undefined,
     'data-testid': undefined,
@@ -47,6 +48,7 @@ const meta = {
       table: { type: { summary: 'ReactNode' } },
     },
     expanded: { control: 'boolean' },
+    animateEntry: { control: 'boolean' },
     media: {
       control: false,
       description: 'Replaces the default Status Icon with a custom image or AvatarView.',
@@ -131,12 +133,28 @@ const hiddenArgTypes = {
   actionSecondary: { table: { disable: true } },
   media: { table: { disable: true } },
   expanded: { table: { disable: true } },
+  animateEntry: { table: { disable: true } },
   onToggle: { table: { disable: true } },
   id: { table: { disable: true } },
   className: { table: { disable: true } },
   'data-testid': { table: { disable: true } },
 } as const;
 
+const AnimatedEntryPreview = (args: CriticalBannerProps) => {
+  const [bannerInstance, setBannerInstance] = useState(0);
+
+  return (
+    <>
+      <CriticalBanner key={bannerInstance} {...args} />
+      <div className="p-t-3">
+        <Button block v2 onClick={() => setBannerInstance((current) => current + 1)}>
+          Replay
+        </Button>
+      </div>
+    </>
+  );
+};
+
 /** Renders children inside an iframe that inherits the parent page's stylesheets. */
 function IframeContainer({ width, children }: { width: number; children: ReactNode }) {
   const iframeRef = useRef<HTMLIFrameElement>(null);
@@ -585,6 +603,40 @@ export const MobileOverhang: Story = {
   },
 };
 
+/** The banner waits 500ms, then reveals from above when it enters the page. */
+export const AnimatedEntry: Story = {
+  args: {
+    title: 'Your account is restricted.',
+    description: 'Review your personal details to get your account active again.',
+    action: { label: 'Review details', onClick: fn() },
+  },
+  argTypes: hiddenArgTypes,
+  render: (args) => <AnimatedEntryPreview {...args} />,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      canvas: { sourceState: 'hidden' },
+    },
+  },
+};
+
+/** The banner can mount immediately without replaying its entry animation. */
+export const WithoutEntryAnimation: Story = {
+  args: {
+    animateEntry: false,
+    title: 'Your account is restricted.',
+    description: 'Review your personal details to get your account active again.',
+    action: { label: 'Review details', onClick: fn() },
+  },
+  argTypes: hiddenArgTypes,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      canvas: { sourceState: 'hidden' },
+    },
+  },
+};
+
 /**
  * The text container is capped at 480px for optimal readability, even though
  * the banner itself stretches to the full available width.

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

@@ -22,6 +22,7 @@ const wait = async (ms: number) =>
   });
 
 const ANIMATION_DURATION = 200; // 150ms animation + 50ms buffer
+const ENTRY_ANIMATION_DURATION = 950; // 500ms delay + 400ms animation + 50ms buffer
 
 const longDescription =
   'We have detected unusual activity on your account that does not match your typical usage patterns. To protect your funds and personal information, we have temporarily restricted access. Please verify your identity to restore full access to your account.';
@@ -151,7 +152,7 @@ export const MobileVariants: Story = {
   ...withVariantConfig(['mobile']),
 };
 
-/** Neutral background regression test with page content scrolled under the mobile overhang. */
+/** Neutral background regression test with page content scrolled under the sticky banner. */
 export const BackgroundIsNotTransparent: Story = {
   args: {
     sentiment: 'neutral',
@@ -198,6 +199,7 @@ export const BackgroundIsNotTransparent: Story = {
 
     if (scrollContainer) {
       scrollContainer.scrollTop = 250;
+      await wait(ENTRY_ANIMATION_DURATION);
     }
   },
   ...withVariantConfig(['mobile'], {
@@ -207,6 +209,25 @@ export const BackgroundIsNotTransparent: Story = {
   }),
 };
 
+/** Mobile entry animation visual regression test. */
+export const AnimatedEntryMobile: Story = {
+  render: function Render() {
+    return (
+      <CriticalBanner
+        sentiment="negative"
+        title="Your account is restricted."
+        description="Review your personal details to get your account active again."
+        action={{ label: 'Review details', onClick: fn() }}
+      />
+    );
+  },
+  ...withVariantConfig(['mobile'], {
+    parameters: {
+      chromatic: { pauseAnimationAtEnd: true },
+    },
+  }),
+};
+
 /**
  * Tests keyboard navigation and interaction:
  * - Tab focuses the first chevron toggle button

package/src/SlidingPanel/SlidingPanel.css

@@ -73,6 +73,10 @@
   box-shadow: inset 1px 0 0 0 rgba(0,0,0,0.10196);
   box-shadow: inset 1px 0 0 0 var(--color-border-neutral);
 }
+[dir="rtl"] .np-theme-personal .sliding-panel.sliding-panel--border-right {
+  box-shadow: inset -1px 0 0 0 rgba(0,0,0,0.10196);
+  box-shadow: inset -1px 0 0 0 var(--color-border-neutral);
+}
 .np-theme-personal .sliding-panel.sliding-panel--border-bottom {
   box-shadow: inset 0 1px 0 0 rgba(0,0,0,0.10196);
   box-shadow: inset 0 1px 0 0 var(--color-border-neutral);
@@ -81,3 +85,7 @@
   box-shadow: inset -1px 0 0 0 rgba(0,0,0,0.10196);
   box-shadow: inset -1px 0 0 0 var(--color-border-neutral);
 }
+[dir="rtl"] .np-theme-personal .sliding-panel.sliding-panel--border-left {
+  box-shadow: inset 1px 0 0 0 rgba(0,0,0,0.10196);
+  box-shadow: inset 1px 0 0 0 var(--color-border-neutral);
+}

package/src/SlidingPanel/SlidingPanel.less

@@ -85,6 +85,10 @@
 
     &.sliding-panel--border-right {
       box-shadow: inset 1px 0 0 0 var(--color-border-neutral);
+
+      [dir="rtl"] & {
+        box-shadow: inset -1px 0 0 0 var(--color-border-neutral);
+      }
     }
 
     &.sliding-panel--border-bottom {
@@ -93,6 +97,10 @@
 
     &.sliding-panel--border-left {
       box-shadow: inset -1px 0 0 0 var(--color-border-neutral);
+
+      [dir="rtl"] & {
+        box-shadow: inset 1px 0 0 0 var(--color-border-neutral);
+      }
     }
   }
 }

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

@@ -11,14 +11,15 @@ export default {
 
 type Story = StoryObj<typeof SlidingPanel>;
 
-const iframeDiff = withRTLDiff({ renderAs: 'iframe' });
+const iframeDiff = withRTLDiff({ renderAs: 'iframe', width: 'stretch' });
 
 const containerStyle: React.CSSProperties = {
   position: 'relative',
-  width: 300,
+  width: '100%',
   height: 120,
   overflow: 'hidden',
-  border: '1px dashed #ccc',
+  border: '1px solid #f5f5f5',
+  background: '#f5f5f5',
 };
 
 const panelContentStyle: React.CSSProperties = {

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

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
@@ -6,40 +6,38 @@ import { Snackbar } from '../Snackbar';
 
 export default {
   component: Snackbar,
-  title: 'Dialogs/Snackbar/Tests/RTL Diff',
+  title: 'Prompts/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());
+function SnackbarStory({ action }: { action?: { label: string } }) {
+  const [timestamp, setTimestamp] = useState(0);
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setTimestamp(1);
+  }, []);
 
   return (
     <Snackbar
       text={<span>Transfer completed successfully</span>}
       timestamp={timestamp}
       timeout={TIMEOUT}
-      action={{ label: 'View' }}
+      action={action}
     />
   );
 }
 
-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,
+  render: () => <SnackbarStory action={{ label: 'View' }} />,
+  ...withRTLDiff({ renderAs: 'iframe' }),
 };
 
 export const WithoutAction: Story = {
-  render: () => <RenderWithoutAction />,
-  ...iframeDiff,
+  render: () => <SnackbarStory />,
+  ...withRTLDiff({ renderAs: 'iframe' }),
 };

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

@@ -13,7 +13,7 @@ import SnackbarProvider from '../SnackbarProvider';
 
 const meta: Meta = {
   component: Snackbar,
-  title: 'Dialogs/Snackbar',
+  title: 'Prompts/Snackbar',
 };
 export default meta;
 

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

@@ -9,7 +9,7 @@ import { SnackbarConsumer } from '../SnackbarContext';
 import SnackbarProvider from '../SnackbarProvider';
 
 export default {
-  title: 'Dialogs/Snackbar/Tests',
+  title: 'Prompts/Snackbar/Tests',
   component: Snackbar,
   argTypes: {},
   tags: ['!autodocs', '!manifest'],

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

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import { Sentiment, Size } from '../../common';
 import SentimentSurface from '../../SentimentSurface';
-import { withVariantConfig } from '../../../.storybook/helpers';
 
 import StatusIcon, { StatusIconSentiment } from '../StatusIcon';
 
@@ -90,9 +90,17 @@ export const Variants: Story = {
   },
 };
 
-export const RTL: Story = {
-  render: Variants.render,
-  ...withVariantConfig(['rtl']),
+export const RTLDiff: Story = {
+  render: () => (
+    <>
+      <StatusIcon sentiment="positive" />
+      <StatusIcon sentiment="negative" />
+      <StatusIcon sentiment="warning" />
+      <StatusIcon sentiment="neutral" />
+      <StatusIcon sentiment="pending" />
+    </>
+  ),
+  ...withRTLDiff(),
 };
 
 /**