uikit-react-public 0.25.0 → 0.25.2

package/lib/components/MenuNew/MenuBaseItem.tsx

@@ -1,43 +1,100 @@
-import { HTMLAttributes, ReactNode } from 'react';
+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';
+  endAdornment?: ReactNode;
+  underlineOnHover?: boolean;
+  asChild?: boolean;
 }
 
 const MenuBaseItem = ({
   icon,
   iconPosition = 'left',
+  endAdornment,
   className,
   children,
+  onClick,
+  onKeyDown,
+  role,
+  tabIndex,
+  underlineOnHover = true,
+  asChild = false,
   ...props
 }: MenuBaseItemProps) => {
   const [theme] = useTheme();
+  const isInteractive = typeof onClick === 'function';
+  const shouldUseButtonSemantics = !asChild;
+
+  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;
+    width: 100%;
     box-sizing: border-box;
     min-height: 48px;
+    border-radius: ${theme.radius.r2};
     display: flex;
     align-items: center;
-    gap: ${theme.margin.m32};
+    gap: ${theme.margin.m16};
     cursor: pointer;
+    outline: none;
+
+    &:focus-visible {
+      box-shadow: ${theme.boxShadow.focus};
+    }
 
-    &:hover .ucl-uikit-menu__item-text {
-      text-decoration: underline;
+    &:focus-within {
+      box-shadow: ${theme.boxShadow.focus};
     }
+
+    ${underlineOnHover &&
+    `
+      &:hover .ucl-uikit-menu__item-text {
+        text-decoration: underline;
+      }
+    `}
   `;
   const style = cx(baseStyle, className);
 
+  const endAdornmentStyle = css`
+    margin-left: auto;
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+  `;
+
   return (
     <div
       className={style}
+      onClick={onClick}
+      onKeyDown={handleKeyDown}
+      role={role ?? (shouldUseButtonSemantics ? 'button' : undefined)}
+      tabIndex={tabIndex ?? (shouldUseButtonSemantics ? 0 : undefined)}
       {...props}
     >
       {iconPosition === 'left' && icon}
       {children}
       {iconPosition === 'right' && icon}
+      {endAdornment && (
+        <span className={endAdornmentStyle}>{endAdornment}</span>
+      )}
     </div>
   );
 };

package/lib/components/MenuNew/MenuDivider.tsx

@@ -10,7 +10,9 @@ const MenuDivider = ({ className, ...props }: MenuDividerProps) => {
   const [theme] = useTheme();
   const baseStyle = css`
     border: 0;
-    border-top: 1px solid ${theme.colour.border.subtle};
+    height: 1px;
+    background-color: ${theme.colour.border.subtle};
+    margin: ${theme.margin.m16} 0;
   `;
   const style = cx(NAME, baseStyle, className);
 

package/lib/components/MenuNew/MenuHeading.tsx

@@ -0,0 +1,56 @@
+import { HTMLAttributes } from 'react';
+import { css, cx } from '@emotion/css';
+import Heading from '../Heading';
+import { useTheme } from '../../theme';
+
+export const NAME = 'ucl-uikit-menu__heading';
+
+export interface MenuHeadingProps extends HTMLAttributes<HTMLDivElement> {
+  testId?: string;
+}
+
+const MenuHeading = ({
+  testId = NAME,
+  className,
+  children,
+  ...props
+}: MenuHeadingProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    box-sizing: border-box;
+    margin: ${theme.margin.m32} 0 ${theme.margin.m16};
+    text-transform: uppercase;
+
+    @media screen and (min-width: ${theme.breakpoints.tablet}px) {
+      padding: 0 ${theme.padding.p16};
+    }
+  `;
+
+  const style = cx(NAME, baseStyle, className);
+
+  const headingStyle = css`
+    color: ${theme.colour.text.secondary};
+    text-transform: uppercase;
+    font-size: 14px;
+  `;
+
+  return (
+    <div
+      className={style}
+      data-testid={testId}
+      {...props}
+    >
+      <Heading
+        as='h3'
+        level='xs'
+        margins={false}
+        className={headingStyle}
+      >
+        {children}
+      </Heading>
+    </div>
+  );
+};
+
+export default MenuHeading;

package/lib/components/MenuNew/MenuItemText.tsx

@@ -33,6 +33,12 @@ const MenuItemText = ({
       color: inherit;
       text-decoration: inherit;
     }
+
+    &:focus,
+    &:focus-visible {
+      outline: none;
+      box-shadow: none;
+    }
   `;
   const style = cx(NAME, className);
 

package/lib/components/MenuNew/MenuSection.tsx

@@ -0,0 +1,36 @@
+import { HTMLAttributes } from 'react';
+import { css, cx } from '@emotion/css';
+
+export const NAME = 'ucl-uikit-menu__section';
+
+export interface MenuSectionProps extends HTMLAttributes<HTMLElement> {
+  testId?: string;
+}
+
+const MenuSection = ({
+  testId = NAME,
+  className,
+  children,
+  ...props
+}: MenuSectionProps) => {
+  const style = cx(
+    NAME,
+    css`
+      margin: 0;
+      padding: 0;
+    `,
+    className
+  );
+
+  return (
+    <section
+      className={style}
+      data-testid={testId}
+      {...props}
+    >
+      {children}
+    </section>
+  );
+};
+
+export default MenuSection;

package/lib/components/MenuNew/PrimaryMenuItem.tsx

@@ -12,20 +12,24 @@ export interface PrimaryMenuItemProps extends Omit<
   'iconPosition'
 > {
   asChild?: boolean;
-  badge?: ReactNode;
+  trailingContent?: ReactNode;
 }
 
 const PrimaryMenuItem = ({
   className,
   children,
   asChild,
-  badge,
+  trailingContent,
   ...props
 }: PrimaryMenuItemProps) => {
   const [theme] = useTheme();
 
   const baseStyle = css`
     color: ${theme.colour.text.default};
+
+    @media screen and (min-width: ${theme.breakpoints.tablet}px) {
+      padding: 0 ${theme.padding.p16};
+    }
   `;
 
   const style = cx(NAME, baseStyle, className);
@@ -41,8 +45,9 @@ const PrimaryMenuItem = ({
   return (
     <MenuBaseItem
       className={style}
-      {...props}
+      asChild={asChild}
       iconPosition='left'
+      {...props}
     >
       <span className={contentStyle}>
         <MenuItemText
@@ -51,7 +56,7 @@ const PrimaryMenuItem = ({
         >
           {children}
         </MenuItemText>
-        {badge}
+        {trailingContent}
       </span>
     </MenuBaseItem>
   );

package/lib/components/MenuNew/SecondaryMenuItem.tsx

@@ -25,6 +25,7 @@ const SecondaryMenuItem = ({
   const [theme] = useTheme();
 
   const baseStyle = css`
+    padding-inline: ${theme.margin.m16};
     color: ${theme.colour.text.secondary};
   `;
 
@@ -43,6 +44,7 @@ const SecondaryMenuItem = ({
   return (
     <MenuBaseItem
       className={style}
+      asChild={asChild}
       {...props}
     >
       <span className={contentStyle}>
@@ -52,7 +54,13 @@ const SecondaryMenuItem = ({
         >
           {children}
         </MenuItemText>
-        {externalLink && <Icon.ExternalLink size={16} />}
+        {externalLink && (
+          <Icon.ExternalLink
+            size={16}
+            aria-hidden='true'
+            focusable='false'
+          />
+        )}
       </span>
     </MenuBaseItem>
   );

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

@@ -13,6 +13,108 @@ describe('Menu', () => {
     expect(screen.getByTestId('ucl-uikit-menu')).toBeInTheDocument();
   });
 
+  test('renders heading item', () => {
+    wrap(
+      <Menu>
+        <Menu.Heading>Main navigation</Menu.Heading>
+      </Menu>
+    );
+
+    const heading = screen.getByTestId('ucl-uikit-menu__heading');
+    expect(heading).toBeInTheDocument();
+    expect(heading).toHaveTextContent('Main navigation');
+    expect(heading).not.toHaveAttribute('role', 'button');
+  });
+
+  test('renders semantic section wrapper', () => {
+    wrap(
+      <Menu>
+        <Menu.Section>
+          <Menu.Heading>Support</Menu.Heading>
+        </Menu.Section>
+      </Menu>
+    );
+
+    const section = screen.getByTestId('ucl-uikit-menu__section');
+    expect(section.tagName).toBe('SECTION');
+  });
+
+  test('accordion renders like a primary item', () => {
+    const { getByText } = wrap(
+      <Menu>
+        <Menu.Accordion
+          label='Services'
+          icon={<span data-testid='accordion-left-icon'>I</span>}
+        >
+          <Menu.Accordion.Item>Library</Menu.Accordion.Item>
+        </Menu.Accordion>
+      </Menu>
+    );
+
+    const item = getByText('Services').closest('.ucl-uikit-menu__accordion');
+    expect(item?.firstChild).toHaveAttribute(
+      'data-testid',
+      'accordion-left-icon'
+    );
+    expect(
+      screen.getByTestId('ucl-uikit-menu__accordion__icon--chevron-down')
+    ).toBeInTheDocument();
+  });
+
+  test('accordion toggles to expanded state with up chevron', () => {
+    wrap(
+      <Menu>
+        <Menu.Accordion
+          label='Services'
+          icon={<span data-testid='accordion-left-icon'>I</span>}
+        >
+          <Menu.Accordion.Item>Library</Menu.Accordion.Item>
+        </Menu.Accordion>
+      </Menu>
+    );
+
+    expect(screen.queryByText('Library')).not.toBeInTheDocument();
+    fireEvent.click(screen.getByText('Services'));
+    expect(
+      screen.getByTestId('ucl-uikit-menu__accordion__icon--chevron-up')
+    ).toBeInTheDocument();
+    expect(screen.getByText('Library')).toBeInTheDocument();
+  });
+
+  test('accordion item supports asChild link content', () => {
+    wrap(
+      <Menu>
+        <Menu.Accordion
+          label='Services'
+          icon={<span data-testid='accordion-left-icon'>I</span>}
+          defaultExpanded
+        >
+          <Menu.Accordion.Item asChild>
+            <a href='/library'>Library</a>
+          </Menu.Accordion.Item>
+        </Menu.Accordion>
+      </Menu>
+    );
+
+    expect(screen.getByRole('link', { name: 'Library' })).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();
 
@@ -26,6 +128,42 @@ describe('Menu', () => {
     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('non-asChild items expose button semantics', () => {
+    wrap(
+      <Menu>
+        <Menu.PrimaryItem>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');
+  });
+
   test('renders asChild link content for primary item', () => {
     wrap(
       <Menu>
@@ -38,6 +176,10 @@ describe('Menu', () => {
     const link = screen.getByRole('link', { name: 'Home' });
     expect(link).toBeInTheDocument();
     expect(link.closest('.ucl-uikit-menu__item-text')).toBeInTheDocument();
+    expect(link.closest('.ucl-uikit-menu__primary-item')).not.toHaveAttribute(
+      'role',
+      'button'
+    );
   });
 
   test('primary item enforces icon on the left', () => {
@@ -53,17 +195,35 @@ describe('Menu', () => {
     expect(item?.firstChild).toHaveAttribute('data-testid', 'left-icon');
   });
 
-  test('action item enforces icon on the right', () => {
-    const { getByText } = wrap(
+  test('can disable hover underline', () => {
+    wrap(
+      <Menu>
+        <Menu.PrimaryItem underlineOnHover={false}>Home</Menu.PrimaryItem>
+      </Menu>
+    );
+
+    const item = screen
+      .getByText('Home')
+      .closest('.ucl-uikit-menu__primary-item');
+    const text = screen.getByText('Home');
+
+    fireEvent.mouseEnter(item as Element);
+
+    expect(window.getComputedStyle(text).textDecorationLine).not.toBe(
+      'underline'
+    );
+  });
+
+  test('action button renders icon', () => {
+    wrap(
       <Menu>
-        <Menu.ActionItem icon={<span data-testid='right-icon'>I</span>}>
+        <Menu.ActionButton icon={<span data-testid='right-icon'>I</span>}>
           Sign out
-        </Menu.ActionItem>
+        </Menu.ActionButton>
       </Menu>
     );
 
-    const item = getByText('Sign out').closest('.ucl-uikit-menu__action-item');
-    expect(item?.lastChild).toHaveAttribute('data-testid', 'right-icon');
+    expect(screen.getByTestId('right-icon')).toBeInTheDocument();
   });
 
   test('secondary externalLink item renders external icon', () => {
@@ -84,4 +244,18 @@ describe('Menu', () => {
       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

@@ -2,8 +2,11 @@ export { default } from './Menu';
 export type {
   MenuProps,
   MenuDividerProps,
+  MenuHeadingProps,
+  MenuSectionProps,
+  MenuAccordionProps,
   MenuBaseItemProps,
   PrimaryMenuItemProps,
   SecondaryMenuItemProps,
-  ActionMenuItemProps,
+  ActionMenuButtonProps,
 } from './Menu';

package/lib/components/Table/subcomponents/Cell/__tests__/__snapshots__/Cell.test.tsx.snap

@@ -95,7 +95,7 @@ exports[`Cell > Snapshot: variants 1`] = `
         >
           <button
             aria-disabled="false"
-            class="ucl-uikit-button css-9aah8t"
+            class="ucl-uikit-button css-1r34e1w"
             data-testid="ucl-uikit-button"
           >
             Button

package/package.json

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

package/dist/components/MenuNew/ActionMenuItem.d.ts

@@ -1,7 +0,0 @@
-import { MenuBaseItemProps } from './MenuBaseItem';
-export declare const NAME = "ucl-uikit-menu__action-item";
-export interface ActionMenuItemProps extends MenuBaseItemProps {
-    asChild?: boolean;
-}
-declare const ActionMenuItem: ({ className, children, asChild, ...props }: ActionMenuItemProps) => import("react/jsx-runtime").JSX.Element;
-export default ActionMenuItem;

package/lib/components/MenuNew/ActionMenuItem.tsx

@@ -1,31 +0,0 @@
-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;