docs: drop the method disclosure, keep the one caveat that earns its place

The "how these schools are chosen" panel restated what the section already
shows — the phase in the lede, the shared characteristics on each card, the
distance above each name — so it cost space to say nothing new.

One line survives, and it is not a method note. A reader who sees "0.6 miles
away" and takes it for the walk has been misled by us, and no other element
on the card corrects that. The rest were claims the selection rules keep
true without narrating them.

Also records what happens past the third school: surplus matches are dropped
silently, because NearbyPlaces below already leads to the full lists.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
TudorandClaude Opus 5 committed 2026-09-21 22:29:07 +01:00
1 parent 4d7762d796
commit b62dc17532
3 files changed
+46 -58

No files matched your search

@@ -41,6 +41,11 @@ Playwright.
`"Mixed"`, `"Boys"` or `"Girls"`.
- **Copy rule:** the lede says "with a similar intake" only when no card is
tier 3. A missing metric renders the exact string `Not published`.
- **No "how these schools are chosen" disclosure.** One caption line only:
distances are straight-line, not road distance.
- **Three cards maximum, with no overflow affordance.** Surplus qualifying
schools are dropped silently; `NearbyPlaces` below already leads to the full
lists.
- **The neighbour's metric never carries a valence colour.** No
`--status-above` / `--status-below` anywhere in this feature.
- **Backend tests:**
@@ -868,6 +873,12 @@ describe('cards', () => {
renderSection([school(), school({ urn: 100003 })]);
expect(screen.getByTestId('compare-bar')).toHaveTextContent('bar for 100001');
});
it('says distances are straight-line, and offers no method panel', () => {
const { container } = renderSection([school(), school({ urn: 100003 })]);
expect(screen.getByText(/straight-line from this school/i)).toBeInTheDocument();
expect(container.querySelector('details')).toBeNull();
});
});
```
@@ -1040,6 +1051,10 @@ Create `nextjs-app/components/school/SimilarSchoolsSection.tsx`:
* The lede only claims a similar intake when no card came from tier 3, and a
* card's chips list what that school actually shares rather than a match it
* did not earn.
*
* There is deliberately no "how these are chosen" panel: the method is already
* visible in the lede, the chips and the distances. The single caption line is
* not a method note — it is the one thing a card cannot self-correct.
*/
import Link from 'next/link';
@@ -1095,27 +1110,6 @@ export function SimilarSchoolsSection({
: `Other ${phaseNoun} schools near ${schoolName}, with a similar intake.`}
</p>
<details className={styles.method}>
<summary>How these schools are chosen</summary>
<div>
<p>
Schools of the same phase, nearest first, preferring those whose intake
resembles this one — gender, religious character, and whether the school
selects by ability. Special schools are only ever compared with other
special schools.
</p>
<p>
The labels on each card list what that school actually shares with this
one. Where nothing close enough was found nearby, the match is loosened
and the labels say less.
</p>
<p>
Distances are straight-line from this school, not road distance and not
from your home. Being listed here is not a recommendation.
</p>
</div>
</details>
<ul className={styles.grid}>
{schools.map((school) => (
<li key={school.urn} className={styles.school}>
@@ -1158,6 +1152,13 @@ export function SimilarSchoolsSection({
</ul>
<SimilarSchoolsCompareBar thisUrn={urn} candidates={schools} />
{/* The one caveat the cards cannot make on their own: a reader who takes
"0.6 miles away" for the walk has been misled, and nothing else here
corrects that. */}
<p className={styles.caption}>
Distances are straight-line from this school, not road distance.
</p>
</Section>
);
}
@@ -1170,13 +1171,8 @@ Create `nextjs-app/components/school/SimilarSchools.module.css`. Tokens only —
```css
.heading { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: -0.4px; margin: 0; }
.lede { margin: 0.5rem 0 0; color: var(--text-secondary); max-width: 64ch; }
.method { margin: 0.9rem 0 1.4rem; }
.method summary { cursor: pointer; color: var(--brand); font-size: 0.85rem; font-weight: 500; width: fit-content; }
.method div { margin-top: 0.6rem; padding: 0.9rem 1rem; background: var(--bg-secondary); border-radius: 8px; }
.method p { margin: 0 0 0.55rem; font-size: 0.82rem; color: var(--text-secondary); max-width: 70ch; }
.method p:last-child { margin-bottom: 0; }
.lede { margin: 0.5rem 0 1.25rem; color: var(--text-secondary); max-width: 64ch; }
.caption { margin: 1rem 0 0; font-size: 0.72rem; color: var(--text-muted); }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; list-style: none; margin: 0; padding: 0; }
@media (max-width: 820px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }