react-vite-themes/dist/pages/Documentation/BadgeDocumentation.js

A test/experimental React theme system created for learning purposes. Features atomic design components, SCSS variables, and dark/light theme support. Not intended for production use.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { Link } from 'react-router-dom';
import { Badge } from '../../components/atoms/Badge';
import { CodeBlock } from '../../components/atoms/CodeBlock';
import { Card } from '../../components/atoms/Card';
import { Icon } from '../../components/atoms/Icon';
import { Alert } from '../../components/atoms/Alert';
import './ComponentDocumentation.scss';
const BadgeDocumentation = () => {
    const variants = [
        { name: 'primary', description: 'Primary themed badges' },
        { name: 'secondary', description: 'Secondary themed badges' },
        { name: 'success', description: 'Success themed badges' },
        { name: 'error', description: 'Error themed badges' },
        { name: 'warning', description: 'Warning themed badges' },
        { name: 'info', description: 'Info themed badges' },
        { name: 'light', description: 'Light themed badges' },
        { name: 'dark', description: 'Dark themed badges' },
        { name: 'neutral', description: 'Neutral themed badges (default)' }
    ];
    const sizes = [
        { name: 'xs', description: 'Extra small badges' },
        { name: 'sm', description: 'Small badges' },
        { name: 'md', description: 'Medium badges (default)' },
        { name: 'lg', description: 'Large badges' },
        { name: 'xl', description: 'Extra large badges' }
    ];
    return (_jsx("div", { className: "component-documentation", children: _jsxs("div", { className: "container", children: [_jsxs("div", { className: "doc-header", children: [_jsxs(Link, { to: "/documentation", className: "back-link", children: [_jsx(Icon, { name: "arrow-left", size: "sm" }), "Back to Documentation"] }), _jsx("h1", { children: "Badge Component" }), _jsx("p", { className: "component-description", children: "A flexible badge component for labels, status indicators, and notifications. Supports multiple variants, sizes, and styles." })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "import-section", children: [_jsx("h2", { children: "Import" }), _jsx(CodeBlock, { code: "import { { Badge } } from '../../components/atoms/Badge';", language: "typescript" })] }), _jsxs("section", { className: "usage-section", children: [_jsx("h2", { children: "Basic Usage" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(Badge, { variant: "primary", children: "Primary" }), _jsx(Badge, { variant: "success", children: "Success" }), _jsx(Badge, { variant: "warning", children: "Warning" }), _jsx(Badge, { variant: "error", children: "Error" })] }), _jsx(CodeBlock, { code: `<Badge variant="primary">Primary</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="error">Error</Badge>`, language: "tsx" })] })] }), _jsxs("section", { className: "variants-section", children: [_jsx("h2", { children: "Variants" }), _jsx("p", { children: "Badge variants define the semantic meaning and color scheme of the badge." }), _jsx("div", { className: "variants-grid", children: variants.map((variant) => (_jsxs(Card, { variant: "neutral", style: "elevated", className: "variant-card", children: [_jsx("h3", { children: variant.name.charAt(0).toUpperCase() + variant.name.slice(1) }), _jsx("p", { children: variant.description }), _jsx("div", { className: "example-content", children: _jsx(Badge, { variant: variant.name, size: "md", children: variant.name.charAt(0).toUpperCase() + variant.name.slice(1) }) }), _jsx(CodeBlock, { code: `<Badge variant="${variant.name}">${variant.name.charAt(0).toUpperCase() + variant.name.slice(1)}</Badge>`, language: "tsx" })] }, variant.name))) })] }), _jsxs("section", { className: "sizes-section", children: [_jsx("h2", { children: "Sizes" }), _jsx("p", { children: "Control the badge size using the size prop." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("div", { className: "example-content", children: sizes.map((size) => (_jsx(Badge, { variant: "primary", size: size.name, children: size.name.toUpperCase() }, size.name))) }), _jsx(CodeBlock, { code: `<Badge variant="primary" size="xs">XS</Badge>
<Badge variant="primary" size="sm">SM</Badge>
<Badge variant="primary" size="md">MD</Badge>
<Badge variant="primary" size="lg">LG</Badge>
<Badge variant="primary" size="xl">XL</Badge>`, language: "tsx" })] })] }), _jsxs("section", { className: "rounded-section", children: [_jsx("h2", { children: "Rounded Badges" }), _jsx("p", { children: "Use the isRounded prop for pill-shaped badges." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(Badge, { variant: "primary", isRounded: true, children: "Primary" }), _jsx(Badge, { variant: "success", isRounded: true, children: "Success" }), _jsx(Badge, { variant: "warning", isRounded: true, children: "Warning" }), _jsx(Badge, { variant: "error", isRounded: true, children: "Error" })] }), _jsx(CodeBlock, { code: `<Badge variant="primary" isRounded>Primary</Badge>
<Badge variant="success" isRounded>Success</Badge>
<Badge variant="warning" isRounded>Warning</Badge>
<Badge variant="error" isRounded>Error</Badge>`, language: "tsx" })] })] }), _jsxs("section", { className: "outlined-section", children: [_jsx("h2", { children: "Outlined Badges" }), _jsx("p", { children: "Use the isOutlined prop for outlined badges with transparent background." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(Badge, { variant: "primary", isOutlined: true, children: "Primary" }), _jsx(Badge, { variant: "success", isOutlined: true, children: "Success" }), _jsx(Badge, { variant: "warning", isOutlined: true, children: "Warning" }), _jsx(Badge, { variant: "error", isOutlined: true, children: "Error" })] }), _jsx(CodeBlock, { code: `<Badge variant="primary" isOutlined>Primary</Badge>
<Badge variant="success" isOutlined>Success</Badge>
<Badge variant="warning" isOutlined>Warning</Badge>
<Badge variant="error" isOutlined>Error</Badge>`, language: "tsx" })] })] }), _jsxs("section", { className: "status-section", children: [_jsx("h2", { children: "Status Indicators" }), _jsx("p", { children: "Use badges to show status and state information." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(Badge, { variant: "success", children: "Online" }), _jsx(Badge, { variant: "warning", children: "Pending" }), _jsx(Badge, { variant: "error", children: "Offline" }), _jsx(Badge, { variant: "info", children: "New" })] }), _jsx(CodeBlock, { code: `<Badge variant="success">Online</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="error">Offline</Badge>
<Badge variant="info">New</Badge>`, language: "tsx" })] })] }), _jsxs("section", { className: "counters-section", children: [_jsx("h2", { children: "Counters" }), _jsx("p", { children: "Use badges to display counts and notifications." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(Badge, { variant: "primary", children: "5" }), _jsx(Badge, { variant: "success", children: "12" }), _jsx(Badge, { variant: "warning", children: "3" }), _jsx(Badge, { variant: "error", children: "99+" })] }), _jsx(CodeBlock, { code: `<Badge variant="primary">5</Badge>
<Badge variant="success">12</Badge>
<Badge variant="warning">3</Badge>
<Badge variant="error">99+</Badge>`, language: "tsx" })] })] }), _jsxs("section", { className: "complex-examples-section", children: [_jsx("h2", { children: "Complex Examples" }), _jsx("p", { children: "Real-world examples of badge usage patterns." }), _jsxs("div", { className: "complex-examples-grid", children: [_jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "User Profile" }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1rem' }, children: [_jsx("div", { style: { width: '40px', height: '40px', borderRadius: '50%', backgroundColor: 'var(--color-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', fontWeight: 'bold' }, children: "JD" }), _jsxs("div", { children: [_jsx("div", { style: { fontWeight: 'bold' }, children: "John Doe" }), _jsx("div", { style: { color: 'var(--color-text-secondary)', fontSize: '0.875rem' }, children: "Software Developer" })] }), _jsx(Badge, { variant: "success", isRounded: true, children: "Available" })] }), _jsxs("div", { style: { display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }, children: [_jsx(Badge, { variant: "primary", size: "sm", children: "React" }), _jsx(Badge, { variant: "info", size: "sm", children: "TypeScript" }), _jsx(Badge, { variant: "warning", size: "sm", children: "Node.js" }), _jsx(Badge, { variant: "success", size: "sm", children: "5+ years" })] })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "Notification Center" }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '0.5rem' }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [_jsx("span", { children: "Messages" }), _jsx(Badge, { variant: "primary", children: "3" })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [_jsx("span", { children: "Tasks" }), _jsx(Badge, { variant: "warning", children: "5" })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [_jsx("span", { children: "Updates" }), _jsx(Badge, { variant: "info", children: "1" })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [_jsx("span", { children: "Errors" }), _jsx(Badge, { variant: "error", children: "2" })] })] })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "Product Tags" }), _jsxs("div", { style: { marginBottom: '1rem' }, children: [_jsx("h4", { style: { margin: '0 0 0.5rem 0' }, children: "Premium Widget" }), _jsx("p", { style: { margin: '0 0 1rem 0', color: 'var(--color-text-secondary)' }, children: "High-quality widget with advanced features" })] }), _jsxs("div", { style: { display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }, children: [_jsx(Badge, { variant: "success", isRounded: true, children: "In Stock" }), _jsx(Badge, { variant: "primary", isOutlined: true, children: "Premium" }), _jsx(Badge, { variant: "warning", isOutlined: true, children: "Limited Time" }), _jsx(Badge, { variant: "info", size: "sm", children: "New" })] })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "File Status" }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '0.5rem' }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [_jsx("span", { children: "document.pdf" }), _jsx(Badge, { variant: "success", isRounded: true, children: "Uploaded" })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [_jsx("span", { children: "image.jpg" }), _jsx(Badge, { variant: "warning", isRounded: true, children: "Processing" })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [_jsx("span", { children: "video.mp4" }), _jsx(Badge, { variant: "error", isRounded: true, children: "Failed" })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [_jsx("span", { children: "data.csv" }), _jsx(Badge, { variant: "info", isRounded: true, children: "Pending" })] })] })] })] })] }), _jsxs("section", { className: "props-section", children: [_jsx("h2", { children: "Props" }), _jsx(Card, { variant: "neutral", style: "elevated", className: "props-card", children: _jsx("div", { className: "props-table", children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Prop" }), _jsx("th", { children: "Type" }), _jsx("th", { children: "Default" }), _jsx("th", { children: "Description" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { children: "variant" }), _jsx("td", { children: "string" }), _jsx("td", { children: "'neutral'" }), _jsx("td", { children: "Badge variant (primary, secondary, success, error, warning, info, light, dark, neutral)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "size" }), _jsx("td", { children: "string" }), _jsx("td", { children: "'md'" }), _jsx("td", { children: "Badge size (xs, sm, md, lg, xl)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "isRounded" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Apply pill-shaped rounded corners" })] }), _jsxs("tr", { children: [_jsx("td", { children: "isOutlined" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Use outlined style with transparent background" })] }), _jsxs("tr", { children: [_jsx("td", { children: "children" }), _jsx("td", { children: "ReactNode" }), _jsx("td", { children: "-" }), _jsx("td", { children: "Badge content" })] }), _jsxs("tr", { children: [_jsx("td", { children: "className" }), _jsx("td", { children: "string" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Additional CSS classes" })] })] })] }) }) })] }), _jsxs("section", { className: "best-practices-section", children: [_jsx("h2", { children: "Best Practices" }), _jsxs("div", { className: "practices-grid", children: [_jsxs(Card, { variant: "neutral", style: "elevated", className: "practice-card", children: [_jsx("h3", { children: "\u2705 Do" }), _jsxs("ul", { children: [_jsx("li", { children: "Use success badges for positive states" }), _jsx("li", { children: "Use warning badges for pending states" }), _jsx("li", { children: "Use error badges for negative states" }), _jsx("li", { children: "Use info badges for informational content" }), _jsx("li", { children: "Use rounded badges for status indicators" }), _jsx("li", { children: "Use outlined badges for subtle emphasis" }), _jsx("li", { children: "Keep badge text short and clear" })] })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "practice-card", children: [_jsx("h3", { children: "\u274C Don't" }), _jsxs("ul", { children: [_jsx("li", { children: "Don't use too many badges on one element" }), _jsx("li", { children: "Don't use error badges for non-error states" }), _jsx("li", { children: "Don't use long text in badges" }), _jsx("li", { children: "Don't use badges for primary navigation" }), _jsx("li", { children: "Don't use badges without proper contrast" }), _jsx("li", { children: "Don't use badges for important actions" }), _jsx("li", { children: "Don't use badges for main content" })] })] })] })] }), _jsxs("section", { className: "accessibility-section", children: [_jsx("h2", { children: "Accessibility" }), _jsxs(Alert, { variant: "info", title: "Accessibility Features", children: ["The Badge component includes several accessibility features:", _jsxs("ul", { children: [_jsx("li", { children: "Proper color contrast for all variants" }), _jsx("li", { children: "Semantic color usage for status indicators" }), _jsx("li", { children: "Screen reader support for badge content" }), _jsx("li", { children: "High contrast support for outlined variants" }), _jsx("li", { children: "Consistent sizing for touch targets" })] })] })] })] }) }));
};
export default BadgeDocumentation;