uikit-react-public 0.11.24 → 0.17.4

package/lib/components/WeekPicker/subcomponents/VisibleField.tsx

@@ -0,0 +1,126 @@
+import { css, cx } from '@emotion/css';
+import { DatepickerInput } from './';
+import { Icon } from '../../..';
+import { useTheme } from '../../../theme';
+import React from 'react';
+
+interface VisibleFieldProps {
+  inputValue: string;
+  onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  onInputFocus: () => void;
+  onButtonClick: () => void;
+  disabled: boolean;
+  inputRef: React.RefObject<HTMLInputElement | null>;
+  beginningOfWeek?: string;
+  endOfWeek?: string;
+  academicWeekNumber?: number;
+}
+
+const NAME = 'ucl-uikit-weekpicker__visible-field';
+
+const VisibleField = ({
+  inputValue,
+  onInputChange,
+  onInputKeyDown,
+  onInputFocus,
+  onButtonClick,
+  disabled,
+  inputRef,
+  beginningOfWeek,
+  endOfWeek,
+  academicWeekNumber,
+}: VisibleFieldProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    // width: 100%;
+    // height: 100%;
+    box-sizing: border-box;
+    border: 1px solid ${theme.color.neutral.grey60};
+    background-color: ${theme.color.neutral.white};
+    padding: 3px 16px;
+
+    &:focus-within {
+      box-shadow: ${theme.boxShadow.focus};
+    }
+  `;
+
+  const disabledStyle = css`
+    color: ${theme.color.text.disabled};
+    background-color: ${theme.color.neutral.white};
+    border-color: ${theme.color.neutral.grey20};
+
+    cursor: not-allowed;
+    // And child elements
+    & * {
+      cursor: not-allowed;
+    }
+  `;
+
+  // The container for the <Icon.Calendar> is a <div> not an <IconButton>,
+  // so that the orange border only appears when the input has focus and the user can type.
+  // The container increases the clickable area of the icon.
+  const iconButtonStyle = css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    cursor: pointer;
+    padding-right: 8px;
+  `;
+
+  // `min-width` here accounts for a recurring problem,
+  // in which icons shrink when horizontal space is limited.
+  // TODO: This ought to be fixed in the <Icon> component itself.
+  const iconStyle = css`
+    min-width: 16px;
+    color: ${disabled
+      ? theme.color.text.disabled
+      : theme.color.text.primary}; // TODO: Needs a design token
+  `;
+
+  const style = cx(NAME, baseStyle, disabled && disabledStyle);
+
+  return (
+    <div
+      className={style}
+      data-testid={NAME}
+    >
+      <div
+        onClick={onButtonClick}
+        className={iconButtonStyle}
+      >
+        <Icon.Calendar
+          className={iconStyle}
+          size={16}
+        />
+      </div>
+      <DatepickerInput
+        value={inputValue}
+        onChange={onInputChange}
+        onKeyDown={onInputKeyDown}
+        onFocus={onInputFocus}
+        disabled={disabled}
+        ref={inputRef}
+        beginningOfWeek={beginningOfWeek}
+        endOfWeek={endOfWeek}
+        academicWeekNumber={academicWeekNumber}
+      />
+      {academicWeekNumber !== undefined && (
+        <span
+          className={css`
+            color: ${theme.color.text.secondary};
+          `}
+        >
+          W{academicWeekNumber}
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default VisibleField;

package/lib/components/WeekPicker/subcomponents/index.ts

@@ -0,0 +1,3 @@
+export { default as CustomDatepicker } from './CustomDatepicker';
+export { default as VisibleField } from './VisibleField';
+export { default as DatepickerInput } from './DatepickerInput';

package/lib/components/common/Common.mdx

@@ -76,7 +76,7 @@ The available margin props are:
   include={['m', 'm', 'mv', 'mh', 'mt', 'mb', 'ml', 'mr', 'noMargins']} 
 />
 
-[A live example of common margin props can be found in this `<Button>` story.](?path=/story/components-ready-to-use-button--common-margins)
+[A live example of common margin props can be found in this `<Button>` story.](?path=/story/components-button--common-margins)
 
 Implementation details can be found in <a href='https://github.com/ucl-isd/uikit-react/blob/main/lib/components/common/marginsStyle.ts' target='_blank'>uikit-react/components/common/MarginsStyle.tsx</a>
 

package/lib/components/index.ts

@@ -7,6 +7,9 @@ export type { InputProps } from './Input';
 export { default as Link } from './Link';
 export type { LinkProps } from './Link';
 
+export { default as StandaloneLink } from './StandaloneLink';
+export type { StandaloneLinkProps } from './StandaloneLink';
+
 export { default as Button } from './Button';
 export type { ButtonProps } from './Button';
 
@@ -100,8 +103,8 @@ export type { TabsProps } from './Tabs';
 export type { TabProps } from './Tabs/Tab';
 
 // todo:
-// export { default as Accordion } from './Accordion';
-// export type { AccordionProps } from './Accordion';
+export { default as Accordion } from './Accordion';
+export type { AccordionProps } from './Accordion';
 
 export { default as Field } from './Field';
 export type { FieldProps } from './Field';
@@ -131,5 +134,28 @@ export type { RadioProps, LabelledRadioProps } from './Radio';
 export { default as Datepicker } from './Datepicker';
 export type { DatepickerProps } from './Datepicker';
 
+export { default as NativeDatepicker } from './NativeDatepicker';
+export type { NativeDatepickerProps } from './NativeDatepicker';
+
 export { default as Calendar } from './Calendar';
 export type { CalendarProps } from './Calendar';
+
+export { default as WeekPicker } from './WeekPicker';
+
+export { default as FileInput } from './FileInput';
+export type { FileInputProps } from './FileInput';
+
+export { default as Timepicker } from './Timepicker';
+export type { TimepickerProps } from './Timepicker';
+
+export { default as CookieNotice } from './CookieNotice';
+export type { CookieNoticeProps } from './CookieNotice';
+
+export { default as Search } from './Search';
+export type { SearchProps } from './Search';
+
+export { default as Layout } from './Layout';
+export type { LayoutProps } from './Layout';
+
+export { default as Main } from './Main';
+export type { MainProps } from './Main';

package/lib/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useFocusTrap } from './useFocusTrap';
+export { default as useMediaQuery } from './useMediaQuery';

package/lib/hooks/useFocusTrap.ts

@@ -0,0 +1,159 @@
+// Generated with Claude Sonnet 4
+
+import { useEffect, useCallback, useRef } from 'react';
+
+// Selector for focusable elements
+const FOCUSABLE_ELEMENTS = [
+  'a[href]',
+  'button:not([disabled])',
+  'textarea:not([disabled])',
+  'input:not([disabled])',
+  'select:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+  '[contenteditable="true"]',
+  'audio[controls]',
+  'video[controls]',
+  'details > summary:first-of-type',
+].join(', ');
+
+interface UseFocusTrapOptions {
+  isActive: boolean;
+  containerRef: React.RefObject<HTMLElement | null>;
+  initialFocusRef?: React.RefObject<HTMLElement>;
+  finalFocusRef?: React.RefObject<HTMLElement>;
+  restoreFocus?: boolean;
+  skipFirstFocusable?: boolean;
+}
+
+export const useFocusTrap = ({
+  isActive,
+  containerRef,
+  initialFocusRef,
+  finalFocusRef,
+  restoreFocus = true,
+  skipFirstFocusable = false,
+}: UseFocusTrapOptions) => {
+  const previousActiveElement = useRef<HTMLElement | null>(null);
+
+  // Get all focusable elements within the container
+  const getFocusableElements = useCallback((): HTMLElement[] => {
+    if (!containerRef.current) return [];
+
+    const elements = containerRef.current.querySelectorAll(FOCUSABLE_ELEMENTS);
+    return Array.from(elements) as HTMLElement[];
+  }, [containerRef]);
+
+  // Handle tab key navigation
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (!isActive || event.key !== 'Tab') return;
+
+      const focusableElements = getFocusableElements();
+      if (focusableElements.length === 0) {
+        event.preventDefault();
+        return;
+      }
+
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+      const currentFocus = document.activeElement as HTMLElement;
+
+      if (event.shiftKey) {
+        // Shift + Tab (moving backwards)
+        if (
+          currentFocus === firstElement ||
+          !containerRef.current?.contains(currentFocus)
+        ) {
+          event.preventDefault();
+          lastElement.focus();
+        }
+      } else {
+        // Tab (moving forwards)
+        if (
+          currentFocus === lastElement ||
+          !containerRef.current?.contains(currentFocus)
+        ) {
+          event.preventDefault();
+          firstElement.focus();
+        }
+      }
+    },
+    [isActive, getFocusableElements, containerRef]
+  );
+
+  // Set initial focus when trap becomes active
+  useEffect(() => {
+    if (!isActive) return;
+
+    // Store the previously focused element
+    previousActiveElement.current = document.activeElement as HTMLElement;
+
+    // Focus the specified initial element or the first focusable element
+    const focusableElements = getFocusableElements();
+    const defaultIndex =
+      skipFirstFocusable && focusableElements.length > 1 ? 1 : 0;
+    const focusElement =
+      initialFocusRef?.current || focusableElements[defaultIndex];
+
+    let requestAnimationFrameId: number | null = null;
+    let setTimeoutId: ReturnType<typeof setTimeout> | undefined;
+
+    if (focusElement) {
+      // Use requestAnimationFrame if available, otherwise setTimeout
+      if (typeof requestAnimationFrame === 'function') {
+        requestAnimationFrameId = requestAnimationFrame(() => {
+          focusElement.focus();
+        });
+      } else {
+        setTimeoutId = setTimeout(() => {
+          focusElement.focus();
+        }, 0);
+      }
+    }
+
+    // Add event listener for keyboard navigation
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      if (
+        typeof requestAnimationFrame === 'function' &&
+        requestAnimationFrameId !== null
+      ) {
+        cancelAnimationFrame(requestAnimationFrameId);
+      }
+      if (
+        typeof requestAnimationFrame !== 'function' &&
+        setTimeoutId !== undefined
+      ) {
+        clearTimeout(setTimeoutId);
+      }
+    };
+  }, [
+    isActive,
+    initialFocusRef,
+    getFocusableElements,
+    handleKeyDown,
+    skipFirstFocusable,
+  ]);
+
+  // Restore focus when trap becomes inactive
+  useEffect(() => {
+    if (isActive) return; // Only run when becoming inactive
+
+    if (restoreFocus && previousActiveElement.current) {
+      // Use setTimeout to ensure the dialog is fully closed before restoring focus
+      const restoreTimeout = setTimeout(() => {
+        const elementToFocus =
+          finalFocusRef?.current || previousActiveElement.current;
+        if (elementToFocus && document.contains(elementToFocus)) {
+          elementToFocus.focus();
+        }
+        // Clear the stored element after restoring focus
+        previousActiveElement.current = null;
+      }, 100); // Longer delay for native dialog close
+
+      return () => clearTimeout(restoreTimeout);
+    }
+  }, [isActive, finalFocusRef, restoreFocus]);
+};

