@transferwise/components 46.80.0 → 46.82.0

package/src/table/Table.spec.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { render, screen, mockMatchMedia } from '../test-utils';
+import { userEvent } from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import Table, { TableProps } from './Table';
+
+mockMatchMedia();
+
+describe('Table Component', () => {
+  const defaultProps: TableProps = {
+    data: {
+      headers: [{ header: 'Header 1' }, { header: 'Header 2' }],
+      rows: [
+        {
+          cells: [
+            { cell: { type: 'text', text: 'Cell content 1' } },
+            { cell: { type: 'text', text: 'Cell content 2' } },
+          ],
+        },
+        {
+          cells: [
+            { cell: { type: 'text', text: 'Cell content 3' } },
+            { cell: { type: 'text', text: 'Cell content 4' } },
+          ],
+        },
+      ],
+      onRowClick: jest.fn(),
+    },
+    loading: false,
+    className: '',
+    fullWidth: true,
+    error: undefined,
+  };
+
+  it('renders table', () => {
+    render(<Table {...defaultProps} />);
+    expect(screen.getByText('Header 1')).toBeInTheDocument();
+    expect(screen.getByText('Header 2')).toBeInTheDocument();
+    expect(screen.getByText('Cell content 1')).toBeInTheDocument();
+    expect(screen.getByText('Cell content 2')).toBeInTheDocument();
+    expect(screen.getByText('Cell content 3')).toBeInTheDocument();
+    expect(screen.getByText('Cell content 4')).toBeInTheDocument();
+  });
+
+  it('renders `loading` state on loading', () => {
+    render(<Table {...defaultProps} loading />);
+    expect(screen.getAllByTestId('np-table-loader')).toHaveLength(1);
+  });
+
+  it('renders `empty data` message for empty table`s data', () => {
+    render(<Table {...defaultProps} data={{ headers: [], rows: [] }} />);
+    expect(screen.getAllByTestId('np-table-empty-data')).toHaveLength(1);
+  });
+
+  it('renders `error` message if `error` is passed', () => {
+    const errorProps: TableProps = {
+      ...defaultProps,
+      error: { message: 'Error occurred', action: { text: 'Retry' } },
+    };
+    render(<Table {...errorProps} />);
+    expect(screen.getByText('Error occurred')).toBeInTheDocument();
+    expect(screen.getByText('Retry')).toBeInTheDocument();
+  });
+
+  it('renders with custom class name', () => {
+    render(<Table {...defaultProps} className="custom-class" />);
+    expect(screen.getByTestId('np-table-outer-container')).toHaveClass('custom-class');
+  });
+
+  it('renders with `fullWidth` set to false', () => {
+    render(<Table {...defaultProps} fullWidth={false} />);
+    expect(screen.getByTestId('np-table-outer-container')).toHaveClass(
+      'np-table-outer-container--center',
+    );
+  });
+
+  it('calls `onRowClick` when a row is clicked', async () => {
+    render(<Table {...defaultProps} />);
+    await userEvent.click(screen.getByText('Cell content 1'));
+    expect(defaultProps.data.onRowClick).toHaveBeenCalled();
+  });
+});

package/src/table/Table.story.tsx

