Figure

1import * as React from "react";
2import "./figure.css";
3 
4export type FigurePlateProps = {
5  children: React.ReactNode;
6  /** Bold run-in phrase. Include its own full stop. */
7  lead: string;
8  caption: React.ReactNode;
9  id?: string;
10  /** Break out of a centred prose column to a wider measure. */
11  wide?: boolean;
12};
13 
14/**
15 * A figure plate with a run-in caption. The caption sits outside the plate
16 * and always opens with a bold run-in phrase — consistency is the point.
17 */
18export function FigurePlate({ children, lead, caption, id, wide = true }: FigurePlateProps) {
19  return (
20    <figure id={id} className={`moco-plate-wrap${wide ? " moco-breakout" : ""}`}>
21      <div className="moco-plate">{children}</div>
22      <figcaption className="moco-cap">
23        <b className="moco-lead-in">{lead}</b> {caption}
24      </figcaption>
25    </figure>
26  );
27}
28 
29export type EdTableProps = {
30  head: { label: string; numeric?: boolean }[];
31  rows: React.ReactNode[][];
32  /** Optional totals row, set off by a heavier rule. */
33  summary?: React.ReactNode[];
34  /** Bold run-in phrase for the caption. Include its own full stop. */
35  lead: string;
36  caption: React.ReactNode;
37  /** Index of the row to emphasise. */
38  bestIndex?: number;
39};
40 
41/** Editorial table: caption below, small-caps heads, hairline rules, no zebra. */
42export function EdTable({ head, rows, summary, lead, caption, bestIndex }: EdTableProps) {
43  return (
44    <table className="moco-ed">
45      <thead>
46        <tr>
47          {head.map((h) => (
48            <th key={h.label} className={h.numeric ? "moco-n" : undefined} scope="col">
49              {h.label}
50            </th>
51          ))}
52        </tr>
53      </thead>
54      <tbody>
55        {rows.map((r, i) => (
56          <tr key={i} data-best={i === bestIndex ? "true" : undefined}>
57            {r.map((c, j) => (
58              <td key={j} className={head[j]?.numeric ? "moco-n" : undefined}>
59                {c}
60              </td>
61            ))}
62          </tr>
63        ))}
64        {summary ? (
65          <tr className="moco-summary">
66            {summary.map((c, j) => (
67              <td key={j} className={head[j]?.numeric ? "moco-n" : undefined}>
68                {c}
69              </td>
70            ))}
71          </tr>
72        ) : null}
73      </tbody>
74      <caption>
75        <b className="moco-lead-in">{lead}</b> {caption}
76      </caption>
77    </table>
78  );
79}