uikit-react-public 0.11.20 → 0.14.21

package/lib/components/Table/subcomponents/Cell/__tests__/__snapshots__/Cell.test.tsx.snap

@@ -0,0 +1,107 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Cell > Snapshot: default 1`] = `
+<table>
+  <tbody>
+    <tr>
+      <td
+        class="css-u1gowl ucl-uikit-table__cell"
+        data-testid="ucl-uikit-table__cell"
+      >
+        <div
+          class="ucl-uikit-table__cell-content css-1ao6jhw"
+          data-testid="ucl-uikit-table__cell-content"
+        >
+          Default cell
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;
+
+exports[`Cell > Snapshot: variants 1`] = `
+<table>
+  <tbody>
+    <tr>
+      <td
+        class="css-u1gowl ucl-uikit-table__cell"
+        data-testid="ucl-uikit-table__cell"
+      >
+        <div
+          class="ucl-uikit-table__cell-content css-tlcu3i"
+          data-testid="ucl-uikit-table__cell-content"
+        >
+          123
+        </div>
+      </td>
+      <td
+        class="css-u1gowl ucl-uikit-table__cell"
+        data-testid="ucl-uikit-table__cell"
+      >
+        <div
+          class="ucl-uikit-table__cell-content css-1kkenvm"
+          data-testid="ucl-uikit-table__cell-content"
+        >
+          <span
+            class="ucl-uikit-checkbox css-cg31xm"
+          >
+            <input
+              class="css-nzy7im"
+              data-testid="ucl-uikit-checkbox"
+              type="checkbox"
+            />
+          </span>
+        </div>
+      </td>
+      <td
+        class="css-u1gowl ucl-uikit-table__cell"
+        data-testid="ucl-uikit-table__cell"
+      >
+        <div
+          class="ucl-uikit-table__cell-content css-1ao6jhw"
+          data-testid="ucl-uikit-table__cell-content"
+        >
+          <svg
+            class="ucl-uikit-icon css-148hpxb"
+            data-testid="ucl-uikit-icon"
+            fill="none"
+            height="24"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
+            />
+            <path
+              d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"
+            />
+          </svg>
+        </div>
+      </td>
+      <td
+        class="css-u1gowl ucl-uikit-table__cell"
+        data-testid="ucl-uikit-table__cell"
+      >
+        <div
+          class="css-1fubti ucl-uikit-table__cell-content"
+          data-testid="ucl-uikit-table__cell-content"
+        >
+          <button
+            aria-disabled="false"
+            class="ucl-uikit-button css-3pq14u"
+            data-testid="ucl-uikit-button"
+          >
+            Button
+          </button>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;

package/lib/components/Table/subcomponents/Head.tsx

@@ -0,0 +1,34 @@
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../../../theme';
+
+export interface TableHeadProps
+  extends React.HTMLAttributes<HTMLTableSectionElement> {}
+
+const NAME = 'ucl-uikit-table__head';
+
+const Head = ({ className, children, ...props }: TableHeadProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    height: 40px;
+    background-color: #f8f8f8; // TODO: Add a design token
+  `;
+
+  const rowStyle = css`
+    border-bottom: 1px solid ${theme.color.neutral.grey20};
+  `;
+
+  const style = cx(baseStyle, className, NAME);
+
+  return (
+    <thead
+      className={style}
+      data-testid={NAME}
+      {...props}
+    >
+      <tr className={rowStyle}>{children}</tr>
+    </thead>
+  );
+};
+
+export default Head;

package/lib/components/Table/subcomponents/HeadCell/HeadCell.stories.tsx

