uikit-react-public 0.11.24 → 0.17.4

package/lib/components/Main/Main.tsx

@@ -0,0 +1,46 @@
+import { cx } from '@emotion/css';
+import Layout from '../Layout/Layout';
+
+export interface MainProps extends React.HTMLAttributes<HTMLElement> {
+  /**
+   * Determines whether to wrap children in a `<Layout>` component,
+   * to apply the grid layout from the UCL Design System.
+   */
+  layout?: boolean;
+  /**
+   * ID for testing purposes.
+   * Added to the `data-testid` attribute of top-level `<main>` element.
+   * Default is `'ucl-uikit-main'`.
+   */
+  testId?: string;
+}
+
+export const NAME = 'ucl-uikit-main';
+
+/**
+ * Semantic wrapper around HTML `<main>` element
+ *
+ * Optionally wraps children in the UCL Design System `Layout` grid when `layout` is true
+ */
+const Main = ({
+  layout = false,
+  testId = NAME,
+  className,
+  children,
+  ...props
+}: MainProps) => {
+  // No need for any additional styling -- just a semantic wrapper
+  const style = cx(NAME, className);
+
+  return (
+    <main
+      className={style}
+      data-testid={testId}
+      {...props}
+    >
+      {layout ? <Layout>{children}</Layout> : children}
+    </main>
+  );
+};
+
+export default Main;

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

