@transferwise/components 0.0.0-experimental-c7da7db → 0.0.0-experimental-b03ca75

package/src/prompt/common/Expander/Expander.test.tsx

@@ -0,0 +1,167 @@
+import { renderHook, act, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { useExpanderState, shouldShowWhenExpanded, ExpanderToggle } from './Expander';
+import { mockMatchMedia, render } from '../../../test-utils';
+
+mockMatchMedia();
+
+describe('useExpanderState', () => {
+  it('initializes with default expanded state (true)', () => {
+    const { result } = renderHook(() => useExpanderState());
+
+    expect(result.current.expanded).toBe(true);
+  });
+
+  it('initializes with custom expanded state', () => {
+    const { result } = renderHook(() => useExpanderState(false));
+
+    expect(result.current.expanded).toBe(false);
+  });
+
+  it('toggles expanded state', () => {
+    const { result } = renderHook(() => useExpanderState(true));
+
+    expect(result.current.expanded).toBe(true);
+
+    act(() => {
+      result.current.toggle();
+    });
+
+    expect(result.current.expanded).toBe(false);
+
+    act(() => {
+      result.current.toggle();
+    });
+
+    expect(result.current.expanded).toBe(true);
+  });
+
+  it('sets expanded state programmatically', () => {
+    const { result } = renderHook(() => useExpanderState(true));
+
+    act(() => {
+      result.current.setExpanded(false);
+    });
+
+    expect(result.current.expanded).toBe(false);
+
+    act(() => {
+      result.current.setExpanded(true);
+    });
+
+    expect(result.current.expanded).toBe(true);
+  });
+
+  it('memoizes toggle callback', () => {
+    const { result, rerender } = renderHook(() => useExpanderState(true));
+
+    const firstToggle = result.current.toggle;
+
+    rerender();
+
+    expect(result.current.toggle).toBe(firstToggle);
+  });
+});
+
+describe('shouldShowWhenExpanded', () => {
+  it('returns false when hasContent is false', () => {
+    expect(shouldShowWhenExpanded({ expanded: true, hasContent: false })).toBe(false);
+    expect(shouldShowWhenExpanded({ expanded: false, hasContent: false })).toBe(false);
+  });
+
+  it('returns true when expanded and hasContent are true', () => {
+    expect(shouldShowWhenExpanded({ expanded: true, hasContent: true })).toBe(true);
+  });
+
+  it('returns false when collapsed but hasContent is true', () => {
+    expect(shouldShowWhenExpanded({ expanded: false, hasContent: true })).toBe(false);
+  });
+
+  it('returns true when alwaysShow is true and hasContent is true, regardless of expanded', () => {
+    expect(shouldShowWhenExpanded({ expanded: true, hasContent: true, alwaysShow: true })).toBe(
+      true,
+    );
+    expect(shouldShowWhenExpanded({ expanded: false, hasContent: true, alwaysShow: true })).toBe(
+      true,
+    );
+  });
+
+  it('returns false when alwaysShow is true but hasContent is false', () => {
+    expect(shouldShowWhenExpanded({ expanded: true, hasContent: false, alwaysShow: true })).toBe(
+      false,
+    );
+    expect(shouldShowWhenExpanded({ expanded: false, hasContent: false, alwaysShow: true })).toBe(
+      false,
+    );
+  });
+});
+
+describe('ExpanderToggle', () => {
+  it('renders with correct aria-label when expanded', () => {
+    render(<ExpanderToggle expanded onToggle={jest.fn()} />);
+
+    expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'Collapse');
+  });
+
+  it('renders with correct aria-label when collapsed', () => {
+    render(<ExpanderToggle expanded={false} onToggle={jest.fn()} />);
+
+    expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'Expand');
+  });
+
+  it('renders with custom labels', () => {
+    const { rerender } = render(<ExpanderToggle expanded onToggle={jest.fn()} />);
+
+    expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'Collapse');
+
+    rerender(<ExpanderToggle expanded={false} onToggle={jest.fn()} />);
+
+    expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'Expand');
+  });
+
+  it('sets aria-expanded attribute correctly', () => {
+    const { rerender } = render(<ExpanderToggle expanded onToggle={jest.fn()} />);
+
+    expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
+
+    rerender(<ExpanderToggle expanded={false} onToggle={jest.fn()} />);
+
+    expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('calls onToggle when clicked', async () => {
+    const user = userEvent.setup();
+    const onToggle = jest.fn();
+
+    render(<ExpanderToggle expanded onToggle={onToggle} />);
+
+    await user.click(screen.getByRole('button'));
+
+    expect(onToggle).toHaveBeenCalledTimes(1);
+  });
+
+  it('applies custom className', () => {
+    render(<ExpanderToggle expanded className="custom-class" onToggle={jest.fn()} />);
+
+    expect(screen.getByRole('button')).toHaveClass('custom-class');
+  });
+
+  it('applies base class and collapsed class correctly', () => {
+    const { rerender } = render(<ExpanderToggle expanded onToggle={jest.fn()} />);
+
+    expect(screen.getByRole('button')).toHaveClass('wds-expander-toggle');
+    expect(screen.getByRole('button')).not.toHaveClass('wds-expander-toggle--collapsed');
+
+    rerender(<ExpanderToggle expanded={false} onToggle={jest.fn()} />);
+
+    expect(screen.getByRole('button')).toHaveClass('wds-expander-toggle');
+    expect(screen.getByRole('button')).toHaveClass('wds-expander-toggle--collapsed');
+  });
+
+  it('applies data-testid attribute', () => {
+    render(<ExpanderToggle expanded data-testid="expander-toggle" onToggle={jest.fn()} />);
+
+    expect(screen.getByTestId('expander-toggle')).toBeInTheDocument();
+  });
+});