package/lib/index.ts

@@ -1,3 +1,5 @@
 export { cx, css } from '@emotion/css';
 export * from './components';
 export * from './theme';
+export * from './hooks';
+export * from './utils';

package/lib/theme/defaultTheme.ts

@@ -47,6 +47,7 @@ const pink20 = '#DEB8C3'; // UCL vibrant pink
 const black100 = '#000000';
 const black90 = '#1A1A1A';
 const black80 = '#333333';
+const black70 = '#4D4D4D';
 const black60 = '#666666';
 const black40 = '#999999';
 const black20 = '#CCCCCC';
@@ -102,6 +103,7 @@ const baseColour = {
   black100,
   black90,
   black80,
+  black70,
   black60,
   black40,
   black20,
@@ -189,7 +191,9 @@ const systemColours = {
 
 const linkColours = {
   default: baseColour.blue70,
+  secondaryDefault: baseColour.black90,
   hover: baseColour.blue100,
+  secondaryHover: baseColour.black70,
   visited: baseColour.purple40,
   disabled: baseColour.black20,
 };
@@ -203,6 +207,7 @@ const neutralColours = {
   black: blackAndWhite.black,
   grey90: baseColour.black90,
   grey80: baseColour.black80,
+  grey70: baseColour.black70,
   grey60: baseColour.black60,
   grey40: baseColour.black40,
   grey20: baseColour.black20,
@@ -253,6 +258,7 @@ const baseSizes = {
 };
 
 const margin = {
+  m0: 0,
   m2: baseSizes.s2,
   m4: baseSizes.s4,
   m6: baseSizes.s6,
@@ -271,6 +277,7 @@ const margin = {
 };
 
 const padding = {
+  p0: 0,
   p2: baseSizes.s2,
   p4: baseSizes.s4,
   p6: baseSizes.s6,

package/lib/utils/__tests__/announce.test.ts

@@ -0,0 +1,121 @@
+import { describe, test, expect, beforeEach, afterEach, vi } from 'vitest';
+import { screen, waitFor } from '@testing-library/react';
+import announce, { __resetForTesting } from '../announce';
+
+describe('announce (ARIA live region)', () => {
+  beforeEach(() => {
+    // Reset DOM before each test
+    document.body.innerHTML = '';
+    __resetForTesting();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  test('creates a live region on first announce', async () => {
+    announce('Hello world');
+
+    const region = await screen.findByTestId('aria-live-region');
+
+    expect(region).toBeTruthy();
+    expect(region.getAttribute('aria-live')).toBe('polite');
+    expect(region.getAttribute('aria-atomic')).toBe('true');
+  });
+
+  test('visually hides the live region but keeps it accessible', async () => {
+    announce('Hidden message');
+
+    const region = await screen.findByTestId('aria-live-region');
+
+    expect(region.style.position).toBe('absolute');
+    expect(region.style.left).toBe('-9999px');
+    expect(region.style.width).toBe('1px');
+    expect(region.style.height).toBe('1px');
+    expect(region.style.overflow).toBe('hidden');
+  });
+
+  test('clears text and sets message after timeout', async () => {
+    announce('This is an announcement');
+
+    const region = await screen.findByTestId('aria-live-region');
+
+    await waitFor(() => {
+      expect(region.textContent).toBe('This is an announcement');
+    });
+  });
+
+  test('reuses the same live region on multiple announcements', async () => {
+    announce('First message');
+
+    const region = await screen.findByTestId('aria-live-region');
+
+    expect(region).toBeTruthy();
+
+    announce('Second message');
+
+    // Query all instances
+    const allRegions = await screen.findAllByTestId('aria-live-region');
+
+    expect(allRegions.length).toBe(1);
+  });
+
+  test('queues multiple announcements and processes sequentially', async () => {
+    vi.useFakeTimers();
+
+    announce('First message');
+    announce('Second message');
+
+    // Query the live region
+    const region = document.querySelector(
+      '[data-testid="aria-live-region"]'
+    ) as HTMLElement;
+
+    // Initially empty
+    expect(region.textContent).toBe('');
+
+    // After 100ms, first message appears
+    vi.advanceTimersByTime(100);
+    expect(region.textContent).toBe('First message');
+
+    // Second message should NOT appear yet (need to wait 1000ms + 100ms more)
+    vi.advanceTimersByTime(500);
+    expect(region.textContent).toBe('First message');
+
+    // After remaining 500ms of the 1000ms delay, queue processes but text is cleared
+    vi.advanceTimersByTime(500);
+    expect(region.textContent).toBe('');
+
+    // After another 100ms, second message appears
+    vi.advanceTimersByTime(100);
+    expect(region.textContent).toBe('Second message');
+  });
+
+  test('duplicate prevention while currently announcing', async () => {
+    vi.useFakeTimers();
+
+    announce('Processing');
+    announce('Processing'); // Duplicate - should be ignored
+    announce('Processing'); // Duplicate - should be ignored
+    announce('Done'); // Different message - should be queued
+
+    const region = document.querySelector(
+      '[data-testid="aria-live-region"]'
+    ) as HTMLElement;
+
+    // First message appears
+    vi.advanceTimersByTime(100);
+    expect(region.textContent).toBe('Processing');
+
+    // Complete first message, next should be "Done" (duplicates were ignored)
+    vi.advanceTimersByTime(1000);
+    vi.advanceTimersByTime(100);
+    expect(region.textContent).toBe('Done');
+
+    // No more messages in queue
+    vi.advanceTimersByTime(1000);
+    vi.advanceTimersByTime(100);
+    // Still "Done" - nothing else was queued
+    expect(region.textContent).toBe('Done');
+  });
+});

package/lib/utils/__tests__/capitalise.test.ts

@@ -0,0 +1,40 @@
+import { describe, it, expect } from 'vitest';
+import capitalise from '../capitalise';
+
+describe('capitalise', () => {
+  it('should capitalize the first letter of a lowercase word', () => {
+    expect(capitalise('hello')).toBe('Hello');
+  });
+
+  it('should capitalize the first letter of a sentence', () => {
+    expect(capitalise('hello world')).toBe('Hello world');
+  });
+
+  it('should handle already capitalized text', () => {
+    expect(capitalise('Hello')).toBe('Hello');
+  });
+
+  it('should handle single character strings', () => {
+    expect(capitalise('a')).toBe('A');
+  });
+
+  it('should handle strings that start with uppercase', () => {
+    expect(capitalise('HELLO')).toBe('HELLO');
+  });
+
+  it('should handle empty strings', () => {
+    expect(capitalise('')).toBe('');
+  });
+
+  it('should handle strings with numbers at the start', () => {
+    expect(capitalise('123abc')).toBe('123abc');
+  });
+
+  it('should handle strings with special characters at the start', () => {
+    expect(capitalise('!hello')).toBe('!hello');
+  });
+
+  it('should preserve the rest of the string as-is', () => {
+    expect(capitalise('hELLO')).toBe('HELLO');
+  });
+});