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

package/src/table/TableRow.spec.tsx

@@ -1,117 +0,0 @@
-import { render, screen, within } from '@testing-library/react';
-import TableRow, { TableRowType, TableRowClickableType } from './TableRow';
-import { IntlProvider } from 'react-intl';
-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();
-
-  const renderWithIntl = (component: React.ReactElement) => {
-    return render(<IntlProvider locale="en">{component}</IntlProvider>);
-  };
-
-  it('renders row', () => {
-    renderWithIntl(<TableRow />);
-    expect(screen.getByTestId('np-table-row')).toBeInTheDocument();
-  });
-
-  it('renders `children` when data is not provided', () => {
-    renderWithIntl(
-      <TableRow>
-        <td>Cell text</td>
-      </TableRow>,
-    );
-    expect(screen.getByText('Cell text')).toBeInTheDocument();
-  });
-
-  it('renders cells when data is provided', () => {
-    renderWithIntl(<TableRow rowData={mockData} />);
-    expect(screen.getByText('Cell content 1')).toBeInTheDocument();
-    expect(screen.getByText('Cell content 2')).toBeInTheDocument();
-  });
-
-  it('renders correct number of cells', () => {
-    renderWithIntl(<TableRow rowData={mockData} />);
-    expect(screen.getAllByRole('cell')).toHaveLength(mockData.cells.length);
-  });
-
-  it('renders correct number of cells with chevron when clickable', () => {
-    renderWithIntl(<TableRow rowData={mockDataClickable} onRowClick={handleClick} />);
-    expect(screen.getAllByRole('cell')).toHaveLength(mockDataClickable.cells.length + 1);
-  });
-
-  it('renders a separator row when `hasSeparator` is passed', () => {
-    renderWithIntl(<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', () => {
-    renderWithIntl(<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', () => {
-    renderWithIntl(<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', () => {
-    renderWithIntl(<TableRow rowData={mockData} />);
-    expect(screen.queryByTestId('np-table-row--separator')).not.toBeInTheDocument();
-  });
-
-  it('does not call `onRowClick` when row is not clickable', async () => {
-    renderWithIntl(<TableRow rowData={mockData} />);
-    await userEvent.click(screen.getByTestId('np-table-row'));
-    expect(handleClick).not.toHaveBeenCalled();
-  });
-
-  it('applies the clickable class when row is clickable', () => {
-    renderWithIntl(<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 () => {
-    renderWithIntl(<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', () => {
-    renderWithIntl(<TableRow rowData={mockDataClickable} onRowClick={handleClick} />);
-    expect(screen.getByTestId('chevron-up-icon')).toBeInTheDocument();
-  });
-
-  it('does not render a chevron icon when row is not clickable', () => {
-    renderWithIntl(<TableRow rowData={mockData} />);
-    expect(screen.queryByTestId('chevron-up-icon')).not.toBeInTheDocument();
-  });
-});

package/src/table/TableRow.tsx

@@ -1,70 +0,0 @@
-import React from 'react';
-import TableCell, { TableCellProps } from './TableCell';
-import Chevron from '../chevron';
-import { Position } from '../common';
-import { clsx } from 'clsx';
-
-export interface TableRowType {
-  cells?: TableCellProps[];
-}
-
-export interface TableRowClickableType extends TableRowType {
-  id: number | string; // `id` is mandatory for clickable rows
-}
-
-export interface TableRowProps {
-  rowData?: TableRowType | TableRowClickableType;
-  hasSeparator?: boolean;
-  children?: React.ReactNode;
-  onRowClick?: (rowData: TableRowType | TableRowClickableType) => void;
-}
-
-const TableRow = ({ rowData, hasSeparator = false, children, onRowClick }: TableRowProps) => {
-  return (
-    <>
-      <tr
-        className={clsx('np-table-row', { 'np-table-row--clickable': !!onRowClick })}
-        data-testid="np-table-row"
-        role={onRowClick ? 'button' : undefined}
-        tabIndex={0}
-        onClick={onRowClick && rowData ? () => onRowClick(rowData) : undefined}
-        onKeyDown={({ key }) => {
-          if (onRowClick && rowData && key === 'Enter') {
-            onRowClick(rowData);
-          }
-        }}
-      >
-        {rowData?.cells
-          ? rowData?.cells?.map((item, index) => {
-              const itemIndex = item.cell?.text ? item.cell?.text.concat(index.toString()) : index;
-              return <TableCell key={itemIndex} {...item} />;
-            })
-          : children}
-        {onRowClick && (
-          <TableCell className="np-table-cell--action">
-            <div aria-hidden="true">
-              <Chevron orientation={Position.RIGHT} />
-            </div>
-          </TableCell>
-        )}
-      </tr>
-      {hasSeparator && (
-        <tr
-          aria-hidden="true"
-          className="np-table-row np-table-row--separator"
-          data-testid="np-table-row--separator"
-        >
-          <td
-            className="np-table-cell np-table-cell--cosmetic"
-            colSpan={onRowClick ? Number(rowData?.cells?.length) + 1 : rowData?.cells?.length}
-            data-testid="np-table-cell--cosmetic"
-          >
-            <div className="np-table-cell-separator" data-testid="np-table-cell-separator" />
-          </td>
-        </tr>
-      )}
-    </>
-  );
-};
-
-export default TableRow;

package/src/table/TableStatusText.spec.tsx

@@ -1,53 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import TableStatusText, { TableStatusTextProps } from './TableStatusText';
-
-describe('TableStatusText Component', () => {
-  const renderComponent = (props: Partial<TableStatusTextProps> = {}) => {
-    const defaultProps: TableStatusTextProps = {
-      text: 'Status Text',
-      ...props,
-    };
-    return render(<TableStatusText {...defaultProps} />);
-  };
-
-  it('renders the text and applies the default class', () => {
-    renderComponent();
-    expect(screen.getByText('Status Text')).toBeInTheDocument();
-    expect(screen.getByText('Status Text')).toHaveClass('np-text-body-default');
-  });
-
-  it('applies the custom class name', () => {
-    renderComponent({ className: 'custom-class' });
-    expect(screen.getByText('Status Text')).toHaveClass('custom-class');
-  });
-
-  it('applies the default typography class when typography is not provided', () => {
-    renderComponent();
-    expect(screen.getByText('Status Text')).toHaveClass('np-text-body-default');
-  });
-
-  it('applies the typography class when typography equals `default-bold`', () => {
-    renderComponent({ typography: 'default-bold' });
-    expect(screen.getByText('Status Text')).toHaveClass('np-text-body-default-bold');
-  });
-
-  it('does not render any icon when status is not provided', () => {
-    renderComponent();
-    expect(screen.queryByTestId('check-icon')).not.toBeInTheDocument();
-    expect(screen.queryByTestId('alert-icon')).not.toBeInTheDocument();
-  });
-
-  it('applies the typography and status classes, renders the error icon when status equals `error`', () => {
-    renderComponent({ status: 'error' });
-    expect(screen.getByText('Status Text')).toHaveClass('np-text-body-default-bold');
-    expect(screen.getByText('Status Text')).toHaveClass('np-table-content--error');
-    expect(screen.getByTestId('alert-icon')).toBeInTheDocument();
-  });
-
-  it('applies the typography and status classes, renders the success icon when status equals `success`', () => {
-    renderComponent({ status: 'success' });
-    expect(screen.getByText('Status Text')).toHaveClass('np-text-body-default-bold');
-    expect(screen.getByText('Status Text')).toHaveClass('np-table-content--success');
-    expect(screen.getByTestId('check-icon')).toBeInTheDocument();
-  });
-});

package/src/table/TableStatusText.tsx

@@ -1,36 +0,0 @@
-import { AlertCircle, CheckCircle } from '@transferwise/icons';
-import { clsx } from 'clsx';
-
-export interface TableStatusTextProps {
-  text: string;
-  className?: string;
-  status?: 'success' | 'error';
-  typography?: 'default' | 'default-bold';
-}
-
-const TableStatusText = ({
-  text,
-  className,
-  status,
-  typography = 'default',
-}: TableStatusTextProps) => {
-  let typographyClass = 'np-text-body-default';
-  if (status ?? typography === 'default-bold') {
-    typographyClass += '-bold';
-  }
-
-  return (
-    <div
-      className={clsx(className, typographyClass, {
-        'np-table-content--success': status === 'success',
-        'np-table-content--error': status === 'error',
-      })}
-    >
-      {text}
-      {status === 'success' && <CheckCircle className="tw-icon--status" data-testid="check-icon" />}
-      {status === 'error' && <AlertCircle className="tw-icon--status" data-testid="alert-icon" />}
-    </div>
-  );
-};
-
-export default TableStatusText;

package/src/table/index.ts

@@ -1,11 +0,0 @@
-export { default } from './Table';
-export type { TableProps } from './Table';
-export type { TableRowType, TableRowClickableType } from './TableRow';
-export type { TableHeaderType } from './TableHeader';
-export type {
-  TableCellLeading,
-  TableCellText,
-  TableCellCurrency,
-  TableCellStatus,
-  TableCellType,
-} from './TableCell';