feat: add asChild prop to Link and Slot utility component

Add Slot component that merges parent props onto a child element,
enabling the asChild pattern for polymorphic rendering. Link now
supports asChild for router integration (React Router, Next.js, etc.)
without needing a polymorphic `as` prop.

Author: pomfrida

packages/eds-core-react/src/components/next/Link/Link.stories.tsx

@@ -50,6 +50,22 @@ export const Standalone: Story = {
   ),
 }
 
+export const AsChild: Story = {
+  render: () => {
+    const CustomLink = (
+      props: React.AnchorHTMLAttributes<HTMLAnchorElement>,
+    ) => (
+      // eslint-disable-next-line jsx-a11y/anchor-has-content
+      <a {...props} data-custom-router />
+    )
+    return (
+      <Link asChild>
+        <CustomLink href="/my-page">Router link</CustomLink>
+      </Link>
+    )
+  },
+}
+
 export const ExternalLink: Story = {
   render: () => (
     <Link

packages/eds-core-react/src/components/next/Link/Link.test.tsx

@@ -128,6 +128,55 @@ describe('Link (next)', () => {
     })
   })
 
+  describe('asChild', () => {
+    it('renders child element instead of <a>', () => {
+      render(
+        <Link asChild>
+          <button type="button">Link as button</button>
+        </Link>,
+      )
+      expect(screen.getByRole('button')).toBeInTheDocument()
+      expect(screen.getByRole('button')).toHaveTextContent('Link as button')
+      expect(screen.queryByRole('link')).not.toBeInTheDocument()
+    })
+
+    it('merges className onto child', () => {
+      render(
+        <Link asChild className="custom">
+          <button type="button" className="child-class">
+            Link
+          </button>
+        </Link>,
+      )
+      expect(screen.getByRole('button')).toHaveClass(
+        'eds-link',
+        'custom',
+        'child-class',
+      )
+    })
+
+    it('merges data attributes onto child', () => {
+      render(
+        <Link asChild variant="standalone">
+          <a href="/page">Link</a>
+        </Link>,
+      )
+      expect(screen.getByRole('link')).toHaveAttribute(
+        'data-variant',
+        'standalone',
+      )
+    })
+
+    it('preserves child href', () => {
+      render(
+        <Link asChild>
+          <a href="/my-route">Router link</a>
+        </Link>,
+      )
+      expect(screen.getByRole('link')).toHaveAttribute('href', '/my-route')
+    })
+  })
+
   describe('Accessibility', () => {
     it('has no accessibility violations (inline)', async () => {
       const { container } = render(<Link href="#">Link</Link>)

packages/eds-core-react/src/components/next/Link/Link.tsx

@@ -1,26 +1,29 @@
 import { forwardRef } from 'react'
 import type { LinkProps } from './Link.types'
+import { Slot } from '../Slot'
 
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
-  { variant = 'inline', className, children, ...rest },
+  { variant = 'inline', asChild, className, children, ...rest },
   ref,
 ) {
   const classes = ['eds-link', className].filter(Boolean).join(' ')
 
-  return (
-    <a
-      ref={ref}
-      className={classes}
-      data-variant={variant}
-      data-color-appearance="info"
-      data-font-family={variant === 'standalone' ? 'ui' : undefined}
-      data-font-size={variant === 'standalone' ? 'md' : undefined}
-      data-line-height={variant === 'standalone' ? 'squished' : undefined}
-      {...rest}
-    >
-      {children}
-    </a>
-  )
+  const sharedProps = {
+    ref,
+    className: classes,
+    'data-variant': variant,
+    'data-color-appearance': 'info',
+    'data-font-family': variant === 'standalone' ? 'ui' : undefined,
+    'data-font-size': variant === 'standalone' ? 'md' : undefined,
+    'data-line-height': variant === 'standalone' ? 'squished' : undefined,
+    ...rest,
+  }
+
+  if (asChild) {
+    return <Slot {...sharedProps}>{children}</Slot>
+  }
+
+  return <a {...sharedProps}>{children}</a>
 })
 
 Link.displayName = 'Link'

packages/eds-core-react/src/components/next/Link/Link.types.ts

@@ -4,10 +4,14 @@ export type LinkVariant = 'inline' | 'standalone'
 
 export type LinkProps = {
   /** Link destination URL */
-  href: string
+  href?: string
   /** Visual variant
    * - `inline` (default): used within text, inherits surrounding font size
    * - `standalone`: used on its own with flex layout, compose icons as children
    */
   variant?: LinkVariant
+  /** Render as child element instead of `<a>`, merging Link styles onto the child.
+   * Useful for integrating with router links (React Router, Next.js, etc.)
+   */
+  asChild?: boolean
 } & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>

packages/eds-core-react/src/components/next/Slot/Slot.tsx

@@ -0,0 +1,63 @@
+import {
+  forwardRef,
+  isValidElement,
+  cloneElement,
+  type ReactElement,
+} from 'react'
+import type { SlotProps } from './Slot.types'
+
+function mergeClassNames(...classNames: (string | undefined)[]) {
+  return classNames.filter(Boolean).join(' ')
+}
+
+function mergeProps(
+  slotProps: Record<string, unknown>,
+  childProps: Record<string, unknown>,
+) {
+  const merged: Record<string, unknown> = { ...childProps }
+
+  for (const key of Object.keys(slotProps)) {
+    const slotValue = slotProps[key]
+    const childValue = childProps[key]
+
+    if (key === 'className') {
+      merged[key] = mergeClassNames(
+        slotValue as string | undefined,
+        childValue as string | undefined,
+      )
+    } else if (key === 'style') {
+      merged[key] = { ...(slotValue as object), ...(childValue as object) }
+    } else if (
+      typeof slotValue === 'function' &&
+      typeof childValue === 'function'
+    ) {
+      merged[key] = (...args: unknown[]) => {
+        ;(childValue as (...a: unknown[]) => void)(...args)
+        ;(slotValue as (...a: unknown[]) => void)(...args)
+      }
+    } else if (slotValue !== undefined) {
+      merged[key] = slotValue
+    }
+  }
+
+  return merged
+}
+
+export const Slot = forwardRef<HTMLElement, SlotProps>(function Slot(
+  { children, ...slotProps },
+  ref,
+) {
+  if (!isValidElement(children)) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn('Slot: asChild requires a single valid React element child')
+    }
+    return null
+  }
+
+  const child = children as ReactElement<Record<string, unknown>>
+  const merged = mergeProps(slotProps, child.props)
+
+  return cloneElement(child, { ...merged, ref })
+})
+
+Slot.displayName = 'Slot'

packages/eds-core-react/src/components/next/Slot/Slot.types.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes, ReactNode } from 'react'
+
+export type SlotProps = {
+  children: ReactNode
+} & HTMLAttributes<HTMLElement>

packages/eds-core-react/src/components/next/Slot/index.ts

@@ -0,0 +1,2 @@
+export { Slot } from './Slot'
+export type { SlotProps } from './Slot.types'

packages/eds-core-react/src/components/next/index.ts

@@ -35,3 +35,6 @@ export type { LinkProps, LinkVariant } from './Link'
 
 export { Search } from './Search'
 export type { SearchProps } from './Search'
+
+export { Slot } from './Slot'
+export type { SlotProps } from './Slot'