@transferwise/components 46.136.1 → 46.137.1

package/src/prompt/InfoPrompt/InfoPrompt.less

@@ -33,5 +33,28 @@
 
   .wds-prompt__media-wrapper {
     padding: 0;
+
+    @media (--screen-400-zoom) {
+      padding-top: var(--size-4);
+    }
+
+    &:has(.wds-info-prompt__media > .tw-icon) {
+      @media (--screen-400-zoom) {
+        padding-top: var(--size-8);
+      }
+    }
+
+    // More padding for when there is a title
+    &:has(+ .wds-info-prompt__content .wds-info-prompt__title:first-child) {
+      @media (--screen-400-zoom) {
+        padding-top: var(--size-8);
+      }
+
+      &:has(.wds-info-prompt__media > .tw-icon) {
+        @media (--screen-400-zoom) {
+          padding-top: var(--size-12);
+        }
+      }
+    }
   }
 }

package/src/prompt/InfoPrompt/InfoPrompt.tsx

@@ -117,7 +117,11 @@ export const InfoPrompt = ({
     }
 
     if (sentiment === 'proposition') {
-      return <GiftBox size={24} />;
+      return (
+        <span className="wds-info-prompt__media">
+          <GiftBox />
+        </span>
+      );
     }
 
     return <StatusIcon size={24} sentiment={statusIconSentiment} />;

package/src/prompt/PrimitivePrompt/PrimitivePrompt.tsx

@@ -1,17 +1,22 @@
 import { Cross } from '@transferwise/icons';
 import { clsx } from 'clsx';
-import SentimentSurface, { Sentiment } from '../../sentimentSurface';
+import SentimentSurface, { Emphasis, Sentiment } from '../../sentimentSurface';
 import IconButton from '../../iconButton';
 import { useIntl } from 'react-intl';
 import closeBtnMessages from '../../common/closeButton/CloseButton.messages';
-import { HTMLAttributes, ReactNode } from 'react';
+import { forwardRef, HTMLAttributes, ReactNode } from 'react';
 
 export type PrimitivePromptProps = HTMLAttributes<HTMLDivElement> & {
   /**
-   * The sentiment determines the colour scheme
+   * The sentiment determines the colour scheme.
    * @default success
    */
   sentiment?: Sentiment;
+  /**
+   * The emphasis level affecting background and text contrast.
+   * @default 'base'
+   */
+  emphasis?: Emphasis;
   /**
    * Media to be displayed on the prompt (icon/image/etc).
    */
@@ -33,42 +38,53 @@ export type PrimitivePromptProps = HTMLAttributes<HTMLDivElement> & {
 /**
  * PrimitivePrompt is a low-level component that provides the structure, sentiment support and styling for various prompts.
  * Uses several css variables to handle styling from within the consuming component, e.g. --Prompt-padding. */
-export const PrimitivePrompt = ({
-  sentiment = 'success',
-  media,
-  actions,
-  onDismiss,
-  className,
-  children,
-  ...restProps
-}: PrimitivePromptProps) => {
-  const intl = useIntl();
+export const PrimitivePrompt = forwardRef<HTMLDivElement, PrimitivePromptProps>(
+  (
+    {
+      sentiment = 'success',
+      emphasis = 'base',
+      media,
+      actions,
+      onDismiss,
+      className,
+      children,
+      ...restProps
+    },
+    ref,
+  ) => {
+    const intl = useIntl();
 
-  return (
-    <SentimentSurface
-      sentiment={sentiment}
-      className={clsx('wds-prompt', `wds-prompt--${sentiment}`, className)}
-      {...restProps}
-    >
-      <div
-        className={clsx('wds-prompt__content-wrapper', {
-          'wds-prompt__content-wrapper--with-dismiss': !!onDismiss,
-        })}
+    return (
+      <SentimentSurface
+        // @ts-expect-error - SentimentSurface forwardRef types don't expose ref in props
+        ref={ref}
+        sentiment={sentiment}
+        emphasis={emphasis}
+        className={clsx('wds-prompt', `wds-prompt--${sentiment}`, className)}
+        {...restProps}
       >
-        <div className={clsx('wds-prompt__media-wrapper')}>{media}</div>
-        {children}
-        {onDismiss && (
-          <IconButton
-            size={24}
-            priority="secondary"
-            aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}
-            onClick={onDismiss}
-          >
-            <Cross />
-          </IconButton>
-        )}
-        {actions && <div className="wds-prompt__actions-wrapper">{actions}</div>}
-      </div>
-    </SentimentSurface>
-  );
-};
+        <div
+          className={clsx('wds-prompt__content-wrapper', {
+            'wds-prompt__content-wrapper--with-dismiss': !!onDismiss,
+          })}
+        >
+          <div className={clsx('wds-prompt__media-wrapper')}>{media}</div>
+          {children}
+          {onDismiss && (
+            <IconButton
+              size={24}
+              priority="secondary"
+              aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}
+              onClick={onDismiss}
+            >
+              <Cross />
+            </IconButton>
+          )}
+          {actions && <div className="wds-prompt__actions-wrapper">{actions}</div>}
+        </div>
+      </SentimentSurface>
+    );
+  },
+);
+
+PrimitivePrompt.displayName = 'PrimitivePrompt';

package/src/prompt/common/Expander/Expander.css

@@ -0,0 +1,8 @@
+.wds-expander-toggle {
+  align-self: flex-start;
+  flex-shrink: 0;
+  transition: transform 0.2s ease-in-out;
+}
+.wds-expander-toggle--collapsed {
+  transform: rotate(180deg);
+}

package/src/prompt/common/Expander/Expander.less

@@ -0,0 +1,9 @@
+.wds-expander-toggle {
+  align-self: flex-start;
+  flex-shrink: 0;
+  transition: transform 0.2s ease-in-out;
+
+  &--collapsed {
+    transform: rotate(180deg);
+  }
+}

package/src/prompt/common/Expander/Expander.messages.ts

@@ -0,0 +1,14 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  expandAriaLabel: {
+    id: 'neptune.Expander.expandAriaLabel',
+    defaultMessage: 'Expand',
+    description: 'Expand button for expander',
+  },
+  collapseAriaLabel: {
+    id: 'neptune.Expander.collapseAriaLabel',
+    defaultMessage: 'Collapse',
+    description: 'Collapse button for expander',
+  },
+});

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/radio/Radio.story.tsx

