site/views.tsx

Functions

Imports

It imports site/data.ts, site/markdown.ts, site/parts.tsx. Imported by site/main.tsx.

Source

1// The site's type, motion, tests, defaults, changes and settings views (main.tsx).
2
3import { useState, type ReactNode } from "react";
4import { COMPONENTS, SCALES } from "./data.ts";
5import { renderMarkdown } from "./markdown.ts";
6import { Panel, TestList, Verdict, paint, useResults } from "./parts.tsx";
7
8function ScaleTable({ group, render }: { group: string; render?: (name: string, value: unknown) => ReactNode }) {
9  const rows = Object.entries(SCALES[group] ?? {});
10  const show = (v: unknown) => (typeof v === "object" && v && "value" in (v as object) ? `${(v as { value: number }).value}${(v as { unit?: string }).unit ?? ""}` : Array.isArray(v) ? `cubic-bezier(${v.join(", ")})` : String(v));
11  return (
12    <div className="cap-table-wrap" role="region" tabIndex={0} aria-label={`${group} tokens`}>
13      <table className="cap-table">
14        <thead>
15          <tr>
16            <th scope="col">Token</th>
17            <th scope="col">Value</th>
18            {render ? <th scope="col">Sample</th> : null}
19            <th scope="col">For</th>
20          </tr>
21        </thead>
22        <tbody>
23          {rows.map(([name, t]) => (
24            <tr key={name}>
25              <td className="cap-mono">--{name}</td>
26              <td className="cap-mono">{show(t.$value)}</td>
27              {render ? <td>{render(name, t.$value)}</td> : null}
28              <td className="cap-muted">{t.$description}</td>
29            </tr>
30          ))}
31        </tbody>
32      </table>
33    </div>
34  );
35}
36
37export function TypeView() {
38  return (
39    <div className="site-page">
40      <div className="site-head">
41        <h1>Type and space</h1>
42        <p>Schibsted Grotesk for app chrome, Martian Mono for identifiers, Source Serif 4 for long-form text. App body text is 13 px; a reading page's body is 17 to 19 px with a 66-character measure.</p>
43      </div>
44      <Panel title="Type" id="type">
45        <ScaleTable group="type" render={(name) => (name.startsWith("fs-") ? <span className="site-type-sample" ref={paint("font-size", `var(--${name})`)}>Phage λ and φX174</span> : null)} />
46      </Panel>
47      <Panel title="Reading context" id="prose">
48        <div data-context="prose" className="site-prose-sample">
49          <h2>How a temperate phage decides</h2>
50          <p>
51            A temperate phage such as λ does not always kill the cell it enters. In <i>Escherichia coli</i> the outcome turns on two proteins, CI and Cro, each of which shuts off the gene for the other. Small lytic phages such as φX174 have no such switch. Sample text.
52          </p>
53        </div>
54      </Panel>
55      <Panel title="Space" id="space">
56        <ScaleTable group="space" render={(name) => <i className="site-space" ref={paint("--w", `var(--${name})`)} />} />
57      </Panel>
58      <Panel title="Density" id="density" src="data-density on the root or any element; compact is the default">
59        <ScaleTable group="density-compact" />
60        <ScaleTable group="density-comfortable" />
61      </Panel>
62      <Panel title="Radius, control size, layers, focus, layout" id="other">
63        <ScaleTable group="radius" render={(name) => <i className="site-radius" ref={paint("border-radius", `var(--${name})`)} />} />
64        <ScaleTable group="control" />
65        <ScaleTable group="layer" />
66        <ScaleTable group="focus" />
67        <ScaleTable group="layout" />
68      </Panel>
69    </div>
70  );
71}
72
73export function MotionView() {
74  const [played, setPlayed] = useState(false);
75  return (
76    <div className="site-page">
77      <div className="site-head">
78        <h1>Motion</h1>
79        <p>Motion explains a change. Three durations and three easings: things arrive on the long ease-out and leave faster than they came, a press springs back, and pages and themes crossfade. With reduced motion on, the dots below jump instead of travelling, and nothing in Capsomer moves at all.</p>
80      </div>
81      <Panel title="Durations" id="durations" src={<button type="button" className="cap-btn" onClick={() => setPlayed((p) => !p)} aria-pressed={played}>Play</button>}>
82        <div className="site-motion" data-played={played ? "" : undefined}>
83          {["dur-fast", "dur-base", "dur-slow"].map((d) => (
84            <div key={d}>
85              <span className="cap-mono">--{d}</span>
86              <div className="site-track" ref={paint("--d", `var(--${d})`)}>
87                <i />
88              </div>
89            </div>
90          ))}
91        </div>
92      </Panel>
93      <Panel title="Every motion token" id="motion">
94        <ScaleTable group="motion" />
95      </Panel>
96    </div>
97  );
98}
99
100export function TestsView() {
101  const RESULTS = useResults();
102  const entries = Object.entries(RESULTS.components).sort(([, a], [, b]) => b.keyboard.failed + b.accessibility.failed + b.behaviour.failed - (a.keyboard.failed + a.accessibility.failed + a.behaviour.failed));
103  return (
104    <div className="site-page">
105      <div className="site-head">
106        <h1>Tests</h1>
107        <p>Every component's keyboard, accessibility and behavior tests from the last run, in both themes, failures first. Accessibility and keyboard failures block a merge; nothing about a color or a layout does.</p>
108      </div>
109      {!RESULTS.available ? (
110        <div className="cap-empty" data-kind="nothing-yet">
111          <b>No test run is recorded in this build</b>
112          <span className="cap-muted">CI runs the tests on every push to main and builds this page from the results.</span>
113        </div>
114      ) : (
115        entries.map(([name, r]) => (
116          <Panel key={name} title={COMPONENTS.find((c) => c.name === name)?.title ?? name} id={`t-${name}`} src={<Verdict passed={r.keyboard.passed + r.accessibility.passed + r.behaviour.passed} failed={r.keyboard.failed + r.accessibility.failed + r.behaviour.failed} />}>
117            <TestList rows={r.tests} />
118          </Panel>
119        ))
120      )}
121    </div>
122  );
123}
124
125export function MarkdownView({ title, md }: { title: string; md: string }) {
126  return (
127    <div className="site-page">
128      <article className="site-doc" dangerouslySetInnerHTML={{ __html: renderMarkdown(md || `# ${title}\n\nNothing yet.`, 0) }} />
129    </div>
130  );
131}
132
133export function SettingsView() {
134  return (
135    <div className="site-page">
136      <div className="site-head">
137        <h1>Settings</h1>
138        <p>Preferences for this browser only. Nothing here is sent anywhere.</p>
139      </div>
140      <Panel title="Theme" id="theme">
141        <p>The Light and Dark switch at the right of the top bar changes the theme. The first visit follows your device; your first choice is remembered in this browser.</p>
142      </Panel>
143      <Panel title="Menu" id="rail">
144        <p>The button at the top of the left strip collapses the menu to icons, and the [ key does the same. This browser remembers the choice.</p>
145      </Panel>
146    </div>
147  );
148}
149