uikit-react-public 0.24.5 → 0.25.1

package/lib/components/MenuNew/ActionMenuItem.tsx

@@ -0,0 +1,31 @@
+import { cx } from '@emotion/css';
+import { MenuBaseItemProps } from './MenuBaseItem';
+import MenuBaseItem from './MenuBaseItem';
+import MenuItemText from './MenuItemText';
+
+export const NAME = 'ucl-uikit-menu__action-item';
+
+export interface ActionMenuItemProps extends MenuBaseItemProps {
+  asChild?: boolean;
+}
+
+const ActionMenuItem = ({
+  className,
+  children,
+  asChild,
+  ...props
+}: ActionMenuItemProps) => {
+  const style = cx(NAME, className);
+
+  return (
+    <MenuBaseItem
+      className={style}
+      {...props}
+      iconPosition='right'
+    >
+      <MenuItemText asChild={asChild}>{children}</MenuItemText>
+    </MenuBaseItem>
+  );
+};
+
+export default ActionMenuItem;

package/lib/components/MenuNew/Menu.tsx

@@ -1,44 +1,46 @@
-import { HTMLAttributes, memo } from 'react';
+import { HTMLAttributes, NamedExoticComponent, memo } from 'react';
 import { css, cx } from '@emotion/css';
+import MenuBaseItem, { MenuBaseItemProps } from './MenuBaseItem';
+import MenuDivider, { MenuDividerProps } from './MenuDivider';
+import ActionMenuItem, { ActionMenuItemProps } from './ActionMenuItem';
+import PrimaryMenuItem, { PrimaryMenuItemProps } from './PrimaryMenuItem';
+import SecondaryMenuItem, { SecondaryMenuItemProps } from './SecondaryMenuItem';
 import { useTheme } from '../../theme';
-import MenuProvider from './Menu.context';
-import MenuContent from './MenuContent';
-import MenuItem from './MenuItem';
-import MenuSection from './MenuSection';
-import ButtonMenuTrigger, { ButtonMenuTriggerProps } from './trigger/ButtonMenuTrigger';
 
 export const NAME = 'ucl-uikit-menu';
 
 export interface MenuProps extends HTMLAttributes<HTMLDivElement> {
-  defaultOpen?: boolean;
-  title?: string;
-  menuId?: string;
-  position?: 'left' | 'right';
-  trigger?: React.ComponentType<ButtonMenuTriggerProps>;
   testId?: string;
+  border?: boolean;
 }
 