@@ -52,7 +52,7 @@ export const Variants: StoryObj<RadioProps> = {
             id="radioGroup2"
             avatar={
               <AvatarView>
-                <Flag code="IMP" />
+                <Flag code="IM" />
               </AvatarView>
             }
             value="option2"

package/src/section/Section.story.tsx

@@ -108,14 +108,8 @@ export const WithListItems = () => {
   return (
     <Section>
       <Header title="Section with list items" />
-      <ListItem
-        title="Item 1"
-        control={<ListItem.Navigation onClick={() => action('Item 1')} />}
-      />
-      <ListItem
-        title="Item 2"
-        control={<ListItem.Navigation onClick={() => action('Item 2')} />}
-      />
+      <ListItem title="Item 1" control={<ListItem.Navigation onClick={() => action('Item 1')} />} />
+      <ListItem title="Item 2" control={<ListItem.Navigation onClick={() => action('Item 2')} />} />
     </Section>
   );
 };

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/statusIcon/StatusIcon.test.tsx

@@ -42,7 +42,6 @@ describe('StatusIcon', () => {
     },
   );
 
-
   it.each([
     [Sentiment.WARNING, 'alert-icon'],
     [Sentiment.PENDING, 'clock-borderless-icon'],
@@ -61,7 +60,6 @@ describe('StatusIcon', () => {
     },
   );
 
-
   describe('accessible name', () => {
     it.each([
       ['Error', Sentiment.NEGATIVE],

package/src/styles/less/neptune.css

@@ -4456,7 +4456,6 @@ kbd kbd {
 
 .text-underline {
   text-decoration: underline;
-  -webkit-text-decoration: underline !important;
   text-decoration: underline !important;
   text-underline-offset: 0.3em;
 }