uikit-react-public 0.28.0 → 0.29.1

package/lib/components/BreadcrumbsNew/BaseBreadcrumbsItem.tsx

@@ -0,0 +1,69 @@
+import { LiHTMLAttributes, ReactNode } from 'react';
+import { css, cx } from '@emotion/css';
+import Icon from '../Icon';
+import { useTheme } from '../../theme';
+import type { BreadcrumbsSize } from './Breadcrumbs';
+
+export const NAME = 'ucl-uikit-breadcrumbs__item';
+
+export interface BaseBreadcrumbsItemProps extends LiHTMLAttributes<HTMLLIElement> {
+  separator?: boolean;
+  back?: boolean;
+  size?: BreadcrumbsSize;
+  testId?: string;
+  children?: ReactNode;
+}
+
+const BaseBreadcrumbsItem = ({
+  separator = false,
+  back = false,
+  size = 'medium',
+  testId = NAME,
+  className,
+  children,
+  ...props
+}: BaseBreadcrumbsItemProps) => {
+  const [theme] = useTheme();
+
+  const style = cx(
+    NAME,
+    css`
+      display: inline-flex;
+      align-items: center;
+      gap: ${theme.margin.m8};
+      min-width: 0;
+    `,
+    className
+  );
+
+  const iconStyle = css`
+    flex: 0 0 auto;
+    color: ${theme.colour.icon.brandPrimary};
+  `;
+
+  return (
+    <li
+      className={style}
+      data-testid={testId}
+      {...props}
+    >
+      {back && (
+        <Icon.ArrowLeft
+          aria-hidden
+          className={iconStyle}
+          size={size === 'small' ? 16 : 20}
+        />
+      )}
+      {children}
+      {separator && (
+        <Icon.ChevronRight
+          aria-hidden
+          className={iconStyle}
+          size={size === 'small' ? 12 : 16}
+        />
+      )}
+    </li>
+  );
+};
+
+export default BaseBreadcrumbsItem;

package/lib/components/BreadcrumbsNew/Breadcrumbs.tsx

@@ -0,0 +1,118 @@
+import {
+  Children,
+  HTMLAttributes,
+  NamedExoticComponent,
+  ReactElement,
+  cloneElement,
+  isValidElement,
+  memo,
+} from 'react';
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../../theme';
+import BaseBreadcrumbsItem, {
+  BaseBreadcrumbsItemProps,
+} from './BaseBreadcrumbsItem';
+import BreadcrumbsCurrent, {
+  BreadcrumbsCurrentProps,
+} from './BreadcrumbsCurrent';
+import BreadcrumbsLink, { BreadcrumbsLinkProps } from './BreadcrumbsLink';
+
+export const NAME = 'ucl-uikit-breadcrumbs';
+
+export type BreadcrumbsSize = 'small' | 'medium';
+
+export interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {
+  size?: BreadcrumbsSize;
+  testId?: string;
+}
+
+type BreadcrumbChild = ReactElement<{
+  separator?: boolean;
+  back?: boolean;
+  size?: BreadcrumbsSize;
+}>;
+
+const Breadcrumbs = ({
+  size = 'medium',
+  testId = NAME,
+  className,
+  children,
+  'aria-label': ariaLabel = 'Breadcrumb',
+  ...props
+}: BreadcrumbsProps) => {
+  const [theme] = useTheme();
+  const items = Children.toArray(children).filter(isValidElement);
+  const parentItem = items[items.length - 2] as BreadcrumbChild | undefined;
+
+  const listStyle = css`
+    display: flex;
+    align-items: center;
+    gap: ${theme.margin.m8};
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  `;
+
+  const desktopStyle = css`
+    display: none;
+
+    @media screen and (min-width: ${theme.breakpoints.tablet}px) {
+      display: flex;
+    }
+  `;
+
+  const mobileStyle = css`
+    @media screen and (min-width: ${theme.breakpoints.tablet}px) {
+      display: none;
+    }
+  `;
+
+  const style = cx(NAME, className);
+
+  return (
+    <nav
+      aria-label={ariaLabel}
+      className={style}
+      data-testid={testId}
+      {...props}
+    >
+      <ol className={cx(listStyle, desktopStyle)}>
+        {items.map((item, index) =>
+          cloneElement(item as BreadcrumbChild, {
+            separator: index < items.length - 1,
+            size,
+          })
+        )}
+      </ol>
+      {parentItem && (
+        <ol className={cx(listStyle, mobileStyle)}>
+          {cloneElement(parentItem, {
+            back: true,
+            separator: false,
+            size,
+          })}
+        </ol>
+      )}
+    </nav>
+  );
+};
+
+interface BreadcrumbsComponent extends NamedExoticComponent<BreadcrumbsProps> {
+  BaseItem: typeof BaseBreadcrumbsItem;
+  Link: typeof BreadcrumbsLink;
+  Current: typeof BreadcrumbsCurrent;
+}
+
+const MemoBreadcrumbs: BreadcrumbsComponent = Object.assign(memo(Breadcrumbs), {
+  BaseItem: BaseBreadcrumbsItem,
+  Link: BreadcrumbsLink,
+  Current: BreadcrumbsCurrent,
+});
+
+export type {
+  BaseBreadcrumbsItemProps,
+  BreadcrumbsCurrentProps,
+  BreadcrumbsLinkProps,
+};
+
+export default MemoBreadcrumbs;