@@ -0,0 +1,85 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import HeadCell from './HeadCell';
+import Head from '../Head';
+import { SortOrder } from '../../Table.types';
+
+const meta = {
+  title: 'Components/Work in progress/Table/HeadCell',
+  component: HeadCell,
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    variant: 'default',
+    accessor: 'name',
+    sort: null,
+    showSortIcon: true,
+    children: 'Head Cell',
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <table style={{ borderCollapse: 'collapse' }}>
+        <Head>
+          <Story />
+        </Head>
+      </table>
+    ),
+  ],
+} satisfies Meta<typeof HeadCell>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => {
+    const [sort, setSort] = useState<SortOrder>(null);
+    const handleSortChange = (
+      accessor: string,
+      newSort: SortOrder,
+      event: React.UIEvent
+    ) => {
+      setSort(newSort);
+      console.log('Sort changed:', accessor, newSort, event);
+    };
+    return (
+      <HeadCell
+        {...args}
+        sort={sort}
+        onSortChange={handleSortChange}
+      />
+    );
+  },
+};
+
+export const NoSorting: Story = {
+  name: 'No sorting icon',
+  args: {
+    showSortIcon: false,
+  },
+};
+
+export const Checkbox: Story = {
+  name: 'Checkbox variant',
+  args: {
+    variant: 'checkbox',
+  },
+  render: (args) => {
+    const [checked, setChecked] = useState(false);
+    const handleCheck = (
+      checked: boolean,
+      event: React.ChangeEvent<HTMLInputElement>
+    ) => {
+      setChecked(checked);
+      console.log('Checkbox changed:', checked, event);
+    };
+    return (
+      <HeadCell
+        {...args}
+        checked={checked}
+        onCheck={handleCheck}
+      />
+    );
+  },
+};

package/lib/components/Table/subcomponents/HeadCell/HeadCell.tsx

@@ -0,0 +1,99 @@
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../../../../theme';
+import HeadCellContent from './HeadCellContent';
+import type { ColumnVariant, SortOrder } from '../../Table.types';
+
+export interface TableHeadCellProps
+  extends React.HTMLAttributes<HTMLTableCellElement> {
+  variant?: ColumnVariant;
+  accessor?: string;
+  sort?: SortOrder;
+  onSortChange?: (
+    accessor: string,
+    sort: SortOrder,
+    event: React.UIEvent
+  ) => void;
+  showSortIcon?: boolean;
+  checked?: boolean;
+  onCheck?: (
+    checked: boolean,
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => void;
+  testId?: string;
+}
+
+const NAME = 'ucl-uikit-table__head-cell';
+
+const HeadCell = ({
+  variant = 'default',
+  accessor,
+  sort = null,
+  onSortChange,
+  showSortIcon = true,
+  checked = false,
+  onCheck,
+  testId = NAME,
+  className,
+  children,
+  ...props
+}: TableHeadCellProps) => {
+  const [theme] = useTheme();
+
+  const isSortable = variant !== 'checkbox' && onSortChange && accessor;
+
+  const handleClick = (event: React.MouseEvent) => {
+    if (onSortChange && !accessor)
+      console.warn(`${NAME}: onSortChange requires an accessor to be defined.`);
+    else if (isSortable) {
+      // Rotate sorting order on click
+      if (sort === 'asc') {
+        onSortChange(accessor, 'desc', event);
+      } else if (sort === 'desc') {
+        onSortChange(accessor, null, event);
+      } else {
+        onSortChange(accessor, 'asc', event);
+      }
+    }
+  };
+
+  const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (variant === 'checkbox' && onCheck) onCheck(event.target.checked, event);
+  };
+
+  const baseStyle = css`
+    padding: ${theme.padding.p8} ${theme.padding.p16};
+    color: ${theme.color.text.secondary};
+    font-family: ${theme.font.family.primary};
+    font-weight: 400;
+    text-align: left;
+    cursor: pointer;
+    user-select: none;
+  `;
+
+  const style = cx(baseStyle, className, NAME);
+
+  return (
+    <th
+      onClick={handleClick}
+      scope='col'
+      className={style}
+      data-testid={testId}
+      data-accessor={accessor}
+      data-sort={sort}
+      role={isSortable ? 'button' : undefined}
+      {...props}
+    >
+      <HeadCellContent
+        variant={variant}
+        sort={sort}
+        showSortIcon={showSortIcon}
+        checked={checked}
+        onCheckboxChange={handleCheckboxChange}
+      >
+        {children}
+      </HeadCellContent>
+    </th>
+  );
+};
+
+export default HeadCell;

package/lib/components/Table/subcomponents/HeadCell/HeadCellContent.tsx

