uikit-react-public 0.50.1 → 0.50.2

package/lib/components/Alert/Alert.mdx

@@ -1,5 +1,11 @@
 import * as AlertStories from './Alert.stories';
-import { Meta, Title, Subtitle, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import {
+  Meta,
+  Title,
+  Subtitle,
+  Canvas,
+  Controls,
+} from '@storybook/addon-docs/blocks';
 
 <Meta of={AlertStories} />
 <Title />
@@ -14,6 +20,12 @@ 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.
 
+## 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.
+
+<Canvas of={AlertStories.WithActionButton} />
+
 ## Variants
 
 ### Info

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

@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import Alert from './Alert';
+import Button from '../Button';
+import Icon from '../Icon';
 import { theme } from '../../theme';
 
 const marginKeys = Object.keys(theme.margin) as Array<
@@ -35,6 +37,10 @@ const meta = {
     className: { control: { type: 'text' } },
     testId: { control: { type: 'text' } },
     children: { control: false },
+    actionButton: {
+      control: false,
+      table: { type: { summary: 'ReactElement<ButtonProps>' } },
+    },
     m: commonMarginPropsInfo,
     mv: commonMarginPropsInfo,
     mh: commonMarginPropsInfo,
@@ -98,6 +104,29 @@ export const Error: Story = {
   },
 };
 
+export const WithActionButton: Story = {
+  name: 'With action button',
+  render: (args) => (
+    <Alert
+      {...args}
+      actionButton={
+        <Button
+          leftIcon={<Icon.ChevronRight />}
+          rightIcon={<Icon.ChevronRight />}
+        >
+          Action
+        </Button>
+      }
+    >
+      <Alert.Title>Title of {args.type} alert</Alert.Title>
+      <Alert.Message>This is a {args.type} alert message.</Alert.Message>
+    </Alert>
+  ),
+  args: {
+    type: 'info',
+  },
+};
+
 export const CommonMargins: Story = {
   render: Template,
   name: 'With common margins',

package/lib/components/Alert/Alert.tsx

@@ -1,6 +1,13 @@
-import { createContext, useContext, HTMLAttributes } from 'react';
+import {
+  cloneElement,
+  createContext,
+  useContext,
+  HTMLAttributes,
+  ReactElement,
+} from 'react';
 import { css, cx } from '@emotion/css';
 import Icon, { IconProps } from '../Icon';
+import type { ButtonProps, ButtonVariant } from '../Button/Button';
 import AlertMessage from './AlertMessage';
 import AlertTitle from './AlertTitle';
 import marginsStyle, { MarginProps } from '../common/marginsStyle';
@@ -29,6 +36,7 @@ export interface AlertBaseProps extends HTMLAttributes<HTMLDivElement> {
   type: AlertType;
   iconProps?: Omit<IconProps, 'svg'>;
   contentProps?: HTMLAttributes<HTMLDivElement>;
+  actionButton?: ReactElement<ButtonProps>;
   testId?: string;
 }
 
@@ -38,6 +46,7 @@ const Alert = ({
   type,
   iconProps,
   contentProps,
+  actionButton,
   children,
   testId = NAME,
   className,
@@ -114,6 +123,12 @@ const Alert = ({
     overflow-wrap: anywhere;
   `;
 
+  const actionButtonStyle = css`
+    align-self: center;
+    flex-shrink: 0;
+    margin-left: auto;
+  `;
+
   const IconComp = {
     info: Icon.Info,
     success: Icon.CheckCircle,
@@ -121,6 +136,21 @@ const Alert = ({
     error: Icon.XCircle,
   }[type];
 
+  const actionButtonVariant: Record<AlertType, ButtonVariant> = {
+    info: 'accent',
+    success: 'primary-success',
+    warning: 'primary-warning',
+    error: 'primary-destructive',
+  };
+
+  const renderedActionButton = actionButton
+    ? cloneElement(actionButton, {
+        variant: actionButtonVariant[type],
+        size: 'xsmall',
+        className: cx(actionButtonStyle, actionButton.props.className),
+      })
+    : null;
+
   return (
     <AlertContext.Provider value={{ type }}>
       <div
@@ -140,6 +170,7 @@ const Alert = ({
         >
           {children}
         </div>
+        {renderedActionButton}
       </div>
     </AlertContext.Provider>
   );

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

@@ -1,7 +1,19 @@
-import { describe, expect, test } from 'vitest';
-import { render } from '@testing-library/react';
-import { ThemeContextProvider } from '../../../theme/useTheme';
+import { describe, expect, test, vitest } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { theme, ThemeContextProvider } from '../../../theme';
 import Alert from '../Alert';
+import Button from '../../Button';
+import Icon from '../../Icon';
+
+const hexToRgb = (hex: string) => {
+  const value = hex.replace('#', '');
+  const red = parseInt(value.slice(0, 2), 16);
+  const green = parseInt(value.slice(2, 4), 16);
+  const blue = parseInt(value.slice(4, 6), 16);
+
+  return `rgb(${red}, ${green}, ${blue})`;
+};
 
 describe('Alert', () => {
   // Snapshot tests
@@ -10,15 +22,11 @@ describe('Alert', () => {
     const renderResult = render(
       <ThemeContextProvider>
         <Alert type='info'>
-          <Alert.Message>
-            This is an informational alert.
-          </Alert.Message>
+          <Alert.Message>This is an informational alert.</Alert.Message>
         </Alert>
       </ThemeContextProvider>
     );
-    expect(
-      renderResult.container.firstChild
-    ).toMatchSnapshot();
+    expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
   test('snapshot: type=success', () => {
@@ -26,15 +34,11 @@ describe('Alert', () => {
       <ThemeContextProvider>
         <Alert type='success'>
           <Alert.Title>Success</Alert.Title>
-          <Alert.Message>
-            Your operation completed successfully.
-          </Alert.Message>
+          <Alert.Message>Your operation completed successfully.</Alert.Message>
         </Alert>
       </ThemeContextProvider>
     );
-    expect(
-      renderResult.container.firstChild
-    ).toMatchSnapshot();
+    expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
   test('snapshot: type=warning', () => {
@@ -48,9 +52,7 @@ describe('Alert', () => {
         </Alert>
       </ThemeContextProvider>
     );
-    expect(
-      renderResult.container.firstChild
-    ).toMatchSnapshot();
+    expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
   test('snapshot: type=error', () => {
@@ -58,14 +60,66 @@ describe('Alert', () => {
       <ThemeContextProvider>
         <Alert type='error'>
           <Alert.Title>Error Alert</Alert.Title>
-          <Alert.Message>
-            The operation failed.
-          </Alert.Message>
+          <Alert.Message>The operation failed.</Alert.Message>
+        </Alert>
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test.each([
+    ['info', theme.colour.fill.brand],
+    ['success', theme.colour.fill.success],
+    ['warning', theme.colour.fill.caution],
+    ['error', theme.colour.fill.critical],
+  ] as const)(
+    'uses the semantic %s colour for its action button',
+    (type, expectedColour) => {
+      render(
+        <ThemeContextProvider>
+          <Alert
+            type={type}
+            actionButton={<Button>Action</Button>}
+          >
+            <Alert.Message>Alert message</Alert.Message>
+          </Alert>
+        </ThemeContextProvider>
+      );
+
+      const actionButton = screen.getByRole('button');
+      expect(actionButton).toHaveStyle({
+        height: '32px',
+        backgroundColor: hexToRgb(expectedColour),
+      });
+    }
+  );
+
+  test('supports an interactive action button with two icons', async () => {
+    const user = userEvent.setup();
+    const onClick = vitest.fn();
+
+    render(
+      <ThemeContextProvider>
+        <Alert
+          type='info'
+          actionButton={
+            <Button
+              leftIcon={<Icon.ChevronRight />}
+              rightIcon={<Icon.ChevronRight />}
+              onClick={onClick}
+            >
+              Action
+            </Button>
+          }
+        >
+          <Alert.Title>Information</Alert.Title>
+          <Alert.Message>Alert message</Alert.Message>
         </Alert>
       </ThemeContextProvider>
     );
-    expect(
-      renderResult.container.firstChild
-    ).toMatchSnapshot();
+
+    expect(screen.getAllByTestId('ucl-uikit-icon')).toHaveLength(3);
+    await user.click(screen.getByRole('button', { name: 'Action' }));
+    expect(onClick).toHaveBeenCalledOnce();
   });
 });

package/lib/components/Button/Button.mdx

@@ -13,9 +13,11 @@ export const usage = {
   default: `<Button>Default Button</Button>`,
   secondary: `<Button variant='secondary'>Secondary Button</Button>`,
   destructive: `<Button variant='primary-destructive'>Destructive Button</Button>`,
+  success: `<Button variant='primary-success'>Success Button</Button>`,
   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>`,
   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>`,
@@ -24,25 +26,40 @@ export const usage = {
 <Meta of={ButtonStories} />
 <Title />
 <Subtitle>
-  A polymorphic button component with modern variants and backwards-compatible legacy props
+  A polymorphic button component with modern variants and backwards-compatible
+  legacy props
 </Subtitle>
 
 <Description>
-`Button` supports the richer variant set and still supports legacy props such as `destructive` and `size='default'` for compatibility.
+  `Button` supports the richer variant set and still supports legacy props such
+  as `destructive` and `size='default'` for compatibility.
 </Description>
 
-<Canvas of={ButtonStories.Default} source={{ code: usage.default }} />
+<Canvas
+  of={ButtonStories.Default}
+  source={{ code: usage.default }}
+/>
 
 ## Variants
 
 Use `variant` to control hierarchy and emphasis.
 
 <Canvas of={ButtonStories.Primary} />
-<Canvas of={ButtonStories.Secondary} source={{ code: usage.secondary }} />
+<Canvas
+  of={ButtonStories.Secondary}
+  source={{ code: usage.secondary }}
+/>
 <Canvas of={ButtonStories.Tertiary} />
 <Canvas of={ButtonStories.Accent} />
 <Canvas of={ButtonStories.PrimarySubtle} />
-<Canvas of={ButtonStories.Destructive} source={{ code: usage.destructive }} />
+<Canvas
+  of={ButtonStories.Success}
+  source={{ code: usage.success }}
+/>
+<Canvas
+  of={ButtonStories.Destructive}
+  source={{ code: usage.destructive }}
+/>
 <Canvas
   of={ButtonStories.DestructiveTertiaryNoPadding}
   source={{ code: usage.destructiveNoPadding }}
@@ -52,7 +69,10 @@ Use `variant` to control hierarchy and emphasis.
 
 Set `onLight={false}` when a supported inverse variant is placed directly on a dark background.
 
-<Canvas of={ButtonStories.OnDark} source={{ code: usage.onDark }} />
+<Canvas
+  of={ButtonStories.OnDark}
+  source={{ code: usage.onDark }}
+/>
 
 ## Sizes
 
@@ -62,20 +82,36 @@ Set `onLight={false}` when a supported inverse variant is placed directly on a d
 ## States
 
 <Canvas of={ButtonStories.Disabled} />
-<Canvas of={ButtonStories.Loading} source={{ code: usage.loading }} />
+<Canvas
+  of={ButtonStories.Loading}
+  source={{ code: usage.loading }}
+/>
 
 ## Icons
 
-<Canvas of={ButtonStories.WithIcon} source={{ code: usage.withIcon }} />
+<Canvas
+  of={ButtonStories.WithIcon}
+  source={{ code: usage.withIcon }}
+/>
+<Canvas
+  of={ButtonStories.WithTwoIcons}
+  source={{ code: usage.withTwoIcons }}
+/>
 <Canvas of={ButtonStories.IconOnly} />
 
 ## Polymorphism
 
-<Canvas of={ButtonStories.Link} source={{ code: usage.link }} />
+<Canvas
+  of={ButtonStories.Link}
+  source={{ code: usage.link }}
+/>
 
 ## Layout
 
-<Canvas of={ButtonStories.FullWidth} source={{ code: usage.fullWidth }} />
+<Canvas
+  of={ButtonStories.FullWidth}
+  source={{ code: usage.fullWidth }}
+/>
 
 ## Common Margins
 

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

@@ -35,6 +35,7 @@ const variants = [
   'tertiary-destructive',
   'tertiary-destructive-no-padding',
   'primary-warning',
+  'primary-success',
 ] as const;
 
 const meta = {
@@ -99,6 +100,14 @@ const meta = {
         type: { summary: 'string', detail: "'left' | 'right'" },
       },
     },
+    leftIcon: {
+      control: false,
+      table: { type: { summary: 'ReactElement' } },
+    },
+    rightIcon: {
+      control: false,
+      table: { type: { summary: 'ReactElement' } },
+    },
     children: {
       control: { type: 'text' },
       type: 'string',
@@ -208,6 +217,14 @@ export const DestructiveTertiaryNoPadding: Story = {
   },
 };
 
+export const Success: Story = {
+  name: 'Success primary',
+  args: {
+    variant: 'primary-success',
+    children: 'Success button',
+  },
+};
+
 export const OnDark: Story = {
   name: 'Inverse variants on dark',
   args: {
@@ -344,6 +361,15 @@ export const IconOnly: Story & {
   },
 };
 
+export const WithTwoIcons: Story = {
+  name: 'With two icons',
+  args: {
+    children: 'Action',
+    leftIcon: <Icon.ChevronRight />,
+    rightIcon: <Icon.ChevronRight />,
+  },
+};
+
 export const Loading: Story = {
   name: 'Loading',
   args: {

package/lib/components/Button/Button.tsx

@@ -22,6 +22,7 @@ import buttonSecondaryDestructiveStyle from './style/buttonSecondaryDestructiveS
 import buttonTertiaryDestructiveStyle from './style/buttonTertiaryDestructiveStyle';
 import buttonTertiaryDestructiveNoPaddingStyle from './style/buttonTertiaryDestructiveNoPaddingStyle';
 import buttonPrimaryWarningStyle from './style/buttonPrimaryWarningStyle';
+import buttonPrimarySuccessStyle from './style/buttonPrimarySuccessStyle';
 import buttonPrimarySubtleStyle from './style/buttonPrimarySubtleStyle';
 import buttonSecondarySubtleStyle from './style/buttonSecondarySubtleStyle';
 import buttonTertiaryNoPaddingStyle from './style/buttonTertiaryNoPaddingStyle';
@@ -42,7 +43,8 @@ export type ButtonVariant =
   | 'secondary-destructive'
   | 'tertiary-destructive'
   | 'tertiary-destructive-no-padding'
-  | 'primary-warning';
+  | 'primary-warning'
+  | 'primary-success';
 
 const DESTRUCTIVE_VARIANT_MAP: Partial<Record<ButtonVariant, ButtonVariant>> = {
   primary: 'primary-destructive',
@@ -65,6 +67,8 @@ export interface ButtonBaseProps {
   disabled?: boolean;
   icon?: ReactElement<{ className?: string }>;
   iconPosition?: 'left' | 'right';
+  leftIcon?: ReactElement<{ className?: string }>;
+  rightIcon?: ReactElement<{ className?: string }>;
   tooltip?: string;
   loading?: boolean;
   fullWidth?: boolean;
@@ -116,6 +120,8 @@ const Button = <C extends ElementType = 'button'>({
   disabled = false,
   icon,
   iconPosition = 'left',
+  leftIcon,
+  rightIcon,
   tooltip,
   loading = false,
   fullWidth = false,
@@ -185,11 +191,18 @@ const Button = <C extends ElementType = 'button'>({
     width: ${children ? contentIconSize : iconOnlySize}px;
     height: ${children ? contentIconSize : iconOnlySize}px;
   `;
-  const styledIcon = icon
-    ? cloneElement(icon, {
-        className: cx(icon.props.className, iconStyle),
-      })
-    : undefined;
+  const styleIcon = (iconElement?: ReactElement<{ className?: string }>) =>
+    iconElement
+      ? cloneElement(iconElement, {
+          className: cx(iconElement.props.className, iconStyle),
+        })
+      : undefined;
+  const styledLeftIcon = styleIcon(
+    leftIcon ?? (iconPosition === 'left' ? icon : undefined)
+  );
+  const styledRightIcon = styleIcon(
+    rightIcon ?? (iconPosition === 'right' ? icon : undefined)
+  );
 
   const sizeExtraSmallStyle = css`
     height: 32px;
@@ -273,6 +286,12 @@ const Button = <C extends ElementType = 'button'>({
       disabled,
       loading
     ),
+    'primary-success': buttonPrimarySuccessStyle(
+      theme,
+      selected,
+      disabled,
+      loading
+    ),
   }[resolvedVariant];
 
   const commonDisabledStyle = css`
@@ -323,9 +342,9 @@ const Button = <C extends ElementType = 'button'>({
           />
         ) : (
           <>
-            {styledIcon && iconPosition === 'left' && styledIcon}
+            {styledLeftIcon}
             {children}
-            {styledIcon && iconPosition === 'right' && styledIcon}
+            {styledRightIcon}
           </>
         )}
       </Component>

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

@@ -79,6 +79,25 @@ describe('Button', () => {
     expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
+  test('renders icons on both sides of the label', () => {
+    render(
+      <ThemeContextProvider>
+        <Button
+          leftIcon={<Icon.ChevronRight />}
+          rightIcon={<Icon.ChevronRight />}
+          size='xsmall'
+        >
+          Action
+        </Button>
+      </ThemeContextProvider>
+    );
+
+    const icons = screen.getAllByTestId('ucl-uikit-icon');
+    expect(icons).toHaveLength(2);
+    expect(icons[0]).toHaveStyle({ width: '16px', height: '16px' });
+    expect(icons[1]).toHaveStyle({ width: '16px', height: '16px' });
+  });
+
   test('snapshot: loading', () => {
     const renderResult = render(
       <ThemeContextProvider>
@@ -309,6 +328,7 @@ describe('Button', () => {
     ['accent', darkTheme.colour.text.inverse],
     ['primary-destructive', darkTheme.colour.text.inverse],
     ['primary-warning', darkTheme.colour.text.caution],
+    ['primary-success', darkTheme.colour.text.inverse],
   ] as const)(
     'uses readable semantic text colour for dark %s variant',
     (variant, expectedColour) => {
@@ -341,6 +361,25 @@ describe('Button', () => {
     );
   });
 
+  test('uses the inverse icon colour for the success variant', () => {
+    render(
+      <ThemeContextProvider>
+        <Button
+          variant='primary-success'
+          icon={<Icon.ChevronRight />}
+        >
+          Success
+        </Button>
+      </ThemeContextProvider>
+    );
+
+    expect(
+      getComputedStyle(screen.getByRole('button'))
+        .getPropertyValue('--ucl-uikit-button-icon-colour')
+        .trim()
+    ).toBe(theme.colour.icon.inverse);
+  });
+
   test.each([
     ['xsmall', '32px', '16px'],
     ['small', '40px', '20px'],

package/lib/components/Button/style/buttonPrimarySuccessStyle.ts

@@ -0,0 +1,39 @@
+import { css, cx } from '@emotion/css';
+import { ThemeType } from '../../../theme';
+import { ButtonBaseProps } from '../Button';
+
+const buttonPrimarySuccessStyle = (
+  theme: ThemeType,
+  selected: ButtonBaseProps['selected'],
+  disabled: ButtonBaseProps['disabled'],
+  loading: ButtonBaseProps['loading']
+) => {
+  const baseStyle = css`
+    --ucl-uikit-button-icon-colour: ${theme.colour.icon.inverse};
+    background-color: ${theme.colour.fill.success};
+    color: ${theme.colour.text.inverse};
+  `;
+
+  const interactiveStyle = css`
+    cursor: pointer;
+  `;
+
+  const selectedStyle = css`
+    background-color: ${theme.colour.fill.success};
+  `;
+
+  const disabledStyle = css`
+    --ucl-uikit-button-icon-colour: ${theme.colour.icon.disabledOnBgFill};
+    background-color: ${theme.colour.fill.disabled};
+    color: ${theme.colour.text.onBgFillDisabled};
+  `;
+
+  return cx(
+    baseStyle,
+    selected && selectedStyle,
+    !disabled && !loading && interactiveStyle,
+    disabled && disabledStyle
+  );
+};
+
+export default buttonPrimarySuccessStyle;

package/package.json

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