package/src/prompt/common/Expander/Expander.tsx

@@ -0,0 +1,83 @@
+import { useState, useCallback } from 'react';
+import { clsx } from 'clsx';
+import { ChevronUp } from '@transferwise/icons';
+import IconButton from '../../../iconButton';
+import { useIntl } from 'react-intl';
+import messages from './Expander.messages';
+
+export type ExpanderState = {
+  expanded: boolean;
+  toggle: () => void;
+  setExpanded: (expanded: boolean) => void;
+};
+
+// Hook for managing expander state
+export function useExpanderState(initialExpanded = true): ExpanderState {
+  const [expanded, setExpanded] = useState(initialExpanded);
+
+  const toggle = useCallback(() => {
+    setExpanded((prev) => !prev);
+  }, []);
+
+  return {
+    expanded,
+    toggle,
+    setExpanded,
+  };
+}
+
+// Helper for conditional rendering based on expanded state
+export function shouldShowWhenExpanded({
+  expanded,
+  hasContent,
+  alwaysShow = false,
+}: {
+  expanded: boolean;
+  hasContent: boolean;
+  alwaysShow?: boolean;
+}): boolean {
+  if (alwaysShow) {
+    return hasContent;
+  }
+
+  return expanded && hasContent;
+}
+
+export type ExpanderToggleProps = {
+  expanded: boolean;
+  onToggle?: () => void;
+  size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;
+  className?: string;
+  'data-testid'?: string;
+};
+
+// Reusable toggle button component
+export const ExpanderToggle = ({
+  expanded,
+  onToggle,
+  size = 24,
+  className,
+  'data-testid': testId,
+}: ExpanderToggleProps) => {
+  const intl = useIntl();
+
+  return (
+    <IconButton
+      size={size}
+      priority="secondary"
+      aria-label={intl.formatMessage(
+        expanded ? messages.collapseAriaLabel : messages.expandAriaLabel,
+      )}
+      aria-expanded={expanded}
+      className={clsx(
+        'wds-expander-toggle',
+        { 'wds-expander-toggle--collapsed': !expanded },
+        className,
+      )}
+      data-testid={testId}
+      onClick={onToggle}
+    >
+      <ChevronUp />
+    </IconButton>
+  );
+};

package/src/prompt/helpers/promptMedia.tsx

