uikit-react-public 0.27.2 → 0.29.1

package/lib/components/Chip/__tests__/Chip.test.tsx

@@ -0,0 +1,287 @@
+import { createRef } from 'react';
+import { describe, expect, test, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+import Chip from '../Chip';
+
+describe('Chip', () => {
+  test('snapshot: no props', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Chip label='Student' />
+      </ThemeContextProvider>
+    );
+
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: checked prop', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Chip
+          label='Student'
+          checked
+          onChange={() => {}}
+        />
+      </ThemeContextProvider>
+    );
+
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: disabled prop', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Chip
+          label='Student'
+          disabled
+        />
+      </ThemeContextProvider>
+    );
+
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: disabled and checked props', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Chip
+          label='Student'
+          checked
+          disabled
+        />
+      </ThemeContextProvider>
+    );
+
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: testId prop', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Chip
+          label='Student'
+          testId='test123'
+        />
+      </ThemeContextProvider>
+    );
+
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('checked prop: controlled state does not toggle without rerender', async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+
+    render(
+      <ThemeContextProvider>
+        <Chip
+          label='Student'
+          checked
+          onChange={handleChange}
+        />
+      </ThemeContextProvider>
+    );
+
+    const checkbox = screen.getByRole('checkbox') as HTMLInputElement;
+    expect(checkbox.checked).toBe(true);
+
+    await user.click(checkbox);
+    expect(handleChange).toHaveBeenCalledTimes(1);
+    expect(checkbox.checked).toBe(true);
+  });
+
+  test('defaultChecked prop: initializes as checked in uncontrolled mode', () => {
+    render(
+      <ThemeContextProvider>
+        <Chip
+          label='Student'
+          defaultChecked
+        />
+      </ThemeContextProvider>
+    );
+
+    const checkbox = screen.getByRole('checkbox') as HTMLInputElement;
+    expect(checkbox.checked).toBe(true);
+  });
+
+  test('test ID: default', () => {
+    render(
+      <ThemeContextProvider>
+        <Chip label='Student' />
+      </ThemeContextProvider>
+    );
+
+    const chip = screen.getByTestId('ucl-uikit-chip');
+    expect(chip).toBeDefined();
+  });
+
+  test('test ID: custom', () => {
+    render(
+      <ThemeContextProvider>
+        <Chip
+          label='Student'
+          testId='custom-test-id'
+        />
+      </ThemeContextProvider>
+    );
+
+    const chip = screen.getByTestId('custom-test-id');
+    expect(chip).toBeDefined();
+  });
+
+  test('click: uncontrolled via checkbox', async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+
+    render(
+      <ThemeContextProvider>
+        <Chip
+          label='Student'
+          onChange={handleChange}
+        />
+      </ThemeContextProvider>
+    );
+
+    const checkbox = screen.getByRole('checkbox') as HTMLInputElement;
+    expect(checkbox.checked).toBe(false);
+
+    await user.click(checkbox);
+    expect(checkbox.checked).toBe(true);
+    expect(handleChange).toHaveBeenCalledTimes(1);
+  });
+
+  test('click: label toggles checkbox', async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+
+    render(
+      <ThemeContextProvider>
+        <Chip
+          label='Student'
+          onChange={handleChange}
+        />
+      </ThemeContextProvider>
+    );
+
+    const checkbox = screen.getByRole('checkbox') as HTMLInputElement;
+    const label = screen.getByText('Student').closest('label');
+    expect(checkbox.checked).toBe(false);
+    expect(label).not.toBeNull();
+
+    await user.click(label!);
+    expect(checkbox.checked).toBe(true);
+    expect(handleChange).toHaveBeenCalledTimes(1);
+  });
+
+  test('click: disabled', async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+
+    render(
+      <ThemeContextProvider>
+        <Chip
+          label='Student'
+          disabled
+          onChange={handleChange}
+        />
+      </ThemeContextProvider>
+    );
+
+    const checkbox = screen.getByRole('checkbox') as HTMLInputElement;
+    const label = screen.getByText('Student').closest('label');
+    expect(checkbox.checked).toBe(false);
+    expect(label).not.toBeNull();
+
+    await user.click(label!);
+    expect(checkbox.checked).toBe(false);
+    expect(handleChange).not.toHaveBeenCalled();
+  });
+
+  test('click: disabled and checked remains checked', async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+
+    render(
+      <ThemeContextProvider>
+        <Chip
+          label='Student'
+          checked
+          disabled
+          onChange={handleChange}
+        />
+      </ThemeContextProvider>
+    );
+
+    const checkbox = screen.getByRole('checkbox') as HTMLInputElement;
+    const label = screen.getByText('Student').closest('label');
+    expect(checkbox.checked).toBe(true);
+    expect(label).not.toBeNull();
+
+    await user.click(label!);
+    expect(checkbox.checked).toBe(true);
+    expect(handleChange).not.toHaveBeenCalled();
+  });
+
+  test('uses BaseCheckbox', () => {
+    render(
+      <ThemeContextProvider>
+        <Chip label='Student' />
+      </ThemeContextProvider>
+    );
+
+    const root = screen.getByTestId('ucl-uikit-chip__root');
+
+    expect(root).toHaveClass('ucl-uikit-base-checkbox');
+  });
+
+  test('ariaLabel prop is applied to the input as aria-label', () => {
+    render(
+      <ThemeContextProvider>
+        <Chip
+          label='Student'
+          ariaLabel='Select student'
+        />
+      </ThemeContextProvider>
+    );
+
+    expect(screen.getByRole('checkbox')).toHaveAttribute(
+      'aria-label',
+      'Select student'
+    );
+  });
+
+  test('aria-label passed via spread props overrides ariaLabel', () => {
+    render(
+      <ThemeContextProvider>
+        <Chip
+          label='Student'
+          ariaLabel='Default label'
+          aria-label='Override label'
+        />
+      </ThemeContextProvider>
+    );
+
+    expect(screen.getByRole('checkbox')).toHaveAttribute(
+      'aria-label',
+      'Override label'
+    );
+  });
+
+  test('ref is forwarded to the underlying input element', () => {
+    const ref = createRef<HTMLInputElement>();
+
+    render(
+      <ThemeContextProvider>
+        <Chip
+          label='Student'
+          ref={ref}
+        />
+      </ThemeContextProvider>
+    );
+
+    expect(ref.current).toBeInstanceOf(HTMLInputElement);
+    expect(ref.current).toBe(screen.getByRole('checkbox'));
+  });
+});

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

