uikit-react-public 0.39.1 → 0.40.0

package/lib/components/ErrorDialog/ErrorDialog.stories.tsx

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import ErrorDialog from './ErrorDialog';
+
+const meta = {
+  title: 'Components/ErrorDialog',
+  component: ErrorDialog,
+  parameters: {
+    docs: {
+      story: 'Default',
+    },
+  },
+} satisfies Meta<typeof ErrorDialog>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    open: true,
+    modal: true,
+    heading: 'Something went wrong',
+    errorCode: '1601',
+    referenceCode: 'UCLCID-20e935c3',
+    children:
+      'We couldn’t complete your request right now. Please try again in a moment.',
+    details: [
+      {
+        label: 'HTTP Status Code',
+        value: 'HTTP status code: 404 (Not Found)',
+      },
+      {
+        label: 'Online Status',
+        value: 'Network connection: online',
+      },
+      {
+        label: 'Username',
+        value: 'username: j.bloggs',
+      },
+      {
+        label: 'Login Time',
+        value: 'login time: Fri Jan 16 2026 10:01:43 GMT+0000',
+      },
+    ],
+    primaryButton: 'Primary',
+  },
+};
+
+export const LongContent: Story = {
+  args: {
+    open: true,
+    modal: true,
+    heading: 'The file could not be uploaded',
+    errorCode: '1601',
+    referenceCode: 'UCLCID-20e935c3',
+    details: [
+      {
+        label: 'HTTP Status Code',
+        value:
+          'HTTP status code: 404 (Not Found)\nAPI request method: GET\nNetwork connection: online',
+      },
+      {
+        label: 'User Details',
+        value:
+          'username: j.bloggs\nlogin time: Fri Jan 16 2026 10:01:43 GMT+0000\nonline status: online',
+      },
+      {
+        label: 'Request Details',
+        value:
+          'path: /rooms/201/312\nrequest URL: https://timetable.mesh.ucl.ac.uk/online-timetable-api-proxy/v0.1/location',
+      },
+      {
+        label: 'Browser Details',
+        value: 'browser: Chrome\nOS: macOS\ndevice type: desktop',
+      },
+    ],
+    children: Array(20)
+      .fill(
+        'The upload service did not respond before the request timed out. Check the file and try again.'
+      )
+      .join(' '),
+    primaryButton: 'Primary',
+    footerDivider: true,
+  },
+};

package/lib/components/ErrorDialog/ErrorDialog.tsx

