Wave-5 refinement round 5 (owner): glyph-shaped SVG marks, vertically centered

- Option rows: items-start → items-center — the icon span's top-misalign
  came from the row alignment; now marks center across the row.
- The literal ✓/✗ look (owner preference over the round-3 lucide set)
  re-rendered as hand-rolled SVG with thick rounded strokes (strokeWidth
  3, round caps/joins) — the glyph shape, as a true vector, sized like
  the row text. Test pins updated to data-mark=check|x.
This commit is contained in:
amosblomqvist
2026-09-13 01:57:17 +03:00
parent 5f4d962168
commit cdc697749c
2 changed files with 24 additions and 11 deletions
+3 -3
View File
@@ -168,8 +168,8 @@ describe("render smoke tests", () => {
const html = renderToStaticMarkup(<AnsweredCard answer={answer} />);
assert.match(html, /incorrect/);
assert.match(html, /innermost/, "explanation renders post-answer");
// Vector marks (lucide SVG) — not glyphs — sized like the row text (owner).
assert.ok(html.includes("lucide-check") && html.includes("lucide-x"));
// Glyph-shaped SVG marks (owner preference) — pinned via data-mark.
assert.ok(html.includes('data-mark="check"') && html.includes('data-mark="x"'));
});
it("AnsweredCard renders the learner's own Other answer AS an option row", () => {
@@ -214,7 +214,7 @@ describe("render smoke tests", () => {
};
const answer = buildAnswer(qd, { values: ["Somewhat"] });
const html = renderToStaticMarkup(<AnsweredCard answer={answer} />);
assert.ok(!html.includes("incorrect") && !html.includes("lucide-x"), "ask answers never get quiz grading UI");
assert.ok(!html.includes("incorrect") && !html.includes('data-mark="x"'), "ask answers never get quiz grading UI");
assert.match(html, /Somewhat/);
});