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

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

import { expect } from 'storybook/test'

import { TextLink } from '.'
import { MaterialIcon } from '../Icons/MaterialIcon'
import { Typography } from '../Typography'
import { config } from './variants'

const meta: Meta<typeof TextLink> = {
  title: 'Core Components/TextLink',
  component: TextLink,
  argTypes: {
    theme: {
      control: 'select',
      options: Object.keys(config.variants.theme),
      default: config.defaultVariants.theme,
    },
    isInline: {
      control: 'boolean',
      default: false,
      description:
        'Should be used when the link is placed inside a text block, removes the padding.',
    },
    isDisabled: {
      control: 'boolean',
      default: false,
      description: 'Disables the link and makes it non-interactive.',
    },
  },
}

export default meta

type Story = StoryObj<typeof TextLink>

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

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

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

export const WithIcon: Story = {
  args: {
    ...Default.args,
  },
  render: (args) => (
    <TextLink {...args}>
      Link with icon
      <MaterialIcon icon="arrow_forward" size={24} color="CurrentColor" />
    </TextLink>
  ),
  play: async ({ canvasElement }) => {
    const link = canvasElement.querySelector('a')
    if (!link) throw new Error('Link not found')
    expect(link).toBeInTheDocument()
  },
}

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

export const SmallWithIcon: Story = {
  args: {
    ...Default.args,
    typography: 'Link/sm',
  },
  render: (args) => (
    <TextLink {...args}>
      Small link with icon
      <MaterialIcon icon="arrow_forward" size={20} color="CurrentColor" />
    </TextLink>
  ),
  play: async ({ canvasElement }) => {
    const link = canvasElement.querySelector('a')
    if (!link) throw new Error('Link not found')
    expect(link).toBeInTheDocument()
  },
}

export const Inline: Story = {
  args: {
    ...Default.args,
    isInline: true,
  },
  render: (args) => (
    <Typography variant="Body/Paragraph/mdRegular">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.{' '}
        <TextLink {...args}>Inline link</TextLink> Curabitur vitae neque non
        ipsum efficitur hendrerit at ut nulla. Cras in tellus et ligula posuere
        ullamcorper. Praesent pulvinar rutrum metus ut gravida.
      </p>
    </Typography>
  ),
  play: async ({ canvasElement }) => {
    const link = canvasElement.querySelector('a')
    if (!link) throw new Error('Link not found')
    expect(link).toBeInTheDocument()
  },
}