uikit-react-public 0.22.2 → 0.24.2

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

@@ -0,0 +1,96 @@
+import { beforeEach, describe, expect, test, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import DropdownMenu from '../DropdownMenu';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+
+const mockMatchMedia = (matchesDesktop: boolean) => {
+  globalThis.matchMedia = vi.fn().mockImplementation((query) => ({
+    matches: query.includes('min-width') ? matchesDesktop : false,
+    media: query,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  }));
+};
+
+describe('DropdownMenu', () => {
+  beforeEach(() => {
+    mockMatchMedia(true);
+  });
+
+  test('renders text button trigger on desktop', () => {
+    render(
+      <ThemeContextProvider>
+        <DropdownMenu label='Menu'>
+          <div>Menu content</div>
+        </DropdownMenu>
+      </ThemeContextProvider>
+    );
+
+    expect(
+      screen.getByRole('button', { name: 'Open menu' })
+    ).toBeInTheDocument();
+    expect(screen.getByText('Menu')).toBeInTheDocument();
+  });
+
+  test('renders icon-only trigger on smaller screens', () => {
+    mockMatchMedia(false);
+
+    render(
+      <ThemeContextProvider>
+        <DropdownMenu>
+          <div>Menu content</div>
+        </DropdownMenu>
+      </ThemeContextProvider>
+    );
+
+    expect(
+      screen.getByRole('button', { name: 'Open menu' })
+    ).toBeInTheDocument();
+    expect(screen.queryByText('Menu')).not.toBeInTheDocument();
+  });
+
+  test('supports className overrides for trigger and content', () => {
+    render(
+      <ThemeContextProvider>
+        <DropdownMenu
+          className='trigger-override'
+          contentClassName='content-override'
+          defaultOpen
+        >
+          <div>Menu content</div>
+        </DropdownMenu>
+      </ThemeContextProvider>
+    );
+
+    expect(screen.getByRole('button', { name: 'Open menu' })).toHaveClass(
+      'trigger-override'
+    );
+    expect(screen.getByTestId('ucl-uikit-dropdown__content')).toHaveClass(
+      'content-override'
+    );
+  });
+
+  test('opens and closes content when trigger is clicked', () => {
+    render(
+      <ThemeContextProvider>
+        <DropdownMenu>
+          <div>Menu content</div>
+        </DropdownMenu>
+      </ThemeContextProvider>
+    );
+
+    const trigger = screen.getByRole('button', { name: 'Open menu' });
+    const content = screen.getByTestId('ucl-uikit-dropdown__content');
+
+    expect(content).not.toBeVisible();
+
+    fireEvent.click(trigger);
+    expect(content).toBeVisible();
+
+    fireEvent.click(trigger);
+    expect(content).not.toBeVisible();
+  });
+});

package/lib/components/DropdownMenu/index.ts

@@ -0,0 +1,2 @@
+export { default } from './DropdownMenu';
+export type { DropdownMenuProps } from './DropdownMenu';

package/lib/components/DropdownUserMenu/DropdownUserMenu.tsx

@@ -0,0 +1,124 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { css, cx } from '@emotion/css';
+import Dropdown, { DropdownProps } from '../Dropdown';
+import Avatar, { AvatarProps } from '../Avatar';
+import Icon from '../Icon';
+import useTheme from '../../theme/useTheme';
+import useMediaQuery from '../../hooks/useMediaQuery';
+
+export const NAME = 'ucl-uikit-dropdown-user-menu';
+
+export interface DropdownUserMenuProps
+  extends
+    Omit<DropdownProps, 'children'>,
+    Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  children: ReactNode;
+  userName: string;
+  imageUrl?: string;
+  avatarVariant?: AvatarProps['variant'];
+  avatarSize?: AvatarProps['size'];
+  triggerAriaLabel?: string;
+  dropdownClassName?: string;
+  triggerClassName?: string;
+  contentClassName?: string;
+  avatarClassName?: string;
+  userNameClassName?: string;
+}
+
+const DropdownUserMenu = ({
+  children,
+  userName,
+  imageUrl,
+  avatarVariant = 'image',
+  avatarSize = 32,
+  triggerAriaLabel = 'Open user menu',
+  dropdownClassName,
+  triggerClassName,
+  contentClassName,
+  avatarClassName,
+  userNameClassName,
+  className,
+  ...props
+}: DropdownUserMenuProps) => {
+  const [theme] = useTheme();
+  const isDesktop = useMediaQuery(
+    `(min-width: ${theme.breakpoints.desktop}px)`
+  );
+
+  const triggerStyle = css`
+    display: inline-flex;
+    align-items: center;
+    gap: ${theme.padding.p8};
+    min-height: 48px;
+    padding: 0 ${theme.padding.p8};
+    border-radius: ${theme.radius.r4};
+    color: ${theme.colour.text.brandPrimary};
+    cursor: pointer;
+    outline: none;
+    box-sizing: border-box;
+
+    &:hover {
+      background-color: ${theme.colour.fill.brandSubtleHover};
+    }
+
+    &:focus-visible {
+      box-shadow: ${theme.boxShadow.focus};
+    }
+  `;
+
+  const userNameStyle = css`
+    font-family: ${theme.typography.body.md.fontFamily};
+    font-feature-settings: ${theme.typography.body.md.fontSettings};
+    font-size: ${theme.typography.body.md.fontSize}px;
+    line-height: 1.2;
+    white-space: nowrap;
+  `;
+
+  const avatarStyle = css`
+    pointer-events: none;
+  `;
+
+  const dropdownStyle = cx(NAME, dropdownClassName);
+  const resolvedTriggerClassName = cx(
+    triggerStyle,
+    className,
+    triggerClassName
+  );
+  const resolvedUserNameClassName = cx(userNameStyle, userNameClassName);
+  const resolvedAvatarClassName = cx(avatarStyle, avatarClassName);
+
+  return (
+    <Dropdown
+      className={dropdownStyle}
+      {...props}
+    >
+      <Dropdown.Trigger>
+        <div
+          tabIndex={0}
+          role='button'
+          aria-label={triggerAriaLabel}
+          className={resolvedTriggerClassName}
+        >
+          {isDesktop ? (
+            <span className={resolvedUserNameClassName}>{userName}</span>
+          ) : null}
+          <Avatar
+            tabIndex={-1}
+            aria-hidden='true'
+            className={resolvedAvatarClassName}
+            name={userName}
+            imageUrl={imageUrl}
+            variant={avatarVariant}
+            size={avatarSize}
+          />
+          <Icon.ChevronDown size={20} />
+        </div>
+      </Dropdown.Trigger>
+      <Dropdown.Content className={contentClassName}>
+        {children}
+      </Dropdown.Content>
+    </Dropdown>
+  );
+};
+
+export default DropdownUserMenu;

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