@@ -0,0 +1,61 @@
+import { css, cx } from '@emotion/css';
+import SortIcon from '../SortIcon';
+import Checkbox from '../../../Checkbox/Checkbox';
+import type { ColumnVariant, SortOrder } from '../../Table.types';
+
+interface HeadCellContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant: ColumnVariant;
+  sort: SortOrder;
+  showSortIcon: boolean;
+  checked: boolean;
+  onCheckboxChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+const NAME = 'ucl-uikit-table__head-cell-content';
+
+const HeadCellContent = ({
+  variant,
+  sort,
+  showSortIcon,
+  checked,
+  onCheckboxChange,
+  children,
+}: HeadCellContentProps) => {
+  const baseStyle = css`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  `;
+
+  const checkboxVariantStyle = css`
+    justify-content: flex-end;
+  `;
+
+  const style = cx(
+    baseStyle,
+    variant === 'checkbox' && checkboxVariantStyle,
+    NAME
+  );
+
+  return (
+    <div
+      className={style}
+      data-testid={NAME}
+    >
+      {variant === 'default' && (
+        <>
+          {children}
+          {showSortIcon && <SortIcon sortOrder={sort} />}
+        </>
+      )}
+      {variant === 'checkbox' && (
+        <Checkbox
+          checked={checked}
+          onChange={onCheckboxChange}
+        />
+      )}
+    </div>
+  );
+};
+
+export default HeadCellContent;

package/lib/components/Table/subcomponents/HeadCell/__tests__/HeadCell.test.tsx

