uikit-react-public 0.11.20 → 0.14.21

package/lib/components/Search/Search.tsx

@@ -0,0 +1,167 @@
+import { HTMLAttributes, 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 [theme] = useTheme();
+
+  const handleSearchTermsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerms(e.target.value);
+  };
+
+  const handleClearButtonClick = () => {
+    setSearchTerms('');
+  };
+
+  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
+        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,94 @@
+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.getByTestId('ucl-uikit-search');
+    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');
+  });
+});

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.stories.tsx

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useArgs } from '@storybook/preview-api';
 import Select from './Select';
-import { Icon } from '../';
 
 const meta = {
   title: 'Components/Ready to use/Select',
@@ -20,8 +19,8 @@ const meta = {
     testId: {
       control: { type: 'text' },
     },
-    width: {
-      control: { type: 'range', min: 80, max: 624, step: 1 },
+    lineBreak: {
+      control: { type: 'boolean' },
     },
   },
   args: {
@@ -41,7 +40,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   render: () => {
     const [args, updateArgs] = useArgs();
-    const onValueChange = (value: string) => {
+    const onValueChange = (value: string | number) => {
       updateArgs({ value });
     };
     return (
@@ -61,7 +60,7 @@ export const Native: Story = {
   },
   render: () => {
     const [args, updateArgs] = useArgs();
-    const onValueChange = (value: string) => {
+    const onValueChange = (value: string | number) => {
       updateArgs({ value });
     };
     return (
@@ -75,39 +74,13 @@ export const Native: Story = {
   },
 };
 
-export const OptionsWithIcons: Story = {
-  name: 'Options with icons',
-  args: {
-    options: [
-      { label: 'Option 1', value: '1', icon: <Icon.Printer /> },
-      { label: 'Option 2', value: '2', icon: <Icon.User /> },
-      { label: 'Option 3', value: '3', icon: <Icon.Info /> },
-    ],
-  },
-  render: () => {
-    const [args, updateArgs] = useArgs();
-    const onValueChange = (value: string) => {
-      updateArgs({ value });
-    };
-
-    return (
-      <Select
-        {...args}
-        options={args.options}
-        value={args.value}
-        onValueChange={onValueChange}
-      />
-    );
-  },
-};
-
 export const Disabled: Story = {
   args: {
     disabled: true,
   },
   render: () => {
     const [args, updateArgs] = useArgs();
-    const onValueChange = (value: string) => {
+    const onValueChange = (value: string | number) => {
       updateArgs({ value });
     };
 
@@ -126,7 +99,7 @@ export const WithPlaceholder: Story = {
   args: { placeholder: 'Please select an option' },
   render: () => {
     const [args, updateArgs] = useArgs();
-    const onValueChange = (value: string) => {
+    const onValueChange = (value: string | number) => {
       updateArgs({ value });
     };
 
@@ -152,7 +125,7 @@ export const SingleLongOption: Story = {
   },
   render: () => {
     const [args, updateArgs] = useArgs();
-    const onValueChange = (value: string) => {
+    const onValueChange = (value: string | number) => {
       updateArgs({ value });
     };
 
@@ -190,7 +163,7 @@ export const ManyOptions: Story = {
   },
   render: () => {
     const [args, updateArgs] = useArgs();
-    const onValueChange = (value: string) => {
+    const onValueChange = (value: string | number) => {
       updateArgs({ value });
     };
     return (

package/lib/components/Select/Select.tsx

@@ -1,7 +1,7 @@
 import { NativeSelect, CustomSelect } from './subcomponents';
 import { SelectProps } from './Select.types';
 
-const Select = (props: SelectProps) => {
+const Select = <T extends string | number = string>(props: SelectProps<T>) => {
   if (props.native) {
     const { onChange, value, ...rest } = props;
     return (
@@ -14,7 +14,7 @@ const Select = (props: SelectProps) => {
   } else {
     const { onValueChange, ...rest } = props;
     return (
-      <CustomSelect
+      <CustomSelect<T>
         onValueChange={onValueChange}
         {...rest}
       />

package/lib/components/Select/Select.types.ts

@@ -3,7 +3,7 @@
  * Maps to a native <option> element in <NativeSelect>
  * or a <CustomOption> in <CustomSelect>
  */
-export type OptionData = {
+export type OptionData<T> = {
   /**
    * Display text shown to the user
    */
@@ -12,23 +12,25 @@ export type OptionData = {
    * Data-friendly value that is returned when the option is selected
    * We assume this will be submitted to a server or used in some other way
    */
-  value: string;
+  value: T;
   /**
-   * Optional icon to be displayed to the left of the option text.
-   * Only used by <CustomOption>
-   * Takes in an actual <Icon> component
+   * Apply additional props to a select option component.
    */
+  optionProps?: Record<string, unknown>;
+  /** 
+   Deprecated
+  */
   icon?: React.ReactNode;
 };
 
 /**
  * Top level props that <Select> accepts when implemented
  */
-interface BaseSelectProps {
+interface BaseSelectProps<T = string> {
   /**
    * An array of option data, to be rendered either natively or custom
    */
-  options: OptionData[];
+  options: OptionData<T>[];
   /**
    * Placeholder text shown when no option is selected
    * Displayed in visible field of custom implementation
@@ -70,15 +72,17 @@ interface BaseSelectProps {
  * Internal props for the custom implementation, with <div> as root element
  * onChange already exists on <div>. We override it.
  */
-export type CustomSelectProps = Omit<
+export type CustomSelectProps<T> = Omit<
   React.HTMLAttributes<HTMLDivElement>,
   'onChange'
 > &
-  BaseSelectProps & {
+  BaseSelectProps<T> & {
     native?: false;
-    value?: string | number;
+    value?: T;
     disabled?: boolean;
-    onValueChange?: (value: string, ev: React.UIEvent) => void;
+    lineBreak?: boolean;
+    panelClassName?: string;
+    onValueChange?: (value: T, ev: React.UIEvent) => void;
     ref?: React.RefObject<HTMLDivElement | null>;
   };
 
@@ -92,16 +96,17 @@ export type NativeSelectProps = React.SelectHTMLAttributes<HTMLSelectElement> &
     ref?: React.RefObject<HTMLSelectElement | null>;
   };
 
-export type SelectProps = NativeSelectProps | CustomSelectProps;
+export type SelectProps<T> = NativeSelectProps | CustomSelectProps<T>;
 
 /**
  * Each option as displayed in the Panel of <CustomSelect>
  * Roughly equivalent to a custom version of <option>
  */
-export interface CustomOptionProps
+export interface CustomOptionProps<T>
   extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
-  value: string;
+  value: T;
   testId?: string;
   isSelected?: boolean;
-  onSelect: (event: React.MouseEvent, value: string) => void;
+  onSelect: (event: React.MouseEvent, value: T) => void;
+  lineBreak?: boolean;
 }

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

@@ -4,7 +4,7 @@ exports[`Select > Snapshot: default 1`] = `
 <div
   aria-expanded="false"
   aria-haspopup="listbox"
-  class="ucl-uikit-select css-1g3qqhm"
+  class="ucl-uikit-select css-1g9yg1n"
   data-testid="ucl-uikit-select"
   role="combobox"
   tabindex="0"
@@ -14,10 +14,10 @@ exports[`Select > Snapshot: default 1`] = `
     data-testid="ucl-uikit-select__visible-field"
   >
     <span
-      class="css-1oagzrk"
+      class="css-16t5nns"
     />
     <svg
-      class="ucl-uikit-icon css-1ieo112"
+      class="ucl-uikit-icon css-hseitk"
       data-testid="ucl-uikit-icon"
       fill="none"
       height="24"