uikit-react-public 0.11.20 → 0.14.21

package/dist/theme/defaultTheme.d.ts

@@ -20,6 +20,7 @@ declare const blackAndWhite: {
     white: string;
 };
 declare const theme: {
+    p0: number;
     p2: string;
     p4: string;
     p6: string;
@@ -35,6 +36,7 @@ declare const theme: {
     p64: string;
     p72: string;
     p80: string;
+    m0: number;
     m2: string;
     m4: string;
     m6: string;
@@ -114,7 +116,9 @@ declare const theme: {
         };
         link: {
             default: string;
+            secondaryDefault: string;
             hover: string;
+            secondaryHover: string;
             visited: string;
             disabled: string;
         };
@@ -122,6 +126,7 @@ declare const theme: {
             black: string;
             grey90: string;
             grey80: string;
+            grey70: string;
             grey60: string;
             grey40: string;
             grey20: string;
@@ -153,6 +158,7 @@ declare const theme: {
         h80: string;
     };
     margin: {
+        m0: number;
         m2: string;
         m4: string;
         m6: string;
@@ -170,6 +176,7 @@ declare const theme: {
         m80: string;
     };
     padding: {
+        p0: number;
         p2: string;
         p4: string;
         p6: string;

package/dist/theme/useTheme.d.ts

@@ -3,6 +3,7 @@ export declare const ThemeContextProvider: React.FC<{
     children: ReactNode;
 }>;
 declare const useTheme: () => [{
+    p0: number;
     p2: string;
     p4: string;
     p6: string;
@@ -18,6 +19,7 @@ declare const useTheme: () => [{
     p64: string;
     p72: string;
     p80: string;
+    m0: number;
     m2: string;
     m4: string;
     m6: string;
@@ -97,7 +99,9 @@ declare const useTheme: () => [{
         };
         link: {
             default: string;
+            secondaryDefault: string;
             hover: string;
+            secondaryHover: string;
             visited: string;
             disabled: string;
         };
@@ -105,6 +109,7 @@ declare const useTheme: () => [{
             black: string;
             grey90: string;
             grey80: string;
+            grey70: string;
             grey60: string;
             grey40: string;
             grey20: string;
@@ -136,6 +141,7 @@ declare const useTheme: () => [{
         h80: string;
     };
     margin: {
+        m0: number;
         m2: string;
         m4: string;
         m6: string;
@@ -153,6 +159,7 @@ declare const useTheme: () => [{
         m80: string;
     };
     padding: {
+        p0: number;
         p2: string;
         p4: string;
         p6: string;
@@ -244,6 +251,7 @@ declare const useTheme: () => [{
         custom: (breakpoint: number) => string;
     };
 }, import('react').Dispatch<import('react').SetStateAction<{
+    p0: number;
     p2: string;
     p4: string;
     p6: string;
@@ -259,6 +267,7 @@ declare const useTheme: () => [{
     p64: string;
     p72: string;
     p80: string;
+    m0: number;
     m2: string;
     m4: string;
     m6: string;
@@ -338,7 +347,9 @@ declare const useTheme: () => [{
         };
         link: {
             default: string;
+            secondaryDefault: string;
             hover: string;
+            secondaryHover: string;
             visited: string;
             disabled: string;
         };
@@ -346,6 +357,7 @@ declare const useTheme: () => [{
             black: string;
             grey90: string;
             grey80: string;
+            grey70: string;
             grey60: string;
             grey40: string;
             grey20: string;
@@ -377,6 +389,7 @@ declare const useTheme: () => [{
         h80: string;
     };
     margin: {
+        m0: number;
         m2: string;
         m4: string;
         m6: string;
@@ -394,6 +407,7 @@ declare const useTheme: () => [{
         m80: string;
     };
     padding: {
+        p0: number;
         p2: string;
         p4: string;
         p6: string;

package/dist/utils/__tests__/capitalise.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/capitalise.d.ts

@@ -0,0 +1,2 @@
+declare const capitalise: (text: string) => string;
+export default capitalise;

package/lib/components/Alert/Alert.tsx

@@ -5,6 +5,7 @@ import AlertMessage from './AlertMessage';
 import AlertTitle from './AlertTitle';
 import marginsStyle, { MarginProps } from '../common/marginsStyle';
 import { useTheme } from '../../theme';
+import capitalise from '../../utils/capitalise';
 
 export const NAME = 'ucl-uikit-alert';
 
@@ -38,6 +39,8 @@ const Alert = ({
   className,
   ...props
 }: AlertProps) => {
+  const typeName = capitalise(type);
+
   const [theme] = useTheme();
 
   const { padding } = theme;
@@ -117,7 +120,10 @@ const Alert = ({
         role='alert'
         {...props}
       >
-        <IconComp className={iconStyle} />
+        <IconComp
+          className={iconStyle}
+          aria-label={typeName}
+        />
         <div>{children}</div>
       </div>
     </AlertContext.Provider>

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

@@ -7,6 +7,7 @@ exports[`Alert > snapshot: type=error 1`] = `
   role="alert"
 >
   <svg
+    aria-label="Error"
     class="ucl-uikit-icon css-nysdxe"
     data-testid="ucl-uikit-icon"
     fill="none"
@@ -61,6 +62,7 @@ exports[`Alert > snapshot: type=info, no title 1`] = `
   role="alert"
 >
   <svg
+    aria-label="Info"
     class="ucl-uikit-icon css-1oh4ubr"
     data-testid="ucl-uikit-icon"
     fill="none"
@@ -109,6 +111,7 @@ exports[`Alert > snapshot: type=success 1`] = `
   role="alert"
 >
   <svg
+    aria-label="Success"
     class="ucl-uikit-icon css-4xbsfp"
     data-testid="ucl-uikit-icon"
     fill="none"
@@ -152,6 +155,7 @@ exports[`Alert > snapshot: type=warning 1`] = `
   role="alert"
 >
   <svg
+    aria-label="Warning"
     class="ucl-uikit-icon css-dwkbnw"
     data-testid="ucl-uikit-icon"
     fill="none"

package/lib/components/Badge/Badge.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Badge from './Badge';
+
+const meta = {
+  title: 'Components/Work in progress/Badge',
+  component: Badge,
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    children: 'Badge',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/lib/components/Badge/Badge.tsx

@@ -0,0 +1,48 @@
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../../theme';
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+  testId?: string;
+  className?: string;
+}
+
+const NAME = 'ucl-uikit-badge';
+
+const Badge = ({
+  testId = NAME,
+  className,
+  children,
+  ...props
+}: BadgeProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    height: 24px;
+    padding: ${theme.padding.p8};
+    color: ${theme.color.text.secondary};
+    background-color: #e4e4e4; // TODO: Add design token
+    font-family: ${theme.font.family.primary};
+    font-size: ${theme.font.size.f14};
+    font-weight: ${theme.font.weight.regular};
+    border-radius: ${theme.radius.r4};
+    white-space: nowrap;
+  `;
+
+  const style = cx(baseStyle, NAME, className);
+
+  return (
+    <div
+      data-testid={testId}
+      className={style}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Badge;

package/lib/components/Badge/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Badge';
+export type { BadgeProps } from './Badge';

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

@@ -36,7 +36,7 @@ exports[`Breadcrumbs > Snapshot: No props 1`] = `
     class="css-4ys53n"
   >
     <a
-      class="ucl-link ucl-timetable-breadcrumb ucl-timetable-breadcrumb--inactive css-hr2cbw"
+      class="ucl-uikit-base-link ucl-uikit-link ucl-timetable-breadcrumb ucl-timetable-breadcrumb--inactive css-c7kkpi"
       data-testid="ucl-timetable-breadcrumb"
       href="/showcase"
     >
@@ -64,7 +64,7 @@ exports[`Breadcrumbs > Snapshot: No props 1`] = `
     class="css-4ys53n"
   >
     <a
-      class="ucl-link ucl-timetable-breadcrumb ucl-timetable-breadcrumb--inactive css-hr2cbw"
+      class="ucl-uikit-base-link ucl-uikit-link ucl-timetable-breadcrumb ucl-timetable-breadcrumb--inactive css-c7kkpi"
       data-testid="ucl-timetable-breadcrumb"
       href="/showcase/breadcrumbs"
     >
@@ -110,7 +110,7 @@ exports[`Breadcrumbs > snapshot: Custom Test ID 1`] = `
     class="css-4ys53n"
   >
     <a
-      class="ucl-link ucl-timetable-breadcrumb ucl-timetable-breadcrumb--inactive css-hr2cbw"
+      class="ucl-uikit-base-link ucl-uikit-link ucl-timetable-breadcrumb ucl-timetable-breadcrumb--inactive css-c7kkpi"
       data-testid="custom-testid-2"
       href="/showcase"
     >
@@ -138,7 +138,7 @@ exports[`Breadcrumbs > snapshot: Custom Test ID 1`] = `
     class="css-4ys53n"
   >
     <a
-      class="ucl-link ucl-timetable-breadcrumb ucl-timetable-breadcrumb--inactive css-hr2cbw"
+      class="ucl-uikit-base-link ucl-uikit-link ucl-timetable-breadcrumb ucl-timetable-breadcrumb--inactive css-c7kkpi"
       data-testid="custom-testid-3"
       href="/showcase/breadcrumbs"
     >

package/lib/components/Button/Button.tsx

@@ -11,8 +11,10 @@ import useTheme from '../../theme/useTheme';
 import buttonPrimaryStyle from './buttonPrimaryStyle';
 import buttonSecondaryStyle from './buttonSecondaryStyle';
 import buttonTertiaryStyle from './buttonTertiaryStyle';
-import { Spinner, Overlay, Tooltip } from '../';
-import marginsStyle from '../common/marginsStyle';
+import Spinner from '../Spinner/Spinner';
+import Overlay from '../Overlay/Overlay';
+import Tooltip from '../Tooltip/Tooltip';
+import marginsStyle, { MarginProps } from '../common/marginsStyle';
 
 export const NAME = 'ucl-uikit-button';
 
@@ -35,6 +37,7 @@ export type ButtonProps<C extends ElementType = 'button'> = {
   as?: C;
   ref?: PolymorphicRef<C>;
 } & ButtonBaseProps &
+  MarginProps &
   Omit<ComponentPropsWithRef<C>, keyof ButtonBaseProps | 'as'>;
 
 const Button = <C extends ElementType = 'button'>({

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

@@ -0,0 +1,209 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Calendar from './Calendar';
+import { useArgs } from '@storybook/preview-api';
+import type { AcademicWeek } from './Calendar.types';
+
+const meta = {
+  title: 'Components/Work in progress/Calendar',
+  component: Calendar,
+  parameters: { layout: 'padded' },
+  argTypes: {
+    pickedDate: { control: { type: 'date' } },
+    minDate: { control: { type: 'date' } },
+    maxDate: { control: { type: 'date' } },
+    showAcademicWeeks: { control: { type: 'boolean' } },
+    testId: { control: { type: 'text' } },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Calendar>;
+
+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];
+};
+
+export const Default: Story = {
+  render: () => {
+    const [args, updateArgs] = useArgs();
+    args.pickedDate = args.pickedDate
+      ? parseDateFromUNIXTimestamp(args.pickedDate)
+      : null;
+    const onDatePick = (date: Date | null) => updateArgs({ pickedDate: date });
+    return (
+      <Calendar
+        {...args}
+        onDatePick={onDatePick}
+      />
+    );
+  },
+};
+
+// Story repeated in Datepicker.stories.tsx
+export const WithEvents: Story = {
+  name: 'With events',
+  args: {
+    // IIFE gives us event dots for the current month
+    events: (() => {
+      const currentDate = new Date();
+      const currentYear = currentDate.getFullYear();
+      const currentMonth = currentDate.getMonth();
+      return [
+        // Grey event dots
+        { 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)) },
+        { 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)) },
+      ];
+    })(),
+  },
+  render: () => {
+    const [args, updateArgs] = useArgs();
+    args.pickedDate = args.pickedDate
+      ? parseDateFromUNIXTimestamp(args.pickedDate)
+      : null;
+    const onDatePick = (date: Date | null) => updateArgs({ pickedDate: date });
+    return (
+      <Calendar
+        {...args}
+        onDatePick={onDatePick}
+      />
+    );
+  },
+};
+
+const academicWeeks: AcademicWeek[] = [
+  { 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 },
+];
+
+// Story repeated in Datepicker.stories.tsx
+export const WithAcademicWeeks: Story = {
+  name: 'With academic weeks',
+  args: {
+    showAcademicWeeks: true,
+    academicWeeks: academicWeeks,
+    pickedDate: new Date(academicWeeks[0].start), // So the week numbers appear on story mount
+  },
+  render: () => {
+    const [args, updateArgs] = useArgs();
+    args.pickedDate = args.pickedDate
+      ? parseDateFromUNIXTimestamp(args.pickedDate)
+      : null;
+    const onDatePick = (date: Date | null) => updateArgs({ pickedDate: date });
+    return (
+      <Calendar
+        {...args}
+        onDatePick={onDatePick}
+      />
+    );
+  },
+};
+
+// 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();
+    args.pickedDate = args.pickedDate
+      ? parseDateFromUNIXTimestamp(args.pickedDate)
+      : null;
+    const onDatePick = (date: Date | null) => updateArgs({ pickedDate: date });
+    return (
+      <Calendar
+        {...args}
+        onDatePick={onDatePick}
+      />
+    );
+  },
+};

package/lib/components/Calendar/Calendar.tsx

@@ -0,0 +1,121 @@
+import { useState, useEffect, useRef } from 'react';
+import { css, cx } from '@emotion/css';
+import { Controls, AcademicWeeks, Grid } from './subcomponents';
+import { normaliseMonth, parseDateFromString } from './utils';
+import { useTheme } from '../../theme';
+import type { CalendarProps } from './Calendar.types';
+
+const NAME = 'ucl-uikit-calendar';
+
+const Calendar = ({
+  pickedDate = null,
+  onDatePick,
+  minDate = null,
+  maxDate = null,
+  events = [],
+  showAcademicWeeks = false,
+  academicWeeks = [],
+  testId = NAME,
+  className,
+}: CalendarProps) => {
+  const [theme] = useTheme();
+
+  if (pickedDate && isNaN(pickedDate.getTime())) {
+    console.warn('Calendar: pickedDate is invalid, defaulting to null');
+    pickedDate = null;
+  }
+
+  // Used to track prop value changes
+  const pickedDateRef = useRef<Date | null>(pickedDate ?? null);
+
+  // Determines the month currently displayed in the calendar
+  const [displayMonth, setDisplayMonth] = useState<Date>(
+    // Display month initialises as either the picked date's month or the current month
+    normaliseMonth(pickedDate ?? new Date()) as Date
+  );
+
+  // Parse min and max dates from strings to Date objects
+  const minDateParsed = minDate ? parseDateFromString(minDate) : null;
+  const maxDateParsed = maxDate ? parseDateFromString(maxDate) : null;
+
+  // Snap displayed month to the picked date's month if it changes
+  useEffect(() => {
+    if (
+      // If the picked date is valid
+      pickedDate &&
+      !isNaN(pickedDate.getTime()) &&
+      // If the picked date has changed
+      pickedDateRef.current?.getTime() !== pickedDate.getTime()
+    ) {
+      // If the picked date is not in the currently displayed month
+      if (
+        pickedDate.getMonth() !== displayMonth.getMonth() ||
+        pickedDate.getFullYear() !== displayMonth.getFullYear()
+      ) {
+        // Update the display month to the picked date's month
+        setDisplayMonth(normaliseMonth(pickedDate) as Date);
+      }
+    }
+    // Update the ref to the new picked date
+    pickedDateRef.current = pickedDate;
+  }, [pickedDate, displayMonth]);
+
+  const handleMonthChange = (change: number) => {
+    const newDate = new Date(displayMonth);
+    newDate.setMonth(newDate.getMonth() + change);
+    setDisplayMonth(normaliseMonth(newDate) as Date);
+  };
+
+  const width = showAcademicWeeks ? '370' : '312';
+
+  const baseStyle = css`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    width: ${width}px;
+    box-sizing: border-box;
+    border: 1px solid ${theme.color.neutral.grey20};
+    padding: 16px;
+    background-color: ${theme.color.neutral.white};
+  `;
+
+  const innerContainerStyle = css`
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    width: 100%;
+  `;
+
+  const style = cx(testId, baseStyle, className);
+
+  return (
+    <div
+      className={style}
+      data-testid={testId}
+    >
+      <Controls
+        month={displayMonth}
+        changeMonth={handleMonthChange}
+      />
+      <div className={innerContainerStyle}>
+        {showAcademicWeeks && (
+          <AcademicWeeks
+            date={displayMonth}
+            weeks={academicWeeks}
+          />
+        )}
+        <Grid
+          month={displayMonth}
+          pickedDate={pickedDate}
+          onDatePick={onDatePick}
+          minDate={minDateParsed}
+          maxDate={maxDateParsed}
+          events={events}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Calendar;

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

@@ -0,0 +1,21 @@
+// Used to display EventDots inside `<Day>` component
+export type CalendarEvent = {
+  date: string; // Date string in YYYY-MM-DD format
+};
+
+export type AcademicWeek = {
+  start: string; // ISO date string: YYYY-MM-DD format
+  number: number;
+};
+
+export interface CalendarProps {
+  pickedDate?: Date | null;
+  onDatePick?: (date: Date | null, event?: React.SyntheticEvent) => void;
+  minDate?: string | null; // ISO date string: YYYY-MM-DD format
+  maxDate?: string | null; // ISO date string: YYYY-MM-DD format
+  events?: CalendarEvent[];
+  showAcademicWeeks?: boolean;
+  academicWeeks?: AcademicWeek[];
+  testId?: string;
+  className?: string;
+}