web/packages/design-system/lib/components/Link/Link.stories.tsx

import type { Meta, StoryObj } from '@storybook/nextjs-vite'

import { expect } from 'storybook/test'
import Link from '.'

const meta: Meta<typeof Link> = {
  title: 'Components/Link',
  component: Link,
  argTypes: {
    size: {
      control: 'select',
      options: ['small', 'regular', 'tiny', 'none'],
    },
    scroll: {
      table: {
        disable: true,
      },
    },
    prefetch: {
      table: {
        disable: true,
      },
    },
    partialMatch: {
      table: {
        disable: true,
      },
    },
  },
}

export default meta

type Story = StoryObj<typeof Link>

export const Default: Story = {
  args: {
    active: false,
    href: 'https://www.scandichotels.com/en',
  },
  render: (args) => <Link {...args}>{args.href}</Link>,
  play: async ({ canvasElement }) => {
    const link = canvasElement.querySelector('a')
    if (!link) throw new Error('Link not found')
    expect(link).toBeInTheDocument()
  },
}

export const Focused: Story = {
  args: {
    ...Default.args,
  },
  render: Default.render,
  play: async ({ canvasElement }) => {
    const link = canvasElement.querySelector('a')
    if (!link) throw new Error('Link not found')
    expect(link).toBeInTheDocument()

    expect(link).not.toHaveFocus()
    let styles = getComputedStyle(link)
    expect(styles.outlineStyle).toBe('none')
    expect(parseFloat(styles.outlineWidth)).toBe(0)

    link?.focus()

    expect(link).toHaveFocus()
    styles = getComputedStyle(link)
    expect(styles.outlineStyle).not.toBe('none')
    expect(parseFloat(styles.outlineWidth)).toBeGreaterThan(0)
  },
}