feat: add Link component to next

packages/eds-core-react/.storybook/preview.css

@@ -9,6 +9,7 @@ legend {
 /* Storybook color scheme wrapper */
 .eds-storybook-wrapper {
   background-color: var(--eds-color-bg-neutral-surface);
+  color: var(--eds-color-text-strong);
   padding: 1rem;
   min-height: 100%;
 }

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

@@ -0,0 +1,20 @@
+import figma from '@figma/code-connect'
+import { Link } from '.'
+
+figma.connect(
+  Link,
+  'https://www.figma.com/design/dz0XQdc5j7AAtjXr1gTfVR?node-id=2010:2899',
+  {
+    props: {
+      variant: figma.enum('.Type', {
+        Inline: 'inline',
+        Standalone: 'standalone',
+      }),
+    },
+    example: ({ variant }) => (
+      <Link href="#" variant={variant}>
+        Link
+      </Link>
+    ),
+  },
+)

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

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Link } from '.'
+import { Icon } from '../Icon'
+import { external_link, arrow_forward } from '@equinor/eds-icons'
+
+const meta: Meta<typeof Link> = {
+  title: 'EDS 2.0 (beta)/Link',
+  component: Link,
+  tags: ['beta'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+⚠️ **Beta Component** - This component is under active development.
+
+\`\`\`tsx
+import { Link } from '@equinor/eds-core-react/next'
+\`\`\`
+        `,
+      },
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Link>
+
+export const Introduction: Story = {
+  args: {
+    href: '#',
+    children: 'Link',
+  },
+}
+
+export const Inline: Story = {
+  render: () => (
+    <p>
+      This is a paragraph with an <Link href="#">inline link</Link> embedded in
+      text.
+    </p>
+  ),
+}
+
+export const Standalone: Story = {
+  render: () => (
+    <Link href="#" variant="standalone">
+      Standalone link
+    </Link>
+  ),
+}
+
+export const WithIcons: Story = {
+  render: () => (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        gap: '16px',
+      }}
+    >
+      <Link href="#" variant="standalone">
+        <Icon data={arrow_forward} />
+        Link with start icon
+      </Link>
+      <Link href="#" variant="standalone">
+        Link with end icon
+        <Icon data={external_link} />
+      </Link>
+      <Link href="#" variant="standalone">
+        <Icon data={arrow_forward} />
+        Link with both icons
+        <Icon data={external_link} />
+      </Link>
+    </div>
+  ),
+}
+
+export const ExternalLink: Story = {
+  render: () => (
+    <Link
+      href="https://example.com"
+      variant="standalone"
+      target="_blank"
+      rel="noreferrer"
+    >
+      External link
+      <Icon data={external_link} />
+    </Link>
+  ),
+}

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