package/lib/components/BreadcrumbsNew/BreadcrumbsCurrent.tsx

@@ -0,0 +1,54 @@
+import { HTMLAttributes } from 'react';
+import { css, cx } from '@emotion/css';
+import Text from '../Text';
+import { useTheme } from '../../theme';
+import BaseBreadcrumbsItem, {
+  BaseBreadcrumbsItemProps,
+} from './BaseBreadcrumbsItem';
+
+export const NAME = 'ucl-uikit-breadcrumbs__current';
+
+export interface BreadcrumbsCurrentProps
+  extends
+    HTMLAttributes<HTMLSpanElement>,
+    Pick<BaseBreadcrumbsItemProps, 'separator' | 'size'> {
+  testId?: string;
+}
+
+const BreadcrumbsCurrent = ({
+  separator,
+  size = 'medium',
+  testId = NAME,
+  className,
+  children,
+  ...props
+}: BreadcrumbsCurrentProps) => {
+  const [theme] = useTheme();
+
+  const style = cx(
+    NAME,
+    css`
+      color: ${theme.colour.text.secondary};
+    `,
+    className
+  );
+
+  return (
+    <BaseBreadcrumbsItem
+      separator={separator}
+      size={size}
+    >
+      <Text
+        aria-current='page'
+        className={style}
+        data-testid={testId}
+        level={size === 'small' ? 'sm-semibold' : 'md-semibold'}
+        {...props}
+      >
+        {children}
+      </Text>
+    </BaseBreadcrumbsItem>
+  );
+};
+
+export default BreadcrumbsCurrent;

package/lib/components/BreadcrumbsNew/BreadcrumbsLink.tsx

@@ -0,0 +1,67 @@
+import { css, cx } from '@emotion/css';
+import Link, { LinkProps } from '../Link';
+import { useTheme } from '../../theme';
+import BaseBreadcrumbsItem, {
+  BaseBreadcrumbsItemProps,
+} from './BaseBreadcrumbsItem';
+
+export const NAME = 'ucl-uikit-breadcrumbs__link';
+
+type BreadcrumbsLinkOwnProps = Pick<
+  BaseBreadcrumbsItemProps,
+  'separator' | 'back' | 'size'
+>;
+
+export type BreadcrumbsLinkProps = BreadcrumbsLinkOwnProps &
+  Omit<LinkProps, 'size'>;
+
+const BreadcrumbsLink = ({
+  separator,
+  back,
+  size = 'medium',
+  className,
+  children,
+  ...props
+}: BreadcrumbsLinkProps) => {
+  const [theme] = useTheme();
+
+  const linkStyle = cx(
+    NAME,
+    css`
+      color: ${theme.colour.link.primary};
+      text-decoration: none;
+
+      &:visited {
+        color: ${theme.colour.link.primary};
+      }
+
+      &:hover {
+        text-decoration: underline;
+      }
+
+      &:active {
+        color: ${theme.colour.link.primaryHover};
+      }
+    `,
+    className
+  );
+
+  return (
+    <BaseBreadcrumbsItem
+      separator={separator}
+      back={back}
+      size={size}
+    >
+      <Link
+        className={linkStyle}
+        noVisited
+        size={size === 'small' ? 'small' : 'default'}
+        {...props}
+      >
+        {children}
+      </Link>
+    </BaseBreadcrumbsItem>
+  );
+};
+
+export default BreadcrumbsLink;

