@transferwise/components 0.0.0-experimental-029bd71 → 0.0.0-experimental-339e531

package/src/table/TableCell.spec.tsx

@@ -1,304 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import TableCell, {
-  TableCellCurrency,
-  TableCellLeading,
-  TableCellStatus,
-  TableCellText,
-} from './TableCell';
-import { IntlProvider } from 'react-intl';
-import { mockMatchMedia } from '../test-utils';
-
-mockMatchMedia();
-
-describe('TableCell Component', () => {
-  const cellContentMocks = {
-    leading: {
-      type: 'leading',
-      primaryText: 'Alice Johnson',
-      secondaryText: 'Frontend Developer',
-      avatar: {
-        fullName: 'Alice Johnson',
-      },
-    } satisfies TableCellLeading,
-    text: {
-      type: 'text',
-      text: 'JP, Tokyo',
-    } satisfies TableCellText,
-    currency: {
-      type: 'currency',
-      primaryCurrency: {
-        value: '56789.01',
-        currency: 'jpy',
-      },
-      secondaryCurrency: {
-        value: '51000.00',
-        currency: 'gbp',
-      },
-    } satisfies TableCellCurrency,
-    status: {
-      type: 'status',
-      primaryText: 'Overdue',
-      secondaryText: '6 days ago',
-      sentiment: 'pending',
-    } satisfies TableCellStatus,
-    custom: <div>Custom content</div>,
-  };
-
-  const renderWithIntl = (component: React.ReactElement) => {
-    return render(<IntlProvider locale="en">{component}</IntlProvider>);
-  };
-
-  it('renders without content', () => {
-    renderWithIntl(<TableCell />);
-    expect(screen.getByRole('cell')).toBeInTheDocument();
-  });
-
-  it('applies `right` alignment class', () => {
-    renderWithIntl(<TableCell alignment="right" />);
-    expect(screen.getByRole('cell')).toHaveClass('np-table-cell--right');
-  });
-
-  it('applies reversed class for cell with image and `right` alignment', () => {
-    renderWithIntl(<TableCell cell={cellContentMocks.currency} alignment="right" />);
-    expect(screen.getByTestId('np-table-content')).toHaveClass('np-table-content--reversed');
-  });
-
-  it('applies custom class', () => {
-    renderWithIntl(<TableCell className="custom-class" />);
-    expect(screen.getByRole('cell')).toHaveClass('custom-class');
-  });
-
-  it('renders with spanned columns', () => {
-    renderWithIntl(<TableCell colSpan={2} />);
-    expect(screen.getByRole('cell')).toHaveAttribute('colSpan', '2');
-  });
-
-  it('renders with `children` as a content', () => {
-    renderWithIntl(<TableCell>{cellContentMocks.custom}</TableCell>);
-    expect(screen.getByText('Custom content')).toBeInTheDocument();
-  });
-
-  it('renders `text` cell type', () => {
-    renderWithIntl(<TableCell cell={{ ...cellContentMocks.text }} />);
-    expect(screen.getByText('JP, Tokyo')).toBeInTheDocument();
-  });
-
-  it('renders `text` cell type with error', () => {
-    renderWithIntl(<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', () => {
-    renderWithIntl(<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 `fullName` is provided', () => {
-    renderWithIntl(<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 `fullName` is not provided', () => {
-    renderWithIntl(
-      <TableCell
-        cell={{
-          ...cellContentMocks.leading,
-          avatar: { fullName: 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', () => {
-    renderWithIntl(
-      <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', () => {
-    renderWithIntl(
-      <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', () => {
-    renderWithIntl(
-      <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', () => {
-    renderWithIntl(
-      <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', () => {
-    renderWithIntl(<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 value of `primaryCurrency` is not provided', () => {
-    renderWithIntl(
-      <TableCell
-        cell={{
-          ...cellContentMocks.currency,
-          primaryCurrency: {
-            value: cellContentMocks.currency.primaryCurrency.value,
-            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', () => {
-    renderWithIntl(
-      <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', () => {
-    renderWithIntl(
-      <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', () => {
-    renderWithIntl(
-      <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', () => {
-    renderWithIntl(
-      <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', () => {
-    renderWithIntl(<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', () => {
-    renderWithIntl(
-      <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', () => {
-    renderWithIntl(
-      <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', () => {
-    renderWithIntl(
-      <TableCell
-        cell={{
-          ...cellContentMocks.status,
-          secondaryText: undefined,
-        }}
-      />,
-    );
-    expect(screen.queryByText('6 days ago')).not.toBeInTheDocument();
-  });
-});

package/src/table/TableCell.tsx

@@ -1,170 +0,0 @@
-import TableStatusText from './TableStatusText';
-import Avatar, { AvatarType } from '../avatar';
-import StatusIcon from '../statusIcon';
-import { Flag } from '@wise/art';
-import { formatMoney } from '@transferwise/formatting';
-import { useIntl } from 'react-intl';
-import React from 'react';
-import { clsx } from 'clsx';
-import { getInitials } from '../common';
-import Image from '../image';
-
-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;
-    fullName?: string;
-    backgroundColorSeed?: string;
-  };
-}
-
-export interface TableCellText extends TableCellTypeProp, TableCellStatusProp {
-  text?: string;
-}
-
-interface Currency {
-  value: string | number;
-  currency: string;
-}
-
-export interface TableCellCurrency extends TableCellTypeProp, TableCellStatusProp {
-  primaryCurrency?: Currency;
-  secondaryCurrency?: Currency;
-}
-
-export interface TableCellStatus extends TableCellTypeProp, TableCellTextProps {
-  sentiment?: 'negative' | 'neutral' | 'positive' | 'warning' | 'pending';
-}
-
-export interface TableCellType {
-  cell?: TableCellLeading & TableCellText & TableCellCurrency & TableCellStatus;
-  alignment?: '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, className, colSpan, children }: TableCellProps) => {
-  const { locale } = useIntl();
-
-  const getContentMedia = () => {
-    let mediaContent = null;
-
-    if (cell?.type === 'leading' && (cell?.avatar?.src || cell?.avatar?.fullName)) {
-      const avatarType = cell?.avatar?.src ? AvatarType.THUMBNAIL : AvatarType.INITIALS;
-
-      mediaContent = (
-        <Avatar size={40} type={avatarType} backgroundColorSeed={cell?.avatar?.backgroundColorSeed}>
-          {avatarType === AvatarType.INITIALS &&
-            cell?.avatar?.fullName &&
-            getInitials(cell?.avatar?.fullName)}
-          {cell?.avatar?.src && <Image src={cell?.avatar?.src} alt="" />}
-        </Avatar>
-      );
-    }
-
-    if (cell?.type === 'currency' && cell?.primaryCurrency?.currency) {
-      mediaContent = (
-        <Flag code={cell?.primaryCurrency?.currency?.toLowerCase()} intrinsicSize={24} />
-      );
-    }
-
-    if (cell?.type === 'status') {
-      mediaContent = <StatusIcon size="md" 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?: Currency) => {
-    if (currency) {
-      return formatMoney(Number(currency.value), currency.currency, locale, {
-        alwaysShowDecimals: true,
-      });
-    }
-
-    return '';
-  };
-
-  return (
-    <td
-      className={clsx(
-        'np-table-cell',
-        cell?.type ? `np-table-cell--${cell?.type}` : '',
-        className,
-        {
-          'np-table-cell--right': alignment === 'right',
-        },
-      )}
-      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) && (
-              <div className="np-table-text-secondary">
-                {cell?.type === 'currency'
-                  ? formatCurrencyValue(cell?.secondaryCurrency)
-                  : cell?.secondaryText}
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-      {children}
-    </td>
-  );
-};
-
-export default TableCell;

package/src/table/TableHeader.spec.tsx

@@ -1,55 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import TableHeader, { TableHeaderProps } from './TableHeader';
-import { IntlProvider } from 'react-intl';
-
-describe('TableHeader Component', () => {
-  const renderComponent = (props: Partial<TableHeaderProps> = {}) => {
-    const defaultProps = {
-      header: '',
-    } satisfies TableHeaderProps;
-    return render(
-      <IntlProvider locale="en">
-        <TableHeader {...defaultProps} {...props} />
-      </IntlProvider>,
-    );
-  };
-
-  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

@@ -1,75 +0,0 @@
-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?: 'right';
-  status?: 'error';
-  width?: string;
-}
-
-export interface TableHeaderProps extends TableHeaderType {
-  isActionHeader?: boolean;
-}
-
-const TableHeader = ({
-  header,
-  className,
-  alignment,
-  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--right': alignment === 'right',
-        'np-table-header--error': status === 'error',
-        'np-table-header--action': isActionHeader,
-      })}
-      style={{ minWidth: width, width }}
-    >
-      {getHeaderContent()}
-    </th>
-  );
-};
-
-export default TableHeader;