uikit-react-public 0.11.24 → 0.17.4

package/lib/components/Search/Search.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Search from './Search';
+
+const meta = {
+  title: 'Components/Search',
+  component: Search,
+  parameters: { layout: 'padded' },
+  argTypes: {
+    placeholder: { control: { type: 'text' } },
+    disabled: { control: { type: 'boolean' } },
+    testId: { control: { type: 'text' } },
+    onSearch: { action: 'searched' },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Search>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Search...',
+  },
+  render: (args) => <Search {...args} />,
+};
+
+export const Disabled: Story = {
+  args: {
+    placeholder: 'Search (disabled)',
+    disabled: true,
+  },
+  render: (args) => <Search {...args} />,
+};
+
+export const WithPlaceholder: Story = {
+  name: 'With custom placeholder',
+  args: {
+    placeholder: 'Type to filter results',
+  },
+  render: (args) => <Search {...args} />,
+};

package/lib/components/Search/Search.tsx

@@ -0,0 +1,170 @@
+import { HTMLAttributes, useRef, useState } from 'react';
+import { css, cx } from '@emotion/css';
+import { Input, Icon, IconButton, InputProps, IconButtonProps } from '../..';
+import useTheme from '../../theme/useTheme';
+import marginsStyle, { MarginProps } from '../common/marginsStyle';
+
+export interface SearchBaseProps extends HTMLAttributes<HTMLDivElement> {
+  onSearch?: (searchTerms: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  inputProps?: InputProps;
+  clearButtonProps?: IconButtonProps;
+  submitButtonProps?: IconButtonProps;
+  testId?: string;
+}
+
+export type SearchProps = SearchBaseProps & MarginProps;
+
+export const NAME = 'ucl-uikit-search';
+
+const Search = ({
+  placeholder = '',
+  testId = NAME,
+  onSearch,
+  disabled = false,
+  m,
+  mv,
+  mh,
+  mt,
+  mb,
+  ml,
+  mr,
+  noMargins,
+  inputProps,
+  clearButtonProps,
+  submitButtonProps,
+  className,
+  ...props
+}: SearchProps) => {
+  const [searchTerms, setSearchTerms] = useState<string>('');
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [theme] = useTheme();
+
+  const handleSearchTermsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerms(e.target.value);
+  };
+
+  const handleClearButtonClick = () => {
+    setSearchTerms('');
+    inputRef.current?.focus();
+  };
+
+  const handleSearchButtonClick = () => {
+    if (onSearch) {
+      onSearch(searchTerms);
+    }
+  };
+
+  const baseStyle = css`
+    position: relative;
+    height: 48px;
+  `;
+
+  const style = cx(
+    NAME,
+    baseStyle,
+    marginsStyle(
+      {
+        m,
+        mv,
+        mh,
+        mt,
+        mb,
+        ml,
+        mr,
+        noMargins,
+      },
+      theme
+    ),
+    className
+  );
+
+  const inputStyle = css`
+    width: 100%;
+    box-sizing: border-box;
+    padding-right: 96px;
+  `;
+
+  const buttonsStyle = css`
+    position: absolute;
+    right: 1px;
+    top: 1px;
+    bottom: 1px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  `;
+
+  const cancelButtonBaseStyle = css`
+    margin-left: ${theme.margin.m12};
+    margin-right: ${theme.margin.m12};
+  `;
+
+  const cancelIconButtonInactiveStyle = css`
+    color: ${theme.color.neutral.grey20};
+  `;
+
+  const cancelButtonStyle = cx(
+    cancelButtonBaseStyle,
+    searchTerms.length === 0 && cancelIconButtonInactiveStyle
+  );
+
+  const dividerStyle = css`
+    width: 1px;
+    height: 38px;
+    background-color: ${theme.color.neutral.grey20};
+  `;
+
+  const submitButtonStyle = css`
+    width: 48px;
+    height: 100%;
+  `;
+
+  return (
+    <div
+      className={style}
+      {...props}
+    >
+      <Input
+        ref={inputRef}
+        inputClassName={inputStyle}
+        placeholder={placeholder}
+        type='text'
+        onChange={handleSearchTermsChange}
+        value={searchTerms}
+        disabled={disabled}
+        data-testid={testId}
+        {...inputProps}
+      />
+
+      <div className={buttonsStyle}>
+        <IconButton
+          disabled={disabled}
+          className={cancelButtonStyle}
+          onClick={handleClearButtonClick}
+          aria-label='Clear search'
+          data-testid={`${testId}-clear-search-btn`}
+          {...clearButtonProps}
+        >
+          <Icon.X />
+        </IconButton>
+
+        <div className={dividerStyle} />
+
+        <IconButton
+          className={submitButtonStyle}
+          disabled={disabled}
+          onClick={handleSearchButtonClick}
+          aria-label='Search'
+          data-testid={`${testId}-search-btn`}
+          {...submitButtonProps}
+        >
+          <Icon.Search />
+        </IconButton>
+      </div>
+    </div>
+  );
+};
+
+export default Search;

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