@@ -0,0 +1,137 @@
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import HeadCell from '../HeadCell';
+import { ThemeContextProvider } from '../../../../../theme/useTheme';
+
+describe('HeadCell', () => {
+  // Snapshot tests
+
+  test('Snapshot: default', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <table>
+          <thead>
+            <tr>
+              <HeadCell>Default header cell</HeadCell>
+            </tr>
+          </thead>
+        </table>
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('no sorting icon', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <table>
+          <thead>
+            <tr>
+              <HeadCell showSortIcon={false}>No sorting icon</HeadCell>
+            </tr>
+          </thead>
+        </table>
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('Snapshot: checkbox variant', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <table>
+          <thead>
+            <tr>
+              <HeadCell variant='checkbox'>Checkbox header cell</HeadCell>
+            </tr>
+          </thead>
+        </table>
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  // Unit tests
+
+  test('Text is visible via children prop', () => {
+    render(
+      <ThemeContextProvider>
+        <table>
+          <thead>
+            <tr>
+              <HeadCell>Visible header text</HeadCell>
+            </tr>
+          </thead>
+        </table>
+      </ThemeContextProvider>
+    );
+    expect(screen.getByText('Visible header text')).toBeInTheDocument();
+    expect(screen.getByText('Visible header text')).toBeVisible();
+  });
+
+  test('Checkbox variant has a checkbox', () => {
+    render(
+      <ThemeContextProvider>
+        <table>
+          <thead>
+            <tr>
+              <HeadCell variant='checkbox'>Checkbox header cell</HeadCell>
+            </tr>
+          </thead>
+        </table>
+      </ThemeContextProvider>
+    );
+    expect(screen.getByRole('checkbox')).toBeInTheDocument();
+  });
+
+  test('Can be found via default testId', () => {
+    const defaultTestId = 'ucl-uikit-table__head-cell';
+    render(
+      <ThemeContextProvider>
+        <table>
+          <thead>
+            <tr>
+              <HeadCell>Test Header Cell</HeadCell>
+            </tr>
+          </thead>
+        </table>
+      </ThemeContextProvider>
+    );
+    expect(screen.getByTestId(defaultTestId)).toBeInTheDocument();
+  });
+
+  test('Can be found via custom testId', () => {
+    const customTestId = 'custom-header-cell-test-id';
+    render(
+      <ThemeContextProvider>
+        <table>
+          <thead>
+            <tr>
+              <HeadCell testId={customTestId}>Test Header Cell</HeadCell>
+            </tr>
+          </thead>
+        </table>
+      </ThemeContextProvider>
+    );
+    expect(screen.getByTestId(customTestId)).toBeInTheDocument();
+  });
+
+  test('accessor prop is data-accessor attribute', () => {
+    const accessor = 'test-accessor';
+    render(
+      <ThemeContextProvider>
+        <table>
+          <thead>
+            <tr>
+              <HeadCell accessor={accessor}>Header with accessor</HeadCell>
+            </tr>
+          </thead>
+        </table>
+      </ThemeContextProvider>
+    );
+    expect(screen.getByTestId('ucl-uikit-table__head-cell')).toHaveAttribute(
+      'data-accessor',
+      accessor
+    );
+  });
+});

package/lib/components/Table/subcomponents/HeadCell/__tests__/__snapshots__/HeadCell.test.tsx.snap

@@ -0,0 +1,110 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`HeadCell > Snapshot: checkbox variant 1`] = `
+<table>
+  <thead>
+    <tr>
+      <th
+        class="css-1g8x9da ucl-uikit-table__head-cell"
+        data-testid="ucl-uikit-table__head-cell"
+        scope="col"
+      >
+        <div
+          class="ucl-uikit-table__head-cell-content css-18gk4sb"
+          data-testid="ucl-uikit-table__head-cell-content"
+        >
+          <span
+            class="ucl-uikit-checkbox css-cg31xm"
+          >
+            <input
+              class="css-nzy7im"
+              data-testid="ucl-uikit-checkbox"
+              type="checkbox"
+            />
+          </span>
+        </div>
+      </th>
+    </tr>
+  </thead>
+</table>
+`;
+
+exports[`HeadCell > Snapshot: default 1`] = `
+<table>
+  <thead>
+    <tr>
+      <th
+        class="css-1g8x9da ucl-uikit-table__head-cell"
+        data-testid="ucl-uikit-table__head-cell"
+        scope="col"
+      >
+        <div
+          class="css-13bwe7d ucl-uikit-table__head-cell-content"
+          data-testid="ucl-uikit-table__head-cell-content"
+        >
+          Default header cell
+          <svg
+            fill="none"
+            height="16"
+            viewBox="0 0 48 48"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g>
+              <path
+                d="M8 28L15 35L22 28"
+                stroke="#CCCCCC"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="4"
+              />
+              <path
+                d="M15 35V10"
+                stroke="#CCCCCC"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="4"
+              />
+              <path
+                d="M43 19L36 12L29 19"
+                stroke="#CCCCCC"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="4"
+              />
+              <path
+                d="M36 12V37"
+                stroke="#CCCCCC"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="4"
+              />
+            </g>
+          </svg>
+        </div>
+      </th>
+    </tr>
+  </thead>
+</table>
+`;
+
+exports[`HeadCell > no sorting icon 1`] = `
+<table>
+  <thead>
+    <tr>
+      <th
+        class="css-1g8x9da ucl-uikit-table__head-cell"
+        data-testid="ucl-uikit-table__head-cell"
+        scope="col"
+      >
+        <div
+          class="css-13bwe7d ucl-uikit-table__head-cell-content"
+          data-testid="ucl-uikit-table__head-cell-content"
+        >
+          No sorting icon
+        </div>
+      </th>
+    </tr>
+  </thead>
+</table>
+`;

package/lib/components/Table/subcomponents/Row.tsx

@@ -0,0 +1,49 @@
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../../../theme';
+
+export interface TableRowProps
+  extends React.HTMLAttributes<HTMLTableRowElement> {
+  selected?: boolean;
+}
+
+const NAME = 'ucl-uikit-table__row';
+
+const Row = ({
+  selected = false,
+  className,
+  children,
+  ...props
+}: TableRowProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    height: 40px;
+    border-bottom: 1px solid ${theme.color.neutral.grey20};
+
+    &:hover {
+      background-color: ${theme.color.neutral.grey5};
+    }
+  `;
+
+  const highlightedStyle = css`
+    background-color: ${theme.color.interaction.blue5};
+
+    &:hover {
+      background-color: ${theme.color.interaction.blue5};
+    }
+  `;
+
+  const style = cx(baseStyle, selected && highlightedStyle, className, NAME);
+
+  return (
+    <tr
+      className={style}
+      data-testid={NAME}
+      {...props}
+    >
+      {children}
+    </tr>
+  );
+};
+
+export default Row;