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

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

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

import { Button } from "./Button"
import { buttonIconNames } from "./types"
import { config as buttonConfig } from "./variants"

const meta: Meta<typeof Button> = {
  title: "Core Components/Button",
  component: Button,
  argTypes: {
    onPress: {
      table: {
        type: { summary: "function" },
        defaultValue: { summary: "undefined" },
      },
      description: "Callback function to handle button press events.",
    },
    variant: {
      control: "select",
      options: Object.keys(buttonConfig.variants.variant),
      default: "Primary",
      table: {
        defaultValue: {
          summary: buttonConfig.defaultVariants.variant,
        },
        type: {
          summary: Object.keys(buttonConfig.variants.variant).join(" | "),
        },
      },
    },
    color: {
      control: "select",
      options: Object.keys(buttonConfig.variants.color),
      table: {
        type: {
          summary: Object.keys(buttonConfig.variants.color).join(" | "),
        },
        defaultValue: {
          summary: buttonConfig.defaultVariants.color,
        },
      },
    },
    size: {
      control: "select",
      options: Object.keys(buttonConfig.variants.size),
      table: {
        type: {
          summary: Object.keys(buttonConfig.variants.size).join(" | "),
        },
        defaultValue: {
          summary: buttonConfig.defaultVariants.size,
        },
      },
    },
    wrapping: {
      control: "boolean",
      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.",
    },
    leadingIconName: {
      control: "select",
      options: buttonIconNames,
      table: {
        type: { summary: buttonIconNames.join(" | ") },
        defaultValue: { summary: "undefined" },
      },
      description: "Name of the Material Icon to use as leading icon.",
    },
    trailingIconName: {
      control: "select",
      options: buttonIconNames,
      table: {
        type: { summary: buttonIconNames.join(" | ") },
        defaultValue: { summary: "undefined" },
      },
      description: "Name of the Material Icon to use as trailing icon.",
    },
    isDisabled: {
      control: "boolean",
      table: {
        type: { summary: "boolean" },
        defaultValue: { summary: "false" },
      },
    },
    isPending: {
      control: "boolean",
      table: {
        type: { summary: "boolean" },
        defaultValue: { summary: "false" },
      },
    },
    fullWidth: {
      control: "boolean",
      table: {
        type: { summary: "boolean" },
        defaultValue: { summary: "false" },
      },
      description:
        "By default, the button width adjusts to its content. Set to true to make the button take the full width of its container.",
    },
  },
}

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

type Story = StoryObj<typeof Button>

export const Default: Story = {
  args: {
    onPress: fn(),
    children: "Button",
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.onPress).toHaveBeenCalledTimes(1)
  },
}

export const PrimaryLarge: Story = {
  args: {
    ...Default.args,
    variant: "Primary",
    size: "lg",
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.onPress).toHaveBeenCalledTimes(1)
  },
}

export const PrimaryMedium: Story = {
  args: {
    ...PrimaryLarge.args,
    size: "md",
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.onPress).toHaveBeenCalledTimes(1)
  },
}

export const PrimarySmall: Story = {
  args: {
    ...PrimaryLarge.args,
    size: "sm",
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.onPress).toHaveBeenCalledTimes(1)
  },
}

export const PrimaryDisabled: Story = {
  args: {
    ...PrimaryLarge.args,
    isDisabled: true,
    onPress: fn(), // Fresh spy instance for disabled test
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.onPress).toHaveBeenCalledTimes(0)
  },
}

export const PrimaryLoading: Story = {
  args: {
    ...PrimaryLarge.args,
    isPending: true,
    onPress: fn(), // Fresh spy instance for loading test
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.onPress).toHaveBeenCalledTimes(0)
  },
}

export const PrimaryOnDarkBackground: Story = {
  globals: globalStoryPropsInverted,
  args: {
    ...PrimaryLarge.args,
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.onPress).toHaveBeenCalledTimes(1)
  },
}

export const PrimaryInvertedLarge: Story = {
  globals: globalStoryPropsInverted,
  args: {
    ...Default.args,
    size: "lg",
    color: "Inverted",
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.onPress).toHaveBeenCalledTimes(1)
  },
}

export const PrimaryInvertedMedium: Story = {
  globals: globalStoryPropsInverted,
  args: {
    ...PrimaryInvertedLarge.args,
    size: "md",
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.onPress).toHaveBeenCalledTimes(1)
  },
}

export const PrimaryInvertedSmall: Story = {
  globals: globalStoryPropsInverted,
  args: {
    ...PrimaryInvertedLarge.args,
    size: "sm",
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.onPress).toHaveBeenCalledTimes(1)
  },
}

export const PrimaryInvertedDisabled: Story = {
  globals: globalStoryPropsInverted,
  args: {
    ...PrimaryInvertedLarge.args,
    isDisabled: true,
    onPress: fn(), // Fresh spy instance for disabled test
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.onPress).toHaveBeenCalledTimes(0)
  },
}

export const PrimaryInvertedLoading: Story = {
  globals: globalStoryPropsInverted,
  args: {
    ...PrimaryInvertedLarge.args,
    isPending: true,
    onPress: fn(), // Fresh spy instance for loading test
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.onPress).toHaveBeenCalledTimes(0)
  },
}

export const SecondaryLarge: Story = {
  args: {
    ...Default.args,
    variant: "Secondary",
    size: "lg",
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.onPress).toHaveBeenCalledTimes(1)
  },
}

export const SecondaryMedium: Story = {
  args: {
    ...SecondaryLarge.args,
    size: "md",
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.onPress).toHaveBeenCalledTimes(1)
  },
}

export const SecondarySmall: Story = {
  args: {
    ...SecondaryLarge.args,
    size: "sm",
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.onPress).toHaveBeenCalledTimes(1)
  },
}

