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

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

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

import { BackToTopButton } from '.'
import { config as backToTopButtonConfig } from './variants'

const meta: Meta<typeof BackToTopButton> = {
  title: 'Patterns/BackToTopButton',
  component: BackToTopButton,
  argTypes: {
    onPress: {
      table: {
        disable: true,
      },
    },
    position: {
      control: 'select',
      options: Object.keys(backToTopButtonConfig.variants.position),
      table: {
        type: {
          summary: 'string',
          detail: Object.keys(backToTopButtonConfig.variants.position).join(
            ' | '
          ),
        },
        defaultValue: {
          summary: backToTopButtonConfig.defaultVariants.position,
        },
      },
    },
    label: {
      control: 'text',
    },
  },
}

export default meta

type Story = StoryObj<typeof BackToTopButton>

const globalStoryPropsInverted = {
  backgrounds: { value: 'scandicPrimaryDark' },
}

export const Default: Story = {
  args: {
    onPress: fn(),
    label: 'Back to top',
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole('button'))
    expect(args.onPress).toHaveBeenCalledTimes(1)
  },
}

export const PositionLeft: Story = {
  args: {
    ...Default.args,
    position: 'left',
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole('button'))
    expect(args.onPress).toHaveBeenCalledTimes(1)
  },
}

export const PositionCenter: Story = {
  args: {
    ...Default.args,
    position: 'center',
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole('button'))
    expect(args.onPress).toHaveBeenCalledTimes(1)
  },
}

export const PositionRight: Story = {
  args: {
    ...Default.args,
    position: 'right',
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole('button'))
    expect(args.onPress).toHaveBeenCalledTimes(1)
  },
}

export const OnDarkBackground: Story = {
  globals: globalStoryPropsInverted,
  args: {
    onPress: fn(),
    label: 'Back to top',
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole('button'))
    expect(args.onPress).toHaveBeenCalledTimes(1)
  },
}