@@ -0,0 +1,158 @@
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { axe } from 'jest-axe'
+import { Link } from '.'
+
+describe('Link (next)', () => {
+  describe('Rendering', () => {
+    it('renders with default props', () => {
+      render(<Link href="#">Click me</Link>)
+      expect(screen.getByRole('link')).toBeInTheDocument()
+      expect(screen.getByRole('link')).toHaveTextContent('Click me')
+    })
+
+    it('renders inline variant by default', () => {
+      render(
+        <Link href="#" data-testid="eds-link">
+          Link
+        </Link>,
+      )
+      expect(screen.getByTestId('eds-link')).toHaveAttribute(
+        'data-variant',
+        'inline',
+      )
+    })
+
+    it('renders standalone variant', () => {
+      render(
+        <Link href="#" variant="standalone" data-testid="eds-link">
+          Link
+        </Link>,
+      )
+      expect(screen.getByTestId('eds-link')).toHaveAttribute(
+        'data-variant',
+        'standalone',
+      )
+    })
+
+    it('renders children as composition', () => {
+      render(
+        <Link href="#" variant="standalone">
+          <span data-testid="icon">icon</span>
+          Link text
+        </Link>,
+      )
+      expect(screen.getByTestId('icon')).toBeInTheDocument()
+      expect(screen.getByRole('link')).toHaveTextContent('Link text')
+    })
+
+    it('applies custom className', () => {
+      render(
+        <Link href="#" data-testid="eds-link" className="custom">
+          Link
+        </Link>,
+      )
+      expect(screen.getByTestId('eds-link')).toHaveClass('eds-link', 'custom')
+    })
+
+    it('forwards ref', () => {
+      const ref = { current: null as HTMLAnchorElement | null }
+      render(
+        <Link ref={ref} href="#">
+          Link
+        </Link>,
+      )
+      expect(ref.current).toBeInstanceOf(HTMLAnchorElement)
+    })
+
+    it('spreads additional props', () => {
+      render(
+        <Link href="#" data-testid="test" data-custom="value">
+          Link
+        </Link>,
+      )
+      expect(screen.getByTestId('test')).toHaveAttribute('data-custom', 'value')
+    })
+
+    it('sets href attribute', () => {
+      render(<Link href="https://example.com">Link</Link>)
+      expect(screen.getByRole('link')).toHaveAttribute(
+        'href',
+        'https://example.com',
+      )
+    })
+
+    it('sets data-font-size for standalone variant', () => {
+      render(
+        <Link href="#" variant="standalone">
+          Link
+        </Link>,
+      )
+      expect(screen.getByRole('link')).toHaveAttribute('data-font-size', 'md')
+    })
+
+    it('does not set data-font-size for inline variant', () => {
+      render(<Link href="#">Link</Link>)
+      expect(screen.getByRole('link')).not.toHaveAttribute('data-font-size')
+    })
+
+    it('sets data-font-family for standalone variant', () => {
+      render(
+        <Link href="#" variant="standalone">
+          Link
+        </Link>,
+      )
+      expect(screen.getByRole('link')).toHaveAttribute('data-font-family', 'ui')
+    })
+
+    it('does not set data-font-family for inline variant', () => {
+      render(<Link href="#">Link</Link>)
+      expect(screen.getByRole('link')).not.toHaveAttribute('data-font-family')
+    })
+
+    it('sets data-line-height for standalone variant', () => {
+      render(
+        <Link href="#" variant="standalone">
+          Link
+        </Link>,
+      )
+      expect(screen.getByRole('link')).toHaveAttribute(
+        'data-line-height',
+        'squished',
+      )
+    })
+
+    it('does not set data-line-height for inline variant', () => {
+      render(<Link href="#">Link</Link>)
+      expect(screen.getByRole('link')).not.toHaveAttribute('data-line-height')
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('has no accessibility violations (inline)', async () => {
+      const { container } = render(<Link href="#">Link</Link>)
+      expect(await axe(container)).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations (standalone)', async () => {
+      const { container } = render(
+        <Link href="#" variant="standalone">
+          Link
+        </Link>,
+      )
+      expect(await axe(container)).toHaveNoViolations()
+    })
+
+    it('supports aria attributes', () => {
+      render(
+        <Link href="#" aria-label="Custom label">
+          Link
+        </Link>,
+      )
+      expect(screen.getByRole('link')).toHaveAttribute(
+        'aria-label',
+        'Custom label',
+      )
+    })
+  })
+})

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

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

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

@@ -0,0 +1,13 @@
+import type { AnchorHTMLAttributes } from 'react'
+
+export type LinkVariant = 'inline' | 'standalone'
+
+export type LinkProps = {
+  /** Link destination URL */
+  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
+} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>

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

@@ -0,0 +1,2 @@
+export { Link } from './Link'
+export type { LinkProps, LinkVariant } from './Link.types'

packages/eds-core-react/src/components/next/Link/link.css

@@ -0,0 +1,56 @@
+@layer eds-components {
+  .eds-link {
+    color: var(--eds-color-text-link);
+    text-decoration: underline;
+    text-decoration-thickness: var(--eds-sizing-stroke-thin);
+    text-underline-offset: var(--eds-spacing-vertical-4xs);
+
+    transition: color 150ms ease-in-out;
+  }
+
+  .eds-link:hover {
+    color: var(--eds-color-text-strong);
+  }
+
+  .eds-link:focus-visible {
+    border-radius: var(--eds-spacing-border-radius-rounded);
+    color: var(--eds-color-text-strong);
+    outline: var(--eds-sizing-stroke-thin) solid var(--eds-color-border-focus);
+    outline-offset: var(--eds-spacing-vertical-3xs);
+  }
+
+  /* Standalone variant: flex layout for icon + text */
+  .eds-link[data-variant='standalone'] {
+    position: relative;
+
+    gap: var(--eds-typography-gap-horizontal);
+    align-items: center;
+
+    border-bottom: var(--eds-sizing-stroke-thin) solid currentcolor;
+
+    text-decoration: none;
+  }
+
+  /* Use pseudo-element for focus ring so it can have border-radius
+     while border-bottom stays straight */
+  .eds-link[data-variant='standalone']:focus-visible {
+    border-radius: 0;
+    outline: none;
+  }
+
+  .eds-link[data-variant='standalone']:focus-visible::after {
+    pointer-events: none;
+    content: '';
+
+    position: absolute;
+    inset: calc(var(--eds-spacing-vertical-3xs) * -1);
+
+    border: var(--eds-sizing-stroke-thin) solid var(--eds-color-border-focus);
+    border-radius: var(--eds-spacing-border-radius-rounded);
+  }
+}
+
+/* Outside @layer to override typography.css [data-font-family] { display: block } */
+.eds-link[data-variant='standalone'] {
+  display: inline-flex;
+}

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

@@ -55,14 +55,6 @@ describe('TextField (Next EDS 2.0)', () => {
     })
   })
 
-  describe('CSS classes', () => {
-    it('Has eds-text-field class on root element', () => {
-      const { container } = render(<TextField label="Label" />)
-      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-      expect(container.querySelector('.eds-text-field')).toBeInTheDocument()
-    })
-  })
-
   describe('Basic functionality', () => {
     it('Renders label correctly', () => {
       render(<TextField label="Test Label" />)