@transferwise/components 0.0.0-experimental-d1715ff → 0.0.0-experimental-3064bdb

package/src/table/TableRow.spec.tsx

@@ -0,0 +1,104 @@
+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 = {
+    rowContent: [{ content: { text: 'Cell content 1' } }, { content: { text: 'Cell content 2' } }],
+  } satisfies TableRowType;
+
+  const mockDataClickable = {
+    id: 1,
+    rowContent: mockData.rowContent,
+  } satisfies TableRowClickableType;
+
+  const handleClick = jest.fn();
+
+  const renderWithIntl = (component: React.ReactElement) => {
+    return render(<IntlProvider locale="en">{component}</IntlProvider>);
+  };
+
+  it('renders without crashing', () => {
+    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 TableCell components 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 TableCell components', () => {
+    renderWithIntl(<TableRow rowData={mockData} />);
+    expect(screen.getAllByRole('cell')).toHaveLength(mockData.rowContent.length);
+  });
+
+  it('renders correct number of TableCell components with chevron when clickable', () => {
+    renderWithIntl(<TableRow rowData={mockDataClickable} onRowClick={handleClick} />);
+    expect(screen.getAllByRole('cell')).toHaveLength(mockDataClickable.rowContent.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 = within(screen.getByTestId('np-table-row--separator')).getByRole('cell');
+    expect(separatorCell).toHaveAttribute('colSpan', mockData.rowContent.length.toString());
+  });
+
+  it('renders correct colSpan for separator row with clickable row', () => {
+    renderWithIntl(<TableRow rowData={mockDataClickable} hasSeparator onRowClick={handleClick} />);
+    const separatorCell = within(screen.getByTestId('np-table-row--separator')).getByRole('cell');
+    expect(separatorCell).toHaveAttribute(
+      'colSpan',
+      (mockDataClickable.rowContent.length + 1).toString(),
+    );
+  });
+
+  it('does not render separator row when hasSeparator is false', () => {
+    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 np-table-row--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', 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

@@ -0,0 +1,62 @@
+import React from 'react';
+import TableCell, { TableCellProps } from './TableCell';
+import Chevron from '../chevron';
+import { Position } from '../common';
+import clsx from 'clsx';
+
+export interface TableRowType {
+  rowContent?: 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"
+        onClick={onRowClick && rowData ? () => onRowClick(rowData) : undefined}
+      >
+        {rowData?.rowContent
+          ? rowData?.rowContent?.map((cellItem, index) => {
+              return (
+                <TableCell
+                  key={(
+                    cellItem.content?.text ?? cellItem.content?.primaryText?.toString()
+                  )?.concat(index.toString())}
+                  {...cellItem}
+                />
+              );
+            })
+          : children}
+        {onRowClick && (
+          <TableCell>
+            <Chevron orientation={Position.RIGHT} />
+          </TableCell>
+        )}
+      </tr>
+      {hasSeparator && (
+        <tr className="np-table-row np-table-row--separator" data-testid="np-table-row--separator">
+          <TableCell
+            hasSeparator
+            colSpan={
+              onRowClick ? Number(rowData?.rowContent?.length) + 1 : rowData?.rowContent?.length
+            }
+          />
+        </tr>
+      )}
+    </>
+  );
+};
+
+export default TableRow;

package/src/table/TableStatusText.spec.tsx

@@ -0,0 +1,53 @@
+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 typography class when typography is `large-bold`', () => {
+    renderComponent({ typography: 'large-bold' });
+    expect(screen.getByText('Status Text')).toHaveClass('np-text-body-large-bold');
+  });
+
+  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 and status classes, renders the error icon when status is error', () => {
+    renderComponent({ status: 'error' });
+    expect(screen.getByText('Status Text')).toHaveClass('np-text-body-large-bold');
+    expect(screen.getByText('Status Text')).toHaveClass('np-table-content--error');
+    expect(screen.getByTestId('alert-icon')).toBeInTheDocument();
+  });
+
+  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 success icon when status is success', () => {
+    renderComponent({ status: 'success' });
+    expect(screen.getByText('Status Text')).toHaveClass('np-text-body-large-bold');
+    expect(screen.getByText('Status Text')).toHaveClass('np-table-content--success');
+    expect(screen.getByTestId('check-icon')).toBeInTheDocument();
+  });
+});

package/src/table/TableStatusText.tsx

@@ -0,0 +1,35 @@
+import { AlertCircle, CheckCircle } from '@transferwise/icons';
+import clsx from 'clsx';
+
+export interface TableStatusTextProps {
+  text: string;
+  className?: string;
+  status?: 'success' | 'error';
+  typography?: 'default' | 'large-bold';
+}
+
+const TableStatusText: React.FC<TableStatusTextProps> = ({
+  text,
+  status,
+  className,
+  typography = 'default',
+}: TableStatusTextProps) => {
+  return (
+    <div
+      className={clsx(
+        className,
+        `np-text-body-${(status ?? typography === 'large-bold') ? 'large-bold' : 'default'}`,
+        {
+          '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

@@ -0,0 +1,11 @@
+export { default } from './Table';
+export type { TableProps } from './Table';
+export type { TableRowType, TableRowClickableType } from './TableRow';
+export type { TableHeaderType } from './TableHeader';
+export type {
+  LeadingContentType,
+  TextContentType,
+  CurrencyContentType,
+  StatusContentType,
+  TableCellProps,
+} from './TableCell';