uikit-react-public 0.14.21 → 0.21.8

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

@@ -2,7 +2,7 @@
 
 exports[`Tabs > snapshot: Auto width 1`] = `
 <div
-  class="ucl-uikit-tabs css-kfvqex"
+  class="ucl-uikit-tabs css-1hchved"
   data-testid="ucl-uikit-tabs"
   role="tablist"
 >
@@ -47,7 +47,7 @@ exports[`Tabs > snapshot: Auto width 1`] = `
 
 exports[`Tabs > snapshot: Counter 1`] = `
 <div
-  class="ucl-uikit-tabs css-kfvqex"
+  class="ucl-uikit-tabs css-1hchved"
   data-testid="ucl-uikit-tabs"
   role="tablist"
 >
@@ -96,7 +96,7 @@ exports[`Tabs > snapshot: Counter 1`] = `
 
 exports[`Tabs > snapshot: Custom test id 1`] = `
 <div
-  class="ucl-uikit-tabs css-kfvqex"
+  class="ucl-uikit-tabs css-1hchved"
   data-testid="custom-test-id"
   role="tablist"
 >
@@ -141,7 +141,7 @@ exports[`Tabs > snapshot: Custom test id 1`] = `
 
 exports[`Tabs > snapshot: Minimal props 1`] = `
 <div
-  class="ucl-uikit-tabs css-kfvqex"
+  class="ucl-uikit-tabs css-1hchved"
   data-testid="ucl-uikit-tabs"
   role="tablist"
 >

package/lib/components/Textarea/Textarea.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Textarea from './Textarea';
 
 const meta = {
-  title: 'Components/Ready to use/Textarea',
+  title: 'Components/Textarea',
   component: Textarea,
   parameters: {
     layout: 'padded',

package/lib/components/Timepicker/Timepicker.stories.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import Timepicker from './Timepicker';
 
 const meta: Meta<typeof Timepicker> = {
-  title: 'Components/Work in progress/TimePicker',
+  title: 'Components/TimePicker',
   component: Timepicker,
   decorators: [(Story) => <Story />],
 };

package/lib/components/Timepicker/Timepicker.tsx

@@ -33,6 +33,10 @@ const Timepicker = ({
     border-color: ${theme.color.text.primary};
     font-family: ${theme.font.family.primary};
     padding: ${theme.padding.p4};
+
+    &:focus-within {
+      box-shadow: ${theme.boxShadow.focus};
+    }
   `;
 
   const style = cx(NAME, baseStyle, className);

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

@@ -2,7 +2,7 @@
 
 exports[`Timepicker > snapshot 1`] = `
 <input
-  class="ucl-uikit-timepicker css-ihuem"
+  class="ucl-uikit-timepicker css-4iq7dt"
   data-testid="ucl-uikit-timepicker"
   type="time"
   value=""
@@ -11,7 +11,7 @@ exports[`Timepicker > snapshot 1`] = `
 
 exports[`Timepicker > snapshot: testID prop 1`] = `
 <input
-  class="ucl-uikit-timepicker css-ihuem"
+  class="ucl-uikit-timepicker css-4iq7dt"
   data-testid="testId"
   type="time"
   value=""

package/lib/components/Toggle/Toggle.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Toggle from './Toggle';
 
 const meta = {
-  title: 'Components/Ready to use/Toggle',
+  title: 'Components/Toggle',
   component: Toggle,
   parameters: {
     layout: 'centered',

package/lib/components/Toggle/Toggle.tsx

@@ -33,7 +33,7 @@ const Toggle = forwardRef<Ref, ToggleProps>(
       width: 48px;
       height: 24px;
       border-radius: 12px;
-      background-color: ${theme.color.neutral.grey40};
+      background-color: ${theme.colour.icon.tertiary};
       cursor: pointer;
       transition: background-color 0.2s ease-in-out;
       &:focus-visible {
@@ -43,11 +43,11 @@ const Toggle = forwardRef<Ref, ToggleProps>(
     `;
 
     const checkedStyle = css`
-      background-color: ${theme.color.interaction.blue70};
+      background-color: ${theme.colour.fill.brand};
     `;
 
     const disabledStyle = css`
-      background-color: ${theme.color.neutral.grey20};
+      background-color: ${theme.colour.surface.disabled};
       cursor: not-allowed;
     `;
 
