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>
46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
/**
|
||
* DTProgressBar — Angular progress bar (horizontal or vertical).
|
||
*
|
||
* CSS reference: forms-dt.css .dt-progress, .dt-progress-fill, .dt-progress-label
|
||
*/
|
||
|
||
import type { CSSProperties } from 'react';
|
||
import { cx } from '../utils/cx';
|
||
|
||
interface DTProgressBarProps {
|
||
/** Progress value (0–1) */
|
||
value: number;
|
||
/** Text label below/beside the bar */
|
||
label?: string;
|
||
/** Layout direction @default 'horizontal' */
|
||
direction?: 'horizontal' | 'vertical';
|
||
className?: string;
|
||
style?: CSSProperties;
|
||
}
|
||
|
||
export function DTProgressBar({
|
||
value,
|
||
label,
|
||
direction = 'horizontal',
|
||
className,
|
||
style,
|
||
}: DTProgressBarProps) {
|
||
const pct = Math.round(Math.max(0, Math.min(1, value)) * 100);
|
||
|
||
return (
|
||
<div className={className} style={style}>
|
||
<div className={cx('dt-progress', direction === 'vertical' && 'vertical')}>
|
||
<div
|
||
className="dt-progress-fill"
|
||
style={
|
||
direction === 'vertical'
|
||
? { height: `${pct}%` }
|
||
: { width: `${pct}%` }
|
||
}
|
||
/>
|
||
</div>
|
||
{label && <span className="dt-progress-label">{label}</span>}
|
||
</div>
|
||
);
|
||
}
|