uikit-react-public 0.14.21 → 0.21.8

package/lib/components/Select/subcomponents/FilterInput.tsx

@@ -0,0 +1,90 @@
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../../../theme';
+import type { FilterInputProps } from '../Select.types';
+
+type FilterInputComponentProps = {
+  value: string;
+  onChange: (value: string) => void;
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onTabOut?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  inputRef?: React.RefObject<HTMLInputElement | null>;
+  className?: string;
+  ariaControls?: string;
+  ariaExpanded?: boolean;
+  ariaActiveDescendant?: string;
+} & FilterInputProps;
+
+const FilterInput = ({
+  value,
+  onChange,
+  onBlur,
+  onTabOut,
+  placeholder,
+  disabled,
+  inputRef,
+  className,
+  ariaControls,
+  ariaExpanded,
+  ariaActiveDescendant,
+  ...rest
+}: FilterInputComponentProps) => {
+  const [theme] = useTheme();
+
+  const handleOnKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Tab') {
+      onTabOut?.(e);
+      return;
+    }
+
+    // Let parent handle key navigation
+    if (
+      e.key === 'Escape' ||
+      e.key === 'Enter' ||
+      e.key === 'ArrowUp' ||
+      e.key === 'ArrowDown'
+    )
+      return;
+    e.stopPropagation();
+  };
+
+  const style = css`
+    flex: 1;
+    border: none;
+    outline: none;
+    background: transparent;
+    font: inherit;
+    color: ${theme.colour.text.default};
+    &::placeholder {
+      color: ${theme.colour.text.tertiary};
+    }
+    &:disabled {
+      color: ${theme.colour.text.disabled};
+      cursor: not-allowed;
+    }
+  `;
+  return (
+    <input
+      ref={inputRef}
+      className={cx(style, className)}
+      value={value}
+      placeholder={placeholder}
+      disabled={disabled}
+      onChange={(e) => onChange(e.target.value)}
+      onBlur={onBlur}
+      onClick={(e) => e.stopPropagation()}
+      onKeyDown={(e) => handleOnKeyDown(e)}
+      aria-label='Filter options'
+      aria-autocomplete='list'
+      role='searchbox'
+      aria-haspopup='listbox'
+      aria-controls={ariaControls}
+      aria-expanded={ariaExpanded}
+      aria-activedescendant={ariaActiveDescendant}
+      {...rest}
+    />
+  );
+};
+
+export default FilterInput;

package/lib/components/Select/subcomponents/NativeSelect.tsx

@@ -1,7 +1,19 @@
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../../theme';
 import { dataUri as chevronDownSvgDataUri } from '../../Icon/svgs/ChevronDownSvg';
-import { NativeSelectProps } from '../Select.types';
+import type { InternalSelectProps } from '../Select.types';
+
+type NativeSelectProps = Omit<
+  React.SelectHTMLAttributes<HTMLSelectElement>,
+  'value' | 'defaultValue'
+> &
+  Omit<
+    InternalSelectProps,
+    'native' | 'filterable' | 'nativeHtmlAttributes' | 'onValueChange' | 'ref'
+  > & {
+    value?: string | number;
+    ref?: React.Ref<HTMLSelectElement>;
+  };
 
 const NAME = 'ucl-uikit-select--native';
 
