chore: convert stories to CSF3 and add data-font-size tests

Author: pomfrida

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

@@ -1,5 +1,5 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import { Link, type LinkProps } from '.'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Link } from '.'
 import { Icon } from '../Icon'
 import { external_link, arrow_forward } from '@equinor/eds-icons'
 
@@ -24,33 +24,34 @@ import { Link } from '@equinor/eds-core-react/next'
 
 export default meta
 
-export const Introduction: StoryFn<LinkProps> = (args) => {
-  return (
-    <Link href="#" {...args}>
-      Link
-    </Link>
-  )
+type Story = StoryObj<typeof Link>
+
+export const Introduction: Story = {
+  args: {
+    href: '#',
+    children: 'Link',
+  },
 }
 
-export const Inline: StoryFn<LinkProps> = () => {
-  return (
+export const Inline: Story = {
+  render: () => (
     <p>
       This is a paragraph with an <Link href="#">inline link</Link> embedded in
       text.
     </p>
-  )
+  ),
 }
 
-export const Standalone: StoryFn<LinkProps> = () => {
-  return (
+export const Standalone: Story = {
+  render: () => (
     <Link href="#" variant="standalone">
       Standalone link
     </Link>
-  )
+  ),
 }
 
-export const WithIcons: StoryFn<LinkProps> = () => {
-  return (
+export const WithIcons: Story = {
+  render: () => (
     <div
       style={{
         display: 'flex',
@@ -73,5 +74,5 @@ export const WithIcons: StoryFn<LinkProps> = () => {
         <Icon data={external_link} />
       </Link>
     </div>
-  )
+  ),
 }

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

@@ -81,6 +81,20 @@ describe('Link (next)', () => {
         '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')
+    })
   })
 
   describe('Accessibility', () => {