@@ -0,0 +1,255 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Chip > snapshot: checked prop 1`] = `
+<label
+  class="ucl-uikit-chip css-1j50qe4"
+>
+  <span
+    class="ucl-uikit-base-checkbox css-1mmc74g"
+    data-testid="ucl-uikit-chip__root"
+  >
+    <input
+      checked=""
+      class="css-1bjd9qx"
+      data-testid="ucl-uikit-chip"
+      type="checkbox"
+    />
+    <span
+      aria-hidden="true"
+      class="css-g3adpt"
+    >
+      <span
+        class="css-vv99xy"
+      >
+        <svg
+          class="ucl-uikit-icon css-1fx6elc"
+          data-testid="ucl-uikit-icon"
+          fill="none"
+          focusable="false"
+          height="16"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M20 6 9 17l-5-5"
+          />
+        </svg>
+        <span
+          class="ucl-uikit-text css-3kj57w"
+          data-testid="ucl-uikit-text"
+        >
+          Student
+        </span>
+      </span>
+    </span>
+  </span>
+</label>
+`;
+
+exports[`Chip > snapshot: disabled and checked props 1`] = `
+<label
+  class="ucl-uikit-chip css-1j50qe4"
+>
+  <span
+    class="ucl-uikit-base-checkbox css-lp1eko"
+    data-testid="ucl-uikit-chip__root"
+  >
+    <input
+      checked=""
+      class="css-1bjd9qx"
+      data-testid="ucl-uikit-chip"
+      disabled=""
+      type="checkbox"
+    />
+    <span
+      aria-hidden="true"
+      class="css-g3adpt"
+    >
+      <span
+        class="css-vv99xy"
+      >
+        <svg
+          class="ucl-uikit-icon css-1fx6elc"
+          data-testid="ucl-uikit-icon"
+          fill="none"
+          focusable="false"
+          height="16"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M20 6 9 17l-5-5"
+          />
+        </svg>
+        <span
+          class="ucl-uikit-text css-3kj57w"
+          data-testid="ucl-uikit-text"
+        >
+          Student
+        </span>
+      </span>
+    </span>
+  </span>
+</label>
+`;
+
+exports[`Chip > snapshot: disabled prop 1`] = `
+<label
+  class="ucl-uikit-chip css-1j50qe4"
+>
+  <span
+    class="ucl-uikit-base-checkbox css-lp1eko"
+    data-testid="ucl-uikit-chip__root"
+  >
+    <input
+      class="css-1bjd9qx"
+      data-testid="ucl-uikit-chip"
+      disabled=""
+      type="checkbox"
+    />
+    <span
+      aria-hidden="true"
+      class="css-g3adpt"
+    >
+      <span
+        class="css-vv99xy"
+      >
+        <svg
+          class="ucl-uikit-icon css-10yks9o"
+          data-testid="ucl-uikit-icon"
+          fill="none"
+          focusable="false"
+          height="16"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M20 6 9 17l-5-5"
+          />
+        </svg>
+        <span
+          class="ucl-uikit-text css-10p3qy4"
+          data-testid="ucl-uikit-text"
+        >
+          Student
+        </span>
+      </span>
+    </span>
+  </span>
+</label>
+`;
+
+exports[`Chip > snapshot: no props 1`] = `
+<label
+  class="ucl-uikit-chip css-1j50qe4"
+>
+  <span
+    class="ucl-uikit-base-checkbox css-1mmc74g"
+    data-testid="ucl-uikit-chip__root"
+  >
+    <input
+      class="css-1bjd9qx"
+      data-testid="ucl-uikit-chip"
+      type="checkbox"
+    />
+    <span
+      aria-hidden="true"
+      class="css-g3adpt"
+    >
+      <span
+        class="css-vv99xy"
+      >
+        <svg
+          class="ucl-uikit-icon css-10yks9o"
+          data-testid="ucl-uikit-icon"
+          fill="none"
+          focusable="false"
+          height="16"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M20 6 9 17l-5-5"
+          />
+        </svg>
+        <span
+          class="ucl-uikit-text css-10p3qy4"
+          data-testid="ucl-uikit-text"
+        >
+          Student
+        </span>
+      </span>
+    </span>
+  </span>
+</label>
+`;
+
+exports[`Chip > snapshot: testId prop 1`] = `
+<label
+  class="ucl-uikit-chip css-1j50qe4"
+>
+  <span
+    class="ucl-uikit-base-checkbox css-1mmc74g"
+    data-testid="test123__root"
+  >
+    <input
+      class="css-1bjd9qx"
+      data-testid="test123"
+      type="checkbox"
+    />
+    <span
+      aria-hidden="true"
+      class="css-g3adpt"
+    >
+      <span
+        class="css-vv99xy"
+      >
+        <svg
+          class="ucl-uikit-icon css-10yks9o"
+          data-testid="ucl-uikit-icon"
+          fill="none"
+          focusable="false"
+          height="16"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M20 6 9 17l-5-5"
+          />
+        </svg>
+        <span
+          class="ucl-uikit-text css-10p3qy4"
+          data-testid="ucl-uikit-text"
+        >
+          Student
+        </span>
+      </span>
+    </span>
+  </span>
+</label>
+`;

package/lib/components/Chip/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Chip';
+export type { ChipProps } from './Chip';

package/lib/components/Link/BaseLink.tsx

@@ -1,7 +1,11 @@
 import React, {
+  Children,
+  cloneElement,
   ComponentPropsWithoutRef,
   ElementType,
   forwardRef,
+  isValidElement,
+  ReactElement,
   useCallback,
 } from 'react';
 import { css, cx } from '@emotion/css';
@@ -30,13 +34,16 @@ type BaseLinkOwnProps = {
   testId?: string;
   className?: string;
   children?: React.ReactNode;
+  /** @deprecated Prefer `asChild` with a routing link child. */
   to?: string;
+  asChild?: boolean;
 };
 
 type PolymorphicRef<C extends ElementType> =
   React.ComponentPropsWithRef<C>['ref'];
 
 export type BaseLinkProps<C extends ElementType = 'a'> = BaseLinkOwnProps & {
+  /** @deprecated Prefer `asChild` with a custom link child. */
   component?: C;
 } & Omit<
     ComponentPropsWithoutRef<C>,
@@ -58,6 +65,7 @@ const BaseLink = forwardRef(function BaseLinkInner(
     disabled = false,
     component,
     to,
+    asChild = false,
     ...props
   }: BaseLinkProps<ElementType>,
   ref: React.Ref<Element>
@@ -110,6 +118,31 @@ const BaseLink = forwardRef(function BaseLinkInner(
     className
   );
 
+  if (asChild) {
+    const child = Children.only(children) as ReactElement<
+      Record<string, unknown> & {
+        className?: string;
+        onClick?: React.MouseEventHandler;
+        tabIndex?: number;
+      }
+    >;
+
+    if (isValidElement(child)) {
+      return cloneElement(child, {
+        ...props,
+        ref,
+        className: cx(style, child.props.className),
+        'data-testid': testId,
+        'aria-disabled': disabled || undefined,
+        tabIndex: disabled ? -1 : (props.tabIndex ?? child.props.tabIndex),
+        ...(to ? { to } : {}),
+        onClick: disabled
+          ? disabledHandleClick
+          : (props.onClick ?? child.props.onClick),
+      });
+    }
+  }
+
   return (
     <Component
       ref={ref}
@@ -117,9 +150,14 @@ const BaseLink = forwardRef(function BaseLinkInner(
       data-testid={testId}
       aria-disabled={disabled || undefined}
       tabIndex={disabled ? -1 : props.tabIndex}
-      href={isAnchor ? (disabled ? undefined : (href ?? to)) : undefined}
       onClick={disabled ? disabledHandleClick : onClick}
-      {...(isAnchor ? {} : to ? { to } : href ? { href } : {})}
+      {...(isAnchor
+        ? { href: disabled ? undefined : (href ?? to) }
+        : to
+          ? { to }
+          : href
+            ? { href }
+            : {})}
       {...rest}
     >
       {children}

package/lib/components/Link/__tests__/link.test.tsx

@@ -1,4 +1,4 @@
-import { describe, expect, test } from 'vitest';
+import { describe, expect, test, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import Link from '../Link';
 import { ThemeContextProvider } from '../../../theme/useTheme';
@@ -57,4 +57,61 @@ describe('Link', () => {
     expect(link.textContent).toBe('linktext');
     expect(link.href).toBe('http://localhost:3000/testlink');
   });
+
+  test('renders a custom link child with asChild', () => {
+    const handleClick = vi.fn((event: React.MouseEvent) =>
+      event.preventDefault()
+    );
+
+    render(
+      <ThemeContextProvider>
+        <Link asChild>
+          <a
+            href='/custom'
+            onClick={handleClick}
+          >
+            Custom link
+          </a>
+        </Link>
+      </ThemeContextProvider>
+    );
+
+    const link = screen.getByRole('link', { name: 'Custom link' });
+    link.click();
+
+    expect(link).toHaveAttribute('href', '/custom');
+    expect(link).toHaveAttribute('data-testid', 'ucl-uikit-link');
+    expect(handleClick).toHaveBeenCalledOnce();
+  });
+
+  test('continues to support the deprecated component and to props', () => {
+    const CustomLink = ({
+      to,
+      children,
+      ...props
+    }: React.AnchorHTMLAttributes<HTMLAnchorElement> & { to?: string }) => (
+      <a
+        href={to}
+        {...props}
+      >
+        {children}
+      </a>
+    );
+
+    render(
+      <ThemeContextProvider>
+        <Link
+          component={CustomLink}
+          to='/legacy'
+        >
+          Legacy link
+        </Link>
+      </ThemeContextProvider>
+    );
+
+    expect(screen.getByRole('link', { name: 'Legacy link' })).toHaveAttribute(
+      'href',
+      '/legacy'
+    );
+  });
 });

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

@@ -54,7 +54,7 @@ exports[`Cell > Snapshot: variants 1`] = `
             />
             <span
               aria-hidden="true"
-              class="css-1quq9cp"
+              class="css-g3adpt"
             />
           </span>
         </div>

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

@@ -25,7 +25,7 @@ exports[`HeadCell > Snapshot: checkbox variant 1`] = `
             />
             <span
               aria-hidden="true"
-              class="css-1quq9cp"
+              class="css-g3adpt"
             />
           </span>
         </div>