uikit-react-public 0.43.2 → 0.44.0

package/lib/components/HeaderNew/__tests__/Header.test.tsx

@@ -40,6 +40,47 @@ describe('Header', () => {
     expect(link.getAttribute('href')).toBe('/');
   });
 
+  test('shows the bottom border by default and can hide it', () => {
+    const { rerender } = render(
+      <ThemeContextProvider>
+        <Header title='LIDS' />
+      </ThemeContextProvider>
+    );
+
+    const header = screen.getByTestId('ucl-uikit-header');
+    const defaultClass = [...header.classList].find((className) =>
+      className.startsWith('css-')
+    );
+
+    expect(defaultClass).toBeDefined();
+    expect(document.head.textContent).toContain(
+      `.${defaultClass}{position:relative`
+    );
+    expect(document.head.textContent).toContain(
+      `.${defaultClass}{height:78px;padding:0 48px 0 64px;border-bottom:1px solid`
+    );
+
+    rerender(
+      <ThemeContextProvider>
+        <Header
+          title='LIDS'
+          showBorder={false}
+        />
+      </ThemeContextProvider>
+    );
+
+    const borderlessHeader = screen.getByTestId('ucl-uikit-header');
+    const borderlessClass = [...borderlessHeader.classList].find((className) =>
+      className.startsWith('css-')
+    );
+
+    expect(borderlessClass).toBeDefined();
+    expect(borderlessHeader).not.toHaveAttribute('showBorder');
+    expect(document.head.textContent).toContain(
+      `.${borderlessClass}{height:78px;padding:0 48px 0 64px;}`
+    );
+  });
+
   test('spaces subsequent header items on smaller screens and resets spacing on desktop', () => {
     render(
       <ThemeContextProvider>

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

@@ -5,7 +5,7 @@ exports[`Input > snapshot: no props 1`] = `
   class="ucl-uikit-input css-1bpb1dw"
 >
   <input
-    class="ucl-uikit-input__input css-10ijqev"
+    class="ucl-uikit-input__input css-kvsjyn"
     data-testid="ucl-uikit-input"
     id=""
   />
@@ -17,7 +17,7 @@ exports[`Input > snapshot: placeholder prop 1`] = `
   class="ucl-uikit-input css-1bpb1dw"
 >
   <input
-    class="ucl-uikit-input__input css-10ijqev"
+    class="ucl-uikit-input__input css-kvsjyn"
     data-testid="ucl-uikit-input"
     id=""
     placeholder="Type your value..."
@@ -30,7 +30,7 @@ exports[`Input > snapshot: testId prop 1`] = `
   class="ucl-uikit-input css-1bpb1dw"
 >
   <input
-    class="ucl-uikit-input__input css-10ijqev"
+    class="ucl-uikit-input__input css-kvsjyn"
     data-testid="test123"
     id=""
   />
@@ -42,7 +42,7 @@ exports[`Input > snapshot: value prop 1`] = `
   class="ucl-uikit-input css-1bpb1dw"
 >
   <input
-    class="ucl-uikit-input__input css-10ijqev"
+    class="ucl-uikit-input__input css-kvsjyn"
     data-testid="ucl-uikit-input"
     id=""
     value="abc"

package/lib/components/Menu/MenuContent.tsx

@@ -5,6 +5,7 @@ import useTheme from '../../theme/useTheme';
 import useMediaQuery from '../../hooks/useMediaQuery';
 import Icon from '../Icon';
 import IconButton from '../IconButton';
+import Heading from '../Heading';
 import { useAppMenu } from './Menu.context';
 
 export const NAME = 'ucl-uikit-menu__content';
@@ -113,7 +114,14 @@ const MenuContent: React.FC<MenuContentProps> = ({
       className={style}
     >
       <header className={headerStyle}>
-        <h3 className={titleStyle}>{title}</h3>
+        <Heading
+          as='h3'
+          level='xs'
+          margins={false}
+          className={titleStyle}
+        >
+          {title}
+        </Heading>
         <IconButton
           onClick={toggleMenu}
           aria-label='Close menu'

package/lib/components/NativeDatepicker/NativeDatepicker.tsx

@@ -17,6 +17,7 @@ const NativeDatepicker = ({
   ...props
 }: NativeDatepickerProps) => {
   const [theme] = useTheme();
+  const { md } = theme.typography.body;
 
   const baseStyle = css`
     width: 196px;
@@ -25,8 +26,11 @@ const NativeDatepicker = ({
     padding: 0 16px;
     border: 1px solid ${theme.colour.speciality.inputDefault};
     color: ${theme.colour.text.default};
-    font-size: 16px;
-    font-family: sans-serif;
+    font-family: ${md.fontFamily};
+    font-feature-settings: ${md.fontSettings};
+    font-size: ${md.fontSize}px;
+    font-weight: ${md.fontWeight};
+    line-height: ${md.lineHeight}%;
     text-transform: uppercase;
     cursor: pointer;
 

package/lib/components/NavigationBar/NavigationBar.stories.tsx

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { css } from '@emotion/css';
+import NavigationBar from './NavigationBar';
+import Icon from '../Icon';
+
+const meta = {
+  title: 'Components/NavigationBar',
+  component: NavigationBar,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof NavigationBar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const pageStyle = css`
+  min-height: 160px;
+`;
+
+export const Default: Story = {
+  render: () => (
+    <div className={pageStyle}>
+      <NavigationBar>
+        <NavigationBar.Item href='/courses'>Courses</NavigationBar.Item>
+        <NavigationBar.Item
+          href='/research'
+          active
+        >
+          Research
+        </NavigationBar.Item>
+        <NavigationBar.Item
+          href='/open-days'
+          icon={<Icon.ChevronDown />}
+        >
+          Open days
+        </NavigationBar.Item>
+        <NavigationBar.Item href='/events'>Events</NavigationBar.Item>
+        <NavigationBar.Item
+          href='/news'
+          disabled
+        >
+          News
+        </NavigationBar.Item>
+      </NavigationBar>
+    </div>
+  ),
+};
+
+export const Wrapped: Story = {
+  render: () => (
+    <div
+      className={css`
+        width: 720px;
+      `}
+    >
+      <NavigationBar>
+        <NavigationBar.Item
+          href='/courses'
+          active
+        >
+          Courses
+        </NavigationBar.Item>
+        <NavigationBar.Item href='/research'>Research</NavigationBar.Item>
+        <NavigationBar.Item href='/open-days'>Open days</NavigationBar.Item>
+        <NavigationBar.Item href='/events'>Events</NavigationBar.Item>
+        <NavigationBar.Item href='/news'>News</NavigationBar.Item>
+        <NavigationBar.Item href='/blogs'>IOE blogs</NavigationBar.Item>
+        <NavigationBar.Item href='/work-with-us'>
+          Work with us
+        </NavigationBar.Item>
+        <NavigationBar.Item href='/departments-and-centres'>
+          Departments and Centres
+        </NavigationBar.Item>
+        <NavigationBar.Item href='/about'>About IOE</NavigationBar.Item>
+      </NavigationBar>
+    </div>
+  ),
+};
+
+export const WithRouterLinks: Story = {
+  render: () => (
+    <NavigationBar>
+      <NavigationBar.Item
+        active
+        asChild
+      >
+        <a href='/overview'>Overview</a>
+      </NavigationBar.Item>
+      <NavigationBar.Item asChild>
+        <a href='/modules'>Modules</a>
+      </NavigationBar.Item>
+      <NavigationBar.Item asChild>
+        <a href='/people'>People</a>
+      </NavigationBar.Item>
+    </NavigationBar>
+  ),
+};

package/lib/components/NavigationBar/NavigationBar.tsx

@@ -0,0 +1,76 @@
+import {
+  Children,
+  HTMLAttributes,
+  NamedExoticComponent,
+  isValidElement,
+  memo,
+} from 'react';
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../../theme';
+import NavigationBarItem, { NavigationBarItemProps } from './NavigationBarItem';
+
+export const NAME = 'ucl-uikit-navigation-bar';
+
+export interface NavigationBarProps extends HTMLAttributes<HTMLElement> {
+  testId?: string;
+}
+
+const NavigationBarBase = ({
+  testId = NAME,
+  className,
+  children,
+  'aria-label': ariaLabel = 'Primary navigation',
+  ...props
+}: NavigationBarProps) => {
+  const [theme] = useTheme();
+  const items = Children.toArray(children).filter(isValidElement);
+
+  const baseStyle = css`
+    box-sizing: border-box;
+    display: flex;
+    width: 100%;
+    padding: 0 ${theme.padding.p16};
+    align-items: flex-end;
+    background-color: ${theme.colour.surface.primary};
+    border-bottom: ${theme.border.b1} solid ${theme.colour.border.subtle};
+
+    @media (min-width: ${theme.breakpoints.tablet}px) {
+      padding: 0 ${theme.padding.p48};
+    }
+  `;
+
+  const listStyle = css`
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 2px 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  `;
+
+  const style = cx(NAME, baseStyle, className);
+
+  return (
+    <nav
+      className={style}
+      data-testid={testId}
+      aria-label={ariaLabel}
+      {...props}
+    >
+      <ul className={listStyle}>{items}</ul>
+    </nav>
+  );
+};
+
+export interface NavigationBarComponent extends NamedExoticComponent<NavigationBarProps> {
+  Item: typeof NavigationBarItem;
+}
+
+const NavigationBar = Object.assign(memo(NavigationBarBase), {
+  Item: NavigationBarItem,
+}) as NavigationBarComponent;
+
+export type { NavigationBarItemProps };
+
+export default NavigationBar;

package/lib/components/NavigationBar/NavigationBarItem.tsx

@@ -0,0 +1,236 @@
+import {
+  Children,
+  ComponentPropsWithoutRef,
+  ElementType,
+  ReactElement,
+  ReactNode,
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  memo,
+} from 'react';
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../../theme';
+import Text from '../Text';
+import BaseLink, { BaseLinkProps } from '../Link/BaseLink';
+import type { IconProps } from '../Icon';
+
+export const NAME = 'ucl-uikit-navigation-bar__item';
+
+type NavigationBarItemOwnProps = {
+  active?: boolean;
+  disabled?: boolean;
+  icon?: ReactElement<IconProps>;
+  iconPosition?: 'left' | 'right';
+  testId?: string;
+  className?: string;
+  children?: ReactNode;
+};
+
+export type NavigationBarItemProps<C extends ElementType = 'a'> =
+  NavigationBarItemOwnProps &
+    BaseLinkProps<C> &
+    Omit<ComponentPropsWithoutRef<C>, keyof NavigationBarItemOwnProps>;
+
+type NavigationBarItemComponent = <C extends ElementType = 'a'>(
+  props: NavigationBarItemProps<C> & {
+    ref?: React.ComponentPropsWithRef<C>['ref'];
+  }
+) => React.JSX.Element;
+
+const NavigationBarItem = forwardRef(function NavigationBarItemInner(
+  {
+    active = false,
+    disabled = false,
+    icon,
+    iconPosition = 'right',
+    testId = NAME,
+    className,
+    children,
+    asChild = false,
+    ...props
+  }: NavigationBarItemProps<ElementType>,
+  ref: React.Ref<Element>
+) {
+  const [theme] = useTheme();
+
+  const listItemStyle = css`
+    display: inline-flex;
+  `;
+
+  const baseStyle = css`
+    box-sizing: border-box;
+    display: inline-flex;
+    min-height: 40px;
+    padding: ${theme.padding.p8} ${theme.padding.p16} 0;
+    align-items: stretch;
+    justify-content: center;
+    color: ${theme.colour.link.primary};
+    background-color: transparent;
+    text-decoration: none;
+    cursor: pointer;
+    outline: none;
+
+    &:visited {
+      color: ${theme.colour.link.primary};
+    }
+
+    &:hover {
+      color: ${theme.colour.link.primary};
+      background-color: ${theme.colour.fill.brandSubtleHover};
+      text-decoration: none;
+    }
+
+    &:focus-visible {
+      box-shadow: ${theme.boxShadow.focus};
+      z-index: 1;
+    }
+  `;
+
+  const activeStyle = css`
+    color: ${theme.colour.link.primary};
+
+    &:visited,
+    &:hover {
+      color: ${theme.colour.link.primary};
+    }
+  `;
+
+  const disabledStyle = css`
+    color: ${theme.colour.link.disabled};
+    background-color: transparent;
+    cursor: not-allowed;
+
+    &:visited,
+    &:hover {
+      color: ${theme.colour.link.disabled};
+      background-color: transparent;
+    }
+  `;
+
+  const contentStyle = css`
+    display: inline-flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: flex-start;
+    gap: 2px;
+  `;
+
+  const labelRowStyle = css`
+    display: inline-flex;
+    min-height: 24px;
+    align-items: center;
+    justify-content: center;
+    gap: ${theme.padding.p4};
+    color: inherit;
+    white-space: nowrap;
+  `;
+
+  const textStackStyle = css`
+    display: inline-grid;
+    align-items: center;
+    justify-items: start;
+    color: inherit;
+  `;
+
+  const textStyle = css`
+    grid-area: 1 / 1;
+    color: inherit;
+    white-space: nowrap;
+  `;
+
+  const hiddenTextStyle = css`
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+    pointer-events: none;
+  `;
+
+  const indicatorStyle = css`
+    display: block;
+    height: 6px;
+    background-color: ${active ? theme.colour.fill.brand : 'transparent'};
+  `;
+
+  const iconStyle = css`
+    display: block;
+    flex-shrink: 0;
+  `;
+
+  const style = cx(
+    NAME,
+    baseStyle,
+    active && activeStyle,
+    disabled && disabledStyle,
+    className
+  );
+
+  const renderContent = (content: ReactNode) => (
+    <span className={contentStyle}>
+      <span className={labelRowStyle}>
+        {icon &&
+          iconPosition === 'left' &&
+          cloneElement(icon, {
+            size: icon.props.size ?? 20,
+            className: cx(iconStyle, icon.props.className),
+            'aria-hidden': icon.props['aria-hidden'] ?? true,
+          })}
+        <span className={textStackStyle}>
+          <Text
+            level={active ? 'md-semibold' : 'md'}
+            className={textStyle}
+          >
+            {content}
+          </Text>
+          <Text
+            aria-hidden
+            level='md-semibold'
+            className={cx(textStyle, hiddenTextStyle)}
+          >
+            {content}
+          </Text>
+        </span>
+        {icon &&
+          iconPosition === 'right' &&
+          cloneElement(icon, {
+            size: icon.props.size ?? 20,
+            className: cx(iconStyle, icon.props.className),
+            'aria-hidden': icon.props['aria-hidden'] ?? true,
+          })}
+      </span>
+      <span
+        className={indicatorStyle}
+        aria-hidden='true'
+      />
+    </span>
+  );
+
+  const content = asChild
+    ? (() => {
+        const child = Children.only(children);
+
+        return isValidElement<{ children?: ReactNode }>(child)
+          ? cloneElement(child, {}, renderContent(child.props.children))
+          : child;
+      })()
+    : renderContent(children);
+
+  return (
+    <li className={listItemStyle}>
+      <BaseLink
+        ref={ref}
+        className={style}
+        testId={testId}
+        disabled={disabled}
+        asChild={asChild}
+        aria-current={active ? 'page' : undefined}
+        data-state={active ? 'active' : 'inactive'}
+        {...props}
+      >
+        {content}
+      </BaseLink>
+    </li>
+  );
+}) as unknown as NavigationBarItemComponent;
+
+export default memo(NavigationBarItem) as NavigationBarItemComponent;

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

@@ -0,0 +1,90 @@
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import NavigationBar from '../NavigationBar';
+import Icon from '../../Icon';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+
+const wrap = (ui: React.ReactElement) =>
+  render(<ThemeContextProvider>{ui}</ThemeContextProvider>);
+
+describe('NavigationBar', () => {
+  test('renders a navigation landmark with link items', () => {
+    wrap(
+      <NavigationBar aria-label='Section navigation'>
+        <NavigationBar.Item href='/courses'>Courses</NavigationBar.Item>
+        <NavigationBar.Item href='/research'>Research</NavigationBar.Item>
+      </NavigationBar>
+    );
+
+    expect(
+      screen.getByRole('navigation', { name: 'Section navigation' })
+    ).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Courses' })).toHaveAttribute(
+      'href',
+      '/courses'
+    );
+  });
+
+  test('marks the active item and reserves bold label width', () => {
+    wrap(
+      <NavigationBar>
+        <NavigationBar.Item
+          href='/courses'
+          active
+        >
+          Courses
+        </NavigationBar.Item>
+      </NavigationBar>
+    );
+
+    const item = screen.getByRole('link', { name: 'Courses' });
+    const generatedClass = [...item.classList].find((className) =>
+      className.startsWith('css-')
+    );
+
+    expect(item).toHaveAttribute('aria-current', 'page');
+    expect(item).toHaveAttribute('data-state', 'active');
+    expect(screen.getAllByText('Courses')).toHaveLength(2);
+    expect(generatedClass).toBeDefined();
+    expect(document.head.textContent).toContain('visibility:hidden');
+    expect(document.head.textContent).toContain('white-space:nowrap');
+  });
+
+  test('supports disabled items', () => {
+    wrap(
+      <NavigationBar>
+        <NavigationBar.Item
+          href='/news'
+          disabled
+        >
+          News
+        </NavigationBar.Item>
+      </NavigationBar>
+    );
+
+    const item = screen.getAllByText('News')[0].closest('a');
+
+    expect(item).toBeInTheDocument();
+    expect(item).toHaveAttribute('aria-disabled', 'true');
+    expect(item).toHaveAttribute('tabindex', '-1');
+    expect(item).not.toHaveAttribute('href');
+  });
+
+  test('supports icons and asChild links', () => {
+    wrap(
+      <NavigationBar>
+        <NavigationBar.Item
+          icon={<Icon.ChevronDown />}
+          asChild
+        >
+          <a href='/open-days'>Open days</a>
+        </NavigationBar.Item>
+      </NavigationBar>
+    );
+
+    const item = screen.getByRole('link', { name: 'Open days' });
+
+    expect(item).toHaveAttribute('href', '/open-days');
+    expect(item.querySelector('svg')).toBeInTheDocument();
+  });
+});

package/lib/components/NavigationBar/index.ts

@@ -0,0 +1,5 @@
+export { default } from './NavigationBar';
+export type {
+  NavigationBarItemProps,
+  NavigationBarProps,
+} from './NavigationBar';

package/lib/components/Pagination/PaginationInfo.tsx

@@ -1,6 +1,7 @@
 import { useContext, memo } from 'react';
 import { css, cx } from '@emotion/css';
 import useTheme from '../../theme/useTheme';
+import Paragraph from '../Paragraph';
 import { PaginationContext } from './Pagination';
 
 export const NAME = 'ucl-uikit-pagination__info';
@@ -14,7 +15,7 @@ export interface PaginationInfoProps extends React.HTMLAttributes<HTMLDivElement
 const PaginationInfo = ({
   format = 'pages',
   itemsPluralName,
-  testId,
+  testId = NAME,
   className,
   ...props
 }: PaginationInfoProps) => {
@@ -51,8 +52,6 @@ const PaginationInfo = ({
     margin: ${theme.margin.m16} 0;
     text-align: center;
     color: ${theme.colour.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;
@@ -62,15 +61,18 @@ const PaginationInfo = ({
   const style = cx(NAME, baseStyle, className);
 
   return (
-    <div
+    <Paragraph
+      as='div'
+      level='md'
+      noMargins
       className={style}
-      data-testid={testId}
+      testId={testId}
       aria-live='polite'
       aria-label={`Pagination info: ${text}`}
       {...props}
     >
       {text}
-    </div>
+    </Paragraph>
   );
 };