@transferwise/components 0.0.0-experimental-4b8556a → 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';

package/src/uploadInput/UploadInput.spec.tsx

@@ -12,36 +12,6 @@ import { TEST_IDS as UPLOAD_ITEM_TEST_IDS } from './uploadItem/UploadItem';
 
 const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTimeAsync });
 
-const deleteFileAndWaitForFocus = async (fileToDeleteTestId: string, nextFocusTestId: string) => {
-  const fileToDelete = screen.getByTestId(fileToDeleteTestId);
-  const nextFocus = screen.getByTestId(nextFocusTestId);
-
-  await act(async () => {
-    within(fileToDelete).getByLabelText('Remove file', { exact: false }).click();
-    await jest.runOnlyPendingTimersAsync();
-  });
-
-  await act(async () => {
-    const removeButton = screen.queryByText('Remove');
-    if (removeButton) {
-      removeButton.click();
-      await jest.runOnlyPendingTimersAsync();
-    }
-  });
-
-  await waitFor(() => {
-    expect(screen.queryByTestId(fileToDeleteTestId)).not.toBeInTheDocument();
-  });
-
-  await act(async () => {
-    await jest.runOnlyPendingTimersAsync();
-  });
-
-  await waitFor(() => {
-    expect(nextFocus).toHaveFocus();
-  });
-};
-
 mockMatchMedia();
 
 describe('UploadInput', () => {
@@ -169,21 +139,15 @@ describe('UploadInput', () => {
         onFilesChange,
       });
 
-      const fileToDelete = screen.getByTestId('1-uploadItem');
+      const fileToDelete = screen.getAllByTestId(UPLOAD_ITEM_TEST_IDS.uploadItem)[0];
+      within(fileToDelete).getByLabelText('Remove file', { exact: false }).click();
       await act(async () => {
-        within(fileToDelete).getByLabelText('Remove file', { exact: false }).click();
         await jest.runOnlyPendingTimersAsync();
       });
 
-      await act(async () => {
-        screen.getByText('Remove').click();
-        await jest.runOnlyPendingTimersAsync();
-      });
-
-      await waitFor(() => {
-        expect(screen.queryByTestId('1-uploadItem')).not.toBeInTheDocument();
-      });
+      screen.getByText('Remove').click();
 
+      await waitForElementToBeRemoved(fileToDelete);
       expect(props.onDeleteFile).toHaveBeenCalledWith(files[0].id);
 
       expect(onFilesChange).toHaveBeenCalledTimes(2);
@@ -226,9 +190,9 @@ describe('UploadInput', () => {
         onFilesChange,
       });
 
-      const fileToDelete = screen.getByTestId('1-uploadItem');
+      const fileToDelete = screen.getAllByTestId(UPLOAD_ITEM_TEST_IDS.uploadItem)[0];
+      within(fileToDelete).getByLabelText('Remove file', { exact: false }).click();
       await act(async () => {
-        within(fileToDelete).getByLabelText('Remove file', { exact: false }).click();
         await jest.runOnlyPendingTimersAsync();
       });
 
@@ -248,114 +212,6 @@ describe('UploadInput', () => {
 
       expect(screen.queryByLabelText('Remove file ', { exact: false })).not.toBeInTheDocument();
     });
-
-    it('should focus the next item after a file is deleted', async () => {
-      const files = [
-        {
-          id: 1,
-          filename: 'Sales-2024-invoice.pdf',
-          status: Status.DONE,
-        },
-        {
-          id: 2,
-          filename: 'CoWork-0317-invoice.pdf',
-          status: Status.DONE,
-        },
-        {
-          id: 3,
-          filename: 'purchase-receipt.pdf',
-          status: Status.DONE,
-        },
-      ];
-
-      renderComponent({
-        ...props,
-        files,
-        multiple: true,
-        onFilesChange,
-      });
-
-      await deleteFileAndWaitForFocus('1-uploadItem', '2-action');
-    });
-
-    it('should focus the upload input after the last file is deleted', async () => {
-      const files = [
-        {
-          id: 1,
-          filename: 'Sales-2024-invoice.pdf',
-          status: Status.DONE,
-        },
-        {
-          id: 2,
-          filename: 'CoWork-0317-invoice.pdf',
-          status: Status.DONE,
-        },
-        {
-          id: 3,
-          filename: 'purchase-receipt.pdf',
-          status: Status.DONE,
-        },
-      ];
-
-      renderComponent({
-        ...props,
-        files,
-        multiple: true,
-        onFilesChange,
-      });
-
-      await deleteFileAndWaitForFocus('3-uploadItem', 'uploadInput');
-    });
-
-    it('should focus the upload input after the only file is deleted', async () => {
-      const singleFile = [
-        {
-          id: 3,
-          filename: 'purchase-receipt.pdf',
-          status: Status.DONE,
-        },
-      ];
-
-      renderComponent({
-        ...props,
-        files: singleFile,
-        multiple: true,
-        onFilesChange,
-      });
-
-      await deleteFileAndWaitForFocus('3-uploadItem', 'uploadInput');
-    });
-
-    it('should focus the third item, then the second and finally upload input', async () => {
-      const filesWithFailed = [
-        {
-          id: 1,
-          filename: 'Sales-2024-invoice.pdf',
-          status: Status.DONE,
-        },
-        {
-          id: 2,
-          filename: 'CoWork-0317-invoice.pdf',
-          status: Status.FAILED,
-        },
-        {
-          id: 3,
-          filename: 'purchase-receipt.pdf',
-          status: Status.DONE,
-        },
-      ];
-
-      renderComponent({
-        ...props,
-        files: filesWithFailed,
-        multiple: true,
-        onFilesChange,
-      });
-
-      await deleteFileAndWaitForFocus('3-uploadItem', 'uploadInput');
-      await deleteFileAndWaitForFocus('1-uploadItem', '2-action');
-      await deleteFileAndWaitForFocus('2-uploadItem', 'uploadInput');
-    });
   });
 
   describe('Max File Upload limit', () => {