uikit-react-public 0.50.4 → 0.50.6

package/lib/components/Alert/Alert.mdx

@@ -20,6 +20,10 @@ The `<Alert>` component is used to convey contextual messages with visual hierar
 
 Use the component with `Alert.Title` and `Alert.Message` as children to maintain semantic separation of content.
 
+Use the `variant` prop to select `info`, `success`, `warning`, or `error`.
+The legacy `type` prop remains available for backwards compatibility but is
+deprecated.
+
 ## Action button
 
 Pass a `Button` to `actionButton` to add an action. Alert sets the button to the extra-small size and applies the colour associated with the alert type.

package/lib/components/Alert/Alert.stories.tsx

@@ -29,10 +29,16 @@ const meta = {
     layout: 'centered',
   },
   argTypes: {
+    variant: {
+      options: ['info', 'success', 'warning', 'error'],
+      control: { type: 'select' },
+      type: 'string',
+    },
     type: {
       options: ['info', 'success', 'warning', 'error'],
       control: { type: 'select' },
       type: 'string',
+      description: 'Deprecated. Use variant instead.',
     },
     className: { control: { type: 'text' } },
     testId: { control: { type: 'text' } },
@@ -60,7 +66,7 @@ const meta = {
     },
   },
   args: {
-    type: 'info',
+    variant: 'info',
     testId: 'ucl-uikit-alert',
   },
   tags: ['autodocs'],
@@ -71,36 +77,36 @@ type Story = StoryObj<typeof meta>;
 
 const Template = (args: any) => (
   <Alert {...args}>
-    <Alert.Title>Title of {args.type} alert</Alert.Title>
-    <Alert.Message>This is a {args.type} alert message.</Alert.Message>
+    <Alert.Title>Title of {args.variant} alert</Alert.Title>
+    <Alert.Message>This is a {args.variant} alert message.</Alert.Message>
   </Alert>
 );
 
 export const Info: Story = {
   render: Template,
   args: {
-    type: 'info',
+    variant: 'info',
   },
 };
 
 export const Success: Story = {
   render: Template,
   args: {
-    type: 'success',
+    variant: 'success',
   },
 };
 
 export const Warning: Story = {
   render: Template,
   args: {
-    type: 'warning',
+    variant: 'warning',
   },
 };
 
 export const Error: Story = {
   render: Template,
   args: {
-    type: 'error',
+    variant: 'error',
   },
 };
 
@@ -118,12 +124,12 @@ export const WithActionButton: Story = {
         </Button>
       }
     >
-      <Alert.Title>Title of {args.type} alert</Alert.Title>
-      <Alert.Message>This is a {args.type} alert message.</Alert.Message>
+      <Alert.Title>Title of {args.variant} alert</Alert.Title>
+      <Alert.Message>This is a {args.variant} alert message.</Alert.Message>
     </Alert>
   ),
   args: {
-    type: 'info',
+    variant: 'info',
   },
 };
 