@@ -0,0 +1,356 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Table from './Table';
+import { TableHeaderType } from './TableHeader';
+import { TableRowType, TableRowClickableType } from './TableRow';
+
+export default {
+  component: Table,
+  title: 'Option/Table',
+  tags: ['autodocs'],
+} satisfies Meta<typeof Table>;
+
+type Story = StoryObj<typeof Table>;
+
+const tableData = {
+  headers: [
+    {
+      header: 'Employee',
+      width: '230px',
+    },
+    {
+      header: 'Location',
+    },
+    {
+      header: 'Emplpyment Date',
+      className: 'np-table-header--custom-class',
+    },
+    {
+      header: 'Payment',
+      alignment: 'right',
+    },
+    {
+      header: 'Status',
+      status: 'error',
+    },
+  ] satisfies TableHeaderType[],
+  rows: [
+    {
+      id: 0,
+      cells: [
+        {
+          cell: {
+            type: 'leading',
+            primaryText: 'Bob Brown',
+            secondaryText: 'Software Engineer',
+            avatar: {
+              profileName: 'Bob Brown',
+            },
+          },
+        },
+        {
+          cell: {
+            type: 'text',
+            text: 'FR, Paris',
+          },
+        },
+        {
+          cell: {
+            type: 'text',
+            text: '11 Oct 2022',
+          },
+        },
+        {
+          cell: {
+            type: 'currency',
+            primaryCurrency: {
+              amount: 12345.67,
+              currency: 'eur',
+            },
+            secondaryCurrency: {
+              amount: 11000.0,
+              currency: 'gbp',
+            },
+          },
+          alignment: 'right',
+        },
+        {
+          cell: {
+            type: 'status',
+            primaryText: 'Cancelled',
+            secondaryText: '1 day ago',
+            sentiment: 'negative',
+          },
+        },
+      ],
+    },
+    {
+      id: 1,
+      cells: [
+        {
+          cell: {
+            type: 'leading',
+            primaryText: 'Jan Kowalski',
+            secondaryText: 'Product Manager',
+            avatar: {
+              profileName: 'Jan Kowalski',
+            },
+          },
+        },
+        {
+          cell: {
+            type: 'text',
+            text: 'US, New York',
+          },
+        },
+        {
+          cell: {
+            type: 'text',
+            text: '24 Jan 2024',
+          },
+        },
+        {
+          cell: {
+            type: 'currency',
+            primaryCurrency: {
+              amount: 23456.78,
+              currency: 'usd',
+            },
+            secondaryCurrency: {
+              amount: 21000.0,
+              currency: 'gbp',
+            },
+          },
+          alignment: 'right',
+        },
+        {
+          cell: {
+            type: 'status',
+            primaryText: 'Scheduled',
+            secondaryText: 'Tomorrow',
+            sentiment: 'neutral',
+          },
+        },
+      ],
+    },
+    {
+      id: 2,
+      cells: [
+        {
+          cell: {
+            type: 'leading',
+            primaryText: 'William Davis',
+            secondaryText: 'Data Scientist',
+            avatar: {
+              profileName: 'William Davis',
+            },
+          },
+        },
+        {
+          cell: {
+            type: 'text',
+            text: 'UK, London',
+          },
+        },
+        {
+          cell: {
+            type: 'text',
+            text: '9 Sept 2023',
+          },
+        },
+        {
+          cell: {
+            type: 'currency',
+            primaryCurrency: {
+              amount: 34567.89,
+              currency: 'gbp',
+            },
+            secondaryCurrency: {
+              amount: 31000.0,
+              currency: 'eur',
+            },
+          },
+          alignment: 'right',
+        },
+        {
+          cell: {
+            type: 'status',
+            primaryText: 'Paid',
+            secondaryText: 'Yesterday',
+            sentiment: 'positive',
+          },
+        },
+      ],
+    },
+    {
+      id: 3,
+      cells: [
+        {
+          cell: {
+            type: 'leading',
+            primaryText: 'Jane Smith',
+            secondaryText: 'IT Support Specialist',
+            status: 'success',
+            avatar: {
+              src: 'avatar-square-dude.webp',
+            },
+          },
+        },
+        {
+          cell: {
+            type: 'text',
+            text: 'NO, Oslo',
+          },
+        },
+        {
+          cell: {
+            type: 'text',
+            text: '12 Apr 2024',
+            status: 'success',
+          },
+        },
+        {
+          cell: {
+            type: 'currency',
+            primaryCurrency: {
+              amount: 45678.9,
+              currency: 'nok',
+            },
+            secondaryCurrency: {
+              amount: 41000.0,
+              currency: 'gbp',
+            },
+            status: 'success',
+          },
+          alignment: 'right',
+        },
+        {
+          cell: {
+            type: 'status',
+            primaryText: 'Overdue',
+            secondaryText: '3 days ago',
+            sentiment: 'warning',
+          },
+        },
+      ],
+    },
+    {
+      id: 4,
+      cells: [
+        {
+          cell: {
+            type: 'leading',
+            primaryText: 'Alice Johnson',
+            secondaryText: 'Frontend Developer',
+            status: 'error',
+            avatar: {
+              src: 'avatar-square-dude.webp',
+            },
+          },
+        },
+        {
+          cell: {
+            type: 'text',
+            text: 'JP, Tokyo',
+          },
+        },
+        {
+          cell: {
+            type: 'text',
+            text: '27 Nov 2023',
+            status: 'error',
+          },
+        },
+        {
+          cell: {
+            type: 'currency',
+            primaryCurrency: {
+              amount: 56789.01, // JPY currency's value is always cropped to zero decimals, you'll see `56789` instead of `56789.01` in screen/tests
+              currency: 'jpy',
+            },
+            secondaryCurrency: {
+              amount: 51000.0,
+              currency: 'gbp',
+            },
+            status: 'error',
+          },
+          alignment: 'right',
+        },
+        {
+          cell: {
+            type: 'status',
+            primaryText: 'Overdue',
+            secondaryText: '6 days ago',
+            sentiment: 'pending',
+          },
+        },
+      ],
+    },
+  ] satisfies TableRowType[] | TableRowClickableType[],
+};
+
+export const Basic: Story = {
+  args: {
+    data: tableData,
+  },
+  render: (args) => {
+    return <Table {...args} />;
+  },
+};
+
+export const WithClickableRow: Story = {
+  args: {
+    data: {
+      ...tableData,
+      onRowClick: (rowData: TableRowType | TableRowClickableType) => {
+        // eslint-disable-next-line no-console
+        console.log(`Row clicked, data:`, rowData);
+      },
+    },
+  },
+  render: (args) => {
+    return <Table {...args} />;
+  },
+};
+
+export const WithLoading: Story = {
+  args: {
+    loading: true,
+  },
+};
+
+export const WithEmptyData: Story = {
+  args: {
+    data: {
+      headers: tableData.headers,
+      rows: [],
+    },
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    error: {
+      message: 'Something went wrong during data fetching',
+      action: {
+        href: '/?path=/story/option-table--with-error',
+        text: 'To Refresh page, click here',
+      },
+    },
+  },
+};
+
+export const WithAFewColums: Story = {
+  args: {
+    data: {
+      headers: tableData.headers
+        .slice(0, 1)
+        .concat(tableData.headers[3])
+        .concat(tableData.headers[4]),
+      rows: tableData.rows.map((row) => ({
+        id: row.id,
+        cells: row.cells.slice(0, 1).concat(row.cells[3]).concat(row.cells[4]),
+      })),
+    },
+    fullWidth: false,
+  },
+};

