@transferwise/components 46.80.0 → 46.82.0

package/src/table/TableRow.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import TableCell, { TableCellProps } from './TableCell';
+import Chevron from '../chevron';
+import { Position } from '../common';
+import { clsx } from 'clsx';
+
+export interface TableRowType {
+  cells?: 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"
+        role={onRowClick ? 'button' : undefined}
+        tabIndex={0}
+        onClick={onRowClick && rowData ? () => onRowClick(rowData) : undefined}
+        onKeyDown={({ key }) => {
+          if (onRowClick && rowData && key === 'Enter') {
+            onRowClick(rowData);
+          }
+        }}
+      >
+        {rowData?.cells
+          ? rowData?.cells?.map((item, index) => {
+              const itemIndex = item.cell?.text ? item.cell?.text.concat(index.toString()) : index;
+              return <TableCell key={itemIndex} {...item} />;
+            })
+          : children}
+        {onRowClick && (
+          <TableCell className="np-table-cell--action">
+            <div aria-hidden="true">
+              <Chevron orientation={Position.RIGHT} />
+            </div>
+          </TableCell>
+        )}
+      </tr>
+      {hasSeparator && (
+        <tr
+          aria-hidden="true"
+          className="np-table-row np-table-row--separator"
+          data-testid="np-table-row--separator"
+        >
+          <td
+            className="np-table-cell np-table-cell--cosmetic"
+            colSpan={onRowClick ? Number(rowData?.cells?.length) + 1 : rowData?.cells?.length}
+            data-testid="np-table-cell--cosmetic"
+          >
+            <div className="np-table-cell-separator" data-testid="np-table-cell-separator" />
+          </td>
+        </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 default typography class when typography is not provided', () => {
+    renderComponent();
+    expect(screen.getByText('Status Text')).toHaveClass('np-text-body-default');
+  });
+
+  it('applies the typography class when typography equals `default-bold`', () => {
+    renderComponent({ typography: 'default-bold' });
+    expect(screen.getByText('Status Text')).toHaveClass('np-text-body-default-bold');
+  });
+
+  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 error icon when status equals `error`', () => {
+    renderComponent({ status: 'error' });
+    expect(screen.getByText('Status Text')).toHaveClass('np-text-body-default-bold');
+    expect(screen.getByText('Status Text')).toHaveClass('np-table-content--error');
+    expect(screen.getByTestId('alert-icon')).toBeInTheDocument();
+  });
+
+  it('applies the typography and status classes, renders the success icon when status equals `success`', () => {
+    renderComponent({ status: 'success' });
+    expect(screen.getByText('Status Text')).toHaveClass('np-text-body-default-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,40 @@
+import { AlertCircle, CheckCircle } from '@transferwise/icons';
+import { clsx } from 'clsx';
+import React from 'react';
+import Body from '../body';
+import { Typography } from '../common';
+
+export interface TableStatusTextProps {
+  text: string | React.ReactNode;
+  className?: string;
+  status?: 'success' | 'error';
+  typography?: 'default' | 'default-bold';
+}
+
+const TableStatusText = ({
+  text,
+  className,
+  status,
+  typography = 'default',
+}: TableStatusTextProps) => {
+  const typographyType =
+    (status ?? typography === 'default-bold')
+      ? Typography.BODY_DEFAULT_BOLD
+      : Typography.BODY_DEFAULT;
+
+  return (
+    <Body
+      type={typographyType}
+      className={clsx(className, {
+        '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" />}
+    </Body>
+  );
+};
+
+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 {
+  TableCellLeading,
+  TableCellText,
+  TableCellCurrency,
+  TableCellStatus,
+  TableCellType,
+} from './TableCell';

package/src/circularButton/__snapshots__/CircularButton.spec.tsx.snap

@@ -1,381 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CircularButton defaults renders a button of type accent and priority primary 1`] = `
-<div>
-  <label
-    class="np-circular-btn primary accent"
-  >
-    <input
-      aria-label="Add money"
-      class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-1"
-      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
-      type="button"
-    />
-    <span
-      class="tw-icon tw-icon-plus "
-      data-testid="plus-icon"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        focusable="false"
-        height="24"
-        role="none"
-        viewBox="0 0 24 24"
-        width="24"
-      >
-        <path
-          d="M22.286 11.143h-9.429V1.715h-1.714v9.428H1.714v1.715h9.429v9.428h1.714v-9.428h9.429v-1.715Z"
-        />
-      </svg>
-    </span>
-    <span
-      class="np-text-body-default-bold np-circular-btn__label"
-    >
-      Add money
-    </span>
-  </label>
-</div>
-`;
-
-exports[`CircularButton priorities renders primary buttons 1`] = `
-<div>
-  <label
-    class="np-circular-btn primary accent"
-  >
-    <input
-      aria-label="Add money"
-      class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-1"
-      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
-      type="button"
-    />
-    <span
-      class="tw-icon tw-icon-plus "
-      data-testid="plus-icon"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        focusable="false"
-        height="24"
-        role="none"
-        viewBox="0 0 24 24"
-        width="24"
-      >
-        <path
-          d="M22.286 11.143h-9.429V1.715h-1.714v9.428H1.714v1.715h9.429v9.428h1.714v-9.428h9.429v-1.715Z"
-        />
-      </svg>
-    </span>
-    <span
-      class="np-text-body-default-bold np-circular-btn__label"
-    >
-      Add money
-    </span>
-  </label>
-</div>
-`;
-
-exports[`CircularButton priorities renders primary buttons 2`] = `
-<div>
-  <label
-    class="np-circular-btn primary positive"
-  >
-    <input
-      aria-label="Add money"
-      class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-positive btn-priority-1"
-      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
-      type="button"
-    />
-    <span
-      class="tw-icon tw-icon-plus "
-      data-testid="plus-icon"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        focusable="false"
-        height="24"
-        role="none"
-        viewBox="0 0 24 24"
-        width="24"
-      >
-        <path
-          d="M22.286 11.143h-9.429V1.715h-1.714v9.428H1.714v1.715h9.429v9.428h1.714v-9.428h9.429v-1.715Z"
-        />
-      </svg>
-    </span>
-    <span
-      class="np-text-body-default-bold np-circular-btn__label"
-    >
-      Add money
-    </span>
-  </label>
-</div>
-`;
-
-exports[`CircularButton priorities renders primary buttons 3`] = `
-<div>
-  <label
-    class="np-circular-btn primary negative"
-  >
-    <input
-      aria-label="Add money"
-      class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-negative btn-priority-1"
-      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
-      type="button"
-    />
-    <span
-      class="tw-icon tw-icon-plus "
-      data-testid="plus-icon"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        focusable="false"
-        height="24"
-        role="none"
-        viewBox="0 0 24 24"
-        width="24"
-      >
-        <path
-          d="M22.286 11.143h-9.429V1.715h-1.714v9.428H1.714v1.715h9.429v9.428h1.714v-9.428h9.429v-1.715Z"
-        />
-      </svg>
-    </span>
-    <span
-      class="np-text-body-default-bold np-circular-btn__label"
-    >
-      Add money
-    </span>
-  </label>
-</div>
-`;
-
-exports[`CircularButton priorities renders secondary buttons 1`] = `
-<div>
-  <label
-    class="np-circular-btn secondary accent"
-  >
-    <input
-      aria-label="Add money"
-      class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-2"
-      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
-      type="button"
-    />
-    <span
-      class="tw-icon tw-icon-plus "
-      data-testid="plus-icon"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        focusable="false"
-        height="24"
-        role="none"
-        viewBox="0 0 24 24"
-        width="24"
-      >
-        <path
-          d="M22.286 11.143h-9.429V1.715h-1.714v9.428H1.714v1.715h9.429v9.428h1.714v-9.428h9.429v-1.715Z"
-        />
-      </svg>
-    </span>
-    <span
-      class="np-text-body-default-bold np-circular-btn__label"
-    >
-      Add money
-    </span>
-  </label>
-</div>
-`;
-
-exports[`CircularButton priorities renders secondary buttons 2`] = `
-<div>
-  <label
-    class="np-circular-btn secondary positive"
-  >
-    <input
-      aria-label="Add money"
-      class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-positive btn-priority-2"
-      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
-      type="button"
-    />
-    <span
-      class="tw-icon tw-icon-plus "
-      data-testid="plus-icon"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        focusable="false"
-        height="24"
-        role="none"
-        viewBox="0 0 24 24"
-        width="24"
-      >
-        <path
-          d="M22.286 11.143h-9.429V1.715h-1.714v9.428H1.714v1.715h9.429v9.428h1.714v-9.428h9.429v-1.715Z"
-        />
-      </svg>
-    </span>
-    <span
-      class="np-text-body-default-bold np-circular-btn__label"
-    >
-      Add money
-    </span>
-  </label>
-</div>
-`;
-
-exports[`CircularButton priorities renders secondary buttons 3`] = `
-<div>
-  <label
-    class="np-circular-btn secondary negative"
-  >
-    <input
-      aria-label="Add money"
-      class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-negative btn-priority-2"
-      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
-      type="button"
-    />
-    <span
-      class="tw-icon tw-icon-plus "
-      data-testid="plus-icon"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        focusable="false"
-        height="24"
-        role="none"
-        viewBox="0 0 24 24"
-        width="24"
-      >
-        <path
-          d="M22.286 11.143h-9.429V1.715h-1.714v9.428H1.714v1.715h9.429v9.428h1.714v-9.428h9.429v-1.715Z"
-        />
-      </svg>
-    </span>
-    <span
-      class="np-text-body-default-bold np-circular-btn__label"
-    >
-      Add money
-    </span>
-  </label>
-</div>
-`;
-
-exports[`CircularButton types renders accent buttons 1`] = `
-<div>
-  <label
-    class="np-circular-btn primary accent"
-  >
-    <input
-      aria-label="Add money"
-      class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-1"
-      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
-      type="button"
-    />
-    <span
-      class="tw-icon tw-icon-plus "
-      data-testid="plus-icon"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        focusable="false"
-        height="24"
-        role="none"
-        viewBox="0 0 24 24"
-        width="24"
-      >
-        <path
-          d="M22.286 11.143h-9.429V1.715h-1.714v9.428H1.714v1.715h9.429v9.428h1.714v-9.428h9.429v-1.715Z"
-        />
-      </svg>
-    </span>
-    <span
-      class="np-text-body-default-bold np-circular-btn__label"
-    >
-      Add money
-    </span>
-  </label>
-</div>
-`;
-
-exports[`CircularButton types renders negative buttons 1`] = `
-<div>
-  <label
-    class="np-circular-btn primary negative"
-  >
-    <input
-      aria-label="Add money"
-      class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-negative btn-priority-1"
-      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
-      type="button"
-    />
-    <span
-      class="tw-icon tw-icon-plus "
-      data-testid="plus-icon"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        focusable="false"
-        height="24"
-        role="none"
-        viewBox="0 0 24 24"
-        width="24"
-      >
-        <path
-          d="M22.286 11.143h-9.429V1.715h-1.714v9.428H1.714v1.715h9.429v9.428h1.714v-9.428h9.429v-1.715Z"
-        />
-      </svg>
-    </span>
-    <span
-      class="np-text-body-default-bold np-circular-btn__label"
-    >
-      Add money
-    </span>
-  </label>
-</div>
-`;
-
-exports[`CircularButton types renders positive buttons 1`] = `
-<div>
-  <label
-    class="np-circular-btn primary positive"
-  >
-    <input
-      aria-label="Add money"
-      class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-positive btn-priority-1"
-      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
-      type="button"
-    />
-    <span
-      class="tw-icon tw-icon-plus "
-      data-testid="plus-icon"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        focusable="false"
-        height="24"
-        role="none"
-        viewBox="0 0 24 24"
-        width="24"
-      >
-        <path
-          d="M22.286 11.143h-9.429V1.715h-1.714v9.428H1.714v1.715h9.429v9.428h1.714v-9.428h9.429v-1.715Z"
-        />
-      </svg>
-    </span>
-    <span
-      class="np-text-body-default-bold np-circular-btn__label"
-    >
-      Add money
-    </span>
-  </label>
-</div>
-`;