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

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

import { expect, fn } from "storybook/test"

import ButtonLink from "."
import buttonMeta from "../Button/Button.stories"

const meta: Meta<typeof ButtonLink> = {
  title: "Core Components/ButtonLink",
  component: ButtonLink,
  argTypes: {
    onClick: {
      table: {
        type: { summary: "function" },
        defaultValue: { summary: "undefined" },
      },
      description: "Callback function to handle link click events.",
    },
    variant: buttonMeta.argTypes?.variant,
    color: buttonMeta.argTypes?.color,
    size: buttonMeta.argTypes?.size,
    wrapping: buttonMeta.argTypes?.wrapping,
    leadingIconName: buttonMeta.argTypes?.leadingIconName,
    trailingIconName: buttonMeta.argTypes?.trailingIconName,
    fullWidth: buttonMeta.argTypes?.fullWidth,
    href: {
      table: {
        type: { summary: "string" },
        defaultValue: { summary: "undefined" },
      },
      description: "The URL that the link points to.",
    },
  },
}

const globalStoryPropsInverted = {
  backgrounds: { value: "scandicPrimaryDark" },
}
export default meta

type Story = StoryObj<typeof ButtonLink>

export const Default: Story = {
  args: {
    onClick: fn(),
    href: "#",
    children: "Button link",
  },
  play: async ({ canvas }) => {
    const link = await canvas.findByRole("link")
    expect(link).toBeInTheDocument()
  },
}

export const PrimaryLarge: Story = {
  args: {
    ...Default.args,
    variant: "Primary",
    size: "lg",
  },
  play: async ({ canvas }) => {
    const link = await canvas.findByRole("link")
    expect(link).toBeInTheDocument()
  },
}

export const PrimaryMedium: Story = {
  args: {
    ...PrimaryLarge.args,
    size: "md",
  },
  play: async ({ canvas }) => {
    const link = await canvas.findByRole("link")
    expect(link).toBeInTheDocument()
  },
}

export const PrimarySmall: Story = {
  args: {
    ...PrimaryLarge.args,
    size: "sm",
  },
  play: async ({ canvas }) => {
    const link = await canvas.findByRole("link")
    expect(link).toBeInTheDocument()
  },
}

export const PrimaryOnDarkBackground: Story = {
  globals: globalStoryPropsInverted,
  args: {
    ...Default.args,
    variant: "Primary",
    size: "lg",
  },
  play: async ({ canvas }) => {
    const link = await canvas.findByRole("link")
    expect(link).toBeInTheDocument()
  },
}

export const PrimaryInvertedLarge: Story = {
  globals: globalStoryPropsInverted,
  args: {
    ...Default.args,
    variant: "Primary",
    color: "Inverted",
    size: "lg",
  },

  play: async ({ canvas }) => {
    const link = await canvas.findByRole("link")
    expect(link).toBeInTheDocument()
  },
}

export const PrimaryInvertedMedium: Story = {
  globals: globalStoryPropsInverted,
  args: {
    ...PrimaryInvertedLarge.args,
    size: "md",
  },
  play: async ({ canvas }) => {
    const link = await canvas.findByRole("link")
    expect(link).toBeInTheDocument()
  },
}

export const PrimaryInvertedSmall: Story = {
  globals: globalStoryPropsInverted,
  args: {
    ...PrimaryInvertedLarge.args,
    size: "sm",
  },
  play: async ({ canvas }) => {
    const link = await canvas.findByRole("link")
    expect(link).toBeInTheDocument()
  },
}

export const SecondaryLarge: Story = {
  args: {
    ...Default.args,
    variant: "Secondary",
    size: "lg",
  },
  play: async ({ canvas }) => {
    const link = await canvas.findByRole("link")
    expect(link).toBeInTheDocument()
  },
}

export const SecondaryMedium: Story = {
  args: {
    ...SecondaryLarge.args,
    size: "md",
  },
  play: async ({ canvas }) => {
    const link = await canvas.findByRole("link")
    expect(link).toBeInTheDocument()
  },
}

export const SecondarySmall: Story = {
  args: {
    ...SecondaryLarge.args,
    size: "sm",
  },
  play: async ({ canvas }) => {
    const link = await canvas.findByRole("link")
    expect(link).toBeInTheDocument()
  },
}

