uikit-react-public 0.44.0 → 0.44.3

package/lib/components/Calendar/index.ts

@@ -1,2 +1,7 @@
 export { default } from './Calendar';
-export type { CalendarProps, CalendarEvent, AcademicWeek } from './Calendar.types';
+export type {
+  CalendarProps,
+  CalendarEvent,
+  CalendarStatuses,
+  AcademicWeek,
+} from './Calendar.types';

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

@@ -1,7 +1,7 @@
 import { css, cx } from '@emotion/css';
 import { EventDot } from './';
 import { useTheme } from '../../../theme';
-import type { CalendarEvent } from '../Calendar.types';
+import type { CalendarEvent, CalendarStatuses } from '../Calendar.types';
 
 export interface DayProps {
   date: Date;
@@ -11,6 +11,8 @@ export interface DayProps {
   isInCurrentMonth?: boolean;
   isDisabled?: boolean;
   events?: CalendarEvent[]; // Max 3 events are displayed as dots
+  statuses?: CalendarStatuses;
+  ariaLabel?: string;
 }
 
 const NAME = 'ucl-uikit-calendar__day';
@@ -23,6 +25,8 @@ const Day = ({
   isInCurrentMonth = true,
   isDisabled = false,
   events = [],
+  statuses = {},
+  ariaLabel,
 }: DayProps) => {
   const [theme] = useTheme();
   const { md, mdSemibold } = theme.typography.body;
@@ -30,13 +34,37 @@ const Day = ({
   // More than 3 dots displayed breaks the layout
   const displayedEvents = events.slice(0, 3);
 
+  // Summarise all events (not just the displayed dots) as "<count> <label>" groups,
+  // e.g. "2 Pending, 1 Approved", so screen reader users learn about events beyond the 3 shown
+  const eventSummary = events.reduce<Map<string, number>>((counts, event) => {
+    const label =
+      (event.status && statuses[event.status]?.ariaLabel) || 'event';
+    counts.set(label, (counts.get(label) ?? 0) + 1);
+    return counts;
+  }, new Map());
+
+  const eventSummaryLabel = Array.from(eventSummary.entries())
+    .map(([label, count]) =>
+      label === 'event'
+        ? `${count} ${count === 1 ? 'event' : 'events'}`
+        : `${count} ${label}`
+    )
+    .join(', ');
+
+  const defaultAriaLabel = `${date.getDate()} ${date.toLocaleString('default', { month: 'long' })} ${date.getFullYear()}`;
+  const computedAriaLabel =
+    ariaLabel ??
+    [defaultAriaLabel, eventSummaryLabel].filter(Boolean).join(', ');
+
   const handlePick = (event: React.MouseEvent) => {
-    if (date && !isDisabled && onPick) {
+    if (date && onPick) {
       onPick(date, event);
     }
   };
 
   const backgroundStyle = css`
+    all: unset;
+    box-sizing: border-box;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -45,12 +73,16 @@ const Day = ({
     height: 40px;
     background-color: ${theme.colour.fill.inverse};
     cursor: pointer;
-    outline: none;
 
     &:hover {
       background-color: ${theme.colour.fill.primary};
     }
 
+    &:focus-visible {
+      box-shadow: ${theme.boxShadow.focus};
+      z-index: 1;
+    }
+
     ${
       isSelected &&
       css`
@@ -120,10 +152,14 @@ const Day = ({
   const style = cx(NAME, backgroundStyle);
 
   return (
-    <div
+    <button
+      type='button'
       onClick={handlePick}
+      disabled={isDisabled}
       className={style}
       data-testid={NAME}
+      aria-label={computedAriaLabel}
+      tabIndex={-1}
     >
       <div className={foregroundStyle}>{date.getDate()}</div>
       <div className={eventDotsContainerStyle}>
@@ -131,11 +167,14 @@ const Day = ({
           <EventDot
             key={index}
             inverted={isSelected}
+            variant={
+              _event.status ? statuses[_event.status]?.variant : undefined
+            }
             inCurrentMonth={isInCurrentMonth}
           />
         ))}
       </div>
-    </div>
+    </button>
   );
 };
 

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

@@ -3,19 +3,55 @@ import { useTheme } from '../../../theme';
 
 const NAME = 'ucl-uikit-calendar__event-dot';
 
+import type { CalendarEventVariant } from '../Calendar.types';
+
 interface EventDotProps {
   inverted: boolean;
   inCurrentMonth: boolean;
+  variant?: CalendarEventVariant;
 }
 
-const EventDot = ({ inverted, inCurrentMonth }: EventDotProps) => {
+const getBackgroundColour = (
+  theme: ReturnType<typeof useTheme>[0],
+  inverted: boolean,
+  inCurrentMonth: boolean,
+  variant?: CalendarEventVariant
+) => {
+  if (!inCurrentMonth) {
+    return theme.colour.icon.disabled;
+  }
+
+  switch (variant) {
+    case 'critical':
+      return theme.colour.icon.critical;
+    case 'success':
+      return theme.colour.icon.success;
+    case 'caution':
+      return theme.colour.icon.caution;
+    case 'warning':
+      return theme.colour.icon.warning;
+    case 'info':
+      if (inverted) {
+        return theme.colour.icon.inverse;
+      }
+      return theme.colour.fill.brand;
+    default:
+      if (inverted) {
+        return theme.colour.icon.inverse;
+      }
+      return theme.colour.fill.brand;
+  }
+};
+
+const EventDot = ({ inverted, inCurrentMonth, variant }: EventDotProps) => {
   const [theme] = useTheme();
 
-  const backgroundColour = inCurrentMonth
-    ? inverted
-      ? theme.colour.icon.inverse
-      : theme.colour.icon.brand
-    : theme.colour.icon.tertiary;
+  const backgroundColour = getBackgroundColour(
+    theme,
+    inverted,
+    inCurrentMonth,
+    variant
+  );
 
   const baseStyle = css`
     width: 6px;

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

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import { ColumnHeading, Day } from './';
 import { getDatesForCalendarGrid } from '../utils';
 import { useTheme } from '../../../theme';
-import type { CalendarEvent } from '../Calendar.types';
+import type { CalendarEvent, CalendarStatuses } from '../Calendar.types';
 
 interface GridProps {
   month: Date; // 1st day of the month
@@ -12,6 +12,7 @@ interface GridProps {
   minDate: Date | null;
   maxDate: Date | null;
   events: CalendarEvent[];
+  statuses?: CalendarStatuses;
 }
 
 const NAME = 'ucl-uikit-calendar__grid';
@@ -51,6 +52,7 @@ const Grid = ({
   minDate,
   maxDate,
   events,
+  statuses = {},
 }: GridProps) => {
   // Fix minDate timezone issues by zeroing time if valid
   if (minDate && !isNaN(minDate.getTime())) minDate.setHours(0, 0, 0, 0);
@@ -106,6 +108,7 @@ const Grid = ({
             }
             onPick={onDatePick}
             events={dateEvents}
+            statuses={statuses}
           />
         );
       })}

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

@@ -0,0 +1,139 @@
+import { describe, test, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ThemeContextProvider, theme } from '../../../../theme';
+import Day from '../Day';
+import type { CalendarStatuses } from '../../Calendar.types';
+
+const defaultTestId = 'ucl-uikit-calendar__day';
+
+const hexToRgb = (hex: string) => {
+  const value = hex.replace('#', '');
+  const red = parseInt(value.slice(0, 2), 16);
+  const green = parseInt(value.slice(2, 4), 16);
+  const blue = parseInt(value.slice(4, 6), 16);
+
+  return `rgb(${red}, ${green}, ${blue})`;
+};
+
+const customRender = (ui: React.ReactElement) => {
+  return render(ui, {
+    wrapper: ({ children }) => (
+      <ThemeContextProvider>{children}</ThemeContextProvider>
+    ),
+  });
+};
+
+const statuses: CalendarStatuses = {
+  pending: { variant: 'warning', ariaLabel: 'Pending' },
+  approved: { variant: 'success', ariaLabel: 'Approved' },
+};
+
+describe('Day', () => {
+  test('Default aria-label has no event summary when there are no events', () => {
+    customRender(<Day date={new Date(2026, 7, 27)} />);
+    expect(screen.getByTestId(defaultTestId)).toHaveAttribute(
+      'aria-label',
+      '27 August 2026'
+    );
+  });
+
+  test('Summarises event statuses with counts in the aria-label', () => {
+    customRender(
+      <Day
+        date={new Date(2026, 7, 27)}
+        events={[
+          { date: '2026-08-27', status: 'pending' },
+          { date: '2026-08-27', status: 'pending' },
+          { date: '2026-08-27', status: 'approved' },
+        ]}
+        statuses={statuses}
+      />
+    );
+    expect(screen.getByTestId(defaultTestId)).toHaveAttribute(
+      'aria-label',
+      '27 August 2026, 2 Pending, 1 Approved'
+    );
+  });
+
+  test('Falls back to a generic "event" label for events with an unmatched status', () => {
+    customRender(
+      <Day
+        date={new Date(2026, 7, 27)}
+        events={[{ date: '2026-08-27', status: 'unknown' }]}
+        statuses={statuses}
+      />
+    );
+    expect(screen.getByTestId(defaultTestId)).toHaveAttribute(
+      'aria-label',
+      '27 August 2026, 1 event'
+    );
+  });
+
+  test('Summarises events beyond the 3 displayed as dots', () => {
+    customRender(
+      <Day
+        date={new Date(2026, 7, 27)}
+        events={[
+          { date: '2026-08-27', status: 'pending' },
+          { date: '2026-08-27', status: 'pending' },
+          { date: '2026-08-27', status: 'pending' },
+          { date: '2026-08-27', status: 'pending' },
+        ]}
+        statuses={statuses}
+      />
+    );
+    expect(screen.getByTestId(defaultTestId)).toHaveAttribute(
+      'aria-label',
+      '27 August 2026, 4 Pending'
+    );
+  });
+
+  test('An explicit ariaLabel overrides the computed one', () => {
+    customRender(
+      <Day
+        date={new Date(2026, 7, 27)}
+        ariaLabel='Custom label'
+        events={[{ date: '2026-08-27', status: 'pending' }]}
+        statuses={statuses}
+      />
+    );
+    expect(screen.getByTestId(defaultTestId)).toHaveAttribute(
+      'aria-label',
+      'Custom label'
+    );
+  });
+
+  test('Resolves each event dot colour via the statuses config', () => {
+    customRender(
+      <Day
+        date={new Date(2026, 7, 27)}
+        events={[
+          { date: '2026-08-27', status: 'pending' },
+          { date: '2026-08-27', status: 'approved' },
+        ]}
+        statuses={statuses}
+      />
+    );
+    const dots = screen.getAllByTestId('ucl-uikit-calendar__event-dot');
+    expect(getComputedStyle(dots[0]).backgroundColor).toBe(
+      hexToRgb(theme.colour.icon.warning)
+    );
+    expect(getComputedStyle(dots[1]).backgroundColor).toBe(
+      hexToRgb(theme.colour.icon.success)
+    );
+  });
+
+  test('Falls back to the default dot colour when an event status has no matching config', () => {
+    customRender(
+      <Day
+        date={new Date(2026, 7, 27)}
+        events={[{ date: '2026-08-27', status: 'unknown' }]}
+        statuses={statuses}
+      />
+    );
+    const dot = screen.getByTestId('ucl-uikit-calendar__event-dot');
+    expect(getComputedStyle(dot).backgroundColor).toBe(
+      hexToRgb(theme.colour.icon.brand)
+    );
+  });
+});

package/lib/components/Calendar/subcomponents/__tests__/EventDot.test.tsx

@@ -0,0 +1,78 @@
+import { describe, test, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ThemeContextProvider, theme } from '../../../../theme';
+import EventDot from '../EventDot';
+
+const defaultTestId = 'ucl-uikit-calendar__event-dot';
+
+const hexToRgb = (hex: string) => {
+  const value = hex.replace('#', '');
+  const red = parseInt(value.slice(0, 2), 16);
+  const green = parseInt(value.slice(2, 4), 16);
+  const blue = parseInt(value.slice(4, 6), 16);
+
+  return `rgb(${red}, ${green}, ${blue})`;
+};
+
+const customRender = (ui: React.ReactElement) => {
+  return render(ui, {
+    wrapper: ({ children }) => (
+      <ThemeContextProvider>{children}</ThemeContextProvider>
+    ),
+  });
+};
+
+const getBackgroundColour = () =>
+  getComputedStyle(screen.getByTestId(defaultTestId)).backgroundColor;
+
+describe('EventDot', () => {
+  test('Uses the disabled colour when outside the current month, regardless of variant', () => {
+    customRender(
+      <EventDot
+        inverted={false}
+        inCurrentMonth={false}
+        variant='success'
+      />
+    );
+    expect(getBackgroundColour()).toBe(hexToRgb(theme.colour.icon.disabled));
+  });
+
+  test.each([
+    ['critical', theme.colour.icon.critical],
+    ['success', theme.colour.icon.success],
+    ['caution', theme.colour.icon.caution],
+    ['warning', theme.colour.icon.warning],
+  ] as const)(
+    'Uses the icon colour for the %s variant',
+    (variant, expectedColour) => {
+      customRender(
+        <EventDot
+          inverted={false}
+          inCurrentMonth
+          variant={variant}
+        />
+      );
+      expect(getBackgroundColour()).toBe(hexToRgb(expectedColour));
+    }
+  );
+
+  test('Defaults to the brand colour when no variant is provided', () => {
+    customRender(
+      <EventDot
+        inverted={false}
+        inCurrentMonth
+      />
+    );
+    expect(getBackgroundColour()).toBe(hexToRgb(theme.colour.icon.brand));
+  });
+
+  test('Uses the inverse fill colour when inverted and no variant is provided', () => {
+    customRender(
+      <EventDot
+        inverted
+        inCurrentMonth
+      />
+    );
+    expect(getBackgroundColour()).toBe(hexToRgb(theme.colour.fill.inverse));
+  });
+});

package/lib/components/Datepicker/Datepicker.stories.tsx

@@ -12,6 +12,7 @@ const meta = {
     value: { control: { type: 'date' } },
     minDate: { control: { type: 'date' } },
     maxDate: { control: { type: 'date' } },
+    pickedMonth: { control: { type: 'date' } },
     disabled: { control: { type: 'boolean' } },
     clearable: { control: { type: 'boolean' } },
     showAcademicWeeks: { control: { type: 'boolean' } },
@@ -22,6 +23,13 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+// Convert UNIX timestamp from Storybook controls to `Date` object
+// https://storybook.js.org/docs/essentials/controls#annotation
+const parseDateFromUNIXTimestamp = (timestamp: number) => {
+  const date = new Date(timestamp);
+  return isNaN(date.getTime()) ? null : date;
+};
+
 const dateToISOString = (date: Date) => {
   return date.toISOString().split('T')[0];
 };
@@ -29,9 +37,9 @@ const dateToISOString = (date: Date) => {
 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.pickedMonth = args.pickedMonth
+      ? parseDateFromUNIXTimestamp(args.pickedMonth)
+      : null;
     args.value = args.value ? new Date(args.value) : null;
     args.minDate = args.minDate
       ? new Date(args.minDate).toLocaleDateString('sv-SE')
@@ -54,9 +62,9 @@ export const Default: Story = {
 export const InAField: 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.pickedMonth = args.pickedMonth
+      ? parseDateFromUNIXTimestamp(args.pickedMonth)
+      : null;
     args.value = args.value ? new Date(args.value) : null;
     args.minDate = args.minDate
       ? new Date(args.minDate).toLocaleDateString('sv-SE')
@@ -105,20 +113,43 @@ export const WithEvents: Story = {
         { date: dateToISOString(new Date(currentYear, currentMonth, 0)) },
         { date: dateToISOString(new Date(currentYear, currentMonth, 0)) },
         // Blue event dots
-        { date: dateToISOString(new Date(currentYear, currentMonth, 1)) },
-        { date: dateToISOString(new Date(currentYear, currentMonth, 2)) },
-        { date: dateToISOString(new Date(currentYear, currentMonth, 2)) },
-        { date: dateToISOString(new Date(currentYear, currentMonth, 3)) },
-        { date: dateToISOString(new Date(currentYear, currentMonth, 3)) },
-        { date: dateToISOString(new Date(currentYear, currentMonth, 3)) },
+        {
+          date: dateToISOString(new Date(currentYear, currentMonth, 1)),
+          status: 'pending',
+        },
+        {
+          date: dateToISOString(new Date(currentYear, currentMonth, 2)),
+          status: 'approved',
+        },
+        {
+          date: dateToISOString(new Date(currentYear, currentMonth, 2)),
+          status: 'rejected',
+        },
+        {
+          date: dateToISOString(new Date(currentYear, currentMonth, 3)),
+          status: 'pending',
+        },
+        {
+          date: dateToISOString(new Date(currentYear, currentMonth, 3)),
+          status: 'approved',
+        },
+        {
+          date: dateToISOString(new Date(currentYear, currentMonth, 3)),
+          status: 'approved',
+        },
       ];
     })(),
+    statuses: {
+      pending: { variant: 'warning', ariaLabel: 'Pending' },
+      approved: { variant: 'success', ariaLabel: 'Approved' },
+      rejected: { variant: 'critical', ariaLabel: 'Rejected' },
+    },
   },
   render: () => {
     const [args, updateArgs] = useArgs();
-
-    // Storybook controls provide UNIX timestamps for dates, need to convert
-    // https://storybook.js.org/docs/essentials/controls#annotation
+    args.pickedMonth = args.pickedMonth
+      ? parseDateFromUNIXTimestamp(args.pickedMonth)
+      : null;
     args.value = args.value ? new Date(args.value) : null;
     args.minDate = args.minDate
       ? new Date(args.minDate).toLocaleDateString('sv-SE')
@@ -204,9 +235,9 @@ export const WithAcademicWeeks: 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.pickedMonth = args.pickedMonth
+      ? parseDateFromUNIXTimestamp(args.pickedMonth)
+      : null;
     args.value = args.value ? new Date(args.value) : null;
     args.minDate = args.minDate
       ? new Date(args.minDate).toLocaleDateString('sv-SE')
@@ -253,9 +284,9 @@ export const MinMaxDates: 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.pickedMonth = args.pickedMonth
+      ? parseDateFromUNIXTimestamp(args.pickedMonth)
+      : null;
     args.value = args.value ? new Date(args.value) : null;
     args.minDate = args.minDate
       ? new Date(args.minDate).toLocaleDateString('sv-SE')
@@ -283,9 +314,9 @@ export const Clearable: 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.pickedMonth = args.pickedMonth
+      ? parseDateFromUNIXTimestamp(args.pickedMonth)
+      : null;
     args.value = args.value ? new Date(args.value) : null;
     args.minDate = args.minDate
       ? new Date(args.minDate).toLocaleDateString('sv-SE')

package/lib/components/Datepicker/Datepicker.types.ts

@@ -1,5 +1,9 @@
 import type { HTMLAttributes, RefObject } from 'react';
-import type { CalendarEvent, AcademicWeek } from '../Calendar';
+import type {
+  CalendarEvent,
+  CalendarStatuses,
+  AcademicWeek,
+} from '../Calendar';
 import type { InputProps } from './subcomponents/DatepickerInput';
 
 export type DatepickerValue = Date | null;
@@ -14,7 +18,9 @@ interface BaseDatepickerProps {
   maxDate?: string | null; // ISO date string: YYYY-MM-DD
   minYear?: number;
   maxYear?: number;
+  pickedMonth?: Date | null; // Pre-selects a month to display when no value is set
   events?: CalendarEvent[];
+  statuses?: CalendarStatuses;
   showAcademicWeeks?: boolean;
   academicWeeks?: AcademicWeek[];
   testId?: string;