export const SecondaryDisabled: Story = {
  args: {
    ...SecondaryLarge.args,
    isDisabled: true,
    onPress: fn(), // Fresh spy instance for disabled test
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.onPress).toHaveBeenCalledTimes(0)
  },
}

export const SecondaryLoading: Story = {
  args: {
    ...SecondaryLarge.args,
    isPending: true,
    onPress: fn(), // Fresh spy instance for loading test
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.onPress).toHaveBeenCalledTimes(0)
  },
}

export const SecondaryInvertedLarge: Story = {
  globals: globalStoryPropsInverted,
  args: {
    ...Default.args,
    variant: "Secondary",
    color: "Inverted",
    size: "lg",
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.onPress).toHaveBeenCalledTimes(1)
  },
}

export const SecondaryInvertedMedium: Story = {
  globals: globalStoryPropsInverted,
  args: {
    ...SecondaryInvertedLarge.args,
    size: "md",
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.onPress).toHaveBeenCalledTimes(1)
  },
}

export const SecondaryInvertedSmall: Story = {
  globals: globalStoryPropsInverted,
  args: {
    ...SecondaryInvertedLarge.args,
    size: "sm",
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.onPress).toHaveBeenCalledTimes(1)
  },
}

export const SecondaryInvertedDisabled: Story = {
  globals: globalStoryPropsInverted,
  args: {
    ...SecondaryInvertedLarge.args,
    isDisabled: true,
    onPress: fn(), // Fresh spy instance for disabled test
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.onPress).toHaveBeenCalledTimes(0)
  },
}

export const SecondaryInvertedLoading: Story = {
  globals: globalStoryPropsInverted,
  args: {
    ...SecondaryInvertedLarge.args,
    isPending: true,
    onPress: fn(), // Fresh spy instance for loading test
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.onPress).toHaveBeenCalledTimes(0)
  },
}

export const TertiaryLarge: Story = {
  args: {
    ...Default.args,
    variant: "Tertiary",
    size: "lg",
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.onPress).toHaveBeenCalledTimes(1)
  },
}

export const TertiaryMedium: Story = {
  args: {
    ...TertiaryLarge.args,
    size: "md",
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.onPress).toHaveBeenCalledTimes(1)
  },
}

export const TertiarySmall: Story = {
  args: {
    ...TertiaryLarge.args,
    size: "sm",
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.onPress).toHaveBeenCalledTimes(1)
  },
}

export const TertiaryDisabled: Story = {
  args: {
    ...TertiaryLarge.args,
    isDisabled: true,
    onPress: fn(), // Fresh spy instance for disabled test
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.onPress).toHaveBeenCalledTimes(0)
  },
}

export const TertiaryLoading: Story = {
  args: {
    ...TertiaryLarge.args,
    isPending: true,
    onPress: fn(), // Fresh spy instance for loading test
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.onPress).toHaveBeenCalledTimes(0)
  },
}

export const TextLarge: Story = {
  args: {
    ...Default.args,
    variant: "Text",
    size: "lg",
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.onPress).toHaveBeenCalledTimes(1)
  },
}

export const TextMedium: Story = {
  args: {
    ...TextLarge.args,
    size: "md",
  },

  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.onPress).toHaveBeenCalledTimes(1)
  },
}

export const TextSmall: Story = {
  args: {
    ...TextLarge.args,
    size: "sm",
  },

  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.onPress).toHaveBeenCalledTimes(1)
  },
}

export const TextDisabled: Story = {
  args: {
    ...TextLarge.args,
    isDisabled: true,
    onPress: fn(), // Fresh spy instance for disabled test
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.onPress).toHaveBeenCalledTimes(0)
  },
}

export const TextNoWrapping: Story = {
  args: {
    ...TextLarge.args,
    wrapping: false,
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.onPress).toHaveBeenCalledTimes(1)
  },
}

export const TextInvertedLarge: Story = {
  globals: globalStoryPropsInverted,
  args: {
    ...Default.args,
    variant: "Text",
    color: "Inverted",
    size: "lg",
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.onPress).toHaveBeenCalledTimes(1)
  },
}

export const TextInvertedMedium: Story = {
  globals: globalStoryPropsInverted,
  args: {
    ...TextInvertedLarge.args,
    size: "md",
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.onPress).toHaveBeenCalledTimes(1)
  },
}

export const TextInvertedSmall: Story = {
  globals: globalStoryPropsInverted,
  args: {
    ...TextInvertedLarge.args,
    size: "sm",
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.onPress).toHaveBeenCalledTimes(1)
  },
}

export const TextInvertedDisabled: Story = {
  globals: globalStoryPropsInverted,
  args: {
    ...TextInvertedLarge.args,
    isDisabled: true,
    onPress: fn(), // Fresh spy instance for disabled test
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.onPress).toHaveBeenCalledTimes(0)
  },
}

export const TextWithIcon: Story = {
  args: {
    ...TextLarge.args,
    children: "Text with icon",
    trailingIconName: "chevron_right",
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.onPress).toHaveBeenCalledTimes(1)

    expect(canvas.getByText("Text with icon")).toBeDefined()
    expect(canvas.getByTestId("MaterialIcon")).toBeDefined()
  },
}

export const TextWithIconInverted: Story = {
  globals: globalStoryPropsInverted,
  args: {
    ...TextWithIcon.args,
    color: "Inverted",
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole("button"))
    expect(args.onPress).toHaveBeenCalledTimes(1)

    expect(canvas.getByText("Text with icon")).toBeDefined()
    expect(canvas.getByTestId("MaterialIcon")).toBeDefined()
  },
}