@transferwise/components 46.81.0 → 46.82.1

package/src/table/TableCell.spec.tsx

@@ -0,0 +1,298 @@
+import { render, screen, mockMatchMedia } from '../test-utils';
+import '@testing-library/jest-dom';
+import TableCell, {
+  TableCellCurrency,
+  TableCellLeading,
+  TableCellStatus,
+  TableCellText,
+} from './TableCell';
+
+mockMatchMedia();
+
+describe('TableCell Component', () => {
+  const cellContentMocks = {
+    leading: {
+      type: 'leading',
+      primaryText: 'Alice Johnson',
+      secondaryText: 'Frontend Developer',
+      avatar: {
+        profileName: 'Alice Johnson',
+      },
+    } satisfies TableCellLeading,
+    text: {
+      type: 'text',
+      text: 'JP, Tokyo',
+    } satisfies TableCellText,
+    currency: {
+      type: 'currency',
+      primaryCurrency: {
+        amount: 56789.01,
+        currency: 'jpy',
+      },
+      secondaryCurrency: {
+        amount: 51000.0,
+        currency: 'gbp',
+      },
+    } satisfies TableCellCurrency,
+    status: {
+      type: 'status',
+      primaryText: 'Overdue',
+      secondaryText: '6 days ago',
+      sentiment: 'pending',
+    } satisfies TableCellStatus,
+    custom: <div>Custom content</div>,
+  };
+
+  it('renders without content', () => {
+    render(<TableCell />);
+    expect(screen.getByRole('cell')).toBeInTheDocument();
+  });
+
+  it('applies `right` alignment class', () => {
+    render(<TableCell alignment="right" />);
+    expect(screen.getByRole('cell')).toHaveClass('np-table-cell--right');
+  });
+
+  it('applies reversed class for cell with image and `right` alignment', () => {
+    render(<TableCell cell={cellContentMocks.currency} alignment="right" />);
+    expect(screen.getByTestId('np-table-content')).toHaveClass('np-table-content--reversed');
+  });
+
+  it('applies custom class', () => {
+    render(<TableCell className="custom-class" />);
+    expect(screen.getByRole('cell')).toHaveClass('custom-class');
+  });
+
+  it('renders with spanned columns', () => {
+    render(<TableCell colSpan={2} />);
+    expect(screen.getByRole('cell')).toHaveAttribute('colSpan', '2');
+  });
+
+  it('renders with `children` as a content', () => {
+    render(<TableCell>{cellContentMocks.custom}</TableCell>);
+    expect(screen.getByText('Custom content')).toBeInTheDocument();
+  });
+
+  it('renders `text` cell type', () => {
+    render(<TableCell cell={{ ...cellContentMocks.text }} />);
+    expect(screen.getByText('JP, Tokyo')).toBeInTheDocument();
+  });
+
+  it('renders `text` cell type with error', () => {
+    render(<TableCell cell={{ ...cellContentMocks.text, status: 'error' }} />);
+    expect(screen.getByText('JP, Tokyo')).toHaveClass('np-table-content--error');
+    expect(screen.getByTestId('alert-icon')).toBeInTheDocument();
+  });
+
+  it('renders `text` cell type with success', () => {
+    render(<TableCell cell={{ ...cellContentMocks.text, status: 'success' }} />);
+    expect(screen.getByText('JP, Tokyo')).toHaveClass('np-table-content--success');
+    expect(screen.getByTestId('check-icon')).toBeInTheDocument();
+  });
+
+  it('renders `leading` cell type with initials avatar when `profileName` is provided', () => {
+    render(<TableCell cell={{ ...cellContentMocks.leading }} />);
+    expect(screen.getByText('AJ')).toBeInTheDocument();
+    expect(screen.getByText('Alice Johnson')).toBeInTheDocument();
+    expect(screen.getByText('Frontend Developer')).toBeInTheDocument();
+  });
+
+  it('renders `leading` cell type without media content when `profileName` is not provided', () => {
+    render(
+      <TableCell
+        cell={{
+          ...cellContentMocks.leading,
+          avatar: { profileName: undefined },
+        }}
+      />,
+    );
+    expect(screen.queryByText('AJ')).not.toBeInTheDocument();
+    expect(screen.getByText('Alice Johnson')).toBeInTheDocument();
+    expect(screen.getByText('Frontend Developer')).toBeInTheDocument();
+    expect(screen.queryByTestId('np-table-content-media')).not.toBeInTheDocument();
+  });
+
+  it('renders `leading` cell without primary text if is not provided', () => {
+    render(
+      <TableCell
+        cell={{
+          ...cellContentMocks.leading,
+          primaryText: undefined,
+        }}
+      />,
+    );
+    expect(screen.getByText('AJ')).toBeInTheDocument();
+    expect(screen.queryByText('Alice Johnson')).not.toBeInTheDocument();
+    expect(screen.getByText('Frontend Developer')).toBeInTheDocument();
+  });
+
+  it('renders `leading` cell without secondary text if it is not provided', () => {
+    render(
+      <TableCell
+        cell={{
+          ...cellContentMocks.leading,
+          secondaryText: undefined,
+        }}
+      />,
+    );
+    expect(screen.getByText('AJ')).toBeInTheDocument();
+    expect(screen.getByText('Alice Johnson')).toBeInTheDocument();
+    expect(screen.queryByText('Frontend Developer')).not.toBeInTheDocument();
+  });
+
+  it('applies an `error` class, renders an `alert-icon` for `leading` cell type with `error` status', () => {
+    render(
+      <TableCell
+        cell={{
+          ...cellContentMocks.leading,
+          status: 'error',
+        }}
+      />,
+    );
+    expect(screen.getByText('Alice Johnson')).toBeInTheDocument();
+    expect(screen.getByText('Alice Johnson')).toHaveClass('np-table-content--error');
+    expect(screen.getByTestId('alert-icon')).toBeInTheDocument();
+  });
+
+  it('applies a `success` class, renders an `check-icon` for `leading` cell type with `success` status', () => {
+    render(
+      <TableCell
+        cell={{
+          ...cellContentMocks.leading,
+          status: 'success',
+        }}
+      />,
+    );
+    expect(screen.getByText('Alice Johnson')).toBeInTheDocument();
+    expect(screen.getByText('Alice Johnson')).toHaveClass('np-table-content--success');
+    expect(screen.getByTestId('check-icon')).toBeInTheDocument();
+  });
+
+  it('renders `currency` cell type', () => {
+    render(<TableCell cell={{ ...cellContentMocks.currency }} alignment="right" />);
+    expect(screen.getByTestId('np-table-content-media')).toBeInTheDocument();
+    expect(screen.getByText('56,789 JPY')).toBeInTheDocument();
+    expect(screen.getByText('51,000.00 GBP')).toBeInTheDocument();
+  });
+
+  it('renders `currency` cell without media content when currency amount of `primaryCurrency` is not provided', () => {
+    render(
+      <TableCell
+        cell={{
+          ...cellContentMocks.currency,
+          primaryCurrency: {
+            amount: cellContentMocks.currency.primaryCurrency.amount,
+            currency: '',
+          },
+        }}
+        alignment="right"
+      />,
+    );
+    expect(screen.queryByRole('presentation')).not.toBeInTheDocument();
+    expect(screen.getByText('56,789.01')).toBeInTheDocument();
+    expect(screen.getByText('51,000.00 GBP')).toBeInTheDocument();
+    expect(screen.queryByTestId('np-table-content-media')).not.toBeInTheDocument();
+  });
+
+  it('renders `currency` cell without primary currency when it is not provided', () => {
+    render(
+      <TableCell
+        cell={{
+          ...cellContentMocks.currency,
+          primaryCurrency: undefined,
+        }}
+        alignment="right"
+      />,
+    );
+    expect(screen.queryByText('56,789 JPY')).not.toBeInTheDocument();
+    expect(screen.getByText('51,000.00 GBP')).toBeInTheDocument();
+  });
+
+  it('renders `currency` cell without secondary currency when it is not provided', () => {
+    render(
+      <TableCell
+        cell={{
+          ...cellContentMocks.currency,
+          secondaryCurrency: undefined,
+        }}
+        alignment="right"
+      />,
+    );
+    expect(screen.getByText('56,789 JPY')).toBeInTheDocument();
+    expect(screen.queryByText('51,000.00 GBP')).not.toBeInTheDocument();
+  });
+
+  it('renders `currency` cell with error content', () => {
+    render(
+      <TableCell
+        cell={{
+          ...cellContentMocks.currency,
+          status: 'error',
+        }}
+        alignment="right"
+      />,
+    );
+    expect(screen.getByText('56,789 JPY')).toBeInTheDocument();
+    expect(screen.getByText('56,789 JPY')).toHaveClass('np-table-content--error');
+    expect(screen.getByTestId('alert-icon')).toBeInTheDocument();
+  });
+
+  it('renders `currency` cell with `success` content', () => {
+    render(
+      <TableCell
+        cell={{
+          ...cellContentMocks.currency,
+          status: 'success',
+        }}
+        alignment="right"
+      />,
+    );
+    expect(screen.getByText('56,789 JPY')).toBeInTheDocument();
+    expect(screen.getByText('56,789 JPY')).toHaveClass('np-table-content--success');
+    expect(screen.getByTestId('check-icon')).toBeInTheDocument();
+  });
+
+  it('renders a `status` cell type content', () => {
+    render(<TableCell cell={{ ...cellContentMocks.status }} />);
+    expect(screen.getByTestId('status-icon')).toBeInTheDocument();
+    expect(screen.getByTestId('status-icon')).toHaveClass('pending');
+    expect(screen.getByText('Overdue')).toBeInTheDocument();
+    expect(screen.getByText('6 days ago')).toBeInTheDocument();
+  });
+
+  it('renders an `info-icon` for `status` cell type if `sentiment` is not provided', () => {
+    render(
+      <TableCell
+        cell={{
+          ...cellContentMocks.status,
+          sentiment: undefined,
+        }}
+      />,
+    );
+    expect(screen.getByTestId('info-icon')).toBeInTheDocument();
+  });
+
+  it('renders `status` cell type without `primary` text if it is not provided', () => {
+    render(
+      <TableCell
+        cell={{
+          ...cellContentMocks.status,
+          primaryText: undefined,
+        }}
+      />,
+    );
+    expect(screen.queryByText('Overdue')).not.toBeInTheDocument();
+  });
+
+  it('renders `status` cell type without `secondary` text if it is not provided', () => {
+    render(
+      <TableCell
+        cell={{
+          ...cellContentMocks.status,
+          secondaryText: undefined,
+        }}
+      />,
+    );
+    expect(screen.queryByText('6 days ago')).not.toBeInTheDocument();
+  });
+});