package/lib/components/BreadcrumbsNew/__tests__/Breadcrumbs.test.tsx

@@ -0,0 +1,53 @@
+import { render, screen, within } from '@testing-library/react';
+import { describe, expect, test } from 'vitest';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+import Breadcrumbs from '../Breadcrumbs';
+
+describe('BreadcrumbsNew', () => {
+  test('renders the full trail and a mobile parent link', () => {
+    render(
+      <ThemeContextProvider>
+        <Breadcrumbs>
+          <Breadcrumbs.Link asChild>
+            <a href='/'>Home</a>
+          </Breadcrumbs.Link>
+          <Breadcrumbs.Link asChild>
+            <a href='/parent'>Parent</a>
+          </Breadcrumbs.Link>
+          <Breadcrumbs.Current>Current page</Breadcrumbs.Current>
+        </Breadcrumbs>
+      </ThemeContextProvider>
+    );
+
+    const lists = screen.getAllByRole('list', { hidden: true });
+
+    expect(
+      within(lists[0]).getAllByRole('listitem', { hidden: true })
+    ).toHaveLength(3);
+    expect(
+      within(lists[1]).getAllByRole('listitem', { hidden: true })
+    ).toHaveLength(1);
+    expect(
+      within(lists[1]).getByRole('link', { hidden: true })
+    ).toHaveAttribute('href', '/parent');
+    expect(screen.getByText('Current page')).toHaveAttribute(
+      'aria-current',
+      'page'
+    );
+  });
+
+  test('supports small breadcrumbs', () => {
+    render(
+      <ThemeContextProvider>
+        <Breadcrumbs size='small'>
+          <Breadcrumbs.Link asChild>
+            <a href='/parent'>Parent</a>
+          </Breadcrumbs.Link>
+          <Breadcrumbs.Current>Current page</Breadcrumbs.Current>
+        </Breadcrumbs>
+      </ThemeContextProvider>
+    );
+
+    expect(screen.getByText('Current page')).toHaveClass('ucl-uikit-text');
+  });
+});

package/lib/components/BreadcrumbsNew/index.ts

@@ -0,0 +1,8 @@
+export { default } from './Breadcrumbs';
+export type {
+  BaseBreadcrumbsItemProps,
+  BreadcrumbsCurrentProps,
+  BreadcrumbsLinkProps,
+  BreadcrumbsProps,
+  BreadcrumbsSize,
+} from './Breadcrumbs';

package/lib/components/Link/BaseLink.tsx

@@ -1,7 +1,11 @@
 import React, {
+  Children,
+  cloneElement,
   ComponentPropsWithoutRef,
   ElementType,
   forwardRef,
+  isValidElement,
+  ReactElement,
   useCallback,
 } from 'react';
 import { css, cx } from '@emotion/css';
@@ -30,13 +34,16 @@ type BaseLinkOwnProps = {
   testId?: string;
   className?: string;
   children?: React.ReactNode;
+  /** @deprecated Prefer `asChild` with a routing link child. */
   to?: string;
+  asChild?: boolean;
 };
 
 type PolymorphicRef<C extends ElementType> =
   React.ComponentPropsWithRef<C>['ref'];
 
 export type BaseLinkProps<C extends ElementType = 'a'> = BaseLinkOwnProps & {
+  /** @deprecated Prefer `asChild` with a custom link child. */
   component?: C;
 } & Omit<
     ComponentPropsWithoutRef<C>,
