uikit-react-public 0.44.2 → 0.44.3

package/lib/components/Calendar/Calendar.stories.tsx

@@ -61,22 +61,57 @@ export const WithEvents: Story = {
       const currentYear = currentDate.getFullYear();
       const currentMonth = currentDate.getMonth();
       return [
-        // Grey event dots
+        // Events outside the current month are always shown as disabled, regardless of status
         { date: dateToISOString(new Date(currentYear, currentMonth, -2)) },
-        { date: dateToISOString(new Date(currentYear, currentMonth, -1)) },
-        { date: dateToISOString(new Date(currentYear, currentMonth, -1)) },
-        { date: dateToISOString(new Date(currentYear, currentMonth, 0)) },
-        { date: dateToISOString(new Date(currentYear, currentMonth, 0)) },
-        { date: dateToISOString(new Date(currentYear, currentMonth, 0)) },
-        // Blue event dots
+        {
+          date: dateToISOString(new Date(currentYear, currentMonth, -1)),
+          status: 'pending',
+        },
+        {
+          date: dateToISOString(new Date(currentYear, currentMonth, -1)),
+          status: 'pending',
+        },
+        {
+          date: dateToISOString(new Date(currentYear, currentMonth, 0)),
+          status: 'approved',
+        },
+        {
+          date: dateToISOString(new Date(currentYear, currentMonth, 0)),
+          status: 'approved',
+        },
+        {
+          date: dateToISOString(new Date(currentYear, currentMonth, 0)),
+          status: 'approved',
+        },
+        // Events within the current month show variant colours: brand (default), warning (pending), success (approved)
         { 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, 2)),
+          status: 'pending',
+        },
+        {
+          date: dateToISOString(new Date(currentYear, currentMonth, 2)),
+          status: 'pending',
+        },
+        {
+          date: dateToISOString(new Date(currentYear, currentMonth, 3)),
+          status: 'approved',
+        },
+        {
+          date: dateToISOString(new Date(currentYear, currentMonth, 3)),
+          status: 'pending',
+        },
+        {
+          date: dateToISOString(new Date(currentYear, currentMonth, 3)),
+          status: 'rejected',
+        },
       ];
     })(),
+    statuses: {
+      pending: { variant: 'warning', ariaLabel: 'Pending' },
+      approved: { variant: 'success', ariaLabel: 'Approved' },
+      rejected: { variant: 'critical', ariaLabel: 'Rejected' },
+    },
   },
   render: () => {
     const [args, updateArgs] = useArgs();

package/lib/components/Calendar/Calendar.tsx

@@ -18,6 +18,7 @@ const Calendar = ({
   minYear = DEFAULT_MIN_YEAR,
   maxYear = DEFAULT_MAX_YEAR,
   events = [],
+  statuses = {},
   showAcademicWeeks = false,
   academicWeeks = [],
   testId = NAME,
@@ -166,6 +167,7 @@ const Calendar = ({
           minDate={minDateParsed}
           maxDate={maxDateParsed}
           events={events}
+          statuses={statuses}
         />
       </div>
     </div>

package/lib/components/Calendar/Calendar.types.ts

@@ -1,6 +1,20 @@
+// Used to determine the colour of the EventDot
+export type CalendarEventVariant =
+  'critical' | 'success' | 'caution' | 'warning' | 'info';
+
+// Maps a status key to the EventDot variant and Day aria-label it should apply
+export type CalendarStatusConfig = {
+  variant: CalendarEventVariant;
+  ariaLabel: string;
+};
+
+// Keyed by the status names referenced by `CalendarEvent.status`
+export type CalendarStatuses = Record<string, CalendarStatusConfig>;
+
 // Used to display EventDots inside `<Day>` component
 export type CalendarEvent = {
   date: string; // Date string in YYYY-MM-DD format
+  status?: string; // Key into the `statuses` prop on `<Calendar>`
 };
 
 export type AcademicWeek = {
@@ -17,6 +31,7 @@ export interface CalendarProps {
   minYear?: number;
   maxYear?: number;
   events?: CalendarEvent[];
+  statuses?: CalendarStatuses;
   showAcademicWeeks?: boolean;
   academicWeeks?: AcademicWeek[];
   testId?: string;

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

@@ -1,10 +1,19 @@
 import { describe, test, expect, vi, beforeAll } from 'vitest';
-import { fireEvent, render, screen } from '@testing-library/react';
-import { ThemeContextProvider } from '../../../theme';
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import { ThemeContextProvider, theme } from '../../../theme';
 import Calendar from '../Calendar';
 
 const defaultTestId = 'ucl-uikit-calendar';
 
+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 }) => (
@@ -181,6 +190,32 @@ describe('Calendar', () => {
     ).not.toBeInTheDocument();
   });
 
+  test('Applies EventDot colours and Day aria-labels from the statuses prop', () => {
+    customRender(
+      <Calendar
+        pickedDate={new Date('2025-03-01')} // To ensure the calendar is displayed for March 2025
+        events={[
+          { date: '2025-03-15', status: 'pending' },
+          { date: '2025-03-15', status: 'pending' },
+        ]}
+        statuses={{
+          pending: { variant: 'warning', ariaLabel: 'Pending' },
+        }}
+      />
+    );
+
+    const day = screen
+      .getByText('15')
+      .closest('[data-testid="ucl-uikit-calendar__day"]') as HTMLElement;
+
+    expect(day).toHaveAttribute('aria-label', '15 March 2025, 2 Pending');
+
+    const dot = within(day).getAllByTestId('ucl-uikit-calendar__event-dot')[0];
+    expect(getComputedStyle(dot).backgroundColor).toBe(
+      hexToRgb(theme.colour.icon.warning)
+    );
+  });
+
   test('Year select uses minDate and maxDate years when provided', () => {
     customRender(
       <Calendar