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)
  },
}