uikit-react-public 0.14.21 → 0.21.8

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

@@ -0,0 +1,80 @@
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import Main from '../Main';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+
+describe('Main', () => {
+  // Snapshot tests
+
+  test('snapshot: no props', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Main>Content</Main>
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: layout prop true', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Main layout>Content</Main>
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: testId prop', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Main testId='test123'>Content</Main>
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  // Interaction tests
+
+  test('Can find by default testId', () => {
+    render(
+      <ThemeContextProvider>
+        <Main>Content</Main>
+      </ThemeContextProvider>
+    );
+    const main = screen.getByTestId('ucl-uikit-main');
+    expect(main).toBeInTheDocument();
+  });
+
+  test('Can find by custom testId', () => {
+    render(
+      <ThemeContextProvider>
+        <Main testId='custom-test-id'>Content</Main>
+      </ThemeContextProvider>
+    );
+    const main = screen.getByTestId('custom-test-id');
+    expect(main).toBeInTheDocument();
+  });
+
+  test('Renders children correctly', () => {
+    render(
+      <ThemeContextProvider>
+        <Main>
+          <div data-testid='child-element'>Child Content</div>
+        </Main>
+      </ThemeContextProvider>
+    );
+    const child = screen.getByTestId('child-element');
+    expect(child).toBeInTheDocument();
+    expect(child).toHaveTextContent('Child Content');
+  });
+
+  test('Applies layout when layout prop is true', () => {
+    render(
+      <ThemeContextProvider>
+        <Main layout>Content</Main>
+      </ThemeContextProvider>
+    );
+    const layoutComponent = screen.getByTestId('ucl-uikit-layout');
+    expect(layoutComponent).toBeInTheDocument();
+  });
+});

package/lib/components/Main/__tests__/__snapshots__/Main.test.tsx.snap

@@ -0,0 +1,33 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Main > snapshot: layout prop true 1`] = `
+<main
+  class="ucl-uikit-main"
+  data-testid="ucl-uikit-main"
+>
+  <div
+    class="css-3reham"
+    data-testid="ucl-uikit-layout"
+  >
+    Content
+  </div>
+</main>
+`;
+
+exports[`Main > snapshot: no props 1`] = `
+<main
+  class="ucl-uikit-main"
+  data-testid="ucl-uikit-main"
+>
+  Content
+</main>
+`;
+
+exports[`Main > snapshot: testId prop 1`] = `
+<main
+  class="ucl-uikit-main"
+  data-testid="test123"
+>
+  Content
+</main>
+`;

package/lib/components/Main/index.ts

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

package/lib/components/MenuNew/Menu.context.tsx

@@ -0,0 +1,149 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useRef,
+  useEffect,
+} from 'react';
+import useMediaQuery from '../../hooks/useMediaQuery';
+import { useTheme } from '../../theme';
+
+interface IContext {
+  isOpen: boolean;
+  toggleMenu: () => void;
+  triggerRef: React.RefObject<HTMLButtonElement | null>;
+  contentRef: React.RefObject<HTMLDivElement | null>;
+}
+
+export const AppMenuContext = createContext({} as IContext);
+
+export const useAppMenu = () => useContext(AppMenuContext);
+
+const MenuProvider = ({
+  defaultOpen = false,
+  children,
+}: {
+  defaultOpen?: boolean;
+  children: React.ReactNode;
+}) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const [theme] = useTheme();
+  const isDesktop = useMediaQuery(
+    `(min-width: ${theme.breakpoints.desktop}px)`
+  );
+
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const originalStyle = document.body.style.overflow;
+    if (isOpen && !isDesktop) {
+      // Prevent background scrolling when menu is open and on mobile
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = originalStyle;
+    }
+    return () => {
+      document.body.style.overflow = originalStyle;
+    };
+  }, [isOpen, isDesktop]);
+
+  useEffect(() => {
+    const closeMenuOutsideClick = (event: MouseEvent) => {
+      if (
+        triggerRef.current &&
+        !triggerRef.current.contains(event.target as Node) &&
+        contentRef.current &&
+        !contentRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setIsOpen(false);
+      }
+
+      if (!isOpen || !contentRef.current) return;
+
+      const focusableElements = Array.from(
+        contentRef.current.querySelectorAll(
+          '[role="menuitem"], [aria-label="Close menu"]'
+        )
+      ).filter((el) => {
+        const element = el as HTMLElement;
+        return (
+          element.getAttribute('aria-disabled') !== 'true' &&
+          element.tabIndex >= 0 &&
+          element.offsetParent !== null
+        );
+      }) as HTMLElement[];
+
+      if (focusableElements.length === 0) return;
+
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+
+      const currentIndex = focusableElements.indexOf(
+        document.activeElement as HTMLElement
+      );
+
+      if (event.key === 'Tab') {
+        // Loop focus on Tab/Shift+Tab
+        if (event.shiftKey && document.activeElement === firstElement) {
+          lastElement.focus();
+          event.preventDefault();
+        } else if (!event.shiftKey && document.activeElement === lastElement) {
+          firstElement.focus();
+          event.preventDefault();
+        }
+      } else if (event.key === 'ArrowDown') {
+        // Move focus to next item
+        if (currentIndex !== -1) {
+          const nextIndex = (currentIndex + 1) % focusableElements.length;
+          focusableElements[nextIndex].focus();
+          event.preventDefault();
+        } else {
+          firstElement.focus();
+          event.preventDefault();
+        }
+      } else if (event.key === 'ArrowUp') {
+        // Move focus to previous item
+        if (currentIndex !== -1) {
+          const prevIndex =
+            (currentIndex - 1 + focusableElements.length) %
+            focusableElements.length;
+          focusableElements[prevIndex].focus();
+          event.preventDefault();
+        } else {
+          lastElement.focus();
+          event.preventDefault();
+        }
+      }
+    };
+
+    document.addEventListener('mousedown', closeMenuOutsideClick);
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('mousedown', closeMenuOutsideClick);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isOpen]);
+
+  const toggleMenu = () => setIsOpen((prevOpen) => !prevOpen);
+
+  const value = {
+    isOpen,
+    toggleMenu,
+    triggerRef,
+    contentRef,
+  };
+
+  return (
+    <AppMenuContext.Provider value={value}>{children}</AppMenuContext.Provider>
+  );
+};
+
+export default MenuProvider;

package/lib/components/MenuNew/Menu.tsx

@@ -0,0 +1,75 @@
+import { HTMLAttributes, memo } from 'react';
+import { css, cx } from '@emotion/css';
+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;
+}
+
+const Menu = ({
+  defaultOpen = false,
+  title,
+  position = 'right',
+  trigger,
+  menuId = NAME,
+  testId = NAME,
+  children,
+  className,
+  ...props
+}: MenuProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    position: relative;
+    font-family: ${theme.font.family.primary};
+  `;
+
+  const style = cx(NAME, baseStyle, className);
+
+  const TriggerComp = trigger ?? ButtonMenuTrigger;
+
+  return (
+    <nav
+      className={style}
+      data-testid={testId}
+      {...props}
+    >
+      <MenuProvider defaultOpen={defaultOpen}>
+        <TriggerComp aria-controls={menuId} />
+        <MenuContent
+          id={menuId}
+          title={title}
+          position={position}
+        >
+          {children}
+        </MenuContent>
+      </MenuProvider>
+    </nav>
+  );
+};
+
+export interface IMenuSubComponents {
+  Section: typeof MenuSection;
+  Item: typeof MenuItem;
+}
+
+const MemoMenu = memo(Menu);
+
+const MenuWithSubComponents = MemoMenu as typeof MemoMenu & IMenuSubComponents;
+
+MenuWithSubComponents.Section = MenuSection;
+MenuWithSubComponents.Item = MenuItem;
+
+export default MenuWithSubComponents;

