uikit-react-public 0.11.24 → 0.14.21

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

@@ -0,0 +1,210 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Table > Snapshot: basic table 1`] = `
+<table
+  class="css-3bowfr ucl-uikit-table"
+  data-testid="ucl-uikit-table"
+>
+  <thead
+    class="css-3fy35g ucl-uikit-table__head"
+    data-testid="ucl-uikit-table__head"
+  >
+    <tr
+      class="css-7kbd2r"
+    >
+      <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"
+        >
+          Header Cell 1
+          <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>
+      <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"
+        >
+          Header Cell 2
+          <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>
+      <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"
+        >
+          Header Cell 3
+          <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>
+  <tbody
+    data-testid="ucl-uikit-table__body"
+  >
+    <tr
+      class="css-jetl3c ucl-uikit-table__row"
+      data-testid="ucl-uikit-table__row"
+    >
+      <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"
+        >
+          Test Cell 1
+        </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"
+        >
+          Test Cell 2
+        </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"
+        >
+          Test Cell 3
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;

package/lib/components/Table/index.ts

@@ -1,2 +1,9 @@
 export { default } from './Table';
-export type { TableProps } from './Table';
+export type { TableProps, ColumnVariant } from './Table.types';
+export type {
+  TableHeadProps,
+  TableHeadCellProps,
+  TableBodyProps,
+  TableRowProps,
+  TableCellProps,
+} from './subcomponents';

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

@@ -0,0 +1,18 @@
+export interface TableBodyProps
+  extends React.HTMLAttributes<HTMLTableSectionElement> {}
+
+const NAME = 'ucl-uikit-table__body';
+
+const Body = ({ className, children, ...props }: TableBodyProps) => {
+  return (
+    <tbody
+      className={className}
+      data-testid={NAME}
+      {...props}
+    >
+      {children}
+    </tbody>
+  );
+};
+
+export default Body;

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

@@ -0,0 +1,151 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useArgs } from '@storybook/preview-api';
+import { css } from '@emotion/css';
+import Row from '../Row';
+import Cell from './Cell';
+import Badge from '../../../Badge/Badge';
+import Icon from '../../../Icon/Icon';
+import Link from '../../../Link/Link';
+
+const widthStyle = css`
+  width: 200px; // To demonstrate text alignment
+`;
+
+const meta = {
+  title: 'Components/Work in progress/Table/Cell',
+  component: Cell,
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    className: widthStyle,
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <table style={{ borderCollapse: 'collapse' }}>
+        <tbody>
+          <Row>
+            <Story />
+          </Row>
+        </tbody>
+      </table>
+    ),
+  ],
+} satisfies Meta<typeof Cell>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: 'Default (text)',
+  args: {
+    children: 'Default (text)',
+  },
+};
+
+export const Emphasised: Story = {
+  name: 'Text emphasised',
+  args: {
+    children: <strong>Text emphasised</strong>,
+  },
+};
+
+export const Numeric: Story = {
+  name: 'Numeric',
+  args: {
+    variant: 'numeric',
+    children: '12345',
+  },
+};
+
+export const NumericEmphasised: Story = {
+  name: 'Numeric emphasised',
+  args: {
+    variant: 'numeric',
+    children: <strong>12345</strong>,
+  },
+};
+
+export const CheckboxStory: Story = {
+  name: 'Checkbox',
+  args: {
+    variant: 'checkbox',
+    checked: false,
+  },
+  render: () => {
+    const [args, updateArgs] = useArgs();
+    const handleOnCheck = (checked: boolean) => {
+      updateArgs({ checked });
+    };
+    return (
+      <>
+        <Cell
+          {...args}
+          onCheck={handleOnCheck}
+        />
+      </>
+    );
+  },
+};
+
+export const BadgeStory: Story = {
+  name: 'Badge',
+  args: {
+    children: <Badge>Badge</Badge>,
+  },
+};
+
+export const MultipleBadges: Story = {
+  name: 'Multiple badges',
+  args: {
+    children: (
+      <>
+        <Badge>Badge 1</Badge>
+        <Badge>Badge 2</Badge>
+      </>
+    ),
+  },
+};
+
+export const IconStory: Story = {
+  name: 'Icon',
+  args: {
+    icon: <Icon.File />,
+  },
+};
+
+export const IconAndText: Story = {
+  name: 'Icon & text',
+  args: {
+    icon: <Icon.Compass size={20} />,
+    children: 'Icon & text',
+  },
+};
+
+export const ButtonStory: Story = {
+  name: 'Button',
+  args: {
+    variant: 'button',
+    children: 'Button',
+    onButtonClick: (event: React.UIEvent) => {
+      console.log('UIKit-React Cell button clicked:', event);
+      alert('Button clicked!');
+    },
+  },
+};
+
+export const LinkStory: Story = {
+  name: 'Link',
+  args: {
+    children: (
+      <Link
+        href='https://www.ucl.ac.uk'
+        target='_blank'
+        rel='noopener noreferrer'
+      >
+        Visit us
+      </Link>
+    ),
+  },
+};

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

