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

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

import { expect } from 'storybook/test'

import ButtonLink from '.'
import { config as buttonConfig } from '../Button/variants'
import { MaterialIcon } from '../Icons/MaterialIcon'
import { config as typographyConfig } from '../Typography/variants'

const meta: Meta<typeof ButtonLink> = {
  title: 'Components/ButtonLink',
  component: ButtonLink,
  argTypes: {
    onClick: {
      table: {
        disable: true,
      },
    },
    typography: {
      control: 'select',
      options: Object.keys(typographyConfig.variants.variant),
    },
    variant: {
      control: 'select',
      options: Object.keys(buttonConfig.variants.variant),
      default: 'Primary',
      table: {
        defaultValue: {
          summary: buttonConfig.defaultVariants.variant,
        },
        type: {
          summary: 'string',
          detail: Object.keys(buttonConfig.variants.variant).join(' | '),
        },
      },
    },
    color: {
      control: 'select',
      options: Object.keys(buttonConfig.variants.color),
      table: {
        type: {
          summary: 'string',
          detail: Object.keys(buttonConfig.variants.color).join(' | '),
        },
        defaultValue: {
          summary: buttonConfig.defaultVariants.color,
        },
      },
    },
    size: {
      control: 'select',
      options: Object.keys(buttonConfig.variants.size),
      table: {
        type: {
          summary: 'string',
          detail: Object.keys(buttonConfig.variants.size).join(' | '),
        },
        defaultValue: {
          summary: buttonConfig.defaultVariants.size,
        },
      },
    },
    wrapping: {
      control: 'radio',
      options: Object.keys(buttonConfig.variants.wrapping),
      type: 'boolean',
      table: {
        defaultValue: {
          summary: buttonConfig.defaultVariants.wrapping.toString(),
        },
      },
      description:
        'Only applies to variant `Text`. If `false`, the button will use smaller padding.',
    },
  },
}

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

type Story = StoryObj<typeof ButtonLink>

export const Default: Story = {
  args: {
    onClick: (event) => {
      event.preventDefault()
      alert('Button link clicked!')
    },
    href: '#',
    children: 'Button link',
    typography: 'Body/Paragraph/mdBold',
  },
  play: async ({ canvasElement }) => {
    const link = canvasElement.querySelector('a')
    if (!link) throw new Error('Link not found')
    expect(link).toBeInTheDocument()
  },
}

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

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

export const PrimarySmall: Story = {
  args: {
    ...PrimaryLarge.args,
    typography: 'Body/Supporting text (caption)/smBold',
    size: 'Small',
  },
  play: async ({ canvasElement }) => {
    const link = canvasElement.querySelector('a')
    if (!link) throw new Error('Link not found')
    expect(link).toBeInTheDocument()
  },
}

export const PrimaryOnDarkBackground: Story = {
  globals: globalStoryPropsInverted,
  args: {
    ...Default.args,
    variant: 'Primary',
    size: 'Large',
  },
  play: async ({ canvasElement }) => {
    const link = canvasElement.querySelector('a')
    if (!link) throw new Error('Link not found')
    expect(link).toBeInTheDocument()
  },
}

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

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

export const PrimaryInvertedMedium: Story = {
  globals: globalStoryPropsInverted,
  args: {
    ...PrimaryInvertedLarge.args,
    size: 'Medium',
  },

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

export const PrimaryInvertedSmall: Story = {
  globals: globalStoryPropsInverted,
  args: {
    ...PrimaryInvertedLarge.args,
    typography: 'Body/Supporting text (caption)/smBold',
    size: 'Small',
  },

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

export const SecondaryLarge: Story = {
  args: {
    ...Default.args,
    variant: 'Secondary',
    size: 'Large',
  },

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

export const SecondaryMedium: Story = {
  args: {
    ...SecondaryLarge.args,
    size: 'Medium',
  },

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

export const SecondarySmall: Story = {
  args: {
    ...SecondaryLarge.args,
    typography: 'Body/Supporting text (caption)/smBold',
    size: 'Small',
  },

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

export const SecondaryInvertedLarge: Story = {
  globals: globalStoryPropsInverted,
  args: {
    ...Default.args,
    variant: 'Secondary',
    color: 'Inverted',
    size: 'Large',
  },

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

export const SecondaryInvertedMedium: Story = {
  globals: globalStoryPropsInverted,
  args: {
    ...SecondaryInvertedLarge.args,
    size: 'Medium',
  },

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

export const SecondaryInvertedSmall: Story = {
  globals: globalStoryPropsInverted,
  args: {
    ...SecondaryInvertedLarge.args,
    typography: 'Body/Supporting text (caption)/smBold',
    size: 'Small',
  },

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

export const TertiaryLarge: Story = {
  args: {
    ...Default.args,
    variant: 'Tertiary',
    size: 'Large',
  },

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

export const TertiaryMedium: Story = {
  args: {
    ...TertiaryLarge.args,
    size: 'Medium',
  },

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

export const TertiarySmall: Story = {
  args: {
    ...TertiaryLarge.args,
    typography: 'Body/Supporting text (caption)/smBold',
    size: 'Small',
  },

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

export const TextLarge: Story = {
  args: {
    ...Default.args,
    variant: 'Text',
    size: 'Large',
  },

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

export const TextMedium: Story = {
  args: {
    ...TextLarge.args,
    size: 'Medium',
  },

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

export const TextSmall: Story = {
  args: {
    ...TextLarge.args,
    typography: 'Body/Supporting text (caption)/smBold',
    size: 'Small',
  },

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

export const TextNoWrapping: Story = {
  args: {
    ...TextLarge.args,
    children: 'Text button with wrapping false',
    wrapping: false,
  },
  play: async ({ canvasElement }) => {
    const link = canvasElement.querySelector('a')
    if (!link) throw new Error('Link not found')
    expect(link).toBeInTheDocument()
  },
}

export const TextInvertedLarge: Story = {
  globals: globalStoryPropsInverted,
  args: {
    ...Default.args,
    variant: 'Text',
    color: 'Inverted',
    size: 'Large',
  },

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

export const TextInvertedMedium: Story = {
  globals: globalStoryPropsInverted,
  args: {
    ...TextInvertedLarge.args,
    size: 'Medium',
  },

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

export const TextInvertedSmall: Story = {
  globals: globalStoryPropsInverted,
  args: {
    ...TextInvertedLarge.args,
    typography: 'Body/Supporting text (caption)/smBold',
    size: 'Small',
  },

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

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

export const TextWithIconInverted: Story = {
  globals: globalStoryPropsInverted,
  args: {
    ...TextWithIcon.args,
    color: 'Inverted',
    children: (
      <>
        Text with icon
        <MaterialIcon icon="chevron_right" size={24} color="CurrentColor" />
      </>
    ),
  },
  play: async ({ canvasElement }) => {
    const link = canvasElement.querySelector('a')
    if (!link) throw new Error('Link not found')
    expect(link).toBeInTheDocument()
  },
}