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

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

import { fn } from 'storybook/test'

import { MaterialIcon } from '../Icons/MaterialIcon/MaterialIcon.tsx'
import { ChipButton } from './ChipButton.tsx'
import { config as chipButtonConfig } from './variants'

const meta: Meta<typeof ChipButton> = {
  title: 'Components/Chip/ChipButton',
  component: ChipButton,
  argTypes: {
    variant: {
      control: 'select',
      type: 'string',
      options: Object.keys(chipButtonConfig.variants.variant),
    },
    onPress: {
      table: {
        disable: true,
      },
    },
  },
}

export default meta

type Story = StoryObj<typeof ChipButton>

export const Default: Story = {
  args: {
    onPress: fn(),
    children: (
      <>
        Button Chip
        <MaterialIcon icon="chevron_right" size={20} />
      </>
    ),
  },
}

export const Outlined: Story = {
  args: {
    variant: 'Outlined',
    onPress: fn(),
    children: (
      <>
        Button Chip
        <MaterialIcon icon="keyboard_arrow_down" size={20} />
      </>
    ),
  },
}

export const FilterRoundedLarge: Story = {
  args: {
    variant: 'FilterRounded',
    onPress: fn(),
    size: 'Large',
    children: (
      <>
        <MaterialIcon icon="location_city" size={20} color="CurrentColor" />
        Button Chip
      </>
    ),
  },
}

export const FilterRoundedLargeSelected: Story = {
  args: {
    variant: 'FilterRounded',
    onPress: fn(),
    size: 'Large',
    selected: true,
    children: (
      <>
        <MaterialIcon icon="location_city" size={20} color="CurrentColor" />
        Button Chip
      </>
    ),
  },
}

export const FilterRoundedMedium: Story = {
  args: {
    variant: 'FilterRounded',
    onPress: fn(),
    size: 'Medium',
    children: (
      <>
        <MaterialIcon icon="location_city" size={20} color="CurrentColor" />
        Button Chip
      </>
    ),
  },
}

export const FilterRoundedMediumSelected: Story = {
  args: {
    variant: 'FilterRounded',
    onPress: fn(),
    size: 'Medium',
    selected: true,
    children: (
      <>
        <MaterialIcon icon="location_city" size={20} color="CurrentColor" />
        Button Chip
      </>
    ),
  },
}