uikit-react-public 0.11.24 → 0.14.21

package/dist/theme/defaultTheme.d.ts

@@ -20,6 +20,7 @@ declare const blackAndWhite: {
     white: string;
 };
 declare const theme: {
+    p0: number;
     p2: string;
     p4: string;
     p6: string;
@@ -35,6 +36,7 @@ declare const theme: {
     p64: string;
     p72: string;
     p80: string;
+    m0: number;
     m2: string;
     m4: string;
     m6: string;
@@ -114,7 +116,9 @@ declare const theme: {
         };
         link: {
             default: string;
+            secondaryDefault: string;
             hover: string;
+            secondaryHover: string;
             visited: string;
             disabled: string;
         };
@@ -122,6 +126,7 @@ declare const theme: {
             black: string;
             grey90: string;
             grey80: string;
+            grey70: string;
             grey60: string;
             grey40: string;
             grey20: string;
@@ -153,6 +158,7 @@ declare const theme: {
         h80: string;
     };
     margin: {
+        m0: number;
         m2: string;
         m4: string;
         m6: string;
@@ -170,6 +176,7 @@ declare const theme: {
         m80: string;
     };
     padding: {
+        p0: number;
         p2: string;
         p4: string;
         p6: string;

package/dist/theme/useTheme.d.ts

@@ -3,6 +3,7 @@ export declare const ThemeContextProvider: React.FC<{
     children: ReactNode;
 }>;
 declare const useTheme: () => [{
+    p0: number;
     p2: string;
     p4: string;
     p6: string;
@@ -18,6 +19,7 @@ declare const useTheme: () => [{
     p64: string;
     p72: string;
     p80: string;
+    m0: number;
     m2: string;
     m4: string;
     m6: string;
@@ -97,7 +99,9 @@ declare const useTheme: () => [{
         };
         link: {
             default: string;
+            secondaryDefault: string;
             hover: string;
+            secondaryHover: string;
             visited: string;
             disabled: string;
         };
@@ -105,6 +109,7 @@ declare const useTheme: () => [{
             black: string;
             grey90: string;
             grey80: string;
+            grey70: string;
             grey60: string;
             grey40: string;
             grey20: string;
@@ -136,6 +141,7 @@ declare const useTheme: () => [{
         h80: string;
     };
     margin: {
+        m0: number;
         m2: string;
         m4: string;
         m6: string;
@@ -153,6 +159,7 @@ declare const useTheme: () => [{
         m80: string;
     };
     padding: {
+        p0: number;
         p2: string;
         p4: string;
         p6: string;
@@ -244,6 +251,7 @@ declare const useTheme: () => [{
         custom: (breakpoint: number) => string;
     };
 }, import('react').Dispatch<import('react').SetStateAction<{
+    p0: number;
     p2: string;
     p4: string;
     p6: string;
@@ -259,6 +267,7 @@ declare const useTheme: () => [{
     p64: string;
     p72: string;
     p80: string;
+    m0: number;
     m2: string;
     m4: string;
     m6: string;
@@ -338,7 +347,9 @@ declare const useTheme: () => [{
         };
         link: {
             default: string;
+            secondaryDefault: string;
             hover: string;
+            secondaryHover: string;
             visited: string;
             disabled: string;
         };
@@ -346,6 +357,7 @@ declare const useTheme: () => [{
             black: string;
             grey90: string;
             grey80: string;
+            grey70: string;
             grey60: string;
             grey40: string;
             grey20: string;
@@ -377,6 +389,7 @@ declare const useTheme: () => [{
         h80: string;
     };
     margin: {
+        m0: number;
         m2: string;
         m4: string;
         m6: string;
@@ -394,6 +407,7 @@ declare const useTheme: () => [{
         m80: string;
     };
     padding: {
+        p0: number;
         p2: string;
         p4: string;
         p6: string;

package/dist/utils/__tests__/capitalise.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/capitalise.d.ts

@@ -0,0 +1,2 @@
+declare const capitalise: (text: string) => string;
+export default capitalise;

package/lib/components/Alert/Alert.tsx

@@ -5,6 +5,7 @@ import AlertMessage from './AlertMessage';
 import AlertTitle from './AlertTitle';
 import marginsStyle, { MarginProps } from '../common/marginsStyle';
 import { useTheme } from '../../theme';
+import capitalise from '../../utils/capitalise';
 
 export const NAME = 'ucl-uikit-alert';
 
@@ -38,6 +39,8 @@ const Alert = ({
   className,
   ...props
 }: AlertProps) => {
+  const typeName = capitalise(type);
+
   const [theme] = useTheme();
 
   const { padding } = theme;
@@ -117,7 +120,10 @@ const Alert = ({
         role='alert'
         {...props}
       >
-        <IconComp className={iconStyle} />
+        <IconComp
+          className={iconStyle}
+          aria-label={typeName}
+        />
         <div>{children}</div>
       </div>
     </AlertContext.Provider>

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

@@ -7,6 +7,7 @@ exports[`Alert > snapshot: type=error 1`] = `
   role="alert"
 >
   <svg
+    aria-label="Error"
     class="ucl-uikit-icon css-nysdxe"
     data-testid="ucl-uikit-icon"
     fill="none"
@@ -61,6 +62,7 @@ exports[`Alert > snapshot: type=info, no title 1`] = `
   role="alert"
 >
   <svg
+    aria-label="Info"
     class="ucl-uikit-icon css-1oh4ubr"
     data-testid="ucl-uikit-icon"
     fill="none"
@@ -109,6 +111,7 @@ exports[`Alert > snapshot: type=success 1`] = `
   role="alert"
 >
   <svg
+    aria-label="Success"
     class="ucl-uikit-icon css-4xbsfp"
     data-testid="ucl-uikit-icon"
     fill="none"
@@ -152,6 +155,7 @@ exports[`Alert > snapshot: type=warning 1`] = `
   role="alert"
 >
   <svg
+    aria-label="Warning"
     class="ucl-uikit-icon css-dwkbnw"
     data-testid="ucl-uikit-icon"
     fill="none"

package/lib/components/Badge/Badge.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Badge from './Badge';
+
+const meta = {
+  title: 'Components/Work in progress/Badge',
+  component: Badge,
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    children: 'Badge',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/lib/components/Badge/Badge.tsx

@@ -0,0 +1,48 @@
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../../theme';
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+  testId?: string;
+  className?: string;
+}
+
+const NAME = 'ucl-uikit-badge';
+
+const Badge = ({
+  testId = NAME,
+  className,
+  children,
+  ...props
+}: BadgeProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    height: 24px;
+    padding: ${theme.padding.p8};
+    color: ${theme.color.text.secondary};
+    background-color: #e4e4e4; // TODO: Add design token
+    font-family: ${theme.font.family.primary};
+    font-size: ${theme.font.size.f14};
+    font-weight: ${theme.font.weight.regular};
+    border-radius: ${theme.radius.r4};
+    white-space: nowrap;
+  `;
+
+  const style = cx(baseStyle, NAME, className);
+
+  return (
+    <div
+      data-testid={testId}
+      className={style}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Badge;

package/lib/components/Badge/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Badge';
+export type { BadgeProps } from './Badge';

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

@@ -36,7 +36,7 @@ exports[`Breadcrumbs > Snapshot: No props 1`] = `
     class="css-4ys53n"
   >
     <a
-      class="ucl-link ucl-timetable-breadcrumb ucl-timetable-breadcrumb--inactive css-hr2cbw"
+      class="ucl-uikit-base-link ucl-uikit-link ucl-timetable-breadcrumb ucl-timetable-breadcrumb--inactive css-c7kkpi"
       data-testid="ucl-timetable-breadcrumb"
       href="/showcase"
     >
@@ -64,7 +64,7 @@ exports[`Breadcrumbs > Snapshot: No props 1`] = `
     class="css-4ys53n"
   >
     <a
-      class="ucl-link ucl-timetable-breadcrumb ucl-timetable-breadcrumb--inactive css-hr2cbw"
+      class="ucl-uikit-base-link ucl-uikit-link ucl-timetable-breadcrumb ucl-timetable-breadcrumb--inactive css-c7kkpi"
       data-testid="ucl-timetable-breadcrumb"
       href="/showcase/breadcrumbs"
     >
@@ -110,7 +110,7 @@ exports[`Breadcrumbs > snapshot: Custom Test ID 1`] = `
     class="css-4ys53n"
   >
     <a
-      class="ucl-link ucl-timetable-breadcrumb ucl-timetable-breadcrumb--inactive css-hr2cbw"
+      class="ucl-uikit-base-link ucl-uikit-link ucl-timetable-breadcrumb ucl-timetable-breadcrumb--inactive css-c7kkpi"
       data-testid="custom-testid-2"
       href="/showcase"
     >
@@ -138,7 +138,7 @@ exports[`Breadcrumbs > snapshot: Custom Test ID 1`] = `
     class="css-4ys53n"
   >
     <a
-      class="ucl-link ucl-timetable-breadcrumb ucl-timetable-breadcrumb--inactive css-hr2cbw"
+      class="ucl-uikit-base-link ucl-uikit-link ucl-timetable-breadcrumb ucl-timetable-breadcrumb--inactive css-c7kkpi"
       data-testid="custom-testid-3"
       href="/showcase/breadcrumbs"
     >

package/lib/components/Button/Button.tsx

@@ -11,8 +11,10 @@ import useTheme from '../../theme/useTheme';
 import buttonPrimaryStyle from './buttonPrimaryStyle';
 import buttonSecondaryStyle from './buttonSecondaryStyle';
 import buttonTertiaryStyle from './buttonTertiaryStyle';
-import { Spinner, Overlay, Tooltip } from '../';
-import marginsStyle from '../common/marginsStyle';
+import Spinner from '../Spinner/Spinner';
+import Overlay from '../Overlay/Overlay';
+import Tooltip from '../Tooltip/Tooltip';
+import marginsStyle, { MarginProps } from '../common/marginsStyle';
 
 export const NAME = 'ucl-uikit-button';
 
@@ -35,6 +37,7 @@ export type ButtonProps<C extends ElementType = 'button'> = {
   as?: C;
   ref?: PolymorphicRef<C>;
 } & ButtonBaseProps &
+  MarginProps &
   Omit<ComponentPropsWithRef<C>, keyof ButtonBaseProps | 'as'>;
 
 const Button = <C extends ElementType = 'button'>({

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

@@ -41,7 +41,6 @@ function createEventsMap(
     }
     eventsMap.get(dateKey)!.push(event);
   });
-  console.log('Events map created:', eventsMap);
   return eventsMap;
 }
 

package/lib/components/CookieNotice/CookieNotice.tsx

@@ -0,0 +1,114 @@
+import { HTMLAttributes, useRef } from 'react';
+import { css, cx } from '@emotion/css';
+import useTheme from '../../theme/useTheme';
+import marginsStyle, { MarginProps } from '../common/marginsStyle';
+import Paragraph from '../Paragraph';
+import { Button, Icon, Link } from '..';
+import { useFocusTrap } from '../../hooks/useFocusTrap';
+
+export const NAME = 'ucl-uikit-cookie-notice';
+export const DEFAULT_POLICY_HREF =
+  'https://www.ucl.ac.uk/legal-services/privacy/cookie-policy';
+export const DEFAULT_TEXT =
+  'We use necessary cookies to manage your session and essential site functions. We also use Google Analytics cookies to understand how our site is used. You can accept or reject non-essential cookies.';
+
+export interface CookieNoticeBaseProps extends HTMLAttributes<HTMLDivElement> {
+  policyHref?: string;
+  text?: string;
+  onAccept?: () => void;
+  onReject?: () => void;
+  trapFocus?: boolean;
+  testId?: string;
+}
+
+export type CookieNoticeProps = CookieNoticeBaseProps & MarginProps;
+
+const CookieNotice = ({
+  policyHref = DEFAULT_POLICY_HREF,
+  text = DEFAULT_TEXT,
+  onAccept,
+  onReject,
+  trapFocus = false,
+  testId = NAME,
+  className,
+  ...props
+}: CookieNoticeProps) => {
+  const [theme] = useTheme();
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useFocusTrap({
+    isActive: trapFocus,
+    containerRef,
+    restoreFocus: true,
+  });
+
+  const baseStyle = css`
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: auto;
+    background-color: ${theme.color.neutral.grey40};
+    padding: ${theme.padding.p20} ${theme.padding.p24};
+  `;
+
+  const style = cx(NAME, baseStyle, marginsStyle(props, theme), className);
+
+  const buttonsStyle = css`
+    margin-top: ${theme.margin.m16};
+    display: flex;
+    align-items: center;
+    gap: ${theme.margin.m8};
+  `;
+
+  const policyLinkStyle = css`
+    margin-left: ${theme.margin.m16};
+    display: inline-flex;
+    color: ${theme.color.text.primary};
+    &:visited {
+      color: ${theme.color.text.primary};
+    }
+  `;
+
+  const policyLinkIconStyle = css`
+    margin-top: -1px;
+    margin-left: ${theme.margin.m4};
+  `;
+
+  return (
+    <div
+      ref={containerRef}
+      className={style}
+      data-testid={testId}
+      {...props}
+    >
+      <Paragraph noMargins>{text}</Paragraph>
+
+      <div className={buttonsStyle}>
+        <Button
+          size='small'
+          onClick={onAccept}
+        >
+          Accept
+        </Button>
+
+        <Button
+          size='small'
+          onClick={onReject}
+        >
+          Reject
+        </Button>
+        <Link
+          className={policyLinkStyle}
+          noVisited
+          href={policyHref}
+          target='_blank'
+        >
+          Cookies policy <Icon.ExternalLink className={policyLinkIconStyle} />
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default CookieNotice;

package/lib/components/CookieNotice/index.ts

@@ -0,0 +1,2 @@
+export { default } from './CookieNotice';
+export type { CookieNoticeProps } from './CookieNotice';

package/lib/components/Dialog/BaseDialog.tsx

@@ -7,6 +7,7 @@ import React, {
 } from 'react';
 import { css, cx } from '@emotion/css';
 import useTheme from '../../theme/useTheme';
+import { useFocusTrap } from '../../hooks/useFocusTrap';
 
 export const NAME = 'ucl-uikit-base-dialog';
 export const SMALL_WIDTH = 495;
@@ -19,7 +20,13 @@ export interface BaseDialogProps extends HTMLAttributes<HTMLDialogElement> {
   modal?: boolean;
   closeOnClickOutside?: boolean;
   closeOnClickOutsideStopPropagation?: boolean;
-  onClose?: (ev: React.MouseEvent) => void;
+  nonModalCloseOnEscape?: boolean;
+  onClose?: (ev: React.MouseEvent | KeyboardEvent) => void;
+  // Focus trap related props
+  initialFocusRef?: React.RefObject<HTMLElement>;
+  finalFocusRef?: React.RefObject<HTMLElement>;
+  disableFocusTrap?: boolean;
+  restoreFocus?: boolean;
   testId?: string;
 }
 
@@ -29,10 +36,15 @@ const BaseDialog = ({
   modal = true,
   closeOnClickOutside = true,
   closeOnClickOutsideStopPropagation = true,
+  nonModalCloseOnEscape = false,
   onClose,
-  testId = NAME,
   className,
   children,
+  initialFocusRef,
+  finalFocusRef,
+  disableFocusTrap = false,
+  restoreFocus = true,
+  testId = NAME,
   ...props
 }: BaseDialogProps) => {
   const width = {
@@ -46,6 +58,15 @@ const BaseDialog = ({
   const dialogRef = useRef<HTMLDialogElement>(null);
   const previousActiveElement = useRef<HTMLElement | null>(null);
 
+  // Use the focus trap hook
+  useFocusTrap({
+    isActive: open && modal && !disableFocusTrap,
+    containerRef: dialogRef,
+    initialFocusRef,
+    finalFocusRef,
+    restoreFocus,
+  });
+
   const hideBodyScroll = css`
     overflow: hidden;
   `;
@@ -75,9 +96,27 @@ const BaseDialog = ({
       }
     } else if (!open && dialogElement.hasAttribute('open')) {
       dialogElement.close();
-      previousActiveElement.current?.focus();
+      // Focus restoration is handled by the focus trap hook for modal dialogs,
+      // but we keep the fallback for non-modal dialogs or when focus trap is disabled
+      if ((!modal || disableFocusTrap) && restoreFocus) {
+        previousActiveElement.current?.focus();
+      }
     }
-  }, [open, modal]);
+  }, [open, modal, disableFocusTrap, restoreFocus]);
+
+  // Handle Escape key to close dialog
+  useEffect(() => {
+    if (!open || modal || !nonModalCloseOnEscape) return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && onClose) {
+        onClose(event);
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [open, modal, nonModalCloseOnEscape, onClose]);
 
   const handleClick = useCallback(
     (ev: React.MouseEvent<HTMLDialogElement>) => {
@@ -150,6 +189,7 @@ const BaseDialog = ({
         data-testid={testId}
         onClick={handleClick}
         onClose={handleDialogClose}
+        aria-modal={modal ? 'true' : 'false'}
         {...props}
       >
         {children}