@@ -0,0 +1,72 @@
+import { css, cx } from '@emotion/css';
+import CellContent from './CellContent';
+import { useTheme } from '../../../../theme';
+import type { ColumnVariant } from '../../Table.types';
+
+export interface TableCellProps
+  extends React.HTMLAttributes<HTMLTableCellElement> {
+  variant?: ColumnVariant;
+  icon?: React.ReactNode;
+  checked?: boolean;
+  onCheck?: (
+    checked: boolean,
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => void;
+  onButtonClick?: (event: React.UIEvent) => void;
+  className?: string;
+  testId?: string;
+}
+
+const NAME = 'ucl-uikit-table__cell';
+
+const Cell = ({
+  variant = 'default',
+  icon,
+  onCheck,
+  checked,
+  onButtonClick = () => {},
+  testId = NAME,
+  className,
+  children,
+  ...props
+}: TableCellProps) => {
+  const [theme] = useTheme();
+
+  const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (variant === 'checkbox' && onCheck) onCheck(event.target.checked, event);
+  };
+
+  const handleButtonClick = (event: React.UIEvent) => {
+    if (variant === 'button' && onButtonClick) onButtonClick(event);
+  };
+
+  const baseStyle = css`
+    box-sizing: border-box;
+    padding: 0 ${theme.padding.p16};
+    height: 40px;
+    font-family: ${theme.font.family.primary};
+    font-size: ${theme.font.size.f14};
+  `;
+
+  const style = cx(baseStyle, className, NAME);
+
+  return (
+    <td
+      className={style}
+      data-testid={testId}
+      {...props}
+    >
+      <CellContent
+        variant={variant}
+        icon={icon}
+        checked={checked}
+        handleCheckboxChange={handleCheckboxChange}
+        handleButtonClick={handleButtonClick}
+      >
+        {children}
+      </CellContent>
+    </td>
+  );
+};
+
+export default Cell;

package/lib/components/Table/subcomponents/Cell/CellContent.tsx

