uikit-react-public 0.11.20 → 0.14.21

package/lib/components/{Datepicker → Calendar}/utils/getDatesForCalendarGrid/getDatesForCalendarGrid.ts

@@ -17,24 +17,15 @@
  * ```
  */
 const getDatesForCalendarGrid = (date: Date): Date[] => {
-  if (!date || !(date instanceof Date))
-    throw new Error('No date provided');
+  if (!date || !(date instanceof Date)) throw new Error('No date provided');
 
   const month = date.getMonth();
-  const daysInMonth = new Date(
-    date.getFullYear(),
-    month + 1,
-    0
-  ).getDate();
+  const daysInMonth = new Date(date.getFullYear(), month + 1, 0).getDate();
 
   // Get all days in current month
   const dates: Date[] = [];
   for (let day = 1; day <= daysInMonth; day++) {
-    const newDate = new Date(
-      date.getFullYear(),
-      month,
-      day
-    );
+    const newDate = new Date(date.getFullYear(), month, day);
     if (newDate.getMonth() !== month) break;
     dates.push(newDate);
   }
@@ -43,28 +34,14 @@ const getDatesForCalendarGrid = (date: Date): Date[] => {
   // Sunday (0) should become 6
   // Monday (1) should become 0
   // Tuesday (2) should become 1, etc.
-  const adjustDay = (day: number): number =>
-    day === 0 ? 6 : day - 1;
+  const adjustDay = (day: number): number => (day === 0 ? 6 : day - 1);
 
   // Calculate previous month's "grey days"
   const prevMonthGreyDays = [];
-  const prevMonth = new Date(
-    date.getFullYear(),
-    month - 1,
-    1
-  );
-  const firstDayOfMonth = new Date(
-    date.getFullYear(),
-    month,
-    1
-  ).getDay();
-  const numberOfDaysFromPrevMonth =
-    adjustDay(firstDayOfMonth);
-  const totalDaysInPrevMonth = new Date(
-    date.getFullYear(),
-    month,
-    0
-  ).getDate();
+  const prevMonth = new Date(date.getFullYear(), month - 1, 1);
+  const firstDayOfMonth = new Date(date.getFullYear(), month, 1).getDay();
+  const numberOfDaysFromPrevMonth = adjustDay(firstDayOfMonth);
+  const totalDaysInPrevMonth = new Date(date.getFullYear(), month, 0).getDate();
 
   for (let i = numberOfDaysFromPrevMonth; i > 0; i--) {
     prevMonthGreyDays.push(
@@ -78,26 +55,17 @@ const getDatesForCalendarGrid = (date: Date): Date[] => {
 
   // Calculate next month's "grey days"
   const nextMonthGreyDays = [];
-  const nextMonth = new Date(
-    date.getFullYear(),
-    month + 1,
-    1
-  );
+  const nextMonth = new Date(date.getFullYear(), month + 1, 1);
   const lastDayOfMonth = new Date(
     date.getFullYear(),
     month,
     daysInMonth
   ).getDay();
-  const numberOfDaysFromNextMonth =
-    6 - adjustDay(lastDayOfMonth);
+  const numberOfDaysFromNextMonth = 6 - adjustDay(lastDayOfMonth);
 
   for (let i = 1; i <= numberOfDaysFromNextMonth; i++) {
     nextMonthGreyDays.push(
-      new Date(
-        nextMonth.getFullYear(),
-        nextMonth.getMonth(),
-        i
-      )
+      new Date(nextMonth.getFullYear(), nextMonth.getMonth(), i)
     );
   }
 

package/lib/components/Calendar/utils/index.ts

@@ -0,0 +1,4 @@
+export { default as normaliseMonth } from './normaliseMonth/normaliseMonth';
+export { default as parseDateFromString } from './parseDateFromString/parseDateFromString';
+export { default as getAcademicWeekNumbers } from './getAcademicWeekNumbers/getAcademicWeekNumbers';
+export { default as getDatesForCalendarGrid } from './getDatesForCalendarGrid/getDatesForCalendarGrid';

package/lib/components/Calendar/utils/normaliseMonth/normaliseMonth.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, test } from 'vitest';
+import normaliseMonth from './normaliseMonth';
+
+describe('Calendar: normaliseMonth', () => {
+  test('Should return null if given undefined', () => {
+    expect(normaliseMonth(undefined)).toBeNull();
+  });
+
+  test('Should return null if given null', () => {
+    expect(normaliseMonth(null)).toBeNull();
+  });
+
+  test('Returns a Date object set to the first of the month', () => {
+    const date = new Date('2025-03-10');
+    const normalisedDate = normaliseMonth(date);
+    expect(normalisedDate).toBeInstanceOf(Date);
+    expect(normalisedDate?.getFullYear()).toBe(2025);
+    expect(normalisedDate?.getMonth()).toBe(2); // March (0-indexed)
+    expect(normalisedDate?.getDate()).toBe(1);
+  });
+
+  test('Works for a date within daylight saving time', () => {
+    const date = new Date('2025-06-15');
+    const normalisedDate = normaliseMonth(date);
+    expect(normalisedDate).toBeInstanceOf(Date);
+    expect(normalisedDate?.getFullYear()).toBe(2025);
+    expect(normalisedDate?.getMonth()).toBe(5); // June (0-indexed)
+    expect(normalisedDate?.getDate()).toBe(1);
+  });
+
+  test('Returned date is normalised for midnight', () => {
+    const date = new Date('2025-01-01T12:34:56');
+    const normalisedDate = normaliseMonth(date);
+    expect(normalisedDate).toBeInstanceOf(Date);
+    expect(normalisedDate?.getFullYear()).toBe(2025);
+    expect(normalisedDate?.getMonth()).toBe(0); // January (0-indexed)
+    expect(normalisedDate?.getDate()).toBe(1);
+    expect(normalisedDate?.getHours()).toBe(0);
+  });
+});

package/lib/components/Calendar/utils/normaliseMonth/normaliseMonth.ts

@@ -0,0 +1,16 @@
+/**
+ * Normalises a given date to the first day of its month (with the time set to midnight).
+ * If the input date is undefined, it returns null.
+ * Used in <Calendar> to track the displayed month.
+ * @param date The date to normalise.
+ * @returns A new Date object set to the first day of the month with the time at midnight, or null if the input was null or undefined.
+ */
+const normaliseMonth = (date: Date | null | undefined) => {
+  if (!date) return null;
+  const newDate = new Date(date);
+  newDate.setDate(1);
+  newDate.setHours(0, 0, 0, 0);
+  return newDate;
+};
+
+export default normaliseMonth;

package/lib/components/Calendar/utils/parseDateFromString/parseDateFromString.test.ts

@@ -0,0 +1,15 @@
+import { describe, expect, test } from 'vitest';
+import parseDateFromString from './parseDateFromString';
+
+describe('Calendar: parseDateFromString', () => {
+  test('Should return null for an invalid date string', () => {
+    expect(parseDateFromString('invalid-date')).toBeNull();
+    expect(parseDateFromString('')).toBeNull();
+    expect(parseDateFromString('      ')).toBeNull();
+  });
+
+  test('Should return a valid date for a valid date string', () => {
+    expect(parseDateFromString('2023-03-15')).toEqual(new Date('2023-03-15'));
+    expect(parseDateFromString('2025-06-30')).toEqual(new Date('2025-06-30'));
+  });
+});

package/lib/components/Calendar/utils/parseDateFromString/parseDateFromString.ts

@@ -0,0 +1,19 @@
+/**
+ * Parses a date string into a Date object.
+ * Returns null if the input is invalid.
+ *
+ * @param dateString - The date string to parse (can be in ISO format or UNIX timestamp).
+ * @returns A Date object, or null if invalid.
+ */
+const parseDateFromString = (dateString: string): Date | null => {
+  const date = new Date(dateString);
+  if (isNaN(date.getTime())) {
+    console.warn(
+      `Calendar: Invalid date string provided: "${dateString}". Expected format is ISO 8601 (YYYY-MM-DD)`
+    );
+    return null;
+  }
+  return date;
+};
+
+export default parseDateFromString;

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/Datepicker/Datepicker.stories.tsx

@@ -1,16 +1,16 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useArgs } from '@storybook/preview-api';
 import Datepicker from './Datepicker';
-import type { AcademicWeek } from './Datepicker.types';
 
 const meta = {
-  title: 'Components/Work in progress/Datepicker/Datepicker',
+  title: 'Components/Ready to use/Datepicker',
   component: Datepicker,
   parameters: { layout: 'padded' },
   argTypes: {
-    date: { control: { type: 'date' } },
+    value: { control: { type: 'date' } },
     minDate: { control: { type: 'date' } },
     maxDate: { control: { type: 'date' } },
+    disabled: { control: { type: 'boolean' } },
     native: { control: { type: 'boolean' } },
     showAcademicWeeks: { control: { type: 'boolean' } },
   },
@@ -20,66 +20,39 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+const dateToISOString = (date: Date) => {
+  return date.toISOString().split('T')[0];
+};
+
 export const Default: Story = {
-  args: {
-    date: null,
-    onDateChange: () => {},
-  },
   render: () => {
     const [args, updateArgs] = useArgs();
 
-    // Convert UNIX timestamp from Storybook controls to `Date` object
+    // Storybook controls provide UNIX timestamps for dates, need to convert
     // https://storybook.js.org/docs/essentials/controls#annotation
-    args.date = args.date ? new Date(args.date) : null;
-    args.minDate = args.minDate ? new Date(args.minDate) : null;
-    args.maxDate = args.maxDate ? new Date(args.maxDate) : null;
-
-    // const onChange = (event: React.ChangeEvent<HTMLInputElement>) => updateArgs({ date: event.target.valueAsDate });
-    const onDateChange = (date: Date | null | undefined) =>
-      updateArgs({ date: date });
-    return (
-      <Datepicker
-        {...args}
-        date={args.date}
-        onDateChange={onDateChange}
-      />
-    );
-  },
-};
+    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;
 
-export const AsNative: Story = {
-  name: 'As native fallback',
-  args: {
-    native: true,
-    date: null,
-    onDateChange: () => {},
-  },
-  render: () => {
-    const [args, updateArgs] = useArgs();
-    args.date = args.date ? new Date(args.date) : null;
-    args.minDate = args.minDate ? new Date(args.minDate) : null;
-    args.maxDate = args.maxDate ? new Date(args.maxDate) : null;
-    const onDateChange = (date: Date | null | undefined) =>
-      updateArgs({ date: date });
+    const onValueChange = (value: Date | null | undefined) =>
+      updateArgs({ value: value });
     return (
       <Datepicker
         {...args}
-        date={args.date}
-        onDateChange={onDateChange}
+        onValueChange={onValueChange}
       />
     );
   },
 };
 
-const dateToISOString = (date: Date) => {
-  return date.toISOString().split('T')[0];
-};
-
+// Story repeated in Calendar.stories.tsx
 export const WithEvents: Story = {
   name: 'With events',
   args: {
-    date: null,
-    onDateChange: () => {},
     // IIFE gives us event dots for the current month
     events: (() => {
       const currentDate = new Date();
@@ -105,23 +78,29 @@ export const WithEvents: Story = {
   },
   render: () => {
     const [args, updateArgs] = useArgs();
-    args.date = args.date ? new Date(args.date) : null;
-    args.minDate = args.minDate ? new Date(args.minDate) : null;
-    args.maxDate = args.maxDate ? new Date(args.maxDate) : null;
-    const onDateChange = (date: Date | null | undefined) =>
-      updateArgs({ date: date });
+
+    // 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 | undefined) =>
+      updateArgs({ value: value });
     return (
       <Datepicker
         {...args}
-        date={args.date}
-        onDateChange={onDateChange}
-        events={args.events}
+        onValueChange={onValueChange}
       />
     );
   },
 };
 
-const academicWeeks: AcademicWeek[] = [
+const academicWeeks = [
   { start: '2025-08-25', number: 1 },
   { start: '2025-09-01', number: 2 },
   { start: '2025-09-08', number: 3 },
@@ -177,26 +156,111 @@ const academicWeeks: AcademicWeek[] = [
   { start: '2026-08-24', number: 53 },
 ];
 
+// Story repeated in Calendar.stories.tsx
 export const WithAcademicWeeks: Story = {
   name: 'With academic weeks',
   args: {
-    date: null,
-    onDateChange: () => {},
     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 | undefined) =>
+      updateArgs({ value: value });
+    return (
+      <Datepicker
+        {...args}
+        onValueChange={onValueChange}
+      />
+    );
+  },
+};
+
+// Story repeated in Datepicker.stories.tsx
+export const MinMaxDates: Story = {
+  name: 'With min and max dates',
+  args: {
+    // Initialise min date as 5 days into the current month
+    minDate: (() => {
+      const now = new Date();
+      return new Date(now.getFullYear(), now.getMonth(), 5)
+        .toISOString()
+        .split('T')[0];
+    })(),
+    // Initialise max date as 5 days before the last day of the current month
+    maxDate: (() => {
+      const now = new Date();
+      // Get last day of current month
+      const lastDay = new Date(
+        now.getFullYear(),
+        now.getMonth() + 1,
+        0
+      ).getDate();
+      return new Date(now.getFullYear(), now.getMonth(), lastDay - 5)
+        .toISOString()
+        .split('T')[0];
+    })(),
+  },
+  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 | undefined) =>
+      updateArgs({ value: value });
+    return (
+      <Datepicker
+        {...args}
+        onValueChange={onValueChange}
+      />
+    );
+  },
+};
+
+export const Native: Story = {
+  name: 'As native fallback',
+  args: {
+    native: true,
   },
   render: () => {
     const [args, updateArgs] = useArgs();
-    args.date = args.date ? new Date(args.date) : null;
-    args.minDate = args.minDate ? new Date(args.minDate) : null;
-    args.maxDate = args.maxDate ? new Date(args.maxDate) : null;
-    const onDateChange = (date: Date | null | undefined) =>
-      updateArgs({ date: date });
+
+    // 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 | undefined) =>
+      updateArgs({ value: value });
     return (
       <Datepicker
         {...args}
-        date={args.date}
-        onDateChange={onDateChange}
+        onValueChange={onValueChange}
       />
     );
   },