@@ -0,0 +1,97 @@
+import { beforeEach, describe, expect, test, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import DropdownUserMenu from '../DropdownUserMenu';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+
+const mockMatchMedia = (matchesDesktop: boolean) => {
+  globalThis.matchMedia = vi.fn().mockImplementation((query) => ({
+    matches: query.includes('min-width') ? matchesDesktop : false,
+    media: query,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  }));
+};
+
+describe('DropdownUserMenu', () => {
+  beforeEach(() => {
+    mockMatchMedia(true);
+  });
+
+  test('shows user name on desktop', () => {
+    render(
+      <ThemeContextProvider>
+        <DropdownUserMenu userName='Ada Lovelace'>
+          <div>Menu content</div>
+        </DropdownUserMenu>
+      </ThemeContextProvider>
+    );
+
+    expect(screen.getByText('Ada Lovelace')).toBeInTheDocument();
+  });
+
+  test('hides user name on smaller screens', () => {
+    mockMatchMedia(false);
+
+    render(
+      <ThemeContextProvider>
+        <DropdownUserMenu userName='Ada Lovelace'>
+          <div>Menu content</div>
+        </DropdownUserMenu>
+      </ThemeContextProvider>
+    );
+
+    expect(screen.queryByText('Ada Lovelace')).not.toBeInTheDocument();
+  });
+
+  test('supports className overrides for trigger, content, avatar and userName', () => {
+    render(
+      <ThemeContextProvider>
+        <DropdownUserMenu
+          userName='Ada Lovelace'
+          className='trigger-override'
+          contentClassName='content-override'
+          avatarClassName='avatar-override'
+          userNameClassName='name-override'
+          defaultOpen
+        >
+          <div>Menu content</div>
+        </DropdownUserMenu>
+      </ThemeContextProvider>
+    );
+
+    expect(screen.getByRole('button', { name: 'Open user menu' })).toHaveClass(
+      'trigger-override'
+    );
+    expect(screen.getByTestId('ucl-uikit-dropdown__content')).toHaveClass(
+      'content-override'
+    );
+    expect(screen.getByTestId('ucl-uikit-avatar')).toHaveClass(
+      'avatar-override'
+    );
+    expect(screen.getByText('Ada Lovelace')).toHaveClass('name-override');
+  });
+
+  test('opens and closes content when trigger is clicked', () => {
+    render(
+      <ThemeContextProvider>
+        <DropdownUserMenu userName='Ada Lovelace'>
+          <div>Menu content</div>
+        </DropdownUserMenu>
+      </ThemeContextProvider>
+    );
+
+    const trigger = screen.getByRole('button', { name: 'Open user menu' });
+    const content = screen.getByTestId('ucl-uikit-dropdown__content');
+
+    expect(content).not.toBeVisible();
+
+    fireEvent.click(trigger);
+    expect(content).toBeVisible();
+
+    fireEvent.click(trigger);
+    expect(content).not.toBeVisible();
+  });
+});

package/lib/components/DropdownUserMenu/index.ts

@@ -0,0 +1,2 @@
+export { default } from './DropdownUserMenu';
+export type { DropdownUserMenuProps } from './DropdownUserMenu';

package/lib/components/HeaderNew/Header.tsx

@@ -2,6 +2,7 @@ import { memo, HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../..';
 import HeaderMenuContainer from './HeaderMenuContainer';
+import HeaderItem from './HeaderItem';
 import HeaderTitle from './HeaderTitle';
 import HeaderLogo from './HeaderLogo';
 import HeaderBorder from './HeaderBorder';
@@ -47,11 +48,11 @@ const Header = ({
     height: ${HEADER_MOBILE_HEIGHT_PX}px;
     box-sizing: border-box;
     padding: 0 ${theme.padding.p16} 0 ${theme.padding.p40};
-    border-bottom: ${theme.colour.border.subtle};
 
     @media (min-width: ${theme.breakpoints.desktop}px) {
       height: ${HEADER_TABLET_HEIGHT_PX}px;
-      padding: 0 ${theme.padding.p64};
+      padding: 0 ${theme.padding.p48} 0 ${theme.padding.p64};
+      border-bottom: 1px solid ${theme.colour.border.default};
     }
   `;
 
@@ -83,11 +84,13 @@ const MemoAppHeader = memo(Header);
 
 export interface IHeaderSubComponents {
   MenuContainer: typeof HeaderMenuContainer;
+  Item: typeof HeaderItem;
 }
 
 const HeaderWithSubComponents = MemoAppHeader as typeof MemoAppHeader &
   IHeaderSubComponents;
 
 HeaderWithSubComponents.MenuContainer = HeaderMenuContainer;
+HeaderWithSubComponents.Item = HeaderItem;
 
 export default HeaderWithSubComponents;

package/lib/components/HeaderNew/HeaderBorder.tsx

@@ -24,6 +24,7 @@ const HeaderBorder = ({
 
     @media (min-width: ${theme.breakpoints.desktop}px) {
       left: 0;
+      height: calc(100% + 1px);
     }
   `;
 

package/lib/components/HeaderNew/HeaderItem.tsx

@@ -0,0 +1,43 @@
+import { HTMLAttributes } from 'react';
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../..';
+
+export const NAME = 'ucl-uikit-header__item';
+
+export interface HeaderItemProps extends HTMLAttributes<HTMLDivElement> {
+  testId?: string;
+}
+
+const HeaderItem = ({
+  testId = NAME,
+  className,
+  children,
+  ...props
+}: HeaderItemProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    display: inline-flex;
+    align-items: center;
+    align-self: center;
+    min-height: 40px;
+
+    &:not(:first-of-type) {
+      margin-left: ${theme.margin.m8};
+    }
+  `;
+
+  const style = cx(NAME, baseStyle, className);
+
+  return (
+    <div
+      className={style}
+      data-testid={testId}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default HeaderItem;

package/lib/components/HeaderNew/HeaderLogo.tsx

@@ -20,6 +20,7 @@ const HeaderLogo = ({
 
   const baseStyle = css`
     display: none;
+    flex: 0 0 auto;
     height: 29px;
     color: ${theme.colour.fill.brand};
 
@@ -31,6 +32,8 @@ const HeaderLogo = ({
   const style = cx(NAME, baseStyle, className);
 
   const linkStyle = css`
+    display: inline-flex;
+    flex: 0 0 auto;
     color: inherit;
     text-decoration: none;
 

package/lib/components/HeaderNew/HeaderMenuContainer.tsx

@@ -13,8 +13,10 @@ const HeaderMenuContainer: React.FC<HeaderMenuContainerProps> = ({
   children,
   ...props
 }) => {
-
   const baseStyle = css`
+    display: inline-flex;
+    align-items: center;
+    align-self: center;
     width: fit-content;
     margin-left: auto;
   `;

package/lib/components/HeaderNew/HeaderTitle.tsx

@@ -20,18 +20,25 @@ const HeaderTitle = ({
   const [theme] = useTheme();
 
   const baseStyle = css`
+    display: block;
+    flex: 1 1 auto;
+    min-width: 0;
     margin: 0 ${theme.margin.m4};
-    height: 29px;
     color: ${theme.colour.text.brandPrimary};
     font-family: ${theme.typography.heading.lg.md.fontFamily};
     font-feature-settings: ${theme.typography.heading.lg.md.fontSettings};
     font-size: ${theme.typography.heading.xs.md.fontSize}px;
     font-weight: ${theme.typography.heading.xs.md.fontWeight};
+    line-height: ${theme.typography.heading.xs.md.lineHeight}px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 
     @media (min-width: ${theme.breakpoints.desktop}px) {
       margin: 0 ${theme.margin.m20};
       font-size: ${theme.typography.heading.lg.md.fontSize}px;
       font-weight: ${theme.typography.heading.lg.md.fontWeight};
+      line-height: ${theme.typography.heading.lg.md.lineHeight}px;
     }
   `;
 

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

@@ -2,11 +2,11 @@
 
 exports[`Header > snapshot: variant=avatar 1`] = `
 <header
-  class="ucl-uikit-header css-7smbab"
+  class="ucl-uikit-header css-13623bd"
   data-testid="ucl-uikit-header"
 >
   <div
-    class="ucl-uikit-header__border css-miu54s"
+    class="ucl-uikit-header__border css-5jjnsi"
     data-test="ucl-uikit-header__border"
   >
     <div
@@ -14,7 +14,7 @@ exports[`Header > snapshot: variant=avatar 1`] = `
     />
   </div>
   <svg
-    class="ucl-uikit-header__logo css-h3fm3u"
+    class="ucl-uikit-header__logo css-1tplbsk"
     data-test="ucl-uikit-header__logo"
     fill="none"
     focusable="false"
@@ -31,7 +31,7 @@ exports[`Header > snapshot: variant=avatar 1`] = `
     />
   </svg>
   <div
-    class="ucl-uikit-header__title css-118cw9t"
+    class="ucl-uikit-header__title css-1ck59nw"
     data-test="ucl-uikit-header__title"
   >
     LIDS
@@ -41,11 +41,11 @@ exports[`Header > snapshot: variant=avatar 1`] = `
 
 exports[`Header > snapshot: variant=breadcrumbs 1`] = `
 <header
-  class="ucl-uikit-header css-7smbab"
+  class="ucl-uikit-header css-13623bd"
   data-testid="ucl-uikit-header"
 >
   <div
-    class="ucl-uikit-header__border css-miu54s"
+    class="ucl-uikit-header__border css-5jjnsi"
     data-test="ucl-uikit-header__border"
   >
     <div
@@ -53,7 +53,7 @@ exports[`Header > snapshot: variant=breadcrumbs 1`] = `
     />
   </div>
   <svg
-    class="ucl-uikit-header__logo css-h3fm3u"
+    class="ucl-uikit-header__logo css-1tplbsk"
     data-test="ucl-uikit-header__logo"
     fill="none"
     focusable="false"
@@ -70,7 +70,7 @@ exports[`Header > snapshot: variant=breadcrumbs 1`] = `
     />
   </svg>
   <div
-    class="ucl-uikit-header__title css-118cw9t"
+    class="ucl-uikit-header__title css-1ck59nw"
     data-test="ucl-uikit-header__title"
   >
     LIDS

package/lib/components/HeaderNew/index.ts

@@ -5,3 +5,4 @@ export {
   DEFAULT_Z_INDEX,
 } from './constants';
 export type { HeaderProps } from './Header';
+export type { HeaderItemProps } from './HeaderItem';

package/lib/components/Icon/svgImports.ts

@@ -165,6 +165,7 @@ const {
       Maximize,
       Meh,
       Menu,
+      Menu2,
       MessageCircle,
       MessageSquare,
       MicOff,
@@ -482,6 +483,7 @@ const iconSvgs: Record<string, IconComponent> = {
   Maximize,
   Meh,
   Menu,
+  Menu2,
   MessageCircle,
   MessageSquare,
   MicOff,

package/lib/components/SimpleMenu/SimpleMenu.tsx

@@ -0,0 +1,40 @@
+import { HTMLAttributes, memo } from 'react';
+import { css, cx } from '@emotion/css';
+import useTheme from '../../theme/useTheme';
+
+export const NAME = 'ucl-uikit-simple-menu';
+
+export interface SimpleMenuProps extends HTMLAttributes<HTMLUListElement> {
+  testId?: string;
+}
+
+const SimpleMenu = ({
+  testId = NAME,
+  className,
+  children,
+  ...props
+}: SimpleMenuProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    list-style: none;
+    margin: 0;
+    padding: ${theme.padding.p8};
+    border-radius: ${theme.radius.r4};
+  `;
+
+  const style = cx(NAME, baseStyle, className);
+
+  return (
+    <ul
+      role='menu'
+      data-testid={testId}
+      className={style}
+      {...props}
+    >
+      {children}
+    </ul>
+  );
+};
+
+export default memo(SimpleMenu);

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

@@ -0,0 +1,38 @@
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import SimpleMenu from '../SimpleMenu';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+
+describe('SimpleMenu', () => {
+  test('renders with default test id', () => {
+    render(
+      <ThemeContextProvider>
+        <SimpleMenu>
+          <li role='menuitem'>Item one</li>
+        </SimpleMenu>
+      </ThemeContextProvider>
+    );
+
+    expect(screen.getByTestId('ucl-uikit-simple-menu')).toBeInTheDocument();
+    expect(screen.getByRole('menu')).toBeInTheDocument();
+    expect(
+      screen.getByRole('menuitem', { name: 'Item one' })
+    ).toBeInTheDocument();
+  });
+
+  test('supports custom test id and className', () => {
+    render(
+      <ThemeContextProvider>
+        <SimpleMenu
+          testId='custom-simple-menu'
+          className='menu-override'
+        >
+          <li role='menuitem'>Item two</li>
+        </SimpleMenu>
+      </ThemeContextProvider>
+    );
+
+    const menu = screen.getByTestId('custom-simple-menu');
+    expect(menu).toHaveClass('menu-override');
+  });
+});

package/lib/components/SimpleMenu/index.ts

@@ -0,0 +1,2 @@
+export { default } from './SimpleMenu';
+export type { SimpleMenuProps } from './SimpleMenu';

package/lib/components/index.ts

@@ -93,6 +93,9 @@ export type { MenuProps } from './Menu';
 export { default as MenuNew } from './MenuNew';
 export type { MenuProps as MenuNewProps } from './MenuNew';
 
+export { default as SimpleMenu } from './SimpleMenu';
+export type { SimpleMenuProps } from './SimpleMenu';
+
 export { default as Select } from './Select';
 export type { SelectProps } from './Select';
 
@@ -175,6 +178,19 @@ export type { CookieNoticeProps } from './CookieNotice';
 export { default as Search } from './Search';
 export type { SearchProps } from './Search';
 
+export { default as Dropdown } from './Dropdown';
+export type {
+  DropdownProps,
+  DropdownTriggerProps,
+  DropdownContentProps,
+} from './Dropdown';
+
+export { default as DropdownMenu } from './DropdownMenu';
+export type { DropdownMenuProps } from './DropdownMenu';
+
+export { default as DropdownUserMenu } from './DropdownUserMenu';
+export type { DropdownUserMenuProps } from './DropdownUserMenu';
+
 export { default as Layout } from './Layout';
 export type { LayoutProps } from './Layout';
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.22.2",
+  "version": "0.24.2",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -43,7 +43,7 @@
     "@emotion/css": "^11.13.5",
     "@emotion/react": "^11.14.0",
     "@floating-ui/react-dom": "^2.1.2",
-    "design-system-foundations-public": "0.0.37"
+    "design-system-foundations-public": "0.0.40"
   },
   "peerDependencies": {
     "react": "^19.0.0",