@transferwise/components 46.160.0 → 46.160.2

package/src/Nudge/Nudge.css

@@ -41,7 +41,10 @@
   inline-size: 161px;
 }
 [dir="rtl"] .wds-nudge-media-globe {
-  transform: scaleX(-1);
+  margin-inline-start: -63px;
+  margin-block-start: -15px;
+  position: absolute;
+  inline-size: 161px;
 }
 .wds-nudge-media-lock {
   margin-inline-start: -11px;
@@ -50,36 +53,24 @@
   inline-size: 104px;
   transform: rotate(-14.86deg);
 }
-[dir="rtl"] .wds-nudge-media-lock {
-  transform: scaleX(-1);
-}
 .wds-nudge-media-wallet {
   margin-inline-start: -15px;
   margin-block-start: 18px;
   position: absolute;
   inline-size: 107px;
 }
-[dir="rtl"] .wds-nudge-media-wallet {
-  transform: scaleX(-1);
-}
 .wds-nudge-media-gear {
   margin-inline-start: -18px;
   margin-block-start: 19px;
   position: absolute;
   inline-size: 111px;
 }
-[dir="rtl"] .wds-nudge-media-gear {
-  transform: scaleX(-1);
-}
 .wds-nudge-media-invite-letter {
   margin-inline-start: -17px;
   margin-block-start: -2px;
   position: absolute;
   inline-size: 105px;
 }
-[dir="rtl"] .wds-nudge-media-invite-letter {
-  transform: scaleX(-1);
-}
 .wds-nudge-media-personal-card,
 .wds-nudge-media-business-card {
   margin-inline-start: -15px;
@@ -87,73 +78,48 @@
   position: absolute;
   inline-size: 104px;
 }
-[dir="rtl"] .wds-nudge-media-personal-card,
-[dir="rtl"] .wds-nudge-media-business-card {
-  transform: scaleX(-1);
-}
 .wds-nudge-media-heart {
   margin-inline-start: -7px;
   margin-block-start: 11px;
   position: absolute;
   inline-size: 95px;
 }
-[dir="rtl"] .wds-nudge-media-heart {
-  transform: scaleX(-1);
-}
 .wds-nudge-media-multi-currency {
   margin-inline-start: -30px;
   margin-block-start: 1px;
   position: absolute;
   inline-size: 131px;
 }
-[dir="rtl"] .wds-nudge-media-multi-currency {
-  transform: scaleX(-1);
-}
 .wds-nudge-media-shopping-bag {
   margin-inline-start: -9px;
   margin-block-start: 14px;
   position: absolute;
   inline-size: 116px;
 }
-[dir="rtl"] .wds-nudge-media-shopping-bag {
-  transform: scaleX(-1);
-}
 .wds-nudge-media-flower {
   margin-inline-start: -24px;
   margin-block-start: 11px;
   position: absolute;
   inline-size: 156px;
 }
-[dir="rtl"] .wds-nudge-media-flower {
-  transform: scaleX(-1);
-}
 .wds-nudge-media-backpack {
   margin-inline-start: -16px;
   margin-block-start: 6px;
   position: absolute;
   inline-size: 123px;
 }
-[dir="rtl"] .wds-nudge-media-backpack {
-  transform: scaleX(-1);
-}
 .wds-nudge-media-gift-box {
   margin-inline-start: -22px;
   margin-block-start: 6px;
   position: absolute;
   inline-size: 129px;
 }
-[dir="rtl"] .wds-nudge-media-gift-box {
-  transform: scaleX(-1);
-}
 .wds-nudge-media-documents {
   margin-inline-start: -8px;
   margin-block-start: 8px;
   position: absolute;
   inline-size: 120px;
 }
