uikit-react-public 0.24.5 → 0.25.0

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,37 @@
-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;
 }
 
-const Menu = ({
-  defaultOpen = false,
-  title,
-  position = 'right',
-  trigger,
-  menuId = NAME,
-  testId = NAME,
-  children,
-  className,
-  ...props
-}: MenuProps) => {
-  const [theme] = useTheme();
+export type {
+  MenuDividerProps,
+  MenuBaseItemProps,
+  PrimaryMenuItemProps,
+  SecondaryMenuItemProps,
+  ActionMenuItemProps,
+};
 
+const Menu = ({ testId = NAME, className, children, ...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};
+      border: 1px solid ${theme.colour.border.subtle};
+    }
+  `;
+  const style = cx(baseStyle, className);
 
   return (
     <nav
@@ -46,30 +39,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,45 @@
+import { HTMLAttributes, 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,
+  ...props
+}: MenuBaseItemProps) => {
+  const [theme] = useTheme();
+  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}
+      {...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;
+  badge?: ReactNode;
+}
+
+const PrimaryMenuItem = ({
+  className,
+  children,
+  asChild,
+  badge,
+  ...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>
+        {badge}
+      </span>
+    </MenuBaseItem>
+  );
+};
+
+export default PrimaryMenuItem;

package/lib/components/MenuNew/SecondaryMenuItem.tsx

@@ -0,0 +1,61 @@
+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} />}
+      </span>
+    </MenuBaseItem>
+  );
+};
+
+export default SecondaryMenuItem;

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

@@ -0,0 +1,87 @@
+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('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('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();
+  });
+});

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

package/lib/components/Text/Text.tsx

@@ -0,0 +1,171 @@
+import { HTMLAttributes, Ref, memo } from 'react';
+import { css, cx } from '@emotion/css';
+import useTheme from '../../theme/useTheme';
+
+export const NAME = 'ucl-uikit-text';
+
+export type TextLevel =
+  | 'lg'
+  | 'lg-medium'
+  | 'lg-semibold'
+  | 'lg-bold'
+  | 'md'
+  | 'md-medium'
+  | 'md-semibold'
+  | 'md-medium-numeric'
+  | 'sm'
+  | 'sm-medium'
+  | 'sm-semibold'
+  | 'xs'
+  | 'xs-medium';
+
+export interface TextProps extends HTMLAttributes<HTMLSpanElement> {
+  level?: TextLevel;
+  testId?: string;
+  ref?: Ref<HTMLSpanElement>;
+}
+
+const Text = ({
+  level = 'md',
+  testId = NAME,
+  className,
+  ref,
+  ...props
+}: TextProps) => {
+  const [theme] = useTheme();
+
+  const {
+    typography: {
+      body: {
+        lg,
+        lgMedium,
+        lgSemibold,
+        lgBold,
+        md,
+        mdMedium,
+        mdSemibold,
+        mdMediumNumeric,
+        sm,
+        smMedium,
+        smSemibold,
+        xs,
+        xsMedium,
+      },
+    },
+  } = theme;
+
+  const baseStyle = css`
+    font-family: ${md.fontFamily};
+    font-feature-settings: ${md.fontSettings};
+    color: ${theme.colour.text.default};
+    margin: 0;
+  `;
+
+  const lgStyle = css`
+    font-size: ${lg.fontSize}px;
+    font-weight: ${lg.fontWeight};
+    line-height: ${lg.lineHeight}%;
+  `;
+
+  const lgMediumStyle = css`
+    font-size: ${lgMedium.fontSize}px;
+    font-weight: ${lgMedium.fontWeight};
+    line-height: ${lgMedium.lineHeight}%;
+  `;
+
+  const lgSemiboldStyle = css`
+    font-size: ${lgSemibold.fontSize}px;
+    font-weight: ${lgSemibold.fontWeight};
+    line-height: ${lgSemibold.lineHeight}%;
+  `;
+
+  const lgBoldStyle = css`
+    font-size: ${lgBold.fontSize}px;
+    font-weight: ${lgBold.fontWeight};
+    line-height: ${lgBold.lineHeight}%;
+  `;
+
+  const mdStyle = css`
+    font-size: ${md.fontSize}px;
+    font-weight: ${md.fontWeight};
+    line-height: ${md.lineHeight}%;
+  `;
+
+  const mdMediumStyle = css`
+    font-size: ${mdMedium.fontSize}px;
+    font-weight: ${mdMedium.fontWeight};
+    line-height: ${mdMedium.lineHeight}%;
+  `;
+
+  const mdSemiboldStyle = css`
+    font-size: ${mdSemibold.fontSize}px;
+    font-weight: ${mdSemibold.fontWeight};
+    line-height: ${mdSemibold.lineHeight}%;
+  `;
+
+  const mdMediumNumericStyle = css`
+    font-size: ${mdMediumNumeric.fontSize}px;
+    font-weight: ${mdMediumNumeric.fontWeight};
+    line-height: ${mdMediumNumeric.lineHeight}%;
+  `;
+
+  const smStyle = css`
+    font-size: ${sm.fontSize}px;
+    font-weight: ${sm.fontWeight};
+    line-height: ${sm.lineHeight}%;
+  `;
+
+  const smMediumStyle = css`
+    font-size: ${smMedium.fontSize}px;
+    font-weight: ${smMedium.fontWeight};
+    line-height: ${smMedium.lineHeight}%;
+  `;
+
+  const smSemiboldStyle = css`
+    font-size: ${smSemibold.fontSize}px;
+    font-weight: ${smSemibold.fontWeight};
+    line-height: ${smSemibold.lineHeight}%;
+  `;
+
+  const xsStyle = css`
+    font-size: ${xs.fontSize}px;
+    font-weight: ${xs.fontWeight};
+    line-height: ${xs.lineHeight}%;
+  `;
+
+  const xsMediumStyle = css`
+    font-size: ${xsMedium.fontSize}px;
+    font-weight: ${xsMedium.fontWeight};
+    line-height: ${xsMedium.lineHeight}%;
+  `;
+
+  const style = cx(
+    NAME,
+    baseStyle,
+    level === 'lg' && lgStyle,
+    level === 'lg-medium' && lgMediumStyle,
+    level === 'lg-semibold' && lgSemiboldStyle,
+    level === 'lg-bold' && lgBoldStyle,
+    level === 'md' && mdStyle,
+    level === 'md-medium' && mdMediumStyle,
+    level === 'md-semibold' && mdSemiboldStyle,
+    level === 'md-medium-numeric' && mdMediumNumericStyle,
+    level === 'sm' && smStyle,
+    level === 'sm-medium' && smMediumStyle,
+    level === 'sm-semibold' && smSemiboldStyle,
+    level === 'xs' && xsStyle,
+    level === 'xs-medium' && xsMediumStyle,
+    className
+  );
+
+  return (
+    <span
+      ref={ref}
+      className={style}
+      data-testid={testId}
+      {...props}
+    />
+  );
+};
+
+export default memo(Text);

package/lib/components/Text/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Text';
+export type { TextProps, TextLevel } from './Text';

package/lib/components/index.ts

@@ -52,10 +52,8 @@ export type { ParagraphProps } from './Paragraph';
 export { default as ParagraphNew } from './Paragraph';
 export type { ParagraphProps as ParagraphNewProps } from './Paragraph';
 
-// TODO: Remove aliased export in future breaking release
-// <Paragraph> will be used in place of <Text> in the future
-export { default as Text } from './Paragraph';
-export type { TextProps } from './Paragraph';
+export { default as Text } from './Text';
+export type { TextProps, TextLevel } from './Text';
 
 export { default as Modal } from './Modal';
 export type { ModalProps } from './Modal';
@@ -93,9 +91,6 @@ 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';