@@ -0,0 +1,433 @@
+import { ReactNode, useCallback, useId } from 'react';
+import { css, cx } from '@emotion/css';
+import useTheme from '../../theme/useTheme';
+import BaseDialog, { BaseDialogProps } from '../Dialog/BaseDialog';
+import Heading from '../Heading';
+import Paragraph from '../Paragraph';
+import Text from '../Text';
+import Button, { ButtonProps } from '../Button';
+import Icon from '../Icon';
+import IconButton, { IconButtonProps } from '../IconButton';
+import Accordion from '../Accordion';
+
+export const NAME = 'ucl-uikit-error-dialog';
+
+export interface ErrorDialogDetail {
+  label: string;
+  value: string;
+}
+
+export interface ErrorDialogProps extends BaseDialogProps {
+  heading: ReactNode;
+  errorCode?: ReactNode;
+  referenceCode?: ReactNode;
+  details?: ErrorDialogDetail[];
+  primaryButton?: ReactNode;
+  secondaryButton?: ReactNode;
+  primaryButtonProps?: ButtonProps;
+  secondaryButtonProps?: ButtonProps;
+  closeButtonProps?: IconButtonProps;
+  closeButtonAriaLabel?: string;
+  footerDivider?: boolean;
+  onAction?: () => void;
+  onSecondaryAction?: () => void;
+}
+
+const ErrorDialog = ({
+  heading,
+  errorCode,
+  referenceCode,
+  details = [],
+  primaryButton = 'Close',
+  secondaryButton,
+  primaryButtonProps,
+  secondaryButtonProps,
+  closeButtonProps,
+  closeButtonAriaLabel = 'Close error dialog',
+  footerDivider = false,
+  onAction,
+  onSecondaryAction,
+  onClose,
+  size = 'medium',
+  modal = true,
+  role = 'alertdialog',
+  testId = NAME,
+  className,
+  children,
+  ...props
+}: ErrorDialogProps) => {
+  const [theme] = useTheme();
+  const dialogHeaderId = useId();
+  const dialogBodyId = useId();
+  const hasBody = children !== undefined && children !== null;
+  const hasErrorCode = errorCode !== undefined && errorCode !== null;
+  const hasReferenceCode =
+    referenceCode !== undefined && referenceCode !== null;
+  const hasFooterMetadata = hasErrorCode || hasReferenceCode;
+  const hasDetails = details.length > 0;
+  const hasPrimaryButton =
+    primaryButton !== undefined && primaryButton !== null;
+  const hasSecondaryButton =
+    secondaryButton !== undefined && secondaryButton !== null;
+  const hasFooterActions = hasPrimaryButton || hasSecondaryButton;
+
+  const handleCloseButtonClick = useCallback(
+    (ev: React.MouseEvent<HTMLButtonElement>) => {
+      closeButtonProps?.onClick?.(ev);
+
+      if (!ev.defaultPrevented) {
+        onClose?.(ev);
+      }
+    },
+    [closeButtonProps, onClose]
+  );
+
+  const handlePrimaryButtonClick = useCallback(
+    (ev: React.MouseEvent<HTMLButtonElement>) => {
+      primaryButtonProps?.onClick?.(ev);
+
+      if (ev.defaultPrevented) return;
+
+      if (onAction) {
+        onAction();
+      } else {
+        onClose?.(ev);
+      }
+    },
+    [onAction, onClose, primaryButtonProps]
+  );
+
+  const handleSecondaryButtonClick = useCallback(
+    (ev: React.MouseEvent<HTMLButtonElement>) => {
+      secondaryButtonProps?.onClick?.(ev);
+
+      if (ev.defaultPrevented) return;
+
+      if (onSecondaryAction) {
+        onSecondaryAction();
+      } else {
+        onClose?.(ev);
+      }
+    },
+    [onClose, onSecondaryAction, secondaryButtonProps]
+  );
+
+  const baseStyle = css`
+    box-shadow: ${theme.boxShadow.x2y4};
+    border-top: ${theme.padding.p4} solid ${theme.colour.border.critical};
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  `;
+
+  const style = cx(NAME, baseStyle, className);
+
+  const headerBaseStyle = css`
+    flex: 0 0 auto;
+    display: flex;
+    align-items: flex-start;
+    gap: ${theme.padding.p8};
+    padding: ${theme.padding.p24} ${theme.padding.p24} 0;
+
+    @media (min-width: ${theme.breakpoints.tablet}px) {
+      padding: ${theme.padding.p32} ${theme.padding.p32} 0;
+    }
+  `;
+
+  const headerStyle = cx(`${NAME}__header`, headerBaseStyle);
+
+  const headerContentBaseStyle = css`
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: ${theme.padding.p16};
+  `;
+
+  const headerContentStyle = cx(
+    `${NAME}__header-content`,
+    headerContentBaseStyle
+  );
+
+  const closeButtonBaseStyle = css`
+    flex: 0 0 auto;
+    color: ${theme.colour.icon.secondary};
+  `;
+
+  const closeButtonStyle = cx(
+    `${NAME}__close-button`,
+    closeButtonBaseStyle,
+    closeButtonProps?.className
+  );
+
+  const iconBaseStyle = css`
+    color: ${theme.colour.icon.critical};
+    flex: 0 0 auto;
+  `;
+
+  const iconStyle = cx(`${NAME}__icon`, iconBaseStyle);
+
+  const bodyBaseStyle = css`
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    padding: ${theme.padding.p16} ${theme.padding.p24};
+
+    @media (min-width: ${theme.breakpoints.tablet}px) {
+      padding: ${theme.padding.p16} ${theme.padding.p32};
+    }
+  `;
+
+  const bodyStyle = cx(`${NAME}__body`, bodyBaseStyle);
+
+  const bodyContentBaseStyle = css`
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.padding.p8};
+  `;
+
+  const bodyContentStyle = cx(`${NAME}__body-content`, bodyContentBaseStyle);
+
+  const detailsBaseStyle = css`
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.padding.p8};
+    margin-top: ${theme.margin.m16};
+  `;
+
+  const detailsStyle = cx(`${NAME}__details`, detailsBaseStyle);
+
+  const detailAccordionBaseStyle = css`
+    width: 100%;
+    max-width: none;
+  `;
+
+  const detailAccordionStyle = cx(`${NAME}__detail`, detailAccordionBaseStyle);
+
+  const detailValueBaseStyle = css`
+    white-space: pre-line;
+  `;
+
+  const detailValueStyle = cx(`${NAME}__detail-value`, detailValueBaseStyle);
+
+  const errorCodeBaseStyle = css`
+    color: ${theme.colour.text.default};
+    opacity: 0.9;
+  `;
+
+  const errorCodeStyle = cx(`${NAME}__error-code`, errorCodeBaseStyle);
+
+  const referenceCodeBaseStyle = css`
+    color: ${theme.colour.text.default};
+    opacity: 0.9;
+  `;
+
+  const referenceCodeStyle = cx(
+    `${NAME}__reference-code`,
+    referenceCodeBaseStyle
+  );
+
+  const footerBaseStyle = css`
+    flex: 0 0 auto;
+    display: flex;
+    flex-direction: column-reverse;
+    gap: ${theme.padding.p12};
+    padding: ${theme.padding.p16} ${theme.padding.p24} ${theme.padding.p24};
+
+    @media (min-width: ${theme.breakpoints.tablet}px) {
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      padding: ${theme.padding.p16} ${theme.padding.p32} ${theme.padding.p32};
+    }
+  `;
+
+  const footerDividerStyle = css`
+    border-top: ${theme.border.b1} solid ${theme.colour.border.default};
+  `;
+
+  const footerStyle = cx(
+    `${NAME}__footer`,
+    footerBaseStyle,
+    footerDivider && footerDividerStyle
+  );
+
+  const footerMetadataBaseStyle = css`
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.padding.p4};
+  `;
+
+  const footerMetadataStyle = cx(
+    `${NAME}__footer-metadata`,
+    footerMetadataBaseStyle
+  );
+
+  const footerActionsBaseStyle = css`
+    display: flex;
+    flex-direction: column-reverse;
+    gap: ${theme.padding.p12};
+
+    @media (min-width: ${theme.breakpoints.tablet}px) {
+      flex-direction: row;
+      justify-content: flex-end;
+      align-items: center;
+    }
+  `;
+
+  const footerActionsStyle = cx(
+    `${NAME}__footer-actions`,
+    footerActionsBaseStyle
+  );
+
+  const buttonBaseStyle = css`
+    width: 100%;
+
+    @media (min-width: ${theme.breakpoints.tablet}px) {
+      width: auto;
+    }
+  `;
+
+  const primaryButtonStyle = cx(
+    `${NAME}__primary-button`,
+    buttonBaseStyle,
+    primaryButtonProps?.className
+  );
+
+  const secondaryButtonStyle = cx(
+    `${NAME}__secondary-button`,
+    buttonBaseStyle,
+    secondaryButtonProps?.className
+  );
+
+  return (
+    <BaseDialog
+      size={size}
+      modal={modal}
+      role={role}
+      aria-labelledby={dialogHeaderId}
+      aria-describedby={dialogBodyId}
+      onClose={onClose}
+      testId={testId}
+      className={style}
+      skipCloseOnInitialFocus={true}
+      {...props}
+    >
+      <header className={headerStyle}>
+        <div className={headerContentStyle}>
+          <Icon.AlertCircle
+            size={32}
+            className={iconStyle}
+            role='presentation'
+            aria-hidden='true'
+          />
+          <Heading
+            id={dialogHeaderId}
+            level='lg'
+            as='h3'
+            noMargins
+          >
+            {heading}
+          </Heading>
+        </div>
+        <IconButton
+          aria-label={closeButtonAriaLabel}
+          {...closeButtonProps}
+          className={closeButtonStyle}
+          onClick={handleCloseButtonClick}
+        >
+          <Icon.X
+            role='presentation'
+            aria-hidden='true'
+          />
+        </IconButton>
+      </header>
+      <div
+        id={dialogBodyId}
+        className={bodyStyle}
+        role='document'
+      >
+        <div className={bodyContentStyle}>
+          {hasBody && (
+            <Paragraph
+              as='div'
+              level='md'
+              noMargins
+            >
+              {children}
+            </Paragraph>
+          )}
+          {hasDetails && (
+            <div className={detailsStyle}>
+              {details.map(({ label, value }, index) => (
+                <Accordion
+                  key={`${label}-${index}`}
+                  className={detailAccordionStyle}
+                >
+                  <Accordion.Heading>{label}</Accordion.Heading>
+                  <Accordion.Panel>
+                    <span className={detailValueStyle}>{value}</span>
+                  </Accordion.Panel>
+                </Accordion>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+      {(hasFooterActions || hasFooterMetadata) && (
+        <footer
+          className={footerStyle}
+          aria-label='Error dialog actions'
+        >
+          {hasFooterMetadata && (
+            <div className={footerMetadataStyle}>
+              {hasErrorCode && (
+                <Text
+                  className={errorCodeStyle}
+                  level='md-semibold'
+                >
+                  Error code: &nbsp; {errorCode}
+                </Text>
+              )}
+              {hasReferenceCode && (
+                <Text
+                  className={referenceCodeStyle}
+                  level='md-semibold'
+                >
+                  Reference code: &nbsp; {referenceCode}
+                </Text>
+              )}
+            </div>
+          )}
+          {hasFooterActions && (
+            <div className={footerActionsStyle}>
+              {hasSecondaryButton && (
+                <Button
+                  variant='secondary-destructive'
+                  {...secondaryButtonProps}
+                  className={secondaryButtonStyle}
+                  onClick={handleSecondaryButtonClick}
+                >
+                  {secondaryButton}
+                </Button>
+              )}
+              {hasPrimaryButton && (
+                <Button
+                  variant='primary-destructive'
+                  {...primaryButtonProps}
+                  className={primaryButtonStyle}
+                  onClick={handlePrimaryButtonClick}
+                >
+                  {primaryButton}
+                </Button>
+              )}
+            </div>
+          )}
+        </footer>
+      )}
+    </BaseDialog>
+  );
+};
+
+export default ErrorDialog;

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

@@ -0,0 +1,145 @@
+import { afterAll, beforeAll, describe, expect, test, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+import ErrorDialog from '../ErrorDialog';
+
+const originalShowModal = HTMLDialogElement.prototype.showModal;
+const originalClose = HTMLDialogElement.prototype.close;
+
+beforeAll(() => {
+  HTMLDialogElement.prototype.showModal = vi.fn(function (
+    this: HTMLDialogElement
+  ) {
+    this.setAttribute('open', '');
+  });
+  HTMLDialogElement.prototype.close = vi.fn(function (this: HTMLDialogElement) {
+    this.removeAttribute('open');
+  });
+});
+
+afterAll(() => {
+  HTMLDialogElement.prototype.showModal = originalShowModal;
+  HTMLDialogElement.prototype.close = originalClose;
+});
+
+const renderErrorDialog = (
+  props: Partial<React.ComponentProps<typeof ErrorDialog>> = {}
+) =>
+  render(
+    <ThemeContextProvider>
+      <ErrorDialog
+        open
+        heading='Something went wrong'
+        errorCode='1601'
+        referenceCode='UCLCID-20e935c3'
+        onClose={() => {}}
+        {...props}
+      >
+        We could not complete this request.
+      </ErrorDialog>
+    </ThemeContextProvider>
+  );
+
+describe('ErrorDialog', () => {
+  test('renders an accessible alert dialog with heading, body, and error code', () => {
+    renderErrorDialog();
+
+    expect(
+      screen.getByRole('alertdialog', { name: 'Something went wrong' })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText('We could not complete this request.')
+    ).toBeInTheDocument();
+    expect(screen.getByText('Error code: 1601')).toBeInTheDocument();
+    expect(
+      screen.getByText('Reference code: UCLCID-20e935c3')
+    ).toBeInTheDocument();
+  });
+
+  test('renders reference code after error code in the footer metadata', () => {
+    renderErrorDialog();
+
+    const errorCode = screen.getByText('Error code: 1601');
+    const referenceCode = screen.getByText('Reference code: UCLCID-20e935c3');
+
+    expect(errorCode.compareDocumentPosition(referenceCode)).toBe(
+      Node.DOCUMENT_POSITION_FOLLOWING
+    );
+  });
+
+  test('renders detail accordions and preserves new lines in values', () => {
+    renderErrorDialog({
+      details: [
+        {
+          label: 'HTTP Status Code',
+          value: 'HTTP status code: 404 (Not Found)',
+        },
+        {
+          label: 'User Details',
+          value:
+            'username: j.bloggs\nlogin time: Fri Jan 16 2026 10:01:43 GMT+0000',
+        },
+      ],
+    });
+
+    expect(
+      screen.queryByText('HTTP status code: 404 (Not Found)')
+    ).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button', { name: 'HTTP Status Code' }));
+    expect(
+      screen.getByText('HTTP status code: 404 (Not Found)')
+    ).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button', { name: 'User Details' }));
+    expect(
+      screen.getAllByText(
+        (_, element) =>
+          element?.textContent ===
+          'username: j.bloggs\nlogin time: Fri Jan 16 2026 10:01:43 GMT+0000'
+      )
+    ).not.toHaveLength(0);
+  });
+
+  test('calls onClose from the close icon and default primary action', () => {
+    const onClose = vi.fn();
+
+    renderErrorDialog({ onClose });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Close error dialog' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Close' }));
+
+    expect(onClose).toHaveBeenCalledTimes(2);
+  });
+
+  test('calls action handlers for primary and secondary actions', () => {
+    const onAction = vi.fn();
+    const onSecondaryAction = vi.fn();
+    const onClose = vi.fn();
+
+    renderErrorDialog({
+      onAction,
+      onSecondaryAction,
+      onClose,
+      primaryButton: 'Try again',
+      secondaryButton: 'Cancel',
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Try again' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+
+    expect(onAction).toHaveBeenCalledTimes(1);
+    expect(onSecondaryAction).toHaveBeenCalledTimes(1);
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  test('renders footer actions for valid falsey ReactNode labels', () => {
+    renderErrorDialog({
+      primaryButton: 0,
+      secondaryButton: '',
+    });
+
+    expect(screen.getByRole('button', { name: '0' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: '' })).toBeInTheDocument();
+  });
+});

package/lib/components/ErrorDialog/index.tsx

@@ -0,0 +1,2 @@
+export { default } from './ErrorDialog';
+export type { ErrorDialogDetail, ErrorDialogProps } from './ErrorDialog';

package/lib/components/index.ts

@@ -174,6 +174,9 @@ export type {
 export { FeedbackDialog } from './FeedbackDialog';
 export type { FeedbackDialogProps } from './FeedbackDialog';
 
+export { default as ErrorDialog } from './ErrorDialog';
+export type { ErrorDialogDetail, ErrorDialogProps } from './ErrorDialog';
+
 export { default as Radio, LabelledRadio } from './Radio';
 export type { RadioProps, LabelledRadioProps } from './Radio';
 

package/package.json

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