package/src/table/TableCell.tsx

@@ -0,0 +1,149 @@
+import TableStatusText from './TableStatusText';
+import StatusIcon from '../statusIcon';
+import { Flag } from '@wise/art';
+import React from 'react';
+import { clsx } from 'clsx';
+import Body from '../body';
+import Money, { MoneyProps } from '../money';
+import AvatarView from '../avatarView';
+
+interface TableCellTypeProp {
+  type: 'leading' | 'text' | 'currency' | 'status';
+}
+
+// `Leading` and `Status` cell types have 2 text fields: `primaryText` and `secondaryText`
+interface TableCellTextProps {
+  primaryText?: string;
+  secondaryText?: string;
+}
+
+// `Leading`, `Text` and `Currency` cells' types can have a status indicator with `error` or `success` values
+interface TableCellStatusProp {
+  status?: 'error' | 'success';
+}
+
+export interface TableCellLeading
+  extends TableCellTypeProp,
+    TableCellTextProps,
+    TableCellStatusProp {
+  avatar?: {
+    src?: string;
+    profileName?: string | null;
+  };
+}
+
+export interface TableCellText extends TableCellTypeProp, TableCellStatusProp {
+  text?: string;
+}
+
+export interface TableCellCurrency extends TableCellTypeProp, TableCellStatusProp {
+  primaryCurrency?: MoneyProps;
+  secondaryCurrency?: MoneyProps;
+}
+
+export interface TableCellStatus extends TableCellTypeProp, TableCellTextProps {
+  sentiment?: 'negative' | 'neutral' | 'positive' | 'warning' | 'pending';
+}
+
+export interface TableCellType {
+  cell?: TableCellLeading & TableCellText & TableCellCurrency & TableCellStatus;
+  alignment?: 'left' | 'right';
+}
+
+// These properties should be exported only on the lib level to prevent visual issues because of incorrect usage.
+export interface TableCellProps extends TableCellType {
+  className?: string;
+  colSpan?: number;
+  children?: React.ReactNode;
+}
+
+const TableCell = ({ cell, alignment = 'left', className, colSpan, children }: TableCellProps) => {
+  const getContentMedia = () => {
+    let mediaContent = null;
+
+    if (cell?.type === 'leading' && (cell?.avatar?.src || cell?.avatar?.profileName)) {
+      mediaContent = (
+        <AvatarView profileName={cell?.avatar?.profileName} size={40} imgSrc={cell?.avatar?.src} />
+      );
+    }
+
+    if (cell?.type === 'currency' && cell?.primaryCurrency?.currency) {
+      mediaContent = (
+        <Flag code={cell?.primaryCurrency?.currency?.toLowerCase()} intrinsicSize={24} />
+      );
+    }
+
+    if (cell?.type === 'status') {
+      mediaContent = <StatusIcon size={24} sentiment={cell?.sentiment ?? 'neutral'} />;
+    }
+
+    if (mediaContent) {
+      return (
+        <div
+          aria-hidden="true"
+          className="np-table-content-media"
+          data-testid="np-table-content-media"
+        >
+          {mediaContent}
+        </div>
+      );
+    }
+  };
+
+  const formatCurrencyValue = (currency?: MoneyProps) => {
+    if (currency) {
+      return <Money amount={currency.amount} currency={currency.currency} alwaysShowDecimals />;
+    }
+
+    return '';
+  };
+
+  return (
+    <td
+      className={clsx(
+        'np-table-cell',
+        cell?.type ? `np-table-cell--${cell?.type}` : '',
+        `np-table-cell--${alignment}`,
+        className,
+      )}
+      colSpan={colSpan}
+    >
+      {cell?.type === 'text' && cell?.text && (
+        <TableStatusText text={cell?.text} status={cell?.status} />
+      )}
+      {cell?.type && ['leading', 'currency', 'status'].includes(cell?.type) && (
+        <div
+          className={clsx('np-table-content', {
+            'np-table-content--reversed': alignment === 'right',
+          })}
+          data-testid="np-table-content"
+        >
+          {getContentMedia()}
+          <div className="np-table-content-body">
+            {(cell?.primaryCurrency ?? cell?.primaryText) && (
+              <TableStatusText
+                text={
+                  cell?.type === 'currency'
+                    ? formatCurrencyValue(cell?.primaryCurrency)
+                    : (cell?.primaryText ?? '')
+                }
+                status={cell?.type !== 'status' ? cell?.status : undefined}
+                typography="default-bold"
+              />
+            )}
+            {(cell?.secondaryCurrency ?? cell?.secondaryText) && (
+              <Body>
+                {cell?.type === 'currency'
+                  ? formatCurrencyValue(cell?.secondaryCurrency)
+                  : cell?.secondaryText}
+              </Body>
+            )}
+          </div>
+        </div>
+      )}
+      {children}
+    </td>
+  );
+};
+
+export default TableCell;

