veza/apps/web/src/components/branding/Logo.stories.tsx

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

const meta = {
  title: 'Branding/Logo',
  component: Logo,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'Single source of truth for Talas / Veza brand rendering. Use this component everywhere a wordmark, symbol, or lockup is needed. See `CHARTE_GRAPHIQUE_TALAS.md §3` for the logo specifications. The current SVG symbol is a placeholder until the artist (Renaud, P0.1) delivers the hand-drawn calligraphic mark.',
      },
    },
  },
  argTypes: {
    brand: {
      control: 'inline-radio',
      options: ['talas', 'veza'],
    },
    variant: {
      control: 'inline-radio',
      options: ['wordmark', 'symbol', 'lockup'],
    },
    size: {
      control: 'inline-radio',
      options: ['xs', 'sm', 'md', 'lg', 'xl'],
    },
    color: {
      control: 'inline-radio',
      options: ['auto', 'ink', 'cyan', 'inverse'],
    },
    orientation: {
      control: 'inline-radio',
      options: ['horizontal', 'vertical'],
    },
  },
  args: {
    brand: 'veza',
    variant: 'wordmark',
    size: 'md',
    color: 'auto',
  },
} satisfies Meta<typeof Logo>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {};

export const VezaWordmark: Story = {
  args: { brand: 'veza', variant: 'wordmark', size: 'lg' },
};

export const TalasWordmark: Story = {
  args: { brand: 'talas', variant: 'wordmark', size: 'lg' },
};

export const Symbol: Story = {
  args: { brand: 'talas', variant: 'symbol', size: 'xl' },
};

export const LockupHorizontal: Story = {
  args: { brand: 'veza', variant: 'lockup', size: 'lg', tagline: 'STREAMING' },
};

export const LockupVertical: Story = {
  args: { brand: 'talas', variant: 'lockup', size: 'lg', orientation: 'vertical' },
};

export const Cyan: Story = {
  args: { brand: 'veza', variant: 'lockup', size: 'lg', color: 'cyan', tagline: 'BETA' },
};

export const Inverse: Story = {
  args: { brand: 'talas', variant: 'wordmark', size: 'xl', color: 'inverse' },
  parameters: { backgrounds: { default: 'dark' } },
};

export const AllSizes: Story = {
  render: () => (
    <div className="flex flex-col gap-6 items-start">
      {(['xs', 'sm', 'md', 'lg', 'xl'] as const).map((size) => (
        <div key={size} className="flex items-center gap-4">
          <span className="text-xs text-muted-foreground tracking-widest uppercase w-8">{size}</span>
          <Logo brand="veza" variant="lockup" size={size} tagline="STREAMING" />
        </div>
      ))}
    </div>
  ),
};

export const AllVariants: Story = {
  render: () => (
    <div className="grid grid-cols-3 gap-8 items-start">
      <div className="flex flex-col gap-2">
        <span className="text-xs text-muted-foreground uppercase">Wordmark</span>
        <Logo brand="veza" variant="wordmark" size="lg" />
      </div>
      <div className="flex flex-col gap-2">
        <span className="text-xs text-muted-foreground uppercase">Symbol</span>
        <Logo brand="talas" variant="symbol" size="lg" />
      </div>
      <div className="flex flex-col gap-2">
        <span className="text-xs text-muted-foreground uppercase">Lockup</span>
        <Logo brand="veza" variant="lockup" size="lg" tagline="STREAMING" />
      </div>
    </div>
  ),
};

export const TalasVsVeza: Story = {
  render: () => (
    <div className="grid grid-cols-2 gap-8 items-start">
      <div className="flex flex-col gap-2">
        <span className="text-xs text-muted-foreground uppercase">Talas (mother brand)</span>
        <Logo brand="talas" variant="lockup" size="xl" />
      </div>
      <div className="flex flex-col gap-2">
        <span className="text-xs text-muted-foreground uppercase">Veza (sub-brand)</span>
        <Logo brand="veza" variant="lockup" size="xl" tagline="STREAMING" />
      </div>
    </div>
  ),
};