@@ -0,0 +1,79 @@
+import { ReactNode } from 'react';
+import { GiftBox } from '@transferwise/icons';
+
+import AvatarView, { AvatarViewProps } from '../../avatarView';
+import Image from '../../image';
+import StatusIcon from '../../statusIcon';
+import { BadgeAssetsProps } from '../../badge';
+import { PrimitivePromptProps } from '../PrimitivePrompt';
+
+export type PromptMedia = {
+  imgSrc?: string;
+  avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {
+    asset?: AvatarViewProps['children'];
+    badge?: Pick<BadgeAssetsProps, 'flagCode'>;
+  };
+  'aria-label'?: string;
+  'aria-hidden'?: boolean;
+};
+
+type RenderPromptMediaOptions = {
+  media: PromptMedia;
+  sentiment: PrimitivePromptProps['sentiment'];
+  mediaId: string;
+  imgClassName: string;
+};
+
+export function renderPromptMedia({
+  media,
+  sentiment,
+  mediaId,
+  imgClassName,
+}: RenderPromptMediaOptions): ReactNode {
+  if (media?.imgSrc) {
+    return (
+      <Image
+        id={mediaId}
+        src={media.imgSrc}
+        className={imgClassName}
+        alt={media['aria-label'] ?? ''}
+      />
+    );
+  }
+  if (media?.avatar) {
+    const badge = media.avatar.badge
+      ? media.avatar.badge
+      : sentiment === 'proposition'
+        ? {}
+        : { status: sentiment };
+    return (
+      <AvatarView
+        {...media.avatar}
+        badge={badge}
+        aria-label={media['aria-label']}
+        aria-hidden={media['aria-hidden']}
+        id={mediaId}
+        size={48}
+      >
+        {media.avatar.asset}
+      </AvatarView>
+    );
+  }
+  return sentiment === 'proposition' ? (
+    <AvatarView
+      id={mediaId}
+      size={48}
+      aria-label={media['aria-label']}
+      aria-hidden={media['aria-hidden']}
+    >
+      <GiftBox />
+    </AvatarView>
+  ) : (
+    <StatusIcon
+      id={mediaId}
+      size={48}
+      sentiment={sentiment}
+      iconLabel={media['aria-hidden'] ? null : media['aria-label']}
+    />
+  );
+}

package/src/prompt/index.ts

@@ -12,3 +12,7 @@ export { ActionPrompt } from './ActionPrompt';
 // InfoPrompt
 export type { InfoPromptProps, InfoPromptAction, InfoPromptMedia } from './InfoPrompt';
 export { InfoPrompt } from './InfoPrompt';
+
+// CriticalBanner
+export type { CriticalBannerProps } from './CriticalBanner';
+export { CriticalBanner } from './CriticalBanner';

package/src/sentimentSurface/SentimentSurface.story.tsx

