uikit-react-public 0.50.0 → 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,7 +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>`,
@@ -22,25 +26,53 @@ 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 }}
+/>
+
+## Dark backgrounds
+
+Set `onLight={false}` when a supported inverse variant is placed directly on a dark background.
+
+<Canvas
+  of={ButtonStories.OnDark}
+  source={{ code: usage.onDark }}
+/>
 
 ## Sizes
 
@@ -50,20 +82,36 @@ Use `variant` to control hierarchy and emphasis.
 ## 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

@@ -33,7 +33,9 @@ const variants = [
   'primary-destructive',
   'secondary-destructive',
   'tertiary-destructive',
+  'tertiary-destructive-no-padding',
   'primary-warning',
+  'primary-success',
 ] as const;
 
 const meta = {
@@ -80,6 +82,12 @@ const meta = {
       control: { type: 'boolean' },
       type: 'boolean',
     },
+    onLight: {
+      control: { type: 'boolean' },
+      type: 'boolean',
+      description:
+        'Set to false for supported inverse variants rendered on a dark background.',
+    },
     disabled: {
       control: { type: 'boolean' },
       type: 'boolean',
@@ -92,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',
@@ -193,6 +209,53 @@ export const Destructive: Story = {
   },
 };
 
+export const DestructiveTertiaryNoPadding: Story = {
+  name: 'Destructive tertiary without padding',
+  args: {
+    variant: 'tertiary-destructive-no-padding',
+    children: 'Destructive action',
+  },
+};
+
+export const Success: Story = {
+  name: 'Success primary',
+  args: {
+    variant: 'primary-success',
+    children: 'Success button',
+  },
+};
+
+export const OnDark: Story = {
+  name: 'Inverse variants on dark',
+  args: {
+    onLight: false,
+  },
+  render: () => (
+    <div
+      style={{
+        alignItems: 'center',
+        background: theme.colour.bg.inversePrimary,
+        display: 'flex',
+        gap: theme.padding.p24,
+        padding: theme.padding.p32,
+      }}
+    >
+      <Button
+        onLight={false}
+        variant='secondary'
+      >
+        Secondary action
+      </Button>
+      <Button
+        onLight={false}
+        variant='tertiary-no-padding'
+      >
+        Tertiary action
+      </Button>
+    </div>
+  ),
+};
+
 export const PrimarySubtle: Story = {
   args: {
     variant: 'primary-subtle',
@@ -298,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: {