@transferwise/components 46.160.0 → 46.160.2

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/SegmentedControl/SegmentedControl.css

@@ -35,7 +35,8 @@
   background: var(--color-background-screen);
   border-radius: 24px;
   border-radius: var(--size-24);
-  transition: left 300ms;
+  transition: left 300ms,
+    right 300ms;
 }
 .segmented-control__segments--no-animate::after {
   transition: none !important;

package/src/SegmentedControl/SegmentedControl.less

@@ -12,7 +12,7 @@
   justify-content: center;
   align-items: center;
   background: var(--color-background-neutral);
-  border-radius: var(--size-24);  
+  border-radius: var(--size-24);
   transition: outline 300ms;
   outline: 2px solid transparent;
 }
@@ -31,7 +31,9 @@
   z-index: 0;
   background: var(--color-background-screen);
   border-radius: var(--size-24);
-  transition: left 300ms;
+  transition:
+    left 300ms,
+    right 300ms;
 }
 
 .segmented-control__segments--no-animate::after {

package/src/SegmentedControl/SegmentedControl.tsx

@@ -3,6 +3,7 @@ import { createRef, useEffect, useRef, useState } from 'react';
 
 import Body from '../Body';
 import { Typography } from '../common';
+import { useDirection } from '../common/hooks';
 
 type SegmentBase = { id: string; label: string; value: string };
 
@@ -40,6 +41,7 @@ const SegmentedControl = ({
 }: SegmentedControlProps) => {
   const isMountedRef = useRef(false);
   const [animate, setAnimate] = useState(false);
+  const { isRTL } = useDirection();
 
   const segmentsRef = useRef<HTMLDivElement>(null);
 
@@ -62,8 +64,12 @@ const SegmentedControl = ({
     // This is so we can animate the highlight to the selected segment
     if (selectedSegmentRef?.current && segmentsRef.current) {
       const { style } = segmentsRef.current;
-      style.setProperty('--segment-highlight-width', `${selectedSegmentRef.current.offsetWidth}px`);
-      style.setProperty('--segment-highlight-x', `${selectedSegmentRef.current.offsetLeft}px`);
+      const segment = selectedSegmentRef.current;
+      const inlineOffset = isRTL
+        ? segmentsRef.current.offsetWidth - segment.offsetLeft - segment.offsetWidth
+        : segment.offsetLeft;
+      style.setProperty('--segment-highlight-width', `${segment.offsetWidth}px`);
+      style.setProperty('--segment-highlight-x', `${inlineOffset}px`);
     }
   };
 

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

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import SegmentedControl from '../SegmentedControl';
@@ -22,24 +23,31 @@ const viewSegments = [
   { id: 'seg-gamma', label: 'Gamma', value: 'gamma', controls: 'panel-gamma' },
 ] as const;
 
-export const RTLDiff: Story = {
-  render: () => (
+function InteractiveSegmentedControl() {
+  const [inputValue, setInputValue] = useState('one');
+  const [viewValue, setViewValue] = useState('beta');
+
+  return (
     <>
       <SegmentedControl
         name="rtl-input"
         mode="input"
         segments={inputSegments}
-        value="one"
-        onChange={() => {}}
+        value={inputValue}
+        onChange={setInputValue}
       />
       <SegmentedControl
         name="rtl-view"
         mode="view"
         segments={viewSegments}
-        value="alpha"
-        onChange={() => {}}
+        value={viewValue}
+        onChange={setViewValue}
       />
     </>
-  ),
-  ...withRTLDiff(),
+  );
+}
+
+export const RTLDiff: Story = {
+  render: () => <InteractiveSegmentedControl />,
+  ...withRTLDiff({ width: 'stretch', renderAs: 'iframe' }),
 };

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(),
 };
 
 /**

package/src/Tooltip/Tooltip.css

@@ -42,9 +42,3 @@
   visibility: visible;
   visibility: initial;
 }
-.np-panel[data-popper-placement^="right"] > .np-panel__content.tooltip-inner .np-panel__arrow {
-  inset-inline-start: -7px;
-}
-.np-panel[data-popper-placement^="left"] > .np-panel__content.tooltip-inner .np-panel__arrow {
-  inset-inline-end: -7px;
-}

package/src/Tooltip/Tooltip.less

@@ -48,15 +48,3 @@
     }
   }
 }
-
-.np-panel[data-popper-placement^="right"] > .np-panel__content.tooltip-inner {
-  .np-panel__arrow {
-    left: -7px;
-  }
-}
-
-.np-panel[data-popper-placement^="left"] > .np-panel__content.tooltip-inner {
-  .np-panel__arrow {
-    right: -7px;
-  }
-}

package/src/Tooltip/Tooltip.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 
+import { DirectionProvider } from '../Provider/Direction/DirectionProvider';
 import Tooltip from '.';
 
 describe('Tooltip Component', () => {
@@ -102,4 +103,54 @@ describe('Tooltip Component', () => {
     const tooltipElement = screen.getByRole('tooltip', { hidden: true });
     expect(tooltipElement).toBeVisible();
   });
+
+  describe('RTL position mirroring', () => {
+    it('mirrors position="left" to right in RTL', async () => {
+      render(
+        <DirectionProvider direction="rtl">
+          <Tooltip label="Test Tooltip" position="left">
+            <span>Hover me</span>
+          </Tooltip>
+        </DirectionProvider>,
+      );
+      const triggerElement = screen.getByText('Hover me');
+      await userEvent.hover(triggerElement);
+
+      const tooltip = screen.getByRole('tooltip', { hidden: true });
+      expect(tooltip).toHaveAttribute('data-popper-placement', 'right');
+    });
+
+    it('mirrors position="right" to left in RTL', async () => {
+      render(
+        <DirectionProvider direction="rtl">
+          <Tooltip label="Test Tooltip" position="right">
+            <span>Hover me</span>
+          </Tooltip>
+        </DirectionProvider>,
+      );
+      const triggerElement = screen.getByText('Hover me');
+      await userEvent.hover(triggerElement);
+
+      const tooltip = screen.getByRole('tooltip', { hidden: true });
+      expect(tooltip).toHaveAttribute('data-popper-placement', 'left');
+    });
+
+    it.each(['top', 'bottom'] as const)(
+      'does not mirror position="%s" in RTL',
+      async (position) => {
+        render(
+          <DirectionProvider direction="rtl">
+            <Tooltip label="Test Tooltip" position={position}>
+              <span>Hover me</span>
+            </Tooltip>
+          </DirectionProvider>,
+        );
+        const triggerElement = screen.getByText('Hover me');
+        await userEvent.hover(triggerElement);
+
+        const tooltip = screen.getByRole('tooltip', { hidden: true });
+        expect(tooltip).toHaveAttribute('data-popper-placement', position);
+      },
+    );
+  });
 });

package/src/Tooltip/Tooltip.tsx

@@ -19,6 +19,7 @@ import {
 } from 'react';
 
 import { CommonProps, Position } from '../common';
+import useDirection from '../common/hooks/useDirection';
 import {
   PositionBottom,
   PositionLeft,
@@ -42,12 +43,21 @@ const Tooltip = ({
 }: TooltipProps) => {
   const [open, setOpen] = useState(false);
   const arrowRef = useRef<HTMLDivElement | null>(null);
+  const { isRTL } = useDirection();
+
+  const resolvedPosition = isRTL
+    ? position === 'left'
+      ? 'right'
+      : position === 'right'
+        ? 'left'
+        : position
+    : position;
 
   const fallbackId = useId();
   const tooltipId = id ?? fallbackId;
 
   const { refs, floatingStyles, placement, middlewareData } = useFloating({
-    placement: position,
+    placement: resolvedPosition,
     middleware: [
       offset(16),
       flip({ fallbackPlacements: [Position.TOP] }),

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

@@ -13,16 +13,6 @@ export default {
 
 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');
@@ -32,48 +22,40 @@ const hoverTrigger = async ({ canvasElement }: { canvasElement: HTMLElement }) =
 
 export const PositionTop: Story = {
   render: () => (
-    <div style={containerStyle}>
-      <Tooltip label="Top positioned tooltip" position="top">
-        <Button>Top</Button>
-      </Tooltip>
-    </div>
+    <Tooltip label="Top positioned tooltip" position="top">
+      <Button>Top</Button>
+    </Tooltip>
   ),
   play: hoverTrigger,
-  ...iframeDiff,
+  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center', vAlign: 'bottom' }),
 };
 
 export const PositionBottom: Story = {
   render: () => (
-    <div style={containerStyle}>
-      <Tooltip label="Bottom positioned tooltip" position="bottom">
-        <Button>Bottom</Button>
-      </Tooltip>
-    </div>
+    <Tooltip label="Bottom positioned tooltip" position="bottom">
+      <Button>Bottom</Button>
+    </Tooltip>
   ),
   play: hoverTrigger,
-  ...iframeDiff,
+  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center' }),
 };
 
 export const PositionRight: Story = {
   render: () => (
-    <div style={containerStyle}>
-      <Tooltip label="Right positioned tooltip" position="right">
-        <Button>Right</Button>
-      </Tooltip>
-    </div>
+    <Tooltip label="Right positioned tooltip" position="right">
+      <Button>Right</Button>
+    </Tooltip>
   ),
   play: hoverTrigger,
-  ...iframeDiff,
+  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'left', vAlign: 'center' }),
 };
 
 export const PositionLeft: Story = {
   render: () => (
-    <div style={containerStyle}>
-      <Tooltip label="Left positioned tooltip" position="left">
-        <Button>Left</Button>
-      </Tooltip>
-    </div>
+    <Tooltip label="Left positioned tooltip" position="left">
+      <Button>Left</Button>
+    </Tooltip>
   ),
   play: hoverTrigger,
-  ...iframeDiff,
+  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'right', vAlign: 'center' }),
 };

package/src/UploadInput/UploadItem/UploadItem.css

@@ -41,8 +41,7 @@
 .np-upload-input__item .np-upload-input__title,
 .np-upload-input__item .np-upload-input__text {
   margin: 0;
-  -moz-text-align-last: left;
-       text-align-last: left;
+  text-align: start;
   color: #5d7079;
   color: var(--color-content-secondary);
 }
@@ -98,7 +97,7 @@
   justify-content: center;
 }
 .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:before {
-  content: '';
+  content: "";
   display: block;
   inline-size: var(--clickAreaSize);
   block-size: var(--clickAreaSize);
@@ -153,8 +152,8 @@
   padding-inline-start: var(--size-16);
 }
 .np-upload-input__item .np-upload-input-errors > li::before {
-  content: '•' ;
-  content: '•' / '';
+  content: "•" ;
+  content: "•" / "";
   position: absolute;
   display: block;
   inset-inline-start: 0;