uikit-react-public 0.25.1 → 0.25.2

package/lib/components/Button/Button.tsx

@@ -140,7 +140,6 @@ const Button = <C extends ElementType = 'button'>({
     border-radius: ${theme.radius.r4};
     font-family: ${theme.typography.body.md.fontFamily};
     font-feature-settings: ${theme.typography.body.md.fontSettings};
-    font-size: 18px;
     font-weight: 500;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -165,21 +164,25 @@ const Button = <C extends ElementType = 'button'>({
   const sizeExtraSmallStyle = css`
     height: 32px;
     padding: 0 ${paddingPx}px;
+    font-size: 14px;
   `;
 
   const sizeSmallStyle = css`
     height: 40px;
     padding: 0 ${paddingPx}px;
+    font-size: 16px;
   `;
 
   const sizeMediumStyle = css`
     height: 48px;
     padding: 0 ${paddingPx}px;
+    font-size: 16px;
   `;
 
   const sizeLargeStyle = css`
     height: 56px;
     padding: 0 ${paddingPx}px;
+    font-size: 18px;
   `;
 
   const fullWidthStyle = css`

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

@@ -3,7 +3,7 @@
 exports[`Button > maps legacy destructive prop to destructive variants 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-yunmm0"
+  class="ucl-uikit-button css-ay3o9w"
   data-testid="ucl-uikit-button"
 >
   Delete
@@ -13,7 +13,7 @@ exports[`Button > maps legacy destructive prop to destructive variants 1`] = `
 exports[`Button > maps legacy size default to medium 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-oqr4zz"
+  class="ucl-uikit-button css-19pu3x7"
   data-testid="ucl-uikit-button"
 >
   Legacy default size
@@ -23,7 +23,7 @@ exports[`Button > maps legacy size default to medium 1`] = `
 exports[`Button > snapshot: 'as' prop with 'a' 1`] = `
 <a
   aria-disabled="false"
-  class="ucl-uikit-button css-oqr4zz"
+  class="ucl-uikit-button css-19pu3x7"
   data-testid="ucl-uikit-button"
   href="https://ucl.ac.uk"
 >
@@ -34,7 +34,7 @@ exports[`Button > snapshot: 'as' prop with 'a' 1`] = `
 exports[`Button > snapshot: loading 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-1sgvpd0"
+  class="ucl-uikit-button css-16925p4"
   data-testid="ucl-uikit-button"
   disabled=""
 >
@@ -67,7 +67,7 @@ exports[`Button > snapshot: loading 1`] = `
 exports[`Button > snapshot: no props 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-12at99t"
+  class="ucl-uikit-button css-12mlzyd"
   data-testid="ucl-uikit-button"
 />
 `;
@@ -75,7 +75,7 @@ exports[`Button > snapshot: no props 1`] = `
 exports[`Button > snapshot: testId prop 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-12at99t"
+  class="ucl-uikit-button css-12mlzyd"
   data-testid="test123"
 />
 `;
@@ -83,7 +83,7 @@ exports[`Button > snapshot: testId prop 1`] = `
 exports[`Button > snapshot: variant prop 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-9dplwk"
+  class="ucl-uikit-button css-vpw5wr"
   data-testid="ucl-uikit-button"
 />
 `;
@@ -91,7 +91,7 @@ exports[`Button > snapshot: variant prop 1`] = `
 exports[`Button > snapshot: with icon 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-oqr4zz"
+  class="ucl-uikit-button css-19pu3x7"
   data-testid="ucl-uikit-button"
 >
   <svg
@@ -119,7 +119,7 @@ exports[`Button > snapshot: with icon 1`] = `
 exports[`Button > snapshot: with icon and iconPosition right 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-oqr4zz"
+  class="ucl-uikit-button css-19pu3x7"
   data-testid="ucl-uikit-button"
 >
   Download

package/lib/components/DropdownMenu/DropdownMenu.tsx

@@ -1,11 +1,9 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { css, cx } from '@emotion/css';
 import Dropdown, { DropdownProps } from '../Dropdown';
-import Button from '../Button';
-import IconButton from '../IconButton';
-import Icon from '../Icon';
 import useTheme from '../../theme/useTheme';
 import useMediaQuery from '../../hooks/useMediaQuery';
+import DropdownMenuTrigger from './DropdownMenuTrigger';
 
 export const NAME = 'ucl-uikit-dropdown-menu';
 
@@ -15,7 +13,8 @@ export interface DropdownMenuProps
     Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
   children: ReactNode;
   label?: string;
-  triggerAriaLabel?: string;
+  triggerAriaLabelCollapsed?: string;
+  triggerAriaLabelExpanded?: string;
   dropdownClassName?: string;
   triggerClassName?: string;
   contentClassName?: string;
@@ -24,7 +23,8 @@ export interface DropdownMenuProps
 const DropdownMenu = ({
   children,
   label = 'MENU',
-  triggerAriaLabel = 'Open menu',
+  triggerAriaLabelCollapsed = 'Open menu',
+  triggerAriaLabelExpanded = 'Close menu',
   dropdownClassName,
   triggerClassName,
   contentClassName,
@@ -56,25 +56,13 @@ const DropdownMenu = ({
       {...props}
     >
       <Dropdown.Trigger>
-        {isDesktop ? (
-          <Button
-            variant='tertiary-no-padding'
-            size='small'
-            className={resolvedTriggerClassName}
-            icon={<Icon.Menu2 />}
-            iconPosition='right'
-            aria-label={triggerAriaLabel}
-          >
-            {label}
-          </Button>
-        ) : (
-          <IconButton
-            className={resolvedTriggerClassName}
-            aria-label={triggerAriaLabel}
-          >
-            <Icon.Menu2 />
-          </IconButton>
-        )}
+        <DropdownMenuTrigger
+          isDesktop={isDesktop}
+          label={label}
+          triggerAriaLabelCollapsed={triggerAriaLabelCollapsed}
+          triggerAriaLabelExpanded={triggerAriaLabelExpanded}
+          className={resolvedTriggerClassName}
+        />
       </Dropdown.Trigger>
       <Dropdown.Content className={contentClassName}>
         {children}

package/lib/components/DropdownMenu/DropdownMenuTrigger.tsx

@@ -0,0 +1,74 @@
+import type {
+  FocusEventHandler,
+  KeyboardEventHandler,
+  MouseEventHandler,
+} from 'react';
+import Button from '../Button';
+import IconButton from '../IconButton';
+import Icon from '../Icon';
+
+export interface DropdownMenuTriggerProps {
+  isDesktop: boolean;
+  label: string;
+  triggerAriaLabelCollapsed: string;
+  triggerAriaLabelExpanded: string;
+  className?: string;
+  onClick?: MouseEventHandler<HTMLElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLElement>;
+  onBlur?: FocusEventHandler<HTMLElement>;
+  onFocus?: FocusEventHandler<HTMLElement>;
+  [key: string]: unknown;
+}
+
+const DropdownMenuTrigger = ({
+  isDesktop,
+  label,
+  triggerAriaLabelCollapsed,
+  triggerAriaLabelExpanded,
+  className,
+  ...props
+}: DropdownMenuTriggerProps) => {
+  const isExpanded = Boolean(props['aria-expanded']);
+  const triggerAriaLabel = isExpanded
+    ? triggerAriaLabelExpanded
+    : triggerAriaLabelCollapsed;
+  const icon = isExpanded ? (
+    <Icon.X
+      title='Close menu'
+      testId='ucl-uikit-dropdown-menu__icon-close'
+    />
+  ) : (
+    <Icon.Menu2
+      title='Open menu'
+      testId='ucl-uikit-dropdown-menu__icon-open'
+    />
+  );
+
+  if (isDesktop) {
+    return (
+      <Button
+        variant='tertiary-no-padding'
+        size='small'
+        className={className}
+        icon={icon}
+        iconPosition='right'
+        aria-label={triggerAriaLabel}
+        {...props}
+      >
+        {label}
+      </Button>
+    );
+  }
+
+  return (
+    <IconButton
+      className={className}
+      aria-label={triggerAriaLabel}
+      {...props}
+    >
+      {icon}
+    </IconButton>
+  );
+};
+
+export default DropdownMenuTrigger;

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

@@ -33,6 +33,9 @@ describe('DropdownMenu', () => {
       screen.getByRole('button', { name: 'Open menu' })
     ).toBeInTheDocument();
     expect(screen.getByText('Menu')).toBeInTheDocument();
+    expect(
+      screen.getByTestId('ucl-uikit-dropdown-menu__icon-open')
+    ).toBeVisible();
   });
 
   test('renders icon-only trigger on smaller screens', () => {
@@ -50,6 +53,40 @@ describe('DropdownMenu', () => {
       screen.getByRole('button', { name: 'Open menu' })
     ).toBeInTheDocument();
     expect(screen.queryByText('Menu')).not.toBeInTheDocument();
+    expect(
+      screen.getByTestId('ucl-uikit-dropdown-menu__icon-open')
+    ).toBeVisible();
+  });
+
+  test('switches trigger icon from menu to close when expanded', () => {
+    render(
+      <ThemeContextProvider>
+        <DropdownMenu>
+          <div>Menu content</div>
+        </DropdownMenu>
+      </ThemeContextProvider>
+    );
+
+    const trigger = screen.getByRole('button', { name: 'Open menu' });
+
+    expect(
+      screen.getByTestId('ucl-uikit-dropdown-menu__icon-open')
+    ).toBeVisible();
+    expect(
+      screen.queryByTestId('ucl-uikit-dropdown-menu__icon-close')
+    ).not.toBeInTheDocument();
+
+    fireEvent.click(trigger);
+
+    expect(
+      screen.getByRole('button', { name: 'Close menu' })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByTestId('ucl-uikit-dropdown-menu__icon-close')
+    ).toBeVisible();
+    expect(
+      screen.queryByTestId('ucl-uikit-dropdown-menu__icon-open')
+    ).not.toBeInTheDocument();
   });
 
   test('supports className overrides for trigger and content', () => {
@@ -65,7 +102,7 @@ describe('DropdownMenu', () => {
       </ThemeContextProvider>
     );
 
-    expect(screen.getByRole('button', { name: 'Open menu' })).toHaveClass(
+    expect(screen.getByRole('button', { name: 'Close menu' })).toHaveClass(
       'trigger-override'
     );
     expect(screen.getByTestId('ucl-uikit-dropdown__content')).toHaveClass(
@@ -93,4 +130,24 @@ describe('DropdownMenu', () => {
     fireEvent.click(trigger);
     expect(content).not.toBeVisible();
   });
+
+  test('supports separate collapsed and expanded aria labels', () => {
+    render(
+      <ThemeContextProvider>
+        <DropdownMenu
+          triggerAriaLabelCollapsed='Show menu options'
+          triggerAriaLabelExpanded='Hide menu options'
+        >
+          <div>Menu content</div>
+        </DropdownMenu>
+      </ThemeContextProvider>
+    );
+
+    const trigger = screen.getByRole('button', { name: 'Show menu options' });
+    fireEvent.click(trigger);
+
+    expect(
+      screen.getByRole('button', { name: 'Hide menu options' })
+    ).toBeInTheDocument();
+  });
 });

package/lib/components/MenuNew/ActionMenuButton.tsx

@@ -0,0 +1,39 @@
+import { css, cx } from '@emotion/css';
+import Button, { ButtonProps } from '../Button';
+import { useTheme } from '../..';
+
+export const NAME = 'ucl-uikit-menu__action-button';
+
+export interface ActionMenuButtonProps extends Omit<
+  ButtonProps<'button'>,
+  'variant' | 'as'
+> {}
+
+const ActionMenuButton = ({
+  className,
+  children,
+  ...props
+}: ActionMenuButtonProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    margin: ${theme.margin.m8} 0;
+    background-color: ${theme.colour.surface.primary};
+  `;
+
+  const style = cx(NAME, baseStyle, className);
+
+  return (
+    <Button
+      className={style}
+      variant='secondary'
+      size='small'
+      fullWidth
+      {...props}
+    >
+      {children}
+    </Button>
+  );
+};
+
+export default ActionMenuButton;

package/lib/components/MenuNew/Menu.tsx

@@ -2,7 +2,13 @@ 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 MenuHeading, { MenuHeadingProps } from './MenuHeading';
+import MenuSection, { MenuSectionProps } from './MenuSection';
+import MenuAccordion, {
+  MenuAccordionItemProps,
+  MenuAccordionProps,
+} from './MenuAccordion';
+import ActionMenuButton, { ActionMenuButtonProps } from './ActionMenuButton';
 import PrimaryMenuItem, { PrimaryMenuItemProps } from './PrimaryMenuItem';
 import SecondaryMenuItem, { SecondaryMenuItemProps } from './SecondaryMenuItem';
 import { useTheme } from '../../theme';
@@ -16,10 +22,14 @@ export interface MenuProps extends HTMLAttributes<HTMLDivElement> {
 
 export type {
   MenuDividerProps,
+  MenuHeadingProps,
+  MenuSectionProps,
+  MenuAccordionProps,
+  MenuAccordionItemProps,
   MenuBaseItemProps,
   PrimaryMenuItemProps,
   SecondaryMenuItemProps,
-  ActionMenuItemProps,
+  ActionMenuButtonProps,
 };
 
 const Menu = ({
@@ -32,8 +42,10 @@ const Menu = ({
   const [theme] = useTheme();
   const baseStyle = css`
     padding: ${theme.padding.p16} ${theme.padding.p24};
+    background-color: ${theme.colour.surface.primary};
 
     @media screen and (min-width: ${theme.breakpoints.tablet}px) {
+      width: 360px;
       padding: ${theme.padding.p48} ${theme.padding.p64};
     }
   `;
@@ -54,19 +66,25 @@ const Menu = ({
 };
 
 interface MenuComponent extends NamedExoticComponent<MenuProps> {
+  Section: typeof MenuSection;
+  Heading: typeof MenuHeading;
+  Accordion: typeof MenuAccordion;
   Divider: typeof MenuDivider;
   BaseItem: typeof MenuBaseItem;
   PrimaryItem: typeof PrimaryMenuItem;
   SecondaryItem: typeof SecondaryMenuItem;
-  ActionItem: typeof ActionMenuItem;
+  ActionButton: typeof ActionMenuButton;
 }
 
 const MemoMenu: MenuComponent = Object.assign(memo(Menu), {
+  Section: MenuSection,
+  Heading: MenuHeading,
+  Accordion: MenuAccordion,
   Divider: MenuDivider,
   BaseItem: MenuBaseItem,
   PrimaryItem: PrimaryMenuItem,
   SecondaryItem: SecondaryMenuItem,
-  ActionItem: ActionMenuItem,
+  ActionButton: ActionMenuButton,
 });
 
 export default MemoMenu;

package/lib/components/MenuNew/MenuAccordion/MenuAccordion.tsx

@@ -0,0 +1,104 @@
+import { css, cx } from '@emotion/css';
+import {
+  MouseEvent,
+  NamedExoticComponent,
+  ReactNode,
+  memo,
+  useState,
+} from 'react';
+import { MenuBaseItemProps } from '../MenuBaseItem';
+import MenuBaseItem from '../MenuBaseItem';
+import MenuItemText from '../MenuItemText';
+import { useTheme } from '../../../theme';
+import MenuAccordionChevron from './MenuAccordionChevron';
+import MenuAccordionItem, { MenuAccordionItemProps } from './MenuAccordionItem';
+
+export const NAME = 'ucl-uikit-menu__accordion';
+
+export interface MenuAccordionProps extends Omit<
+  MenuBaseItemProps,
+  'iconPosition' | 'asChild' | 'children'
+> {
+  label: ReactNode;
+  defaultExpanded?: boolean;
+  children?: ReactNode;
+}
+
+const MenuAccordion = ({
+  className,
+  label,
+  children,
+  defaultExpanded = false,
+  onClick,
+  ...props
+}: MenuAccordionProps) => {
+  const [theme] = useTheme();
+  const [expanded, setExpanded] = useState(defaultExpanded);
+
+  const baseStyle = css`
+    width: 100%;
+    color: ${theme.colour.text.default};
+
+    @media screen and (min-width: ${theme.breakpoints.tablet}px) {
+      padding: 0 ${theme.padding.p16};
+    }
+
+    &:hover {
+      background-color: ${theme.colour.fill.brandSubtleHover};
+    }
+  `;
+
+  const style = cx(NAME, baseStyle, className);
+
+  const textStyle = css``;
+
+  const contentStyle = css`
+    display: inline-flex;
+    align-items: center;
+    gap: ${theme.margin.m16};
+  `;
+
+  const bodyStyle = css`
+    width: 100%;
+    margin-top: ${theme.margin.m8};
+  `;
+
+  const handleClick = (event: MouseEvent<HTMLDivElement>) => {
+    setExpanded((previous) => !previous);
+    onClick?.(event);
+  };
+
+  return (
+    <>
+      <MenuBaseItem
+        className={style}
+        iconPosition='left'
+        underlineOnHover={false}
+        onClick={handleClick}
+        endAdornment={<MenuAccordionChevron expanded={expanded} />}
+        aria-expanded={expanded}
+        {...props}
+      >
+        <span className={contentStyle}>
+          <MenuItemText className={textStyle}>{label}</MenuItemText>
+        </span>
+      </MenuBaseItem>
+      {expanded && <div className={bodyStyle}>{children}</div>}
+    </>
+  );
+};
+
+interface MenuAccordionComponent extends NamedExoticComponent<MenuAccordionProps> {
+  Item: typeof MenuAccordionItem;
+}
+
+const MemoMenuAccordion: MenuAccordionComponent = Object.assign(
+  memo(MenuAccordion),
+  {
+    Item: MenuAccordionItem,
+  }
+);
+
+export type { MenuAccordionItemProps };
+
+export default MemoMenuAccordion;

package/lib/components/MenuNew/MenuAccordion/MenuAccordionChevron.tsx

@@ -0,0 +1,30 @@
+import Icon from '../../Icon';
+
+export interface MenuAccordionChevronProps {
+  expanded: boolean;
+  className?: string;
+}
+
+const MenuAccordionChevron = ({
+  expanded,
+  className,
+}: MenuAccordionChevronProps) =>
+  expanded ? (
+    <Icon.ChevronUp
+      className={className}
+      size={24}
+      aria-hidden='true'
+      focusable='false'
+      testId='ucl-uikit-menu__accordion__icon--chevron-up'
+    />
+  ) : (
+    <Icon.ChevronDown
+      className={className}
+      size={24}
+      aria-hidden='true'
+      focusable='false'
+      testId='ucl-uikit-menu__accordion__icon--chevron-down'
+    />
+  );
+
+export default MenuAccordionChevron;

package/lib/components/MenuNew/MenuAccordion/MenuAccordionItem.tsx

@@ -0,0 +1,47 @@
+import { HTMLAttributes } from 'react';
+import { css, cx } from '@emotion/css';
+import MenuBaseItem from '../MenuBaseItem';
+import MenuItemText from '../MenuItemText';
+import { useTheme } from '../../../theme';
+
+export const NAME = 'ucl-uikit-menu__accordion-item';
+
+export interface MenuAccordionItemProps extends HTMLAttributes<HTMLDivElement> {
+  asChild?: boolean;
+  testId?: string;
+}
+
+const MenuAccordionItem = ({
+  asChild,
+  testId = NAME,
+  className,
+  children,
+  ...props
+}: MenuAccordionItemProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    margin: 0;
+    padding-left: ${theme.padding.p40};
+
+    @media screen and (min-width: ${theme.breakpoints.tablet}px) {
+      padding: 0 ${theme.padding.p56};
+    }
+  `;
+
+  const style = cx(NAME, baseStyle, className);
+
+  return (
+    <MenuBaseItem
+      className={style}
+      iconPosition='left'
+      asChild={asChild}
+      data-testid={testId}
+      {...props}
+    >
+      <MenuItemText asChild={asChild}>{children}</MenuItemText>
+    </MenuBaseItem>
+  );
+};
+
+export default MenuAccordionItem;

package/lib/components/MenuNew/MenuAccordion/index.ts

@@ -0,0 +1,5 @@
+export { default } from './MenuAccordion';
+export type {
+  MenuAccordionProps,
+  MenuAccordionItemProps,
+} from './MenuAccordion';