uikit-react-public 0.28.0 → 0.29.2

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,82 @@
+import { Children, isValidElement, ReactNode } from 'react';
+import { css, cx } from '@emotion/css';
+import StandaloneLink, { StandaloneLinkProps } from '../StandaloneLink';
+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<StandaloneLinkProps, 'size' | 'variant'>;
+
+const getTextContent = (node: ReactNode): string =>
+  Children.toArray(node)
+    .map((child) => {
+      if (typeof child === 'string' || typeof child === 'number') {
+        return String(child);
+      }
+
+      return isValidElement<{ children?: ReactNode }>(child)
+        ? getTextContent(child.props.children)
+        : '';
+    })
+    .join('');
+
+const BreadcrumbsLink = ({
+  separator,
+  back,
+  size = 'medium',
+  className,
+  children,
+  ...props
+}: BreadcrumbsLinkProps) => {
+  const [theme] = useTheme();
+  const label = getTextContent(children);
+  const semiboldWeight =
+    size === 'small'
+      ? theme.typography.body.smSemibold.fontWeight
+      : theme.typography.body.mdSemibold.fontWeight;
+
+  const linkStyle = css`
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0;
+
+    &::after {
+      content: attr(data-breadcrumb-label);
+      height: 0;
+      overflow: hidden;
+      visibility: hidden;
+      font-weight: ${semiboldWeight};
+      pointer-events: none;
+    }
+  `;
+
+  return (
+    <BaseBreadcrumbsItem
+      separator={separator}
+      back={back}
+      size={size}
+    >
+      <StandaloneLink
+        className={cx(NAME, linkStyle, className)}
+        variant='secondary'
+        noVisited
+        size={size === 'small' ? 'small' : 'default'}
+        data-breadcrumb-label={label}
+        {...props}
+      >
+        {children}
+      </StandaloneLink>
+    </BaseBreadcrumbsItem>
+  );
+};
+
+export default BreadcrumbsLink;

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

@@ -0,0 +1,59 @@
+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');
+    const parentLink = within(lists[0]).getByRole('link', {
+      name: 'Parent',
+      hidden: true,
+    });
+    expect(parentLink).toHaveClass('ucl-uikit-standalone-link');
+    expect(parentLink).toHaveAttribute('data-breadcrumb-label', '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/StandaloneLink/StandaloneLink.tsx

@@ -1,8 +1,10 @@
 import React, {
+  Children,
   cloneElement,
   ComponentPropsWithoutRef,
   ElementType,
   forwardRef,
+  isValidElement,
   ReactElement,
 } from 'react';
 import { css, cx } from '@emotion/css';
@@ -41,6 +43,8 @@ const StandaloneLink = forwardRef(function StandaloneLinkInner(
     testId = NAME,
     className,
     children,
+    asChild = false,
+    size = 'default',
     ...props
   }: StandaloneLinkProps<ElementType>,
   ref: React.Ref<Element>
@@ -52,11 +56,22 @@ const StandaloneLink = forwardRef(function StandaloneLinkInner(
   }[variant];
 
   const [theme] = useTheme();
+  const {
+    typography: {
+      body: { md, sm },
+    },
+  } = theme;
+  const typography = size === 'small' ? sm : md;
 
   const baseStyle = css`
     display: inline-flex;
     align-items: center;
     gap: 8px;
+    font-family: ${typography.fontFamily};
+    font-feature-settings: ${typography.fontSettings};
+    font-size: ${typography.fontSize}px;
+    font-weight: ${typography.fontWeight};
+    line-height: ${typography.lineHeight}%;
     text-decoration: none;
   `;
 
@@ -178,21 +193,39 @@ const StandaloneLink = forwardRef(function StandaloneLinkInner(
     className
   );
 
+  const renderContent = (content: React.ReactNode) => (
+    <>
+      {icon &&
+        iconPosition === 'left' &&
+        cloneElement(icon, { size: iconSize })}
+      {content}
+      {icon &&
+        iconPosition === 'right' &&
+        cloneElement(icon, { size: iconSize })}
+    </>
+  );
+
+  const content = asChild
+    ? (() => {
+        const child = Children.only(children);
+
+        return isValidElement<{ children?: React.ReactNode }>(child)
+          ? cloneElement(child, {}, renderContent(child.props.children))
+          : child;
+      })()
+    : renderContent(children);
+
   return (
     <BaseLink
       ref={ref}
       className={style}
       testId={testId}
       disabled={disabled}
+      asChild={asChild}
+      size={size}
       {...props}
     >
-      {icon &&
-        iconPosition === 'left' &&
-        cloneElement(icon, { size: iconSize })}
-      {children}
-      {icon &&
-        iconPosition === 'right' &&
-        cloneElement(icon, { size: iconSize })}
+      {content}
     </BaseLink>
   );
 }) as unknown as StandaloneLinkComponent;

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

@@ -2,6 +2,7 @@ import { describe, expect, test } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import StandaloneLink from '../StandaloneLink';
 import { ThemeContextProvider } from '../../../theme/useTheme';
+import Text from '../../Text';
 
 describe('Link', () => {
   // Snapshot tests
@@ -54,4 +55,47 @@ describe('Link', () => {
     expect(link.textContent).toBe('linktext');
     expect(link.href).toBe('http://localhost:3000/testlink');
   });
+
+  test('renders a custom link child with asChild', () => {
+    render(
+      <ThemeContextProvider>
+        <StandaloneLink asChild>
+          <a href='/testlink'>linktext</a>
+        </StandaloneLink>
+      </ThemeContextProvider>
+    );
+
+    const link = screen.getByRole('link');
+
+    expect(link).toHaveAttribute('href', '/testlink');
+    expect(link).toHaveClass('ucl-uikit-standalone-link');
+    expect(link).toHaveTextContent('linktext');
+  });
+
+  test.each([
+    { size: 'default' as const, textLevel: 'md' as const },
+    { size: 'small' as const, textLevel: 'sm' as const },
+  ])('uses the same typography as $textLevel Text', ({ size, textLevel }) => {
+    render(
+      <ThemeContextProvider>
+        <StandaloneLink
+          variant='secondary'
+          size={size}
+          href='/testlink'
+        >
+          linktext
+        </StandaloneLink>
+        <Text level={textLevel}>text</Text>
+      </ThemeContextProvider>
+    );
+
+    const linkStyle = getComputedStyle(screen.getByRole('link'));
+    const textStyle = getComputedStyle(screen.getByText('text'));
+
+    expect(linkStyle.fontFamily).toBe(textStyle.fontFamily);
+    expect(linkStyle.fontFeatureSettings).toBe(textStyle.fontFeatureSettings);
+    expect(linkStyle.fontSize).toBe(textStyle.fontSize);
+    expect(linkStyle.fontWeight).toBe(textStyle.fontWeight);
+    expect(linkStyle.lineHeight).toBe(textStyle.lineHeight);
+  });
 });