@transferwise/components 0.0.0-experimental-4c97d70 → 0.0.0-experimental-862fadc

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

@@ -1,167 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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']}
-    />
-  );
-}