@@ -202,18 +202,26 @@ const TokenSwatch = ({ token }: { token: string }) => (
 export const EmphasisLevels: Story = {
   render: (args) => (
     <>
-      <SentimentSurface {...args} sentiment="negative" emphasis="base">
-        <div className="p-a-2">Negative - Base emphasis</div>
-      </SentimentSurface>
-      <SentimentSurface {...args} sentiment="negative" emphasis="elevated">
-        <div className="p-a-2">Negative - Elevated emphasis</div>
-      </SentimentSurface>
-      <SentimentSurface {...args} sentiment="success" emphasis="base">
-        <div className="p-a-2">Success - Base emphasis</div>
-      </SentimentSurface>
-      <SentimentSurface {...args} sentiment="success" emphasis="elevated">
-        <div className="p-a-2">Success - Elevated emphasis</div>
-      </SentimentSurface>
+      {sentiments.map((sentiment) => (
+        <div key={sentiment}>
+          <SentimentSurface
+            key={`${sentiment}-base`}
+            {...args}
+            sentiment={sentiment}
+            emphasis="base"
+          >
+            <div className="p-a-2 text-capitalize">{sentiment} - Base emphasis</div>
+          </SentimentSurface>
+          <SentimentSurface
+            key={`${sentiment}-elevated`}
+            {...args}
+            sentiment={sentiment}
+            emphasis="elevated"
+          >
+            <div className="p-a-2 text-capitalize">{sentiment} - Elevated emphasis</div>
+          </SentimentSurface>
+        </div>
+      ))}
     </>
   ),
   parameters: {
@@ -369,8 +377,8 @@ export const SentimentAwareComponents: Story = {
           {STATUS_NEGATIVE}
         </div>
 
-        <Header level="group" title="Success sentiment surface" />
-        <SentimentSurface sentiment="success">
+        <Header level="group" title="Success sentiment surface - Base emphasis" />
+        <SentimentSurface sentiment="success" emphasis="base">
           <div className="p-a-2 m-b-2 sentimentAwareComponent">
             {BODY}
             {AVATAR_SUCCESS}
@@ -378,8 +386,26 @@ export const SentimentAwareComponents: Story = {
           </div>
         </SentimentSurface>
 
-        <Header level="group" title="Negative sentiment surface" />
-        <SentimentSurface sentiment="negative">
+        <Header level="group" title="Success sentiment surface - Elevated emphasis" />
+        <SentimentSurface sentiment="success" emphasis="elevated">
+          <div className="p-a-2 m-b-2 sentimentAwareComponent">
+            {BODY}
+            {AVATAR_SUCCESS}
+            {STATUS_SUCCESS}
+          </div>
+        </SentimentSurface>
+
+        <Header level="group" title="Negative sentiment surface - Base emphasis" />
+        <SentimentSurface sentiment="negative" emphasis="base">
+          <div className="p-a-2 m-b-2 sentimentAwareComponent">
+            {BODY}
+            {AVATAR_NEGATIVE}
+            {STATUS_NEGATIVE}
+          </div>
+        </SentimentSurface>
+
+        <Header level="group" title="Negative sentiment surface - Elevated emphasis" />
+        <SentimentSurface sentiment="negative" emphasis="elevated">
           <div className="p-a-2 m-b-2 sentimentAwareComponent">
             {BODY}
             {AVATAR_NEGATIVE}
@@ -427,7 +453,7 @@ function CustomCard({ children, className }: { className?: string; children: Rea
 
 export const CustomComponents: Story = {
   tags: ['!autodocs', '!dev'],
-  render: (args) => (
+  render: () => (
     <>
       <style>{`
         .custom-card {

package/src/styles/less/neptune.css

@@ -1,6 +1,6 @@
 /**
- * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:10 GMT
+ * Do not edit directly
+ * Generated on Wed, 07 Jan 2026 11:56:15 GMT
  */
 
 :root {
@@ -142,8 +142,8 @@
 }
 
 /**
- * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Do not edit directly
+ * Generated on Wed, 07 Jan 2026 11:56:15 GMT
  */
 
 .np-theme-personal {
@@ -391,8 +391,8 @@
 }
 
 /**
- * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Do not edit directly
+ * Generated on Wed, 07 Jan 2026 11:56:15 GMT
  */
 
 .np-theme-personal--forest-green {
@@ -640,8 +640,8 @@
 }
 
 /**
- * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Do not edit directly
+ * Generated on Wed, 07 Jan 2026 11:56:15 GMT
  */
 
 .np-theme-personal--bright-green {
@@ -889,8 +889,8 @@
 }
 
 /**
- * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Do not edit directly
+ * Generated on Wed, 07 Jan 2026 11:56:15 GMT
  */
 
 .np-theme-personal--dark {
@@ -1138,8 +1138,8 @@
 }
 
 /**
- * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Do not edit directly
+ * Generated on Wed, 07 Jan 2026 11:56:15 GMT
  */
 
 .np-theme-platform {
@@ -1321,8 +1321,8 @@
 }
 
 /**
- * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Do not edit directly
+ * Generated on Wed, 07 Jan 2026 11:56:15 GMT
  */
 
 .np-theme-platform--forest-green {
@@ -1504,8 +1504,8 @@
 }
 
 /**
- * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Do not edit directly
+ * Generated on Wed, 07 Jan 2026 11:56:15 GMT
  */
 
 .np-theme-business {
@@ -1688,8 +1688,8 @@
 }
 
 /**
- * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Do not edit directly
+ * Generated on Wed, 07 Jan 2026 11:56:15 GMT
  */
 
 .np-theme-business--dark {
@@ -1872,8 +1872,8 @@
 }
 
 /**
- * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Do not edit directly
+ * Generated on Wed, 07 Jan 2026 11:56:15 GMT
  */
 
 .np-theme-business--forest-green {
@@ -2056,8 +2056,8 @@
 }
 
 /**
- * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Do not edit directly
+ * Generated on Wed, 07 Jan 2026 11:56:15 GMT
  */
 
 .np-theme-business--bright-green {

package/src/tooltip/Tooltip.tsx

@@ -1,22 +1,17 @@
-import {
-  arrow as arrowMiddleware,
-  autoUpdate,
-  flip,
-  offset,
-  useFloating,
-} from '@floating-ui/react';
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 import { clsx } from 'clsx';
 import {
   AriaAttributes,
-  CSSProperties,
   PropsWithChildren,
   ReactElement,
   ReactNode,
   cloneElement,
+  useEffect,
   useId,
   useRef,
   useState,
 } from 'react';
+import { usePopper } from 'react-popper';
 
 import { CommonProps, Position } from '../common';
 import {
@@ -41,30 +36,48 @@ const Tooltip = ({
   className,
 }: TooltipProps) => {
   const [open, setOpen] = useState(false);
-  const arrowRef = useRef<HTMLDivElement | null>(null);
+  const anchorReference = useRef(null);
+  const [arrowElement, setArrowElement] = useState(null);
+  const [popperElement, setPopperElement] = useState(null);
 
   const fallbackId = useId();
   const tooltipId = id ?? fallbackId;
+  const modifiers = [];
+
+  modifiers.push({
+    name: 'arrow',
+    options: {
+      element: arrowElement,
+      options: {
+        padding: 8, // 8px from the edges of the popper
+      },
+    },
+  });
+  // This lets you displace a popper element from its reference element.
+  modifiers.push({ name: 'offset', options: { offset: [0, 16] } });
+  modifiers.push({
+    name: 'flip',
+    options: {
+      fallbackPlacements: Position.TOP,
+    },
+  });
 
-  const { refs, floatingStyles, placement, middlewareData } = useFloating({
+  const { styles, attributes, forceUpdate } = usePopper(anchorReference.current, popperElement, {
     placement: position,
-    middleware: [
-      offset(16),
-      flip({ fallbackPlacements: [Position.TOP] }),
-      arrowMiddleware({ element: arrowRef, padding: 8 }),
-    ],
-    whileElementsMounted: open ? autoUpdate : undefined,
-    open,
+    modifiers,
   });
 
-  const arrowStyle: CSSProperties = {
-    ...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),
-    ...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),
-  };
+  // If the trigger is not visible when the position is calculated, it will be incorrect. Because this can happen repeatedly (on resize for example),
+  // it is most simple just to always position before opening
+  useEffect(() => {
+    if (open && forceUpdate) {
+      forceUpdate();
+    }
+  }, [open]);
 
   return (
     <span
-      ref={refs.setReference}
+      ref={anchorReference}
       className="tw-tooltip-container"
       onMouseOver={() => setOpen(true)}
       onFocus={() => setOpen(true)}
@@ -77,22 +90,28 @@ const Tooltip = ({
           })
         : null}
       <div
-        ref={refs.setFloating}
+        // @ts-expect-error
+        ref={setPopperElement}
         className={clsx(
           'np-tooltip',
           'np-panel',
           open ? `np-panel--open np-tooltip--open` : null,
           className,
         )}
-        style={floatingStyles}
-        data-popper-placement={placement}
+        style={{ ...styles.popper }}
+        {...attributes.popper}
         aria-hidden={!open}
         role="tooltip"
         id={`${tooltipId}-tooltip`}
       >
         <div className="np-panel__content tooltip-inner">
           {label}
-          <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />
+          <div
+            // @ts-expect-error
+            ref={setArrowElement}
+            className={clsx('np-panel__arrow')}
+            style={styles.arrow}
+          />
         </div>
       </div>
     </span>