Scorecard Template

1import * as React from 'react';
2 
3// @interlace/scorecard-template v1.1.0 — Interlace design system.
4// Docs, props and live preview: https://ds.interlace.tools/c/scorecard-template
5// What changed since: https://ds.interlace.tools/c/scorecard-template#history
6// Generated banner — keep it, the upgrade diff reads this version.
7 
8/**
9 * @interlace/ui — ScorecardTemplate
10 *
11 * Graded-evaluation page. Topbar + overall-grade header + per-dimension
12 * scorecard rows + optional methodology footnote + Footer.
13 *
14 * Used by `/scorecard`, plugin scorecards, Lighthouse-style reports.
15 * Each dimension row streams independently via SectionBoundary so the
16 * overall header paints while individual dimension details are still
17 * fetching.
18 *
19 * ## MIN_VIEWPORT — 320
20 */
21 
22import { cn } from '@/lib/utils';
23import { Container } from '@/components/ui/container';
24import { GradeBadge, type GradeValue } from '@/components/ui/grade-badge';
25import { SectionBoundary } from '@/components/ui/section-boundary';
26import { Stack } from '@/components/ui/stack';
27import { Typography } from '@/components/ui/typography';
28import { Topbar } from '@/components/ui/patterns/topbar';
29import { Footer } from '@/components/ui/patterns/footer';
30import { ScorecardRow } from '@/components/ui/patterns/scorecard-row';
31import { Skeleton } from '@/components/ui/skeleton';
32 
33export const MIN_VIEWPORT = 320 as const;
34 
35interface ScorecardDimension {
36  name: React.ReactNode;
37  grade: GradeValue;
38  score: number;
39  caption?: React.ReactNode;
40  details?: React.ReactNode;
41}
42 
43interface ScorecardTemplateProps extends Omit<React.ComponentProps<'div'>, 'title'> {
44  topbar: React.ComponentProps<typeof Topbar>;
45  /** Page title. */
46  title: React.ReactNode;
47  /** One-paragraph lead under the title. */
48  lead?: React.ReactNode;
49  /** Overall result — drives the hero grade pill at the top. */
50  overall?: {
51    grade: GradeValue;
52    score: number;
53    /** Optional caption next to the overall grade (e.g. "92% pass rate"). */
54    caption?: React.ReactNode;
55  };
56  /** Per-dimension scores. */
57  dimensions?: ScorecardDimension[];
58  /**
59   * Optional methodology footnote — explains how scores are computed.
60   * Rendered as a muted block under the body.
61   */
62  methodology?: React.ReactNode;
63  footer?: React.ComponentProps<typeof Footer>;
64}
65 
66function ScorecardTemplate({
67  topbar,
68  title,
69  lead,
70  overall,
71  dimensions = [],
72  methodology,
73  footer,
74  className,
75  ...props
76}: ScorecardTemplateProps) {
77  return (
78// … truncated