-[dir="rtl"] .wds-nudge-media-documents {
-  transform: scaleX(-1);
-}
 .wds-nudge-container {
   align-items: stretch;
   display: flex;

package/src/Nudge/Nudge.less

@@ -32,6 +32,10 @@
 
     &-globe {
       .media-position(161px, -76px, -5px);
+
+      [dir="rtl"] & {
+        .media-position(161px, -63px, -15px);
+      }
     }
 
     &-lock {
@@ -129,8 +133,4 @@
   margin-top: @margin-top;
   position: absolute;
   width: @size;
-
-  [dir="rtl"] & {
-    transform: scaleX(-1);
-  }
 }

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

@@ -10,28 +10,45 @@ export default {
 
 type Story = StoryObj<typeof Nudge>;
 
+const MEDIA_NAMES = [
+  'globe',
+  'lock',
+  'wallet',
+  'gear',
+  'invite-letter',
+  'personal-card',
+  'business-card',
+  'heart',
+  'multi-currency',
+  'shopping-bag',
+  'flower',
+  'gift-box',
+  'backpack',
+  'documents',
+] as const;
+
 export const RTLDiff: Story = {
   render: () => (
     <>
+      {MEDIA_NAMES.map((mediaName) => (
+        <Nudge
+          key={mediaName}
+          mediaName={mediaName}
+          title={mediaName}
+          link="Link"
+          href="#"
+          onDismiss={() => {}}
+        />
+      ))}
       <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"
+        title="With action"
         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(),
+  ...withRTLDiff({ width: 'stretch' }),
 };

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/Popover/_stories/Popover.rtl.test.story.tsx

@@ -14,16 +14,6 @@ export default {
 
 type Story = StoryObj<typeof Popover>;
 
-const iframeDiff = withRTLDiff({ renderAs: 'iframe' });
-
-const containerStyle: React.CSSProperties = {
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  minHeight: '24rem',
-  width: '100%',
-};
-
 const clickTrigger = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
   const canvas = within(canvasElement);
   const trigger = canvas.queryByRole('button');
@@ -33,64 +23,64 @@ const clickTrigger = async ({ canvasElement }: { canvasElement: HTMLElement }) =
 
 export const PlacementRight: Story = {
   render: () => (
-    <div style={containerStyle}>
-      <Popover
-        preferredPlacement={Position.RIGHT}
-        title="Guaranteed rate"
-        content="You'll get this rate as long as we receive your 10 EUR within the next 51 hours."
-      >
-        <Button v2>Placement right</Button>
-      </Popover>
-    </div>
+    <Popover
+      preferredPlacement={Position.RIGHT}
+      title="Guaranteed rate"
+      content="You'll get this rate as long as we receive your 10 EUR within the next 51 hours."
+    >
+      <Button size="sm" v2>
+        right
+      </Button>
+    </Popover>
   ),
   play: clickTrigger,
-  ...iframeDiff,
+  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'left', vAlign: 'center' }),
 };
 
 export const PlacementLeft: Story = {
   render: () => (
-    <div style={containerStyle}>
-      <Popover
-        preferredPlacement={Position.LEFT}
-        title="Guaranteed rate"
-        content="You'll get this rate as long as we receive your 10 EUR within the next 51 hours."
-      >
-        <Button v2>Placement left</Button>
-      </Popover>
-    </div>
+    <Popover
+      preferredPlacement={Position.LEFT}
+      title="Guaranteed rate"
+      content="You'll get this rate as long as we receive your 10 EUR within the next 51 hours."
+    >
+      <Button size="sm" v2>
+        left
+      </Button>
+    </Popover>
   ),
   play: clickTrigger,
-  ...iframeDiff,
+  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'right', vAlign: 'center' }),
 };
 
 export const PlacementTop: Story = {
   render: () => (
-    <div style={containerStyle}>
-      <Popover
-        preferredPlacement={Position.TOP}
-        title="Guaranteed rate"
-        content="You'll get this rate as long as we receive your 10 EUR within the next 51 hours."
-      >
-        <Button v2>Placement top</Button>
-      </Popover>
-    </div>
+    <Popover
+      preferredPlacement={Position.TOP}
+      title="Guaranteed rate"
+      content="You'll get this rate as long as we receive your 10 EUR within the next 51 hours."
+    >
+      <Button size="sm" v2>
+        top
+      </Button>
+    </Popover>
   ),
   play: clickTrigger,
-  ...iframeDiff,
+  ...withRTLDiff({ renderAs: 'iframe', vAlign: 'bottom', hAlign: 'center' }),
 };
 
 export const PlacementBottom: Story = {
   render: () => (
-    <div style={containerStyle}>
-      <Popover
-        preferredPlacement={Position.BOTTOM}
-        title="Guaranteed rate"
-        content="You'll get this rate as long as we receive your 10 EUR within the next 51 hours."
-      >
-        <Button v2>Placement bottom</Button>
-      </Popover>
-    </div>
+    <Popover
+      preferredPlacement={Position.BOTTOM}
+      title="Guaranteed rate"
+      content="You'll get this rate as long as we receive your 10 EUR within the next 51 hours."
+    >
+      <Button size="sm" v2>
+        bottom
+      </Button>
+    </Popover>
   ),
   play: clickTrigger,
-  ...iframeDiff,
+  ...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.