uikit-react-public 0.27.2 → 0.28.0

package/lib/components/BaseCheckbox/BaseCheckbox.tsx

@@ -116,11 +116,7 @@ const BaseCheckbox = ({
     grid-area: 1 / 1;
     line-height: 0;
     pointer-events: none;
-
-    input:focus-visible + & {
-      outline: 2px solid currentColor;
-      outline-offset: 2px;
-    }
+    outline: none;
   `;
 
   const style = cx(NAME, rootStyle, className);

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

@@ -13,7 +13,7 @@ exports[`Checkbox > snapshot: checked prop 1`] = `
   />
   <span
     aria-hidden="true"
-    class="css-1quq9cp"
+    class="css-g3adpt"
   >
     <svg
       class="ucl-uikit-icon css-1nacdsu"
@@ -49,7 +49,7 @@ exports[`Checkbox > snapshot: indeterminate prop 1`] = `
   />
   <span
     aria-hidden="true"
-    class="css-1quq9cp"
+    class="css-g3adpt"
   >
     <svg
       class="ucl-uikit-icon css-2i3jn5"
@@ -87,7 +87,7 @@ exports[`Checkbox > snapshot: no props 1`] = `
   />
   <span
     aria-hidden="true"
-    class="css-1quq9cp"
+    class="css-g3adpt"
   />
 </span>
 `;
@@ -104,7 +104,7 @@ exports[`Checkbox > snapshot: testId prop 1`] = `
   />
   <span
     aria-hidden="true"
-    class="css-1quq9cp"
+    class="css-g3adpt"
   />
 </span>
 `;

package/lib/components/Chip/Chip.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useArgs } from '@storybook/preview-api';
+
+import Chip from './Chip';
+
+const meta = {
+  title: 'Components/Chip',
+  component: Chip,
+  argTypes: {
+    label: { control: { type: 'text' } },
+    checked: { control: { type: 'boolean' } },
+    disabled: { control: { type: 'boolean' } },
+  },
+} satisfies Meta<typeof Chip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: 'Student',
+    checked: false,
+    disabled: false,
+  },
+  render: (args) => {
+    const [{ checked }, updateArgs] = useArgs();
+    const onChange = () => updateArgs({ checked: !checked });
+
+    return (
+      <Chip
+        {...args}
+        checked={checked}
+        onChange={onChange}
+      />
+    );
+  },
+};

package/lib/components/Chip/Chip.tsx

@@ -0,0 +1,191 @@
+import { memo, forwardRef } from 'react';
+import { css, cx } from '@emotion/css';
+import useTheme from '../../theme/useTheme';
+import BaseCheckbox, { BaseCheckboxProps } from '../BaseCheckbox';
+import Icon from '../Icon';
+import Text from '../Text';
+import marginsStyle, { MarginProps } from '../common/marginsStyle';
+
+export const NAME = 'ucl-uikit-chip';
+
+export interface ChipBaseProps extends Omit<
+  BaseCheckboxProps,
+  | 'renderVisual'
+  | 'checkedComponent'
+  | 'uncheckedComponent'
+  | 'indeterminateComponent'
+  | 'indeterminate'
+> {
+  label: string;
+  ariaLabel?: string;
+}
+
+export type ChipProps = ChipBaseProps & MarginProps;
+
+export type Ref = HTMLInputElement;
+
+const Chip = forwardRef<Ref, ChipProps>(
+  (
+    {
+      label,
+      checked,
+      defaultChecked,
+      disabled,
+      testId = NAME,
+      ariaLabel,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const [theme] = useTheme();
+
+    const baseStyle = css`
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 32px;
+      width: fit-content;
+      padding: ${theme.margin.m4} ${theme.margin.m16};
+      border: ${theme.border.b1} solid ${theme.colour.icon.brand};
+      border-radius: 16px;
+      outline: none;
+      box-sizing: border-box;
+      color: ${theme.colour.icon.inverse};
+      transition:
+        background-color 0.15s ease-out,
+        border-color 0.15s ease-out;
+      cursor: pointer;
+      background-color: ${theme.colour.icon.inverse};
+      color: ${theme.colour.icon.brand};
+
+      &:hover {
+        background-color: ${theme.colour.fill.brandSubtleHover};
+      }
+
+      &:has(input:focus-visible) {
+        box-shadow: ${theme.boxShadow.focus};
+      }
+
+      &:has(input:checked) {
+        background-color: ${theme.colour.icon.brandSelectedOnBgFill};
+        border-color: ${theme.colour.icon.brandSelectedOnBgFill};
+        color: ${theme.colour.icon.inverse};
+      }
+
+      &:has(input:checked):hover {
+        background-color: ${theme.colour.icon.brandSelectedOnBgFill};
+      }
+
+      &:has(input:disabled),
+      &:has(input:disabled):hover {
+        background-color: ${theme.colour.fill.disabled};
+        border-color: ${theme.colour.border.disabled};
+        color: ${theme.colour.text.disabled};
+        cursor: not-allowed;
+      }
+    `;
+
+    const style = cx(NAME, baseStyle, marginsStyle(props, theme), className);
+
+    const contentStyle = css`
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    `;
+
+    const iconBaseStyle = css`
+      flex-shrink: 0;
+      color: inherit;
+      user-select: none;
+      pointer-events: none;
+      transition:
+        opacity 0.15s ease-out,
+        margin-left 0.15s ease-out,
+        margin-right 0.15s ease-out;
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    `;
+
+    const iconVisibleStyle = css`
+      opacity: 1;
+      margin-left: 0;
+      margin-right: 0;
+    `;
+
+    const iconHiddenStyle = css`
+      opacity: 0;
+      margin-left: -4px;
+      margin-right: 4px;
+    `;
+
+    const labelBaseStyle = css`
+      color: inherit;
+      transition:
+        margin-left 0.15s ease-out,
+        margin-right 0.15s ease-out;
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    `;
+
+    const labelCheckedStyle = css`
+      margin-left: ${theme.margin.m4};
+      margin-right: 0;
+    `;
+
+    const labelUncheckedStyle = css`
+      margin-left: -6px;
+      margin-right: 10px;
+    `;
+
+    return (
+      <label className={style}>
+        <BaseCheckbox
+          ref={ref}
+          testId={`${testId}__root`}
+          data-testid={testId}
+          aria-label={ariaLabel}
+          checked={checked}
+          defaultChecked={defaultChecked}
+          disabled={disabled}
+          renderVisual={({ checked }) => {
+            const iconStyle = cx(
+              iconBaseStyle,
+              checked && iconVisibleStyle,
+              !checked && iconHiddenStyle
+            );
+
+            const labelStyle = cx(
+              labelBaseStyle,
+              checked && labelCheckedStyle,
+              !checked && labelUncheckedStyle
+            );
+
+            return (
+              <span className={contentStyle}>
+                <Icon.Check
+                  className={iconStyle}
+                  size={16}
+                />
+                <Text
+                  level='sm-semibold'
+                  className={labelStyle}
+                >
+                  {label}
+                </Text>
+              </span>
+            );
+          }}
+          {...props}
+        />
+      </label>
+    );
+  }
+);
+
+export default memo(Chip);

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'));
+  });
+});