@@ -0,0 +1,112 @@
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { vi } from 'vitest';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+import Search from '../Search';
+
+describe('Search', () => {
+  // Snapshot tests
+
+  test('snapshot: no props', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Search />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: testId prop', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Search testId='test123' />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  // Interaction tests
+
+  test('test ID: default', () => {
+    render(
+      <ThemeContextProvider>
+        <Search />
+      </ThemeContextProvider>
+    );
+    const search = screen.getByRole('textbox');
+    expect(search).toBeInTheDocument();
+  });
+
+  test('test ID: custom', () => {
+    render(
+      <ThemeContextProvider>
+        <Search testId='custom-test-id' />
+      </ThemeContextProvider>
+    );
+    const search = screen.getByTestId('custom-test-id');
+    expect(search).toBeInTheDocument();
+  });
+
+  test('allows user to type in search input', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <ThemeContextProvider>
+        <Search />
+      </ThemeContextProvider>
+    );
+
+    const input = screen.getByRole('textbox');
+
+    await user.type(input, 'hello world');
+    expect(input).toHaveValue('hello world');
+  });
+
+  test('allows user to click on search button', async () => {
+    const user = userEvent.setup();
+    render(
+      <ThemeContextProvider>
+        <Search />
+      </ThemeContextProvider>
+    );
+
+    const input = screen.getByTestId('ucl-uikit-search-search-btn');
+    await user.click(input);
+  });
+
+  test('calls onSearch when seatch button is clicked', async () => {
+    const user = userEvent.setup();
+    const mockOnSearch = vi.fn();
+
+    render(
+      <ThemeContextProvider>
+        <Search onSearch={mockOnSearch} />
+      </ThemeContextProvider>
+    );
+    const input = screen.getByRole('textbox');
+    await user.type(input, 'test search');
+    const searchButton = screen.getByTestId('ucl-uikit-search-search-btn');
+    await user.click(searchButton);
+
+    expect(mockOnSearch).toHaveBeenCalledWith('test search');
+  });
+  test('clear button clears text and returns focus to input', async () => {
+    const user = userEvent.setup();
+    render(
+      <ThemeContextProvider>
+        <Search placeholder='Search products...' />
+      </ThemeContextProvider>
+    );
+
+    const input = screen.getByTestId('ucl-uikit-search');
+    const clearButton = screen.getByTestId('ucl-uikit-search-clear-search-btn');
+
+    await user.type(input, 'hello');
+    await user.tab();
+    await user.click(clearButton);
+
+    expect((input as HTMLInputElement).value).toBe('');
+    expect(document.activeElement).toBe(input);
+  });
+});

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

