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

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

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

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

const meta: Meta<typeof Button> = {
  title: 'Components/Button',
  component: Button,
  argTypes: {
    onPress: {
      table: {
        disable: true,
      },
    },
    typography: {
      control: 'select',
      options: Object.keys(typographyConfig.variants.variant),
    },
    variant: {
      control: 'select',
      options: Object.keys(buttonConfig.variants.variant),
      default: 'Primary',
    },
    color: {
      control: 'select',
      options: Object.keys(buttonConfig.variants.color),
      type: 'string',
      description:
        'The color variant, only applies to the variants `Primary`, `Secondary` and `Text`. Defaults to `Primary`.',
    },
    size: {
      control: 'select',
      options: Object.keys(buttonConfig.variants.size),
      type: 'string',
      description: 'The size of the button. Defaults to `Large`.',
    },
    wrapping: {
      control: 'radio',
      options: Object.keys(buttonConfig.variants.wrapping),
      type: 'boolean',
      description:
        'Only applies to variant `Text`. If `true`, the button will keep the default padding set on the buttons. Defaults to `true`.',
    },
  },
}

export default meta

type Story = StoryObj<typeof Button>

export const PrimaryDefault: Story = {
  args: {
    onPress: fn(),
    children: 'Primary button',
    typography: 'Body/Paragraph/mdBold',
    variant: 'Primary',
    isDisabled: false,
    isPending: false,
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole('button'))
    expect(args.onPress).toHaveBeenCalledTimes(1)
  },
}

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

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

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

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

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

export const PrimaryInvertedDefault: Story = {
  args: {
    onPress: fn(),
    children: 'Primary inverted button',
    typography: 'Body/Paragraph/mdBold',
    variant: 'Primary',
    color: 'Inverted',
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole('button'))
    expect(args.onPress).toHaveBeenCalledTimes(1)
  },
}

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

export const PrimaryInvertedLoading: Story = {
  args: {
    ...PrimaryInvertedDefault.args,
    isPending: true,
  },
  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole('button'))
    expect(args.onPress).toHaveBeenCalledTimes(0)
  },
}

export const PrimaryInvertedLarge: Story = {
  args: {
    ...PrimaryInvertedDefault.args,
    size: 'Large',
  },

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

export const PrimaryInvertedMedium: Story = {
  args: {
    ...PrimaryInvertedDefault.args,
    size: 'Medium',
  },

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

export const PrimaryInvertedSmall: Story = {
  args: {
    ...PrimaryInvertedDefault.args,
    size: 'Small',
  },

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

export const SecondaryDefault: Story = {
  args: {
    onPress: fn(),
    children: 'Secondary button',
    typography: 'Body/Paragraph/mdBold',
    variant: 'Secondary',
  },

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

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

export const SecondaryLoading: Story = {
  args: {
    ...SecondaryDefault.args,
    isPending: true,
  },

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

export const SecondaryLarge: Story = {
  args: {
    ...SecondaryDefault.args,
    size: 'Large',
  },

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

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

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

export const SecondarySmall: Story = {
  args: {
    ...SecondaryDefault.args,
    size: 'Small',
  },

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

export const SecondaryInvertedDefault: Story = {
  args: {
    onPress: fn(),
    children: 'Secondary inverted button',
    typography: 'Body/Paragraph/mdBold',
    variant: 'Secondary',
    color: 'Inverted',
  },

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

export const SecondaryInvertedDisabled: Story = {
  args: {
    ...SecondaryInvertedDefault.args,
    isDisabled: true,
  },

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

export const SecondaryInvertedLoading: Story = {
  args: {
    ...SecondaryInvertedDefault.args,
    isPending: true,
  },

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

export const SecondaryInvertedLarge: Story = {
  args: {
    ...SecondaryInvertedDefault.args,
    size: 'Large',
  },

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

export const SecondaryInvertedMedium: Story = {
  args: {
    ...SecondaryInvertedDefault.args,
    size: 'Medium',
  },

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

export const SecondaryInvertedSmall: Story = {
  args: {
    ...SecondaryInvertedDefault.args,
    size: 'Small',
  },

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

export const TertiaryDefault: Story = {
  args: {
    onPress: fn(),
    children: 'Tertiary button',
    typography: 'Body/Paragraph/mdBold',
    variant: 'Tertiary',
  },

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

export const TertiaryDisabled: Story = {
  args: {
    ...TertiaryDefault.args,
    isDisabled: true,
  },

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

export const TertiaryLoading: Story = {
  args: {
    ...TertiaryDefault.args,
    isPending: true,
  },

  play: async ({ canvas, userEvent, args }) => {
    await userEvent.click(await canvas.findByRole('button'))
    expect(args.onPress).toHaveBeenCalledTimes(0)
  },
}
export const TertiaryLarge: Story = {
  args: {
    ...TertiaryDefault.args,
    size: 'Large',
  },

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

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

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

export const TertiarySmall: Story = {
  args: {
    ...TertiaryDefault.args,
    size: 'Small',
  },

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

export const TextDefault: Story = {
  args: {
    onPress: fn(),
    children: 'Text button',
    typography: 'Body/Paragraph/mdBold',
    variant: 'Text',
  },

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

export const TextDisabled: Story = {
  args: {
    ...TextDefault.args,
    isDisabled: true,
  },

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

export const TextLarge: Story = {
  args: {
    ...TextDefault.args,
    size: 'Large',
  },

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

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

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

export const TextSmall: Story = {
  args: {
    ...TextDefault.args,
    size: 'Small',
  },

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

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

export const TextInvertedDefault: Story = {
  args: {
    onPress: fn(),
    children: 'Text inverted button',
    typography: 'Body/Paragraph/mdBold',
    variant: 'Text',
    color: 'Inverted',
  },

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

export const TextInvertedDisabled: Story = {
  args: {
    ...TextInvertedDefault.args,
    isDisabled: true,
  },

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

export const TextInvertedLarge: Story = {
  args: {
    ...TextInvertedDefault.args,
    size: 'Large',
  },

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

export const TextInvertedMedium: Story = {
  args: {
    ...TextInvertedDefault.args,
    size: 'Medium',
  },

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

export const TextInvertedSmall: Story = {
  args: {
    ...TextInvertedDefault.args,
    size: 'Small',
  },

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

export const TextWithIcon: Story = {
  args: {
    onPress: fn(),
    children: (
      <>
        Text with icon
        <MaterialIcon icon="chevron_right" size={24} color="CurrentColor" />
      </>
    ),
    typography: 'Body/Paragraph/mdBold',
    variant: 'Text',
  },
  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 = {
  args: {
    onPress: fn(),
    children: (
      <>
        Text with icon
        <MaterialIcon icon="chevron_right" size={24} color="CurrentColor" />
      </>
    ),
    typography: 'Body/Paragraph/mdBold',
    variant: 'Text',
    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()
  },
}