uikit-react-public 0.43.4 → 0.44.0

package/lib/components/Header/Header.mdx

@@ -3,6 +3,7 @@ import { Meta, Title, Subtitle, Canvas, Controls } from "@storybook/addon-docs/b
 
 export const usage = {
   default: `<Header title='App Name' />`,
+  noBorder: `<Header title='App Name' showBorder={false} />`,
   homeLink: `<Header title='App Name' homeLinkHref='/' homeLinkAriaLabel='Go to home' />`,
   menu: `<Header title='App Name' homeLinkHref='/'>
   <Header.Menu>
@@ -26,6 +27,12 @@ to add a menu button on the right.
 
 <Canvas source={{ code: usage.default }} />
 
+## Border
+
+Set `showBorder={false}` when another component, such as `NavigationBar`, sits directly below the header and should provide the dividing border.
+
+<Canvas of={HeaderStories.WithoutBorder} source={{ code: usage.noBorder }} />
+
 ## Home link
 
 Add `homeLinkHref` (and optionally `homeLinkAriaLabel`) to make the logo/title act as a home link.
@@ -49,4 +56,4 @@ Use `fixed` to pin the header to the top of the viewport.
 Full props specification for `<Header>` is below.
 <Canvas source={{ code: usage.default }} />
 You can use the controls below to manipulate the `<Header>` component above.
-<Controls />
+<Controls />

package/lib/components/Header/Header.stories.tsx

@@ -13,6 +13,7 @@ const meta = {
   },
   argTypes: {
     title: { control: 'text' },
+    showBorder: { control: 'boolean' },
     fixed: { control: 'boolean' },
     homeLinkHref: { control: 'text' },
     homeLinkAriaLabel: { control: 'text' },
@@ -77,6 +78,18 @@ export const WithHomeLink: Story = {
   },
 };
 
+export const WithoutBorder: Story = {
+  name: 'Without border',
+  render: (args) => (
+    <div style={{ overflow: 'hidden' }}>
+      <Header {...args} />
+    </div>
+  ),
+  args: {
+    showBorder: false,
+  },
+};
+
 export const WithMenu: Story = {
   render: (args) => (
     <div style={storyWrapperStyle}>

package/lib/components/Header/Header.tsx

@@ -13,6 +13,7 @@ export const DEFAULT_Z_INDEX = 3;
 
 export interface HeaderProps extends HTMLAttributes<HTMLElement> {
   title?: string;
+  showBorder?: boolean;
   /** @deprecated Only used by the default-theme legacy Header. */
   fixed?: boolean;
   titleAs?: React.ElementType<React.HTMLAttributes<HTMLElement>>;
@@ -164,6 +165,7 @@ const LegacyHeader = ({
 
 const Header = ({
   title,
+  showBorder = true,
   titleAs = 'div',
   titleClassName,
   titleProps,
@@ -206,6 +208,7 @@ const Header = ({
   return (
     <HeaderNew
       title={title ?? ''}
+      showBorder={showBorder}
       titleAs={titleAs}
       titleClassName={titleClassName}
       titleProps={titleProps}

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

@@ -89,4 +89,26 @@ describe('Header', () => {
     expect(link).toBeInTheDocument();
     expect(link.getAttribute('href')).toBe('/');
   });
+
+  test('passes showBorder to the new header implementation', () => {
+    render(
+      <ThemeContextProvider theme='light'>
+        <Header
+          title='LIDS'
+          showBorder={false}
+        />
+      </ThemeContextProvider>
+    );
+
+    const header = screen.getByTestId('ucl-uikit-header');
+    const generatedClass = [...header.classList].find((className) =>
+      className.startsWith('css-')
+    );
+
+    expect(generatedClass).toBeDefined();
+    expect(header).not.toHaveAttribute('showBorder');
+    expect(document.head.textContent).toContain(
+      `.${generatedClass}{height:78px;padding:0 48px 0 64px;}`
+    );
+  });
 });

package/lib/components/HeaderNew/Header.tsx

@@ -12,6 +12,7 @@ export const NAME = 'ucl-uikit-header';
 
 export interface HeaderProps extends HTMLAttributes<HTMLElement> {
   title: string;
+  showBorder?: boolean;
   titleAs?: React.ElementType<React.HTMLAttributes<HTMLElement>>;
   titleClassName?: string;
   titleProps?: Record<string, unknown>;
@@ -22,6 +23,7 @@ export interface HeaderProps extends HTMLAttributes<HTMLElement> {
 
 const Header = ({
   title,
+  showBorder = true,
   titleAs = 'div',
   titleClassName,
   titleProps,
@@ -51,7 +53,11 @@ const Header = ({
     @media (min-width: ${theme.breakpoints.desktop}px) {
       height: ${HEADER_TABLET_HEIGHT_PX}px;
       padding: 0 ${theme.padding.p48} 0 ${theme.padding.p64};
-      border-bottom: 1px solid ${theme.colour.border.subtle};
+      ${
+        showBorder
+          ? `border-bottom: 1px solid ${theme.colour.border.subtle};`
+          : ''
+      }
     }
   `;
 

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/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/index.ts

@@ -148,6 +148,12 @@ export type { HeaderProps } from './Header';
 export { default as HeaderNew } from './HeaderNew';
 export type { HeaderProps as HeaderNewProps } from './HeaderNew';
 
+export { default as NavigationBar } from './NavigationBar';
+export type {
+  NavigationBarItemProps,
+  NavigationBarProps,
+} from './NavigationBar';
+
 export { default as HeaderDraft } from './HeaderDraft';
 export type { HeaderDraftProps } from './HeaderDraft';