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

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

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

import { MaterialIcon } from '../Icons/MaterialIcon'
import { IconButton } from './IconButton'
import { config } from './variants'

const meta: Meta<typeof IconButton> = {
  title: 'Components/IconButton',
  component: IconButton,
  argTypes: {
    onPress: {
      table: {
        disable: true,
      },
    },
    theme: {
      control: 'select',
      options: Object.keys(config.variants.theme),
      default: 'Primary',
    },
    style: {
      control: 'select',
      options: Object.keys(config.variants.style),
      default: 'Normal',
      type: 'string',
      description: `The style variant is only applied on certain variants. The examples below shows the possible combinations of variants and style variants.`,
    },
  },
}

export default meta

type Story = StoryObj<typeof IconButton>

export const PrimaryDefault: Story = {
  args: {
    onPress: fn(),
    children: <MaterialIcon icon="search" size={24} color="CurrentColor" />,
    theme: 'Primary',
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(canvas.getByRole('button'))
    expect(args.onPress).toHaveBeenCalledTimes(1)
  },
}

export const PrimaryDisabled: Story = {
  args: {
    ...PrimaryDefault.args,
    isDisabled: true,
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(canvas.getByRole('button'))
    expect(args.onPress).toHaveBeenCalledTimes(0)
  },
}

export const InvertedDefault: Story = {
  args: {
    onPress: fn(),
    children: (
      <MaterialIcon icon="arrow_forward" size={24} color="CurrentColor" />
    ),
    theme: 'Inverted',
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(canvas.getByRole('button'))
    expect(args.onPress).toHaveBeenCalledTimes(1)
  },
}

export const InvertedDisabled: Story = {
  args: {
    ...InvertedDefault.args,
    isDisabled: true,
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(canvas.getByRole('button'))
    expect(args.onPress).toHaveBeenCalledTimes(0)
  },
}

export const InvertedElevated: Story = {
  args: {
    ...InvertedDefault.args,
    style: 'Elevated',
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(canvas.getByRole('button'))
    expect(args.onPress).toHaveBeenCalledTimes(1)
  },
}

export const InvertedElevatedDisabled: Story = {
  args: {
    ...InvertedElevated.args,
    isDisabled: true,
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(canvas.getByRole('button'))
    expect(args.onPress).toHaveBeenCalledTimes(0)
  },
}

export const InvertedMuted: Story = {
  args: {
    ...InvertedDefault.args,
    children: <MaterialIcon icon="close" size={24} color="CurrentColor" />,
    style: 'Muted',
  },

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

export const InvertedMutedDisabled: Story = {
  args: {
    ...InvertedMuted.args,
    isDisabled: true,
  },

  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(canvas.getByRole('button'))
    expect(args.onPress).toHaveBeenCalledTimes(0)
  },
}

export const InvertedFaded: Story = {
  args: {
    ...InvertedDefault.args,
    style: 'Faded',
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(canvas.getByRole('button'))
    expect(args.onPress).toHaveBeenCalledTimes(1)
  },
}

export const InvertedFadedDisabled: Story = {
  args: {
    ...InvertedFaded.args,
    isDisabled: true,
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(canvas.getByRole('button'))
    expect(args.onPress).toHaveBeenCalledTimes(0)
  },
}

export const TertiaryElevated: Story = {
  args: {
    onPress: fn(),
    children: <MaterialIcon icon="arrow_back" size={24} color="CurrentColor" />,
    theme: 'Tertiary',
    style: 'Elevated',
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(canvas.getByRole('button'))
    expect(args.onPress).toHaveBeenCalledTimes(1)
  },
}

export const TertiaryDisabled: Story = {
  args: {
    ...TertiaryElevated.args,
    isDisabled: true,
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(canvas.getByRole('button'))
    expect(args.onPress).toHaveBeenCalledTimes(0)
  },
}

export const BlackMuted: Story = {
  args: {
    onPress: fn(),
    children: <MaterialIcon icon="close" size={24} color="CurrentColor" />,
    theme: 'Black',
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(canvas.getByRole('button'))
    expect(args.onPress).toHaveBeenCalledTimes(1)
  },
}

export const BlackMutedDisabled: Story = {
  args: {
    ...BlackMuted.args,
    isDisabled: true,
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(canvas.getByRole('button'))
    expect(args.onPress).toHaveBeenCalledTimes(0)
  },
}