package/lib/components/MenuNew/MenuContent.tsx

@@ -0,0 +1,140 @@
+import React, { HTMLAttributes, memo, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { css, cx } from '@emotion/css';
+import useTheme from '../../theme/useTheme';
+import useMediaQuery from '../../hooks/useMediaQuery';
+import Icon from '../Icon';
+import IconButton from '../IconButton';
+import { useAppMenu } from './Menu.context';
+
+export const NAME = 'ucl-uikit-menu__content';
+
+export interface MenuContentProps extends HTMLAttributes<HTMLUListElement> {
+  title?: string;
+  testId?: string;
+  position?: 'left' | 'right';
+}
+
+const MenuContent: React.FC<MenuContentProps> = ({
+  title,
+  testId = NAME,
+  position = 'right',
+  children,
+  className,
+  ...props
+}) => {
+  const { isOpen, contentRef, toggleMenu } = useAppMenu();
+
+  const [theme] = useTheme();
+
+  const { padding } = theme;
+
+  const isDesktop = useMediaQuery(
+    `(min-width: ${theme.breakpoints.desktop}px)`
+  );
+
+  const baseStyle = css`
+    display: none;
+    z-index: 100;
+    ${position === 'left' ? 'left: 0;' : 'right: 0;'}
+    white-space: nowrap;
+    background-color: ${theme.color.neutral.white};
+    color: ${theme.color.text.primary};
+
+    position: fixed;
+    height: 100vh;
+    border: none;
+    box-shadow: none;
+    padding: 0;
+    margin: 0;
+    overflow-y: auto;
+    min-width: 100%;
+
+    a {
+      height: auto;
+    }
+
+    @media (min-width: ${theme.breakpoints.desktop}px) {
+      position: absolute;
+      height: auto;
+      min-width: 600px;
+      border: ${theme.border.b1} solid ${theme.color.neutral.grey20};
+      box-shadow: ${theme.boxShadow.y1};
+    }
+  `;
+
+  const openStyle = css`
+    display: block;
+  `;
+
+  const style = cx(NAME, baseStyle, isOpen && openStyle, className);
+
+  const headerStyle = css`
+    display: flex;
+    justify-content: space-between;
+    padding: ${padding.p64} ${padding.p24} ${padding.p16};
+
+    @media (min-width: ${theme.breakpoints.desktop}px) {
+      padding: ${padding.p32} ${padding.p48} ${padding.p16} ${padding.p64};
+      justify-content: flex-end;
+    }
+  `;
+
+  const titleStyle = css`
+    @media (min-width: ${theme.breakpoints.desktop}px) {
+      display: none;
+    }
+  `;
+
+  const bodyStyle = css`
+    padding: 0 ${padding.p24};
+    list-style: none;
+
+    @media (min-width: ${theme.breakpoints.desktop}px) {
+      margin: 0 ${padding.p64};
+      padding: 0;
+    }
+  `;
+
+  useEffect(() => {
+    const rootDiv = document.getElementById('root');
+    if (rootDiv) {
+      if (!isDesktop && isOpen) {
+        rootDiv.style.display = 'none';
+      } else {
+        rootDiv.style.display = '';
+      }
+    }
+  }, [isOpen, isDesktop]);
+
+  const menuContent = (
+    <div
+      ref={contentRef}
+      className={style}
+    >
+      <header className={headerStyle}>
+        <h3 className={titleStyle}>{title}</h3>
+        <IconButton
+          onClick={toggleMenu}
+          aria-label='Close menu'
+        >
+          <Icon.X size={40} />
+        </IconButton>
+      </header>
+      <ul
+        role='menu'
+        aria-labelledby='app-menu-button'
+        className={bodyStyle}
+        data-testid={testId}
+        tabIndex={-1}
+        {...props}
+      >
+        {children}
+      </ul>
+    </div>
+  );
+
+  return !isDesktop ? createPortal(menuContent, document.body) : menuContent;
+};
+
+export default memo(MenuContent);

package/lib/components/MenuNew/MenuItem.tsx

@@ -0,0 +1,101 @@
+import React, { LiHTMLAttributes, memo } from 'react';
+import { css, cx } from '@emotion/css';
+import useTheme from '../../theme/useTheme';
+import Icon from '../Icon/Icon';
+
+export const NAME = 'ucl-uikit-menu__item';
+
+export interface MenuItemProps extends LiHTMLAttributes<HTMLLIElement> {
+  testId?: string;
+  icon?: React.ReactNode;
+  secondary?: boolean;
+  externalLink?: boolean;
+}
+
+const MenuItem: React.FC<MenuItemProps> = ({
+  testId = NAME,
+  icon,
+  children,
+  className,
+  onClick,
+  secondary,
+  externalLink,
+  ...props
+}) => {
+  const isClickable = !!onClick;
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    height: 40px;
+    margin-bottom: ${theme.margin.m16};
+    display: flex;
+    align-items: center;
+    font-family: ${theme.font.family.primary};
+    font-size: ${theme.font.size.f16};
+    font-weight: ${secondary
+      ? `${theme.font.weight.medium}`
+      : `${theme.font.weight.bold}`};
+    color: ${theme.color.text.secondary};
+  `;
+
+  const clickableMenuItemStyle = css`
+    color: ${secondary
+      ? `${theme.color.text.secondary}`
+      : `${theme.color.text.primary}`};
+    cursor: pointer;
+    &:hover {
+      background-color: ${theme.color.interaction.blue5};
+    }
+    &:focus-visible {
+      outline: none;
+      box-shadow: ${theme.boxShadow.focus};
+      z-index: 1;
+    }
+  `;
+
+  const iconContainerStyle = css`
+    display: inline-flex;
+    align-items: center;
+    margin-right: ${theme.margin.m32};
+  `;
+
+  const style = cx(
+    NAME,
+    baseStyle,
+    isClickable && clickableMenuItemStyle,
+    className
+  );
+
+  const content = (
+    <>
+      {React.isValidElement(icon) && (
+        <span className={iconContainerStyle}>{icon}</span>
+      )}
+      {children}
+    </>
+  );
+
+  return (
+    <li
+      tabIndex={isClickable ? 0 : -1}
+      role='menuitem'
+      aria-disabled={!isClickable}
+      className={style}
+      data-testid={testId}
+      onClick={onClick}
+      {...props}
+    >
+      {content}
+      {externalLink && (
+        <Icon.ExternalLink
+          size={16}
+          className={css`
+            margin-left: 8px;
+          `}
+        />
+      )}
+    </li>
+  );
+};
+
+export default memo(MenuItem);

package/lib/components/MenuNew/MenuSection.tsx

@@ -0,0 +1,47 @@
+import React, { HTMLAttributes } from 'react';
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../../theme';
+
+export const NAME = 'ucl-uikit-menu__section';
+
+export interface MenuSectionProps extends HTMLAttributes<HTMLLIElement> {
+  testId?: string;
+}
+
+const MenuSection: React.FC<MenuSectionProps> = ({
+  className,
+  children,
+  ...props
+}) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    padding: 0;
+    margin-top: 0;
+    margin-bottom: ${theme.margin.m32};
+
+    &:not(:last-of-type) {
+      border-bottom: 1px solid ${theme.color.neutral.grey10};
+    }
+  `;
+
+  const style = cx(NAME, baseStyle, className);
+
+  const listStyle = css`
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  `;
+
+  return (
+    <li
+      role='presentation'
+      className={style}
+      {...props}
+    >
+      <ul className={listStyle}>{children}</ul>
+    </li>
+  );
+};
+
+export default MenuSection;

package/lib/components/MenuNew/index.ts

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

package/lib/components/MenuNew/trigger/ButtonMenuTrigger.tsx

@@ -0,0 +1,42 @@
+import { memo } from 'react';
+import { cx } from '@emotion/css';
+import { IconButtonProps } from '../../IconButton';
+import { useAppMenu } from '../Menu.context';
+import { Button, Icon } from '../..';
+
+export const NAME = 'ucl-uikit-menu__trigger--button';
+export const DEFAULT_ARIA_LABEL = 'Menu button';
+
+export interface ButtonMenuTriggerProps extends IconButtonProps {
+  ariaLabel?: string;
+}
+
+const ButtonMenuTrigger = ({
+  id = 'menu-trigger',
+  ariaLabel = DEFAULT_ARIA_LABEL,
+  className,
+  ...props
+}: ButtonMenuTriggerProps) => {
+  const { toggleMenu, isOpen, triggerRef } = useAppMenu();
+
+  const style = cx(NAME, className);
+
+  return (
+    <Button
+      id={id}
+      ref={triggerRef}
+      className={style}
+      size='small'
+      icon={<Icon.Menu />}
+      onClick={toggleMenu}
+      aria-label={ariaLabel}
+      aria-haspopup='true'
+      aria-expanded={isOpen ? 'true' : 'false'}
+      {...props}
+    >
+      Menu
+    </Button>
+  );
+};
+
+export default memo(ButtonMenuTrigger);