@transferwise/components 0.0.0-experimental-d1715ff → 0.0.0-experimental-f81f868

package/src/table/Table.less

@@ -0,0 +1,261 @@
+.np-table {
+  @table-background-color: var(--color-background-neutral);
+  @table-border-width: var(--size-8);
+  @table-border-radius: var(--radius-medium);
+  @table-inner-border-radius: 10px;
+
+  @table-spacing-sm: var(--size-4);
+  @table-spacing-md: var(--size-8);
+  @table-spacing-lg: var(--size-12);
+  @table-spacing-xl: var(--size-16);
+
+  @header-min-width: 160px;
+  @header-min-width-loading: calc(@header-min-width * 2);
+
+  width: 100%;
+  background-color: transparent;
+
+  &-container {
+    padding: @table-spacing-md;
+    background-color: @table-background-color;
+    border-radius: @table-border-radius;
+
+    &--loading {
+      .np-table-header {
+        min-width: @header-min-width-loading;
+      }
+    }
+
+    &--center {
+      margin-right: auto;
+      margin-left: auto;
+    }
+
+    &--full-width {
+      width: 100%;
+    }
+  }
+
+  &-inner-container {
+    background-image:
+      linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)),
+      linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)),
+      linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)),
+      linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));
+    background-position: left center, right center, left center, right center;
+    background-repeat: no-repeat;
+    background-color: var(--color-contrast-overlay);
+    background-size: 15px 100%, 15px 100%, 15px 100%, 15px 100%;
+    background-attachment: local, local, scroll, scroll;
+    overflow-x: auto;
+    border-radius: @table-inner-border-radius;
+
+    .np-theme-personal--dark & {
+      background-image:
+        linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)),
+        linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)),
+        linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0)),
+        linear-gradient(to left, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0));
+    }
+  }
+
+  &-row {
+    &:last-child {
+      .np-table-cell {
+        &:first-child {
+          border-bottom-left-radius: @table-inner-border-radius;
+        }
+        &:last-child {
+          border-bottom-right-radius: @table-inner-border-radius;
+        }
+      }
+    }
+
+    &--clickable:hover {
+      .np-table-cell {
+        background-color: var(--color-background-screen-hover);
+        cursor: pointer;
+      }
+    }
+
+    &--separator {
+      .np-table-cell {
+        padding: 0;
+      }
+    }
+  }
+
+  &-header,
+  &-cell {
+    padding: 0;
+
+    &:first-child {
+      padding-left: @table-spacing-xl;
+
+      .np-table-header-content,
+      .np-table-cell-content {
+        padding-left: 0;
+      }
+    }
+    
+    &:last-child {
+      padding-right: @table-spacing-xl;
+      
+      .np-table-header-content,
+      .np-table-cell-content {
+        padding-right: 0;
+      }
+    }
+
+    .np-text-body-large-bold {
+      font-size: var(--font-size-14);
+    }
+  }
+  
+  &-header.np-table-header--right,
+  &-cell.np-table-cell--right {
+    padding-right: calc(@table-spacing-md + @table-spacing-lg);
+    > .np-text-body-default {
+      text-align: right;
+    }
+  }
+
+  &-header.np-table-header--right .np-table-header-content,
+  &-cell.np-table-cell--right .np-table-content {
+    justify-content: end;
+  }
+
+  &-header-content,
+  &-content {
+    display: flex;
+    align-items: center;
+    justify-content: start;
+  }
+
+  &-header {
+    min-width: @header-min-width;
+    padding-right: @table-spacing-md;
+    padding-bottom: @table-spacing-md;
+    padding-left: @table-spacing-md;
+    background-color: var(--color-background-neutral);
+    color: var(--color-content-primary);
+
+    &-content {
+      padding-top: 5px;
+      padding-bottom: 5px;
+      white-space: nowrap;
+    }
+
+    &--has-error {
+      color: var(--color-sentiment-negative);
+    }
+  }
+
+  &-cell {
+    padding: @table-spacing-xl @table-spacing-md;
+
+    &--primary {
+      min-width: 200px;
+    }
+
+    &--currency {
+      .np-text-body-default {
+        white-space: nowrap;
+      }
+    }
+
+    // TODO: In next iterations this block of code should be removed after we'll have `24px` status icons
+    &--status {
+      .status-circle {
+        width: 24px;
+        height: 24px;
+
+        .status-icon > svg {
+          width: 21px;
+          height: 21px;
+        }
+      }
+    }
+
+    .tw-chevron {
+      margin-left: @table-spacing-md;
+    }
+
+    &-separator {
+      margin-top: @table-spacing-sm;
+      margin-bottom: @table-spacing-sm;
+      height: 1px;
+      padding: 0;
+      background-color: @table-background-color;
+    }
+
+    .np-text-body-default {
+      line-height: var(--line-height-22);
+    }
+
+    .np-text-body-large-bold {
+      display: flex;
+      align-items: center;
+      color: var(--color-content-primary);
+      white-space: nowrap;
+    }
+
+    .np-table-content--success {
+      color: var(--color-sentiment-positive);
+    }
+
+    .np-table-content--error {
+      color: var(--color-sentiment-negative);
+    }
+
+    .tw-loader {
+      // The loading area of the table should equals to 5 rows of the table for huge screens and 3 rows for small screens
+      margin: 150px auto;
+      @media (--screen-400-zoom) {
+        margin-top: 70px;
+        margin-bottom: 70px;
+      }
+    }
+  }
+
+  &-content {
+    gap: @table-spacing-lg;
+
+    &--success,
+    &--error {
+      gap: @table-spacing-sm;
+
+      .np-table-content-text {
+        line-height: 155%;
+      }
+    }
+
+    &-media {
+      flex-shrink: 0;
+    }
+    
+    &-body {
+      display: flex;
+      flex-direction: column;
+      font-size: var(--font-size-12);
+      color: var(--color-content-tertiary);
+    }
+
+    &--reversed {
+      flex-direction: row-reverse;
+
+      .np-table-content-body {
+        align-items: end;
+      }
+    }
+  }
+
+  &-empty-data {
+    display: flex;
+    align-items: center;
+
+    .status-circle {
+      margin-right: @table-spacing-lg;
+    }
+  }
+}

