feat(destinations): the After Year 11 section

Question cards over one bar, with the cards acting as a lens on the bar
rather than a summary beside it — focusing a card dims everything it is
not made of, so the grouping we chose is inspectable rather than asserted.

The bar renders only when canRenderBar allows it. Where a category is
withheld the section says so and shows the table instead: the categories
sum to the cohort, so a bar drawn from the published segments leaves a
gap whose width is the withheld figure.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BvdDKvFFSZuMVDH5fEyTob

nextjs-app/__tests__/components/DestinationsSection.test.tsx

@@ -0,0 +1,92 @@
+import { render, screen } from '@testing-library/react';
+import { DestinationsSection } from '@/components/school/DestinationsSection';
+import type { DestinationPhase } from '@/lib/types';
+import type { DestinationCategory, DestinationStatus } from '@/lib/destinations';
+
+const cell = (
+  category: DestinationCategory,
+  pupils: number | null,
+  status: DestinationStatus = 'published',
+) => ({
+  category, pupils,
+  percentage: pupils === null ? null : (pupils / 180) * 100,
+  status,
+});
+
+const ALL_PUBLISHED = [
+  cell('school_sixth_form', 75), cell('sixth_form_college', 21),
+  cell('further_education', 55), cell('other_education', 6),
+  cell('apprenticeship', 8), cell('employment', 6),
+  cell('not_sustained', 5), cell('not_captured', 4),
+];
+
+const fullPhase: DestinationPhase = {
+  cohort_year: '2022/23',
+  groups: { all: { cohort: 180, categories: ALL_PUBLISHED, aggregates: {} } },
+};
+
+const suppressedPhase: DestinationPhase = {
+  cohort_year: '2022/23',
+  groups: {
+    all: {
+      cohort: 180,
+      categories: [
+        cell('school_sixth_form', 75), cell('sixth_form_college', null, 'suppressed'),
+        cell('further_education', 55), cell('other_education', 6),
+        cell('apprenticeship', 8), cell('employment', 6),
+        cell('not_sustained', 5), cell('not_captured', 4),
+      ],
+      aggregates: {},
+    },
+  },
+};
+
+describe('DestinationsSection', () => {
+  it('dates its own cohort so it is not read as stale next to the GCSE section', () => {
+    render(<DestinationsSection destinations={fullPhase} />);
+    expect(screen.getByText(/2022\/23/)).toBeInTheDocument();
+  });
+
+  it('renders one bar segment per published category', () => {
+    const { container } = render(<DestinationsSection destinations={fullPhase} />);
+    expect(container.querySelectorAll('[data-destination-segment]')).toHaveLength(8);
+  });
+
+  it('renders NO bar at all when a category is withheld', () => {
+    const { container } = render(<DestinationsSection destinations={suppressedPhase} />);
+    // R1: a bar with a gap in it publishes the withheld figure by its width.
+    expect(container.querySelectorAll('[data-destination-segment]')).toHaveLength(0);
+    expect(screen.getAllByText(/withheld/i).length).toBeGreaterThan(0);
+  });
+
+  it('never states the remainder for a partially suppressed group', () => {
+    const { container } = render(<DestinationsSection destinations={suppressedPhase} />);
+    // 180 cohort - 159 published = 21, the withheld figure. It must appear nowhere.
+    expect(container.textContent).not.toMatch(/\b21\b/);
+  });
+
+  it('shows a card value for a group whose components are all published', () => {
+    render(<DestinationsSection destinations={fullPhase} />);
+    // academic route = 75 + 21 = 96 of 180 = 53%
+    expect(screen.getByText('53%')).toBeInTheDocument();
+  });
+
+  it('refuses a card value when one of its components is withheld', () => {
+    render(<DestinationsSection destinations={suppressedPhase} />);
+    // academic route needs sixth_form_college, which is suppressed.
+    expect(screen.getByText(/not published/i)).toBeInTheDocument();
+    expect(screen.queryByText('53%')).not.toBeInTheDocument();
+  });
+
+  it('never claims a pupil stayed at this school', () => {
+    const { container } = render(<DestinationsSection destinations={fullPhase} />);
+    // The published file reports destination TYPE, never destination institution.
+    expect(container.textContent).not.toMatch(/stayed on (here|at this school)/i);
+  });
+
+  it('renders nothing when no group carries categories', () => {
+    const empty: DestinationPhase = { cohort_year: '2022/23', groups: {} };
+    const { container } = render(<DestinationsSection destinations={empty} />);
+    expect(container.firstChild).toBeNull();
+  });
+});