uikit-react-public 0.17.4 → 0.21.8

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

@@ -18,7 +18,8 @@ const AcademicWeek = ({ weekNumber }: AcademicWeekProps) => {
     height: 40px;
     font-family: ${theme.font.family.primary};
     font-size: ${theme.font.size.f14};
-    color: #6345a5; // TODO: Needs a sensible design token
+    /* color: #6345a5; */
+    color: ${theme.colour.text.brandPrimary};
   `;
 
   const style = cx(NAME, baseStyle);

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

@@ -13,7 +13,6 @@ interface AcademicWeeksProps {
 }
 
 const AcademicWeeks = ({ date, weeks }: AcademicWeeksProps) => {
-
   const [theme] = useTheme();
 
   const academicWeekNumbers = getAcademicWeekNumbers(weeks, date);
@@ -23,7 +22,7 @@ const AcademicWeeks = ({ date, weeks }: AcademicWeeksProps) => {
     flex-direction: column;
     padding-top: 32px;
     width: 50px;
-    background-color: ${theme.color.interaction.blue5};
+    background-color: ${theme.colour.surface.brand};
     user-select: none;
   `;
 
@@ -42,6 +41,6 @@ const AcademicWeeks = ({ date, weeks }: AcademicWeeksProps) => {
       ))}
     </div>
   );
-}
+};
 
 export default AcademicWeeks;

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