package/src/table/TableHeader.spec.tsx

@@ -0,0 +1,50 @@
+import { render, screen } from '../test-utils';
+import TableHeader, { TableHeaderProps } from './TableHeader';
+
+describe('TableHeader Component', () => {
+  const renderComponent = (props: Partial<TableHeaderProps> = {}) => {
+    const defaultProps = {
+      header: '',
+    } satisfies TableHeaderProps;
+    return render(<TableHeader {...defaultProps} {...props} />);
+  };
+
+  it('should render header', () => {
+    const { container } = renderComponent();
+    expect(container).toBeInTheDocument();
+  });
+
+  it('should render header text when provided', () => {
+    const headerText = 'Test Header';
+    renderComponent({ header: headerText });
+    expect(screen.getByText(headerText)).toBeInTheDocument();
+  });
+
+  it('should apply custom className', () => {
+    const className = 'custom-class';
+    renderComponent({ className });
+    expect(screen.getByRole('columnheader')).toHaveClass(className);
+  });
+
+  it('should align text to the right when alignment is set to right', () => {
+    renderComponent({ alignment: 'right' });
+    expect(screen.getByRole('columnheader')).toHaveClass('np-table-header--right');
+  });
+
+  it("should show error class when status equals 'error'", () => {
+    renderComponent({ status: 'error' });
+    expect(screen.getByRole('columnheader')).toHaveClass('np-table-header--error');
+  });
+
+  it('should render empty header content when header is not provided', () => {
+    renderComponent();
+    expect(screen.getByTestId('np-table-empty-header').innerHTML).toBe('&nbsp;');
+  });
+
+  it('should render header with error status when status is `error`', () => {
+    const headerText = 'Test Header';
+    renderComponent({ header: headerText, status: 'error' });
+    expect(screen.getByText(headerText)).toHaveClass('np-table-content--error');
+    expect(screen.getByTestId('alert-icon')).toBeInTheDocument();
+  });
+});