@@ -58,6 +65,7 @@ const BaseLink = forwardRef(function BaseLinkInner(
     disabled = false,
     component,
     to,
+    asChild = false,
     ...props
   }: BaseLinkProps<ElementType>,
   ref: React.Ref<Element>
@@ -110,6 +118,31 @@ const BaseLink = forwardRef(function BaseLinkInner(
     className
   );
 
+  if (asChild) {
+    const child = Children.only(children) as ReactElement<
+      Record<string, unknown> & {
+        className?: string;
+        onClick?: React.MouseEventHandler;
+        tabIndex?: number;
+      }
+    >;
+
+    if (isValidElement(child)) {
+      return cloneElement(child, {
+        ...props,
+        ref,
+        className: cx(style, child.props.className),
+        'data-testid': testId,
+        'aria-disabled': disabled || undefined,
+        tabIndex: disabled ? -1 : (props.tabIndex ?? child.props.tabIndex),
+        ...(to ? { to } : {}),
+        onClick: disabled
+          ? disabledHandleClick
+          : (props.onClick ?? child.props.onClick),
+      });
+    }
+  }
+
   return (
     <Component
       ref={ref}
@@ -117,9 +150,14 @@ const BaseLink = forwardRef(function BaseLinkInner(
       data-testid={testId}
       aria-disabled={disabled || undefined}
       tabIndex={disabled ? -1 : props.tabIndex}
-      href={isAnchor ? (disabled ? undefined : (href ?? to)) : undefined}
       onClick={disabled ? disabledHandleClick : onClick}
-      {...(isAnchor ? {} : to ? { to } : href ? { href } : {})}
+      {...(isAnchor
+        ? { href: disabled ? undefined : (href ?? to) }
+        : to
+          ? { to }
+          : href
+            ? { href }
+            : {})}
       {...rest}
     >
       {children}

package/lib/components/Link/__tests__/link.test.tsx

@@ -1,4 +1,4 @@
-import { describe, expect, test } from 'vitest';
+import { describe, expect, test, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import Link from '../Link';
 import { ThemeContextProvider } from '../../../theme/useTheme';
@@ -57,4 +57,61 @@ describe('Link', () => {
     expect(link.textContent).toBe('linktext');
     expect(link.href).toBe('http://localhost:3000/testlink');
   });
+
+  test('renders a custom link child with asChild', () => {
+    const handleClick = vi.fn((event: React.MouseEvent) =>
+      event.preventDefault()
+    );
+
+    render(
+      <ThemeContextProvider>
+        <Link asChild>
+          <a
+            href='/custom'
+            onClick={handleClick}
+          >
+            Custom link
+          </a>
+        </Link>
+      </ThemeContextProvider>
+    );
+
+    const link = screen.getByRole('link', { name: 'Custom link' });
+    link.click();
+
+    expect(link).toHaveAttribute('href', '/custom');
+    expect(link).toHaveAttribute('data-testid', 'ucl-uikit-link');
+    expect(handleClick).toHaveBeenCalledOnce();
+  });
+
+  test('continues to support the deprecated component and to props', () => {
+    const CustomLink = ({
+      to,
+      children,
+      ...props
+    }: React.AnchorHTMLAttributes<HTMLAnchorElement> & { to?: string }) => (
+      <a
+        href={to}
+        {...props}
+      >
+        {children}
+      </a>
+    );
+
+    render(
+      <ThemeContextProvider>
+        <Link
+          component={CustomLink}
+          to='/legacy'
+        >
+          Legacy link
+        </Link>
+      </ThemeContextProvider>
+    );
+
+    expect(screen.getByRole('link', { name: 'Legacy link' })).toHaveAttribute(
+      'href',
+      '/legacy'
+    );
+  });
 });

package/lib/components/index.ts

@@ -79,6 +79,15 @@ export type { AppHeaderProps } from './AppHeader';
 export { default as Breadcrumbs } from './Breadcrumbs';
 export type { BreadcrumbsProps } from './Breadcrumbs';
 
+export { default as BreadcrumbsNew } from './BreadcrumbsNew';
+export type {
+  BaseBreadcrumbsItemProps,
+  BreadcrumbsCurrentProps,
+  BreadcrumbsLinkProps,
+  BreadcrumbsProps as BreadcrumbsNewProps,
+  BreadcrumbsSize,
+} from './BreadcrumbsNew';
+
 export { default as Checkbox, LabelledCheckbox } from './Checkbox';
 export type { CheckboxProps, LabelledCheckboxProps } from './Checkbox';
 

package/package.json

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