uikit-react-public 0.39.0 → 0.40.0

package/lib/components/Calendar/subcomponents/Day.tsx

@@ -25,6 +25,7 @@ const Day = ({
   events = [],
 }: DayProps) => {
   const [theme] = useTheme();
+  const { md, mdSemibold } = theme.typography.body;
 
   // More than 3 dots displayed breaks the layout
   const displayedEvents = events.slice(0, 3);
@@ -79,9 +80,12 @@ const Day = ({
   `;
 
   const foregroundStyle = css`
-    font-family: ${theme.font.family.primary};
+    font-family: ${md.fontFamily};
+    font-feature-settings: ${md.fontSettings};
     user-select: none;
-    font-size: 16px;
+    font-size: ${md.fontSize}px;
+    font-weight: ${md.fontWeight};
+    line-height: ${md.lineHeight}%;
 
     ${
       !isInCurrentMonth &&
@@ -92,7 +96,7 @@ const Day = ({
     ${
       isToday &&
       css`
-        font-weight: 700;
+        font-weight: ${mdSemibold.fontWeight};
       `
     }
     ${

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

@@ -10,7 +10,7 @@ exports[`Datepicker > Snapshot: no date provided 1`] = `
     data-testid="ucl-uikit-datepicker__visible-field"
   >
     <input
-      class="ucl-uikit-datepicker__input css-1xl7vs4"
+      class="ucl-uikit-datepicker__input css-19gsrgi"
       data-testid="ucl-uikit-datepicker__input"
       inputmode="numeric"
       placeholder="DD/MM/YYYY"
@@ -65,7 +65,7 @@ exports[`Datepicker > Snapshot: with date provided 1`] = `
     data-testid="ucl-uikit-datepicker__visible-field"
   >
     <input
-      class="ucl-uikit-datepicker__input css-1xl7vs4"
+      class="ucl-uikit-datepicker__input css-19gsrgi"
       data-testid="ucl-uikit-datepicker__input"
       inputmode="numeric"
       placeholder="DD/MM/YYYY"

package/lib/components/Datepicker/subcomponents/DatepickerInput.tsx

@@ -38,6 +38,7 @@ const DatepickerInput = ({
   ...props
 }: DatepickerInputProps) => {
   const [theme] = useTheme();
+  const { md } = theme.typography.body;
 
   const baseStyle = css`
     width: 100%;
@@ -46,9 +47,11 @@ const DatepickerInput = ({
     border: none;
     color: ${theme.colour.text.default};
     background-color: ${theme.colour.fill.inverse};
-    font-family: ${theme.font.family.primary};
-    font-size: ${theme.font.size.f16};
-    letter-spacing: 1px;
+    font-family: ${md.fontFamily};
+    font-feature-settings: ${md.fontSettings};
+    font-size: ${md.fontSize}px;
+    font-weight: ${md.fontWeight};
+    line-height: ${md.lineHeight}%;
     caret-color: ${theme.colour.text.default};
 
     &:focus {

package/lib/components/Dialog/BaseDialog.tsx

@@ -63,6 +63,7 @@ const BaseDialog = forwardRef<HTMLDialogElement, BaseDialogProps>(
     }[size];
 
     const [theme] = useTheme();
+    const { md } = theme.typography.body;
 
     const dialogRef = useRef<HTMLDialogElement>(null);
     const previousActiveElement = useRef<HTMLElement | null>(null);
@@ -179,8 +180,11 @@ const BaseDialog = forwardRef<HTMLDialogElement, BaseDialogProps>(
       border: none;
       background: ${theme.colour.surface.default};
       color: ${theme.colour.text.default};
-      font-family: ${theme.font.family.primary};
-      font-size: ${theme.font.size.f16};
+      font-family: ${md.fontFamily};
+      font-feature-settings: ${md.fontSettings};
+      font-size: ${md.fontSize}px;
+      font-weight: ${md.fontWeight};
+      line-height: ${md.lineHeight}%;
       width: 100vw;
       height: 100vh;
       margin: auto;

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;