uikit-react-public 0.42.0 → 0.43.1

package/lib/components/Accordion/Accordion.Heading.tsx

@@ -71,11 +71,8 @@ const AccordionHeading: React.FC<AccordionHeadingProps> = ({
   `;
 
   const disabledStyle = css`
-    cursor: 'not-allowed';
-
-    &:hover {
-      background-color: ${theme.colour.text.disabled};
-    }
+    cursor: not-allowed;
+    color: ${theme.colour.text.disabled};
   `;
 
   const headingStyle = cx(

package/lib/components/Accordion/Accordion.tsx

@@ -47,6 +47,7 @@ export interface AccordionProps extends HTMLAttributes<HTMLDivElement> {
   size?: AccordionSize;
   disabled?: boolean;
   isOpen?: boolean;
+  variant?: 'no-background' | 'on-background';
 }
 
 const Accordion: React.FC<AccordionProps> & {
@@ -56,6 +57,7 @@ const Accordion: React.FC<AccordionProps> & {
   size = 'default',
   disabled = false,
   isOpen = false,
+  variant = 'no-background',
   children,
   className,
   testId = NAME,
@@ -76,7 +78,8 @@ const Accordion: React.FC<AccordionProps> & {
     min-width: 288px;
     max-width: 660px;
     box-sizing: border-box;
-    border: 1px solid ${theme.colour.border.default};
+    border-top: 1px solid ${theme.colour.border.default};
+    border-bottom: 1px solid ${theme.colour.border.default};
     background-color: ${theme.colour.surface.default};
     color: ${theme.colour.text.default};
     flex-shrink: 1;
@@ -88,7 +91,17 @@ const Accordion: React.FC<AccordionProps> & {
     color: ${theme.colour.text.disabled};
   `;
 
-  const style = cx(NAME, baseStyle, disabled && disabledStyle, className);
+  const onBackgroundStyle = css`
+    border: 1px solid ${theme.colour.border.default};
+  `;
+
+  const style = cx(
+    NAME,
+    baseStyle,
+    disabled && disabledStyle,
+    variant === 'on-background' && onBackgroundStyle,
+    className
+  );
 
   return (
     <AccordionContext.Provider

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

@@ -3,7 +3,7 @@
 exports[`Accordion > snapshot: no props 1`] = `
 <div
   aria-disabled="false"
-  class="ucl-uikit-accordion css-cn49eu"
+  class="ucl-uikit-accordion css-1pwsm43"
   data-testid="ucl-uikit-accordion"
 >
   <h6
@@ -39,7 +39,7 @@ exports[`Accordion > snapshot: no props 1`] = `
 exports[`Accordion > snapshot: testId prop 1`] = `
 <div
   aria-disabled="false"
-  class="ucl-uikit-accordion css-cn49eu"
+  class="ucl-uikit-accordion css-1pwsm43"
   data-testid="abc"
 >
   <h6

package/lib/components/Menu/Menu.tsx

@@ -1,14 +1,31 @@
-import { HTMLAttributes, memo } from 'react';
+import { HTMLAttributes, NamedExoticComponent, ReactNode, memo } from 'react';
 import { css, cx } from '@emotion/css';
+import { themes, useTheme } from '../../theme';
+import Icon from '../Icon';
+import MenuNew, {
+  MenuBaseItemProps,
+  MenuDividerProps,
+  MenuHeadProps,
+  MenuHeadingProps,
+  MenuProps as MenuNewProps,
+  MenuSectionProps as MenuNewSectionProps,
+  PrimaryMenuItemProps,
+  SecondaryMenuItemProps,
+  ActionMenuButtonProps,
+  MenuAccordionItemProps,
+  MenuAccordionProps,
+} from '../MenuNew';
 import MenuProvider from './Menu.context';
 import MenuContent from './MenuContent';
 import MenuItem from './MenuItem';
+import { MenuItemProps } from './MenuItem';
 import MenuSection from './MenuSection';
+import { MenuSectionProps } from './MenuSection';
 import MenuTrigger from './MenuTrigger';
 
 export const NAME = 'ucl-uikit-menu';
 
-export interface MenuProps extends HTMLAttributes<HTMLDivElement> {
+export interface LegacyMenuProps extends HTMLAttributes<HTMLDivElement> {
   defaultOpen?: boolean;
   title?: string;
   menuId?: string;
@@ -16,7 +33,25 @@ export interface MenuProps extends HTMLAttributes<HTMLDivElement> {
   position?: 'left' | 'right';
 }
 
-const Menu = ({
+export type MenuProps = Omit<MenuNewProps, 'children'> &
+  Pick<LegacyMenuProps, 'defaultOpen' | 'title' | 'menuId' | 'position'> & {
+    children?: ReactNode;
+  };
+
+export type {
+  MenuDividerProps,
+  MenuHeadProps,
+  MenuHeadingProps,
+  MenuNewSectionProps,
+  MenuAccordionProps,
+  MenuAccordionItemProps,
+  MenuBaseItemProps,
+  PrimaryMenuItemProps,
+  SecondaryMenuItemProps,
+  ActionMenuButtonProps,
+};
+
+const LegacyMenuRoot = ({
   defaultOpen = false,
   title,
   position = 'right',
@@ -25,7 +60,7 @@ const Menu = ({
   children,
   className,
   ...props
-}: MenuProps) => {
+}: LegacyMenuProps) => {
   const baseStyle = css`
     position: relative;
   `;
@@ -52,16 +87,137 @@ const Menu = ({
   );
 };
 
-export interface IMenuSubComponents {
+export interface LegacyMenuComponent extends NamedExoticComponent<LegacyMenuProps> {
   Section: typeof MenuSection;
   Item: typeof MenuItem;
 }
 
-const MemoMenu = memo(Menu);
+export const LegacyMenu = Object.assign(memo(LegacyMenuRoot), {
+  Section: MenuSection,
+  Item: MenuItem,
+}) as LegacyMenuComponent;
 
-const MenuWithSubComponents = MemoMenu as typeof MemoMenu & IMenuSubComponents;
+const Menu = ({
+  defaultOpen,
+  title,
+  position,
+  menuId,
+  testId = NAME,
+  className,
+  children,
+  border,
+  collapsed,
+  ...props
+}: MenuProps) => {
+  const [theme] = useTheme();
+
+  if (theme === themes.default) {
+    return (
+      <LegacyMenu
+        defaultOpen={defaultOpen}
+        title={title}
+        position={position}
+        menuId={menuId}
+        testId={testId}
+        className={className}
+        {...props}
+      >
+        {children}
+      </LegacyMenu>
+    );
+  }
+
+  return (
+    <MenuNew
+      testId={testId}
+      className={className}
+      border={border}
+      collapsed={collapsed}
+      {...props}
+    >
+      {children}
+    </MenuNew>
+  );
+};
+
+const MenuSectionBridge = (props: MenuSectionProps | MenuNewSectionProps) => {
+  const [theme] = useTheme();
+  const Section = theme === themes.default ? MenuSection : MenuNew.Section;
+
+  return <Section {...props} />;
+};
+
+const MenuItemBridge = ({
+  secondary,
+  externalLink,
+  trailingContent,
+  ...props
+}: MenuItemProps & PrimaryMenuItemProps & SecondaryMenuItemProps) => {
+  const [theme] = useTheme();
+
+  if (theme === themes.default) {
+    return (
+      <MenuItem
+        secondary={secondary}
+        externalLink={externalLink}
+        {...props}
+      />
+    );
+  }
+
+  if (secondary) {
+    return (
+      <MenuNew.SecondaryItem
+        externalLink={externalLink}
+        {...props}
+      />
+    );
+  }
+
+  const resolvedTrailingContent =
+    trailingContent ??
+    (externalLink ? (
+      <Icon.ExternalLink
+        size={16}
+        aria-hidden='true'
+        focusable='false'
+      />
+    ) : undefined);
+
+  return (
+    <MenuNew.PrimaryItem
+      trailingContent={resolvedTrailingContent}
+      {...props}
+    />
+  );
+};
+
+interface MenuComponent extends NamedExoticComponent<MenuProps> {
+  Section: typeof MenuSectionBridge;
+  Item: typeof MenuItemBridge;
+  Head: typeof MenuNew.Head;
+  Heading: typeof MenuNew.Heading;
+  Accordion: typeof MenuNew.Accordion;
+  Divider: typeof MenuNew.Divider;
+  BaseItem: typeof MenuNew.BaseItem;
+  PrimaryItem: typeof MenuNew.PrimaryItem;
+  SecondaryItem: typeof MenuNew.SecondaryItem;
+  ActionButton: typeof MenuNew.ActionButton;
+}
+
+const MemoMenu = memo(Menu);
 
-MenuWithSubComponents.Section = MenuSection;
-MenuWithSubComponents.Item = MenuItem;
+const MenuWithSubComponents = Object.assign(MemoMenu, {
+  Section: MenuSectionBridge,
+  Item: MenuItemBridge,
+  Head: MenuNew.Head,
+  Heading: MenuNew.Heading,
+  Accordion: MenuNew.Accordion,
+  Divider: MenuNew.Divider,
+  BaseItem: MenuNew.BaseItem,
+  PrimaryItem: MenuNew.PrimaryItem,
+  SecondaryItem: MenuNew.SecondaryItem,
+  ActionButton: MenuNew.ActionButton,
+}) as MenuComponent;
 
 export default MenuWithSubComponents;

package/lib/components/Menu/index.ts

@@ -1,8 +1,15 @@
 export { default } from './Menu';
+export { LegacyMenu } from './Menu';
 export type { MenuProps } from './Menu';
+/** @deprecated Use MenuProps instead. LegacyMenuProps only supports the default theme. */
+export type { LegacyMenuProps } from './Menu';
 
+/** @deprecated Use Menu.PrimaryItem/Menu.SecondaryItem from the package root instead. */
 export { default as MenuTrigger } from './MenuTrigger';
+/** @deprecated Use MenuNew component props from the package root instead. */
 export type { MenuTriggerProps } from './MenuTrigger';
 
+/** @deprecated Use Menu.Head/Menu.Section from the package root instead. */
 export { default as MenuContent } from './MenuContent';
+/** @deprecated Use MenuNew component props from the package root instead. */
 export type { MenuContentProps } from './MenuContent';

package/lib/components/MenuNew/ActionMenuButton.tsx

@@ -1,6 +1,6 @@
 import { css, cx } from '@emotion/css';
 import Button, { ButtonProps } from '../Button';
-import { useTheme } from '../..';
+import { useTheme } from '../../theme';
 
 export const NAME = 'ucl-uikit-menu__action-button';
 

package/lib/components/SkipToContent/SkipToContent.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { css } from '@emotion/css';
+import SkipToContent from './SkipToContent';
+
+const meta = {
+  title: 'Components/SkipToContent',
+  component: SkipToContent,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    href: { control: { type: 'text' } },
+    children: { control: { type: 'text' } },
+    testId: { control: { type: 'text' } },
+    className: { control: false },
+  },
+  args: {
+    href: '#main-content',
+    children: 'Skip to content',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof SkipToContent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <>
+      <SkipToContent {...args} />
+      <div
+        className={css`
+          padding: 96px 24px 24px;
+          font-family: sans-serif;
+        `}
+      >
+        Press Tab to focus the skip link.
+        <main
+          id='main-content'
+          tabIndex={-1}
+        >
+          Main content target
+        </main>
+      </div>
+    </>
+  ),
+};

package/lib/components/SkipToContent/SkipToContent.tsx

@@ -0,0 +1,68 @@
+import { AnchorHTMLAttributes, Ref, memo } from 'react';
+import { css, cx } from '@emotion/css';
+import useTheme from '../../theme/useTheme';
+import Button from '../Button';
+
+export const NAME = 'ucl-uikit-skip-to-content';
+
+export interface SkipToContentProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  testId?: string;
+  ref?: Ref<HTMLAnchorElement>;
+}
+
+const SkipToContent = ({
+  href = '#main-content',
+  testId = NAME,
+  className,
+  children = 'Skip to content',
+  ref,
+  ...props
+}: SkipToContentProps) => {
+  const [theme] = useTheme();
+
+  const wrapperStyle = css`
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    gap: ${theme.padding.p8};
+    width: 100%;
+    max-height: 0;
+    padding: 0 ${theme.padding.p16};
+    overflow: hidden;
+    background-color: ${theme.colour.fill.inverse};
+
+    &:focus-within {
+      max-height: 72px;
+      padding-top: ${theme.padding.p12};
+      padding-bottom: ${theme.padding.p12};
+    }
+
+    @media screen and (min-width: ${theme.breakpoints.tablet}px) {
+      padding-right: 60px;
+      padding-left: 60px;
+    }
+  `;
+
+  const style = cx(NAME, className);
+
+  return (
+    <div className={wrapperStyle}>
+      <Button
+        as='a'
+        variant='secondary'
+        size='small'
+        href={href}
+        className={style}
+        testId={testId}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </Button>
+    </div>
+  );
+};
+
+export default memo(SkipToContent);

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

@@ -0,0 +1,38 @@
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+import SkipToContent from '../SkipToContent';
+
+const wrap = (ui: React.ReactElement) =>
+  render(<ThemeContextProvider>{ui}</ThemeContextProvider>);
+
+describe('SkipToContent', () => {
+  test('renders with default text and href', () => {
+    wrap(<SkipToContent />);
+
+    const link = screen.getByRole('link', { name: 'Skip to content' });
+
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute('href', '#main-content');
+  });
+
+  test('accepts custom text and href', () => {
+    wrap(<SkipToContent href='#content'>Skip to main content</SkipToContent>);
+
+    const link = screen.getByRole('link', { name: 'Skip to main content' });
+
+    expect(link).toHaveAttribute('href', '#content');
+  });
+
+  test('applies custom test id and className', () => {
+    const { getByTestId } = wrap(
+      <SkipToContent
+        testId='custom-skip-link'
+        className='custom-class'
+      />
+    );
+
+    expect(getByTestId('custom-skip-link')).toBeInTheDocument();
+    expect(getByTestId('custom-skip-link').classList).toContain('custom-class');
+  });
+});

package/lib/components/SkipToContent/index.ts

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

package/lib/components/index.ts

@@ -119,6 +119,10 @@ export type { AppMenuProps } from './AppMenu';
 export { default as Menu } from './Menu';
 export type { MenuProps } from './Menu';
 
+/** @deprecated Use Menu instead. MenuLegacy only supports the default theme. */
+export { LegacyMenu as MenuLegacy } from './Menu';
+export type { LegacyMenuProps as MenuLegacyProps } from './Menu';
+
 export { default as MenuNew } from './MenuNew';
 export type { MenuProps as MenuNewProps } from './MenuNew';
 
@@ -213,6 +217,9 @@ export type { CookieNoticeProps } from './CookieNotice';
 export { default as Search } from './Search';
 export type { SearchProps } from './Search';
 
+export { default as SkipToContent } from './SkipToContent';
+export type { SkipToContentProps } from './SkipToContent';
+
 export { default as Dropdown } from './Dropdown';
 export type {
   DropdownProps,

package/package.json

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