react-vite-themes/dist/pages/Documentation/TypographyDocumentation.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 { Typography } from '../../components/atoms/Typography';
import { CodeBlock } from '../../components/atoms/CodeBlock';
import { Card } from '../../components/atoms/Card';
import { Icon } from '../../components/atoms/Icon';
import './ComponentDocumentation.scss';
const TypographyDocumentation = () => {
    const variants = [
        { name: 'h1', description: 'Main page headings' },
        { name: 'h2', description: 'Section headings' },
        { name: 'h3', description: 'Subsection headings' },
        { name: 'h4', description: 'Sub-subsection headings' },
        { name: 'h5', description: 'Small headings' },
        { name: 'h6', description: 'Smallest headings' },
        { name: 'p', description: 'Paragraph text' },
        { name: 'span', description: 'Inline text' },
        { name: 'div', description: 'Block container' }
    ];
    const sizes = [
        { name: 'xs', description: 'Extra small text (12px)' },
        { name: 'sm', description: 'Small text (14px)' },
        { name: 'md', description: 'Medium text (16px)' },
        { name: 'lg', description: 'Large text (18px)' },
        { name: 'xl', description: 'Extra large text (20px)' },
        { name: '2xl', description: '2X large text (24px)' },
        { name: '3xl', description: '3X large text (30px)' },
        { name: '4xl', description: '4X large text (36px)' }
    ];
    const weights = [
        { name: 'light', description: 'Light font weight' },
        { name: 'normal', description: 'Normal font weight' },
        { name: 'medium', description: 'Medium font weight' },
        { name: 'semibold', description: 'Semi-bold font weight' },
        { name: 'bold', description: 'Bold font weight' },
        { name: 'extrabold', description: 'Extra bold font weight' }
    ];
    const colors = [
        { name: 'primary', description: 'Primary text color' },
        { name: 'secondary', description: 'Secondary text color' },
        { name: 'muted', description: 'Muted text color' },
        { name: 'accent', description: 'Accent color' },
        { name: 'success', description: 'Success color' },
        { name: 'warning', description: 'Warning color' },
        { name: 'error', description: 'Error color' },
        { name: 'inherit', description: 'Inherit parent color' }
    ];
    const alignments = [
        { name: 'left', description: 'Left alignment' },
        { name: 'center', description: 'Center alignment' },
        { name: 'right', description: 'Right alignment' },
        { name: 'justify', description: 'Justified alignment' }
    ];
    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: "Typography Component" }), _jsx("p", { className: "component-description", children: "A flexible typography component that maintains semantic HTML structure while providing consistent design system styling. Supports headings, paragraphs, and inline text with various sizes, weights, colors, and alignments." })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "import-section", children: [_jsx("h2", { children: "Import" }), _jsx(CodeBlock, { code: "import { Typography } from 'react-vite-themes';", 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 typography-doc-example", children: [_jsx(Typography, { variant: "h1", size: "3xl", weight: "bold", children: "Main Heading" }), _jsx(Typography, { variant: "h2", size: "2xl", weight: "semibold", children: "Section Heading" }), _jsx(Typography, { variant: "p", size: "lg", color: "secondary", children: "This is a paragraph with secondary color and large size." })] }), _jsx(CodeBlock, { code: `<Typography variant="h1" size="3xl" weight="bold">
  Main Heading
</Typography>
<Typography variant="h2" size="2xl" weight="semibold">
  Section Heading
</Typography>
<Typography variant="p" size="lg" color="secondary">
  This is a paragraph with secondary color and large size.
</Typography>`, language: "tsx" })] })] }), _jsxs("section", { className: "variants-section", children: [_jsx("h2", { children: "Variants" }), _jsx("p", { children: "Typography variants define the semantic HTML element to render." }), _jsx("div", { className: "variants-grid", children: variants.map((variant) => (_jsxs(Card, { variant: "neutral", style: "elevated", className: "variant-card", children: [_jsx("h3", { children: variant.name.toUpperCase() }), _jsx("p", { children: variant.description }), _jsx("div", { className: "example", children: _jsxs(Typography, { variant: variant.name, size: "md", weight: "normal", children: [variant.name.charAt(0).toUpperCase() + variant.name.slice(1), " Example"] }) })] }, variant.name))) })] }), _jsxs("section", { className: "sizes-section", children: [_jsx("h2", { children: "Sizes" }), _jsx("p", { children: "Typography sizes control the font size and line height." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("div", { className: "example-content typography-doc-example", children: sizes.map((size) => (_jsxs(Typography, { variant: "p", size: size.name, weight: "normal", children: [size.name.toUpperCase(), " - ", size.description] }, size.name))) }), _jsx(CodeBlock, { code: `<Typography variant="p" size="xs">Extra Small</Typography>
<Typography variant="p" size="sm">Small</Typography>
<Typography variant="p" size="md">Medium</Typography>
<Typography variant="p" size="lg">Large</Typography>
<Typography variant="p" size="xl">Extra Large</Typography>
<Typography variant="p" size="2xl">2X Large</Typography>
<Typography variant="p" size="3xl">3X Large</Typography>
<Typography variant="p" size="4xl">4X Large</Typography>`, language: "tsx" })] })] }), _jsxs("section", { className: "weights-section", children: [_jsx("h2", { children: "Font Weights" }), _jsx("p", { children: "Font weights control the thickness of the text." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("div", { className: "example-content typography-doc-example", children: weights.map((weight) => (_jsxs(Typography, { variant: "p", size: "lg", weight: weight.name, children: [weight.name.charAt(0).toUpperCase() + weight.name.slice(1), " - ", weight.description] }, weight.name))) }), _jsx(CodeBlock, { code: `<Typography variant="p" weight="light">Light</Typography>
<Typography variant="p" weight="normal">Normal</Typography>
<Typography variant="p" weight="medium">Medium</Typography>
<Typography variant="p" weight="semibold">Semi-bold</Typography>
<Typography variant="p" weight="bold">Bold</Typography>
<Typography variant="p" weight="extrabold">Extra Bold</Typography>`, language: "tsx" })] })] }), _jsxs("section", { className: "colors-section", children: [_jsx("h2", { children: "Colors" }), _jsx("p", { children: "Typography colors provide semantic meaning and visual hierarchy." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("div", { className: "example-content typography-doc-example", children: colors.map((color) => (_jsxs(Typography, { variant: "p", size: "md", color: color.name, children: [color.name.charAt(0).toUpperCase() + color.name.slice(1), " - ", color.description] }, color.name))) }), _jsx(CodeBlock, { code: `<Typography variant="p" color="primary">Primary</Typography>
<Typography variant="p" color="secondary">Secondary</Typography>
<Typography variant="p" color="muted">Muted</Typography>
<Typography variant="p" color="accent">Accent</Typography>
<Typography variant="p" color="success">Success</Typography>
<Typography variant="p" color="warning">Warning</Typography>
<Typography variant="p" color="error">Error</Typography>
<Typography variant="p" color="inherit">Inherit</Typography>`, language: "tsx" })] })] }), _jsxs("section", { className: "alignments-section", children: [_jsx("h2", { children: "Text Alignments" }), _jsx("p", { children: "Text alignment controls how text is positioned horizontally." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("div", { className: "example-content typography-doc-example", children: alignments.map((align) => (_jsx("div", { className: "alignment-example", children: _jsxs(Typography, { variant: "p", size: "md", align: align.name, children: [align.name.charAt(0).toUpperCase() + align.name.slice(1), " alignment - This text demonstrates how the ", align.name, " alignment works. It shows the positioning of text within its container."] }) }, align.name))) }), _jsx(CodeBlock, { code: `<Typography variant="p" align="left">Left aligned text</Typography>
<Typography variant="p" align="center">Center aligned text</Typography>
<Typography variant="p" align="right">Right aligned text</Typography>
<Typography variant="p" align="justify">Justified text that spreads across the full width</Typography>`, language: "tsx" })] })] }), _jsxs("section", { className: "advanced-section", children: [_jsx("h2", { children: "Advanced Examples" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("h3", { children: "Heading Hierarchy" }), _jsxs("div", { className: "example-content typography-doc-example", children: [_jsx(Typography, { variant: "h1", size: "4xl", weight: "bold", color: "primary", children: "Page Title" }), _jsx(Typography, { variant: "h2", size: "3xl", weight: "semibold", children: "Section Heading" }), _jsx(Typography, { variant: "h3", size: "2xl", weight: "medium", children: "Subsection" }), _jsx(Typography, { variant: "p", size: "lg", color: "secondary", children: "This demonstrates proper heading hierarchy for accessibility and SEO." })] }), _jsx(CodeBlock, { code: `<Typography variant="h1" size="4xl" weight="bold" color="primary">
  Page Title
</Typography>
<Typography variant="h2" size="3xl" weight="semibold">
  Section Heading
</Typography>
<Typography variant="h3" size="2xl" weight="medium">
  Subsection
</Typography>
<Typography variant="p" size="lg" color="secondary">
  This demonstrates proper heading hierarchy for accessibility and SEO.
</Typography>`, language: "tsx" })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("h3", { children: "Mixed Content" }), _jsxs("div", { className: "example-content typography-doc-example", children: [_jsx(Typography, { variant: "h2", size: "2xl", weight: "bold", align: "center", children: "Welcome to Our Platform" }), _jsx(Typography, { variant: "p", size: "lg", align: "center", color: "secondary", children: "Discover amazing features and capabilities" }), _jsx(Typography, { variant: "span", size: "sm", color: "accent", weight: "medium", children: "Get started today \u2192" })] }), _jsx(CodeBlock, { code: `<Typography variant="h2" size="2xl" weight="bold" align="center">
  Welcome to Our Platform
</Typography>
<Typography variant="p" size="lg" align="center" color="secondary">
  Discover amazing features and capabilities
</Typography>
<Typography variant="span" size="sm" color="accent" weight="medium">
  Get started today →
</Typography>`, language: "tsx" })] })] }), _jsxs("section", { className: "props-section", children: [_jsx("h2", { children: "Props" }), _jsx(Card, { variant: "neutral", style: "elevated", 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: _jsx("code", { children: "variant" }) }), _jsx("td", { children: _jsx("code", { children: "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div'" }) }), _jsx("td", { children: _jsx("code", { children: "'p'" }) }), _jsx("td", { children: "HTML element to render" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "size" }) }), _jsx("td", { children: _jsx("code", { children: "'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'" }) }), _jsx("td", { children: _jsx("code", { children: "'md'" }) }), _jsx("td", { children: "Font size variant" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "weight" }) }), _jsx("td", { children: _jsx("code", { children: "'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold'" }) }), _jsx("td", { children: _jsx("code", { children: "'normal'" }) }), _jsx("td", { children: "Font weight" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "color" }) }), _jsx("td", { children: _jsx("code", { children: "'primary' | 'secondary' | 'muted' | 'accent' | 'success' | 'warning' | 'error' | 'inherit'" }) }), _jsx("td", { children: _jsx("code", { children: "'inherit'" }) }), _jsx("td", { children: "Text color" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "align" }) }), _jsx("td", { children: _jsx("code", { children: "'left' | 'center' | 'right' | 'justify'" }) }), _jsx("td", { children: _jsx("code", { children: "'left'" }) }), _jsx("td", { children: "Text alignment" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "className" }) }), _jsx("td", { children: _jsx("code", { children: "string" }) }), _jsx("td", { children: _jsx("code", { children: "-" }) }), _jsx("td", { children: "Additional CSS classes" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "children" }) }), _jsx("td", { children: _jsx("code", { children: "React.ReactNode" }) }), _jsx("td", { children: _jsx("code", { children: "-" }) }), _jsx("td", { children: "Content to display" })] })] })] }) }) })] }), _jsxs("section", { className: "best-practices-section", children: [_jsx("h2", { children: "Best Practices" }), _jsx(Card, { variant: "neutral", style: "elevated", children: _jsxs("ul", { children: [_jsxs("li", { children: [_jsx("strong", { children: "Use semantic variants:" }), " Use h1, h2, h3, etc. for headings to maintain document structure and accessibility."] }), _jsxs("li", { children: [_jsx("strong", { children: "Maintain hierarchy:" }), " Follow proper heading hierarchy (h1 \u2192 h2 \u2192 h3) for SEO and screen readers."] }), _jsxs("li", { children: [_jsx("strong", { children: "Consistent sizing:" }), " Stick to your design system's size scale for consistency."] }), _jsxs("li", { children: [_jsx("strong", { children: "Color contrast:" }), " Ensure sufficient color contrast for readability."] }), _jsxs("li", { children: [_jsx("strong", { children: "Responsive design:" }), " The component automatically adjusts for mobile devices."] }), _jsxs("li", { children: [_jsx("strong", { children: "Avoid over-styling:" }), " Let the component handle styling, focus on content and semantics."] })] }) })] })] }) }));
};
export default TypographyDocumentation;