+export type {
+  MenuDividerProps,
+  MenuBaseItemProps,
+  PrimaryMenuItemProps,
+  SecondaryMenuItemProps,
+  ActionMenuItemProps,
+};
+
 const Menu = ({
-  defaultOpen = false,
-  title,
-  position = 'right',
-  trigger,
-  menuId = NAME,
   testId = NAME,
-  children,
   className,
+  children,
+  border = false,
   ...props
 }: MenuProps) => {
   const [theme] = useTheme();
-
   const baseStyle = css`
-    position: relative;
-    font-family: ${theme.font.family.primary};
-  `;
+    padding: ${theme.padding.p16} ${theme.padding.p24};
 
-  const style = cx(NAME, baseStyle, className);
-
-  const TriggerComp = trigger ?? ButtonMenuTrigger;
+    @media screen and (min-width: ${theme.breakpoints.tablet}px) {
+      padding: ${theme.padding.p48} ${theme.padding.p64};
+    }
+  `;
+  const borderStyle = css`
+    border: 1px solid ${theme.colour.border.subtle};
+  `;
+  const style = cx(baseStyle, border && borderStyle, className);
 
   return (
     <nav
@@ -46,30 +48,25 @@ const Menu = ({
       data-testid={testId}
       {...props}
     >
-      <MenuProvider defaultOpen={defaultOpen}>
-        <TriggerComp aria-controls={menuId} />
-        <MenuContent
-          id={menuId}
-          title={title}
-          position={position}
-        >
-          {children}
-        </MenuContent>
-      </MenuProvider>
+      {children}
     </nav>
   );
 };
 
-export interface IMenuSubComponents {
-  Section: typeof MenuSection;
-  Item: typeof MenuItem;
+interface MenuComponent extends NamedExoticComponent<MenuProps> {
+  Divider: typeof MenuDivider;
+  BaseItem: typeof MenuBaseItem;
+  PrimaryItem: typeof PrimaryMenuItem;
+  SecondaryItem: typeof SecondaryMenuItem;
+  ActionItem: typeof ActionMenuItem;
 }
 
-const MemoMenu = memo(Menu);
-
-const MenuWithSubComponents = MemoMenu as typeof MemoMenu & IMenuSubComponents;
-
-MenuWithSubComponents.Section = MenuSection;
-MenuWithSubComponents.Item = MenuItem;
+const MemoMenu: MenuComponent = Object.assign(memo(Menu), {
+  Divider: MenuDivider,
+  BaseItem: MenuBaseItem,
+  PrimaryItem: PrimaryMenuItem,
+  SecondaryItem: SecondaryMenuItem,
+  ActionItem: ActionMenuItem,
+});
 
-export default MenuWithSubComponents;
+export default MemoMenu;

package/lib/components/MenuNew/MenuBaseItem.tsx

@@ -0,0 +1,72 @@
+import { HTMLAttributes, KeyboardEvent, ReactNode } from 'react';
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../../theme';
+
+export interface MenuBaseItemProps extends HTMLAttributes<HTMLDivElement> {
+  icon?: ReactNode;
+  iconPosition?: 'left' | 'right';
+}
+
+const MenuBaseItem = ({
+  icon,
+  iconPosition = 'left',
+  className,
+  children,
+  onClick,
+  onKeyDown,
+  role,
+  tabIndex,
+  ...props
+}: MenuBaseItemProps) => {
+  const [theme] = useTheme();
+  const isInteractive = typeof onClick === 'function';
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    onKeyDown?.(event);
+
+    if (event.defaultPrevented || !isInteractive) {
+      return;
+    }
+
+    if (event.key === 'Enter') {
+      event.currentTarget.click();
+    }
+
+    if (event.key === ' ') {
+      event.preventDefault();
+      event.currentTarget.click();
+    }
+  };
+
+  const baseStyle = css`
+    width: 360px;
+    box-sizing: border-box;
+    min-height: 48px;
+    display: flex;
+    align-items: center;
+    gap: ${theme.margin.m32};
+    cursor: pointer;
+
+    &:hover .ucl-uikit-menu__item-text {
+      text-decoration: underline;
+    }
+  `;
+  const style = cx(baseStyle, className);
+
+  return (
+    <div
+      className={style}
+      onClick={onClick}
+      onKeyDown={handleKeyDown}
+      role={role ?? (isInteractive ? 'button' : undefined)}
+      tabIndex={tabIndex ?? (isInteractive ? 0 : undefined)}
+      {...props}
+    >
+      {iconPosition === 'left' && icon}
+      {children}
+      {iconPosition === 'right' && icon}
+    </div>
+  );
+};
+
+export default MenuBaseItem;

package/lib/components/MenuNew/MenuDivider.tsx

@@ -0,0 +1,25 @@
+import { HTMLAttributes } from 'react';
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../../theme';
+
+export const NAME = 'ucl-uikit-menu__divider';
+
+export interface MenuDividerProps extends HTMLAttributes<HTMLHRElement> {}
+
+const MenuDivider = ({ className, ...props }: MenuDividerProps) => {
+  const [theme] = useTheme();
+  const baseStyle = css`
+    border: 0;
+    border-top: 1px solid ${theme.colour.border.subtle};
+  `;
+  const style = cx(NAME, baseStyle, className);
+
+  return (
+    <hr
+      className={style}
+      {...props}
+    />
+  );
+};
+
+export default MenuDivider;

package/lib/components/MenuNew/MenuItemText.tsx

@@ -0,0 +1,58 @@
+import { css, cx } from '@emotion/css';
+import {
+  Children,
+  ReactElement,
+  ReactNode,
+  cloneElement,
+  isValidElement,
+} from 'react';
+import Text from '../Text';
+
+export const NAME = 'ucl-uikit-menu__item-text';
+
+export interface MenuItemTextProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+const MenuItemText = ({
+  asChild = false,
+  className,
+  children,
+}: MenuItemTextProps) => {
+  const asChildResetStyle = css`
+    font: inherit;
+    color: inherit;
+    text-decoration: none;
+
+    &:hover,
+    &:visited,
+    &:active,
+    &:focus {
+      color: inherit;
+      text-decoration: inherit;
+    }
+  `;
+  const style = cx(NAME, className);
+
+  if (asChild) {
+    const child = Children.only(children) as ReactElement<{
+      className?: string;
+    }>;
+
+    if (isValidElement(child)) {
+      return (
+        <Text className={style}>
+          {cloneElement(child, {
+            className: cx(asChildResetStyle, child.props.className),
+          })}
+        </Text>
+      );
+    }
+  }
+
+  return <Text className={style}>{children}</Text>;
+};
+
+export default MenuItemText;

package/lib/components/MenuNew/PrimaryMenuItem.tsx

@@ -0,0 +1,60 @@
+import { css, cx } from '@emotion/css';
+import { ReactNode } from 'react';
+import { MenuBaseItemProps } from './MenuBaseItem';
+import MenuBaseItem from './MenuBaseItem';
+import MenuItemText from './MenuItemText';
+import { useTheme } from '../../theme';
+
+export const NAME = 'ucl-uikit-menu__primary-item';
+
+export interface PrimaryMenuItemProps extends Omit<
+  MenuBaseItemProps,
+  'iconPosition'
+> {
+  asChild?: boolean;
+  trailingContent?: ReactNode;
+}
+
+const PrimaryMenuItem = ({
+  className,
+  children,
+  asChild,
+  trailingContent,
+  ...props
+}: PrimaryMenuItemProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    color: ${theme.colour.text.default};
+  `;
+
+  const style = cx(NAME, baseStyle, className);
+
+  const textStyle = css``;
+
+  const contentStyle = css`
+    display: inline-flex;
+    align-items: center;
+    gap: ${theme.margin.m16};
+  `;
+
+  return (
+    <MenuBaseItem
+      className={style}
+      {...props}
+      iconPosition='left'
+    >
+      <span className={contentStyle}>
+        <MenuItemText
+          asChild={asChild}
+          className={textStyle}
+        >
+          {children}
+        </MenuItemText>
+        {trailingContent}
+      </span>
+    </MenuBaseItem>
+  );
+};
+
+export default PrimaryMenuItem;