@@ -0,0 +1,91 @@
+import { css, cx } from '@emotion/css';
+import Checkbox from '../../../Checkbox/Checkbox';
+import Button from '../../../Button/Button';
+import { useTheme } from '../../../../theme';
+import type { ColumnVariant } from '../../Table.types';
+
+interface CellContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant: ColumnVariant;
+  icon?: React.ReactNode;
+  checked?: boolean;
+  handleCheckboxChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  handleButtonClick: (event: React.UIEvent) => void;
+}
+
+const NAME = 'ucl-uikit-table__cell-content';
+
+const CellContent = ({
+  variant,
+  icon,
+  checked,
+  handleCheckboxChange,
+  handleButtonClick,
+  children,
+}: CellContentProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: ${theme.padding.p8};
+    width: 100%;
+    height: 100%;
+  `;
+
+  const variantStyles = {
+    default: css`
+      font-weight: ${theme.font.weight.regular};
+    `,
+    numeric: css`
+      justify-content: flex-end;
+      font-weight: ${theme.font.weight.regular};
+    `,
+    checkbox: css`
+      justify-content: flex-end;
+      padding-right: ${theme.padding.p16};
+    `,
+  };
+
+  const buttonStyle = css`
+    padding: ${theme.padding.p2};
+    height: auto;
+  `;
+
+  const style = cx(
+    baseStyle,
+    {
+      [variantStyles.default]: variant === 'default',
+      [variantStyles.numeric]: variant === 'numeric',
+      [variantStyles.checkbox]: variant === 'checkbox',
+    },
+    NAME
+  );
+
+  return (
+    <div
+      className={style}
+      data-testid={NAME}
+    >
+      {icon}
+      {variant === 'checkbox' && (
+        <Checkbox
+          checked={checked}
+          onChange={handleCheckboxChange}
+        />
+      )}
+      {variant === 'button' && (
+        <Button
+          variant='tertiary'
+          onClick={handleButtonClick}
+          className={buttonStyle}
+        >
+          {children}
+        </Button>
+      )}
+      {variant !== 'checkbox' && variant !== 'button' && children}
+    </div>
+  );
+};
+
+export default CellContent;

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

@@ -0,0 +1,115 @@
+import { describe, expect, test, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import Cell from '../Cell';
+import Icon from '../../../../Icon/Icon';
+import { ThemeContextProvider } from '../../../../../theme/useTheme';
+
+describe('Cell', () => {
+  // Snapshot tests
+
+  test('Snapshot: default', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <table>
+          <tbody>
+            <tr>
+              <Cell>Default cell</Cell>
+            </tr>
+          </tbody>
+        </table>
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('Snapshot: variants', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <table>
+          <tbody>
+            <tr>
+              <Cell variant='numeric'>123</Cell>
+              <Cell variant='checkbox'>Checkbox</Cell>
+              <Cell icon={<Icon.Edit />}></Cell>
+              <Cell variant='button'>Button</Cell>
+            </tr>
+          </tbody>
+        </table>
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  // Unit tests
+
+  test('Text is visible via children prop', () => {
+    render(
+      <ThemeContextProvider>
+        <table>
+          <tbody>
+            <tr>
+              <Cell>Visible text</Cell>
+            </tr>
+          </tbody>
+        </table>
+      </ThemeContextProvider>
+    );
+    expect(screen.getByText('Visible text')).toBeInTheDocument();
+    expect(screen.getByText('Visible text')).toBeVisible();
+  });
+
+  test('Can be found via default testId', () => {
+    const defaultTestId = 'ucl-uikit-table__cell';
+    render(
+      <ThemeContextProvider>
+        <table>
+          <tbody>
+            <tr>
+              <Cell>Visible text</Cell>
+            </tr>
+          </tbody>
+        </table>
+      </ThemeContextProvider>
+    );
+    expect(screen.getByTestId(defaultTestId)).toBeInTheDocument();
+  });
+
+  test('Can be found via custom testId', () => {
+    const customTestId = 'custom-cell-test-id';
+    render(
+      <ThemeContextProvider>
+        <table>
+          <tbody>
+            <tr>
+              <Cell testId={customTestId}>Visible text</Cell>
+            </tr>
+          </tbody>
+        </table>
+      </ThemeContextProvider>
+    );
+    expect(screen.getByTestId(customTestId)).toBeInTheDocument();
+  });
+
+  test('onButtonClick prop is called correctly', () => {
+    const handleButtonClick = vi.fn();
+    render(
+      <ThemeContextProvider>
+        <table>
+          <tbody>
+            <tr>
+              <Cell
+                variant='button'
+                onButtonClick={handleButtonClick}
+              >
+                Button Cell
+              </Cell>
+            </tr>
+          </tbody>
+        </table>
+      </ThemeContextProvider>
+    );
+    const buttonCell = screen.getByText('Button Cell');
+    buttonCell.click();
+    expect(handleButtonClick).toHaveBeenCalled();
+  });
+});