ADS3-Design-System/src/components/atoms/Badge/Badge.stories.tsx

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

const meta: Meta<typeof Badge> = {
  title: 'Atoms/Badge',
  component: Badge,
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: 'select',
      options: [
        'navy',
        'info',
        'info-light',
        'success',
        'success-light',
        'error',
        'error-light',
        'warning',
        'warning-light',
        'neutral',
        'white',
      ],
    },
    children: { control: 'text' },
  },
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/mrabO6AtxN3ektGiTk0I9c/ResearchInsights?node-id=78-1035',
    },
  },
}

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: { children: 'Status here' },
}

// --- Variants ---

export const Navy: Story = {
  args: { children: 'Primary', variant: 'navy' },
}

export const Info: Story = {
  args: { children: 'Information', variant: 'info' },
}

export const InfoLight: Story = {
  args: { children: 'Information', variant: 'info-light' },
}

export const Success: Story = {
  args: { children: 'Complete', variant: 'success' },
}

export const SuccessLight: Story = {
  args: { children: 'Complete', variant: 'success-light' },
}

export const Error: Story = {
  args: { children: 'Failed', variant: 'error' },
}

export const ErrorLight: Story = {
  args: { children: 'Failed', variant: 'error-light' },
}

export const Warning: Story = {
  args: { children: 'Pending', variant: 'warning' },
}

export const WarningLight: Story = {
  args: { children: 'Pending', variant: 'warning-light' },
}

export const Neutral: Story = {
  args: { children: 'Draft', variant: 'neutral' },
}

export const White: Story = {
  args: { children: 'Default', variant: 'white' },
}

// --- Icons ---

const CheckIcon = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={2}
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <path d="M20 6 9 17l-5-5" />
  </svg>
)

const CalendarIcon = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={2}
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <path d="M8 2v4" />
    <path d="M16 2v4" />
    <rect width="18" height="18" x="3" y="4" rx="2" />
    <path d="M3 10h18" />
  </svg>
)

export const WithIcons: Story = {
  args: {
    children: 'Status here',
    variant: 'info',
    leftIcon: <CheckIcon />,
    rightIcon: <CalendarIcon />,
  },
}

// --- All variants ---

export const AllVariants: Story = {
  render: () => (
    <div className="flex flex-wrap items-center gap-3">
      <Badge variant="navy">Navy</Badge>
      <Badge variant="info">Info</Badge>
      <Badge variant="info-light">Info light</Badge>
      <Badge variant="success">Success</Badge>
      <Badge variant="success-light">Success light</Badge>
      <Badge variant="error">Error</Badge>
      <Badge variant="error-light">Error light</Badge>
      <Badge variant="warning">Warning</Badge>
      <Badge variant="warning-light">Warning light</Badge>
      <Badge variant="neutral">Neutral</Badge>
      <Badge variant="white">White</Badge>
    </div>
  ),
}

export const StrongVariants: Story = {
  render: () => (
    <div className="flex flex-wrap items-center gap-3">
      <Badge variant="navy">Navy</Badge>
      <Badge variant="info">Info</Badge>
      <Badge variant="success">Success</Badge>
      <Badge variant="error">Error</Badge>
      <Badge variant="warning">Warning</Badge>
    </div>
  ),
}

export const LightVariants: Story = {
  render: () => (
    <div className="flex flex-wrap items-center gap-3">
      <Badge variant="info-light">Info</Badge>
      <Badge variant="success-light">Success</Badge>
      <Badge variant="error-light">Error</Badge>
      <Badge variant="warning-light">Warning</Badge>
      <Badge variant="neutral">Neutral</Badge>
      <Badge variant="white">White</Badge>
    </div>
  ),
}