@@ -56,8 +56,8 @@ const Toggle = forwardRef<Ref, ToggleProps>(
       css`
         &:hover {
           background-color: ${checked
-            ? theme.color.interaction.blue80
-            : theme.color.neutral.grey60};
+            ? theme.colour.fill.brandHover
+            : theme.colour.icon.secondary};
         }
       `;
 

package/lib/components/Toggle/ToggleHandle.tsx

@@ -4,8 +4,7 @@ import { useTheme } from '../../theme';
 
 export const NAME = 'ucl-uikit-toggle__handle';
 
-export interface ToggleHandleProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+export interface ToggleHandleProps extends React.HTMLAttributes<HTMLDivElement> {
   checked: boolean;
   disabled: boolean;
 }
@@ -18,7 +17,7 @@ const ToggleHandle = ({ checked, className }: ToggleHandleProps) => {
     width: 20px;
     height: 20px;
     border-radius: 50%;
-    background-color: ${theme.color.neutral.white};
+    background-color: ${theme.colour.fill.inverse};
     position: absolute;
     top: 2px;
     left: 2px;

package/lib/components/Tooltip/Tooltip.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Tooltip from './Tooltip';
 
 const meta = {
-  title: 'Components/Ready to use/Tooltip',
+  title: 'Components/Tooltip',
   component: Tooltip,
   args: {
     children: 'Default tooltip text',

package/lib/components/Tooltip/Tooltip.tsx

@@ -15,8 +15,8 @@ const Tooltip = forwardRef<Ref, TooltipProps>(
     const [theme] = useTheme();
 
     const baseStyle = css`
-      background-color: ${theme.color.neutral.grey90};
-      color: ${theme.color.text.inverted};
+      background-color: ${theme.colour.surface.inverseBrandPrimary};
+      color: ${theme.colour.text.inverse};
       font-family: ${theme.font.family.primary};
       height: 32px;
       padding: 4px 8px 4px 8px;

package/lib/components/Tooltip/__tests__/__snapshots__/tooltip.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Tooltip > snapshot: no props 1`] = `
 <span
-  class="ucl-uikit-tooltip css-h4sax9"
+  class="ucl-uikit-tooltip css-x1asgy"
   data-testid="ucl-uikit-tooltip"
 >
   test
@@ -11,7 +11,7 @@ exports[`Tooltip > snapshot: no props 1`] = `
 
 exports[`Tooltip > snapshot: testId prop 1`] = `
 <span
-  class="ucl-uikit-tooltip css-h4sax9"
+  class="ucl-uikit-tooltip css-x1asgy"
   data-testid="test123"
 >
    Info Tooltip 

package/lib/components/UclLogoNew/UclLogo.tsx

@@ -0,0 +1,42 @@
+import { SVGAttributes, memo } from 'react';
+import { ts } from 'design-system-foundations-public';
+
+const {
+  logos: {
+    ucl: { Primary: PrimaryUclLogoSvg },
+    ucl: { Secondary: SecondaryUclLogoSvg },
+    ucl: { PrimaryInverse: PrimaryInverseyUclLogoSvg },
+    ucl: { SecondaryInverse: SecondaryInverseyUclLogoSvg },
+  },
+} = ts;
+
+export const NAME = 'ucl-uikit-logo';
+
+export interface UclLogoProps extends SVGAttributes<SVGElement> {
+  variant?: 'primary' | 'secondary' | 'primary-inverse' | 'secondary-inverse';
+  testId?: string;
+}
+
+const UclLogo = ({
+  variant = 'primary',
+  testId,
+  ...props
+}: UclLogoProps) => {
+  
+  const LogoSvg = {
+    primary: PrimaryUclLogoSvg,
+    secondary: SecondaryUclLogoSvg,
+    'primary-inverse': PrimaryInverseyUclLogoSvg,
+    'secondary-inverse': SecondaryInverseyUclLogoSvg,
+  }[variant];
+
+  return (
+    <LogoSvg
+      data-testid={testId}
+      {...props}
+    />
+  );
+
+};
+
+export default memo(UclLogo);

package/lib/components/UclLogoNew/index.ts

@@ -0,0 +1,2 @@
+export { default as UclLogoNew } from './UclLogo';
+export type { UclLogoProps } from './UclLogo';

package/lib/components/WeekPicker/WeekPicker.stories.tsx

@@ -0,0 +1,145 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useArgs } from '@storybook/preview-api';
+import WeekPicker from './WeekPicker';
+
+const meta = {
+  title: 'Components/WeekPicker',
+  component: WeekPicker,
+  parameters: { layout: 'padded' },
+  argTypes: {
+    value: { control: { type: 'date' } },
+    minDate: { control: { type: 'date' } },
+    maxDate: { control: { type: 'date' } },
+    disabled: { control: { type: 'boolean' } },
+    showAcademicWeeks: { control: { type: 'boolean' } },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof WeekPicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [args, updateArgs] = useArgs();
+
+    // Storybook controls provide UNIX timestamps for dates, need to convert
+    // https://storybook.js.org/docs/essentials/controls#annotation
+    args.value = args.value ? new Date(args.value) : null;
+    args.minDate = args.minDate
+      ? new Date(args.minDate).toLocaleDateString('sv-SE')
+      : null;
+    args.maxDate = args.maxDate
+      ? new Date(args.maxDate).toLocaleDateString('sv-SE')
+      : null;
+
+    const onValueChange = (value: Date | null) => updateArgs({ value: value });
+    return (
+      <WeekPicker
+        {...args}
+        onValueChange={onValueChange}
+      />
+    );
+  },
+};
+
+const academicWeeks = [
+  { start: '2025-08-25', number: 1 },
+  { start: '2025-09-01', number: 2 },
+  { start: '2025-09-08', number: 3 },
+  { start: '2025-09-15', number: 4 },
+  { start: '2025-09-22', number: 5 },
+  { start: '2025-09-29', number: 6 },
+  { start: '2025-10-06', number: 7 },
+  { start: '2025-10-13', number: 8 },
+  { start: '2025-10-20', number: 9 },
+  { start: '2025-10-27', number: 10 },
+  { start: '2025-11-03', number: 11 },
+  { start: '2025-11-10', number: 12 },
+  { start: '2025-11-17', number: 13 },
+  { start: '2025-11-24', number: 14 },
+  { start: '2025-12-01', number: 15 },
+  { start: '2025-12-08', number: 16 },
+  { start: '2025-12-15', number: 17 },
+  { start: '2025-12-22', number: 18 },
+  { start: '2025-12-29', number: 19 },
+  { start: '2026-01-05', number: 20 },
+  { start: '2026-01-12', number: 21 },
+  { start: '2026-01-19', number: 22 },
+  { start: '2026-01-26', number: 23 },
+  { start: '2026-02-02', number: 24 },
+  { start: '2026-02-09', number: 25 },
+  { start: '2026-02-16', number: 26 },
+  { start: '2026-02-23', number: 27 },
+  { start: '2026-03-02', number: 28 },
+  { start: '2026-03-09', number: 29 },
+  { start: '2026-03-16', number: 30 },
+  { start: '2026-03-23', number: 31 },
+  { start: '2026-03-30', number: 32 },
+  { start: '2026-04-06', number: 33 },
+  { start: '2026-04-13', number: 34 },
+  { start: '2026-04-20', number: 35 },
+  { start: '2026-04-27', number: 36 },
+  { start: '2026-05-04', number: 37 },
+  { start: '2026-05-11', number: 38 },
+  { start: '2026-05-18', number: 39 },
+  { start: '2026-05-25', number: 40 },
+  { start: '2026-06-01', number: 41 },
+  { start: '2026-06-08', number: 42 },
+  { start: '2026-06-15', number: 43 },
+  { start: '2026-06-22', number: 44 },
+  { start: '2026-06-29', number: 45 },
+  { start: '2026-07-06', number: 46 },
+  { start: '2026-07-13', number: 47 },
+  { start: '2026-07-20', number: 48 },
+  { start: '2026-07-27', number: 49 },
+  { start: '2026-08-03', number: 50 },
+  { start: '2026-08-10', number: 51 },
+  { start: '2026-08-17', number: 52 },
+  { start: '2026-08-24', number: 53 },
+];
+
+export const WithAcademicWeeks: Story = {
+  name: 'With academic weeks',
+  args: {
+    showAcademicWeeks: true,
+    academicWeeks: academicWeeks,
+    value: new Date(academicWeeks[0].start), // So the week numbers appear on story mount
+  },
+  render: () => {
+    const [args, updateArgs] = useArgs();
+
+    // Storybook controls provide UNIX timestamps for dates, need to convert
+    // https://storybook.js.org/docs/essentials/controls#annotation
+    args.value = args.value ? new Date(args.value) : null;
+    args.minDate = args.minDate
+      ? new Date(args.minDate).toLocaleDateString('sv-SE')
+      : null;
+    args.maxDate = args.maxDate
+      ? new Date(args.maxDate).toLocaleDateString('sv-SE')
+      : null;
+
+    const onValueChange = (value: Date | null) => updateArgs({ value: value });
+    return (
+      <WeekPicker
+        {...args}
+        onValueChange={onValueChange}
+      />
+    );
+  },
+};
+
+export const Disabled: Story = {
+  name: 'Disabled',
+  args: {
+    disabled: true,
+    value: new Date(),
+  },
+  render: () => {
+    const [args] = useArgs();
+
+    args.value = args.value ? new Date(args.value) : null;
+
+    return <WeekPicker {...args} />;
+  },
+};

package/lib/components/WeekPicker/WeekPicker.tsx

@@ -1,5 +1,5 @@
 import { CustomDatepicker } from './subcomponents';
-import type { DatepickerProps } from '../Datepicker';
+import type { WeekPickerProps } from './WeekPicker.types';
 
 const WeekPicker = ({
   value,
@@ -9,7 +9,7 @@ const WeekPicker = ({
   disabled,
   className,
   ...props
-}: DatepickerProps) => {
+}: WeekPickerProps) => {
   return (
     <CustomDatepicker
       value={value}

package/lib/components/WeekPicker/WeekPicker.types.ts

@@ -0,0 +1,21 @@
+import type { HTMLAttributes, RefObject } from 'react';
+import type { CalendarEvent, AcademicWeek } from '../Calendar';
+
+export type DatepickerValue = Date | null;
+
+export interface WeekPickerProps extends HTMLAttributes<HTMLDivElement> {
+  value?: DatepickerValue;
+  onValueChange?: (
+    value: DatepickerValue,
+    event?: React.SyntheticEvent
+  ) => void;
+  minDate?: string | null;
+  maxDate?: string | null;
+  disabled?: boolean;
+  events?: CalendarEvent[];
+  showAcademicWeeks?: boolean;
+  academicWeeks?: AcademicWeek[];
+  testId?: string;
+  ref?: RefObject<HTMLDivElement>;
+  inputRef?: RefObject<HTMLInputElement>;
+}

package/lib/components/WeekPicker/index.ts

@@ -1 +1,2 @@
 export { default } from './WeekPicker';
+export type { WeekPickerProps, DatepickerValue } from './WeekPicker.types';

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

@@ -4,7 +4,7 @@ import { VisibleField } from './';
 import { Panel } from '../../Datepicker/subcomponents';
 import { Calendar, Icon, IconButton } from '../..';
 import { parseInputValue } from '../../Datepicker/utils';
-import type { DatepickerValue } from '../../Datepicker/Datepicker.types';
+import type { DatepickerValue } from '../WeekPicker.types';
 import type { CalendarEvent, AcademicWeek } from '../../Calendar';
 
 interface CustomDatepickerProps extends React.HTMLAttributes<HTMLDivElement> {

package/lib/components/common/Common.mdx

@@ -76,7 +76,6 @@ 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

@@ -40,8 +40,15 @@ export type { TextareaProps } from './Textarea';
 export { default as Heading } from './Heading';
 export type { HeadingProps } from './Heading';
 
+export { default as HeadingNew } from './HeadingNew';
+export type { HeadingProps as HeadingNewProps } from './HeadingNew';
+
 export { default as Paragraph } from './Paragraph';
 export type { ParagraphProps } from './Paragraph';
+
+export { default as ParagraphNew } from './ParagraphNew';
+export type { ParagraphProps as ParagraphNewProps } from './ParagraphNew';
+
 // TODO: Remove aliased export in future breaking release
 // <Paragraph> will be used in place of <Text> in the future
 export { default as Text } from './Paragraph';
@@ -53,6 +60,9 @@ export type { ModalProps } from './Modal';
 export { UclLogo } from './UclLogo';
 export type { UclLogoProps } from './UclLogo';
 
+export { UclLogoNew } from './UclLogoNew';
+export type { UclLogoProps as UclLogoNewProps } from './UclLogoNew';
+
 export { UclLogoNegativeSpace } from './UclLogo';
 export type { UclLogoNegativeSpaceProps } from './UclLogo';
 
@@ -77,18 +87,27 @@ export type { AppMenuProps } from './AppMenu';
 export { default as Menu } from './Menu';
 export type { MenuProps } from './Menu';
 
+export { default as MenuNew } from './MenuNew';
+export type { MenuProps as MenuNewProps } from './MenuNew';
+
 export { default as Select } from './Select';
 export type { SelectProps } from './Select';
 
 export { default as Footer } from './Footer';
 export type { FooterProps } from './Footer';
 
+export { default as FooterNew } from './FooterNew';
+export type { FooterProps as FooterNewProps } from './FooterNew';
+
 export { default as Divider } from './Divider';
 export type { DividerProps } from './Divider';
 
 export { default as Header } from './Header';
 export type { HeaderProps } from './Header';
 
+export { default as HeaderNew } from './HeaderNew';
+export type { HeaderProps as HeaderNewProps } from './HeaderNew';
+
 export { default as HeaderDraft } from './HeaderDraft';
 export type { HeaderDraftProps } from './HeaderDraft';
 
@@ -102,9 +121,8 @@ export { default as Tabs } from './Tabs';
 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';
@@ -134,6 +152,9 @@ 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';
 
@@ -150,3 +171,9 @@ 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/useFocusTrap.ts

@@ -22,6 +22,7 @@ interface UseFocusTrapOptions {
   initialFocusRef?: React.RefObject<HTMLElement>;
   finalFocusRef?: React.RefObject<HTMLElement>;
   restoreFocus?: boolean;
+  skipFirstFocusable?: boolean;
 }
 
 export const useFocusTrap = ({
@@ -30,6 +31,7 @@ export const useFocusTrap = ({
   initialFocusRef,
   finalFocusRef,
   restoreFocus = true,
+  skipFirstFocusable = false,
 }: UseFocusTrapOptions) => {
   const previousActiveElement = useRef<HTMLElement | null>(null);
 
@@ -87,10 +89,26 @@ export const useFocusTrap = ({
     previousActiveElement.current = document.activeElement as HTMLElement;
 
     // Focus the specified initial element or the first focusable element
-    const focusElement = initialFocusRef?.current || getFocusableElements()[0];
+    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 setTimeout to ensure the element is rendered and focusable
-      setTimeout(() => focusElement.focus(), 0);
+      // 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
@@ -98,8 +116,26 @@ export const useFocusTrap = ({
 
     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]);
+  }, [
+    isActive,
+    initialFocusRef,
+    getFocusableElements,
+    handleKeyDown,
+    skipFirstFocusable,
+  ]);
 
   // Restore focus when trap becomes inactive
   useEffect(() => {

package/lib/index.ts

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

package/lib/theme/Colours.mdx

@@ -1,5 +1,5 @@
 import { Meta, Title, Subtitle, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks';
-import theme from './defaultTheme';
+import theme from './original/defaultTheme';
 
 <Meta title="Theme/Colours" />
 <Title>Colours explorer</Title>

package/lib/theme/Theme.mdx

@@ -1,5 +1,5 @@
 import { Meta, Title, Subtitle, Source } from '@storybook/addon-docs/blocks';
-import theme from './defaultTheme';
+import theme from './original/defaultTheme';
 
 { console.log('theme:', theme) }
 

package/lib/theme/Typography.mdx

@@ -1,5 +1,5 @@
 import { Meta, Title, Subtitle, Typeset } from '@storybook/blocks';
-import theme from './defaultTheme';
+import theme from './original/defaultTheme';
 
 { console.log(theme.font) }