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

package/src/table/Table.tsx

@@ -0,0 +1,121 @@
+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';
+
+export interface TableProps {
+  data: {
+    headers?: TableHeaderType[];
+    content?: TableRowType[] | TableRowClickableType[];
+    onRowClick?: (rowData: TableRowType | TableRowClickableType) => void;
+  };
+  loading?: boolean;
+  className?: string | undefined;
+  fullWidth?: boolean;
+  error?: {
+    message?: string;
+    action?: {
+      href?: string;
+      text?: string;
+    };
+  };
+  onRetry?: () => void;
+}
+
+const Table: React.FC<TableProps> = ({ data, loading, className, fullWidth = true, error }) => {
+  const { formatMessage } = useIntl();
+
+  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?.content?.length) {
+      return (
+        <TableRow>
+          <TableCell colSpan={data?.headers?.length ? data?.headers?.length : undefined}>
+            <div className="np-table-empty-data" data-testid="np-table-empty-data">
+              <StatusIcon sentiment={Sentiment.WARNING} size={Size.MEDIUM} />
+              <div className="np-text-body-large-bold">{formatMessage(messages.emptyData)}</div>
+            </div>
+          </TableCell>
+        </TableRow>
+      );
+    }
+
+    return data?.content?.map((rowData, rowIndex) => {
+      return (
+        <TableRow
+          key={'table-row'.concat(rowIndex.toString())}
+          rowData={rowData}
+          hasSeparator={data?.content?.length ? data.content.length - 1 !== rowIndex : false}
+          onRowClick={data?.onRowClick}
+        />
+      );
+    });
+  };
+
+  if (error) {
+    return (
+      <Alert
+        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
+      className={clsx('np-table-container', className, {
+        'np-table-container--loading': loading,
+        'np-table-container--center': !fullWidth,
+        'np-table-container--full-width': fullWidth,
+      })}
+      data-testid="np-table-container"
+    >
+      <div className="np-table-inner-container">
+        <table className="np-table">
+          <thead>
+            <tr>
+              {(loading ?? (data?.headers && !data?.headers.length)) ? (
+                <TableHeader />
+              ) : (
+                data?.headers?.map((headerItem: TableHeaderType, index) => (
+                  <TableHeader
+                    key={headerItem.header?.concat(index.toString())}
+                    hasActionColumn={
+                      data?.onRowClick && index === Number(data?.headers?.length) - 1
+                    }
+                    {...headerItem}
+                  />
+                ))
+              )}
+            </tr>
+          </thead>
+          <tbody>{getTableContent()}</tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default Table;

package/src/table/TableCell.spec.tsx

@@ -0,0 +1,298 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import TableCell, {
+  CurrencyContentType,
+  LeadingContentType,
+  StatusContentType,
+  TextContentType,
+} from './TableCell';
+import { IntlProvider } from 'react-intl';
+import { mockMatchMedia } from '../test-utils';
+
+mockMatchMedia();
+
+describe('TableCell Component', () => {
+  const cellContentMocks = {
+    leading: {
+      primaryText: 'Leading text',
+      secondaryText: 'Description',
+      initials: 'AB',
+    } satisfies LeadingContentType,
+    text: {
+      text: 'Cell text',
+    } satisfies TextContentType,
+    currency: {
+      primaryCurrency: {
+        value: '12345.67',
+        currency: 'eur',
+      },
+      secondaryCurrency: {
+        value: '11000.00',
+        currency: 'gbp',
+      },
+    } satisfies CurrencyContentType,
+    status: {
+      primaryText: 'Primary text',
+      secondaryText: 'Description',
+      sentiment: 'negative',
+    } satisfies StatusContentType,
+    custom: <div>Custom content</div>,
+  };
+
+  const renderWithIntl = (component: React.ReactElement) => {
+    return render(<IntlProvider locale="en">{component}</IntlProvider>);
+  };
+
+  it('renders without content correctly', () => {
+    renderWithIntl(<TableCell />);
+    expect(screen.getByRole('cell')).toBeInTheDocument();
+  });
+
+  it('renders with colSpan correctly', () => {
+    renderWithIntl(<TableCell colSpan={2} />);
+    expect(screen.getByRole('cell')).toHaveAttribute('colSpan', '2');
+  });
+
+  it('renders with custom className correctly', () => {
+    renderWithIntl(<TableCell className="custom-class" />);
+    expect(screen.getByRole('cell')).toHaveClass('custom-class');
+  });
+
+  it('renders separator correctly', () => {
+    renderWithIntl(<TableCell hasSeparator />);
+    expect(screen.getByTestId('np-table-cell-separator')).toBeInTheDocument();
+  });
+
+  it("renders cell with children's content correctly", () => {
+    renderWithIntl(<TableCell>{cellContentMocks.custom}</TableCell>);
+    expect(screen.getByText('Custom content')).toBeInTheDocument();
+  });
+
+  it('applies alignment class correctly', () => {
+    renderWithIntl(<TableCell alignment="right" />);
+    expect(screen.getByRole('cell')).toHaveClass('np-table-cell--right');
+  });
+
+  it('renders text content correctly', () => {
+    renderWithIntl(<TableCell content={{ ...cellContentMocks.text }} />);
+    expect(screen.getByText('Cell text')).toBeInTheDocument();
+  });
+
+  it('renders text with error content correctly', () => {
+    renderWithIntl(<TableCell content={{ ...cellContentMocks.text, status: 'error' }} />);
+    expect(screen.getByText('Cell text')).toBeInTheDocument();
+    expect(screen.getByText('Cell text')).toHaveClass('np-table-content--error');
+    expect(screen.getByTestId('alert-icon')).toBeInTheDocument();
+  });
+
+  it('renders text with success content correctly', () => {
+    renderWithIntl(<TableCell content={{ ...cellContentMocks.text, status: 'success' }} />);
+    expect(screen.getByText('Cell text')).toBeInTheDocument();
+    expect(screen.getByText('Cell text')).toHaveClass('np-table-content--success');
+    expect(screen.getByTestId('check-icon')).toBeInTheDocument();
+  });
+
+  it('renders leading content with initials correctly', () => {
+    renderWithIntl(<TableCell type="leading" content={{ ...cellContentMocks.leading }} />);
+    expect(screen.getByText('AB')).toBeInTheDocument();
+    expect(screen.getByText('Leading text')).toBeInTheDocument();
+    expect(screen.getByText('Description')).toBeInTheDocument();
+  });
+
+  it('renders leading cell without media content when initials are undefined', () => {
+    renderWithIntl(
+      <TableCell
+        type="leading"
+        content={{
+          ...cellContentMocks.leading,
+          initials: undefined,
+        }}
+      />,
+    );
+    expect(screen.queryByText('AB')).not.toBeInTheDocument();
+    expect(screen.getByText('Leading text')).toBeInTheDocument();
+    expect(screen.getByText('Description')).toBeInTheDocument();
+    expect(screen.queryByTestId('np-table-content-media')).not.toBeInTheDocument();
+  });
+
+  it('renders leading cell without primary text if it is undefined', () => {
+    renderWithIntl(
+      <TableCell
+        type="leading"
+        content={{
+          ...cellContentMocks.leading,
+          primaryText: undefined,
+        }}
+      />,
+    );
+    expect(screen.getByText('AB')).toBeInTheDocument();
+    expect(screen.queryByText('Leading text')).not.toBeInTheDocument();
+    expect(screen.getByText('Description')).toBeInTheDocument();
+  });
+
+  it('renders leading cell without secondary text if it is undefined', () => {
+    renderWithIntl(
+      <TableCell
+        type="leading"
+        content={{
+          ...cellContentMocks.leading,
+          secondaryText: undefined,
+        }}
+      />,
+    );
+    expect(screen.getByText('AB')).toBeInTheDocument();
+    expect(screen.getByText('Leading text')).toBeInTheDocument();
+    expect(screen.queryByText('Description')).not.toBeInTheDocument();
+  });
+
+  it('renders leading content with error content correctly', () => {
+    renderWithIntl(
+      <TableCell
+        type="leading"
+        content={{
+          ...cellContentMocks.leading,
+          status: 'error',
+        }}
+      />,
+    );
+    expect(screen.getByText('AB')).toBeInTheDocument();
+    expect(screen.getByText('Leading text')).toHaveClass('np-table-content--error');
+    expect(screen.getByTestId('alert-icon')).toBeInTheDocument();
+  });
+
+  it('renders leading content with success content correctly', () => {
+    renderWithIntl(
+      <TableCell
+        type="leading"
+        content={{
+          ...cellContentMocks.leading,
+          status: 'success',
+        }}
+      />,
+    );
+    expect(screen.getByText('AB')).toBeInTheDocument();
+    expect(screen.getByText('Leading text')).toHaveClass('np-table-content--success');
+    expect(screen.getByTestId('check-icon')).toBeInTheDocument();
+  });
+
+  it('renders status content correctly', () => {
+    renderWithIntl(<TableCell type="status" content={{ ...cellContentMocks.status }} />);
+    expect(screen.getByTestId('status-icon')).toBeInTheDocument();
+    expect(screen.getByTestId('status-icon')).toHaveClass('negative');
+    expect(screen.getByText('Primary text')).toBeInTheDocument();
+    expect(screen.getByText('Description')).toBeInTheDocument();
+  });
+
+  it('renders status type with default sentiment', () => {
+    renderWithIntl(
+      <TableCell
+        type="status"
+        content={{ primaryText: 'Primary text', secondaryText: 'Description' }}
+      />,
+    );
+    expect(screen.getByTestId('info-icon')).toBeInTheDocument();
+    expect(screen.getByText('Primary text')).toBeInTheDocument();
+    expect(screen.getByText('Description')).toBeInTheDocument();
+  });
+
+  it('renders currency content correctly', () => {
+    renderWithIntl(<TableCell type="currency" content={{ ...cellContentMocks.currency }} />);
+    expect(screen.getByRole('presentation')).toBeInTheDocument();
+    expect(screen.getByText('12,345.67 EUR')).toBeInTheDocument();
+    expect(screen.getByText('11,000.00 GBP')).toBeInTheDocument();
+  });
+
+  it('renders currency cell without media content when currency value of primaryCurrency is empty', () => {
+    renderWithIntl(
+      <TableCell
+        type="currency"
+        content={{
+          ...cellContentMocks.currency,
+          primaryCurrency: {
+            value: cellContentMocks.currency.primaryCurrency.value,
+            currency: '',
+          },
+        }}
+      />,
+    );
+    expect(screen.queryByRole('presentation')).not.toBeInTheDocument();
+    expect(screen.getByText('12,345.67')).toBeInTheDocument();
+    expect(screen.getByText('11,000.00 GBP')).toBeInTheDocument();
+    expect(screen.queryByTestId('np-table-content-media')).not.toBeInTheDocument();
+  });
+
+  it('renders currency cell without primary currency when it is undefined', () => {
+    renderWithIntl(
+      <TableCell
+        type="currency"
+        content={{
+          ...cellContentMocks.currency,
+          primaryCurrency: undefined,
+        }}
+      />,
+    );
+    expect(screen.queryByText('12,345.67 EUR')).not.toBeInTheDocument();
+    expect(screen.getByText('11,000.00 GBP')).toBeInTheDocument();
+  });
+
+  it('renders currency cell without secondary currency when it is undefined', () => {
+    renderWithIntl(
+      <TableCell
+        type="currency"
+        content={{
+          ...cellContentMocks.currency,
+          secondaryCurrency: undefined,
+        }}
+      />,
+    );
+    expect(screen.getByText('12,345.67 EUR')).toBeInTheDocument();
+    expect(screen.queryByText('11,000.00 GBP')).not.toBeInTheDocument();
+  });
+
+  it('renders currency cell without secondary currency when its currency is empty', () => {
+    renderWithIntl(
+      <TableCell
+        type="currency"
+        content={{
+          ...cellContentMocks.currency,
+          secondaryCurrency: {
+            value: cellContentMocks.currency.secondaryCurrency.value,
+            currency: '',
+          },
+        }}
+      />,
+    );
+    expect(screen.getByText('12,345.67 EUR')).toBeInTheDocument();
+    expect(screen.getByText('11,000.00')).toBeInTheDocument();
+  });
+
+  it('renders currency content correctly with error content correctly', () => {
+    renderWithIntl(
+      <TableCell
+        type="currency"
+        content={{
+          ...cellContentMocks.currency,
+          status: 'error',
+        }}
+      />,
+    );
+    expect(screen.getByText('12,345.67 EUR')).toBeInTheDocument();
+    expect(screen.getByText('12,345.67 EUR')).toHaveClass('np-table-content--error');
+    expect(screen.getByTestId('alert-icon')).toBeInTheDocument();
+  });
+
+  it('renders currency content correctly with success content correctly', () => {
+    renderWithIntl(
+      <TableCell
+        type="currency"
+        content={{
+          ...cellContentMocks.currency,
+          status: 'success',
+        }}
+      />,
+    );
+    expect(screen.getByText('12,345.67 EUR')).toBeInTheDocument();
+    expect(screen.getByText('12,345.67 EUR')).toHaveClass('np-table-content--success');
+    expect(screen.getByTestId('check-icon')).toBeInTheDocument();
+  });
+});

package/src/table/TableCell.tsx

@@ -0,0 +1,153 @@
+import TableStatusText from './TableStatusText';
+import Avatar, { AvatarType } from '../avatar';
+import StatusIcon from '../statusIcon';
+import { Flag } from '@wise/art';
+import Body from '../body';
+import { formatMoney } from '@transferwise/formatting';
+import { useIntl } from 'react-intl';
+import React from 'react';
+import { clsx } from 'clsx';
+
+// `Leading` and `Status` cells' types have 2 text fields: primary and secondary
+interface TextPropsType {
+  primaryText?: string;
+  secondaryText?: string;
+}
+
+// `Leading`, `Text` and `Status` cells' types can have a status indicator with `error` or `success` values
+interface StatusPropsType {
+  status?: 'error' | 'success';
+}
+
+// TODO: Instead of initials it should be an avatar, change implementation
+export interface LeadingContentType extends TextPropsType, StatusPropsType {
+  initials?: string;
+}
+
+export interface TextContentType extends StatusPropsType {
+  text?: string;
+}
+
+interface CurrencyType {
+  value: string | number;
+  currency: string;
+}
+
+export interface CurrencyContentType extends StatusPropsType {
+  primaryCurrency?: CurrencyType;
+  secondaryCurrency?: CurrencyType;
+}
+
+export interface StatusContentType extends TextPropsType {
+  sentiment?: 'negative' | 'neutral' | 'positive' | 'warning' | 'pending';
+}
+
+export interface TableCellProps {
+  type?: 'leading' | 'text' | 'currency' | 'status';
+  content?: LeadingContentType & TextContentType & CurrencyContentType & StatusContentType;
+  alignment?: 'right' | 'left';
+  className?: string;
+  colSpan?: number;
+  hasSeparator?: boolean;
+  children?: React.ReactNode;
+}
+
+const TableCell = ({
+  type = 'text',
+  content,
+  alignment,
+  className,
+  colSpan,
+  hasSeparator,
+  children,
+}: TableCellProps) => {
+  const { locale } = useIntl();
+
+  const getContentMedia = () => {
+    let mediaContent = null;
+
+    if (type === 'leading' && content?.initials) {
+      mediaContent = (
+        <Avatar size={40} type={AvatarType.INITIALS}>
+          {content?.initials}
+        </Avatar>
+      );
+    }
+
+    if (type === 'currency' && content?.primaryCurrency?.currency) {
+      mediaContent = (
+        <Flag code={content?.primaryCurrency?.currency?.toLowerCase()} intrinsicSize={24} />
+      );
+    }
+
+    if (type === 'status') {
+      mediaContent = <StatusIcon size="md" sentiment={content?.sentiment ?? 'neutral'} />;
+    }
+
+    if (mediaContent) {
+      return (
+        <div className="np-table-content-media" data-testid="np-table-content-media">
+          {mediaContent}
+        </div>
+      );
+    }
+  };
+
+  const formatCurrencyValue = (currency?: CurrencyType) => {
+    if (currency) {
+      return formatMoney(Number(currency.value), currency.currency, locale, {
+        alwaysShowDecimals: true,
+      });
+    }
+
+    return '';
+  };
+
+  return (
+    <td
+      className={clsx('np-table-cell', `np-table-cell--${type}`, className, {
+        'np-table-cell--right': alignment === 'right',
+      })}
+      colSpan={colSpan}
+    >
+      {type === 'text' && content?.text && (
+        <TableStatusText text={content?.text} status={content?.status} />
+      )}
+      {['leading', 'currency', 'status'].includes(type) && (
+        <div
+          className={clsx('np-table-content', {
+            'np-table-content--reversed': type === 'currency',
+          })}
+        >
+          {getContentMedia()}
+          <div className="np-table-content-body">
+            {(content?.primaryCurrency ?? content?.primaryText) && (
+              <TableStatusText
+                text={
+                  type === 'currency'
+                    ? formatCurrencyValue(content?.primaryCurrency)
+                    : (content?.primaryText ?? '')
+                }
+                status={type !== 'status' ? content?.status : undefined}
+                typography="large-bold"
+              />
+            )}
+            {(content?.secondaryCurrency ?? content?.secondaryText) && (
+              <Body>
+                {type === 'currency'
+                  ? formatCurrencyValue(content?.secondaryCurrency)
+                  : content?.secondaryText}
+              </Body>
+            )}
+          </div>
+        </div>
+      )}
+      {hasSeparator && (
+        <div className="np-table-cell-separator" data-testid="np-table-cell-separator" />
+      )}
+      {children}
+    </td>
+  );
+};
+
+export default TableCell;

package/src/table/TableHeader.spec.tsx

@@ -0,0 +1,58 @@
+import { render, screen } from '@testing-library/react';
+import TableHeader, { TableHeaderProps } from './TableHeader';
+
+describe('TableHeader Component', () => {
+  const renderComponent = (props: Partial<TableHeaderProps> = {}) => {
+    const defaultProps = {
+      header: '',
+      className: '',
+      alignment: 'left',
+      hasError: false,
+    } satisfies TableHeaderProps;
+    return render(<TableHeader {...defaultProps} {...props} />);
+  };
+
+  it('should render without crashing', () => {
+    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 hasError is passed', () => {
+    renderComponent({ hasError: true });
+    expect(screen.getByRole('columnheader')).toHaveClass('np-table-header--has-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 with colSpan of 2 when hasActionColumn is passed', () => {
+    renderComponent({ hasActionColumn: true });
+    expect(screen.getByRole('columnheader')).toHaveAttribute('colSpan', '2');
+  });
+
+  it('should render TableStatusText with error status when hasError is passed', () => {
+    const headerText = 'Test Header';
+    renderComponent({ header: headerText, hasError: true });
+    expect(screen.getByText(headerText)).toHaveClass('np-table-content--error');
+    expect(screen.getByTestId('alert-icon')).toBeInTheDocument();
+  });
+});

package/src/table/TableHeader.tsx

@@ -0,0 +1,50 @@
+import TableStatusText from './TableStatusText';
+import { clsx } from 'clsx';
+
+// TODO: Add `width` prop in next iterations
+export interface TableHeaderType {
+  header?: string;
+  className?: string;
+  alignment?: 'right' | 'left';
+  hasError?: boolean;
+}
+
+export interface TableHeaderProps extends TableHeaderType {
+  hasActionColumn?: boolean;
+}
+
+const TableHeader: React.FC<TableHeaderProps> = ({
+  header,
+  className,
+  alignment = 'left',
+  hasError = false,
+  hasActionColumn = false,
+}: TableHeaderProps) => {
+  return (
+    <th
+      className={clsx('np-table-header', className, {
+        'np-table-header--right': alignment === 'right',
+        'np-table-header--has-error': hasError,
+      })}
+      colSpan={hasActionColumn ? 2 : undefined}
+    >
+      {header ? (
+        <TableStatusText
+          text={header}
+          className="np-table-header-content"
+          status={hasError ? 'error' : undefined}
+          typography="large-bold"
+        />
+      ) : (
+        <div
+          className="np-table-header-content np-text-body-large-bold"
+          data-testid="np-table-empty-header"
+        >
+          &nbsp;
+        </div>
+      )}
+    </th>
+  );
+};
+
+export default TableHeader;