uikit-react-public 0.29.1 → 0.29.2

package/lib/components/BreadcrumbsNew/BreadcrumbsLink.tsx

@@ -1,5 +1,6 @@
+import { Children, isValidElement, ReactNode } from 'react';
 import { css, cx } from '@emotion/css';
-import Link, { LinkProps } from '../Link';
+import StandaloneLink, { StandaloneLinkProps } from '../StandaloneLink';
 import { useTheme } from '../../theme';
 import BaseBreadcrumbsItem, {
   BaseBreadcrumbsItemProps,
@@ -13,7 +14,20 @@ type BreadcrumbsLinkOwnProps = Pick<
 >;
 
 export type BreadcrumbsLinkProps = BreadcrumbsLinkOwnProps &
-  Omit<LinkProps, 'size'>;
+  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,
@@ -24,27 +38,26 @@ const BreadcrumbsLink = ({
   ...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 = cx(
-    NAME,
-    css`
-      color: ${theme.colour.link.primary};
-      text-decoration: none;
-
-      &:visited {
-        color: ${theme.colour.link.primary};
-      }
+  const linkStyle = css`
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0;
 
-      &:hover {
-        text-decoration: underline;
-      }
-
-      &:active {
-        color: ${theme.colour.link.primaryHover};
-      }
-    `,
-    className
-  );
+    &::after {
+      content: attr(data-breadcrumb-label);
+      height: 0;
+      overflow: hidden;
+      visibility: hidden;
+      font-weight: ${semiboldWeight};
+      pointer-events: none;
+    }
+  `;
 
   return (
     <BaseBreadcrumbsItem
@@ -52,14 +65,16 @@ const BreadcrumbsLink = ({
       back={back}
       size={size}
     >
-      <Link
-        className={linkStyle}
+      <StandaloneLink
+        className={cx(NAME, linkStyle, className)}
+        variant='secondary'
         noVisited
         size={size === 'small' ? 'small' : 'default'}
+        data-breadcrumb-label={label}
         {...props}
       >
         {children}
-      </Link>
+      </StandaloneLink>
     </BaseBreadcrumbsItem>
   );
 };

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

@@ -30,6 +30,12 @@ describe('BreadcrumbsNew', () => {
     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'

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);
+  });
 });

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

@@ -2,7 +2,7 @@
 
 exports[`Link > snapshot: no props 1`] = `
 <a
-  class="ucl-uikit-base-link ucl-uikit-standalone-link css-zj0pf"
+  class="ucl-uikit-base-link ucl-uikit-standalone-link css-1x772n"
   data-testid="ucl-uikit-standalone-link"
 >
   test
@@ -11,7 +11,7 @@ exports[`Link > snapshot: no props 1`] = `
 
 exports[`Link > snapshot: testId prop 1`] = `
 <a
-  class="ucl-uikit-base-link ucl-uikit-standalone-link css-zj0pf"
+  class="ucl-uikit-base-link ucl-uikit-standalone-link css-1x772n"
   data-testid="test123"
 >
    testidlink 

package/package.json

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