Extract shared BackLink and adopt on detail pages

The workout, values, score, and medication detail pages each hand-rolled
the same ghost Button + Link + ArrowLeft back-nav block. Fold it into a
single BackLink (href + label + optional data-slot) so the affordance
reads identically — same hit area, icon, and left-bleed alignment — on
every page and lives in one place. Each page passes its existing label
translation, so no new i18n keys are introduced and the markup stays
byte-identical.
This commit is contained in:
Marc-André Bombeck committed 2026-06-14 17:21:45 +02:00
1 parent cc34cbd03d
commit e2f37bbe40
6 files changed
+109 -55

No files matched your search

@@ -0,0 +1,38 @@
import { describe, expect, it } from "vitest";
import { renderToStaticMarkup } from "react-dom/server";
import { BackLink } from "../back-link";
describe("<BackLink>", () => {
it("renders an anchor to the href carrying the label", () => {
const html = renderToStaticMarkup(
<BackLink href="/insights/workouts" label="Back to workouts" />,
);
expect(html).toContain('href="/insights/workouts"');
expect(html).toContain("Back to workouts");
// The decorative chevron is hidden from screen readers; the label
// carries the meaning.
expect(html).toContain('aria-hidden="true"');
});
it("keeps the shared left-bleed alignment on the control", () => {
const html = renderToStaticMarkup(
<BackLink href="/medications" label="Back" />,
);
// The `-ml-2 w-fit` left-bleed is the standard back-nav placement; it
// must survive on every adopting page.
expect(html).toContain("-ml-2");
expect(html).toContain("w-fit");
});
it("threads the optional data-slot for e2e/visual targeting", () => {
const html = renderToStaticMarkup(
<BackLink
href="/insights"
label="Back"
dataSlot="composite-score-back"
/>,
);
expect(html).toContain('data-slot="composite-score-back"');
});
});