uikit-react-public 0.43.4 → 0.44.2

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';
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.43.4",
+  "version": "0.44.2",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",