@@ -131,7 +137,7 @@ export const CommonMargins: Story = {
   render: Template,
   name: 'With common margins',
   args: {
-    type: 'info',
+    variant: 'info',
     m: '24',
   },
   parameters: {

package/lib/components/Alert/Alert.tsx

@@ -16,10 +16,13 @@ import capitalise from '../../utils/capitalise';
 
 export const NAME = 'ucl-uikit-alert';
 
-export type AlertType = 'info' | 'success' | 'warning' | 'error';
+export type AlertVariant = 'info' | 'success' | 'warning' | 'error';
+
+/** @deprecated Use AlertVariant instead. */
+export type AlertType = AlertVariant;
 
 export interface AlertContextProps {
-  type: AlertType;
+  type: AlertVariant;
 }
 
 export const AlertContext = createContext<AlertContextProps | null>(null);
@@ -33,17 +36,30 @@ export function useAlertContext() {
 }
 
 export interface AlertBaseProps extends HTMLAttributes<HTMLDivElement> {
-  type: AlertType;
+  variant?: AlertVariant;
+  /** @deprecated Use variant instead. */
+  type?: AlertVariant;
   iconProps?: Omit<IconProps, 'svg'>;
   contentProps?: HTMLAttributes<HTMLDivElement>;
   actionButton?: ReactElement<ButtonProps>;
   testId?: string;
 }
 
-export type AlertProps = AlertBaseProps & MarginProps;
+export type AlertProps = AlertBaseProps &
+  MarginProps &
+  (
+    | {
+        variant: AlertVariant;
+      }
+    | {
+        variant?: undefined;
+        type: AlertVariant;
+      }
+  );
 
 const Alert = ({
-  type,
+  variant,
+  type: deprecatedType,
   iconProps,
   contentProps,
   actionButton,
@@ -52,7 +68,13 @@ const Alert = ({
   className,
   ...props
 }: AlertProps) => {
-  const typeName = capitalise(type);
+  const resolvedVariant = variant ?? deprecatedType;
+
+  if (!resolvedVariant) {
+    throw new Error('Alert requires a variant');
+  }
+
+  const variantName = capitalise(resolvedVariant);
 
   const [theme] = useTheme();
 
@@ -91,27 +113,27 @@ const Alert = ({
     NAME,
     baseStyles,
     marginsStyle(props, theme),
-    type === 'info' && infoStyle,
-    type === 'success' && successStyle,
-    type === 'warning' && warningStyle,
-    type === 'error' && errorStyle,
+    resolvedVariant === 'info' && infoStyle,
+    resolvedVariant === 'success' && successStyle,
+    resolvedVariant === 'warning' && warningStyle,
+    resolvedVariant === 'error' && errorStyle,
     className
   );
 
   const iconStyle = cx(
-    type === 'info' &&
+    resolvedVariant === 'info' &&
       css`
         color: ${theme.colour.icon.brand};
       `,
-    type === 'success' &&
+    resolvedVariant === 'success' &&
       css`
         color: ${theme.colour.icon.success};
       `,
-    type === 'warning' &&
+    resolvedVariant === 'warning' &&
       css`
         color: ${theme.colour.icon.warning};
       `,
-    type === 'error' &&
+    resolvedVariant === 'error' &&
       css`
         color: ${theme.colour.icon.critical};
       `
@@ -141,9 +163,9 @@ const Alert = ({
     success: Icon.CheckCircle,
     warning: Icon.AlertTriangle,
     error: Icon.XCircle,
-  }[type];
+  }[resolvedVariant];
 
-  const actionButtonVariant: Record<AlertType, ButtonVariant> = {
+  const actionButtonVariant: Record<AlertVariant, ButtonVariant> = {
     info: 'accent',
     success: 'primary-success',
     warning: 'primary-warning',
@@ -152,7 +174,7 @@ const Alert = ({
 
   const renderedActionButton = actionButton
     ? cloneElement(actionButton, {
-        variant: actionButtonVariant[type],
+        variant: actionButtonVariant[resolvedVariant],
         size: 'xsmall',
         className: cx(actionButtonStyle, actionButton.props.className),
       })
@@ -162,7 +184,7 @@ const Alert = ({
     <>
       <IconComp
         className={iconStyle}
-        aria-label={typeName}
+        aria-label={variantName}
         {...iconProps}
       />
       <div
@@ -175,7 +197,7 @@ const Alert = ({
   );
 
   return (
-    <AlertContext.Provider value={{ type }}>
+    <AlertContext.Provider value={{ type: resolvedVariant }}>
       <div
         className={style}
         data-testid={testId}

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

@@ -18,10 +18,10 @@ const hexToRgb = (hex: string) => {
 describe('Alert', () => {
   // Snapshot tests
 
-  test('snapshot: type=info, no title', () => {
+  test('snapshot: variant=info, no title', () => {
     const renderResult = render(
       <ThemeContextProvider>
-        <Alert type='info'>
+        <Alert variant='info'>
           <Alert.Message>This is an informational alert.</Alert.Message>
         </Alert>
       </ThemeContextProvider>
@@ -29,10 +29,10 @@ describe('Alert', () => {
     expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
-  test('snapshot: type=success', () => {
+  test('snapshot: variant=success', () => {
     const renderResult = render(
       <ThemeContextProvider>
-        <Alert type='success'>
+        <Alert variant='success'>
           <Alert.Title>Success</Alert.Title>
           <Alert.Message>Your operation completed successfully.</Alert.Message>
         </Alert>
@@ -41,10 +41,10 @@ describe('Alert', () => {
     expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
-  test('snapshot: type=warning', () => {
+  test('snapshot: variant=warning', () => {
     const renderResult = render(
       <ThemeContextProvider>
-        <Alert type='warning'>
+        <Alert variant='warning'>
           <Alert.Title>Warning</Alert.Title>
           <Alert.Message>
             This operation may have unintended consequences.
@@ -55,10 +55,10 @@ describe('Alert', () => {
     expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
-  test('snapshot: type=error', () => {
+  test('snapshot: variant=error', () => {
     const renderResult = render(
       <ThemeContextProvider>
-        <Alert type='error'>
+        <Alert variant='error'>
           <Alert.Title>Error Alert</Alert.Title>
           <Alert.Message>The operation failed.</Alert.Message>
         </Alert>
@@ -74,11 +74,11 @@ describe('Alert', () => {
     ['error', theme.colour.fill.critical],
   ] as const)(
     'uses the semantic %s colour for its action button',
-    (type, expectedColour) => {
+    (variant, expectedColour) => {
       render(
         <ThemeContextProvider>
           <Alert
-            type={type}
+            variant={variant}
             actionButton={<Button>Action</Button>}
           >
             <Alert.Message>Alert message</Alert.Message>
@@ -101,7 +101,7 @@ describe('Alert', () => {
     render(
       <ThemeContextProvider>
         <Alert
-          type='info'
+          variant='info'
           actionButton={
             <Button
               leftIcon={<Icon.ArrowRight />}
@@ -127,7 +127,7 @@ describe('Alert', () => {
     render(
       <ThemeContextProvider>
         <Alert
-          type='info'
+          variant='info'
           actionButton={<Button>Action</Button>}
         >
           <Alert.Message>Alert message</Alert.Message>
@@ -138,4 +138,32 @@ describe('Alert', () => {
     const alert = screen.getByRole('alert');
     expect(getComputedStyle(alert).gap).toBe('32px');
   });
+
+  test('supports the deprecated type prop', () => {
+    render(
+      <ThemeContextProvider>
+        <Alert type='error'>
+          <Alert.Message>Legacy alert</Alert.Message>
+        </Alert>
+      </ThemeContextProvider>
+    );
+
+    expect(screen.getByLabelText('Error')).toBeDefined();
+  });
+
+  test('prefers variant when variant and deprecated type are both provided', () => {
+    render(
+      <ThemeContextProvider>
+        <Alert
+          variant='success'
+          type='error'
+        >
+          <Alert.Message>Alert message</Alert.Message>
+        </Alert>
+      </ThemeContextProvider>
+    );
+
+    expect(screen.getByLabelText('Success')).toBeDefined();
+    expect(screen.queryByLabelText('Error')).toBeNull();
+  });
 });

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

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Alert > snapshot: type=error 1`] = `
+exports[`Alert > snapshot: variant=error 1`] = `
 <div
   class="ucl-uikit-alert css-1eemwvm"
   data-testid="ucl-uikit-alert"
@@ -54,7 +54,7 @@ exports[`Alert > snapshot: type=error 1`] = `
 </div>
 `;
 
-exports[`Alert > snapshot: type=info, no title 1`] = `
+exports[`Alert > snapshot: variant=info, no title 1`] = `
 <div
   class="ucl-uikit-alert css-1d2q0wf"
   data-testid="ucl-uikit-alert"
@@ -97,7 +97,7 @@ exports[`Alert > snapshot: type=info, no title 1`] = `
 </div>
 `;
 
-exports[`Alert > snapshot: type=success 1`] = `
+exports[`Alert > snapshot: variant=success 1`] = `
 <div
   class="ucl-uikit-alert css-1p0xqd2"
   data-testid="ucl-uikit-alert"
@@ -149,7 +149,7 @@ exports[`Alert > snapshot: type=success 1`] = `
 </div>
 `;
 
-exports[`Alert > snapshot: type=warning 1`] = `
+exports[`Alert > snapshot: variant=warning 1`] = `
 <div
   class="ucl-uikit-alert css-1ks795a"
   data-testid="ucl-uikit-alert"

package/lib/components/Alert/index.ts

@@ -1,6 +1,6 @@
 export { default } from './Alert';
 export { default as AlertTitle } from './AlertTitle';
 export { default as AlertMessage } from './AlertMessage';
-export type { AlertProps } from './Alert';
+export type { AlertProps, AlertVariant, AlertType } from './Alert';
 export type { AlertTitleProps } from './AlertTitle';
 export type { AlertMessageProps } from './AlertMessage';

package/lib/components/ToggleGroup/ToggleGroup.tsx

@@ -7,18 +7,23 @@ import {
   useState,
 } from 'react';
 
-import { css } from '@emotion/css';
+import { css, cx } from '@emotion/css';
 import useTheme from '../../theme/useTheme';
 import useMediaQuery from '../../hooks/useMediaQuery';
 import Select, { NonClearableSelectProps } from '../Select';
 import ToggleGroupContext from './ToggleGroupContext';
-import Item, { ItemProps } from './subcomponents/Item';
+import ToggleGroupItem, {
+  ToggleGroupItemProps,
+} from './subcomponents/ToggleGroupItem';
+
+export const NAME = 'ucl-uikit-toggle-group';
 
 export interface ToggleGroupProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   value?: string;
   defaultValue?: string;
   onValueChange?: (value: string) => void;
+  testId?: string;
   selectProps?: Omit<
     NonClearableSelectProps<string>,
     'options' | 'value' | 'onValueChange'
@@ -27,7 +32,14 @@ export interface ToggleGroupProps extends React.HTMLAttributes<HTMLDivElement> {
 
 const MOBILE_SELECT_ITEM_THRESHOLD = 2;
 
-const NAVIGATION_KEYS = ['ArrowRight', 'ArrowLeft', 'Home', 'End'];
+const NAVIGATION_KEYS = [
+  'ArrowRight',
+  'ArrowDown',
+  'ArrowLeft',
+  'ArrowUp',
+  'Home',
+  'End',
+];
 
 const getEnabledItems = (container: HTMLElement) =>
   Array.from(
@@ -38,13 +50,13 @@ const getEnabledItems = (container: HTMLElement) =>
 
 const getItemsFromChildren = (
   children: React.ReactNode
-): React.ReactElement<ItemProps>[] =>
+): React.ReactElement<ToggleGroupItemProps>[] =>
   Children.toArray(children).flatMap((child) => {
     if (!isValidElement<{ children?: React.ReactNode }>(child)) {
       return [];
     }
-    if (child.type === Item) {
-      return [child as React.ReactElement<ItemProps>];
+    if (child.type === ToggleGroupItem) {
+      return [child as React.ReactElement<ToggleGroupItemProps>];
     }
     return getItemsFromChildren(child.props.children);
   });
@@ -55,6 +67,10 @@ const ToggleGroup = ({
   defaultValue,
   onValueChange,
   selectProps,
+  className,
+  onKeyDown,
+  testId = NAME,
+  ...htmlAttributes
 }: ToggleGroupProps) => {
   const [theme] = useTheme();
   const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
@@ -63,6 +79,14 @@ const ToggleGroup = ({
   const isMobile = !useMediaQuery(`(min-width: ${theme.breakpoints.tablet}px)`);
   const items = getItemsFromChildren(children);
   const name = useId();
+  const hasSublabel = items.some((item) => item.props.sublabel);
+  const firstEnabledValue = items.find((item) => !item.props.disabled)?.props
+    .value;
+  const tabbableValue = items.some(
+    (item) => item.props.value === selectedValue && !item.props.disabled
+  )
+    ? selectedValue
+    : firstEnabledValue;
 
   const setValue = (nextValue: string) => {
     if (!isControlled) {
@@ -73,6 +97,12 @@ const ToggleGroup = ({
   };
 
   const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    onKeyDown?.(event);
+
+    if (event.defaultPrevented) {
+      return;
+    }
+
     if (!NAVIGATION_KEYS.includes(event.key)) {
       return;
     }
@@ -91,8 +121,10 @@ const ToggleGroup = ({
     const nextIndex =
       {
         ArrowRight: (currentIndex + 1) % enabledItems.length,
+        ArrowDown: (currentIndex + 1) % enabledItems.length,
         ArrowLeft:
           (currentIndex - 1 + enabledItems.length) % enabledItems.length,
+        ArrowUp: (currentIndex - 1 + enabledItems.length) % enabledItems.length,
         Home: 0,
         End: enabledItems.length - 1,
       }[event.key] ?? currentIndex;
@@ -104,7 +136,6 @@ const ToggleGroup = ({
 
   const toggleGroupStyle = css`
     display: flex;
-    gap: -1px;
     padding: ${theme.padding.p4};
     background-color: ${theme.colour.fill.subtle};
     border-radius: ${theme.radius.r4};
@@ -114,6 +145,8 @@ const ToggleGroup = ({
     return (
       <Select
         {...selectProps}
+        className={cx(NAME, selectProps?.className, className)}
+        testId={testId}
         options={items.map((item) => ({
           label: item.props.label,
           value: item.props.value,
@@ -126,10 +159,18 @@ const ToggleGroup = ({
 
   return (
     <ToggleGroupContext.Provider
-      value={{ value: selectedValue, setValue, name }}
+      value={{
+        value: selectedValue,
+        setValue,
+        name,
+        tabbableValue,
+        hasSublabel,
+      }}
     >
       <div
-        className={toggleGroupStyle}
+        {...htmlAttributes}
+        className={cx(NAME, toggleGroupStyle, className)}
+        data-testid={testId}
         role='radiogroup'
         onKeyDown={handleKeyDown}
       >
@@ -139,6 +180,6 @@ const ToggleGroup = ({
   );
 };
 
-ToggleGroup.Item = Item;
+ToggleGroup.Item = ToggleGroupItem;
 
 export default ToggleGroup;

package/lib/components/ToggleGroup/ToggleGroupContext.tsx

@@ -4,6 +4,8 @@ export interface ToggleGroupContextType {
   value: string | undefined;
   setValue: (value: string) => void;
   name: string;
+  tabbableValue: string | undefined;
+  hasSublabel: boolean;
 }
 
 const ToggleGroupContext = createContext<ToggleGroupContextType | undefined>(