@@ -0,0 +1,80 @@
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import Main from '../Main';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+
+describe('Main', () => {
+  // Snapshot tests
+
+  test('snapshot: no props', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Main>Content</Main>
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: layout prop true', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Main layout>Content</Main>
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: testId prop', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Main testId='test123'>Content</Main>
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  // Interaction tests
+
+  test('Can find by default testId', () => {
+    render(
+      <ThemeContextProvider>
+        <Main>Content</Main>
+      </ThemeContextProvider>
+    );
+    const main = screen.getByTestId('ucl-uikit-main');
+    expect(main).toBeInTheDocument();
+  });
+
+  test('Can find by custom testId', () => {
+    render(
+      <ThemeContextProvider>
+        <Main testId='custom-test-id'>Content</Main>
+      </ThemeContextProvider>
+    );
+    const main = screen.getByTestId('custom-test-id');
+    expect(main).toBeInTheDocument();
+  });
+
+  test('Renders children correctly', () => {
+    render(
+      <ThemeContextProvider>
+        <Main>
+          <div data-testid='child-element'>Child Content</div>
+        </Main>
+      </ThemeContextProvider>
+    );
+    const child = screen.getByTestId('child-element');
+    expect(child).toBeInTheDocument();
+    expect(child).toHaveTextContent('Child Content');
+  });
+
+  test('Applies layout when layout prop is true', () => {
+    render(
+      <ThemeContextProvider>
+        <Main layout>Content</Main>
+      </ThemeContextProvider>
+    );
+    const layoutComponent = screen.getByTestId('ucl-uikit-layout');
+    expect(layoutComponent).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,33 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Main > snapshot: layout prop true 1`] = `
+<main
+  class="ucl-uikit-main"
+  data-testid="ucl-uikit-main"
+>
+  <div
+    class="css-3reham"
+    data-testid="ucl-uikit-layout"
+  >
+    Content
+  </div>
+</main>
+`;
+
+exports[`Main > snapshot: no props 1`] = `
+<main
+  class="ucl-uikit-main"
+  data-testid="ucl-uikit-main"
+>
+  Content
+</main>
+`;
+
+exports[`Main > snapshot: testId prop 1`] = `
+<main
+  class="ucl-uikit-main"
+  data-testid="test123"
+>
+  Content
+</main>
+`;

package/lib/components/Main/index.ts

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

package/lib/components/Menu/Menu.context.tsx

@@ -68,7 +68,9 @@ const MenuProvider = ({
       if (!isOpen || !contentRef.current) return;
 
       const focusableElements = Array.from(
-        contentRef.current.querySelectorAll('[role="menuitem"]')
+        contentRef.current.querySelectorAll(
+          '[role="menuitem"], [aria-label="Close menu"]'
+        )
       ).filter((el) => {
         const element = el as HTMLElement;
         return (

package/lib/components/Menu/Menu.tsx

@@ -37,7 +37,7 @@ const Menu = ({
   const style = cx(NAME, baseStyle, className);
 
   return (
-    <div
+    <nav
       className={style}
       data-testid={testId}
       {...props}
@@ -52,7 +52,7 @@ const Menu = ({
           {children}
         </MenuContent>
       </MenuProvider>
-    </div>
+    </nav>
   );
 };
 

package/lib/components/Menu/MenuContent.tsx

@@ -9,7 +9,7 @@ import { useAppMenu } from './Menu.context';
 
 export const NAME = 'ucl-uikit-menu__content';
 
-export interface MenuContentProps extends HTMLAttributes<HTMLDivElement> {
+export interface MenuContentProps extends HTMLAttributes<HTMLUListElement> {
   title?: string;
   testId?: string;
   position?: 'left' | 'right';
@@ -91,7 +91,8 @@ const MenuContent: React.FC<MenuContentProps> = ({
     list-style: none;
 
     @media (min-width: ${theme.breakpoints.desktop}px) {
-      margin: 0 ${padding.p64} 0 ${padding.p72};
+      margin: 0 ${padding.p64};
+      padding: 0;
     }
   `;
 
@@ -114,14 +115,13 @@ const MenuContent: React.FC<MenuContentProps> = ({
       <header className={headerStyle}>
         <h3 className={titleStyle}>{title}</h3>
         <IconButton
-          role='menuitem'
           onClick={toggleMenu}
           aria-label='Close menu'
         >
           <Icon.X size={40} />
         </IconButton>
       </header>
-      <div
+      <ul
         role='menu'
         aria-labelledby='app-menu-button'
         className={bodyStyle}
@@ -130,7 +130,7 @@ const MenuContent: React.FC<MenuContentProps> = ({
         {...props}
       >
         {children}
-      </div>
+      </ul>
     </div>
   );
 

package/lib/components/Menu/MenuItem.tsx

@@ -1,12 +1,15 @@
 import React, { LiHTMLAttributes, memo } from 'react';
 import { css, cx } from '@emotion/css';
 import useTheme from '../../theme/useTheme';
+import Icon from '../Icon/Icon';
 
 export const NAME = 'ucl-uikit-menu__item';
 
 export interface MenuItemProps extends LiHTMLAttributes<HTMLLIElement> {
   testId?: string;
   icon?: React.ReactNode;
+  secondary?: boolean;
+  externalLink?: boolean;
 }
 
 const MenuItem: React.FC<MenuItemProps> = ({
@@ -15,6 +18,8 @@ const MenuItem: React.FC<MenuItemProps> = ({
   children,
   className,
   onClick,
+  secondary,
+  externalLink,
   ...props
 }) => {
   const isClickable = !!onClick;
@@ -22,17 +27,21 @@ const MenuItem: React.FC<MenuItemProps> = ({
 
   const baseStyle = css`
     height: 40px;
-    margin-bottom: ${theme.margin.m32};
+    margin-bottom: ${theme.margin.m16};
     display: flex;
     align-items: center;
     font-family: ${theme.font.family.primary};
     font-size: ${theme.font.size.f16};
-    font-weight: ${theme.font.weight.bold};
+    font-weight: ${secondary
+      ? `${theme.font.weight.medium}`
+      : `${theme.font.weight.bold}`};
     color: ${theme.color.text.secondary};
   `;
 
   const clickableMenuItemStyle = css`
-    color: ${theme.color.text.primary};
+    color: ${secondary
+      ? `${theme.color.text.secondary}`
+      : `${theme.color.text.primary}`};
     cursor: pointer;
     &:hover {
       background-color: ${theme.color.interaction.blue5};
@@ -77,6 +86,14 @@ const MenuItem: React.FC<MenuItemProps> = ({
       {...props}
     >
       {content}
+      {externalLink && (
+        <Icon.ExternalLink
+          size={16}
+          className={css`
+            margin-left: 8px;
+          `}
+        />
+      )}
     </li>
   );
 };

package/lib/components/Menu/MenuSection.tsx

@@ -4,7 +4,7 @@ import { useTheme } from '../../theme';
 
 export const NAME = 'ucl-uikit-menu__section';
 
-export interface MenuSectionProps extends HTMLAttributes<HTMLElement> {
+export interface MenuSectionProps extends HTMLAttributes<HTMLLIElement> {
   testId?: string;
 }
 
@@ -34,12 +34,13 @@ const MenuSection: React.FC<MenuSectionProps> = ({
   `;
 
   return (
-    <section
+    <li
+      role='presentation'
       className={style}
       {...props}
     >
       <ul className={listStyle}>{children}</ul>
-    </section>
+    </li>
   );
 };
 

package/lib/components/NativeDatepicker/NativeDatepicker.stories.tsx

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useArgs } from '@storybook/preview-api';
+import NativeDatepicker from './NativeDatepicker';
+
+const meta = {
+  title: 'Components/NativeDatepicker',
+  component: NativeDatepicker,
+  parameters: { layout: 'padded' },
+  argTypes: {
+    value: { control: { type: 'date' } },
+    minDate: { control: { type: 'date' } },
+    maxDate: { control: { type: 'date' } },
+    disabled: { control: { type: 'boolean' } },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof NativeDatepicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+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.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) => updateArgs({ value: value });
+    return (
+      <NativeDatepicker
+        {...args}
+        onValueChange={onValueChange}
+      />
+    );
+  },
+};
+
+export const Disabled: Story = {
+  name: 'Disabled',
+  args: {
+    disabled: true,
+    value: new Date(2025, 2, 10),
+  },
+  render: (args) => <NativeDatepicker {...args} />,
+};
+
+export const WithMinMaxDates: 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).toLocaleDateString(
+        'sv-SE'
+      );
+    })(),
+    // Initialise max date as 5 days before the last day of the current month
+    maxDate: (() => {
+      const now = new Date();
+      const lastDay = new Date(
+        now.getFullYear(),
+        now.getMonth() + 1,
+        0
+      ).getDate();
+      return new Date(
+        now.getFullYear(),
+        now.getMonth(),
+        lastDay - 5
+      ).toLocaleDateString('sv-SE');
+    })(),
+  },
+  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) => updateArgs({ value: value });
+    return (
+      <NativeDatepicker
+        {...args}
+        onValueChange={onValueChange}
+      />
+    );
+  },
+};

package/lib/components/{Datepicker/subcomponents → NativeDatepicker}/NativeDatepicker.tsx

@@ -1,19 +1,15 @@
 import { css, cx } from '@emotion/css';
-import { theme } from '../../../theme';
+import { theme } from '../../theme';
+import { dateToLocaleISOString } from './utils';
+import type { NativeDatepickerProps } from './NativeDatepicker.types';
 
-interface NativeDatepickerProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {
-  testId?: string;
-  ref?: React.RefObject<HTMLInputElement>;
-}
-
-const NAME = 'ucl-uikit-datepicker--native';
+const NAME = 'ucl-uikit-native-datepicker';
 
 const NativeDatepicker = ({
   value,
-  onChange,
-  min,
-  max,
+  onValueChange,
+  minDate,
+  maxDate,
   className,
   disabled,
   testId = NAME,
@@ -54,10 +50,13 @@ const NativeDatepicker = ({
   return (
     <input
       type='date'
-      value={value}
-      onChange={onChange}
-      min={min}
-      max={max}
+      value={dateToLocaleISOString(value) ?? ''}
+      onChange={(event) => {
+        const dateString = event.target.value;
+        onValueChange?.(dateString ? new Date(dateString) : null, event);
+      }}
+      min={minDate || undefined}
+      max={maxDate || undefined}
       disabled={disabled}
       className={style}
       data-testid={testId}

package/lib/components/NativeDatepicker/NativeDatepicker.types.ts

@@ -0,0 +1,19 @@
+import type { InputHTMLAttributes, RefObject } from 'react';
+
+export type DatepickerValue = Date | null;
+
+export interface NativeDatepickerProps
+  extends Omit<
+    InputHTMLAttributes<HTMLInputElement>,
+    'value' | 'onChange' | 'min' | 'max'
+  > {
+  value?: DatepickerValue;
+  onValueChange?: (
+    value: DatepickerValue,
+    event?: React.SyntheticEvent
+  ) => void;
+  minDate?: string | null;
+  maxDate?: string | null;
+  testId?: string;
+  ref?: RefObject<HTMLInputElement>;
+}

package/lib/components/NativeDatepicker/index.ts

@@ -0,0 +1,2 @@
+export { default } from './NativeDatepicker';
+export type { NativeDatepickerProps } from './NativeDatepicker.types';

package/lib/components/{Datepicker → NativeDatepicker}/utils/dateToLocaleISOString/dateToLocaleISOString.ts

@@ -1,7 +1,7 @@
 /**
  * Converts a Date object to a `YYYY-MM-DD` string based on the user's local timezone.
  *
- * Used for passing dates to <NativeDatepicker> in `Datepicker.tsx`
+ * Used for passing dates to <NativeDatepicker>
  *
  * This function uses the Swedish (`sv-SE`) locale with `toLocaleDateString`
  * as it conveniently defaults to the ISO 8601 `YYYY-MM-DD` format, while respecting

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

@@ -0,0 +1 @@
+export { default as dateToLocaleISOString } from './dateToLocaleISOString/dateToLocaleISOString';

package/lib/components/Pagination/PaginationControls.tsx

@@ -4,6 +4,7 @@ import useTheme from '../../theme/useTheme';
 import { PaginationContext } from './Pagination';
 import Button from '../Button';
 import getPaginationButtons from './getPaginationButtons';
+import { useMediaQuery } from '../../hooks';
 
 export const NAME = 'ucl-ukit-pagination__controls';
 export const DEFAULT_MAX_BUTTONS = 9;
@@ -21,6 +22,10 @@ const PaginationControls = ({
 }: PaginationControlsProps) => {
   const [theme] = useTheme();
 
+  const isTabletPlus = useMediaQuery(
+    `(min-width: ${theme.breakpoints.tablet}px)`
+  );
+
   const contextValue = useContext(PaginationContext);
 
   const handlePageChange = useCallback(
@@ -48,7 +53,7 @@ const PaginationControls = ({
   const paginationButtons = getPaginationButtons(
     currentPage,
     totalPages,
-    maxNumberButtons
+    isTabletPlus ? maxNumberButtons : 5
   );
 
   const baseStyle = css``;
@@ -61,23 +66,58 @@ const PaginationControls = ({
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: ${theme.margin.m8};
     list-style: none;
-  `;
+    gap: ${theme.margin.m4};
+    flex-wrap: nowrap;
 
-  const previousButtonStyle = css`
-    margin-right: ${theme.margin.m16};
+    @media (min-width: ${theme.breakpoints.tablet}px) {
+      gap: ${theme.margin.m8};
+    }
   `;
 
-  const nextButtonStyle = css`
-    margin-left: ${theme.margin.m16};
+  const buttonBaseStyle = css`
+    @media (max-width: ${theme.breakpoints.tablet}px) {
+      gap: ${theme.margin.m4};
+    }
   `;
 
-  const pageNumberButtonBaseStyle = css`
-    height: 48px;
-    min-width: 48px;
-    padding: 0;
-  `;
+  const previousButtonStyle = cx(
+    buttonBaseStyle,
+    css`
+      margin-right: ${theme.margin.m16};
+      display: none;
+
+      @media (min-width: ${theme.breakpoints.tablet}px) {
+        display: inline-block;
+      }
+    `
+  );
+
+  const nextButtonStyle = cx(
+    buttonBaseStyle,
+    css`
+      margin-left: ${theme.margin.m16};
+      display: none;
+
+      @media (min-width: ${theme.breakpoints.tablet}px) {
+        display: inline-block;
+      }
+    `
+  );
+
+  const pageNumberButtonBaseStyle = cx(
+    buttonBaseStyle,
+    css`
+      height: 40px;
+      min-width: 40px;
+      padding: 0;
+
+      @media (min-width: ${theme.breakpoints.tablet}px) {
+        height: 48px;
+        min-width: 48px;
+      }
+    `
+  );
 
   const pageNumberButtonStyle = cx(
     pageNumberButtonBaseStyle,
@@ -102,7 +142,7 @@ const PaginationControls = ({
   return (
     <nav
       className={style}
-      aria-label='Pagination'
+      aria-label={`Pagination, ${totalPages} pages total`}
       data-testid={testId}
     >
       <ul className={listStyle}>
@@ -110,6 +150,7 @@ const PaginationControls = ({
           <Button
             className={previousButtonStyle}
             variant='tertiary'
+            size={isTabletPlus ? 'default' : 'small'}
             aria-label='Go to previous page'
             onClick={() => handlePageChange(currentPage - 1)}
             disabled={currentPage === 1}
@@ -128,6 +169,7 @@ const PaginationControls = ({
                   <Button
                     className={pageNumberButtonStyle}
                     variant='secondary'
+                    size={isTabletPlus ? 'default' : 'small'}
                     aria-label={`Page ${page}`}
                     onClick={() => handlePageChange(page)}
                   >
@@ -138,10 +180,9 @@ const PaginationControls = ({
                   <Button
                     className={currentPageNumberButtonStyle}
                     variant='secondary'
+                    size={isTabletPlus ? 'default' : 'small'}
                     aria-label={`Page ${page}, current page`}
                     aria-current='page'
-                    aria-setsize={totalPages}
-                    aria-posinset={page}
                     disabled
                     onClick={() => handlePageChange(page)}
                   >

package/lib/components/Pagination/PaginationInfo.tsx

@@ -40,11 +40,15 @@ const PaginationInfo = ({
   }[format];
 
   const baseStyle = css`
-    margin: ${theme.margin.m24} 0;
+    margin: ${theme.margin.m16} 0;
     text-align: center;
     color: ${theme.color.text.secondary};
     font-family: ${theme.font.family.primary};
     font-size: ${theme.font.size.f16};
+
+    @media (min-width: ${theme.breakpoints.tablet}px) {
+      margin: ${theme.margin.m24} 0;
+    }
   `;
 
   const style = cx(NAME, baseStyle, className);

package/lib/components/Paragraph/Paragraph.stories.tsx

@@ -3,7 +3,7 @@ import Paragraph from './Paragraph';
 import { Link } from '../';
 
 const meta = {
-  title: 'Components/Ready to use/Paragraph',
+  title: 'Components/Paragraph',
   component: Paragraph,
   args: {
     children: 'Default paragraph text',