package/lib/components/MenuNew/SecondaryMenuItem.tsx

@@ -0,0 +1,67 @@
+import { css, cx } from '@emotion/css';
+import { MenuBaseItemProps } from './MenuBaseItem';
+import MenuBaseItem from './MenuBaseItem';
+import MenuItemText from './MenuItemText';
+import { useTheme } from '../../theme';
+import Icon from '../Icon';
+
+export const NAME = 'ucl-uikit-menu__secondary-item';
+
+export interface SecondaryMenuItemProps extends Omit<
+  MenuBaseItemProps,
+  'iconPosition'
+> {
+  asChild?: boolean;
+  externalLink?: boolean;
+}
+
+const SecondaryMenuItem = ({
+  className,
+  children,
+  asChild,
+  externalLink,
+  ...props
+}: SecondaryMenuItemProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    color: ${theme.colour.text.secondary};
+  `;
+
+  const style = cx(NAME, baseStyle, className);
+
+  const textStyle = css`
+    color: ${theme.colour.text.secondary};
+  `;
+
+  const contentStyle = css`
+    display: inline-flex;
+    align-items: center;
+    gap: ${theme.margin.m8};
+  `;
+
+  return (
+    <MenuBaseItem
+      className={style}
+      {...props}
+    >
+      <span className={contentStyle}>
+        <MenuItemText
+          asChild={asChild}
+          className={textStyle}
+        >
+          {children}
+        </MenuItemText>
+        {externalLink && (
+          <Icon.ExternalLink
+            size={16}
+            aria-hidden='true'
+            focusable='false'
+          />
+        )}
+      </span>
+    </MenuBaseItem>
+  );
+};
+
+export default SecondaryMenuItem;

package/lib/components/MenuNew/__tests__/Menu.test.tsx

@@ -0,0 +1,138 @@
+import { describe, expect, test, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import Menu from '../Menu';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+
+const wrap = (ui: React.ReactElement) =>
+  render(<ThemeContextProvider>{ui}</ThemeContextProvider>);
+
+describe('Menu', () => {
+  test('renders menu root with default test id', () => {
+    wrap(<Menu>Content</Menu>);
+
+    expect(screen.getByTestId('ucl-uikit-menu')).toBeInTheDocument();
+  });
+
+  test('has no border by default', () => {
+    wrap(<Menu>Content</Menu>);
+
+    const menu = screen.getByTestId('ucl-uikit-menu');
+    const computedStyles = window.getComputedStyle(menu);
+    expect(computedStyles.borderTopStyle).toBe('');
+  });
+
+  test('allows border to be enabled with prop override', () => {
+    wrap(<Menu border>Content</Menu>);
+
+    const menu = screen.getByTestId('ucl-uikit-menu');
+    const computedStyles = window.getComputedStyle(menu);
+    expect(computedStyles.borderTopStyle).toBe('solid');
+  });
+
+  test('supports click-handler items without asChild link component', () => {
+    const onClick = vi.fn();
+
+    wrap(
+      <Menu>
+        <Menu.PrimaryItem onClick={onClick}>Home</Menu.PrimaryItem>
+      </Menu>
+    );
+
+    fireEvent.click(screen.getByText('Home'));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  test('click-handler items are keyboard accessible', () => {
+    const onClick = vi.fn();
+
+    wrap(
+      <Menu>
+        <Menu.PrimaryItem onClick={onClick}>Home</Menu.PrimaryItem>
+      </Menu>
+    );
+
+    const item = screen
+      .getByText('Home')
+      .closest('.ucl-uikit-menu__primary-item');
+
+    expect(item).toHaveAttribute('role', 'button');
+    expect(item).toHaveAttribute('tabindex', '0');
+
+    fireEvent.keyDown(item as Element, { key: 'Enter' });
+    fireEvent.keyDown(item as Element, { key: ' ' });
+    expect(onClick).toHaveBeenCalledTimes(2);
+  });
+
+  test('renders asChild link content for primary item', () => {
+    wrap(
+      <Menu>
+        <Menu.PrimaryItem asChild>
+          <a href='/home'>Home</a>
+        </Menu.PrimaryItem>
+      </Menu>
+    );
+
+    const link = screen.getByRole('link', { name: 'Home' });
+    expect(link).toBeInTheDocument();
+    expect(link.closest('.ucl-uikit-menu__item-text')).toBeInTheDocument();
+  });
+
+  test('primary item enforces icon on the left', () => {
+    const { getByText } = wrap(
+      <Menu>
+        <Menu.PrimaryItem icon={<span data-testid='left-icon'>I</span>}>
+          Home
+        </Menu.PrimaryItem>
+      </Menu>
+    );
+
+    const item = getByText('Home').closest('.ucl-uikit-menu__primary-item');
+    expect(item?.firstChild).toHaveAttribute('data-testid', 'left-icon');
+  });
+
+  test('action item enforces icon on the right', () => {
+    const { getByText } = wrap(
+      <Menu>
+        <Menu.ActionItem icon={<span data-testid='right-icon'>I</span>}>
+          Sign out
+        </Menu.ActionItem>
+      </Menu>
+    );
+
+    const item = getByText('Sign out').closest('.ucl-uikit-menu__action-item');
+    expect(item?.lastChild).toHaveAttribute('data-testid', 'right-icon');
+  });
+
+  test('secondary externalLink item renders external icon', () => {
+    const { container } = wrap(
+      <Menu>
+        <Menu.SecondaryItem externalLink>
+          Accessibility statement
+        </Menu.SecondaryItem>
+      </Menu>
+    );
+
+    const externalItem = screen
+      .getByText('Accessibility statement')
+      .closest('.ucl-uikit-menu__secondary-item');
+
+    expect(externalItem).toBeInTheDocument();
+    expect(
+      container.querySelector('.ucl-uikit-menu__secondary-item svg')
+    ).toBeTruthy();
+  });
+
+  test('secondary externalLink icon is hidden from assistive tech', () => {
+    const { container } = wrap(
+      <Menu>
+        <Menu.SecondaryItem externalLink>
+          Accessibility statement
+        </Menu.SecondaryItem>
+      </Menu>
+    );
+
+    const icon = container.querySelector('.ucl-uikit-menu__secondary-item svg');
+    expect(icon).toHaveAttribute('aria-hidden', 'true');
+    expect(icon).toHaveAttribute('focusable', 'false');
+  });
+});

package/lib/components/MenuNew/index.ts

@@ -1,8 +1,9 @@
 export { default } from './Menu';
-export type { MenuProps } from './Menu';
-
-export { default as MenuContent } from './MenuContent';
-export type { MenuContentProps } from './MenuContent';
-
-export { default as ButtonMenuTrigger } from './trigger/ButtonMenuTrigger';
-export type { ButtonMenuTriggerProps } from './trigger/ButtonMenuTrigger';
+export type {
+  MenuProps,
+  MenuDividerProps,
+  MenuBaseItemProps,
+  PrimaryMenuItemProps,
+  SecondaryMenuItemProps,
+  ActionMenuItemProps,
+} from './Menu';