package/src/table/Table.tsx

@@ -0,0 +1,167 @@
+import { useIntl } from 'react-intl';
+import TableCell from './TableCell';
+import TableHeader, { TableHeaderType } from './TableHeader';
+import TableRow, { TableRowClickableType, TableRowType } from './TableRow';
+import Alert from '../alert';
+
+import messages from './Table.messages';
+import Loader from '../loader';
+import { Sentiment, Size } from '../common';
+import StatusIcon from '../statusIcon';
+import { clsx } from 'clsx';
+import { useTheme } from '@wise/components-theming';
+import Body from '../body';
+
+export interface TableProps {
+  'aria-labelledby'?: string;
+  data: {
+    headers?: TableHeaderType[];
+    rows?: TableRowType[] | TableRowClickableType[];
+    onRowClick?: (rowData: TableRowType | TableRowClickableType) => void;
+  };
+  loading?: boolean;
+  className?: string | undefined;
+  fullWidth?: boolean;
+  error?: {
+    message?: string;
+    action?: {
+      href?: string;
+      text?: string;
+    };
+  };
+}
+
+const Table = ({
+  'aria-labelledby': ariaLabelledBy,
+  data,
+  loading,
+  className,
+  fullWidth = true,
+  error,
+}: TableProps) => {
+  const { formatMessage } = useIntl();
+  const { theme } = useTheme();
+
+  const getRowLength = () => {
+    const columnsLength = data?.headers?.length ?? 0;
+    return data?.onRowClick ? columnsLength + 1 : columnsLength;
+  };
+
+  const getTableContent = () => {
+    if (loading) {
+      return (
+        <TableRow>
+          <TableCell>
+            <Loader data-testid="np-table-loader" />
+          </TableCell>
+        </TableRow>
+      );
+    }
+
+    // Shows the `emptyData` message when there is no data to display
+    if (!data?.rows?.length) {
+      return (
+        <TableRow>
+          <TableCell colSpan={data?.headers?.length}>
+            <div className="np-table-empty-data" data-testid="np-table-empty-data">
+              <StatusIcon sentiment={Sentiment.WARNING} size={Size.MEDIUM} />
+              <Body type="body-default-bold">{formatMessage(messages.emptyData)}</Body>
+            </div>
+          </TableCell>
+        </TableRow>
+      );
+    }
+
+    return data?.rows?.map((rowData, rowIndex) => {
+      return (
+        <TableRow
+          key={'table-row-'.concat(rowIndex.toString())}
+          rowData={rowData}
+          hasSeparator={data?.rows?.length ? data.rows.length - 1 !== rowIndex : false}
+          onRowClick={data?.onRowClick}
+        />
+      );
+    });
+  };
+
+  if (error) {
+    return (
+      <Alert
+        className="np-table-error"
+        message={error.message}
+        type={Sentiment.NEGATIVE}
+        action={{
+          href: error?.action?.href ?? '/',
+          text: error?.action?.text ?? formatMessage(messages.refreshPage),
+        }}
+        data-testid="np-table-error"
+      />
+    );
+  }
+
+  return (
+    <>
+      <div aria-live="polite" className="sr-only">
+        {formatMessage(messages[loading ? 'loading' : 'loaded'])}
+      </div>
+      <div
+        role={loading ? 'presentation' : 'region'}
+        aria-labelledby={ariaLabelledBy}
+        className={clsx('np-table-outer-container', className, {
+          'np-theme-personal': theme === 'bright-green',
+          'np-table-outer-container--center': !fullWidth,
+          'np-table-outer-container--full-width': fullWidth,
+        })}
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex={0}
+        data-testid="np-table-outer-container"
+      >
+        <div
+          className={clsx('np-table-container', {
+            'np-table-container--loading': loading,
+          })}
+          data-testid="np-table-container"
+        >
+          <div className="np-table-inner-container">
+            <table className="np-table">
+              <thead role={loading ? 'presentation' : undefined}>
+                <tr>
+                  {(loading ?? (data?.headers && !data?.headers.length)) ? (
+                    <TableHeader />
+                  ) : (
+                    data?.headers?.map((headerItem: TableHeaderType, index) => (
+                      <TableHeader
+                        key={headerItem.header?.concat(index.toString())}
+                        {...headerItem}
+                      />
+                    ))
+                  )}
+                  {data?.onRowClick && <TableHeader isActionHeader />}
+                </tr>
+              </thead>
+              <tbody>
+                <tr
+                  key="first-np-table-row--cosmetic"
+                  aria-hidden="true"
+                  className="np-table-row np-table-row--cosmetic"
+                >
+                  <td className="np-table-cell" colSpan={getRowLength()} />
+                </tr>
+                {getTableContent()}
+                <tr
+                  key="last-np-table-row--cosmetic"
+                  aria-hidden="true"
+                  className="np-table-row np-table-row--cosmetic"
+                >
+                  <td className="np-table-cell" colSpan={getRowLength()} />
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Table;