e74c285b70
Major feature migration from dt-shopify-storefront into the design system: - Card system: per-card color modes (normal/emphasis/warning/success/other), progress bars, full-bleed card body (card-body-flush), image bevel clip-paths, and visible structural borders at bevel corners - Badge system: dt-card-badge with position-aware offsets for cards vs media frames - Media frames: dt-bevel-media with inner surface fill, image clipping, and "MISSING MEDIA" placeholder for empty containers - Interactive bevel buttons: dt-btn with hover/selected states and pulse animation - Menu items: dt-menu-item with active states and level indentation - Animations: scale-in, fade-in, slide-up, pulse, ping, spin keyframes - Feature legend: CSS grid for product feature icons with state colors - Scrollbar styling for DT brand - New @dangerousthings/react package wrapping web CSS components - New @dangerousthings/tailwind-preset package - New @dangerousthings/hex-background package - Desktop showcase rewritten in React with Tailwind CSS - Mobile showcase updated with new screens (animations, filters, advanced cards) - Tokens: added mode color tokens, RGB variants, and selected-state tokens Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
67 lines
1.7 KiB
TypeScript
67 lines
1.7 KiB
TypeScript
/**
|
||
* DTCard — Beveled card with header, progress bar, and mode colors.
|
||
*
|
||
* CSS reference: bevels.css .card / .dt-bevel-card, .card-title,
|
||
* ::after progress bar, .mode-*
|
||
*
|
||
* The progress bar is a structural element on the left edge (0 to bevel-sm).
|
||
* It is always present. At 0 progress it shows surface color (empty bar).
|
||
* As progress increases, accent color fills from the bottom up.
|
||
*/
|
||
|
||
import type { ReactNode, CSSProperties } from 'react';
|
||
import type { DTVariant } from '@dangerousthings/tokens';
|
||
import { cx } from '../utils/cx';
|
||
import { getVariantClass } from '../utils/variantClasses';
|
||
|
||
interface DTCardProps {
|
||
children: ReactNode;
|
||
/** Color variant @default 'normal' */
|
||
variant?: DTVariant;
|
||
/** Card title (displayed in header bar) */
|
||
title?: string;
|
||
/** Whether to show the accent header bar @default true when title is provided */
|
||
showHeader?: boolean;
|
||
/** Progress value (0–100) for left-edge vertical progress bar @default 0 */
|
||
progress?: number;
|
||
className?: string;
|
||
style?: CSSProperties;
|
||
onClick?: () => void;
|
||
}
|
||
|
||
export function DTCard({
|
||
children,
|
||
variant = 'normal',
|
||
title,
|
||
showHeader,
|
||
progress = 0,
|
||
className,
|
||
style,
|
||
onClick,
|
||
}: DTCardProps) {
|
||
const shouldShowHeader = showHeader ?? !!title;
|
||
const Tag = onClick ? 'button' : 'div';
|
||
|
||
return (
|
||
<Tag
|
||
className={cx(
|
||
'card',
|
||
getVariantClass(variant),
|
||
className,
|
||
)}
|
||
style={{
|
||
...style,
|
||
'--dt-card-progress': progress,
|
||
} as CSSProperties}
|
||
onClick={onClick}
|
||
type={onClick ? 'button' : undefined}>
|
||
{shouldShowHeader && (
|
||
<div className="card-title">
|
||
{title}
|
||
</div>
|
||
)}
|
||
{children}
|
||
</Tag>
|
||
);
|
||
}
|