@@ -0,0 +1,179 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Search > snapshot: no props 1`] = `
+<div
+  class="ucl-uikit-search css-176lya2"
+>
+  <span
+    class="ucl-uikit-input css-1bpb1dw"
+  >
+    <input
+      class="ucl-uikit-input__input css-181a0dk"
+      data-testid="ucl-uikit-search"
+      id=""
+      placeholder=""
+      type="text"
+      value=""
+    />
+  </span>
+  <div
+    class="css-1mxrgm7"
+  >
+    <button
+      aria-label="Clear search"
+      class="ucl-uikit-icon-button css-1317vpi"
+      data-testid="ucl-uikit-search-clear-search-btn"
+    >
+      <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"
+      >
+        <line
+          x1="18"
+          x2="6"
+          y1="6"
+          y2="18"
+        />
+        <line
+          x1="6"
+          x2="18"
+          y1="6"
+          y2="18"
+        />
+      </svg>
+    </button>
+    <div
+      class="css-5jwcn5"
+    />
+    <button
+      aria-label="Search"
+      class="ucl-uikit-icon-button css-1soyhl2"
+      data-testid="ucl-uikit-search-search-btn"
+    >
+      <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"
+      >
+        <circle
+          cx="11"
+          cy="11"
+          r="8"
+        />
+        <line
+          x1="21"
+          x2="16.65"
+          y1="21"
+          y2="16.65"
+        />
+      </svg>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Search > snapshot: testId prop 1`] = `
+<div
+  class="ucl-uikit-search css-176lya2"
+>
+  <span
+    class="ucl-uikit-input css-1bpb1dw"
+  >
+    <input
+      class="ucl-uikit-input__input css-181a0dk"
+      data-testid="test123"
+      id=""
+      placeholder=""
+      type="text"
+      value=""
+    />
+  </span>
+  <div
+    class="css-1mxrgm7"
+  >
+    <button
+      aria-label="Clear search"
+      class="ucl-uikit-icon-button css-1317vpi"
+      data-testid="test123-clear-search-btn"
+    >
+      <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"
+      >
+        <line
+          x1="18"
+          x2="6"
+          y1="6"
+          y2="18"
+        />
+        <line
+          x1="6"
+          x2="18"
+          y1="6"
+          y2="18"
+        />
+      </svg>
+    </button>
+    <div
+      class="css-5jwcn5"
+    />
+    <button
+      aria-label="Search"
+      class="ucl-uikit-icon-button css-1soyhl2"
+      data-testid="test123-search-btn"
+    >
+      <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"
+      >
+        <circle
+          cx="11"
+          cy="11"
+          r="8"
+        />
+        <line
+          x1="21"
+          x2="16.65"
+          y1="21"
+          y2="16.65"
+        />
+      </svg>
+    </button>
+  </div>
+</div>
+`;

package/lib/components/Search/index.ts

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

package/lib/components/Select/Select.mdx

@@ -0,0 +1,169 @@
+import * as SelectStories from "./Select.stories";
+import { Meta, Title, Subtitle, Canvas, Controls, ArgTypes } from "@storybook/blocks";
+
+export const usage = {
+  default: `<Select
+  options={[
+    { label: 'Option one', value: '1' },
+    { label: 'Option two', value: '2' },
+    { label: 'Option three', value: '3' },
+  ]}
+  value={value}
+  onValueChange={handleChange}
+/>`,
+  native: `<Select
+  native
+  options={[
+    { label: 'Option one', value: '1' },
+    { label: 'Option two', value: '2' },
+    { label: 'Option three', value: '3' },
+  ]}
+  value={value}
+  nativeHtmlAttributes={{ onChange: onNativeChange }}
+/>`,
+  filterable: `<Select
+  filterable
+  options={[
+    { label: 'Option one', value: '1' },
+    { label: 'Option two', value: '2' },
+    { label: 'Option three', value: '3' },
+  ]}
+  value={value}
+  onValueChange={handleChange}
+  placeholder="Type to filter..."
+  filterInputProps={{ 'aria-describedby': 'filter-hint' }}
+/>`,
+  selectionBehaviourCommit: `<Select
+  selectionBehaviour="commit"
+  options={[
+    { label: 'Option one', value: '1' },
+    { label: 'Option two', value: '2' },
+    { label: 'Option three', value: '3' },
+  ]}
+  value={value}
+  onValueChange={handleChange}
+/>`,
+  disabled: `<Select
+  disabled
+  options={[
+    { label: 'Option one', value: '1' },
+    { label: 'Option two', value: '2' },
+    { label: 'Option three', value: '3' },
+  ]}
+  value={value}
+  onValueChange={handleChange}
+/>`,
+  placeholder: `<Select
+  placeholder="Please select an option"
+  options={[
+    { label: 'Option one', value: '1' },
+    { label: 'Option two', value: '2' },
+    { label: 'Option three', value: '3' },
+  ]}
+  value={value}
+  onValueChange={handleChange}
+/>`,
+};
+
+<Meta of={SelectStories} />
+<Title />
+<Subtitle>
+  A custom select with an optional native fallback, opt-in filtering, and long-text handling.
+</Subtitle>
+
+Use `<Select>` when you need a styled dropdown that works like a standard form control but matches the UCL UI kit. The component renders a custom combobox by default and can fall back to the native `<select>` for environments where native behaviour is preferred (e.g. mobile accessibility).
+
+Key features:
+- Custom dropdown with keyboard support (Enter/Space to open, arrows to navigate, Escape to close)
+- Configurable keyboard selection behaviour via `selectionBehaviour` (`focus` or `commit`)
+- Optional native fallback (`native`)
+- Optional filterable dropdown (`filterable`) that lets users type to narrow options
+- `filterInputProps` to forward additional attributes (e.g. `aria-describedby`) to the filter input
+- Support for long option text via `lineBreak`
+- Disabled state and placeholder support
+- Story previews set a fixed control width and wrapper height for better readability in docs.
+
+## Variants
+
+### Custom (default)
+The default renders a fully styled combobox that handles focus, keyboard navigation, and selection. Use this for most desktop/web cases.
+
+<Canvas
+  of={SelectStories.Default}
+  sourceState="shown"
+  source={{ code: usage.default }}
+/>
+
+### Native
+Set `native` to render the browser `<select>`. This is useful when you want built-in mobile picker behaviour or the simplest possible semantics. Props like `onChange`, `value`, and standard `<select>` attributes can be passed via `nativeHtmlAttributes`.
+
+<Canvas
+  of={SelectStories.Native}
+  sourceState="shown"
+  source={{ code: usage.native }}
+/>
+
+### Disabled
+Applies the disabled state to both custom and native variants; interactions are blocked and styles are subdued.
+
+<Canvas
+  of={SelectStories.Disabled}
+  sourceState="shown"
+  source={{ code: usage.disabled }}
+/>
+
+### Placeholder
+Shows helper text until a value is selected. In the native variant it appears as a disabled option; in the custom variant it shows in the visible field.
+
+<Canvas
+  of={SelectStories.WithPlaceholder}
+  sourceState="shown"
+  source={{ code: usage.placeholder }}
+/>
+
+### With filter
+Adds an inline text input when the dropdown is open so users can type to filter options. Arrow keys and Escape still control the dropdown; the filter text is preserved while open and cleared on close.
+
+Use `filterInputProps` to pass extra attributes to the input (e.g. `aria-describedby`, `inputMode`).
+
+<Canvas
+  of={SelectStories.filterable}
+  sourceState="shown"
+  source={{ code: usage.filterable }}
+/>
+
+### Selection behaviour
+Use `selectionBehaviour` to control how keyboard navigation commits value in the custom variant:
+- `focus` (default): arrow keys move and commit immediately.
+- `commit`: arrow keys only highlight; Enter or click commits.
+
+<Canvas
+  of={SelectStories.SelectionBehaviourCommit}
+  sourceState="shown"
+  source={{ code: usage.selectionBehaviourCommit }}
+/>
+
+## Long text and wrapping
+For very long labels, set `lineBreak` to allow breaking the text inside options. Without it, text is truncated/ellipsized to keep layout intact.
+
+## Accessibility
+- Custom variant exposes `role="combobox"` and `aria-expanded`, and listens for Enter/Space/Escape/arrow keys.
+- In `selectionBehaviour="commit"`, arrow keys move highlight without changing value until Enter/click.
+- Native variant leverages built-in browser semantics.
+- The filter input (when `filterable` is true) is focusable when the panel opens; Escape and arrow keys bubble to the parent so the dropdown still closes/navigates.
+- `filterInputProps` lets you forward ARIA hooks like `aria-describedby` to the filter input.
+- Standard HTML attributes (`id`, `title`, `data-*`) are forwarded to the combobox/native select.
+
+## Props
+
+Full props specification for `<Select>` is below.
+
+<Canvas
+  of={SelectStories.Default}
+  sourceState="hidden"
+  source={{ code: usage.default }}
+/>
+
+You can use the controls below to manipulate the `<Select>` component above.
+
+<Controls />