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 ({ canvas }) => {
    const link = await canvas.findByRole("link")
    expect(link).toBeInTheDocument()
  },
}

export const Inverted: Story = {
  args: {
    ...Default.args,
    theme: "Inverted",
  },
  render: (args) => <TextLink {...args}>Inverted link</TextLink>,
  play: async ({ canvas }) => {
    const link = await canvas.findByRole("link")
    expect(link).toBeInTheDocument()
  },
}

export const Disabled: Story = {
  args: {
    ...Default.args,
    isDisabled: true,
  },
  render: (args) => <TextLink {...args}>Disabled link</TextLink>,
  play: async ({ canvas }) => {
    const link = await canvas.findByRole("link")
    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 ({ canvas }) => {
    const link = await canvas.findByRole("link")
    expect(link).toBeInTheDocument()
  },
}

export const Small: Story = {
  args: {
    ...Default.args,
    typography: "Link/sm",
  },
  render: (args) => <TextLink {...args}>Small link</TextLink>,
  play: async ({ canvas }) => {
    const link = await canvas.findByRole("link")
    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 ({ canvas }) => {
    const link = await canvas.findByRole("link")
    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 ({ canvas }) => {
    const link = await canvas.findByRole("link")
    expect(link).toBeInTheDocument()
  },
}