package/src/table/TableHeader.tsx

@@ -0,0 +1,74 @@
+import { useIntl } from 'react-intl';
+import messages from './Table.messages';
+import TableStatusText from './TableStatusText';
+import { clsx } from 'clsx';
+
+export interface TableHeaderType {
+  header?: string;
+  className?: string;
+  alignment?: 'left' | 'right';
+  status?: 'error';
+  width?: string;
+}
+
+export interface TableHeaderProps extends TableHeaderType {
+  isActionHeader?: boolean;
+}
+
+const TableHeader = ({
+  header,
+  className,
+  alignment = 'left',
+  status,
+  width,
+  isActionHeader = false,
+}: TableHeaderProps) => {
+  const { formatMessage } = useIntl();
+
+  const getHeaderContent = () => {
+    if (isActionHeader) {
+      // `Action` header doesn't have visual text content, but it has the header, which is visible for screen readers only
+      return (
+        <TableStatusText
+          text={formatMessage(messages.actionHeader)}
+          className={`np-table-header-content${isActionHeader ? ' sr-only' : ''}`}
+        />
+      );
+    }
+
+    if (header) {
+      return (
+        <TableStatusText
+          text={header}
+          className={`np-table-header-content${isActionHeader ? ' sr-only' : ''}`}
+          status={status}
+          typography="default-bold"
+        />
+      );
+    }
+
+    // If headers are empty, we still should render empty headers to keep visual consistency
+    return (
+      <div
+        className="np-table-header-content np-text-body-default-bold"
+        data-testid="np-table-empty-header"
+      >
+        &nbsp;
+      </div>
+    );
+  };
+
+  return (
+    <th
+      className={clsx('np-table-header', className, `np-table-header--${alignment}`, {
+        'np-table-header--error': status === 'error',
+        'np-table-header--action': isActionHeader,
+      })}
+      style={{ minWidth: width, width }}
+    >
+      {getHeaderContent()}
+    </th>
+  );
+};
+
+export default TableHeader;

