uikit-react-public 0.50.3 → 0.50.5

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',
   },
 };
 
@@ -111,19 +117,19 @@ export const WithActionButton: Story = {
       {...args}
       actionButton={
         <Button
-          leftIcon={<Icon.ChevronRight />}
-          rightIcon={<Icon.ChevronRight />}
+          leftIcon={<Icon.ArrowRight />}
+          rightIcon={<Icon.ArrowRight />}
         >
           Action
         </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,11 +101,11 @@ describe('Alert', () => {
     render(
       <ThemeContextProvider>
         <Alert
-          type='info'
+          variant='info'
           actionButton={
             <Button
-              leftIcon={<Icon.ChevronRight />}
-              rightIcon={<Icon.ChevronRight />}
+              leftIcon={<Icon.ArrowRight />}
+              rightIcon={<Icon.ArrowRight />}
               onClick={onClick}
             >
               Action
@@ -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/Button/Button.mdx

@@ -17,7 +17,7 @@ export const usage = {
   destructiveNoPadding: `<Button variant='tertiary-destructive-no-padding'>Destructive Action</Button>`,
   onDark: `<Button variant='secondary' onLight={false}>Secondary Button</Button>`,
   withIcon: `<Button icon={<Icon.AlertTriangle />}>Button</Button>`,
-  withTwoIcons: `<Button leftIcon={<Icon.ChevronRight />} rightIcon={<Icon.ChevronRight />}>Action</Button>`,
+  withTwoIcons: `<Button leftIcon={<Icon.ArrowRight />} rightIcon={<Icon.ArrowRight />}>Action</Button>`,
   loading: `<Button loading>Loading Button</Button>`,
   link: `<Button as='a' href='https://www.ucl.ac.uk' target='_blank'>Go to UCL&#39;s website</Button>`,
   fullWidth: `<Button fullWidth>Full Width Button</Button>`,

package/lib/components/Button/Button.stories.tsx

@@ -365,8 +365,8 @@ export const WithTwoIcons: Story = {
   name: 'With two icons',
   args: {
     children: 'Action',
-    leftIcon: <Icon.ChevronRight />,
-    rightIcon: <Icon.ChevronRight />,
+    leftIcon: <Icon.ArrowRight />,
+    rightIcon: <Icon.ArrowRight />,
   },
 };
 

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

@@ -83,8 +83,8 @@ describe('Button', () => {
     render(
       <ThemeContextProvider>
         <Button
-          leftIcon={<Icon.ChevronRight />}
-          rightIcon={<Icon.ChevronRight />}
+          leftIcon={<Icon.ArrowRight />}
+          rightIcon={<Icon.ArrowRight />}
           size='xsmall'
         >
           Action

package/lib/components/index.ts

@@ -191,7 +191,7 @@ export { default as Table } from './Table';
 export type { TableProps } from './Table';
 
 export { default as Alert } from './Alert';
-export type { AlertProps } from './Alert';
+export type { AlertProps, AlertVariant, AlertType } from './Alert';
 
 export { default as Tabs } from './Tabs';
 export type {

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.50.3",
+  "version": "0.50.5",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",