@@ -17,8 +29,8 @@ const NativeSelect = ({
   const [theme] = useTheme();
 
   const chevronColour = disabled
-    ? theme.color.neutral.grey20
-    : theme.color.interaction.blue70;
+    ? theme.colour.icon.disabled
+    : theme.colour.icon.default;
   const chevronDownSvg = chevronDownSvgDataUri(chevronColour);
 
   const baseStyle = css`
@@ -27,9 +39,9 @@ const NativeSelect = ({
     line-height: ${theme.font.lineHeight.h150};
     font-family: ${theme.font.family.primary};
     font-size: ${theme.font.size.f16};
-    background-color: ${theme.color.neutral.white};
-    border: ${theme.border.b1} solid ${theme.color.neutral.grey60};
-    color: ${theme.color.text.primary};
+    background-color: ${theme.colour.fill.inverse};
+    border: ${theme.border.b1} solid ${theme.colour.border.secondary};
+    color: ${theme.colour.text.default};
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -46,13 +58,6 @@ const NativeSelect = ({
     width: ${width}px;
   `;
 
-  const hoverStyle = css`
-    &:hover {
-      border-color: ${theme.color.neutral.grey60};
-      background-color: ${theme.color.neutral.grey5};
-    }
-  `;
-
   const focusStyle = css`
     &:focus-visible {
       box-shadow: ${theme.boxShadow.focus};
@@ -60,13 +65,13 @@ const NativeSelect = ({
   `;
 
   const disabledStyle = css`
-    color: ${theme.color.text.disabled};
-    border: ${theme.border.b1} solid ${theme.color.neutral.grey20};
+    color: ${theme.colour.text.disabled};
+    border: ${theme.border.b1} solid ${theme.colour.border.disabled};
     opacity: 1; // Override user-agent default
     cursor: not-allowed;
 
     &:hover {
-      background-color: ${theme.color.neutral.white};
+      background-color: ${theme.colour.fill.inverse};
     }
   `;
 
@@ -74,7 +79,6 @@ const NativeSelect = ({
     NAME,
     baseStyle,
     !!width && widthStyle,
-    !disabled && hoverStyle,
     !disabled && focusStyle,
     disabled && disabledStyle,
     className

package/lib/components/Select/subcomponents/Panel.tsx

@@ -26,8 +26,8 @@ const Panel = ({ className, ...props }: PanelProps) => {
     overflow-x: hidden;
     box-sizing: content-box;
     padding: ${theme.padding.p8} 0;
-    border: ${theme.border.b1} solid ${theme.color.neutral.grey20};
-    background-color: ${theme.color.neutral.white};
+    border: ${theme.border.b1} solid ${theme.colour.border.subtle};
+    background-color: ${theme.colour.fill.inverse};
   `;
 
   const style = cx(NAME, baseStyle, className);

package/lib/components/Select/subcomponents/VisibleField.tsx

@@ -10,6 +10,11 @@ interface VisibleFieldProps<T> {
   disabled?: boolean;
   selectedOption: OptionData<T> | null | undefined;
   placeholder?: string;
+  filterable?: boolean;
+  clearable?: boolean;
+  onClear?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+  clearButtonRef?: React.RefObject<HTMLButtonElement | null>;
+  children?: React.ReactNode;
 }
 
 const VisibleField = <T extends string | number>({
@@ -17,6 +22,11 @@ const VisibleField = <T extends string | number>({
   isOpen,
   placeholder,
   disabled,
+  filterable,
+  clearable = false,
+  onClear,
+  clearButtonRef,
+  children,
 }: VisibleFieldProps<T>) => {
   const [theme] = useTheme();
 
@@ -40,7 +50,7 @@ const VisibleField = <T extends string | number>({
   const chevronIconBaseStyle = css`
     flex-shrink: 0;
     margin-left: auto;
-    color: ${theme.color.interaction.blue70};
+    color: ${theme.colour.icon.default};
   `;
 
   const chevronIconOpenStyle = css`
@@ -48,7 +58,7 @@ const VisibleField = <T extends string | number>({
   `;
 
   const chevronIconDisabledStyle = css`
-    color: ${theme.color.neutral.grey20};
+    color: ${theme.colour.icon.disabled};
   `;
 
   const chevronIconStyle = cx(
@@ -57,15 +67,58 @@ const VisibleField = <T extends string | number>({
     disabled && chevronIconDisabledStyle
   );
 
+  const clearButtonStyle = css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    margin-left: auto;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: ${theme.colour.icon.default};
+    cursor: pointer;
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: ${theme.boxShadow.focus};
+    }
+  `;
+
+  const showClearButton = clearable && !!selectedOption && !disabled;
+
   return (
     <div
       className={style}
       data-testid={NAME}
     >
-      <span className={innerStyle}>
-        {selectedOption ? selectedOption.label : placeholder || ''}
-      </span>
-      <Icon.ChevronDown className={chevronIconStyle} />
+      {filterable && isOpen ? (
+        <div className={innerStyle}>{children}</div>
+      ) : (
+        <span className={innerStyle}>
+          {selectedOption ? selectedOption.label : placeholder || ''}
+        </span>
+      )}
+      {showClearButton ? (
+        <button
+          ref={clearButtonRef}
+          type='button'
+          className={clearButtonStyle}
+          aria-label='Clear selection'
+          data-testid={`${NAME}-clear-button`}
+          onClick={(event) => {
+            event.stopPropagation();
+            onClear?.(event);
+          }}
+          onKeyDown={(event) => {
+            event.stopPropagation();
+          }}
+        >
+          <Icon.X />
+        </button>
+      ) : (
+        <Icon.ChevronDown className={chevronIconStyle} />
+      )}
     </div>
   );
 };

package/lib/components/Select/subcomponents/index.tsx

@@ -3,3 +3,4 @@ export { default as NativeSelect } from './NativeSelect';
 export { default as CustomOption } from './CustomOption';
 export { default as Panel } from './Panel';
 export { default as VisibleField } from './VisibleField';
+export { default as FilterInput } from './FilterInput';

package/lib/components/Snackbar/Snackbar.stories.tsx

@@ -3,7 +3,7 @@ import { css } from '@emotion/css';
 import Snackbar from './Snackbar';
 
 const meta = {
-  title: 'Components/Ready to use/Snackbar',
+  title: 'Components/Snackbar',
   component: Snackbar,
   args: {
     children: 'Default snackbar text',

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

@@ -9,6 +9,7 @@ exports[`Snackbar > snapshot: custom test id 1`] = `
     class="ucl-uikit-icon css-1uzxprk"
     data-testid="ucl-uikit-icon"
     fill="none"
+    focusable="false"
     height="24"
     stroke="currentColor"
     stroke-linecap="round"
@@ -21,8 +22,8 @@ exports[`Snackbar > snapshot: custom test id 1`] = `
     <path
       d="M22 11.08V12a10 10 0 1 1-5.93-9.14"
     />
-    <polyline
-      points="22 4 12 14.01 9 11.01"
+    <path
+      d="M22 4 12 14.01l-3-3"
     />
   </svg>
   <span>
@@ -50,6 +51,7 @@ exports[`Snackbar > snapshot: minimal props 1`] = `
     class="ucl-uikit-icon css-1uzxprk"
     data-testid="ucl-uikit-icon"
     fill="none"
+    focusable="false"
     height="24"
     stroke="currentColor"
     stroke-linecap="round"
@@ -62,8 +64,8 @@ exports[`Snackbar > snapshot: minimal props 1`] = `
     <path
       d="M22 11.08V12a10 10 0 1 1-5.93-9.14"
     />
-    <polyline
-      points="22 4 12 14.01 9 11.01"
+    <path
+      d="M22 4 12 14.01l-3-3"
     />
   </svg>
   <span>
@@ -80,6 +82,7 @@ exports[`Snackbar > snapshot: minimal props 1`] = `
         class="ucl-uikit-icon css-148hpxb"
         data-testid="ucl-uikit-icon"
         fill="none"
+        focusable="false"
         height="24"
         stroke="currentColor"
         stroke-linecap="round"
@@ -89,17 +92,8 @@ exports[`Snackbar > snapshot: minimal props 1`] = `
         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"
+        <path
+          d="M18 6 6 18M6 6l12 12"
         />
       </svg>
     </button>

package/lib/components/Spinner/Spinner.stories.tsx

@@ -4,7 +4,7 @@ import Spinner from './Spinner';
 import { theme } from '../../theme';
 
 const meta = {
-  title: 'Components/Ready to use/Spinner',
+  title: 'Components/Spinner',
   component: Spinner,
   args: {
     size: 24,

package/lib/components/Spinner/Spinner.tsx

@@ -1,17 +1,36 @@
 import { SVGAttributes, forwardRef, memo } from 'react';
 import { css, cx } from '@emotion/css';
+import { useTheme } from '../../theme';
 
 export const NAME = 'ucl-uikit-spinner';
 
 export interface SpinnerProps extends SVGAttributes<SVGSVGElement> {
   size?: number;
+  strokeWidth?: number;
   testId?: string;
+  inheritColour?: boolean;
 }
 
 const Spinner = forwardRef<SVGSVGElement, SpinnerProps>(
-  ({ size = 24, className, testId = NAME, ...rest }: SpinnerProps, ref) => {
-    const rotationDuration = `2s`; // rotation duration
-    const dashDuration = `1.5s`; // dash duration
+  (
+    {
+      size = 72,
+      strokeWidth = 4,
+      className,
+      testId = NAME,
+      inheritColour = false,
+      ...rest
+    }: SpinnerProps,
+    ref
+  ) => {
+    const [theme] = useTheme();
+
+    const rotationDuration = `3s`; // rotation duration
+    const dashDuration = `2s`; // dash duration
+
+    const baseStyle = css`
+      color: ${inheritColour ? 'inherit' : theme.colour.icon.brand};
+    `;
 
     const gStyle = css`
       transform-origin: 50% 50%;
@@ -44,7 +63,7 @@ const Spinner = forwardRef<SVGSVGElement, SpinnerProps>(
       }
     `;
 
-    const style = cx(NAME, className);
+    const style = cx(NAME, baseStyle, className);
 
     return (
       <svg
@@ -64,7 +83,7 @@ const Spinner = forwardRef<SVGSVGElement, SpinnerProps>(
             r='20'
             fill='none'
             stroke='currentColor'
-            strokeWidth={8}
+            strokeWidth={strokeWidth}
           />
         </g>
       </svg>

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

@@ -2,17 +2,26 @@ import { describe, expect, test } from 'vitest';
 import { render } from '@testing-library/react';
 import { css } from '@emotion/css';
 import SpinnerSvg from '../Spinner';
+import { ThemeContextProvider } from '../../..';
 
 describe('SpinnerSvg', () => {
   // Snapshot tests
 
   test('snapshot: default props', () => {
-    const renderResult = render(<SpinnerSvg />);
+    const renderResult = render(
+      <ThemeContextProvider>
+        <SpinnerSvg />
+      </ThemeContextProvider>
+    );
     expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
   test('snapshot: custom size', () => {
-    const renderResult = render(<SpinnerSvg size={32} />);
+    const renderResult = render(
+      <ThemeContextProvider>
+        <SpinnerSvg size={32} />
+      </ThemeContextProvider>
+    );
     expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
@@ -20,7 +29,20 @@ describe('SpinnerSvg', () => {
     const style = css`
       color: #0d68cf;
     `;
-    const renderResult = render(<SpinnerSvg className={style} />);
+    const renderResult = render(
+      <ThemeContextProvider>
+        <SpinnerSvg className={style} />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: inherits parent colour when inheritColour is true', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <SpinnerSvg inheritColour />
+      </ThemeContextProvider>
+    );
     expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
@@ -28,13 +50,21 @@ describe('SpinnerSvg', () => {
 
   test('Can be found with default testId', () => {
     const defaultTestId = 'ucl-uikit-spinner';
-    const { getByTestId } = render(<SpinnerSvg testId={defaultTestId} />);
+    const { getByTestId } = render(
+      <ThemeContextProvider>
+        <SpinnerSvg testId={defaultTestId} />
+      </ThemeContextProvider>
+    );
     const svg = getByTestId(defaultTestId);
     expect(svg).toBeDefined();
   });
 
   test('test ID: custom', () => {
-    const { getByTestId } = render(<SpinnerSvg testId='custom-test-id' />);
+    const { getByTestId } = render(
+      <ThemeContextProvider>
+        <SpinnerSvg testId='custom-test-id' />
+      </ThemeContextProvider>
+    );
     const svg = getByTestId('custom-test-id');
     expect(svg).toBeDefined();
   });

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

@@ -2,23 +2,23 @@
 
 exports[`SpinnerSvg > Snapshot: custom className 1`] = `
 <svg
-  class="ucl-uikit-spinner css-1dy6s6p"
+  class="ucl-uikit-spinner css-g7tq6j"
   data-testid="ucl-uikit-spinner"
-  height="24"
+  height="72"
   viewBox="0 0 50 50"
-  width="24"
+  width="72"
 >
   <g
-    class="css-1tl81jg"
+    class="css-ypv7tf"
   >
     <circle
-      class="css-lyzf49"
+      class="css-1w5ipzg"
       cx="25"
       cy="25"
       fill="none"
       r="20"
       stroke="currentColor"
-      stroke-width="8"
+      stroke-width="4"
     />
   </g>
 </svg>
@@ -26,23 +26,23 @@ exports[`SpinnerSvg > Snapshot: custom className 1`] = `
 
 exports[`SpinnerSvg > snapshot: custom size 1`] = `
 <svg
-  class="ucl-uikit-spinner"
+  class="ucl-uikit-spinner css-1g359sh"
   data-testid="ucl-uikit-spinner"
   height="32"
   viewBox="0 0 50 50"
   width="32"
 >
   <g
-    class="css-1tl81jg"
+    class="css-ypv7tf"
   >
     <circle
-      class="css-lyzf49"
+      class="css-1w5ipzg"
       cx="25"
       cy="25"
       fill="none"
       r="20"
       stroke="currentColor"
-      stroke-width="8"
+      stroke-width="4"
     />
   </g>
 </svg>
@@ -50,23 +50,47 @@ exports[`SpinnerSvg > snapshot: custom size 1`] = `
 
 exports[`SpinnerSvg > snapshot: default props 1`] = `
 <svg
-  class="ucl-uikit-spinner"
+  class="ucl-uikit-spinner css-1g359sh"
   data-testid="ucl-uikit-spinner"
-  height="24"
+  height="72"
   viewBox="0 0 50 50"
-  width="24"
+  width="72"
 >
   <g
-    class="css-1tl81jg"
+    class="css-ypv7tf"
   >
     <circle
-      class="css-lyzf49"
+      class="css-1w5ipzg"
       cx="25"
       cy="25"
       fill="none"
       r="20"
       stroke="currentColor"
-      stroke-width="8"
+      stroke-width="4"
+    />
+  </g>
+</svg>
+`;
+
+exports[`SpinnerSvg > snapshot: inherits parent colour when inheritColour is true 1`] = `
+<svg
+  class="ucl-uikit-spinner css-1izyex6"
+  data-testid="ucl-uikit-spinner"
+  height="72"
+  viewBox="0 0 50 50"
+  width="72"
+>
+  <g
+    class="css-ypv7tf"
+  >
+    <circle
+      class="css-1w5ipzg"
+      cx="25"
+      cy="25"
+      fill="none"
+      r="20"
+      stroke="currentColor"
+      stroke-width="4"
     />
   </g>
 </svg>

package/lib/components/StandaloneLink/StandaloneLink.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Link from './StandaloneLink';
 
 const meta = {
-  title: 'Components/Work in progress/StandaloneLink',
+  title: 'Components/StandaloneLink',
   component: Link,
   args: {
     children: 'Default link text',