package/src/table/TableRow.spec.tsx

@@ -0,0 +1,112 @@
+import { render, screen } from '../test-utils';
+import TableRow, { TableRowType, TableRowClickableType } from './TableRow';
+import { userEvent } from '@testing-library/user-event';
+
+describe('TableRow Component', () => {
+  const mockData = {
+    cells: [
+      {
+        cell: {
+          type: 'text',
+          text: 'Cell content 1',
+        },
+      },
+      {
+        cell: {
+          type: 'text',
+          text: 'Cell content 2',
+        },
+      },
+    ],
+  } satisfies TableRowType;
+
+  const mockDataClickable = {
+    id: 1,
+    cells: mockData.cells,
+  } satisfies TableRowClickableType;
+
+  const handleClick = jest.fn();
+
+  it('renders row', () => {
+    render(<TableRow />);
+    expect(screen.getByTestId('np-table-row')).toBeInTheDocument();
+  });
+
+  it('renders `children` when data is not provided', () => {
+    render(
+      <TableRow>
+        <td>Cell text</td>
+      </TableRow>,
+    );
+    expect(screen.getByText('Cell text')).toBeInTheDocument();
+  });
+
+  it('renders cells when data is provided', () => {
+    render(<TableRow rowData={mockData} />);
+    expect(screen.getByText('Cell content 1')).toBeInTheDocument();
+    expect(screen.getByText('Cell content 2')).toBeInTheDocument();
+  });
+
+  it('renders correct number of cells', () => {
+    render(<TableRow rowData={mockData} />);
+    expect(screen.getAllByRole('cell')).toHaveLength(mockData.cells.length);
+  });
+
+  it('renders correct number of cells with chevron when clickable', () => {
+    render(<TableRow rowData={mockDataClickable} onRowClick={handleClick} />);
+    expect(screen.getAllByRole('cell')).toHaveLength(mockDataClickable.cells.length + 1);
+  });
+
+  it('renders a separator row when `hasSeparator` is passed', () => {
+    render(<TableRow rowData={mockData} hasSeparator />);
+    expect(screen.getAllByTestId('np-table-row')).toHaveLength(1);
+    expect(screen.getAllByTestId('np-table-row--separator')).toHaveLength(1);
+  });
+
+  it('renders correct `colSpan` for separator row', () => {
+    render(<TableRow rowData={mockData} hasSeparator />);
+    const separatorCell = screen.getByTestId('np-table-cell--cosmetic');
+    expect(separatorCell).toHaveAttribute('colSpan', mockData.cells.length.toString());
+  });
+
+  it('renders correct `colSpan` for separator row with clickable row', () => {
+    render(<TableRow rowData={mockDataClickable} hasSeparator onRowClick={handleClick} />);
+    const separatorCell = screen.getByTestId('np-table-cell--cosmetic');
+    expect(separatorCell).toHaveAttribute(
+      'colSpan',
+      (mockDataClickable.cells.length + 1).toString(),
+    );
+  });
+
+  it('does not render separator row when `hasSeparator` is not provided', () => {
+    render(<TableRow rowData={mockData} />);
+    expect(screen.queryByTestId('np-table-row--separator')).not.toBeInTheDocument();
+  });
+
+  it('does not call `onRowClick` when row is not clickable', async () => {
+    render(<TableRow rowData={mockData} />);
+    await userEvent.click(screen.getByTestId('np-table-row'));
+    expect(handleClick).not.toHaveBeenCalled();
+  });
+
+  it('applies the clickable class when row is clickable', () => {
+    render(<TableRow rowData={mockDataClickable} onRowClick={handleClick} />);
+    expect(screen.getAllByTestId('np-table-row')[0]).toHaveClass('np-table-row--clickable');
+  });
+
+  it('calls `onRowClick` when row is clicked for clickable row', async () => {
+    render(<TableRow rowData={mockDataClickable} onRowClick={handleClick} />);
+    await userEvent.click(screen.getByTestId('np-table-row'));
+    expect(handleClick).toHaveBeenCalledWith(mockDataClickable);
+  });
+
+  it('renders a chevron icon when row is clickable', () => {
+    render(<TableRow rowData={mockDataClickable} onRowClick={handleClick} />);
+    expect(screen.getByTestId('chevron-up-icon')).toBeInTheDocument();
+  });
+
+  it('does not render a chevron icon when row is not clickable', () => {
+    render(<TableRow rowData={mockData} />);
+    expect(screen.queryByTestId('chevron-up-icon')).not.toBeInTheDocument();
+  });
+});