package/src/table/Table.messages.ts

@@ -0,0 +1,12 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  refreshPage: {
+    id: 'neptune.Table.refreshPage',
+    defaultMessage: 'Refresh page',
+  },
+  emptyData: {
+    id: 'neptune.Table.emptyData',
+    defaultMessage: 'No results found',
+  },
+});

package/src/table/Table.spec.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import { IntlProvider } from 'react-intl';
+import Table, { TableProps } from './Table';
+import { mockMatchMedia } from '../test-utils';
+
+mockMatchMedia();
+
+const renderWithIntl = (component: React.ReactNode) => {
+  return render(<IntlProvider locale="en">{component}</IntlProvider>);
+};
+
+describe('Table Component', () => {
+  const defaultProps: TableProps = {
+    data: {
+      headers: [{ header: 'Header 1' }, { header: 'Header 2' }],
+      content: [
+        {
+          rowContent: [
+            { content: { text: 'Cell content 1' } },
+            { content: { text: 'Cell content 2' } },
+          ],
+        },
+        {
+          rowContent: [
+            { content: { text: 'Cell content 3' } },
+            { content: { text: 'Cell content 4' } },
+          ],
+        },
+      ],
+      onRowClick: jest.fn(),
+    },
+    loading: false,
+    className: '',
+    fullWidth: true,
+    error: undefined,
+    onRetry: jest.fn(),
+  };
+
+  it('renders table headers and content', () => {
+    renderWithIntl(<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', () => {
+    renderWithIntl(<Table {...defaultProps} loading />);
+    expect(screen.getAllByTestId('np-table-loader')).toHaveLength(1);
+  });
+
+  it('renders empty data message', () => {
+    renderWithIntl(<Table {...defaultProps} data={{ headers: [], content: [] }} />);
+    expect(screen.getAllByTestId('np-table-empty-data')).toHaveLength(1);
+  });
+
+  it('renders error message', () => {
+    const errorProps: TableProps = {
+      ...defaultProps,
+      error: { message: 'Error occurred', action: { text: 'Retry' } },
+    };
+    renderWithIntl(<Table {...errorProps} />);
+    expect(screen.getByText('Error occurred')).toBeInTheDocument();
+    expect(screen.getByText('Retry')).toBeInTheDocument();
+  });
+
+  it('renders with custom className', () => {
+    renderWithIntl(<Table {...defaultProps} className="custom-class" />);
+    expect(screen.getByTestId('np-table-container')).toHaveClass('custom-class');
+  });
+
+  it('renders with fullWidth set to false', () => {
+    renderWithIntl(<Table {...defaultProps} fullWidth={false} />);
+    expect(screen.getByTestId('np-table-container')).toHaveClass('np-table-container--center');
+  });
+
+  it('calls onRowClick when a row is clicked', async () => {
+    renderWithIntl(<Table {...defaultProps} />);
+    await userEvent.click(screen.getByText('Cell content 1'));
+    expect(defaultProps.data.onRowClick).toHaveBeenCalled();
+  });
+});

package/src/table/Table.story.tsx

@@ -0,0 +1,352 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Table from './Table';
+import { TableHeaderType } from './TableHeader';
+import { lorem1000 } from '../test-utils';
+import { TableRowType, TableRowClickableType } from './TableRow';
+
+export default {
+  component: Table,
+  title: 'Option/Table',
+  tags: ['autodocs'],
+} satisfies Meta<typeof Table>;
+
+type Story = StoryObj<typeof Table>;
+
+const getLoremIpsumWords = (count: number, hasWordsOnly = false) => {
+  const loremIpsumWords = hasWordsOnly ? lorem1000.replace(/[^a-z\s]/gi, '') : lorem1000;
+  return loremIpsumWords.split(' ').slice(0, count).join(' ');
+};
+
+const sampleHeading = 'Header sample';
+const loremDescription = 'Description';
+const lorem2 = getLoremIpsumWords(2, true);
+const lorem5 = getLoremIpsumWords(5);
+
+const tableData = {
+  headers: [
+    {
+      header: sampleHeading,
+    },
+    {
+      header: sampleHeading,
+    },
+    {
+      header: sampleHeading,
+      className: 'np-table-header--custom-class',
+    },
+    {
+      header: sampleHeading,
+      alignment: 'right',
+    },
+    {
+      header: sampleHeading,
+      hasError: true,
+    },
+  ] satisfies TableHeaderType[],
+  content: [
+    {
+      id: 0,
+      rowContent: [
+        {
+          type: 'leading',
+          content: {
+            primaryText: lorem2,
+            secondaryText: loremDescription,
+            initials: 'PT',
+          },
+        },
+        {
+          content: { text: lorem2 },
+        },
+        {
+          content: { text: lorem2 },
+        },
+        {
+          type: 'currency',
+          content: {
+            primaryCurrency: {
+              value: '12345.67',
+              currency: 'eur',
+            },
+            secondaryCurrency: {
+              value: '11000.00',
+              currency: 'gbp',
+            },
+          },
+          alignment: 'right',
+        },
+        {
+          type: 'status',
+          content: {
+            primaryText: lorem2,
+            secondaryText: loremDescription,
+            sentiment: 'negative',
+          },
+        },
+      ],
+    },
+    {
+      id: 1,
+      rowContent: [
+        {
+          type: 'leading',
+          content: {
+            primaryText: lorem2,
+            secondaryText: loremDescription,
+            initials: 'PT',
+            status: 'error',
+          },
+        },
+        {
+          content: { text: lorem2 },
+        },
+        {
+          content: {
+            text: lorem2,
+            status: 'error',
+          },
+        },
+        {
+          type: 'currency',
+          content: {
+            primaryCurrency: {
+              value: 23456.78,
+              currency: 'usd',
+            },
+            secondaryCurrency: {
+              value: 21000.0,
+              currency: 'gbp',
+            },
+            status: 'error',
+          },
+          alignment: 'right',
+        },
+        {
+          type: 'status',
+          content: {
+            primaryText: lorem2,
+            secondaryText: loremDescription,
+            sentiment: 'neutral',
+          },
+        },
+      ],
+    },
+    {
+      id: 2,
+      rowContent: [
+        {
+          type: 'leading',
+          content: {
+            primaryText: lorem2,
+            secondaryText: loremDescription,
+            initials: 'PT',
+            status: 'success',
+          },
+        },
+        {
+          content: { text: lorem2 },
+        },
+        {
+          content: {
+            text: lorem2,
+            status: 'success',
+          },
+        },
+        {
+          type: 'currency',
+          content: {
+            primaryCurrency: {
+              value: '34567.89',
+              currency: 'gbp',
+            },
+            secondaryCurrency: {
+              value: '31000.00',
+              currency: 'eur',
+            },
+            status: 'success',
+          },
+          alignment: 'right',
+        },
+        {
+          type: 'status',
+          content: {
+            primaryText: lorem2,
+            secondaryText: loremDescription,
+            sentiment: 'positive',
+          },
+        },
+      ],
+    },
+    {
+      id: 3,
+      rowContent: [
+        {
+          type: 'leading',
+          content: {
+            primaryText: lorem2,
+            secondaryText: loremDescription,
+            initials: 'PT',
+          },
+        },
+        {
+          content: { text: lorem2 },
+        },
+        {
+          content: { text: lorem2 },
+        },
+        {
+          type: 'currency',
+          content: {
+            primaryCurrency: {
+              value: '45678.90',
+              currency: 'nok',
+            },
+            secondaryCurrency: {
+              value: '41000.00',
+              currency: 'gbp',
+            },
+          },
+          alignment: 'right',
+        },
+        {
+          type: 'status',
+          content: {
+            primaryText: lorem2,
+            secondaryText: loremDescription,
+            sentiment: 'warning',
+          },
+        },
+      ],
+    },
+    {
+      id: 4,
+      rowContent: [
+        {
+          type: 'leading',
+          content: {
+            primaryText: lorem2,
+            secondaryText: loremDescription,
+            initials: 'PT',
+          },
+        },
+        {
+          content: { text: lorem2 },
+        },
+        {
+          content: { text: lorem2 },
+        },
+        {
+          type: 'currency',
+          content: {
+            primaryCurrency: {
+              value: '56789.01',
+              currency: 'sek',
+            },
+            secondaryCurrency: {
+              value: '51000.00',
+              currency: 'gbp',
+            },
+          },
+          alignment: 'right',
+        },
+        {
+          type: 'status',
+          content: {
+            primaryText: lorem2,
+            secondaryText: loremDescription,
+            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,
+      content: [],
+    },
+  },
+};
+
+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 WithSimpleContent: Story = {
+  args: {
+    data: {
+      headers: [
+        {
+          header: sampleHeading,
+        },
+        {
+          header: sampleHeading,
+        },
+      ] satisfies TableHeaderType[],
+      content: [
+        {
+          id: 0,
+          rowContent: [{ content: { text: lorem5 } }, { content: { text: lorem5 } }],
+        },
+        {
+          id: 1,
+          rowContent: [{ content: { text: lorem5 } }, { content: { text: lorem5 } }],
+        },
+        {
+          id: 2,
+          rowContent: [{ content: { text: lorem5 } }, { content: { text: lorem5 } }],
+        },
+        {
+          id: 3,
+          rowContent: [{ content: { text: lorem5 } }, { content: { text: lorem5 } }],
+        },
+        {
+          id: 4,
+          rowContent: [{ content: { text: lorem5 } }, { content: { text: lorem5 } }],
+        },
+      ] satisfies TableRowType[] | TableRowClickableType[],
+    },
+    fullWidth: false,
+  },
+};