@@ -9,11 +9,7 @@ interface ColumnHeadingProps {
 
 const NAME = 'ucl-uikit-calendar__column-heading';
 
-const ColumnHeading = ({
-  index,
-  day,
-  isWeekend
-}: ColumnHeadingProps) => {
+const ColumnHeading = ({ index, day, isWeekend }: ColumnHeadingProps) => {
   const [theme] = useTheme();
 
   const baseStyle = css`
@@ -23,8 +19,8 @@ const ColumnHeading = ({
     width: 40px;
     height: 32px;
     color: ${isWeekend
-      ? theme.color.system.orange100
-      : theme.color.neutral.grey60};
+      ? theme.colour.text.warningOnBgFill
+      : theme.colour.text.secondary};
     font-weight: 700;
   `;
 

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

@@ -32,7 +32,7 @@ const Controls = ({ month, changeMonth }: ControlsProps) => {
     cursor: pointer;
 
     &:hover {
-      color: ${theme.color.neutral.grey60};
+      color: ${theme.colour.icon.default};
     }
   `;
 

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Day from './Day';
 
 const meta = {
-  title: 'Components/Work in progress/Calendar/Day',
+  title: 'Components/Calendar/Day',
   component: Day,
   argTypes: {
     events: {

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

@@ -42,25 +42,24 @@ const Day = ({
     position: relative;
     width: 40px;
     height: 40px;
-    background-color: ${theme.color.neutral.white};
+    background-color: ${theme.colour.fill.inverse};
     cursor: pointer;
     outline: none;
 
     &:hover {
-      background-color: ${theme.color.neutral.grey10};
+      background-color: ${theme.colour.fill.hover};
     }
 
     ${isSelected &&
     css`
-      /* background-color: ${theme.color.interaction.blue70}; */
       background-color: ${isDisabled
-        ? theme.color.neutral.grey10
-        : theme.color.interaction.blue70};
+        ? theme.colour.fill.disabled
+        : theme.colour.fill.brand};
 
-      color: ${theme.color.text.inverted};
+      color: ${theme.colour.text.inverse};
 
       &:hover {
-        background-color: ${theme.color.interaction.blue100};
+        background-color: ${theme.colour.fill.brandHover};
       }
     `}
     ${isDisabled &&
@@ -68,7 +67,6 @@ const Day = ({
       cursor: not-allowed;
 
       &:hover {
-        /* background-color: ${theme.color.neutral.white}; */
         background-color: ${isSelected
           ? theme.color.neutral.grey10
           : theme.color.neutral.white};
@@ -91,7 +89,7 @@ const Day = ({
     `}
     ${isDisabled &&
     css`
-      color: ${theme.color.neutral.grey20};
+      color: ${theme.colour.text.disabled};
     `}
   `;
 

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

@@ -9,17 +9,13 @@ interface EventDotProps {
 }
 
 const EventDot = ({ inverted, inCurrentMonth }: EventDotProps) => {
-
   const [theme] = useTheme();
 
-  const invertedColour = theme.color.neutral.white;
-  const outOfCurrentMonthColour = '#8C8C8C'; // TODO: Needs adding to `defaultTheme.ts`, as a design token
-
   const backgroundColour = inCurrentMonth
     ? inverted
-      ? invertedColour
-      : theme.color.interaction.blue70
-    : outOfCurrentMonthColour;
+      ? theme.colour.icon.inverse
+      : theme.colour.icon.brand
+    : theme.colour.icon.tertiary;
 
   const baseStyle = css`
     width: 6px;
@@ -34,7 +30,7 @@ const EventDot = ({ inverted, inCurrentMonth }: EventDotProps) => {
     <div
       data-testid={NAME}
       className={style}
-    />  
+    />
   );
 };
 

package/lib/components/Checkbox/Checkbox.stories.tsx

@@ -4,7 +4,7 @@ import { useArgs } from '@storybook/preview-api';
 import Checkbox from './Checkbox';
 
 const meta = {
-  title: 'Components/Work in progress/Checkbox',
+  title: 'Components/Checkbox',
   component: Checkbox,
   argTypes: {
     checked: { control: { type: 'boolean' } },

package/lib/components/Checkbox/Checkbox.tsx

@@ -12,10 +12,10 @@ import marginsStyle, { MarginProps } from '../common/marginsStyle';
 
 export const NAME = 'ucl-uikit-checkbox';
 
-export interface CheckboxBaseProps
-  extends InputHTMLAttributes<HTMLInputElement> {
+export interface CheckboxBaseProps extends InputHTMLAttributes<HTMLInputElement> {
   indeterminate?: boolean;
   testId?: string;
+  ariaLabel?: string;
 }
 
 export type CheckboxProps = CheckboxBaseProps & MarginProps;
@@ -30,6 +30,7 @@ const Checkbox = forwardRef<Ref, CheckboxProps>(
       defaultChecked,
       disabled,
       testId = NAME,
+      ariaLabel,
       className,
       ...props
     },
@@ -61,7 +62,7 @@ const Checkbox = forwardRef<Ref, CheckboxProps>(
       border-radius: ${theme.radius.r2};
       outline: none;
       box-sizing: border-box;
-      color: ${theme.color.neutral.white};
+      color: ${theme.colour.icon.inverse};
       transition:
         background-color 0.15s ease-out,
         border-color 0.15s ease-out;
@@ -75,19 +76,19 @@ const Checkbox = forwardRef<Ref, CheckboxProps>(
     `;
 
     const checkedStyle = css`
-      background-color: ${theme.color.interaction.blue70};
-      border-color: ${theme.color.interaction.blue70};
-      color: ${theme.color.neutral.white};
+      background-color: ${theme.colour.icon.brand};
+      border-color: ${theme.colour.icon.brand};
+      color: ${theme.colour.icon.inverse};
     `;
 
     const uncheckedStyle = css`
-      background-color: ${theme.color.neutral.white};
-      border-color: ${theme.color.neutral.grey60};
+      background-color: ${theme.colour.icon.inverse};
+      border-color: ${theme.colour.speciality.inputDefault};
     `;
 
     const disabledStyle = css`
-      background-color: ${theme.color.neutral.grey20};
-      border-color: ${theme.color.neutral.grey20};
+      background-color: ${theme.colour.icon.disabled};
+      border-color: ${theme.colour.icon.disabled};
       cursor: not-allowed;
     `;
 
@@ -140,6 +141,7 @@ const Checkbox = forwardRef<Ref, CheckboxProps>(
           ref={ref}
           className={hiddenInputStyle}
           data-testid={testId}
+          aria-label={ariaLabel}
           {...(isControlled ? { checked } : { defaultChecked })}
           disabled={disabled}
           onChange={handleChange}

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

@@ -96,4 +96,33 @@ describe('Checkbox', () => {
     await user.click(checkbox);
     expect(checkbox.checked).toBe(false);
   });
+
+  // Accessibility tests
+
+  test('ariaLabel prop is applied to the input as aria-label', () => {
+    render(
+      <ThemeContextProvider>
+        <Checkbox ariaLabel='Select John Smith' />
+      </ThemeContextProvider>
+    );
+    expect(screen.getByRole('checkbox')).toHaveAttribute(
+      'aria-label',
+      'Select John Smith'
+    );
+  });
+
+  test('aria-label passed via spread props overrides ariaLabel', () => {
+    render(
+      <ThemeContextProvider>
+        <Checkbox
+          ariaLabel='Default label'
+          aria-label='Override label'
+        />
+      </ThemeContextProvider>
+    );
+    expect(screen.getByRole('checkbox')).toHaveAttribute(
+      'aria-label',
+      'Override label'
+    );
+  });
 });

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

@@ -2,7 +2,7 @@
 
 exports[`Checkbox > snapshot: checked prop 1`] = `
 <span
-  class="ucl-uikit-checkbox css-1g4adr4"
+  class="ucl-uikit-checkbox css-xzd91z"
 >
   <input
     checked=""
@@ -32,7 +32,7 @@ exports[`Checkbox > snapshot: checked prop 1`] = `
 
 exports[`Checkbox > snapshot: indeterminate prop 1`] = `
 <span
-  class="ucl-uikit-checkbox css-1g4adr4"
+  class="ucl-uikit-checkbox css-xzd91z"
 >
   <input
     class="css-nzy7im"
@@ -64,7 +64,7 @@ exports[`Checkbox > snapshot: indeterminate prop 1`] = `
 
 exports[`Checkbox > snapshot: no props 1`] = `
 <span
-  class="ucl-uikit-checkbox css-cg31xm"
+  class="ucl-uikit-checkbox css-tumlz"
 >
   <input
     class="css-nzy7im"
@@ -76,7 +76,7 @@ exports[`Checkbox > snapshot: no props 1`] = `
 
 exports[`Checkbox > snapshot: testId prop 1`] = `
 <span
-  class="ucl-uikit-checkbox css-cg31xm"
+  class="ucl-uikit-checkbox css-tumlz"
 >
   <input
     class="css-nzy7im"

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

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { describe, test, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -226,5 +227,121 @@ describe('Datepicker', () => {
     const input = screen.getByTestId('ucl-uikit-datepicker__input');
     expect(input).toHaveAttribute('aria-label', customAriaLabel);
   });
+
+  test('Default Datepicker does not add an extra icon tab stop', async () => {
+    const user = userEvent.setup();
+
+    customRender(
+      <div>
+        <button type='button'>Before</button>
+        <Datepicker />
+        <button type='button'>After</button>
+      </div>
+    );
+
+    await user.tab();
+    expect(screen.getByRole('button', { name: 'Before' })).toHaveFocus();
+
+    await user.tab();
+    expect(screen.getByRole('textbox')).toHaveFocus();
+
+    await user.tab();
+    expect(screen.getByRole('button', { name: 'After' })).toHaveFocus();
+  });
+
+  test('Clearable Datepicker clear icon is focusable when a value is present', async () => {
+    const user = userEvent.setup();
+
+    customRender(
+      <div>
+        <button type='button'>Before</button>
+        <Datepicker
+          clearable
+          value={new Date(2025, 2, 10)}
+        />
+        <button type='button'>After</button>
+      </div>
+    );
+
+    await user.tab();
+    expect(screen.getByRole('button', { name: 'Before' })).toHaveFocus();
+
+    await user.tab();
+    expect(screen.getByRole('textbox')).toHaveFocus();
+
+    await user.tab();
+    expect(screen.getByRole('button', { name: 'Clear date' })).toHaveFocus();
+
+    await user.tab();
+    expect(screen.getByRole('button', { name: 'After' })).toHaveFocus();
+  });
+
+  test('Clearing with the keyboard restores focus to the input', async () => {
+    const user = userEvent.setup();
+
+    const ControlledDatepicker = () => {
+      const [value, setValue] = useState<Date | null>(new Date(2025, 2, 10));
+
+      return (
+        <Datepicker
+          clearable
+          value={value}
+          onValueChange={setValue}
+        />
+      );
+    };
+
+    customRender(<ControlledDatepicker />);
+
+    await user.tab();
+    expect(screen.getByRole('textbox')).toHaveFocus();
+
+    await user.tab();
+    const clearButton = screen.getByRole('button', { name: 'Clear date' });
+    expect(clearButton).toHaveFocus();
+
+    await user.keyboard('{Enter}');
+
+    expect(screen.getByRole('textbox')).toHaveFocus();
+    expect(
+      screen.queryByRole('button', { name: 'Clear date' })
+    ).not.toBeInTheDocument();
+  });
+
+  test('Disabled Datepicker is skipped when tabbing', async () => {
+    const user = userEvent.setup();
+
+    customRender(
+      <div>
+        <button type='button'>Before</button>
+        <Datepicker disabled />
+        <button type='button'>After</button>
+      </div>
+    );
+
+    await user.tab();
+    expect(screen.getByRole('button', { name: 'Before' })).toHaveFocus();
+
+    await user.tab();
+    expect(screen.getByRole('button', { name: 'After' })).toHaveFocus();
+  });
+
+  test('Disabled Datepicker icon control is not tabbable and cannot open', async () => {
+    const user = userEvent.setup();
+
+    customRender(<Datepicker disabled />);
+
+    const iconButton = screen.getByTestId(
+      'ucl-uikit-datepicker__visible-field-icon-button'
+    );
+
+    expect(iconButton).toHaveAttribute('aria-label', 'Open calendar');
+    expect(iconButton).toHaveAttribute('tabindex', '-1');
+    expect(iconButton).toBeDisabled();
+
+    await user.click(iconButton);
+
+    expect(screen.queryByTestId('ucl-uikit-calendar')).not.toBeInTheDocument();
+  });
   // #endregion
 });

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

@@ -17,17 +17,18 @@ exports[`Datepicker > Snapshot: no date provided 1`] = `
       type="text"
       value=""
     />
-    <div
+    <button
       aria-label="Open calendar"
-      class="css-nnfy6l"
+      class="ucl-uikit-icon-button css-1uz96ir"
       data-testid="ucl-uikit-datepicker__visible-field-icon-button"
-      role="button"
-      tabindex="0"
+      tabindex="-1"
+      type="button"
     >
       <svg
         class="ucl-uikit-icon css-1u4xgls"
         data-testid="ucl-uikit-icon"
         fill="none"
+        focusable="false"
         height="24"
         stroke="currentColor"
         stroke-linecap="round"
@@ -45,26 +46,11 @@ exports[`Datepicker > Snapshot: no date provided 1`] = `
           x="3"
           y="4"
         />
-        <line
-          x1="16"
-          x2="16"
-          y1="2"
-          y2="6"
-        />
-        <line
-          x1="8"
-          x2="8"
-          y1="2"
-          y2="6"
-        />
-        <line
-          x1="3"
-          x2="21"
-          y1="10"
-          y2="10"
+        <path
+          d="M16 2v4M8 2v4m-5 4h18"
         />
       </svg>
-    </div>
+    </button>
   </div>
 </div>
 `;
@@ -86,17 +72,18 @@ exports[`Datepicker > Snapshot: with date provided 1`] = `
       type="text"
       value="10/03/2025"
     />
-    <div
+    <button
       aria-label="Open calendar"
-      class="css-nnfy6l"
+      class="ucl-uikit-icon-button css-1uz96ir"
       data-testid="ucl-uikit-datepicker__visible-field-icon-button"
-      role="button"
-      tabindex="0"
+      tabindex="-1"
+      type="button"
     >
       <svg
         class="ucl-uikit-icon css-1u4xgls"
         data-testid="ucl-uikit-icon"
         fill="none"
+        focusable="false"
         height="24"
         stroke="currentColor"
         stroke-linecap="round"
@@ -114,26 +101,11 @@ exports[`Datepicker > Snapshot: with date provided 1`] = `
           x="3"
           y="4"
         />
-        <line
-          x1="16"
-          x2="16"
-          y1="2"
-          y2="6"
-        />
-        <line
-          x1="8"
-          x2="8"
-          y1="2"
-          y2="6"
-        />
-        <line
-          x1="3"
-          x2="21"
-          y1="10"
-          y2="10"
+        <path
+          d="M16 2v4M8 2v4m-5 4h18"
         />
       </svg>
-    </div>
+    </button>
   </div>
 </div>
 `;

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

@@ -55,6 +55,7 @@ const CustomDatepicker = ({
   const effectiveRef = ref || internalRef;
   const internalInputRef = useRef<HTMLInputElement>(null);
   const effectiveInputRef = inputRef || internalInputRef;
+  const restoreFocusAfterClearRef = useRef(false);
 
   const [panelOpen, setPanelOpen] = useState(false);
 
@@ -75,6 +76,13 @@ const CustomDatepicker = ({
     resetField();
   }, [value, resetField]);
 
+  useEffect(() => {
+    if (!value && restoreFocusAfterClearRef.current) {
+      effectiveInputRef.current?.focus();
+      restoreFocusAfterClearRef.current = false;
+    }
+  }, [value, effectiveInputRef]);
+
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(event.target.value);
   };
@@ -191,7 +199,8 @@ const CustomDatepicker = ({
 
   const handleClear = (event: React.SyntheticEvent) => {
     event.stopPropagation(); // Prevent opening the calendar panel
-    onValueChange(null);
+    restoreFocusAfterClearRef.current = true;
+    onValueChange(null, event);
   };
 
   const baseStyle = css`

package/lib/components/Datepicker/subcomponents/VisibleField.tsx

@@ -1,6 +1,6 @@
 import { css, cx } from '@emotion/css';
 import { DatepickerInput } from './';
-import { Icon } from '../../..';
+import { Icon, IconButton } from '../../..';
 import { useTheme } from '../../../theme';
 import React from 'react';
 import type { InputProps } from './DatepickerInput';
@@ -71,6 +71,8 @@ const VisibleField = ({
     align-items: center;
     justify-content: center;
     padding: 0 16px;
+    border: none;
+    background: transparent;
     // padding: 0 16px 0 4px;
     height: 100%;
     cursor: pointer;
@@ -110,30 +112,29 @@ const VisibleField = ({
         ref={inputRef}
         {...inputProps}
       />
-      <div
-        onClick={showClearIcon ? onClear : onButtonClick}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            if (showClearIcon) {
-              onClear(e);
-            } else {
-              onButtonClick();
-            }
-          }
-        }}
-        className={iconButtonStyle}
-        tabIndex={0}
-        role='button'
-        aria-label={showClearIcon ? 'Clear date' : 'Open calendar'}
-        data-testid={`${NAME}-icon-button`}
-      >
-        {showClearIcon ? (
+      {showClearIcon ? (
+        <IconButton
+          type='button'
+          onClick={onClear}
+          className={iconButtonStyle}
+          aria-label='Clear date'
+          data-testid={`${NAME}-icon-button`}
+        >
           <Icon.X className={iconStyle} />
-        ) : (
+        </IconButton>
+      ) : (
+        <IconButton
+          type='button'
+          onClick={onButtonClick}
+          className={iconButtonStyle}
+          aria-label='Open calendar'
+          data-testid={`${NAME}-icon-button`}
+          tabIndex={-1}
+          disabled={disabled}
+        >
           <Icon.Calendar className={iconStyle} />
-        )}
-      </div>
+        </IconButton>
+      )}
     </div>
   );
 };

package/lib/components/Dialog/BaseDialog.tsx

@@ -174,11 +174,11 @@ const BaseDialog = ({
 
     @media (min-width: ${theme.breakpoints.tablet}px) {
       width: ${width}px;
-      max-width: calc(100vw - ${theme.margin.m16}px);
+      max-width: calc(100vw - ${theme.margin.m16});
       height: fit-content;
 
       &:modal {
-        max-width: ${MEDIUM_WIDTH}px;
+        max-width: min(${width}px, calc(100vw - ${theme.margin.m16}));
         max-height: calc(100vh - 32px);
       }
     }

package/lib/components/Dialog/Dialog.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Dialog from './Dialog';
 
 const meta = {
-  title: 'Components/Work in progress/Dialog',
+  title: 'Components/Dialog',
   component: Dialog,
   parameters: {
     docs: {