export const SecondaryInvertedLarge: Story = {
  globals: globalStoryPropsInverted,
  args: {
    ...Default.args,
    variant: "Secondary",
    color: "Inverted",
    size: "lg",
  },
  play: async ({ canvas }) => {
    const link = await canvas.findByRole("link")
    expect(link).toBeInTheDocument()
  },
}

export const SecondaryInvertedMedium: Story = {
  globals: globalStoryPropsInverted,
  args: {
    ...SecondaryInvertedLarge.args,
    size: "md",
  },
  play: async ({ canvas }) => {
    const link = await canvas.findByRole("link")
    expect(link).toBeInTheDocument()
  },
}

export const SecondaryInvertedSmall: Story = {
  globals: globalStoryPropsInverted,
  args: {
    ...SecondaryInvertedLarge.args,
    size: "sm",
  },
  play: async ({ canvas }) => {
    const link = await canvas.findByRole("link")
    expect(link).toBeInTheDocument()
  },
}

export const TertiaryLarge: Story = {
  args: {
    ...Default.args,
    variant: "Tertiary",
    size: "lg",
  },
  play: async ({ canvas }) => {
    const link = await canvas.findByRole("link")
    expect(link).toBeInTheDocument()
  },
}

export const TertiaryMedium: Story = {
  args: {
    ...TertiaryLarge.args,
    size: "md",
  },
  play: async ({ canvas }) => {
    const link = await canvas.findByRole("link")
    expect(link).toBeInTheDocument()
  },
}

export const TertiarySmall: Story = {
  args: {
    ...TertiaryLarge.args,
    size: "sm",
  },
  play: async ({ canvas }) => {
    const link = await canvas.findByRole("link")
    expect(link).toBeInTheDocument()
  },
}

export const TextLarge: Story = {
  args: {
    ...Default.args,
    variant: "Text",
    size: "lg",
  },
  play: async ({ canvas }) => {
    const link = await canvas.findByRole("link")
    expect(link).toBeInTheDocument()
  },
}

export const TextMedium: Story = {
  args: {
    ...TextLarge.args,
    size: "md",
  },
  play: async ({ canvas }) => {
    const link = await canvas.findByRole("link")
    expect(link).toBeInTheDocument()
  },
}

export const TextSmall: Story = {
  args: {
    ...TextLarge.args,
    size: "sm",
  },
  play: async ({ canvas }) => {
    const link = await canvas.findByRole("link")
    expect(link).toBeInTheDocument()
  },
}

export const TextNoWrapping: Story = {
  args: {
    ...TextLarge.args,
    children: "Text button with wrapping false",
    wrapping: false,
  },
  play: async ({ canvas }) => {
    const link = await canvas.findByRole("link")
    expect(link).toBeInTheDocument()
  },
}

export const TextInvertedLarge: Story = {
  globals: globalStoryPropsInverted,
  args: {
    ...Default.args,
    variant: "Text",
    color: "Inverted",
    size: "lg",
  },
  play: async ({ canvas }) => {
    const link = await canvas.findByRole("link")
    expect(link).toBeInTheDocument()
  },
}

export const TextInvertedMedium: Story = {
  globals: globalStoryPropsInverted,
  args: {
    ...TextInvertedLarge.args,
    size: "md",
  },
  play: async ({ canvas }) => {
    const link = await canvas.findByRole("link")
    expect(link).toBeInTheDocument()
  },
}

export const TextInvertedSmall: Story = {
  globals: globalStoryPropsInverted,
  args: {
    ...TextInvertedLarge.args,
    size: "sm",
  },
  play: async ({ canvas }) => {
    const link = await canvas.findByRole("link")
    expect(link).toBeInTheDocument()
  },
}

export const TextWithIcon: Story = {
  args: {
    ...Default.args,
    variant: "Text",
    children: "Text with icon",
    trailingIconName: "chevron_right",
  },
  play: async ({ canvas }) => {
    const link = await canvas.findByRole("link", { name: /Text with icon/i })
    expect(link).toBeInTheDocument()
  },
}

export const TextWithIconInverted: Story = {
  globals: globalStoryPropsInverted,
  args: {
    ...TextWithIcon.args,
    color: "Inverted",
  },
  play: async ({ canvas }) => {
    const link = await canvas.findByRole("link")
    expect(link).toBeInTheDocument()
  },
}